/* ============================================================
   言灵 · 文游创作平台  v2.0  设计系统「言灵手稿 / 符箓」
   ------------------------------------------------------------
   视觉语言：中世纪手稿 + 中国法术符箓
     · 衬线标题（楷/宋优先），正文保持无衬线保证可读性
     · 直角为主，双线边框（外描边 + outline 内细线）
     · 朱砂印色 + 骨金，羊皮纸（浅色）/ 夜祭（深色）双主题
     · 装饰：魔法阵、四角金点、符箓竖批、页眉双划线

   ⚠ 约束：单文件 CSS，零依赖，file:// 直接可用。
      所有功能类名（供 core.js / studio.js / ui.js / player.js / 各页面使用）
      必须保持不变。新增的类名只允许增加，不允许改名。
      类名清单（旧版全部保留）：
      .acc .aff .aff-chip .bad .badge .big .bl-hd .bl-item .bl-list .bl-tx
      .bp-edge .bp-legend .bp-node .bp-svg .bp-wrap .brand .btn .bub .card
      .caret .chatbox .chip-row .chips .choice .choices .comment .crumb
      .crumb-bar .crumb-ops .cta .cur .d .dang .danger .dev .dice-box
      .divider .dot .dot-live .drawer .drawer-bd .drawer-hd .empty .endstats
      .fld .flex .g2 .g3 .g4 .ghost .glow .go .grid .hero .hide .hist-grp
      .hist-item .hist-list .hoverable .icon .in .kick .kicker .lead .lg
      .like .m-col .m-item .mark .mask .masonry .masonry-js .me .modal
      .modal-bd .modal-hd .mono .muted .nav .nav-left .nav-links .nav-ops
      .nm .no-motion .nowrap .num .ok .on .open .other .out .pal-empty
      .pal-foot .pal-g .pal-in .pal-item .pal-list .palette-wrap .pf-body
      .pf-card .pf-cover .pf-emoji .pf-meta .pf-tags .primary .res .reveal
      .rose .scroll-x .sec-hd .section .section-sm .sel .sep .show .skel
      .slot .slots .sm .spread .stack .stage .stat .stats .subtle
      .suite-chip .sys .t .table-wrap .tabs .to-top .toast .ttl .txt .u
      .vio .wrap .x .zone-card
      本次修复：新增 .nav-in（旧版漏了这个类的样式，导航三块是竖着叠的）
   ============================================================ */

/* ---------- 1. 素材：魔法阵（data-URI SVG，零外部依赖） ---------- */
:root{
  --rune:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23a4342a' stroke-width='1.1'><circle cx='200' cy='200' r='196'/><circle cx='200' cy='200' r='187'/><circle cx='200' cy='200' r='150'/><circle cx='200' cy='200' r='110'/><circle cx='200' cy='200' r='72'/><path d='M200 12 L362 300 L38 300 Z'/><path d='M200 388 L38 100 L362 100 Z'/><path d='M200 0 L200 400 M0 200 L400 200'/><circle cx='200' cy='200' r='34'/><circle cx='200' cy='200' r='6'/></svg>");
}

/* ---------- 2. Tokens：羊皮纸（浅色） ---------- */
:root{
  --bg:#efe6d4;          /* 羊皮纸底 */
  --bg-soft:#e6dac2;     /* 分区隔条 / 次级底 */
  --surface:#f9f4e8;     /* 卡片：更白的纸 */
  --surface-2:#f2ead8;
  --line:#d5c5a5;        /* 外线 */
  --line-2:#b6a179;      /* 强调线 */
  --ink:#2a2119;         /* 墨 */
  --ink-2:#5b4d3c;
  --ink-3:#7d6c53;
  --accent:#a4342a;      /* 朱砂 */
  --accent-2:#8a2418;
  --accent-soft:#f3ddd2;
  --gold:#9a7a2c;        /* 骨金 / 描金 */
  --violet:#4b3d73;
  --rose:#9c3358;
  --green:#3d6a49;
  --danger:#a02a22;

  /* 纸纹：通体极淡的纤维 + 顶部暖光，纯 repeating 保证可平铺、不随滚动重绘 */
  --paper:
    repeating-linear-gradient(45deg, rgba(60,42,24,.020) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(60,42,24,.016) 0 1px, transparent 1px 7px),
    radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 72%);

  /* 印刷感：硬边阴影 + 一点点柔和投影 */
  --shadow-s:2px 2px 0 color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-m:3px 3px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 8px 22px rgba(42,33,25,.07);
  --shadow-l:6px 7px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 22px 54px rgba(42,33,25,.13);

  /* 手稿是方角世界：旧版所有用到这些变量的地方会自动收成直角 */
  --r-s:2px; --r-m:3px; --r-l:4px; --r-xl:5px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,"Songti SC","STSong","KaiTi","楷体","Kaiti SC","STKaiti","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono","Consolas",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --nav-h:62px;
}

/* ---------- 2b. Tokens：夜祭（深色） ---------- */
[data-theme="dark"]{
  --bg:#100c09;
  --bg-soft:#171210;
  --surface:#1c1611;
  --surface-2:#221a14;
  --line:#3c2d22;
  --line-2:#5c4530;
  --ink:#e9dcc4;
  --ink-2:#c0ac8d;
  --ink-3:#8d7a60;
  --accent:#d4553f;
  --accent-2:#e2834f;
  --accent-soft:#2d1a14;
  --gold:#d8b46c;
  --violet:#8f7fc4;
  --rose:#d4658c;
  --green:#7fb98b;
  --danger:#e0685a;
  --rune:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23d8b46c' stroke-width='1.1'><circle cx='200' cy='200' r='196'/><circle cx='200' cy='200' r='187'/><circle cx='200' cy='200' r='150'/><circle cx='200' cy='200' r='110'/><circle cx='200' cy='200' r='72'/><path d='M200 12 L362 300 L38 300 Z'/><path d='M200 388 L38 100 L362 100 Z'/><path d='M200 0 L200 400 M0 200 L400 200'/><circle cx='200' cy='200' r='34'/><circle cx='200' cy='200' r='6'/></svg>");
  --paper:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px),
    radial-gradient(900px 520px at 50% -6%, rgba(212,85,63,.09), transparent 70%);
  --shadow-s:2px 2px 0 rgba(0,0,0,.45);
  --shadow-m:3px 3px 0 rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45);
  --shadow-l:6px 7px 0 rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
}

/* ---------- 2c. 专业纪律层：间距 / 排版 / 控件 / 焦点 / 动效 ----------
   借鉴 GitHub Primer（@primer/primitives）：4px 基准网格、语义化命名、
   克制的动效时长与缓动、outline 焦点环、floating 阴影首层 1px 边框。
   数值与来源见 02_架构与调优/v2.0-UI设计规范与token清单.md。
   语义色一律「指向」既有变量，自动跟随主题切换，不重复定义、不破坏旧变量。 */
