/* ==========================================================================
   一页工作台 · 全局样式
   纸感底色 / 墨蓝与棕色的类笔记本视觉系统
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 变量与基础
   -------------------------------------------------------------------------- */
:root {
  --bg: #faf8f2;
  --text: #2c3e50;
  --accent: #826347;
  --border: #e4ddd0;
  --card: #fffdf9;
  --texture-opacity: 0.045;
  --icon-stroke: 1.8;
  --radius: 18px;

  --paper: #faf8f2;
  --paper-deep: #f2eee3;
  --paper-soft: #f7f3e9;
  --panel: #fffdf9;
  --panel-muted: #fbf8f1;

  --ink: #2c3e50;
  --ink-soft: #596875;
  --ink-faint: #89918e;
  --brown: #826347;
  --brown-soft: #a88a66;
  --brown-faint: #c9b696;

  --line: #e4ddd0;
  --line-strong: #cec4b3;
  --line-dashed: #d9d0c1;

  --green: #617864;
  --green-soft: #eef2ec;
  --danger: #9d4d45;
  --danger-soft: #fbf0ee;
  --warning-soft: #fbf4e6;

  --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 18px 44px rgba(44, 62, 80, 0.055), 0 2px 7px rgba(44, 62, 80, 0.035);
  --shadow-pop: 0 18px 48px rgba(44, 62, 80, 0.16);
  --shadow-small: 0 6px 18px rgba(44, 62, 80, 0.075);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shell: 1180px;

  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 手账系：牛皮纸。仍使用同一套变量骨架，只替换颜色与纹理强度。 */
html[data-theme="kraft"] {
  --bg: #efe3cd;
  --text: #3e3328;
  --accent: #8b5a36;
  --border: #d1bfa5;
  --card: #f9f0e1;
  --texture-opacity: 0.055;
  --icon-stroke: 1.8;

  --paper: #efe3cd;
  --paper-deep: #e5d6be;
  --paper-soft: #f2e7d4;
  --panel: #f9f0e1;
  --panel-muted: #f3e7d5;
  --ink: #3e3328;
  --ink-soft: #655547;
  --ink-faint: #8d7c69;
  --brown: #8b5a36;
  --brown-soft: #a87a55;
  --brown-faint: #c5a983;
  --line: #d8c7ad;
  --line-strong: #c4b095;
  --line-dashed: #d3c1a7;
  --shadow-paper: 0 1px 0 rgba(255, 250, 240, 0.55) inset,
    0 18px 44px rgba(70, 47, 26, 0.08), 0 2px 7px rgba(70, 47, 26, 0.05);
}

/* 现代系：浅灰工作区。纸纹压低，图标线宽变细。 */
html[data-theme="gray"] {
  --bg: #eef0f1;
  --text: #26323a;
  --accent: #526a7a;
  --border: #d4d9dc;
  --card: #fbfcfc;
  --texture-opacity: 0.012;
  --icon-stroke: 1.5;

  --paper: #eef0f1;
  --paper-deep: #e5e8ea;
  --paper-soft: #f3f5f5;
  --panel: #fbfcfc;
  --panel-muted: #f5f7f7;
  --ink: #26323a;
  --ink-soft: #5b6972;
  --ink-faint: #8b969b;
  --brown: #546b79;
  --brown-soft: #768b96;
  --brown-faint: #a9b5bb;
  --line: #d9dedf;
  --line-strong: #c5cdd0;
  --line-dashed: #d3d9db;
  --green: #5f7a6a;
  --green-soft: #edf2ef;
  --danger: #9c5751;
  --danger-soft: #f7eded;
  --warning-soft: #f6f1e8;
  --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 18px 44px rgba(38, 50, 58, 0.05), 0 2px 7px rgba(38, 50, 58, 0.03);
  --shadow-small: 0 6px 18px rgba(38, 50, 58, 0.06);
}

/* 现代系：夜间。 */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #22272a;
  --text: #e6e1d7;
  --accent: #b59672;
  --border: #3b4246;
  --card: #292f32;
  --texture-opacity: 0.015;
  --icon-stroke: 1.5;

  --paper: #22272a;
  --paper-deep: #2b3134;
  --paper-soft: #262c2f;
  --panel: #292f32;
  --panel-muted: #252b2e;
  --ink: #e6e1d7;
  --ink-soft: #b3b0a8;
  --ink-faint: #878d8e;
  --brown: #b59672;
  --brown-soft: #9a805e;
  --brown-faint: #5f574a;
  --line: #3a4144;
  --line-strong: #4a5256;
  --line-dashed: #42494c;
  --green: #8ba38d;
  --green-soft: #2d3730;
  --danger: #d38b81;
  --danger-soft: #3a2928;
  --warning-soft: #332f25;
  --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 44px rgba(0, 0, 0, 0.18), 0 2px 7px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.32);
  --shadow-small: 0 6px 18px rgba(0, 0, 0, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(99, 78, 50, var(--texture-opacity)) 0.7px, transparent 0.9px),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(44, 62, 80, var(--texture-opacity)) 31px,
      rgba(44, 62, 80, var(--texture-opacity)) 32px
    );
  background-size: 9px 9px, auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.72), transparent 42%),
    radial-gradient(ellipse at 88% 100%, rgba(225, 214, 192, 0.12), transparent 48%);
}

::selection {
  color: var(--ink);
  background: rgba(184, 157, 113, 0.28);
}

:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

img,
svg {
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--brown);
  text-decoration-color: rgba(130, 99, 71, 0.35);
  text-underline-offset: 3px;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}

a:hover {
  color: var(--ink);
  text-decoration-color: var(--brown);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.3;
}

button,
summary {
  -webkit-tap-highlight-color: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 62, 80, 0.24) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 10px;
  background: rgba(44, 62, 80, 0.23);
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------------------------------------------------------------
   2. 通用布局与辅助类
   -------------------------------------------------------------------------- */
.shell {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
}

.page-main {
  padding-bottom: 8px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  color: var(--panel);
  background: var(--ink);
  transform: translateY(-160%);
  transition: transform 160ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  vertical-align: -0.16em;
  overflow: visible;
  stroke-width: var(--icon-stroke, 1.8);
}

.icon--tiny {
  width: 13px;
  height: 13px;
}

.icon--sm {
  width: 15px;
  height: 15px;
}

.icon--lg {
  width: 26px;
  height: 26px;
}

.icon--xl {
  width: 42px;
  height: 42px;
}

.mono {
  font-family: var(--font-mono);
}

.text-muted {
  color: var(--ink-soft);
}

.text-faint {
  color: var(--ink-faint);
}

.nowrap {
  white-space: nowrap;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brown);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.eyebrow--plain::before {
  display: none;
}

.section-label {
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.muted-rule {
  height: 1px;
  border: 0;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   3. 顶部横帘
   -------------------------------------------------------------------------- */
.curtain {
  position: relative;
  width: 100%;
  height: 72px;
  overflow: hidden;
  border-top: 1px solid rgba(44, 62, 80, 0.2);
  border-bottom: 1px solid rgba(44, 62, 80, 0.2);
  color: var(--brown);
  background-color: #f5f0e4;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent 24%, transparent 72%, rgba(223, 211, 190, 0.2)),
    repeating-linear-gradient(90deg, transparent 0, transparent 37px, rgba(100, 81, 54, 0.032) 37px, rgba(100, 81, 54, 0.032) 38px),
    radial-gradient(circle at 18% 28%, rgba(124, 101, 68, 0.05) 0 0.8px, transparent 1px);
  background-size: auto, auto, 7px 7px;
  opacity: 0.98;
}

.curtain::before,
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(44, 62, 80, 0.13);
}

.curtain::before {
  top: 5px;
}

.curtain::after {
  bottom: 5px;
}

.curtain-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: min(var(--shell), calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
}

.curtain-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.curtain-art {
  display: block;
  width: 156px;
  height: auto;
  opacity: 0.79;
  filter: saturate(0.75);
}

.curtain-wordmark {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  border-left: 1px dashed rgba(130, 99, 71, 0.38);
  line-height: 1.3;
}

.curtain-wordmark strong {
  color: #53493d;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.curtain-wordmark small {
  margin-top: 2px;
  color: rgba(130, 99, 71, 0.72);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.19em;
}

.curtain-stitch {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 430px;
  opacity: 0.72;
}

.curtain-stitch::before {
  content: "";
  flex: 1;
  max-width: 360px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(130, 99, 71, 0.38) 0,
    rgba(130, 99, 71, 0.38) 3px,
    transparent 3px,
    transparent 8px
  );
}

.curtain-stitch i {
  width: 4px;
  height: 4px;
  border: 1px solid rgba(130, 99, 71, 0.55);
  border-radius: 50%;
  background: rgba(250, 248, 242, 0.55);
}

.curtain-stitch i:nth-child(2) {
  opacity: 0.72;
}

.curtain-stitch i:nth-child(3) {
  opacity: 0.4;
}

.curtain--compact {
  height: 56px;
}

.curtain--compact .curtain-art {
  width: 122px;
  opacity: 0.68;
}

.curtain--compact .curtain-wordmark strong {
  font-size: 12.5px;
}

.curtain--compact .curtain-wordmark small {
  font-size: 8px;
}

/* --------------------------------------------------------------------------
   4. 页眉信息栏
   -------------------------------------------------------------------------- */
.meta-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding-block: 12px;
  border-bottom: 1px dashed var(--line-dashed);
}

.meta-clock-block {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 10px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 17px,
      rgba(44, 62, 80, 0.035) 17px,
      rgba(44, 62, 80, 0.035) 18px
    ),
    rgba(255, 253, 249, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  text-decoration: none;
  transition:
    border-color 160ms var(--ease),
    background 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.meta-clock-block:hover {
  border-color: var(--brown-faint);
  background-color: var(--panel);
  box-shadow: 0 5px 12px rgba(44, 62, 80, 0.055);
  text-decoration: none;
}

.meta-clock-block:focus-visible {
  outline: 2px dashed var(--brown);
  outline-offset: 2px;
  border-color: var(--brown-soft);
  background-color: var(--panel);
}

.meta-date {
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.meta-time {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.meta-weather {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  justify-self: center;
  min-height: 34px;
  max-width: 100%;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  text-decoration: none;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}

.meta-weather:hover {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 253, 249, 0.7);
  text-decoration: none;
}

.meta-weather__icon {
  display: flex;
  color: var(--brown);
}

.meta-weather__icon .icon {
  width: 20px;
  height: 20px;
}

.meta-weather__temp {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.meta-weather__detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.meta-weather__sep {
  color: var(--line-strong);
}

.meta-weather__hint {
  display: flex;
  margin-left: 2px;
  color: var(--brown-soft);
  opacity: 0.72;
}

.meta-weather.is-loading {
  opacity: 0.66;
}

.meta-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 8px;
}

.theme-dock-mount {
  position: relative;
  display: flex;
  align-items: center;
}

.tool-index {
  position: relative;
}

.tool-index > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 253, 249, 0.72);
  font-size: 12.5px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}

.tool-index > summary::-webkit-details-marker,
.mini-menu > summary::-webkit-details-marker {
  display: none;
}

.tool-index > summary:hover {
  border-color: var(--brown-soft);
  background: var(--panel);
}

.tool-index[open] > summary {
  border-color: var(--brown-soft);
  background: var(--panel);
  box-shadow: var(--shadow-small);
}

.tool-index > summary .icon {
  color: var(--brown);
}

.tool-index > summary .chevron {
  margin-left: 2px;
  transition: transform 180ms var(--ease);
}

.tool-index[open] > summary .chevron {
  transform: rotate(180deg);
}

.tool-index__panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 80;
  width: 286px;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  animation: menu-in 160ms var(--ease) both;
}

.tool-index__label {
  padding: 7px 10px 6px;
  color: var(--ink-faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.tool-index__item {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
}

.tool-index__item:hover,
.tool-index__item:focus-visible {
  color: var(--ink);
  background: var(--paper-deep);
  text-decoration: none;
}

.tool-index__item .icon {
  color: var(--brown);
  width: 17px;
  height: 17px;
}

.tool-index__item strong {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
}

.tool-index__item small {
  display: block;
  margin-top: 1px;
  color: var(--ink-faint);
  font-size: 10px;
}

.tool-index__item::after {
  content: "↗";
  color: var(--brown-soft);
  font-size: 12px;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

.tool-index__item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.tool-index__mail {
  margin: 5px 6px 3px;
  padding: 8px 4px 7px;
  border-top: 1px dashed var(--line);
}

.tool-index__mail-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tool-index__mail-label .icon {
  color: var(--brown);
}

.tool-index__mail-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 5px;
}

.tool-index__mail-links a {
  display: flex;
  align-items: center;
  min-height: 25px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-soft);
  background: rgba(255, 253, 249, 0.55);
  font-size: 9.5px;
  text-decoration: none;
  transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
}

.tool-index__mail-links a:hover {
  color: var(--ink);
  border-color: var(--brown-faint);
  background: var(--paper-soft);
  text-decoration: none;
}

.tool-index__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 3px 6px 0;
  padding: 8px 10px;
  border-top: 1px dashed var(--line);
  border-radius: 0 0 7px 7px;
  color: var(--brown);
  font-size: 10.5px;
  font-weight: 650;
  text-decoration: none;
}

.tool-index__all:hover {
  color: var(--ink);
  background: var(--paper-deep);
  text-decoration: none;
}

.tool-index__all span {
  color: var(--brown-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}

.tool-index__foot {
  margin-top: 5px;
  padding: 7px 10px 4px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

/* 功能页的窄页眉 */
.page-meta {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding-block: 10px;
  border-bottom: 1px dashed var(--line-dashed);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.back-link .icon {
  color: var(--brown);
  transition: transform 160ms var(--ease);
}

.back-link:hover {
  color: var(--ink);
  text-decoration: none;
}

.back-link:hover .icon {
  transform: translateX(-2px);
}

.meta-divider {
  width: 1px;
  height: 15px;
  background: var(--line-strong);
}

.meta-page-title {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.meta-spacer {
  flex: 1;
}

.meta-clock-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meta-clock-inline .icon {
  color: var(--brown-soft);
  width: 14px;
  height: 14px;
}

.meta-mini-date {
  color: var(--ink-faint);
  font-size: 11.5px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. 标题、面板与页脚
   -------------------------------------------------------------------------- */
.page-heading {
  position: relative;
  max-width: 780px;
  padding: 38px 2px 28px;
}

.page-heading h1 {
  position: relative;
  margin-top: 11px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(31px, 4.1vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.page-heading p {
  max-width: 650px;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
}

.sketch-underline {
  display: block;
  width: min(310px, 56vw);
  height: 10px;
  margin-top: 7px;
  color: var(--brown-soft);
  overflow: visible;
}

.sketch-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.8;
}

.page-heading .heading-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 5px 9px;
  border: 1px dashed var(--line-dashed);
  border-radius: 6px;
  color: var(--ink-faint);
  font-size: 11px;
}

.paper-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-paper);
}

.paper-panel--taped::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 34px;
  z-index: 2;
  width: 74px;
  height: 14px;
  border-right: 1px dashed rgba(130, 99, 71, 0.22);
  border-left: 1px dashed rgba(130, 99, 71, 0.22);
  background: rgba(190, 169, 133, 0.23);
  transform: rotate(-1.2deg);
  pointer-events: none;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 24px 18px;
  border-bottom: 1px dashed var(--line-dashed);
}

.panel-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.01em;
}

.panel-head h2 .icon {
  color: var(--brown);
  width: 19px;
  height: 19px;
}

.panel-head p {
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1.6;
}

.panel-head__aside {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-top: 2px;
}

.panel-body {
  padding: 24px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 44px;
  padding: 21px 0 34px;
  border-top: 1px dashed var(--line-dashed);
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.035em;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brown);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.site-footer__brand .icon {
  width: 15px;
  height: 15px;
}

.site-footer__note {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-footer__note .icon {
  width: 12px;
  height: 12px;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   6. 按钮、表单、标签与提示
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 160ms var(--ease),
    background 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease),
    transform 160ms var(--ease);
}

.btn:hover {
  color: var(--ink);
  border-color: var(--brown-soft);
  background: var(--paper-soft);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  width: 16px;
  height: 16px;
}

.btn--primary {
  border-color: var(--ink);
  color: #fffdf8;
  background: var(--ink);
  box-shadow: 0 7px 15px rgba(44, 62, 80, 0.13);
}

.btn--primary:hover {
  color: #fffdf8;
  border-color: #1f2d3a;
  background: #223443;
}

.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

.btn--outline:hover {
  background: rgba(44, 62, 80, 0.055);
}

.btn--ghost {
  border-color: transparent;
  color: var(--ink-soft);
  background: transparent;
  box-shadow: none;
}

.btn--ghost:hover {
  border-color: transparent;
  color: var(--ink);
  background: rgba(44, 62, 80, 0.055);
}

.btn--danger {
  border-color: rgba(157, 77, 69, 0.2);
  color: var(--danger);
  background: var(--danger-soft);
}

.btn--danger:hover {
  color: #843c35;
  border-color: rgba(157, 77, 69, 0.4);
  background: #f8e7e4;
}

.btn--small {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 11.5px;
}

.btn--small .icon {
  width: 14px;
  height: 14px;
}

.btn--icon {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
}

.btn--icon.btn--small {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--link {
  min-height: auto;
  padding: 0;
  border: 0;
  color: var(--brown);
  background: none;
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 600;
}

.btn--link:hover {
  color: var(--ink);
  background: none;
  text-decoration: underline;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.field {
  display: grid;
  gap: 7px;
}

.field > label,
.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.field-label__hint {
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 500;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: rgba(255, 253, 249, 0.85);
  box-shadow: 0 1px 2px rgba(44, 62, 80, 0.025) inset;
  font-size: 13.5px;
  line-height: 1.5;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: #a4a49b;
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--brown-faint);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--brown-soft);
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(168, 138, 102, 0.12);
}

.textarea {
  min-height: 110px;
  resize: vertical;
}

.input--mono,
.textarea--mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.015em;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrap > .input {
  padding-right: 42px;
}

.input-wrap__icon {
  position: absolute;
  left: 11px;
  display: flex;
  color: var(--ink-faint);
  pointer-events: none;
}

.input-wrap--icon > .input {
  padding-left: 36px;
}

.input-wrap__button {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--ink-faint);
  background: transparent;
}

.input-wrap__button:hover {
  color: var(--ink);
  background: var(--paper-deep);
}

.input-wrap__button .icon {
  width: 16px;
  height: 16px;
}

.field-hint {
  color: var(--ink-faint);
  font-size: 10.5px;
  line-height: 1.55;
}

.form-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--danger);
  font-size: 11.5px;
  line-height: 1.5;
}

.form-error .icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.form-success {
  color: var(--green);
  font-size: 11.5px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 4px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.55;
}

.check-row input[type="checkbox"],
.check-line input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  flex: 0 0 auto;
}

.check-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 11.5px;
  cursor: pointer;
  user-select: none;
}

.range {
  width: 100%;
  accent-color: var(--brown);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--paper-soft);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tag--brown {
  border-color: rgba(168, 138, 102, 0.3);
  color: var(--brown);
  background: rgba(243, 235, 221, 0.6);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-soft);
  background: var(--panel-muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.notice > .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--brown);
}

.notice strong {
  color: var(--ink);
  font-weight: 650;
}

.notice--warn {
  border-color: rgba(176, 139, 68, 0.27);
  color: #6f5b3e;
  background: var(--warning-soft);
}

.notice--warn > .icon {
  color: #9f7a42;
}

.notice--danger {
  border-color: rgba(157, 77, 69, 0.22);
  color: #76524e;
  background: var(--danger-soft);
}

.notice--danger > .icon {
  color: var(--danger);
}

.notice--security {
  border-style: dashed;
  background: rgba(255, 253, 249, 0.72);
}

.notice a {
  color: var(--brown);
  font-weight: 600;
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 170px;
  padding: 28px 18px;
  border: 1px dashed var(--line-dashed);
  border-radius: 10px;
  color: var(--ink-faint);
  background:
    radial-gradient(circle at 1px 1px, rgba(130, 99, 71, 0.055) 0.7px, transparent 0.9px);
  background-size: 8px 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}

.empty-state > .icon {
  width: 30px;
  height: 30px;
  color: var(--brown-soft);
  opacity: 0.75;
}

.empty-state strong {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.empty-state--compact {
  min-height: 120px;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(97, 120, 100, 0.11);
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(44, 62, 80, 0.18);
  border-top-color: var(--brown);
  border-radius: 50%;
  animation: spin 780ms linear infinite;
}

.loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 210px;
  color: var(--ink-faint);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   7. 下拉小菜单（笔记 / 导出等）
   -------------------------------------------------------------------------- */
.mini-menu {
  position: relative;
}

.mini-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 11.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
}

.mini-menu > summary:hover,
.mini-menu[open] > summary {
  color: var(--ink);
  border-color: var(--brown-soft);
  background: var(--paper-soft);
}

.mini-menu > summary::-webkit-details-marker {
  display: none;
}

.mini-menu .menu-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 60;
  width: 230px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  animation: menu-in 150ms var(--ease) both;
}

.menu-panel__label {
  padding: 6px 9px;
  color: var(--ink-faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  color: var(--ink-soft);
  background: transparent;
  font-size: 11.5px;
  text-align: left;
  text-decoration: none;
}

.menu-item:hover {
  color: var(--ink);
  background: var(--paper-deep);
  text-decoration: none;
}

.menu-item .icon {
  width: 15px;
  height: 15px;
  color: var(--brown);
}

.menu-item__desc {
  display: block;
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 9.5px;
}

/* --------------------------------------------------------------------------
   8. Toast 与对话框
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(370px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 253, 249, 0.98);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--error {
  border-left-color: var(--danger);
}

.toast--info {
  border-left-color: var(--brown-soft);
}

.toast__icon {
  display: flex;
  color: var(--green);
  margin-top: 1px;
}

.toast--error .toast__icon {
  color: var(--danger);
}

.toast--info .toast__icon {
  color: var(--brown);
}

.toast__icon .icon {
  width: 15px;
  height: 15px;
}

.toast__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

dialog.app-dialog {
  width: min(500px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 26px 90px rgba(30, 42, 52, 0.3);
}

dialog.app-dialog::backdrop {
  background: rgba(38, 46, 52, 0.35);
  backdrop-filter: blur(2px);
}

dialog.app-dialog[open] {
  animation: dialog-in 190ms var(--ease) both;
}

.dialog__form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-height: calc(100vh - 42px);
  padding: 25px;
  overflow-y: auto;
}

.dialog__eyebrow {
  margin-bottom: -3px;
}

.dialog__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dialog__message {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-line;
}

.dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.dialog--wide {
  width: min(620px, calc(100vw - 32px));
}

.dialog__section-title {
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   9. 主页
   -------------------------------------------------------------------------- */
.home-main {
  padding-top: 8px;
}

.home-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 34px;
  padding: 42px 3px 32px;
}

.home-intro__copy {
  max-width: 760px;
}

.home-intro h1 {
  max-width: 14.5ch;
  margin-top: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.9vw, 54px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.home-intro h1 em {
  position: relative;
  font-style: normal;
  white-space: nowrap;
}

.home-intro__lede {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.015em;
}

.home-intro__lede::before {
  content: "※";
  color: var(--brown-soft);
  font-family: var(--font-display);
  font-size: 15px;
}

.home-date-stamp {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  padding: 9px 12px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(255, 253, 249, 0.72);
  box-shadow: 0 5px 15px rgba(44, 62, 80, 0.04);
  transform: rotate(1.3deg);
  text-align: center;
}

.home-date-stamp::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 33px;
  width: 38px;
  height: 8px;
  background: rgba(190, 169, 133, 0.24);
  transform: rotate(-2deg);
}

.home-date-stamp__month {
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--brown);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.home-date-stamp strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.home-date-stamp small {
  display: block;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.03em;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  align-items: start;
  gap: 24px;
}

.home-grid > .paper-panel {
  min-width: 0;
}

.task-panel {
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      transparent 0,
      transparent 45px,
      rgba(157, 116, 83, 0.12) 45px,
      rgba(157, 116, 83, 0.12) 46px,
      transparent 46px
    ),
    var(--panel);
}

.task-panel .panel-head {
  padding-left: 64px;
}

.task-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.task-count strong {
  color: var(--brown);
  font-size: 12px;
}

.task-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 46px;
  padding: 15px 21px 14px 18px;
  border-bottom: 1px dashed var(--line-dashed);
  background: rgba(250, 248, 242, 0.35);
}

.task-form__input {
  flex: 1;
  min-height: 36px;
  padding: 5px 2px;
  border: 0;
  border-bottom: 1px dashed var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13.5px;
}

.task-form__input:focus {
  outline: none;
  border-color: var(--brown);
  box-shadow: none;
}

.task-form .btn {
  min-height: 34px;
  padding-inline: 11px;
  font-size: 11.5px;
}

.task-list {
  position: relative;
  margin-left: 46px;
  padding: 8px 21px 10px 18px;
  list-style: none;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 48px;
  padding: 11px 4px 10px;
  border-bottom: 1px dotted var(--line);
}

.task-item:last-child {
  border-bottom: 0;
}

.task-check {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  border: 1.2px solid var(--ink-soft);
  border-radius: 2px;
  background: transparent;
  appearance: none;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}

.task-check:hover {
  border-color: var(--brown);
}

.task-check:checked {
  border-color: var(--ink);
  background: var(--ink);
}

.task-check:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--panel);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(43deg);
}

.task-text {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  transition: color 150ms var(--ease);
}

.task-item.is-done .task-text {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(130, 99, 71, 0.45);
  text-decoration-thickness: 1px;
}

.task-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-top: -2px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--ink-faint);
  background: transparent;
  opacity: 0;
  transition: opacity 150ms var(--ease), color 150ms var(--ease), background 150ms var(--ease);
}

.task-item:hover .task-delete,
.task-delete:focus-visible {
  opacity: 1;
}

.task-delete:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.task-delete .icon {
  width: 14px;
  height: 14px;
}

.task-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 110px;
  margin: 9px 0;
  padding: 22px 18px;
  border: 1px dashed var(--line-dashed);
  border-radius: 8px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.65;
}

.task-empty .icon {
  width: 24px;
  height: 24px;
  color: var(--brown-soft);
  opacity: 0.75;
}

.task-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-left: 46px;
  padding: 10px 21px 14px 18px;
  border-top: 1px dashed var(--line-dashed);
  color: var(--ink-faint);
  font-size: 9.5px;
}

.tool-ledger {
  display: flex;
  flex-direction: column;
  padding: 7px 11px 8px;
}

.tool-row {
  display: grid;
  grid-template-columns: 15px 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 8px 9px;
  border-bottom: 1px dotted var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background 160ms var(--ease), padding-left 160ms var(--ease);
}

.tool-row:last-of-type {
  border-bottom: 0;
}

.tool-row:hover {
  color: var(--ink);
  background: rgba(242, 238, 227, 0.62);
  padding-left: 13px;
  text-decoration: none;
}

.tool-box {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid var(--brown-faint);
  border-radius: 1px;
  background: transparent;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.tool-row:hover .tool-box {
  border-color: var(--brown);
  background: rgba(168, 138, 102, 0.08);
}

.tool-row:hover .tool-box::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 3px;
  height: 6px;
  border: solid var(--brown);
  border-width: 0 1px 1px 0;
  transform: rotate(42deg);
}

.tool-icon {
  display: flex;
  color: var(--brown);
  opacity: 0.85;
}

.tool-icon .icon {
  width: 17px;
  height: 17px;
}

.tool-text {
  min-width: 0;
}

.tool-text strong {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
}

.tool-text small {
  display: block;
  margin-top: 1px;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1.45;
}

.tool-arrow {
  display: flex;
  color: var(--brown-soft);
  opacity: 0.35;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

.tool-arrow .icon {
  width: 14px;
  height: 14px;
}

.tool-row:hover .tool-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}

.index-panel__foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 12px 13px;
  padding: 8px 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1.55;
}

.index-panel__foot .icon {
  width: 13px;
  height: 13px;
  color: var(--green);
}

.home-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 24px;
  padding: 16px 4px 0;
  border-top: 1px dashed var(--line-dashed);
  color: var(--ink-faint);
  font-size: 10.5px;
}

.home-footnote__quote {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brown);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.home-footnote__quote .icon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.home-footnote__status {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. 密码保险箱
   -------------------------------------------------------------------------- */
.vault-panel {
  overflow: hidden;
}

.vault-gate {
  display: grid;
  gap: 11px;
  width: min(460px, 100%);
  margin-inline: auto;
  padding: 38px 24px 34px;
}

.vault-gate__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 5px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--brown);
  background:
    radial-gradient(circle at 1px 1px, rgba(130, 99, 71, 0.07) 0.7px, transparent 0.9px),
    var(--paper-soft);
  background-size: 7px 7px;
}