:root{
  /* 间距：4px 基准 + 6 档语义（Primer base size scale） */
  --sp-unit:4px;
  --sp-xxs:2px;
  --sp-xs:4px;
  --sp-sm:8px;
  --sp-md:12px;
  --sp-lg:16px;
  --sp-xl:24px;
  --sp-2xl:32px;
  --sp-3xl:48px;
  --sp-4xl:64px;
  /* 行距：Primer stack gap（condensed / normal / spacious） */
  --gap-condensed:8px;
  --gap-normal:16px;
  --gap-spacious:24px;

  /* 排版：语义角色 → 字号。阅读区放宽到 relaxed，控件区守 Primer 密度 */
  --fs-display:40px;
  --fs-title-l:32px;
  --fs-title-m:20px;
  --fs-title-s:16px;
  --fs-body-l:16px;
  --fs-body-m:14px;
  --fs-body-s:12px;
  --fs-code:13px;
  --lh-tight:1.25;
  --lh-snug:1.375;
  --lh-normal:1.5;
  --lh-relaxed:1.625;
  --lh-loose:1.75;
  --fw-normal:400;
  --fw-medium:500;
  --fw-semibold:600;

  /* 控件尺寸（Primer control size scale）与触屏最小命中区 */
  --ctl-xs:24px;
  --ctl-sm:28px;
  --ctl-md:32px;
  --ctl-lg:40px;
  --ctl-xl:48px;
  --touch-min:44px;

  /* 边框与焦点环：outline 2px 内缩，不占布局、不被相邻元素裁切（WCAG 2.4.7） */
  --bw-thin:1px;
  --bw-thick:2px;
  --focus-w:2px;
  --focus-offset:-2px;

  /* 动效：hover ≤100ms、enter ≤300ms、exit ≤200ms；进入 easeOut、退出 easeIn */
  --dur-micro:100ms;
  --dur-short:200ms;
  --dur-medium:300ms;
  --dur-long:500ms;
  --ez-ease:cubic-bezier(.25,.1,.25,1);
  --ez-in:cubic-bezier(.7,.1,.75,.9);
  --ez-out:cubic-bezier(.3,.8,.6,1);
  --ez-inout:cubic-bezier(.6,0,.2,1);
  --ez-linear:cubic-bezier(0,0,1,1);

  /* 浮层阴影：首层 0 0 0 1px 模拟边框，避免 layout shift（Primer floating 技巧） */
  --shadow-float-s:0 0 0 1px color-mix(in srgb, var(--line-2) 25%, transparent), 0 6px 12px -3px color-mix(in srgb, var(--ink) 6%, transparent), 0 6px 18px 0 color-mix(in srgb, var(--ink) 12%, transparent);
  --shadow-float-m:0 0 0 1px color-mix(in srgb, var(--line-2) 30%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--ink) 8%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--ink) 12%, transparent);

  /* 语义色别名：指向既有变量，主题切换自动跟随（旧变量全部保留） */
  --bg-default:var(--bg);
  --bg-muted:var(--bg-soft);
  --bg-surface:var(--surface);
  --bg-inset:var(--surface-2);
  --fg-default:var(--ink);
  --fg-muted:var(--ink-2);
  --fg-subtle:var(--ink-3);
  --fg-accent:var(--accent);
  --fg-gold:var(--gold);
  --fg-danger:var(--danger);
  --fg-success:var(--green);
  --bg-accent-emphasis:var(--accent);
  --border-default:var(--line);
  --border-emphasis:var(--line-2);
  --border-muted:color-mix(in srgb, var(--line) 70%, transparent);
  --bg-disabled:var(--surface-2);
  /* 焦点色：朱砂在羊皮纸底上对比度约 5.9:1（>3:1 达标），可直接作品牌焦点环 */
  --focus-color:var(--accent);
}

/* ---------- 2d. 可访问性：尊重系统的减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 2e. 全局焦点环：仅键盘导航时可见，鼠标点击不出环 ---------- */
:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
  border-radius:0;
}

/* ---------- 3. Reset 与排印 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans);
  background-color:var(--bg); background-image:var(--paper);
  color:var(--ink);
  font-size:15px; line-height:1.72; -webkit-font-smoothing:antialiased;
  transition:background-color .4s var(--ease), color .4s var(--ease);
  overflow-x:hidden;
}
h1,h2,h3,h4{
  margin:0; font-family:var(--serif); font-weight:700;
  letter-spacing:.01em; line-height:1.34;
}
p{margin:0}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; border:0; background:none}
img{max-width:100%; display:block}
ul{margin:0; padding-left:1.15em}
::selection{background:color-mix(in srgb, var(--gold) 34%, transparent); color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--line-2); border:2px solid var(--bg-soft)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* 双线框真正笔画：外 border + outline 内细线（outline 不受 overflow 裁剪、
   不随内容滚动，比伪元素更稳）。留给 ::before/::after 做四角金点与装饰。 */
.frame-line{
  outline:1px solid var(--line);
  outline-offset:-6px;
}
.card,.zone-card,.pf-card,.stage,.stat,.slot,.bl-item,.hist-item,
.comment,.dice-box,.table-wrap,.bp-wrap,.modal,.drawer{
  outline:1px solid var(--line);
  outline-offset:-6px;
}

/* ---------- 4. 布局 ---------- */
.wrap{width:min(1220px,100% - 40px); margin-inline:auto}
.section{padding:64px 0}
.section-sm{padding:36px 0}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex; gap:12px; align-items:center}
.spread{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:14px}

/* ---------- 5. 顶部导航 ---------- */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(130%) blur(8px); -webkit-backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid var(--line-2);
  /* --dx / --dy 由顶栏把手拖动写入，默认 0 即贴顶 */
  transform:translate(var(--dx,0px), var(--dy,0px));
  transition:transform .3s var(--ease-out);
}
/* 第二道墨线：手稿页眉的双划线 */
.nav::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--line); pointer-events:none;
}
.nav.hide{transform:translate(var(--dx,0px), calc(var(--dy,0px) - 100%))}
/* 导航栏收起时面包屑一起收，避免留下一条孤零零的横条 */
.nav.hide ~ .crumb-bar{transform:translateY(-100%)}
.nav-in{
  display:flex; align-items:center; gap:14px; height:100%;
  width:min(1220px,100% - 40px); margin-inline:auto;
}
.nav-left{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.hist-grp{display:flex; gap:2px; padding:2px; background:var(--bg-soft); border:1px solid var(--line-2)}
.hist-grp .btn{border:none; background:transparent; padding:4px 9px; min-width:0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; flex:0 0 auto}
/* 印章：方角、朱砂底、内嵌白线 */
.brand .mark{
  width:30px; height:30px; border-radius:2px; display:grid; place-items:center;
  font-family:var(--serif); font-size:17px; line-height:1;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fdf6e8;
  border:1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
  transition:transform .5s var(--spring);
}
.brand:hover .mark{transform:rotate(-5deg) scale(1.06)}
.brand small{font:600 9.5px/1 var(--mono); letter-spacing:.16em; color:var(--ink-3); display:block}
.nav-links{display:flex; gap:2px; flex:1 1 auto; overflow-x:auto; scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  position:relative; padding:8px 12px; font-family:var(--serif);
  font-size:14px; font-weight:700; letter-spacing:.03em;
  color:var(--ink-2); white-space:nowrap;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover{color:var(--ink); background:var(--bg-soft)}
.nav-links a.on{color:var(--accent)}
/* 激活项：朱砂粗线在上，描金细线在下——双线书眉 */
.nav-links a.on::after{
  content:''; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--accent);
}
.nav-links a.on::before{
  content:''; position:absolute; left:18px; right:18px; bottom:6px; height:1px;
  background:var(--gold); opacity:.75;
}
.nav-ops{display:flex; gap:6px; align-items:center; flex:0 0 auto}

/* 面包屑条：告诉用户「我在哪」，并给出最近浏览入口 */
.crumb-bar{
  position:sticky; top:var(--nav-h); z-index:55; background:var(--bg);
  border-bottom:1px solid var(--line);
  box-shadow:0 3px 0 -2px var(--line);
  transition:transform .3s var(--ease-out);
}
.crumb{
  display:flex; align-items:center; gap:8px; min-height:40px; padding-block:6px;
  font-size:13px; color:var(--ink-3); flex-wrap:wrap;
}
.crumb a{color:var(--ink-2); font-weight:600}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--ink-3); opacity:.75; font-family:var(--serif)}
.crumb .cur{color:var(--ink); font-weight:700; font-family:var(--serif)}
.crumb-ops{margin-left:auto}
.crumb-ops .btn{padding:5px 10px; font-size:12px}

/* 最近浏览面板 */
.hist-list{display:flex; flex-direction:column; gap:4px}
.hist-item{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
}
.hist-item:hover{border-color:var(--accent); color:var(--ink); background:var(--bg-soft)}
.hist-item .dot{width:7px; height:7px; background:var(--line-2); flex:0 0 auto;
  transform:rotate(45deg)}