.vault-gate__mark .icon {
  width: 27px;
  height: 27px;
}

.vault-gate h2 {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.vault-gate__intro {
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.75;
  text-align: center;
}

.vault-form {
  display: grid;
  width: 100%;
  gap: 13px;
}

.vault-form .field {
  margin-top: 3px;
}

.vault-gate .field {
  margin-top: 3px;
}

.vault-gate .btn--primary {
  width: 100%;
  margin-top: 5px;
}

.vault-gate__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9.5px;
  text-align: center;
}

.vault-gate__meta .icon {
  width: 12px;
  height: 12px;
  color: var(--green);
}

.vault-setup-checklist {
  display: grid;
  gap: 6px;
  margin: 5px 0;
  padding: 12px 14px;
  border: 1px dashed var(--line-dashed);
  border-radius: 8px;
  background: rgba(250, 248, 242, 0.55);
  color: var(--ink-soft);
  font-size: 10.5px;
}

.vault-setup-checklist span {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.vault-setup-checklist .icon {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--brown-soft);
}

.vault-gate__switch {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
  font-size: 10.5px;
}

.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  padding: 16px 21px;
  border-bottom: 1px dashed var(--line-dashed);
  background: rgba(250, 248, 242, 0.42);
}

.vault-toolbar__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 14px;
}

.unlocked-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 9px;
  border: 1px solid rgba(97, 120, 100, 0.22);
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 10.5px;
  font-weight: 650;
}

.unlocked-pill .icon {
  width: 13px;
  height: 13px;
}

.autolock-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.autolock-timer .icon {
  width: 12px;
  height: 12px;
  color: var(--brown-soft);
}

.vault-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vault-toolbar__actions .btn {
  min-height: 33px;
  padding-inline: 10px;
  font-size: 11px;
}

.vault-toolbar__actions .icon {
  width: 14px;
  height: 14px;
}

.vault-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
}

.vault-main {
  min-width: 0;
  padding: 19px 21px 25px;
}

.vault-search-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.vault-search {
  position: relative;
  flex: 1;
}

.vault-search .icon {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.vault-search .input {
  min-height: 38px;
  padding-left: 34px;
  font-size: 12px;
}

.vault-search-row .btn {
  min-height: 38px;
  font-size: 11.5px;
}

.vault-list {
  display: flex;
  flex-direction: column;
}

.vault-record {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(130px, 0.85fr) auto;
  align-items: center;
  gap: 15px;
  padding: 15px 3px;
  border-bottom: 1px dashed var(--line);
}

.vault-record:last-child {
  border-bottom: 0;
}

.vault-record__identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.vault-record__initial {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brown);
  background: var(--paper-soft);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.vault-record__site {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.vault-record__site strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-record__site a {
  display: inline-flex;
  color: var(--brown-soft);
}

.vault-record__site a .icon {
  width: 12px;
  height: 12px;
}

.vault-record__username {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-record__note {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.5;
}

.vault-secret {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.vault-secret__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  color: var(--ink-soft);
  background: rgba(250, 248, 242, 0.6);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-secret__value.is-revealed {
  color: var(--ink);
  letter-spacing: 0;
}

.vault-record__actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.vault-record__actions .btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  color: var(--ink-faint);
}

.vault-record__actions .btn:hover {
  color: var(--ink);
}

.vault-record__actions .btn--danger-quiet:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.vault-side {
  min-width: 0;
  padding: 19px 19px 22px;
  border-left: 1px dashed var(--line-dashed);
  background: rgba(250, 248, 242, 0.3);
}

.vault-side__title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.vault-side__title .icon {
  width: 15px;
  height: 15px;
  color: var(--brown);
}

.vault-side__desc {
  margin-top: 3px;
  margin-bottom: 13px;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1.55;
}

.generator-output {
  position: relative;
  padding: 11px 34px 11px 11px;
  border: 1px dashed var(--brown-faint);
  border-radius: 7px;
  background: var(--panel);
}

.generator-output code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.generator-output .btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
}

.generator-options {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.generator-length {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 10.5px;
}

.generator-length output {
  color: var(--brown);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.generator-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 8px;
}

.generator-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}

.generator-actions .btn {
  min-height: 33px;
  padding-inline: 6px;
  font-size: 10.5px;
}

.vault-side__note {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1.6;
}

.vault-side__note .icon {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: var(--green);
}

.security-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.security-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--ink-faint);
  background: rgba(255, 253, 249, 0.56);
  font-size: 9.5px;
  line-height: 1.65;
}

.security-note .icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--brown-soft);
}

.security-note strong {
  display: block;
  margin-bottom: 1px;
  color: var(--ink-soft);
  font-size: 10.5px;
}

.vault-record-dialog .dialog__form {
  gap: 14px;
}

.password-field-row {
  display: flex;
  gap: 7px;
  align-items: center;
}

.password-field-row .input-wrap {
  flex: 1;
}

.password-field-row .btn {
  min-height: 42px;
  padding-inline: 10px;
  font-size: 10.5px;
}

.vault-crypto-warning {
  margin: 16px 21px 0;
}

/* --------------------------------------------------------------------------
   11. Aster 知识库
   -------------------------------------------------------------------------- */
/* 笔记页单独使用更宽的工作台，页眉和页脚同步对齐，其他页面仍沿用 --shell。 */
.shell.notes-page,
.shell.notes-page-meta,
.shell.notes-page-footer {
  width: min(1560px, calc(100% - 56px));
}

@media (min-width: 961px) {
  .notes-page .editor-split,
  .notes-page .mindmap-view {
    height: clamp(520px, 62vh, 740px);
  }
}

@media (max-width: 1080px) {
  .shell.notes-page,
  .shell.notes-page-meta,
  .shell.notes-page-footer {
    width: calc(100% - 36px);
  }
}

@media (max-width: 760px) {
  .shell.notes-page,
  .shell.notes-page-meta,
  .shell.notes-page-footer {
    width: calc(100% - 28px);
  }
}

.notes-app {
  position: relative;
  overflow: hidden;
}

.notes-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 242, 0.38);
}

.notes-library-toggle {
  display: none;
  min-height: 34px;
  padding-inline: 9px;
  font-size: 11px;
}

.notes-title-field {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 3px 2px;
  border: 0;
  border-bottom: 1px dashed transparent;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.notes-title-field:hover {
  border-bottom-color: var(--line);
}

.notes-title-field:focus {
  outline: none;
  border-bottom-color: var(--brown-soft);
  background: transparent;
  box-shadow: none;
}

.notes-title-field::placeholder {
  color: var(--ink-faint);
  font-weight: 500;
}

.notes-topbar__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.save-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 65px;
  justify-content: flex-end;
  color: var(--ink-faint);
  font-size: 9.5px;
  white-space: nowrap;
}

.save-status .icon {
  width: 12px;
  height: 12px;
}

.save-status.is-saved {
  color: var(--green);
}

.save-status.is-saving {
  color: var(--brown);
}

.notes-layout {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 560px;
}

.notes-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 13px 11px 13px 13px;
  border-right: 1px dashed var(--line-dashed);
  background:
    linear-gradient(90deg, transparent 0, transparent 24px, rgba(157, 116, 83, 0.075) 24px, rgba(157, 116, 83, 0.075) 25px, transparent 25px),
    rgba(250, 248, 242, 0.42);
}

.notes-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 9px;
  padding-left: 1px;
}

.notes-sidebar__top .section-label {
  padding-left: 1px;
}

.notes-new-btn {
  min-height: 29px;
  padding-inline: 8px;
  font-size: 10.5px;
}

.notes-search {
  position: relative;
  margin-bottom: 8px;
}

.notes-search .icon {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 13px;
  height: 13px;
  color: var(--ink-faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.notes-search .input {
  min-height: 33px;
  padding: 6px 8px 6px 28px;
  font-size: 10.5px;
}

.notes-tag-filter {
  display: flex;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 7px;
  overflow-x: auto;
  border-bottom: 1px dashed var(--line);
  scrollbar-width: none;
}

.notes-tag-filter::-webkit-scrollbar {
  display: none;
}

.tag-filter-btn {
  flex: 0 0 auto;
  min-height: 21px;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-faint);
  background: transparent;
  font-size: 9px;
  white-space: nowrap;
}

.tag-filter-btn:hover {
  color: var(--ink);
  background: var(--paper-deep);
}

.tag-filter-btn.is-active {
  border-color: rgba(168, 138, 102, 0.26);
  color: var(--brown);
  background: rgba(243, 235, 221, 0.7);
}

.note-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-height: 90px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.note-list__empty {
  padding: 22px 9px;
  color: var(--ink-faint);
  font-size: 10.5px;
  line-height: 1.7;
  text-align: center;
}

.note-item {
  display: block;
  width: 100%;
  padding: 8px 9px 8px 10px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}

.note-item:hover {
  background: rgba(255, 253, 249, 0.78);
}

.note-item.is-active {
  border-color: var(--line);
  border-left-color: var(--brown);
  background: var(--panel);
  box-shadow: 0 3px 10px rgba(44, 62, 80, 0.035);
}

.note-item__title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-item__snippet {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.note-item__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
}

.note-item__meta .tag {
  min-height: 16px;
  padding: 0 4px;
  font-family: var(--font-body);
  font-size: 8px;
}

.notes-sidebar__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 8.5px;
}

.notes-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.notes-tag-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 16px;
  border-bottom: 1px dashed var(--line);
  background: rgba(255, 253, 249, 0.45);
}

.notes-tag-row__label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 9.5px;
}

.notes-tag-row__label .icon {
  width: 12px;
  height: 12px;
}

.notes-tag-input {
  flex: 1;
  min-width: 0;
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px dashed transparent;
  border-radius: 0;
  color: var(--ink-soft);
  background: transparent;
  box-shadow: none;
  font-size: 10.5px;
}

.notes-tag-input:focus {
  outline: none;
  border-bottom-color: var(--line-strong);
  box-shadow: none;
}

.notes-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.notes-tag-chips .tag {
  min-height: 19px;
  font-size: 9px;
}

.editor-tabs {
  display: flex;
  gap: 2px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
}

.editor-tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  color: var(--ink-faint);
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
}

.editor-tab .icon {
  color: var(--brown-soft);
}

.editor-tab:hover {
  color: var(--ink-soft);
  background: rgba(255, 253, 249, 0.62);
}

.editor-tab.is-active {
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 4px rgba(44, 62, 80, 0.07);
}

.editor-tab[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: clamp(480px, 57vh, 640px);
  min-height: 0;
}

.notes-app[data-pane="preview"] .editor-pane {
  display: none;
}

.notes-app[data-pane="preview"] .editor-split {
  grid-template-columns: minmax(0, 1fr);
}

.notes-app[data-pane="mindmap"] .editor-split,
.notes-app[data-pane="mindmap"] .cheat-sheet {
  display: none;
}

.notes-app[data-pane="mindmap"] .mindmap-view {
  display: flex;
}

.editor-pane,
.preview-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.editor-pane {
  border-right: 1px dashed var(--line);
  background: rgba(255, 253, 249, 0.54);
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 41px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 242, 0.45);
}

.toolbar-label {
  margin-right: 3px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 27px;
  min-height: 27px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink-soft);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.insert-btn:hover {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

.insert-btn--wide {
  padding-inline: 7px;
  font-family: var(--font-body);
  font-size: 9.5px;
}

.toolbar-divider {
  width: 1px;
  height: 16px;
  margin-inline: 3px;
  background: var(--line);
}

.markdown-input {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 17px 18px 28px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  /* 去掉背景横线，避免与不同字体/浏览器的文字基线发生错位。 */
  background: rgba(255, 253, 249, 0.34);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 28px;
  resize: none;
  tab-size: 2;
}

.markdown-input::placeholder {
  color: #a5a49b;
  line-height: 28px;
}

.markdown-input:focus {
  outline: none;
  border: 0;
  box-shadow: none;
  background-color: rgba(255, 253, 249, 0.45);
}

.preview-pane {
  background: rgba(252, 250, 246, 0.55);
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 41px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 242, 0.45);
}

.preview-head__label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.preview-head__label .icon {
  width: 12px;
  height: 12px;
  color: var(--brown-soft);
}

.render-badge {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.02em;
}

.render-badge.is-warn {
  color: #9f7a42;
}

.preview-scroll {
  flex: 1;
  min-height: 0;
  padding: 18px 22px 34px;
  overflow-y: auto;
  /* 去掉无法与正文容器稳定对齐的装饰竖线，保留干净的纸面底色。 */
  background: rgba(255, 253, 249, 0.22);
}

.preview-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 220px;
  color: var(--ink-faint);
  text-align: center;
  font-size: 11px;
  line-height: 1.8;
}

.preview-empty .icon {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
  color: var(--brown-soft);
  opacity: 0.7;
}

.preview-empty strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 15px;
}

.render-notice {
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px dashed rgba(176, 139, 68, 0.35);
  border-radius: 6px;
  color: #806845;
  background: var(--warning-soft);
  font-size: 9.5px;
  line-height: 1.6;
}

.cheat-sheet {
  border-top: 1px solid var(--line);
  background: rgba(250, 248, 242, 0.45);
}

.cheat-sheet > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.cheat-sheet > summary::-webkit-details-marker {
  display: none;
}

.cheat-sheet > summary .icon {
  width: 13px;
  height: 13px;
  color: var(--brown);
}

.cheat-sheet > summary .chevron {
  margin-left: auto;
  color: var(--ink-faint);
  transition: transform 160ms var(--ease);
}

.cheat-sheet[open] > summary .chevron {
  transform: rotate(180deg);
}

.cheat-sheet__body {
  max-height: min(54vh, 540px);
  padding: 0 16px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(130, 99, 71, 0.28) transparent;
}

.latex-cheat-group {
  padding-top: 9px;
}

.latex-cheat-group + .latex-cheat-group {
  margin-top: 11px;
  border-top: 1px dashed var(--line);
}

.latex-cheat-group h4 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 5px;
  padding: 4px 0 5px;
  color: var(--ink);
  background: rgba(250, 248, 242, 0.97);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cheat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 14px;
  padding-top: 0;
}

.cheat-item {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-width: 0;
  font-size: 9.5px;
  line-height: 1.5;
}

.cheat-item code {
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.55;
  white-space: normal;
}

.cheat-item span {
  color: var(--ink-faint);
  line-height: 1.55;
}