.hist-item[data-cur] .dot{background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.hist-item .nm{font-weight:700; color:var(--ink); font-family:var(--serif)}
.hist-item .u{margin-left:auto; font:500 11px/1 var(--mono); color:var(--ink-3)}

/* 命令面板 */
.palette-wrap{display:flex; flex-direction:column; gap:10px}
.pal-in{
  width:100%; padding:12px 14px; font-size:15px; font-family:var(--serif);
  background:var(--bg-soft); border:1px solid var(--line-2); color:var(--ink);
  outline:1px solid var(--line); outline-offset:-5px;
}
.pal-in:focus{border-color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.pal-list{max-height:46vh; overflow:auto; display:flex; flex-direction:column; gap:2px}
.pal-g{font:700 10.5px/1 var(--mono); letter-spacing:.16em; color:var(--ink-3);
  padding:10px 8px 5px; text-transform:uppercase}
.pal-g::before{content:'◈ '; color:var(--gold)}
.pal-item{
  display:flex; align-items:baseline; gap:10px; padding:9px 12px; cursor:pointer;
  border-left:2px solid transparent;
}
.pal-item b{font-size:14px; font-weight:700; color:var(--ink); flex:0 0 auto; font-family:var(--serif)}
.pal-item span{font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pal-item.on{background:var(--accent-soft); border-left-color:var(--accent)}
.pal-item.on b{color:var(--accent-2)}
.pal-empty{padding:22px; text-align:center}
.pal-foot{padding-top:6px; font-size:11.5px; border-top:1px solid var(--line)}

/* 回看（Backlog）面板 */
.bl-list{display:flex; flex-direction:column; gap:10px}
.bl-item{border:1px solid var(--line); padding:12px 14px; background:var(--surface)}
.bl-hd{font:700 11.5px/1 var(--mono); letter-spacing:.1em; color:var(--accent); margin-bottom:7px}
.bl-hd::before{content:'▎'; color:var(--gold)}
.bl-tx{font-size:13.5px; line-height:1.75; color:var(--ink-2); font-family:var(--serif)}

/* 回到顶部 */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:58; width:42px; height:42px;
  display:grid; place-items:center; font-size:17px; cursor:pointer;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2);
  outline:1px solid var(--line); outline-offset:-4px;
  box-shadow:var(--shadow-m); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease-out);
}
.to-top.show{opacity:1; pointer-events:auto; transform:none}
.to-top:hover{color:var(--accent); border-color:var(--accent)}

#progress{position:fixed; top:calc(var(--nav-h) + 40px); left:0; height:3px; width:0; z-index:61;
  background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .1s linear}

/* ---------- 6. 按钮（方角 + 双线，悬停改判为朱砂封边） ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--sp-sm); padding:9px 16px;
  min-height:var(--ctl-md);
  background:var(--surface); border:var(--bw-thin) solid var(--line-2); color:var(--ink);
  font-family:var(--serif); font-size:13.5px; font-weight:700; letter-spacing:.03em;
  box-shadow:inset 0 0 0 1px var(--surface);
  transition:transform var(--dur-short) var(--ez-out), box-shadow var(--dur-short) var(--ez-ease),
             background var(--dur-micro) var(--ez-ease), border-color var(--dur-micro) var(--ez-ease),
             color var(--dur-micro) var(--ez-ease);
}
.btn:hover{transform:translateY(-2px); border-color:var(--accent); color:var(--accent);
  box-shadow:var(--shadow-s), inset 0 0 0 1px var(--surface)}
.btn:active{transform:translateY(0) scale(.98); transition-duration:var(--dur-micro)}
.btn.primary{
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fdf6e8;
  border-color:color-mix(in srgb,var(--accent-2) 70%, var(--ink));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 3px 3px 0 color-mix(in srgb,var(--ink) 14%,transparent);
}
.btn.primary:hover{color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 4px 4px 0 color-mix(in srgb,var(--ink) 20%,transparent)}
.btn.ghost{background:transparent; border-color:var(--line-2); color:var(--ink-2); box-shadow:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.sm{padding:5px 11px; font-size:12.5px; min-height:var(--ctl-sm)}
.btn.lg{padding:13px 24px; font-size:15px; min-height:var(--ctl-lg)}
.btn.subtle{background:transparent; border-color:transparent; color:var(--ink-3); box-shadow:none}
.btn.subtle:hover{color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent)}
.btn.danger{border-color:var(--danger); color:var(--danger)}
.btn:disabled{opacity:.35; pointer-events:none; background:var(--bg-disabled)}
/* 触屏命中区兜底：粗指针设备下按钮不低于 44px（Apple HIG / Primer control min target） */
@media (pointer:coarse){
  .btn{min-height:var(--touch-min)}
  .btn.sm{min-height:var(--ctl-lg)}
}
/* 纯图标按钮：导航里的返回/前进/搜索/动效/主题 */
.btn.icon{padding:6px 9px; min-width:var(--ctl-md); min-height:var(--ctl-md); justify-content:center; font-size:15px; line-height:1}
.btn.icon.on{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}

/* ---------- 7. 卡片 ---------- */
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  padding:20px; box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s;
}
.card.hoverable:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--line-2)}
.card.hoverable::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--gold) 18%,transparent), transparent 46%);
  transition:opacity .35s var(--ease);
}
.card.hoverable:hover::after{opacity:1}

/* 分区入口大卡（首页四框） */
.zone-card{
  position:relative; overflow:hidden; padding:28px; min-height:210px;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-s);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
/* 四角描金点 */
.zone-card::before{
  content:''; position:absolute; inset:9px; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at left top, var(--gold) 0 1.6px, transparent 2.2px) left top / 10px 10px no-repeat,
    radial-gradient(circle at right top, var(--gold) 0 1.6px, transparent 2.2px) right top / 10px 10px no-repeat,
    radial-gradient(circle at left bottom, var(--gold) 0 1.6px, transparent 2.2px) left bottom / 10px 10px no-repeat,
    radial-gradient(circle at right bottom, var(--gold) 0 1.6px, transparent 2.2px) right bottom / 10px 10px no-repeat;
}
.zone-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-l)}
/* 角标化的光晕：不再是圆球，改成一个被裁成方的暖色块 */
.zone-card .glow{
  position:absolute; width:300px; height:300px; right:-120px; top:-140px;
  background:linear-gradient(135deg, var(--zc,var(--accent)) 0%, transparent 68%);
  opacity:.13; transform:rotate(45deg);
  transition:transform .8s var(--ease-out), opacity .5s;
}
.zone-card:hover .glow{transform:rotate(45deg) scale(1.28) translate(-8px,8px); opacity:.26}
.zone-card .kick{font:700 10.5px/1 var(--mono); letter-spacing:.2em; color:var(--zc,var(--accent)); text-transform:uppercase}
.zone-card .kick::before{content:'◈ '; color:var(--gold)}
.zone-card h3{font-size:22px; letter-spacing:.03em}
.zone-card p{color:var(--ink-2); font-size:13.5px; line-height:1.68}
.zone-card .chips{display:flex; flex-wrap:wrap; gap:6px}
.zone-card .go{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--serif);
  font-weight:700; font-size:13.5px; color:var(--zc,var(--accent)); letter-spacing:.03em;
}
.zone-card .go svg{transition:transform .4s var(--spring)}
.zone-card:hover .go svg{transform:translateX(5px)}

/* ---------- 8. 徽章 / 标签（印章制式） ---------- */
.badge{
  display:inline-flex; align-items:center; gap:var(--sp-xs); padding:3px 9px;
  min-height:20px;
  font-family:var(--serif); font-size:11.5px; font-weight:700; letter-spacing:.06em;
  background:var(--bg-soft); color:var(--ink-2); border:var(--bw-thin) solid var(--line-2);
  box-shadow:inset 0 0 0 1px var(--surface);
  white-space:nowrap;
}
.badge.acc{background:var(--accent); color:#fdf6e8; border-color:var(--accent-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.badge.ok{background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green); border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.badge.dev{background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--gold); border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.badge.dang{background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.badge.vio{background:color-mix(in srgb,var(--violet) 16%,transparent); color:var(--violet); border-color:color-mix(in srgb,var(--violet) 45%,transparent)}
.badge.rose{background:color-mix(in srgb,var(--rose) 16%,transparent); color:var(--rose); border-color:color-mix(in srgb,var(--rose) 45%,transparent)}
.badge.mono{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; font-weight:600}

/* ---------- 9. 英雄区 ---------- */
.hero{position:relative; padding:78px 0 46px; overflow:hidden}
/* 魔法阵：整块随 divisor 缓慢自转（transform-only，不重绘） */
.hero::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:min(820px,100vw); aspect-ratio:1; left:50%; top:-190px; margin-left:max(-410px,-50vw);
  background:var(--rune) center/contain no-repeat;
  opacity:.16;
  will-change:transform; animation:spin 160s linear infinite;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
[data-theme="dark"] .hero::before{opacity:.13}
/* 符箓竖幅：右侧一道朱砂朱批 */
.hero::after{
  content:'言靈者 · 以文為符 · 以句為咒';
  position:absolute; right:26px; top:70px; z-index:-1; pointer-events:none;
  writing-mode:vertical-rl; font-family:var(--serif); font-size:19px; letter-spacing:.45em;
  color:var(--accent); opacity:.16;
  border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);
  padding:18px 10px;
}
@media(max-width:1180px){ .hero::after{display:none} }
.hero h1{font-size:clamp(32px,5vw,54px); letter-spacing:.02em; line-height:1.18}
/* 高亮：不用渐变字，改成手批式的金色下划线 */
.hero h1 em{
  font-style:normal; color:var(--accent);
  background:linear-gradient(180deg, transparent 58%, color-mix(in srgb,var(--gold) 42%,transparent) 58% 94%, transparent 94%);
  padding-inline:2px;
}
.hero .lead{font-size:17px; color:var(--ink-2); max-width:60ch; margin-top:16px; line-height:1.82}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.kicker{
  font:700 11px/1 var(--mono); letter-spacing:.24em; color:var(--ink-3); text-transform:uppercase;
}
.kicker::before{content:'◈ '; color:var(--gold); letter-spacing:0}

/* 数据条 */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:38px}
.stat{
  background:var(--surface); border:1px solid var(--line-2); padding:16px 18px;
  box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease-out);
}
.stat:hover{transform:translateY(-3px)}
.stat b{display:block; font-family:var(--serif); font-size:27px; font-weight:700;
  letter-spacing:.01em; color:var(--accent)}
.stat span{font-size:12px; color:var(--ink-3); letter-spacing:.06em}

/* ---------- 10. 瀑布流（小红书式） ---------- */
/* 兜底：JS 未接管前仍用多列，避免首屏空白 */
.masonry{columns:4; column-gap:16px}
.masonry .m-item{break-inside:avoid; margin-bottom:16px}
@media(max-width:1080px){.masonry{columns:3}}
@media(max-width:760px){.masonry{columns:2}}
@media(max-width:520px){.masonry{columns:1}}
/* JS 接管后：等宽列 + 按最短列投放，高度变化不再整列回流 */
.masonry.masonry-js{
  columns:auto; display:flex; align-items:flex-start; gap:16px;
}
.masonry.masonry-js .m-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px}
.masonry.masonry-js .m-item{margin-bottom:0; break-inside:auto}
@media(max-width:760px){.masonry.masonry-js{gap:12px} .masonry.masonry-js .m-col{gap:12px}}

.pf-card{
  background:var(--surface); border:1px solid var(--line-2); overflow:hidden;
  cursor:pointer; box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .3s;
}
.pf-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:var(--accent)}
.pf-cover{
  position:relative; aspect-ratio:var(--ar,4/3); display:flex; align-items:flex-end; padding:14px;
  color:#fff; font-family:var(--serif); font-weight:700; font-size:15px; line-height:1.35;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  overflow:hidden;
}
/* 封面加一层纸纹与暗角，压住渐变，统一成「签条」质感 */
.pf-cover::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 22%,transparent), transparent 45%);
}
.pf-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.42))}
.pf-cover .pf-emoji{position:absolute; right:10px; top:8px; font-size:30px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transition:transform .5s var(--spring)}
.pf-card:hover .pf-emoji{transform:scale(1.14) rotate(6deg)}
.pf-cover > span{position:relative; z-index:1}
.pf-body{padding:12px 14px 14px}
.pf-body .t{font-family:var(--serif); font-weight:700; font-size:15px; line-height:1.45; margin-bottom:5px}
.pf-body .d{font-size:12.5px; color:var(--ink-2); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.pf-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.pf-meta{display:flex; gap:12px; margin-top:10px; font-size:11.5px; color:var(--ink-3); align-items:center}
.pf-meta .like{display:inline-flex; gap:4px; align-items:center; transition:color .2s, transform .3s var(--spring)}
.pf-meta .like:hover{color:var(--rose)}
.pf-meta .like.on{color:var(--rose); transform:scale(1.06)}

/* ---------- 11. 表格（手抄账簿） ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line-2); background:var(--surface); box-shadow:var(--shadow-s)}
table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--surface-2); font-family:var(--serif); font-size:12.5px; letter-spacing:.08em;
   color:var(--accent-2); font-weight:700; border-bottom:2px solid var(--line-2);
   position:sticky; top:0; z-index:1}
tbody tr{transition:background .2s var(--ease)}
tbody tr:nth-child(even){background:color-mix(in srgb, var(--surface-2) 55%, transparent)}
tbody tr:hover{background:var(--bg-soft)}
tbody tr:last-child td{border-bottom:0}

/* ---------- 12. 表单控件 ---------- */
.fld{display:flex; flex-direction:column; gap:var(--sp-xs); margin-bottom:var(--sp-md)}
.fld label{font-size:12px; font-weight:700; color:var(--ink-2); letter-spacing:.08em}
input[type=text],input[type=number],input[type=password],select,textarea{
  width:100%; padding:9px 12px; min-height:var(--ctl-md);
  border:var(--bw-thin) solid var(--line-2);
  background:var(--surface); font-size:13.5px; line-height:var(--lh-normal);
  box-shadow:inset 0 0 0 1px var(--surface-2), inset 2px 2px 0 color-mix(in srgb,var(--ink) 6%,transparent);
  transition:border-color var(--dur-micro) var(--ez-ease), box-shadow var(--dur-micro) var(--ez-ease),
             background var(--dur-micro) var(--ez-ease);
}
/* 焦点态：outline 承担可访问性指示（WCAG 2.4.7），阴影只做视觉层次 */
input:focus,select:focus,textarea:focus{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)
}
textarea{resize:vertical; line-height:1.8; font-family:var(--serif); min-height:88px}
@media (pointer:coarse){
  input[type=text],input[type=number],input[type=password],select{min-height:var(--touch-min)}
}
.chip-row{display:flex; flex-wrap:wrap; gap:var(--sp-sm)}
.suite-chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border:1px solid var(--line-2); background:var(--surface); font-family:var(--serif);
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--surface);
  transition:all .3s var(--ease);
}
.suite-chip:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
.suite-chip.on{background:var(--accent); color:#fdf6e8; border-color:var(--accent-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.suite-chip .dot{width:7px; height:7px; background:currentColor; opacity:.85; transform:rotate(45deg)}

/* ---------- 13. 弹层 / 抽屉 ---------- */
.mask{position:fixed; inset:0; z-index:100; background:color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter:blur(3px) saturate(85%); opacity:0; pointer-events:none; transition:opacity var(--dur-medium) var(--ez-out)}
.mask.show{opacity:1; pointer-events:auto}
.modal{
  position:fixed; z-index:101; left:50%; top:50%; width:min(720px,94vw); max-height:86vh; overflow:auto;
  transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none;
  background:var(--surface); border:var(--bw-thin) solid var(--line-2); box-shadow:var(--shadow-float-m);
  transition:opacity var(--dur-medium) var(--ez-out), transform var(--dur-medium) var(--ez-out);
}
.modal.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.drawer{
  position:fixed; z-index:101; right:0; top:0; height:100%; width:min(560px,96vw); overflow:auto;
  transform:translateX(102%); background:var(--surface); border-left:var(--bw-thin) solid var(--line-2);
  box-shadow:var(--shadow-float-m); transition:transform var(--dur-medium) var(--ez-out);
}
.drawer.show{transform:translateX(0)}
.drawer-hd{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-md);
  padding:18px 22px; background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px); border-bottom:var(--bw-thin) solid var(--line-2);
  box-shadow:0 3px 0 -2px var(--line)}