/* 思维导图视图 */
.mindmap-view {
  display: none;
  flex-direction: column;
  height: clamp(480px, 57vh, 640px);
  min-height: 0;
  background: rgba(255, 253, 249, 0.42);
}

.mindmap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  padding: 11px 15px 10px;
  border-bottom: 1px dashed var(--line);
  background: rgba(250, 248, 242, 0.42);
}

.mindmap-head .eyebrow {
  font-size: 8px;
  letter-spacing: 0.12em;
}

.mindmap-head h3 {
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
}

.mindmap-head__copy > p:last-child {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1.55;
}

.mindmap-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.mindmap-actions .btn {
  min-height: 27px;
  padding-inline: 7px;
  font-size: 9.5px;
}

.mindmap-actions .icon {
  width: 12px;
  height: 12px;
}

.mindmap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.mindmap-view.has-selection .mindmap-layout {
  grid-template-columns: minmax(0, 1fr) 286px;
}

.mindmap-view:not(.has-selection) .mindmap-detail {
  display: none;
}

.mindmap-canvas-wrap {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(130, 99, 71, 0.07) 0.7px, transparent 0.9px),
    linear-gradient(90deg, transparent 0, transparent 29px, rgba(157, 116, 83, 0.045) 29px, rgba(157, 116, 83, 0.045) 30px, transparent 30px);
  background-size: 9px 9px, auto;
  scrollbar-color: rgba(130, 99, 71, 0.28) transparent;
}

.mindmap-canvas-wrap:focus-visible {
  outline-offset: -3px;
}

.mindmap-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.mindmap-links {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.mindmap-links path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.mindmap-links path.is-emphasis {
  stroke: var(--brown-soft);
  stroke-width: 1.6;
  opacity: 0.82;
}

.mindmap-nodes {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mindmap-node {
  position: absolute;
  display: flex;
  align-items: stretch;
  width: 198px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 4px 11px rgba(44, 62, 80, 0.055);
  transition: border-color 140ms var(--ease), background 140ms var(--ease), box-shadow 140ms var(--ease);
}

.mindmap-node:hover {
  border-color: var(--brown-faint);
  box-shadow: 0 6px 14px rgba(44, 62, 80, 0.08);
}

.mindmap-node.is-selected {
  border-color: var(--brown);
  background: #f8f2e7;
  box-shadow: 0 0 0 2px rgba(168, 138, 102, 0.14), 0 6px 14px rgba(44, 62, 80, 0.07);
}

.mindmap-node--root {
  border-color: rgba(130, 99, 71, 0.45);
  background: #f4eddf;
}

.mindmap-node--heading {
  border-left-width: 3px;
  border-left-color: var(--brown-soft);
}

.mindmap-node__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.mindmap-node__main:hover {
  background: rgba(168, 138, 102, 0.045);
}

.mindmap-node__kicker {
  color: var(--brown-soft);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mindmap-node__label {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mindmap-node__toggle {
  display: grid;
  place-items: center;
  width: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px dashed var(--line);
  color: var(--ink-faint);
  background: rgba(250, 248, 242, 0.45);
}

.mindmap-node__toggle:hover {
  color: var(--ink);
  background: rgba(168, 138, 102, 0.08);
}

.mindmap-node__toggle .icon {
  width: 12px;
  height: 12px;
  pointer-events: none;
  transition: transform 160ms var(--ease);
}

.mindmap-node__toggle:focus-visible {
  outline: 2px dashed var(--brown);
  outline-offset: -3px;
  background: rgba(168, 138, 102, 0.12);
}

.mindmap-node__toggle:active {
  background: rgba(168, 138, 102, 0.16);
}

.mindmap-node.is-collapsed .mindmap-node__toggle .icon {
  transform: rotate(-90deg);
}

.mindmap-node__badge {
  display: inline-block;
  margin-left: 3px;
  color: var(--brown);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.mindmap-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 13px 15px 15px;
  overflow-y: auto;
  border-left: 1px dashed var(--line);
  background: rgba(250, 248, 242, 0.4);
}

.mindmap-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}

.mindmap-detail__head .section-label {
  font-size: 8px;
}

.mindmap-detail__head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mindmap-detail__head .tag {
  min-height: 19px;
  max-width: 112px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
}

.mindmap-detail__close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-faint);
  background: transparent;
}

.mindmap-detail__close:hover {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper-deep);
}

.mindmap-detail__close .icon {
  width: 11px;
  height: 11px;
}

.mindmap-detail__empty {
  display: grid;
  place-items: center;
  gap: 7px;
  flex: 1;
  padding: 24px 12px;
  color: var(--ink-faint);
  text-align: center;
  font-size: 10px;
  line-height: 1.7;
}

.mindmap-detail__empty .icon {
  width: 24px;
  height: 24px;
  color: var(--brown-soft);
  opacity: 0.72;
}

.mindmap-detail__empty small {
  max-width: 210px;
  color: var(--ink-faint);
  font-size: 8.5px;
  line-height: 1.6;
}

.mindmap-detail__body-wrap {
  min-width: 0;
}

.mindmap-detail__body-wrap[hidden] {
  display: none;
}

.mindmap-detail__body-wrap h3 {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.35;
}

.mindmap-detail__hint {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 8.5px;
  line-height: 1.5;
}

.mindmap-detail__body {
  margin-top: 9px;
  font-size: 10.5px;
  line-height: 1.75;
}

.mindmap-detail__body h1,
.mindmap-detail__body h2 {
  font-size: 15px;
}

.mindmap-detail__body h3,
.mindmap-detail__body h4 {
  font-size: 13px;
}

.mindmap-detail__body pre {
  font-size: 9px;
}

.mindmap-detail__body .katex {
  font-size: 0.98em;
}

.mindmap-detail__note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 13px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 8px;
  line-height: 1.6;
}

.mindmap-detail__note .icon {
  margin-top: 2px;
  color: var(--brown-soft);
}

.notes-empty-workspace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 480px;
  padding: 35px 20px;
  color: var(--ink-faint);
  text-align: center;
}

.notes-empty-workspace .icon {
  width: 39px;
  height: 39px;
  color: var(--brown-soft);
  opacity: 0.7;
}

.notes-empty-workspace h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
}

.notes-empty-workspace p {
  max-width: 340px;
  font-size: 11.5px;
  line-height: 1.8;
}

.notes-scrim {
  display: none;
}

.notes-app.is-empty .notes-editor,
.notes-app.is-empty .notes-tag-row,
.notes-app.is-empty .editor-tabs {
  display: none;
}

.notes-app.is-empty .notes-layout {
  grid-template-columns: 232px minmax(0, 1fr);
}

.notes-app.is-empty .notes-empty-workspace {
  display: flex;
}

.notes-empty-workspace {
  display: none;
}

/* Markdown 预览排版 */
.markdown-body {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body > :last-child {
  margin-bottom: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 1.4em 0 0.55em;
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.4;
}

.markdown-body h1 {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
}

.markdown-body h2 {
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--line);
  font-size: 18px;
}

.markdown-body h3 {
  font-size: 15.5px;
}

.markdown-body h4 {
  font-size: 13.5px;
}

.markdown-body p {
  margin: 0.65em 0;
}

.markdown-body ul,
.markdown-body ol {
  margin: 0.7em 0;
  padding-left: 1.45em;
}

.markdown-body li {
  margin: 0.2em 0;
}

.markdown-body li::marker {
  color: var(--brown-soft);
}

.markdown-body blockquote {
  margin: 0.9em 0;
  padding: 7px 12px;
  border-left: 2px solid var(--brown-faint);
  color: var(--ink-soft);
  background: rgba(242, 238, 227, 0.52);
}

.markdown-body blockquote > :first-child {
  margin-top: 0;
}

.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-body code {
  padding: 0.08em 0.35em;
  border: 1px solid rgba(228, 221, 208, 0.8);
  border-radius: 4px;
  color: #5a4734;
  background: rgba(242, 238, 227, 0.65);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.markdown-body pre {
  margin: 0.9em 0;
  padding: 11px 13px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f5f1e8;
  font-size: 10.5px;
  line-height: 1.7;
}

.markdown-body pre code {
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: inherit;
}

.markdown-body a {
  color: var(--brown);
  text-decoration: underline;
  text-decoration-color: rgba(130, 99, 71, 0.38);
}

.markdown-body hr {
  margin: 1.3em 0;
  border: 0;
  border-top: 1px dashed var(--line-strong);
}

.markdown-body table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  font-size: 10.5px;
}

.markdown-body th,
.markdown-body td {
  padding: 6px 8px;
  border: 1px solid var(--line);
  text-align: left;
}

.markdown-body th {
  color: var(--ink);
  background: var(--paper-soft);
  font-weight: 650;
}

.markdown-body tr:nth-child(even) td {
  background: rgba(250, 248, 242, 0.45);
}

.markdown-body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.markdown-body .math-display {
  display: block;
  max-width: 100%;
  margin: 0.8em 0;
  padding: 5px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}

.markdown-body .math-inline {
  display: inline;
}

.markdown-body .katex {
  font-size: 1.04em;
}

.markdown-body .katex-display {
  margin: 0.55em 0;
}

.markdown-body .katex-error {
  color: var(--danger);
}

.math-fallback {
  display: inline-block;
  max-width: 100%;
  padding: 0 4px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  color: #6f5b45;
  background: var(--panel-muted);
  font-family: var(--font-mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.math-fallback--display {
  display: block;
  margin: 0.4em 0;
  padding: 6px 8px;
  white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   12. 学习资源 / 复杂度速查
   -------------------------------------------------------------------------- */
.resources-panel {
  padding: 23px 25px 27px;
}

.resources-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 19px;
  border-bottom: 1px dashed var(--line);
}

.resources-intro h2 {
  font-family: var(--font-display);
  font-size: 23px;
}

.resources-intro p {
  max-width: 560px;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.75;
}

.resources-intro__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brown);
  background: var(--paper-soft);
  flex: 0 0 auto;
}

.resources-intro__mark .icon {
  width: 22px;
  height: 22px;
}

.definition-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.definition-item {
  min-width: 0;
  padding: 12px 13px;
  border-right: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.52);
}

.definition-item:last-child {
  border-right: 0;
}

.definition-item__symbol {
  color: var(--brown);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
}

.definition-item__name {
  margin-top: 3px;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 650;
}

.definition-item__desc {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1.6;
}

.definition-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1.65;
}

.definition-note .icon {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--brown-soft);
}

.complexity-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 27px 0 11px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}

.complexity-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 18px;
}

.complexity-head h3 .icon {
  width: 17px;
  height: 17px;
  color: var(--brown);
}

.complexity-head p {
  color: var(--ink-faint);
  font-size: 9.5px;
}

.complexity-table {
  width: 100%;
  border-collapse: collapse;
}

.complexity-table th {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.complexity-table td {
  padding: 10px 9px;
  border-bottom: 1px dotted var(--line);
  color: var(--ink-soft);
  font-size: 10.5px;
  vertical-align: middle;
}

.complexity-table tr:last-child td {
  border-bottom: 0;
}

.complexity-table td:first-child {
  width: 112px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.complexity-table td:nth-child(2) {
  width: 100px;
}

.complexity-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.complexity-bar__track {
  flex: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(228, 221, 208, 0.65);
}

.complexity-bar__fill {
  display: block;
  width: var(--bar-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(168, 138, 102, 0.65), rgba(130, 99, 71, 0.82));
}

.complexity-bar__label {
  width: 34px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  text-align: right;
}

.complexity-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px dashed var(--line-dashed);
  border-radius: 7px;
  background: var(--panel-muted);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.6;
}

.complexity-order strong {
  margin-right: 4px;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.oi-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 24px;
  padding: 17px 19px;
  border: 1px solid rgba(168, 138, 102, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(120deg, rgba(244, 237, 222, 0.84), rgba(250, 248, 242, 0.55)),
    radial-gradient(circle at 1px 1px, rgba(130, 99, 71, 0.08) 0.7px, transparent 0.9px);
  background-size: auto, 8px 8px;
}

.oi-callout__text {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.oi-callout__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(168, 138, 102, 0.32);
  border-radius: 8px;
  color: var(--brown);
  background: rgba(255, 253, 249, 0.55);
}

.oi-callout__icon .icon {
  width: 20px;
  height: 20px;
}

.oi-callout h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
}

.oi-callout p {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1.6;
}

.oi-callout__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
}

.reading-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin-top: 13px;
}

.reading-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px dotted var(--line);
  color: var(--ink-soft);
  font-size: 10.5px;
  text-decoration: none;
}

.reading-link:hover {
  color: var(--ink);
  text-decoration: none;
}

.reading-link span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.reading-link .icon {
  width: 13px;
  height: 13px;
  color: var(--brown-soft);
}

.reading-link__arrow {
  color: var(--brown-soft);
  opacity: 0.55;
}

/* 学习网站导航 */
.study-nav-panel {
  padding: 22px 24px 20px;
}

.study-nav-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}

.study-nav-head h2 {
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.study-nav-head > div > p:last-child {
  max-width: 590px;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.75;
}

.study-nav-head .resources-intro__mark {
  margin-top: 1px;
}

.study-nav-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}

.study-search {
  position: relative;
  min-width: 0;
}