.drawer-bd{padding:22px}
.modal-hd{padding:20px 24px 0}
.modal-bd{padding:var(--sp-lg) 24px 24px}
.x{width:34px; height:34px; display:grid; place-items:center; font-size:16px;
  color:var(--ink-3); border:var(--bw-thin) solid transparent; transition:all var(--dur-short) var(--ez-ease)}
.x:hover{background:var(--bg-soft); color:var(--accent); border-color:var(--line-2)}

/* ---------- 14. Toast（朱批小签） ---------- */
#toastBox{position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; gap:var(--sp-sm); align-items:center; pointer-events:none}
.toast{
  padding:11px 20px; background:var(--ink); color:var(--bg);
  font-family:var(--serif); font-size:13.5px; font-weight:700; letter-spacing:.04em;
  border-top:var(--bw-thick) solid var(--accent); box-shadow:var(--shadow-float-s);
  animation:toastIn var(--dur-medium) var(--ez-out); max-width:88vw;
}
.toast.out{animation:toastOut var(--dur-short) var(--ez-in) forwards}
@keyframes toastIn{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(-12px)}}

/* ---------- 15. 动效：滚动揭示 / 页面进场 / 骨架 ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
@keyframes pageIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
main{animation:pageIn .55s var(--ease-out) both}
.skel{background:linear-gradient(90deg,var(--bg-soft) 25%,var(--surface-2) 37%,var(--bg-soft) 63%);
  background-size:400% 100%; animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- 16. 播放器（手稿页面） ---------- */
.stage{
  min-height:420px; background:var(--surface); border:1px solid var(--line-2);
  padding:30px; box-shadow:var(--shadow-s); position:relative; overflow:hidden;
}
/* 棋格般的抄写格线：极淡，只做底纹，不干扰阅读 */
.stage::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb,var(--line) 55%,transparent) 31px 32px),
    linear-gradient(90deg, transparent 26px, color-mix(in srgb,var(--accent) 30%,transparent) 26px 27px, transparent 27px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
}
.stage::after{
  content:''; position:absolute; inset:9px; pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle at left top, var(--gold) 0 1.6px, transparent 2.2px) left top / 10px 10px no-repeat,
    radial-gradient(circle at right top, var(--gold) 0 1.6px, transparent 2.2px) right top / 10px 10px no-repeat,
    radial-gradient(circle at left bottom, var(--gold) 0 1.6px, transparent 2.2px) left bottom / 10px 10px no-repeat,
    radial-gradient(circle at right bottom, var(--gold) 0 1.6px, transparent 2.2px) right bottom / 10px 10px no-repeat;
}
.stage .txt{position:relative; z-index:1; font-family:var(--serif); color:var(--ink);
  font-size:17px; line-height:2; min-height:120px; white-space:pre-wrap; cursor:pointer}
.stage .caret{display:inline-block; width:2px; height:1.05em; background:var(--accent);
  vertical-align:-2px; margin-left:3px; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.choices{position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; margin-top:22px}
.choice{
  text-align:left; padding:14px 18px; border:1px solid var(--line-2);
  background:var(--surface-2); font-family:var(--serif); color:var(--ink);
  font-size:14.5px; font-weight:700; line-height:1.6; letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px var(--surface), inset 3px 0 0 transparent;
  transition:transform .3s var(--ease-out), background .25s, border-color .25s, box-shadow .3s;
  animation:choiceIn .45s var(--ease-out) both;
}
.choice:hover{transform:translateX(5px); background:var(--accent-soft); border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--surface), inset 4px 0 0 var(--accent)}
@keyframes choiceIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.choice .aff{float:right; font-size:11.5px; color:var(--accent); font-weight:700; margin-left:10px}
.chatbox{display:flex; flex-direction:column; gap:10px; max-height:380px; overflow-y:auto; padding:4px 2px}
.bub{max-width:76%; padding:9px 14px; font-family:var(--serif); font-size:14.5px; line-height:1.7;
  animation:bubIn .4s var(--ease-out) both; word-break:break-word}
@keyframes bubIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.bub.other{align-self:flex-start; background:var(--surface-2); border:1px solid var(--line);
  box-shadow:inset 0 0 0 1px var(--surface)}
.bub.me{align-self:flex-end; background:var(--accent); color:#fdf6e8; border:1px solid var(--accent-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bub.sys{align-self:center; background:transparent; color:var(--ink-3); font-size:12px; max-width:90%;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.bub .who{display:block; font-size:11px; opacity:.75; margin-bottom:2px; font-family:var(--sans); letter-spacing:.06em}
.dice-box{margin-top:16px; padding:16px; background:var(--surface-2); border:1px solid var(--line-2);
  box-shadow:inset 0 0 0 1px var(--surface); text-align:center; font-size:14px}
.dice-box .num{display:inline-block; min-width:44px; font-size:28px; font-weight:700;
  font-family:var(--serif); color:var(--accent)}
.dice-box .res{margin-left:8px; font-weight:700; font-family:var(--serif)}
.dice-box .res.ok{color:var(--green)} .dice-box .res.bad{color:var(--danger)}
.aff-chip{display:inline-flex; gap:6px; align-items:center; padding:4px 12px;
  background:var(--accent-soft); color:var(--accent-2); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  font-size:12.5px; font-weight:700; letter-spacing:.05em}
.aff-chip b{font-family:var(--mono)}
.endstats{margin-top:20px; padding-top:16px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-3)}
.endstats::before{content:'◈ '; color:var(--gold)}
.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.slot{border:1px dashed var(--line-2); padding:12px; font-size:12.5px; text-align:left;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--surface-2);
  transition:all .3s var(--ease)}
.slot:hover{border-color:var(--accent); border-style:solid; background:var(--accent-soft); transform:translateY(-3px)}
.slot b{display:block; font-size:13px; font-family:var(--serif)}
.slot span{color:var(--ink-3); font-size:11px}

/* ---------- 17. 蓝图（方格手稿纸） ---------- */
.bp-wrap{position:relative; border:1px solid var(--line-2); background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/26px 26px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/26px 26px, var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--surface);
  overflow:auto; max-height:620px}
.bp-svg{display:block}
.bp-node{cursor:pointer}
.bp-node rect{stroke:var(--line-2); stroke-width:1.2; transition:stroke .2s}
.bp-node:hover rect{stroke:var(--accent); stroke-width:2}
.bp-node.sel rect{stroke:var(--accent); stroke-width:2.4}
.bp-node .ttl{font-size:12px; font-weight:700; fill:var(--ink); font-family:var(--serif)}
.bp-edge{fill:none; stroke:var(--ink-3); stroke-width:1.5; marker-end:url(#arrow)}
.bp-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:12px}
.bp-legend .dot{width:10px; height:10px; display:inline-block; margin-right:5px; vertical-align:-1px;
  outline:1px solid color-mix(in srgb,var(--ink) 25%,transparent); outline-offset:-2px}

/* ---------- 18. 杂项 ---------- */
.empty{text-align:center; padding:56px 20px; color:var(--ink-3)}
.empty .big{font-family:var(--serif); font-size:17px; font-weight:700; color:var(--ink-2); margin-bottom:8px}
.empty::before{content:'◈'; display:block; font-size:20px; color:var(--gold); margin-bottom:10px}
/* 双线分隔：上下两道，中间留空 */
.divider{height:3px; background:none; border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line); margin:26px 0}
.sec-hd{margin-bottom:22px}
.sec-hd h2{font-size:25px; letter-spacing:.03em}
.sec-hd h2::after{
  content:''; display:block; width:56px; height:2px; margin-top:10px;
  background:var(--accent); box-shadow:0 4px 0 -1px var(--gold);
}
.sec-hd p{color:var(--ink-2); font-size:14px; margin-top:8px; max-width:70ch; line-height:1.8}
.muted{color:var(--ink-3); font-size:13px}
.mono{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em}
.nowrap{white-space:nowrap}
.scroll-x{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.tabs{display:flex; gap:4px; padding:4px; background:var(--bg-soft);
  border:1px solid var(--line-2); outline:1px solid var(--line); outline-offset:-5px; width:fit-content}
.tabs button{padding:7px 15px; font-family:var(--serif); font-size:13px; font-weight:700;
  letter-spacing:.04em; color:var(--ink-2); border:1px solid transparent; transition:all .3s var(--ease)}
.tabs button.on{background:var(--surface); color:var(--accent); border-color:var(--line-2);
  box-shadow:var(--shadow-s)}
.dot-live{width:8px;height:8px;background:var(--green);display:inline-block;
  transform:rotate(45deg); box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);
  animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.comment{border:1px solid var(--line); padding:12px 14px; background:var(--surface-2); margin-bottom:10px;
  box-shadow:inset 0 0 0 1px var(--surface)}
.comment b{font-size:13px; font-family:var(--serif)}
.comment p{font-size:13px; color:var(--ink-2); margin-top:3px; line-height:1.75}
.comment .t{font:11px var(--mono); color:var(--ink-3)}

/* ---------- 19. 响应 ---------- */
@media(max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .hero{padding:48px 0 30px}
  .stage{padding:20px}
  .drawer-bd{padding:16px}
  .modal-bd{padding:14px 16px 18px}
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column;
    background:var(--surface); border-bottom:1px solid var(--line-2); padding:10px; box-shadow:var(--shadow-m)}
}

/* ---------- 20. 流畅模式：一键关掉所有装饰性动画 ----------
   注意：这段必须留在所有 @media 之外——旧版它被误嵌在 max-width:620px 里，
   结果只有窄屏才生效。 */
.no-motion .hero::before{animation:none !important}
.no-motion main,.no-motion .reveal,.no-motion .card,.no-motion .zone-card,
.no-motion .pf-card,.no-motion .stat,.no-motion .btn,.no-motion .to-top,
.no-motion .pf-emoji,.no-motion .brand .mark,.no-motion .nav-links a::after,
.no-motion .dot-live,.no-motion .caret{
  transition:none !important; animation:none !important;
}
.no-motion .reveal{opacity:1 !important; transform:none !important}
.no-motion .card.hoverable:hover,.no-motion .pf-card:hover,.no-motion .stat:hover,
.no-motion .zone-card:hover,.no-motion .btn:hover,.no-motion .choice:hover{transform:none !important}
.no-motion .zone-card .glow,.no-motion .card.hoverable::after{display:none}
.no-motion .hero::after{display:none}
.no-motion .nav{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  background:var(--bg) !important}
.no-motion .mask{backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
.no-motion .drawer-hd{backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
.no-motion .nav.hide{transform:translate(var(--dx,0px), var(--dy,0px)) !important}
.no-motion .stage::before{display:none}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .hero::after{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .card.hoverable:hover,.pf-card:hover,.stat:hover,.zone-card:hover{transform:none}
  *{scroll-behavior:auto !important}
}


/* ===== 用户系统试验（OpenClaw 试验线）===== */
.auth-form label{display:block;font-size:13px;color:var(--ink-3);margin:14px 0 6px}
.auth-form input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:inherit;font:inherit}
.auth-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.auth-err{color:var(--danger);font-size:13px;min-height:18px;margin-top:10px}
.auth-note{font-size:12.5px;color:var(--ink-3);margin-top:14px;line-height:1.7}
.auth-big-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;flex:0 0 auto}
.p-avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;flex:0 0 auto}
.p-form label{display:block;font-size:13px;color:var(--ink-3);margin:12px 0 6px}
.p-form input,.p-form textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:inherit;font:inherit;resize:vertical}
.p-form input:focus,.p-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.p-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.p-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.p-swatch.on{border-color:var(--ink)}
.p-work{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.p-work:last-child{border-bottom:none}
.p-err{color:var(--danger);font-size:13px;min-height:17px}
/* ===== 试验段落结束 ===== */

/* ============================================================
   v1.2 · 导航大类下拉 / 顶栏拖动 / 左上角返回 / 个人主页 / 术语表
   —— 沿用同一套变量与手稿语言：衬线标题、双线边框、朱砂点睛
   ============================================================ */

/* ---------- 顶栏拖动把手 ---------- */
.nav-grip{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:30px; flex:0 0 auto;
  border:1px solid var(--line-2); background:var(--bg-soft);
  color:var(--ink-3); font-size:13px; line-height:1; cursor:grab;
  font-family:var(--sans); letter-spacing:-1px;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.nav-grip:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.nav-grip:active{cursor:grabbing}
.nav.dragging{transition:none; box-shadow:var(--shadow-m)}
/* 拖过之后顶栏浮在页面上，加一道描边让它和正文分开 */
.nav.dragged{box-shadow:var(--shadow-m); border-bottom-color:var(--line)}

/* ---------- 导航大类（下拉） ---------- */
.nav-group{position:relative; display:inline-flex; align-items:center; flex:0 0 auto}
.nav-g-btn{
  position:relative; display:flex; align-items:center; gap:3px;
  padding:8px 10px; font-family:var(--serif); font-size:14px; font-weight:700;
  letter-spacing:.03em; color:var(--ink-2); white-space:nowrap;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-g-btn .caret{font-size:9px; opacity:.6; font-style:normal; transition:transform .25s var(--ease)}
.nav-g-btn:hover{color:var(--ink); background:var(--bg-soft)}
.nav-group.on .nav-g-btn{color:var(--accent)}
.nav-group.on .nav-g-btn::after{
  content:''; position:absolute; left:10px; right:10px; bottom:2px; height:2px; background:var(--accent);
}
.nav-group.on .nav-g-btn::before{
  content:''; position:absolute; left:16px; right:16px; bottom:6px; height:1px; background:var(--gold); opacity:.75;
}
.nav-g-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:-6px; min-width:132px; z-index:70;
  background:var(--surface); border:1px solid var(--line-2);
  outline:1px solid var(--line); outline-offset:-5px;
  box-shadow:var(--shadow-m); padding:5px;
}
.nav-g-menu::before{
  content:''; position:absolute; top:-5px; left:14px; width:8px; height:8px;
  background:var(--surface); border-left:1px solid var(--line-2); border-top:1px solid var(--line-2);
  transform:rotate(45deg);
}
.nav-g-menu a{
  display:block; padding:8px 12px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); white-space:nowrap; transition:background .18s var(--ease), color .18s var(--ease);
}
.nav-g-menu a:hover{background:var(--bg-soft); color:var(--ink)}
.nav-g-menu a.on{color:var(--accent); background:var(--accent-soft)}
.nav-group:hover .nav-g-menu,
.nav-group:focus-within .nav-g-menu{display:block}
.nav-group:hover .nav-g-btn .caret{transform:rotate(180deg)}

/* ---------- 左上角返回 / 前进 ---------- */
.corner-nav{
  position:fixed; left:14px; top:calc(var(--nav-h) + 52px); z-index:58;
  display:flex; flex-direction:column; gap:4px;
  padding:4px; background:color-mix(in srgb, var(--bg) 90%, transparent);
  border:1px solid var(--line-2); outline:1px solid var(--line); outline-offset:-5px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.corner-nav .btn{padding:4px 9px; min-width:26px; justify-content:center}
.corner-nav .btn:disabled{opacity:.32}

/* ---------- 个人主页 ---------- */
.pm-hero{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.pm-avatar{
  width:76px; height:76px; display:grid; place-items:center; flex:0 0 auto;
  color:#fdf6e8; font-family:var(--serif); font-size:32px; font-weight:700;
  border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
}
.pm-name{font-family:var(--serif); font-size:22px; font-weight:800; letter-spacing:.02em}
.pm-sub{font-size:13px; color:var(--ink-3); margin-top:4px; line-height:1.7}
.badge-card{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  border:1px dashed var(--line); background:var(--surface-2); min-width:104px;
}
.badge-card b{font-family:var(--serif); font-size:14px}
.badge-card span{font-size:11.5px; color:var(--ink-3); line-height:1.5}
.set-row{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px dashed var(--line); flex-wrap:wrap;
}
.set-row:last-child{border-bottom:none}
.set-row .sr-t{font-weight:700; font-size:14px; flex:0 0 auto; min-width:96px}
.set-row .sr-d{font-size:12.5px; color:var(--ink-3); flex:1 1 220px; line-height:1.6}
.set-row .sr-c{flex:0 0 auto; display:flex; gap:8px; align-items:center}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px}
.kv:last-child{border-bottom:none}
.kv b{font-weight:700}
.kv span{color:var(--ink-3)}
.hist-item .when{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}

/* ---------- 工具详情：解决什么问题 / 怎么用 ---------- */
.qa{border:1px solid var(--line); background:var(--surface-2); padding:14px 16px; margin-bottom:12px}
.qa + .qa{margin-top:-2px}
.qa .q-h{
  font-family:var(--serif); font-size:13px; font-weight:800; letter-spacing:.06em;
  color:var(--accent); margin-bottom:6px;
}
.qa .q-b{font-size:14px; line-height:1.85; color:var(--ink)}
.qa .q-b.mut{color:var(--ink-2)}
.qa.fit{background:transparent; border-style:dashed}

/* ---------- 术语表 ---------- */
.gloss-group{margin-top:22px}
.gloss-row{
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:start;
  padding:12px 0; border-bottom:1px dashed var(--line);
}
.gloss-row:last-child{border-bottom:none}
.gloss-t{font-family:var(--serif); font-size:15px; font-weight:800}
.gloss-e{display:block; font:600 10.5px/1.4 var(--mono); letter-spacing:.1em; color:var(--ink-3); margin-top:3px}
.gloss-d{font-size:13.5px; color:var(--ink-2); line-height:1.75}

@media (max-width:760px){
  .corner-nav{top:auto; bottom:84px; left:10px}
  .nav-links.open .nav-group{display:block; width:100%}
  .nav-links.open .nav-g-menu{
    display:block; position:static; box-shadow:none; border:none; outline:none;
    background:transparent; padding:0 0 4px 10px;
  }
  .nav-links.open .nav-g-menu a{padding-left:14px; border-left:1px solid var(--line)}
  .gloss-row{grid-template-columns:1fr; gap:4px}
  .set-row .sr-c{width:100%}
}

/* ============================================================
   v1.3 · 素材库 / 场景背景 / 壁纸横幅 / 开发者面板
   ============================================================ */

/* ---------- 素材库网格 ---------- */
.md-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; max-height:52vh; overflow:auto}
.md-item{
  border:1px solid var(--line-2); background:var(--surface-2); cursor:pointer;
  outline:1px solid var(--line); outline-offset:-4px; padding:6px;
  display:flex; flex-direction:column; gap:4px; transition:border-color .2s var(--ease);
}
.md-item:hover{border-color:var(--accent)}
.md-thumb{
  width:100%; aspect-ratio:4/3; background:center/cover no-repeat var(--bg-soft);
  display:grid; place-items:center; font-size:22px; color:var(--ink-3);
}
.md-audio{font-family:var(--serif)}
.md-nm{font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.md-sz{font:600 10.5px var(--mono); color:var(--ink-3)}

/* ---------- 场景背景（播放器 / 预览共用） ---------- */
.stage.has-scene-bg{
  background-image:
    linear-gradient(color-mix(in srgb,var(--surface) 72%,transparent), color-mix(in srgb,var(--surface) 88%,transparent)),
    var(--scene-img);
  background-size:cover; background-position:center;
}
/* 创作台场景卡上的素材选择行 */
.scene-media{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; align-items:center}
.sm-chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 4px;
  border:1px solid var(--line-2); background:var(--surface-2); font-size:12px;
}
.sm-chip .sm-th{width:26px; height:20px; background:center/cover no-repeat var(--bg-soft); flex:0 0 auto}
.sm-chip .sm-x{cursor:pointer; color:var(--ink-3); padding:0 2px}
.sm-chip .sm-x:hover{color:var(--danger)}

/* ---------- 全站壁纸层（登录后个性化） ---------- */
#wallLayer{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:center/cover no-repeat;
}
#wallLayer::after{
  content:''; position:absolute; inset:0;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
}
/* 个人主页横幅 */
.pm-banner{  height:130px; margin:-22px -22px 18px; background:center/cover no-repeat var(--bg-soft);
  border-bottom:1px solid var(--line-2); position:relative;
}
.pm-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--surface) 88%,transparent))}