.study-search > .icon {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.study-search .input {
  min-height: 38px;
  padding-left: 34px;
  font-size: 12px;
}

.study-nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.study-resource-count {
  margin-right: 2px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.study-resource-list {
  display: flex;
  flex-direction: column;
  min-height: 80px;
  margin-top: 10px;
}

.study-resource-list > .empty-state {
  margin-top: 12px;
}

.study-resource-row {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 3px;
  border-bottom: 1px dotted var(--line);
  transition: background 150ms var(--ease);
}

.study-resource-row:last-child {
  border-bottom: 0;
}

.study-resource-row:hover {
  background: rgba(242, 238, 227, 0.32);
}

.study-resource-index {
  align-self: start;
  padding-top: 2px;
  color: var(--brown-soft);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
}

.study-resource-main {
  min-width: 0;
}

.study-resource-titleline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.study-resource-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none;
}

.study-resource-link:hover {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.study-resource-link .icon {
  width: 11px;
  height: 11px;
  color: var(--brown-soft);
  opacity: 0.72;
}

.study-resource-description {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.study-resource-host {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.02em;
}

.study-resource-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.study-resource-actions .btn {
  width: 29px;
  min-width: 29px;
  height: 29px;
  min-height: 29px;
  color: var(--ink-faint);
}

.study-resource-actions .btn:hover {
  color: var(--ink);
}

.study-resource-actions .btn[data-action="delete"]:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.study-nav-foot {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1.6;
}

.study-nav-foot .icon {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  flex: 0 0 auto;
  color: var(--brown-soft);
}

.study-nav-foot code {
  padding: 0 3px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-soft);
  font-size: 8.5px;
}

.resources-reference {
  margin-top: 18px;
  overflow: hidden;
}

.resources-reference > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 22px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.resources-reference > summary::-webkit-details-marker {
  display: none;
}

.resources-reference__title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.resources-reference__title > .icon {
  width: 18px;
  height: 18px;
  color: var(--brown);
}

.resources-reference__title strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.resources-reference__title small {
  display: block;
  margin-top: 1px;
  color: var(--ink-faint);
  font-size: 9px;
}

.resources-reference__hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  font-size: 9px;
  white-space: nowrap;
}

.resources-reference__hint .chevron {
  transition: transform 160ms var(--ease);
}

.resources-reference[open] > summary .chevron {
  transform: rotate(180deg);
}

.resources-reference__body {
  border-top: 1px dashed var(--line);
}

.resources-reference__body .resources-panel {
  padding-top: 20px;
}

.resource-dialog .dialog__message {
  margin-top: -3px;
}

@media (max-width: 900px) {
  .study-nav-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .study-nav-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .study-nav-panel {
    padding: 17px 15px;
  }

  .study-nav-head {
    gap: 12px;
    padding-bottom: 13px;
  }

  .study-nav-head h2 {
    font-size: 20px;
  }

  .study-nav-actions {
    width: 100%;
  }

  .study-nav-actions .btn {
    flex: 1;
  }

  .study-resource-count {
    flex-basis: 100%;
  }

  .study-resource-row {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px 8px;
    padding: 12px 1px;
  }

  .study-resource-actions {
    grid-column: 2;
    justify-self: start;
  }

  .study-resource-index {
    font-size: 8px;
  }

  .study-resource-link {
    font-size: 12px;
  }

  .study-resource-description {
    font-size: 9.5px;
  }

  .resources-reference > summary {
    padding: 13px 15px;
  }

  .resources-reference__hint {
    font-size: 8px;
  }

  .resources-reference__body .resources-panel {
    padding: 17px 15px 21px;
  }
}

/* --------------------------------------------------------------------------
   13. 天气
   -------------------------------------------------------------------------- */
.weather-panel {
  padding: 22px 25px 27px;
}

.weather-search-area {
  position: relative;
  z-index: 3;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}

.weather-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-search-form .input-wrap {
  flex: 1;
  max-width: 430px;
}

.weather-search-form .input {
  min-height: 40px;
  padding-left: 35px;
  font-size: 12.5px;
}

.weather-search-form .btn {
  min-height: 40px;
}

.weather-search-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  color: var(--ink-faint);
  font-size: 9.5px;
}

.weather-location-current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brown);
  font-size: 10.5px;
  font-weight: 600;
}

.weather-location-current .icon {
  width: 13px;
  height: 13px;
}

.place-results {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  z-index: 20;
  width: min(430px, 100%);
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  animation: menu-in 150ms var(--ease) both;
}

.place-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
}

.place-result:hover {
  color: var(--ink);
  background: var(--paper-deep);
}

.place-result strong {
  display: block;
  color: var(--ink);
  font-size: 11.5px;
}

.place-result span {
  display: block;
  margin-top: 1px;
  color: var(--ink-faint);
  font-size: 9px;
}

.place-result .icon {
  width: 13px;
  height: 13px;
  color: var(--brown-soft);
}

.weather-stage {
  min-height: 320px;
  padding-top: 26px;
}

.weather-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  min-height: 200px;
  padding: 8px 14px 22px;
}

.weather-now__main {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
}

.weather-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 103px;
  height: 103px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brown);
  background:
    radial-gradient(circle at 1px 1px, rgba(130, 99, 71, 0.08) 0.7px, transparent 0.9px),
    rgba(250, 248, 242, 0.66);
  background-size: 8px 8px;
}

.weather-symbol .icon {
  width: 56px;
  height: 56px;
  stroke-width: 1.35;
}

.weather-reading {
  min-width: 0;
}

.weather-place {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  max-width: 100%;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.weather-place .icon {
  width: 14px;
  height: 14px;
  color: var(--brown-soft);
}

.weather-place__source {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--brown);
  background: rgba(243, 235, 221, 0.5);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.weather-temperature {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(65px, 9vw, 96px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.weather-temperature sup {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0;
}

.weather-condition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 13px;
}

.weather-condition .tag {
  font-size: 9px;
}

.weather-updated {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: 9px;
}

.weather-now__aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  min-width: 205px;
  padding-left: 25px;
  border-left: 1px dashed var(--line);
}

.weather-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dotted var(--line);
}

.weather-stat:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.weather-stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font-size: 9.5px;
}

.weather-stat__label .icon {
  width: 14px;
  height: 14px;
  color: var(--brown-soft);
}

.weather-stat strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.weather-stage__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 7px 0;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9px;
}

.weather-stage__foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.weather-stage__foot .icon {
  width: 12px;
  height: 12px;
  color: var(--brown-soft);
}

.weather-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 10.5px;
}

.weather-status.is-error {
  color: var(--danger);
}

.weather-status .icon {
  width: 14px;
  height: 14px;
}

.weather-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1.65;
}

.weather-note .icon {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: var(--brown-soft);
}

/* --------------------------------------------------------------------------
   14. 时间显示
   -------------------------------------------------------------------------- */
.clock-panel {
  padding: 30px 30px 26px;
  background:
    radial-gradient(circle at 1px 1px, rgba(130, 99, 71, 0.04) 0.7px, transparent 0.9px),
    var(--panel);
  background-size: 9px 9px;
}

.clock-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: center;
  gap: 44px;
  max-width: 880px;
  margin-inline: auto;
  padding: 7px 0 25px;
}

.analog-clock-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

.analog-clock {
  display: block;
  width: min(100%, 252px);
  height: auto;
  color: var(--ink);
  filter: drop-shadow(0 10px 18px rgba(44, 62, 80, 0.06));
}

.analog-clock__face {
  fill: rgba(255, 253, 249, 0.83);
  stroke: var(--line-strong);
  stroke-width: 1.2;
}

.analog-clock__inner {
  fill: none;
  stroke: var(--line);
  stroke-width: 0.8;
  stroke-dasharray: 2 5;
}

.analog-clock__tick {
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
}

.analog-clock__tick--major {
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  opacity: 0.8;
}

.analog-clock__hand {
  stroke: var(--ink);
  stroke-linecap: round;
  /* 旋转中心通过 SVG transform 属性的第二个参数指定，避免和 CSS 原点叠加。 */
}

.analog-clock__hand--hour {
  stroke-width: 4;
}

.analog-clock__hand--minute {
  stroke-width: 2.5;
}

.analog-clock__hand--second {
  stroke: var(--brown);
  stroke-width: 1.1;
}

.analog-clock__pin {
  fill: var(--brown);
  stroke: var(--panel);
  stroke-width: 1.5;
}

.clock-readout {
  min-width: 0;
}

.clock-readout__date {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 12px;
}

.clock-readout__weekday {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brown);
  background: var(--paper-soft);
  font-size: 9.5px;
  font-weight: 650;
}

.clock-time {
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(51px, 8vw, 86px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: 1.1;
  white-space: nowrap;
}

.clock-time .seconds {
  color: var(--brown-soft);
  font-size: 0.62em;
  letter-spacing: -0.03em;
}

.clock-caption {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: 10px;
}

.clock-caption .icon {
  width: 13px;
  height: 13px;
  color: var(--brown-soft);
}

.clock-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 19px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

.clock-fact {
  padding: 13px 14px 13px 0;
  border-right: 1px dotted var(--line);
}

.clock-fact:not(:first-child) {
  padding-left: 16px;
}

.clock-fact:last-child {
  border-right: 0;
}

.clock-fact dt {
  color: var(--ink-faint);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.clock-fact dd {
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.clock-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 880px;
  margin-inline: auto;
  padding-top: 15px;
  color: var(--ink-faint);
  font-size: 9.5px;
}

.clock-panel__foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.clock-panel__foot .icon {
  width: 12px;
  height: 12px;
  color: var(--brown-soft);
}

/* --------------------------------------------------------------------------
   15. 随机站点
   -------------------------------------------------------------------------- */
.random-panel {
  padding: 42px 26px 29px;
  overflow: hidden;
  text-align: center;
}

.random-panel::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 250px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--line-strong) 0,
    var(--line-strong) 3px,
    transparent 3px,
    transparent 9px
  );
  transform: translateX(-50%);
  opacity: 0.7;
}

.random-panel__eyebrow {
  justify-content: center;
  margin-top: 23px;
}

.random-panel__eyebrow::before {
  display: none;
}

.random-drum {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(590px, 100%);
  min-height: 300px;
  margin: 23px auto 0;
  padding: 32px 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0, transparent 31px, rgba(157, 116, 83, 0.09) 31px, rgba(157, 116, 83, 0.09) 32px, transparent 32px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(44, 62, 80, 0.04) 31px, rgba(44, 62, 80, 0.04) 32px),
    rgba(255, 253, 249, 0.5);
  background-position: 17px 0, 0 15px, 0 0;
}

.random-drum::before,
.random-drum::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  height: 1px;
  background: var(--line);
}

.random-drum::before {
  top: 28px;
}

.random-drum::after {
  bottom: 28px;
}

.random-status {
  color: var(--ink-faint);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.random-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 130px;
  justify-content: center;
  margin-top: 8px;
}

.random-result__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 2px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brown);
  background: var(--paper-soft);
}

.random-result__mark .icon {
  width: 23px;
  height: 23px;
}

.random-result__name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.random-result__desc {
  max-width: 410px;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.7;
}

.random-result__url {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  overflow-wrap: anywhere;
}

.random-result.is-drawing .random-result__name {
  color: var(--brown-soft);
  filter: blur(0.45px);
}

.random-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  margin-top: 8px;
  color: var(--brown);
  font-size: 10px;
}

.random-countdown .icon {
  width: 13px;
  height: 13px;
}

.random-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.random-main-btn {
  min-height: 44px;
  padding-inline: 20px;
  font-size: 13px;
}

.random-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--ink-faint);
  font-size: 9px;
}

.random-note .icon {
  width: 12px;
  height: 12px;
  color: var(--brown-soft);
}

.random-panel__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 9px;
}

/* --------------------------------------------------------------------------
   16. 外部工具
   -------------------------------------------------------------------------- */
.external-panel {
  padding: 22px 24px 26px;
}

.external-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 17px;
  border-bottom: 1px dashed var(--line);
}

.external-intro__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brown);
  background: var(--paper-soft);
}

.external-intro__icon .icon {
  width: 19px;
  height: 19px;
}

.external-intro h2 {
  font-family: var(--font-display);
  font-size: 21px;
}

.external-intro p {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 10.5px;
  line-height: 1.7;
}

.external-group {
  padding-top: 20px;
}

.external-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.external-group__head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 17px;
}

.external-group__head h3 .icon {
  width: 16px;
  height: 16px;
  color: var(--brown);
}

.external-group__head span {
  color: var(--ink-faint);
  font-size: 9px;
}

.external-rows {
  display: flex;
  flex-direction: column;
}

.external-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 3px;
  border-bottom: 1px dotted var(--line);
}

.external-row:last-child {
  border-bottom: 0;
}

.external-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brown);
  background: rgba(250, 248, 242, 0.55);
}

.external-row__icon .icon {
  width: 15px;
  height: 15px;
}

.external-row__text {
  min-width: 0;
}

.external-row__text strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.external-row__text p {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1.55;
}

.external-row__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.external-row__link:hover {
  color: var(--ink);
  border-color: var(--brown-soft);
  background: var(--paper-soft);
  text-decoration: none;
}

.external-row__link .icon {
  width: 12px;
  height: 12px;
  color: var(--brown-soft);
}

.external-row__link--muted {
  color: var(--ink-faint);
  border-color: transparent;
  background: transparent;
}

.external-row__link--muted:hover {
  color: var(--ink-soft);
  border-color: var(--line);
  background: var(--paper-soft);
}

.external-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 9px 0 0;
  padding-left: 42px;
  color: var(--ink-faint);
  font-size: 9px;
  line-height: 1.6;
}

.external-hint .icon {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: var(--brown-soft);
}

.external-email-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.email-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  background: rgba(255, 253, 249, 0.55);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.email-shortcut:hover {
  color: var(--ink);
  border-color: var(--brown-soft);
  background: var(--paper-soft);
  text-decoration: none;
}

.email-shortcut span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-shortcut .icon {
  width: 14px;
  height: 14px;
  color: var(--brown);
}

.email-shortcut > .icon {
  width: 11px;
  height: 11px;
  color: var(--brown-soft);
  opacity: 0.6;
}

.external-memo {
  margin-top: 22px;
  padding: 15px 16px;
  border: 1px dashed var(--line-dashed);
  border-radius: 9px;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(44, 62, 80, 0.045) 27px, rgba(44, 62, 80, 0.045) 28px),
    rgba(250, 248, 242, 0.45);
}

.external-memo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.external-memo__head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 15px;
}

.external-memo__head h3 .icon {
  width: 14px;
  height: 14px;
  color: var(--brown);
}

.memo-save-status {
  color: var(--ink-faint);
  font-size: 9px;
}

.memo-save-status.is-saved {
  color: var(--green);
}

.external-memo textarea {
  width: 100%;
  min-height: 95px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 28px;
  resize: vertical;
}

.external-memo textarea:focus {
  outline: none;
}

.external-memo textarea::placeholder {
  color: #a4a49b;
}

.external-memo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 8.5px;
}

.external-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 2px solid rgba(176, 139, 68, 0.45);
  color: #7d6746;
  background: rgba(251, 244, 230, 0.66);
  font-size: 9px;
  line-height: 1.65;
}

.external-warning .icon {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   17. 404
   -------------------------------------------------------------------------- */
.error-panel {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 42px;
  padding: 43px 46px 40px;
  overflow: hidden;
}

.error-doodle {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px dashed var(--line-dashed);
  border-radius: 50%;
  background:
    radial-gradient(circle at 1px 1px, rgba(130, 99, 71, 0.06) 0.7px, transparent 0.9px),
    var(--paper-soft);
  background-size: 8px 8px;
  transform: rotate(-2deg);
}

.error-doodle svg {
  width: 128px;
  height: 128px;
  color: var(--brown);
  opacity: 0.72;
}

.error-copy .eyebrow {
  margin-bottom: 7px;
}

.error-code {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 122px);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.95;
}

.error-copy h1 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 33px);
  letter-spacing: -0.02em;
}

.error-copy p {
  max-width: 410px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.8;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 19px;
}

/* --------------------------------------------------------------------------
   18. 动画
   -------------------------------------------------------------------------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.988);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-ready .paper-panel,
.is-ready .page-heading,
.is-ready .home-intro {
  animation: fade-up 420ms var(--ease) both;
}

.is-ready .home-grid > :nth-child(2) {
  animation: fade-up 480ms 40ms var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   19. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .shell,
  .curtain-inner {
    width: min(var(--shell), calc(100% - 36px));
  }

  .meta-bar {
    gap: 14px;
  }

  .meta-weather {
    justify-self: start;
  }

  .meta-weather__detail {
    gap: 4px;
  }

  .vault-content {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .definition-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .clock-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 30px;
  }
}

@media (max-width: 960px) {
  .meta-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
  }

  .meta-weather {
    justify-self: center;
    padding-inline: 7px;
  }

  .meta-weather__detail {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-intro {
    padding-top: 34px;
  }

  .tool-ledger {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }

  .tool-row:nth-last-of-type(-n + 2) {
    border-bottom: 0;
  }

  .vault-content {
    grid-template-columns: 1fr;
  }

  .vault-side {
    border-top: 1px dashed var(--line-dashed);
    border-left: 0;
  }

  .generator-checks {
    grid-template-columns: repeat(4, 1fr);
  }

  .generator-actions {
    grid-template-columns: 160px 160px;
    justify-content: start;
  }

  .security-notes {
    grid-template-columns: 1fr;
  }

  .notes-layout {
    grid-template-columns: 1fr;
  }

  .notes-app.is-empty .notes-layout {
    grid-template-columns: 1fr;
  }

  .notes-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 12;
    width: min(286px, 84%);
    border-right: 1px solid var(--line-strong);
    background: var(--paper-soft);
    box-shadow: 12px 0 32px rgba(44, 62, 80, 0.12);
    transform: translateX(-104%);
    transition: transform 200ms var(--ease);
  }

  .notes-app.sidebar-open .notes-sidebar {
    transform: translateX(0);
  }

  .notes-library-toggle {
    display: inline-flex;
  }

  .notes-scrim {
    position: absolute;
    inset: 0;
    z-index: 11;
    display: block;
    border: 0;
    background: rgba(44, 52, 58, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease);
  }

  .notes-app.sidebar-open .notes-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .notes-app.is-empty .notes-sidebar {
    position: static;
    width: auto;
    transform: none;
    box-shadow: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .notes-app.is-empty .notes-scrim {
    display: none;
  }

  .notes-app.is-empty .note-list {
    max-height: 210px;
  }

  .editor-split {
    height: clamp(440px, 58vh, 600px);
  }

  .external-email-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .error-panel {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 30px;
    padding: 34px 32px;
  }

  .error-doodle {
    min-height: 180px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 14px;
    background-size: 8px 8px, auto;
  }

  .shell,
  .curtain-inner {
    width: calc(100% - 28px);
  }

  .curtain {
    height: 62px;
  }

  .curtain-art {
    width: 124px;
  }

  .curtain-wordmark {
    padding-left: 10px;
  }

  .curtain-wordmark strong {
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .curtain-wordmark small {
    font-size: 7.5px;
    letter-spacing: 0.13em;
  }

  .curtain-stitch {
    max-width: 100px;
  }

  .curtain-stitch i:nth-child(3) {
    display: none;
  }

  .curtain--compact {
    height: 50px;
  }

  .curtain--compact .curtain-art {
    width: 100px;
  }

  .curtain--compact .curtain-wordmark {
    display: none;
  }

  .meta-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding-block: 10px;
  }

  .meta-clock-block {
    gap: 8px;
  }

  .meta-date {
    font-size: 10.5px;
  }

  .meta-time {
    font-size: 15px;
  }

  .meta-weather {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    min-height: 27px;
    margin-top: -1px;
    padding: 2px 0;
    font-size: 10.5px;
  }

  .meta-weather:hover {
    background: transparent;
    border-color: transparent;
  }

  .meta-weather__icon .icon {
    width: 17px;
    height: 17px;
  }

  .meta-weather__temp {
    font-size: 14px;
  }

  .meta-weather__detail {
    max-width: none;
    white-space: normal;
  }

  .meta-tools {
    grid-column: 2;
    grid-row: 1;
  }

  .tool-index > summary {
    min-height: 33px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .tool-index__panel {
    width: min(286px, calc(100vw - 28px));
  }

  .page-meta {
    min-height: 48px;
    gap: 8px;
  }

  .meta-page-title {
    font-size: 12px;
  }

  .meta-mini-date {
    display: none;
  }

  .meta-clock-inline {
    font-size: 11px;
  }

  .page-heading {
    padding: 28px 1px 22px;
  }

  .page-heading h1 {
    margin-top: 8px;
    font-size: clamp(29px, 8.3vw, 37px);
  }

  .page-heading p {
    margin-top: 11px;
    font-size: 12.5px;
    line-height: 1.75;
  }

  .sketch-underline {
    width: min(250px, 64vw);
    height: 9px;
  }

  .panel-head {
    padding: 17px 16px 14px;
  }

  .panel-head h2 {
    font-size: 18px;
  }

  .panel-head p {
    font-size: 10.5px;
  }

  .panel-body {
    padding: 17px 16px;
  }

  .home-intro {
    align-items: flex-start;
    gap: 18px;
    padding: 29px 1px 24px;
  }

  .home-intro h1 {
    margin-top: 9px;
    font-size: clamp(31px, 9.2vw, 41px);
  }

  .home-intro__lede {
    margin-top: 11px;
    font-size: 11.5px;
  }

  .home-date-stamp {
    width: 78px;
    padding: 7px 7px 8px;
  }

  .home-date-stamp strong {
    font-size: 28px;
  }

  .home-date-stamp__month {
    font-size: 8px;
  }

  .home-date-stamp small {
    font-size: 7px;
  }

  .home-grid {
    gap: 18px;
  }

  .task-panel {
    background:
      linear-gradient(
        90deg,
        transparent 0,
        transparent 27px,
        rgba(157, 116, 83, 0.1) 27px,
        rgba(157, 116, 83, 0.1) 28px,
        transparent 28px
      ),
      var(--panel);
  }

  .task-panel .panel-head {
    padding-left: 41px;
  }

  .task-form {
    margin-left: 28px;
    padding: 11px 13px 11px 12px;
  }

  .task-form .btn span {
    display: none;
  }

  .task-form .btn {
    width: 34px;
    min-width: 34px;
    padding: 0;
  }

  .task-list {
    margin-left: 28px;
    padding: 6px 13px 9px 12px;
  }

  .task-text {
    font-size: 12.5px;
  }

  .task-delete {
    opacity: 0.65;
  }

  .task-panel__foot {
    margin-left: 28px;
    padding: 9px 13px 12px 12px;
  }

  .tool-ledger {
    display: flex;
  }

  .tool-row {
    min-height: 51px;
  }

  .tool-row:nth-last-of-type(-n + 2) {
    border-bottom: 1px dotted var(--line);
  }

  .home-footnote {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 30px;
    padding-bottom: 25px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .vault-gate {
    padding: 27px 12px 27px;
  }

  .vault-gate h2 {
    font-size: 24px;
  }

  .vault-toolbar {
    align-items: flex-start;
    padding: 13px 14px;
  }

  .vault-toolbar__actions {
    width: 100%;
  }

  .vault-toolbar__actions .btn {
    flex: 1;
  }

  .vault-main {
    padding: 14px 13px 20px;
  }

  .vault-search-row {
    flex-wrap: wrap;
  }

  .vault-search-row .btn {
    width: 100%;
  }

  .vault-record {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 13px 2px;
  }

  .vault-secret {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .vault-record__actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .vault-side {
    padding: 15px 14px 18px;
  }

  .generator-checks {
    grid-template-columns: 1fr 1fr;
  }

  .generator-actions {
    grid-template-columns: 1fr 1fr;
  }

  .security-notes {
    gap: 8px;
  }

  .notes-topbar {
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 12px;
  }

  .notes-title-field {
    flex: 1 1 calc(100% - 50px);
    order: 1;
    min-height: 35px;
    font-size: 18px;
  }

  .notes-library-toggle {
    order: 0;
  }

  .notes-topbar__actions {
    order: 2;
    width: 100%;
    justify-content: flex-end;
    padding-top: 3px;
  }

  .save-status {
    margin-right: auto;
    justify-content: flex-start;
  }

  .notes-tag-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 7px 12px;
  }

  .notes-tag-row__label {
    display: none;
  }

  .editor-tabs {
    display: flex;
  }

  .editor-split {
    display: block;
    height: auto;
  }

  .editor-pane,
  .preview-pane {
    height: clamp(380px, 55vh, 520px);
  }

  .editor-pane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .notes-app[data-pane="preview"] .editor-pane {
    display: none;
  }

  .notes-app[data-pane="editor"] .preview-pane {
    display: none;
  }

  .preview-scroll {
    padding: 15px 16px 28px;
  }

  .markdown-input {
    padding: 14px 13px 22px;
    font-size: 11.5px;
  }

  .cheat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cheat-item {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .cheat-sheet__body {
    max-height: 60vh;
  }

  .notes-empty-workspace {
    min-height: 330px;
  }

  .resources-panel,
  .weather-panel,
  .external-panel {
    padding: 17px 15px 21px;
  }

  .resources-intro {
    gap: 12px;
  }

  .resources-intro h2 {
    font-size: 20px;
  }

  .definition-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .definition-item {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .definition-item:nth-child(2n) {
    border-right: 0;
  }

  .definition-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .definition-item:last-child {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .complexity-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .complexity-table {
    display: block;
    overflow-x: auto;
  }

  .complexity-table th,
  .complexity-table td {
    white-space: nowrap;
  }

  .complexity-table td:nth-child(2) {
    min-width: 160px;
  }

  .oi-callout {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 15px;
  }

  .oi-callout__actions {
    width: 100%;
    padding-left: 49px;
  }

  .reading-list {
    grid-template-columns: 1fr;
  }

  .weather-search-form {
    flex-wrap: wrap;
  }

  .weather-search-form .input-wrap {
    flex-basis: 100%;
    max-width: none;
  }

  .weather-search-form .btn {
    flex: 1;
  }

  .weather-now {
    grid-template-columns: 1fr;
    gap: 19px;
    padding-inline: 4px;
  }

  .weather-now__main {
    gap: 17px;
  }

  .weather-symbol {
    width: 82px;
    height: 82px;
  }

  .weather-symbol .icon {
    width: 44px;
    height: 44px;
  }

  .weather-temperature {
    font-size: 68px;
  }

  .weather-temperature sup {
    margin-top: 8px;
    font-size: 18px;
  }

  .weather-now__aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    min-width: 0;
    padding: 13px 0 0;
    border-top: 1px dashed var(--line);
    border-left: 0;
  }

  .weather-stat:nth-child(3) {
    grid-column: 1 / -1;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .weather-stage {
    padding-top: 17px;
  }

  .weather-stage__foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .clock-panel {
    padding: 18px 16px 21px;
  }

  .clock-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 5px 0 18px;
  }

  .analog-clock {
    width: 185px;
  }

  .clock-readout {
    text-align: center;
  }

  .clock-readout__date {
    justify-content: center;
    font-size: 11px;
  }

  .clock-time {
    font-size: clamp(45px, 14vw, 62px);
  }

  .clock-caption {
    justify-content: center;
    font-size: 9px;
  }

  .clock-facts {
    margin-top: 15px;
  }

  .clock-fact {
    padding: 10px 8px 10px 0;
  }

  .clock-fact:not(:first-child) {
    padding-left: 10px;
  }

  .clock-fact dt {
    font-size: 8px;
  }

  .clock-fact dd {
    font-size: 11px;
  }

  .clock-panel__foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    font-size: 8.5px;
  }

  .random-panel {
    padding: 32px 14px 22px;
  }

  .random-drum {
    min-height: 280px;
    padding: 28px 17px;
  }

  .random-result__name {
    font-size: clamp(26px, 8vw, 35px);
  }

  .random-result__desc {
    font-size: 10.5px;
  }

  .external-email-grid {
    grid-template-columns: 1fr;
  }

  .external-row {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 8px 10px;
  }

  .external-row__link {
    grid-column: 2;
    justify-self: start;
  }

  .external-hint {
    padding-left: 37px;
  }

  .external-memo {
    padding: 12px 12px;
  }

  .error-panel {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 25px 19px 26px;
    text-align: center;
  }

  .error-doodle {
    width: 150px;
    min-height: 150px;
    margin-inline: auto;
  }

  .error-doodle svg {
    width: 96px;
    height: 96px;
  }

  .error-copy .eyebrow {
    justify-content: center;
  }

  .error-copy p {
    margin-inline: auto;
  }

  .error-actions {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .decorative-desk-note {
    display: none;
  }

  .curtain-brand {
    gap: 8px;
  }

  .curtain-wordmark {
    display: none;
  }

  .meta-clock-block {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .meta-date {
    font-size: 9.5px;
  }

  .meta-time {
    font-size: 14px;
  }

  .meta-weather__detail {
    font-size: 9.5px;
  }

  .meta-weather__sep:last-of-type {
    display: none;
  }

  .home-intro {
    display: block;
  }

  .home-date-stamp {
    display: none;
  }

  .home-intro h1 {
    font-size: clamp(29px, 9.8vw, 37px);
  }

  .home-intro__lede {
    align-items: flex-start;
  }

  .tool-index__panel {
    position: fixed;
    top: 106px;
    right: 14px;
    left: 14px;
    width: auto;
    max-height: calc(100vh - 122px);
  }

  .panel-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .random-actions .btn {
    flex: 1;
  }

  .random-main-btn {
    flex-basis: 100%;
  }

  .generator-checks {
    gap: 7px;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  .form-actions .btn {
    flex: 1;
  }

  .dialog__form {
    padding: 19px 16px;
  }

  .dialog__actions .btn {
    flex: 1;
  }

  .toast-region {
    right: 14px;
    bottom: 14px;
    width: calc(100vw - 28px);
  }

  .cheat-grid {
    grid-template-columns: 1fr;
  }

  .notes-app.sidebar-open .notes-sidebar {
    width: min(272px, 88%);
  }

  .weather-symbol {
    width: 74px;
    height: 74px;
  }

  .weather-temperature {
    font-size: 58px;
  }

  .weather-condition {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .weather-now__aside {
    grid-template-columns: 1fr;
  }

  .weather-stat:nth-child(3) {
    grid-column: auto;
  }

  .weather-stat {
    padding-bottom: 7px;
  }

  .clock-facts {
    grid-template-columns: 1fr;
  }

  .clock-fact,
  .clock-fact:not(:first-child) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
    border-right: 0;
    border-bottom: 1px dotted var(--line);
  }

  .clock-fact:last-child {
    border-bottom: 0;
  }

  .clock-fact dd {
    margin-top: 0;
  }

  .page-meta .meta-clock-inline {
    display: none;
  }

  .site-footer__note {
    font-size: 9px;
  }
}

@media (hover: none) {
  .task-delete {
    opacity: 0.55;
  }

  .tool-row:hover {
    padding-left: 9px;
  }
}

/* --------------------------------------------------------------------------
   20. 页面局部补充
   -------------------------------------------------------------------------- */