/* ---------- 作品封面缩略 ---------- */
.lib-cover{height:64px; margin:-14px -14px 10px; background:center/cover no-repeat var(--bg-soft); border-bottom:1px solid var(--line)}
.works-cover{height:110px; background:center/cover no-repeat var(--bg-soft); border-bottom:1px solid var(--line); position:relative}

/* ---------- 开发者面板 ---------- */
.dev-fab{
  display:inline-flex; align-items:center; gap:4px;
}
.dev-kv{display:grid; grid-template-columns:1fr auto; gap:4px 14px; font:600 12px var(--mono); padding:6px 0; border-bottom:1px dashed var(--line)}
.dev-kv span:last-child{color:var(--ink-3); text-align:right}
.dev-bar{height:8px; background:var(--bg-soft); border:1px solid var(--line-2); margin:6px 0 2px}
.dev-bar i{display:block; height:100%; background:var(--accent)}
.dev-log{max-height:180px; overflow:auto; font:600 11.5px/1.7 var(--mono); background:var(--bg-soft); border:1px solid var(--line); padding:8px 10px}
.dev-log .err{color:var(--danger)}
.md-del{margin-top:2px}

/* ---------- 20. 工具箱两层分类（v2.0） ----------
   79 项工具不能用卡片墙：先按大类折叠，再按子组折叠，工具本身是紧凑行。
   用原生 details/summary：天然键盘可达（Tab 聚焦、Enter/Space 展开）、无需 JS 绑定。 */
.tl-search{position:relative; margin-top:6px}
.tl-search input{
  width:100%; padding:11px 14px; min-height:var(--ctl-lg);
  font-size:var(--fs-body-l); font-family:var(--serif); letter-spacing:.02em;
}
.tl-search-hint{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font:600 12px var(--mono); color:var(--ink-3); pointer-events:none;
}

/* 大类折叠块 */
.tl-cat{
  margin-top:var(--sp-lg); border:var(--bw-thin) solid var(--line-2);
  background:var(--surface); box-shadow:var(--shadow-s);
}
.tl-cat > summary{
  display:flex; align-items:center; gap:var(--sp-md);
  padding:14px 18px; min-height:var(--ctl-xl); cursor:pointer; list-style:none;
  transition:background var(--dur-micro) var(--ez-ease);
}
.tl-cat > summary::-webkit-details-marker{display:none}
.tl-cat > summary:hover{background:var(--bg-soft)}
.tl-cat > summary:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}
.tl-cat-name{
  font-family:var(--serif); font-size:var(--fs-title-m); font-weight:700;
  letter-spacing:.02em; color:var(--ink); flex:0 0 auto;
}
.tl-cat-meta{
  flex:1; font:600 12px var(--mono); color:var(--ink-3); letter-spacing:.04em;
}
.tl-cat-meta b{color:var(--green); font-weight:700}
.tl-cat-arrow{
  flex:0 0 auto; color:var(--accent); font-size:14px;
  transition:transform var(--dur-short) var(--ez-out);
}
.tl-cat[open] > summary .tl-cat-arrow{transform:rotate(180deg)}
.tl-cat-bd{padding:0 18px 16px; border-top:var(--bw-thin) solid var(--line)}