.notes-empty-workspace .button-row {
  justify-content: center;
  margin-top: 4px;
}

.notes-empty-workspace {
  padding: 36px 24px;
}

.notes-title-field:disabled,
.notes-tag-input:disabled,
.markdown-input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.notes-tag-chips:empty {
  display: none;
}

.weather-stage__foot .btn {
  min-height: 28px;
  margin-left: auto;
  padding-inline: 8px;
  font-size: 9.5px;
}

.weather-stage__foot .btn .icon {
  width: 12px;
  height: 12px;
}

.weather-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-status[hidden] {
  display: none;
}

.weather-status .icon {
  width: 14px;
  height: 14px;
  color: var(--brown-soft);
}

.weather-status.is-error .icon {
  color: var(--danger);
}

.random-countdown .btn--link {
  margin-left: 3px;
  color: var(--brown);
  font-size: 9.5px;
}

.random-result__url:empty {
  display: none;
}

.section-label .icon {
  width: 12px;
  height: 12px;
}

@media (max-width: 760px) {
  .notes-empty-workspace {
    padding: 28px 16px;
  }

  .notes-empty-workspace .button-row {
    width: 100%;
  }

  .notes-empty-workspace .button-row .btn {
    flex: 1;
  }

  .weather-stage__foot .btn {
    margin-left: 0;
  }

  .meta-clock-block {
    gap: 8px;
    min-height: 34px;
    padding: 4px 8px 5px;
  }

  .mindmap-view {
    height: auto;
  }

  .mindmap-head {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .mindmap-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .mindmap-layout,
  .mindmap-view.has-selection .mindmap-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mindmap-canvas-wrap {
    height: 390px;
  }

  .mindmap-detail {
    max-height: 320px;
    border-top: 1px dashed var(--line);
    border-left: 0;
  }

  .mindmap-detail__empty {
    min-height: 160px;
  }
}

@media (max-width: 520px) {
  .meta-clock-block {
    padding: 4px 7px;
  }

  .editor-tabs {
    padding: 6px 8px;
  }

  .editor-tab {
    gap: 2px;
    padding-inline: 4px;
    font-size: 9.5px;
  }

  .mindmap-canvas-wrap {
    height: 340px;
  }

  .mindmap-detail {
    max-height: 290px;
    padding-inline: 12px;
  }
}

/* ==========================================================================
   Aster 增量层
   1. 现代交互 / 主题 / 命令面板
   2. Aster 密度与知识库工具
   3. 文件夹、右键菜单、拖拽、骨架屏
   4. 主题表面覆盖与响应式
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 现代交互层
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, .paper-panel, .note-item,
  .tool-row, .meta-clock-block, .meta-weather, .editor-pane, .preview-pane,
  .mindmap-node, .folder-row__button) {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--ease);
}

.btn,
.insert-btn,
.format-btn,
.preview-fullscreen-btn,
.notes-delete-btn,
.notes-action-btn,
.folder-add-btn,
.preview-fullscreen-btn,
.color-btn {
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease),
    color 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease);
}

.btn:hover:not(:disabled),
.insert-btn:hover:not(:disabled),
.format-btn:hover:not(:disabled),
.preview-fullscreen-btn:hover:not(:disabled),
.notes-delete-btn:hover:not(:disabled),
.notes-action-btn:hover:not(:disabled),
.folder-add-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-small);
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

details[data-menu][open] > .menu-panel,
details[data-menu][open] > .tool-index__panel,
details[data-menu][open] > .toolbar-more__panel,
details[data-menu][open] > .theme-dock__panel {
  animation: fadeSlide 150ms var(--ease) both;
}

/* --------------------------------------------------------------------------
   主题切换器
   -------------------------------------------------------------------------- */
.theme-dock {
  position: relative;
  z-index: 40;
}

.theme-dock > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-small);
  list-style: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.theme-dock > summary::-webkit-details-marker {
  display: none;
}

.theme-dock > summary .icon {
  color: var(--accent);
}

.theme-dock > summary:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.theme-dock__text {
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.theme-dock__sep {
  color: var(--ink-faint);
  font-size: 10px;
}

.theme-dock__current {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.theme-dock__chevron {
  width: 11px;
  height: 11px;
  color: var(--ink-faint);
  transition: transform 150ms var(--ease);
}

.theme-dock[open] .theme-dock__chevron {
  transform: rotate(180deg);
}

.theme-dock__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  bottom: auto;
  z-index: 1200;
  width: 218px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}

.theme-dock__eyebrow {
  padding: 3px 7px 6px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.theme-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
}

.theme-choice:hover {
  background: var(--paper-soft);
}

.theme-choice.is-active {
  border-color: var(--line);
  background: var(--panel-muted);
}

.theme-choice__swatch {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 1px 3px rgba(30, 35, 38, 0.12);
}

.theme-choice strong,
.theme-choice small {
  display: block;
}

.theme-choice strong {
  font-size: 11px;
  font-weight: 650;
}

.theme-choice small {
  margin-top: 1px;
  color: var(--ink-faint);
  font-size: 8.5px;
}

/* --------------------------------------------------------------------------
   命令面板
   -------------------------------------------------------------------------- */
.command-palette {
  width: min(680px, calc(100vw - 28px));
  max-height: min(72vh, 640px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: transparent;
  overflow: visible;
}

.command-palette::backdrop {
  background: rgba(24, 28, 30, 0.35);
  backdrop-filter: blur(3px);
}

.command-palette__panel {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}

.command-palette__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-muted);
}

.command-palette__search > .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.command-palette__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
}

.command-palette__search input::placeholder {
  color: var(--ink-faint);
}

.command-palette kbd,
.command-item kbd {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 4px;
  color: var(--ink-faint);
  background: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  white-space: nowrap;
}

.command-palette__list {
  max-height: min(56vh, 470px);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
}

.command-item:hover,
.command-item.is-active {
  border-color: var(--line);
  background: var(--panel-muted);
}

.command-item__icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent);
  background: var(--paper-soft);
}

.command-item__icon .icon {
  width: 15px;
  height: 15px;
}

.command-item__copy {
  min-width: 0;
  flex: 1;
}

.command-item__copy strong,
.command-item__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-item__copy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.command-item__copy small {
  margin-top: 1px;
  color: var(--ink-faint);
  font-size: 9px;
}

.command-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  color: var(--ink-faint);
  font-size: 11px;
}

.command-empty .icon {
  width: 16px;
  height: 16px;
}

.command-palette__foot {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  background: var(--panel-muted);
  font-family: var(--font-mono);
  font-size: 8px;
}

/* --------------------------------------------------------------------------
   Aster 密度：现代工作台，但仍沿用变量骨架
   -------------------------------------------------------------------------- */
body.aster-page {
  background-image: none;
  background-color: var(--bg);
}

body.aster-page .curtain-inner {
  width: min(1560px, calc(100% - 56px));
}

body.aster-page .page-meta {
  border-bottom-color: var(--line);
}

@media (max-width: 1080px) {
  body.aster-page .curtain-inner {
    width: calc(100% - 36px);
  }
}

@media (max-width: 760px) {
  body.aster-page .curtain-inner {
    width: calc(100% - 28px);
  }
}

.aster-heading {
  max-width: none;
  padding: 30px 2px 24px;
}

.aster-heading .eyebrow {
  color: var(--accent);
  letter-spacing: 0.18em;
}

.aster-heading h1 {
  margin-top: 4px;
  color: var(--text);
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.aster-heading .sketch-underline {
  display: none;
}

.aster-heading > p {
  max-width: 780px;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13px;
}

.aster-heading .heading-note {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

body.aster-page .notes-app {
  border-radius: var(--radius-md);
  box-shadow: 0 12px 34px rgba(28, 35, 38, 0.06);
}

body.aster-page .notes-sidebar {
  background: var(--paper-soft);
  border-right-color: var(--line);
}

body.aster-page .notes-topbar,
body.aster-page .notes-tag-row {
  background: var(--panel);
}

body.aster-page .editor-pane {
  background: var(--panel);
}

body.aster-page .preview-pane {
  background: var(--panel-muted);
}

body.aster-page .markdown-input {
  background: transparent;
  font-size: 13px;
}

body.aster-page .preview-scroll {
  background: transparent;
  padding-inline: clamp(20px, 2.5vw, 36px);
}

body.aster-page .page-heading + .paper-panel {
  margin-top: 0;
}

.aster-heading .heading-note .icon {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   主页每日问候
   -------------------------------------------------------------------------- */
.home-quote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 590px;
  margin-top: 9px;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.65;
}

.home-quote .icon {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--brown-soft);
}

/* --------------------------------------------------------------------------
   骨架屏
   -------------------------------------------------------------------------- */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.note-skeleton {
  display: grid;
  gap: 7px;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  list-style: none;
}

.note-skeleton span,
.skeleton-line {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-faint) 18%, transparent);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

.note-skeleton span:nth-child(2) {
  width: 82%;
}

.note-skeleton span:nth-child(3) {
  width: 52%;
}

.skeleton-weather {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 230px;
  padding: 30px 8px;
}

.skeleton-weather__orb {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink-faint) 14%, transparent);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

.skeleton-weather__copy {
  display: grid;
  flex: 1;
  gap: 12px;
}

.skeleton-line--short { width: 34%; }
.skeleton-line--mid { width: 58%; }
.skeleton-line--temp { width: 42%; height: 56px; border-radius: 12px; }

.skeleton-weather__stats {
  display: grid;
  width: 220px;
  gap: 15px;
}

.skeleton-weather__stats .skeleton-line {
  height: 12px;
}

/* --------------------------------------------------------------------------
   文件/图片格式与 Callout
   -------------------------------------------------------------------------- */
.markdown-body u {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.mark-ink { color: #2c4f68; }
.mark-rust { color: #9b5548; }
.mark-olive { color: #5e7359; }
.mark-mauve { color: #716381; }

.callout {
  margin: 1em 0;
  border: 1px solid var(--line);
  border-left: 3px solid #8fa6b6;
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  overflow: hidden;
}

.callout--warning {
  border-left-color: #b9814b;
}

.callout--tip {
  border-left-color: #789070;
}

.callout__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  color: var(--ink-soft);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.callout__summary::-webkit-details-marker {
  display: none;
}

.callout__summary:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.callout__tag {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.callout__title {
  flex: 1;
  font-size: 11.5px;
  font-weight: 650;
}

.callout__chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms var(--ease);
}

.callout[open] .callout__chevron {
  transform: rotate(-135deg);
}

.callout__body {
  padding: 0 14px 11px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
}

.callout__body > :first-child {
  margin-top: 0.7em;
}

.callout .callout {
  margin: 0.7em 0;
}

/* --------------------------------------------------------------------------
   2. Aster 知识库工具
   -------------------------------------------------------------------------- */
.notes-action-btn,
.notes-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding-inline: 8px;
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--panel);
  font-size: 10px;
}

.notes-delete-btn:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.notes-delete-btn .icon,
.notes-action-btn .icon {
  width: 13px;
  height: 13px;
}

.inline-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line));
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 11px;
}

.inline-confirm__actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.btn--danger {
  border: 1px solid var(--danger);
  color: #fff;
  background: var(--danger);
}

.btn--danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: #fff;
  background: color-mix(in srgb, var(--danger) 86%, #000);
}

/* 搜索范围 / 文件夹树 */
.notes-search-scope {
  display: flex;
  gap: 2px;
  margin: -2px 0 9px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-deep);
}

.notes-search-scope button {
  flex: 1;
  min-height: 23px;
  border: 0;
  border-radius: 5px;
  color: var(--ink-faint);
  background: transparent;
  font-size: 9px;
}

.notes-search-scope button.is-active {
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(30, 35, 38, 0.07);
}

.folder-tree {
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}

.folder-tree__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 22px;
}

.folder-add-btn {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-faint);
  background: transparent;
}

.folder-add-btn:hover {
  border-color: var(--line);
  color: var(--accent);
  background: var(--panel);
}

.folder-tree__list {
  display: flex;
  max-height: 144px;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.folder-row,
.folder-tree__list > .folder-row__button {
  position: relative;
  min-width: 0;
}

.folder-row__button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  font-size: 10px;
}

.folder-row__button:hover {
  color: var(--ink);
  background: var(--panel);
}

.folder-row__button.is-active {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

.folder-row__button .icon {
  color: var(--brown-soft);
}

.folder-row__button span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-row__button em {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
}

.folder-row[draggable="true"] {
  cursor: grab;
}

.folder-row__grip {
  position: absolute;
  top: 50%;
  left: 2px;
  z-index: 1;
  display: grid;
  width: 10px;
  height: 20px;
  place-items: center;
  color: var(--ink-faint);
  opacity: 0.32;
  transform: translateY(-50%);
  cursor: grab;
  pointer-events: auto;
}

.folder-row__grip .icon {
  width: 9px;
  height: 9px;
}

.folder-row__button {
  padding-left: 15px;
}

.folder-row:hover .folder-row__grip {
  opacity: 0.8;
}

.folder-row.is-dragging {
  opacity: 0.45;
}

.folder-row.is-drop-target,
.note-list__row.is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
}

.folder-new {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}

.folder-new .input {
  min-width: 0;
  min-height: 27px;
  padding: 3px 6px;
  font-size: 9.5px;
}

.folder-new .btn {
  min-height: 27px;
  padding-inline: 6px;
  font-size: 9px;
}

/* 文件夹归属输入 */
.notes-folder-field {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 9px;
  white-space: nowrap;
}

.notes-folder-field .icon {
  width: 11px;
  height: 11px;
}

.notes-folder-input {
  width: 96px;
  min-height: 25px;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px dashed var(--line-strong);
  border-radius: 0;
  color: var(--ink-soft);
  background: transparent;
  font-size: 10px;
}

.notes-folder-input:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}

.notes-folder-input::placeholder {
  color: var(--ink-faint);
}

/* 工具条 */
.editor-toolbar {
  gap: 5px;
  align-content: center;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.toolbar-label {
  margin-right: 1px;
}

.toolbar-more {
  position: relative;
}

.toolbar-more > summary {
  list-style: none;
}

.toolbar-more > summary::-webkit-details-marker {
  display: none;
}

.toolbar-more__panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 216px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}

.format-btn {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-soft);
  background: var(--panel);
  font-family: var(--font-display);
  font-size: 11px;
}

.format-btn:hover {
  border-color: var(--line-strong);
  color: var(--accent);
  background: var(--paper-soft);
}

.color-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.color-btn:hover {
  transform: scale(1.12);
}

.color-btn--ink { background: #2c4f68; }
.color-btn--rust { background: #9b5548; }
.color-btn--olive { background: #5e7359; }
.color-btn--mauve { background: #716381; }

/* 预览全屏 */
.preview-head__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.preview-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-faint);
  background: var(--panel);
  font-size: 8.5px;
}

.preview-fullscreen-btn:hover {
  color: var(--accent);
  border-color: var(--line-strong);
}

.preview-pane.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg);
}

.preview-pane.is-fullscreen .preview-head {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
  padding-inline: clamp(16px, 4vw, 48px);
  background: var(--panel);
}

.preview-pane.is-fullscreen .preview-scroll {
  flex: 1;
  min-height: 0;
  padding: clamp(24px, 4vw, 54px) max(18px, calc((100vw - 920px) / 2));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

body.preview-fullscreen-open {
  overflow: hidden;
}

/* 思维导图编辑 */
.mindmap-node__grip {
  position: absolute;
  top: 50%;
  left: 4px;
  z-index: 2;
  display: grid;
  width: 15px;
  height: 22px;
  place-items: center;
  color: var(--ink-faint);
  transform: translateY(-50%);
  cursor: grab;
}

.mindmap-node__grip .icon {
  width: 10px;
  height: 10px;
}

.mindmap-node:not(.mindmap-node--root) .mindmap-node__main {
  padding-left: 22px;
}

.mindmap-node.is-dragging {
  opacity: 0.42;
}

.mindmap-node.is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  background: var(--warning-soft);
}

.mindmap-node-editor {
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
}

.mindmap-node-editor__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.mindmap-node-editor__row label {
  color: var(--ink-faint);
  font-size: 9px;
}

.mindmap-node-editor__row .input {
  min-height: 28px;
  padding: 3px 7px;
  font-size: 10px;
}

.mindmap-node-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.mindmap-node-editor__actions .btn {
  min-height: 26px;
  padding-inline: 7px;
  font-size: 9px;
}

.mindmap-delete-node:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.mindmap-node-editor__hint {
  margin-top: 6px;
  color: var(--ink-faint);
  font-size: 8px;
  line-height: 1.55;
}

/* 右键菜单 */
.note-context {
  position: fixed;
  z-index: 1500;
  width: 228px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}

.note-context__panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.note-context__panel[hidden] {
  display: none;
}

.note-context__eyebrow {
  padding: 5px 8px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.09em;
}

.note-context__item,
.note-context__folder {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  font-size: 10.5px;
}

.note-context__item:hover,
.note-context__folder:hover,
.note-context__folder.is-current {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel-muted);
}

.note-context__item--danger {
  color: var(--danger);
}

.note-context__item--danger:hover {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: var(--danger-soft);
}

.note-context__move-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.note-context__back {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  color: var(--ink-faint);
  background: transparent;
}

.note-context__back:hover {
  background: var(--panel-muted);
}

.note-context__folders {
  display: flex;
  max-height: 160px;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.note-context__folder .icon {
  color: var(--brown-soft);
}

.note-context__new-folder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}

.note-context__new-folder .input {
  min-height: 28px;
  padding: 3px 6px;
  font-size: 9.5px;
}

.note-context__new-folder .btn {
  min-height: 28px;
  padding-inline: 6px;
  font-size: 9px;
}

/* 笔记拖拽行 */
.note-list__row {
  position: relative;
  list-style: none;
}

.note-list__row[draggable="true"] {
  cursor: grab;
}

.note-item__grip {
  position: absolute;
  top: 13px;
  left: 2px;
  z-index: 2;
  display: grid;
  width: 12px;
  height: 20px;
  place-items: center;
  color: var(--ink-faint);
  opacity: 0.22;
  cursor: grab;
  pointer-events: auto;
}

.note-item__grip .icon {
  width: 9px;
  height: 9px;
}

.note-list__row:hover .note-item__grip,
.note-list__row.is-dragging .note-item__grip {
  opacity: 0.8;
}

.note-list__row .note-item {
  padding-left: 19px;
}

.note-list__row.is-dragging {
  opacity: 0.45;
}

/* 天气骨架响应式 */
@media (max-width: 760px) {
  .skeleton-weather {
    flex-wrap: wrap;
    gap: 16px;
    min-height: 210px;
  }

  .skeleton-weather__orb {
    width: 66px;
    height: 66px;
  }

  .skeleton-weather__copy {
    flex-basis: 50%;
  }

  .skeleton-weather__stats {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   3. 现代主题表面覆盖
   -------------------------------------------------------------------------- */
html[data-theme="gray"] .curtain,
html[data-theme="dark"] .curtain {
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  background-image: none;
  opacity: 1;
}

html[data-theme="gray"] .curtain::before,
html[data-theme="gray"] .curtain::after,
html[data-theme="dark"] .curtain::before,
html[data-theme="dark"] .curtain::after {
  display: none;
}

html[data-theme="gray"] .curtain-inner,
html[data-theme="dark"] .curtain-inner {
  display: flex;
  height: 100%;
}

html[data-theme="gray"] .curtain-art,
html[data-theme="dark"] .curtain-art {
  display: none;
}

html[data-theme="gray"] .curtain-wordmark,
html[data-theme="dark"] .curtain-wordmark {
  padding-left: 0;
  border-left: 0;
}

html[data-theme="gray"] .curtain-wordmark strong,
html[data-theme="dark"] .curtain-wordmark strong {
  color: var(--text);
}

html[data-theme="gray"] .curtain-wordmark small,
html[data-theme="dark"] .curtain-wordmark small {
  color: var(--ink-faint);
}

html[data-theme="gray"] .curtain-stitch,
html[data-theme="dark"] .curtain-stitch {
  opacity: 0.35;
}

html[data-theme="gray"] .curtain-stitch::before,
html[data-theme="dark"] .curtain-stitch::before {
  background: repeating-linear-gradient(
    to right,
    var(--line-strong) 0,
    var(--line-strong) 3px,
    transparent 3px,
    transparent 8px
  );
}

html[data-theme="gray"] .curtain-stitch i,
html[data-theme="dark"] .curtain-stitch i {
  border-color: var(--line-strong);
  background: var(--panel);
}

html[data-theme="dark"] body::after {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.025), transparent 42%),
    radial-gradient(ellipse at 88% 100%, rgba(0, 0, 0, 0.16), transparent 48%);
}

html[data-theme="dark"] .meta-clock-block,
html[data-theme="dark"] .meta-weather,
html[data-theme="dark"] .tool-index > summary,
html[data-theme="dark"] .paper-panel,
html[data-theme="dark"] .task-item:hover,
html[data-theme="dark"] .tool-row:hover,
html[data-theme="dark"] .note-item:hover,
html[data-theme="dark"] .notes-topbar,
html[data-theme="dark"] .notes-tag-row,
html[data-theme="dark"] .editor-toolbar,
html[data-theme="dark"] .preview-head,
html[data-theme="dark"] .notes-sidebar,
html[data-theme="dark"] .mindmap-head,
html[data-theme="dark"] .mindmap-detail,
html[data-theme="dark"] .mindmap-canvas-wrap,
html[data-theme="dark"] .study-resource-row,
html[data-theme="dark"] .definition-item,
html[data-theme="dark"] .oi-callout,
html[data-theme="dark"] .app-dialog,
html[data-theme="dark"] .menu-panel,
html[data-theme="dark"] .tool-index__panel,
html[data-theme="dark"] .theme-dock > summary,
html[data-theme="dark"] .note-context,
html[data-theme="dark"] .command-palette__panel {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .meta-clock-block {
  background: var(--panel-muted);
}

html[data-theme="dark"] .notes-sidebar {
  background: var(--paper-soft);
}

html[data-theme="dark"] .editor-pane {
  background: var(--panel);
}

html[data-theme="dark"] .preview-pane,
html[data-theme="dark"] .preview-scroll {
  background: var(--panel-muted);
}

html[data-theme="dark"] .markdown-input {
  color: var(--ink);
  background: transparent;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .notes-folder-input,
html[data-theme="dark"] .notes-tag-input {
  color: var(--ink);
  background: var(--panel-muted);
  border-color: var(--line);
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .insert-btn,
html[data-theme="dark"] .format-btn,
html[data-theme="dark"] .preview-fullscreen-btn,
html[data-theme="dark"] .notes-action-btn,
html[data-theme="dark"] .notes-delete-btn,
html[data-theme="dark"] .folder-add-btn {
  color: var(--ink-soft);
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .btn--primary {
  color: #1f2528;
  background: var(--brown-soft);
  border-color: var(--brown-soft);
}

html[data-theme="dark"] .note-item.is-active,
html[data-theme="dark"] .mindmap-node,
html[data-theme="dark"] .mindmap-node--root,
html[data-theme="dark"] .mindmap-node.is-selected,
html[data-theme="dark"] .folder-row__button.is-active,
html[data-theme="dark"] .theme-choice.is-active {
  background: var(--paper-deep);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .markdown-body code,
html[data-theme="dark"] .markdown-body pre,
html[data-theme="dark"] .markdown-body th,
html[data-theme="dark"] .callout,
html[data-theme="dark"] .cheat-sheet,
html[data-theme="dark"] .cheat-sheet__body,
html[data-theme="dark"] .latex-cheat-group h4 {
  color: var(--ink);
  background: var(--paper-deep);
  border-color: var(--line);
}

html[data-theme="dark"] .inline-confirm {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
}

html[data-theme="dark"] .mark-ink { color: #9fc6df; }
html[data-theme="dark"] .mark-rust { color: #e0a196; }
html[data-theme="dark"] .mark-olive { color: #b4c9a9; }
html[data-theme="dark"] .mark-mauve { color: #c2b2d4; }

/* 夜间色块：日期便签、清单输入栏和邮箱快捷入口不再发白。 */
html[data-theme="dark"] .meta-clock-block {
  color: var(--ink);
  background: var(--panel-muted);
  background-image: none;
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .meta-clock-block:hover,
html[data-theme="dark"] .meta-clock-block:focus-visible {
  background: var(--panel);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .meta-date {
  color: var(--ink-soft);
}

html[data-theme="dark"] .meta-time {
  color: var(--ink);
}

html[data-theme="dark"] .task-panel {
  background:
    linear-gradient(
      90deg,
      transparent 0,
      transparent 45px,
      rgba(181, 150, 114, 0.18) 45px,
      rgba(181, 150, 114, 0.18) 46px,
      transparent 46px
    ),
    var(--panel);
}

html[data-theme="dark"] .task-form {
  color: var(--ink);
  background: var(--panel-muted);
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .task-form__input {
  color: var(--ink);
  background: transparent;
  border-bottom-color: var(--line-strong);
}

html[data-theme="dark"] .task-form__input:focus {
  border-bottom-color: var(--accent);
}

html[data-theme="dark"] .task-form__input::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

html[data-theme="dark"] .tool-index__mail-links a {
  color: var(--ink-soft);
  background: var(--panel-muted);
  border-color: var(--line);
}

html[data-theme="dark"] .tool-index__mail-links a:hover {
  color: var(--ink);
  background: var(--paper-soft);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .home-date-stamp {
  color: var(--ink);
  background: var(--panel-muted);
  border-color: var(--line);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .home-date-stamp::before {
  background: rgba(181, 150, 114, 0.2);
}

html[data-theme="dark"] .home-date-stamp__month {
  color: var(--brown-soft);
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .home-date-stamp strong {
  color: var(--ink);
}

html[data-theme="dark"] .home-date-stamp small {
  color: var(--ink-faint);
}

html[data-theme="gray"] .btn--primary {
  color: #f7fbfc;
  background: var(--brown);
  border-color: var(--brown);
}

/* 小屏幕：保留工作台宽度，工具栏自然换行 */
@media (max-width: 760px) {
  .theme-dock {
    left: auto;
    bottom: auto;
  }

  .theme-dock__text,
  .theme-dock__sep,
  .theme-dock__chevron {
    display: none;
  }

  .theme-dock__current {
    display: inline;
    font-size: 9.5px;
  }

  .theme-dock > summary {
    width: auto;
    min-height: 33px;
    padding: 0 8px;
    gap: 3px;
  }

  .theme-dock__panel {
    top: calc(100% + 6px);
    width: 208px;
  }

  .command-palette {
    width: calc(100vw - 20px);
    max-height: 82vh;
  }

  .command-palette__foot {
    display: none;
  }

  .aster-heading {
    padding: 22px 1px 18px;
  }

  .aster-heading h1 {
    font-size: 42px;
  }

  .inline-confirm {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .inline-confirm__actions {
    width: 100%;
  }

  .inline-confirm__actions .btn {
    flex: 1;
  }

  .notes-topbar__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .notes-folder-field {
    margin-left: 0;
  }

  .toolbar-more__panel {
    width: 190px;
  }

  .mindmap-node-editor__row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mindmap-node-editor__row .btn {
    justify-self: start;
  }

  .home-quote {
    font-size: 10.5px;
  }
}

@media (max-width: 760px) {
  html[data-theme="gray"] .curtain .curtain-wordmark,
  html[data-theme="dark"] .curtain .curtain-wordmark {
    display: flex;
  }

  html[data-theme="gray"] .curtain-stitch,
  html[data-theme="dark"] .curtain-stitch {
    max-width: 90px;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .notes-topbar {
    flex-wrap: wrap;
  }

  .notes-topbar__actions {
    margin-left: auto;
  }

  .notes-tag-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .editor-split {
    height: clamp(500px, 58vh, 660px);
  }
}