/* 子组折叠块：比大类低一级，缩进并用左侧竖线标层级 */
.tl-sub{
  margin-top:var(--sp-md); padding-left:var(--sp-md);
  border-left:2px solid var(--line-2);
}
.tl-sub > summary{
  display:flex; align-items:center; gap:var(--sp-sm); flex-wrap:wrap;
  padding:6px 0; cursor:pointer; list-style:none; min-height:var(--ctl-sm);
}
.tl-sub > summary::-webkit-details-marker{display:none}
.tl-sub > summary:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}
.tl-sub-name{
  font-family:var(--serif); font-size:14.5px; font-weight:700;
  color:var(--accent); letter-spacing:.02em;
}
.tl-sub-hint{
  flex:1; min-width:140px; font-size:12.5px; color:var(--ink-3); line-height:var(--lh-normal);
}
.tl-rows{display:flex; flex-direction:column; gap:var(--sp-xs); padding:var(--sp-xs) 0 var(--sp-sm)}

/* 工具行：一行一个，左名称右徽章，中间用途摘要。整行可点 */
.tl-row{
  display:grid; grid-template-columns:minmax(150px,220px) 1fr auto;
  align-items:center; gap:var(--sp-md); width:100%;
  padding:9px 12px; min-height:var(--ctl-md); text-align:left;
  background:var(--surface-2); border:var(--bw-thin) solid var(--line);
  cursor:pointer; font-family:inherit;
  transition:transform var(--dur-micro) var(--ez-out),
             border-color var(--dur-micro) var(--ez-ease),
             background var(--dur-micro) var(--ez-ease);
}
.tl-row:hover{
  transform:translateX(3px); border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 5%, var(--surface-2));
}
.tl-row:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}
.tl-row-name{
  font-family:var(--serif); font-size:13.5px; font-weight:700; color:var(--ink);
  line-height:var(--lh-snug);
}
.tl-row-what{
  font-size:12.5px; color:var(--ink-2); line-height:var(--lh-normal);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tl-row-meta{display:flex; gap:var(--sp-xs); align-items:center; flex:0 0 auto}

/* 窄屏：用途摘要让位给名称，徽章换行，避免三栏挤压 */
@media (max-width:1024px){
  .tl-row{grid-template-columns:1fr auto; row-gap:var(--sp-xs)}
  .tl-row-what{grid-column:1 / -1; -webkit-line-clamp:3}
}
@media (max-width:620px){
  .tl-cat > summary{padding:12px 14px; gap:var(--sp-sm)}
  .tl-cat-bd{padding:0 12px 12px}
  .tl-cat-name{font-size:16px}
  .tl-cat-meta{font-size:11px}
  .tl-sub-hint{display:none}
  .tl-row{grid-template-columns:1fr; padding:10px}
  .tl-row-meta{justify-content:flex-start}
}

/* ---------- 20b. 个人主页头像编辑（v2.0 支持图片头像） ---------- */
.pm-av-edit{display:flex; align-items:center; gap:var(--sp-lg); flex-wrap:wrap}
.pm-av-prev{flex:0 0 auto}
.pm-av-ops{flex:1; min-width:180px; display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-sm)}

/* ---------- 21. 个人主页外链（v2.0 启用 links[]） ---------- */
.pm-links{display:flex; flex-wrap:wrap; gap:var(--sp-sm); margin-top:12px}
.pm-link{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 编辑抽屉里的链接行：名称 + 地址 + 删除，窄屏堆叠 */
.pm-link-row{
  display:grid; grid-template-columns:minmax(90px,140px) 1fr auto;
  gap:var(--sp-sm); align-items:center; margin-bottom:var(--sp-sm);
}
.pm-link-row input{width:100%}
.lk-label,.lk-url{font-size:13px}
.pm-link-row .lk-del{min-width:var(--ctl-sm)}
@media (max-width:620px){
  .pm-link-row{grid-template-columns:1fr auto; row-gap:var(--sp-xs)}
  .pm-link-row .lk-url{grid-column:1 / -1}
}

/* ---------- 22. 首页新手三步卡（v2.0 引导前置） ---------- */
.ob-go{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:var(--serif); font-size:13.5px; font-weight:700;
  color:var(--accent); letter-spacing:.03em;
}
.ob-go svg{transition:transform var(--dur-short) var(--ez-out)}
.card.hoverable:hover .ob-go svg{transform:translateX(4px)}

/* ---------- 23. 移动端底部标签栏（v2.0） ----------
   ≤760px 才显示，取代「汉堡菜单一次铺开 14 项」。
   fixed 定位会盖住页脚，所以同断点下给 body 补底部内边距，
   并用 env(safe-area-inset-bottom) 适配 iPhone 底部横条。 */
.tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(10px);
  border-top:var(--bw-thin) solid var(--line-2);
  box-shadow:0 -3px 0 -2px var(--line);
}
.tabbar-i{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-height:var(--touch-min); padding:6px 2px;
  font-family:var(--sans); text-decoration:none;
  color:var(--ink-3); border-top:2px solid transparent;
  transition:color var(--dur-micro) var(--ez-ease), border-color var(--dur-micro) var(--ez-ease);
}
.tabbar-i:focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:calc(-1 * var(--focus-w));
}
.tabbar-m{font-family:var(--serif); font-size:16px; font-weight:700; line-height:1.1}
.tabbar-t{font-size:10.5px; letter-spacing:.06em; line-height:1.2}
.tabbar-i.on{color:var(--accent); border-top-color:var(--accent)}
.tabbar-i.on .tabbar-m{color:var(--accent)}

@media (max-width:760px){
  .tabbar{display:flex}
  /* 让页脚与「回到顶部」不被底栏遮住 */
  body{padding-bottom:calc(var(--touch-min) + 18px + env(safe-area-inset-bottom, 0px))}
  #toTop{bottom:calc(var(--touch-min) + 26px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- 24. 纸纹噪点质感（v2.0） ----------
   用 SVG feTurbulence 现场生成纤维噪点，不加载位图：体积几乎为零、任意缩放下都清晰。
   契合羊皮纸手稿风格。三个性能约束：
   1. 只做静态背景，不加动画——历史上 blur 叠无限动画导致过卡顿。
   2. pointer-events:none，不吃任何交互事件。
   3. 流畅模式(.no-motion)与系统减弱动效下直接不渲染。
   用法：给容器加 .paper-texture 即可（已用于 hero 与个人主页头部）。 */
.paper-texture{position:relative}
.paper-texture::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='ylNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ylNoise)'/%3E%3C/svg%3E");
}
/* 深色主题下 multiply 会把画面压得更黑，改用柔和叠加 */
[data-theme="dark"] .paper-texture::after{
  opacity:.05;
  mix-blend-mode:overlay;
}
.no-motion .paper-texture::after{display:none}
@media (prefers-reduced-motion: reduce){
  .paper-texture::after{display:none}
}
/* 独立噪点层：给伪元素已被占用的容器用。
   .hero 的 ::before 是魔法阵、::after 是符箓竖批，再加 .paper-texture 会把竖批覆盖掉
   （两者特异性相同，后定义者胜）。这种情况改在 HTML 里放一个 <span class="tex-layer">。 */
.tex-layer{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='ylNoise2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ylNoise2)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .tex-layer{opacity:.05; mix-blend-mode:overlay}
.no-motion .tex-layer{display:none}
@media (prefers-reduced-motion: reduce){
  .tex-layer{display:none}
}