/* ════════════════════════════════════════════════════════════════
   MangaFlow AI — 共享设计系统
   提取自 opendesign_mangaflow.md v1.0（2026-08-04）
   引用：screens/*.html 用 <link rel="stylesheet" href="../assets/mangaflow.css">
   ════════════════════════════════════════════════════════════════ */

/* ─── Token（文档 3/4/5/6，勿在 :root 外写原始 hex）────────── */
:root {
  /* 背景层级（3.1 / 7） */
  --bg: #0c0c14;
  --surface: #151520;
  --surface-2: #0f0f1a;
  --surface-3: #1a1a28;

  /* 边框层级 */
  --border: #252535;
  --border-soft: #1e1e2e;
  --border-hover: #2a2a3a;
  --border-strong: #3a3a4a;

  /* 文字。--fg 是标题色（h1~h4）：紫夜的 --fg-2 是冷调 #e8e8f0，标题再用纯白会「白得发青」，
     按同族补一档带一丝靛的近白。注意这条是根令牌，**只有没覆盖 --fg 的皮肤会跟着变** ——
     六套现在都各自覆盖了（黑金 #fbf7ee / 石墨银 #f7f9fc / 清新 / 科幻 / 机甲），所以改它只动紫夜。 */
  --fg: #f6f7ff;
  --fg-2: #e8e8f0;
  --muted: #8888a0;
  --muted-2: #666680;
  --dim: #6b6b7b;
  /* 三级文字：比 --dim 再暗一档（导出面板等处的「次要说明」）。 */
  --fg-3: #74748a;
  /* 说明性灰字（三个首页的 .drama-module-desc 用的是 var(--text-secondary, #9ca3af)，
     令牌一直没定义）。深色皮肤保持原来的 #9ca3af 不变，清新皮肤另给一档深灰。 */
  --text-secondary: #9ca3af;

  /* 语义色（3.2） */
  --accent: #6366f1;
  --accent-2: #a855f7;
  --pink: #ec4899;
  --amber: #f59e0b;
  --teal: #14b8a6;
  --red: #ef4444;
  --green: #22c55e;
  --link-hover: #a5b4fc;
  /* 语义紫位：随皮肤切换（音色 / 旁白等次级强调） */
  --purple: #a78bfa;
  --on-accent: #ffffff;
  --on-teal: #062b2e;
  /* 媒体上的文字：缩略图 / 预览画面上的角标、序号、播放键（底下垫的是 rgba(12,12,20,…) 深色纱）。
     底下永远是画面本身，所以这个颜色**不随皮肤变** —— 换成 --fg / --fg-2 会跟着皮肤翻转，
     浅色皮肤下就成了「深字压深底」（真机对比度 1.54:1，数字直接看不见）。 */
  --on-media: #ffffff;

  /* 渐变白名单（3.3） */
  --grad-hero: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
  --grad-progress: linear-gradient(90deg, #6366f1, #a855f7);
  --grad-logo: linear-gradient(135deg, #6366f1, #a855f7);
  /* 作品缩略图的三个占位底（.art-blue / .art-abstract / .art-orange）——**每套皮肤都必须覆盖这三个**。
     真机事故：--grad-cover-orange 一直只有这里定义过，五套皮肤全漏了它，于是每套皮肤都有 1/3 的
     缩略图漏出默认紫夜的暖橙（科幻首页那条 2000+ 像素的橙块就是它）。加皮肤时照抄这三个。 */
  --grad-cover-blue: linear-gradient(135deg, #1e1b4b, #4338ca);
  --grad-cover-purple: linear-gradient(135deg, #4a044e, #a855f7);
  --grad-cover-orange: linear-gradient(135deg, #7c2d12, var(--amber));
  --grad-pro: linear-gradient(135deg, #1e1b4b, #312e81);
  /* 画面艺术渐变（由文档 3.3 色板推导的 token） */
  --grad-art-cherry:
    radial-gradient(circle at 76% 24%, rgba(236,72,153,.6) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 32%, rgba(255,255,255,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 36%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    linear-gradient(160deg, #1e1b4b 0%, #4a044e 48%, #a855f7 125%);
  --grad-art-sunset:
    radial-gradient(circle at 68% 74%, rgba(245,158,11,.9) 0 36px, transparent 37px),
    linear-gradient(165deg, #1e1b4b 0%, #7c2d12 52%, #f59e0b 135%);
  --grad-art-night:
    radial-gradient(circle at 78% 22%, rgba(236,236,255,.92) 0 13px, transparent 14px),
    radial-gradient(circle at 63% 12%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 26%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    linear-gradient(170deg, #0f0f1a 0%, #1e1b4b 55%, #4338ca 128%);
  --grad-art-rain:
    repeating-linear-gradient(115deg, rgba(232,232,240,.16) 0 1px, transparent 1px 26px),
    linear-gradient(170deg, #10102e 0%, #1e1b4b 55%, #4338ca 132%);
  --grad-art-hall:
    linear-gradient(115deg, rgba(255,255,255,.2) 0 2px, transparent 2px 90px),
    linear-gradient(170deg, #0e3a44 0%, #1e1b4b 58%, #14b8a6 140%);
  --grad-avatar-pink: linear-gradient(135deg, #4a044e, #ec4899);
  --grad-avatar-teal: linear-gradient(135deg, #0e3a44, #14b8a6);

  /* 页面氛围光（随皮肤）。紫夜原本是唯一 `none` 的一档（六套里其余五套都有），
     整页从顶到底就是一块平的 #0c0c14 —— 而这套是**默认皮肤**，是第一次打开看到的东西。
     补一层同族顶光：主光是 --accent 的靛蓝（比机甲那档弱一点，别抢内容），右上角再压一点
     --accent-2 的紫（8%）——「靛紫冷调」里那点紫要有，否则只会读成「深蓝」。
     注意副光给得小：紫在暗底上最容易发脏，超过 10% 就开始像蒙了一层膜（机甲那轮的教训）。 */
  --page-glow:
    radial-gradient(1800px 700px at 50% -14%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 68%),
    radial-gradient(1300px 600px at 86% -6%, color-mix(in oklab, var(--accent-2) 8%, transparent), transparent 70%);

  /* 字体（4.1/4.2） */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --text-hero: 20px; --text-h1: 18px; --text-h2: 16px; --text-h3: 15px; --text-h4: 14px;
  --text-body: 13px; --text-caption: 12px; --text-small: 11px; --text-xs: 10px;

  /* 间距（8px 网格，5） */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;

  /* 圆角（6） */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px;
  --radius-2xl: 12px; --radius-3xl: 14px; --radius-4xl: 16px; --radius-5xl: 20px; --radius-full: 9999px;

  /* 动效与层级 */
  --motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 400ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent);

  /* 布局（9.2）—— 内容列分档增长：窄屏收紧，宽屏/超宽屏逐档放宽 */
 --container-max: 1280px;
  /* 短剧工作台统一列宽（9.4）：顶栏 / 页签条 / 子页签 / 正文共用同一列，限宽居中。
     口径写在这里一处，别在各页各写一个数字——历史上因此出现 980/1000/1080/1100/1240 五档乱象。
     例外：分镜编辑器（画布类）保持全屏。 */
  --drama-content-w: 1080px;
 --page-gutter: 24px;
 --topnav-h: 56px;
 --card-min: 300px;        /* 宽卡片栅格最小宽度（.grid-3） */
 --card-min-sm: 280px;     /* 窄卡片栅格最小宽度（.grid-4） */
 --sidebar-min: 280px;     /* 主从布局右侧栏最小宽度（.main-split） */
 --sidebar-max: 320px;     /* 主从布局右侧栏最大宽度（宽屏逐档放宽，见 9.3） */
  /* 自定义光标（黑底白描边的箭头 / 手型，24×24 PNG，Codex 注释光标同款观感） */
  --cursor-arrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIESURBVEhL3ZW/y1JhFMclCALDHykhpJKOJg1NbU7mPyBEDS5trmGjBOmQBA5ODdEQhK6B0ND8gkFIQxgtIYIghIUogj8+J87FJ3qf9L3qGw194cC9zznn++G5z4/r8fxLAWnghYhct3N/RcA9ERFgCGTt/LkF5FerlXS7XYWoHto155IC1uu1RCIRKZfLOhkFvRKRy3btUVKAmkajUfF4PJLP50VnBHwAbtj1B8sAEomEA9BIpVLS6/UUMta83XOQtgE0vF6vNJtN88me2H17axfARKlUMpA3IhK2+13lBtDIZrMymUwU8gW4bXucqX0AGrFYTDqdjkLmwAPbZ6f2BZioVCqi2xpoiMhF2+8PuQFCoZCzdYvFonNOarWajMdjsy7vR6PR2edlGyAYDEogEHCeC4WCMfsGfAV6QAd4B7wGfLbnKRlAMpl0DOPxuPT7fWm32857OByW2WymgJcicsHud5UB+P1+ZyEHg4FZSEmn0w6kWq1qyQ8Ridj9rlLAcrmUXC4nw+FQzT8Bt4DPrVbr1ywUCNTsfleZy27znT8C1zbjj3TM3FGNRkPz3w8+bMD9jblebld/G7+id1G9XncAPp9P5vO5lj4+7eAi4CbwXA235J4tFgtnq2YyGZlOp85uEpFLdu1R0t8osNJrYjPLE+DuUbtpl4CnwFvgjp37f/UTmH82xG+2sLcAAAAASUVORK5CYII=") 3 1, auto;
  --cursor-hand: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJqSURBVEhL5ZVPSJNhHMcXdZhgsOqwugTRIRHEQxESBB4d8w9CkDdPHTqll/CaB/XgRYUUiRAMx1YgKMEIE0ISbTH0IMq8LGRk4aGECMN9vvF7whHPfHUlnfrCD/Zlez6f93n37F0o9F8EuAskgCfATf/9EwW4I0npdFrLy8sCvgGXJF0HHpxYaFc+Pz+vUCjkplAomCS9t7f3fXt7214XgZi/ruIAL6anp0uCtbU125AmJiZcn5ubM8kz4AbwFHgEnPU5gZGUmpmZKQnW19edoLe31/Xh4WETfNjf399dWFjQzs6OisVi0ucEJkjQ19fn+tDQkOu5XM719vZ2E36VdM5nHZogQX9/f2kHlkwm43osFjPBrh0En3VofMHGxoYDDgwMuD4yMuJ6Npt1vbm52eoXSRd91qEBnv8u2NracsDBwUHXx8bGXDdxxQIgCtySFLYDMzs7WxK0tLSou7tbNTU1rtfV1bne1NTkemtr69EC4Dbw0T4FZCW9TyaTJcFx09bWdqzgXSqVcldoZ9wyOTlZBgqaSnawmEgk3IfD4bBWV1c1Pj5eBgqajo4O2/knSRGf7QLE7RK6urrcgurqakUikTJQ0PT09JggJ+m0zy4FeGiSeDxeBjhulpaWTJDwmWUBHpvETokPCZr6+nr3ndld8HllkXQKeGnPlmg0Wgbzp6qqSpubmwZ/47MCY09FIJPP51VbW1sGPRg7cSsrKwbPS7rsc44McB54ZVsfHR11P7SGhgY1Njaqs7NTU1NTB7dlEbjir684wH3gLfCZX/kBFIDXwD1JZ/w1fxXgAnANuPpHfyz/Kj8Bxx614c1Gds4AAAAASUVORK5CYII=") 10 3, pointer;
}

/* ─── 皮肤：紫夜为默认（:root），下面「黑金 / 石墨银 / 清新」为可切换皮肤 ───
   换肤覆盖全部色彩令牌：底色 / 边框 / 强调色 / 语义色（绿 红 青 粉）一起转调，
   否则强调色与紫灰底、暖底会互相发脏。语义色只挪色相与饱和度，保留
   「绿=成功 / 红=失败 / 青=音色」的辨识度；--on-accent、--on-teal 必须与底色成对比。 */
html[data-theme="gold"] {
  /* 底面是**黑漆**，不是棕。原来的 #12100c / #1b1815 / #241f1a 棕调很重，香槟金压上去
     会「金棕糊成一团」，看着像旧木头而不是黑金 —— 用户说的「不够高级」有一半来自这个色温。
     换成中性偏暖的近黑之后，金才有得比。 */
  --bg: #0d0c0a;
  --surface: #171614;
  --surface-2: #0b0a09;
  --surface-3: #201e1a;

  /* 描边同理：黑金里的分割线本来就该读成「金线」。色相往金上挪，亮度仍然压着
     （再亮就不是金线、是霓虹描边了）。 */
  --border: #3b3428;
  --border-soft: #26221a;
  --border-hover: #524834;
  --border-strong: #6a5b3c;

  /* 顶部金色氛围光 + 底部一层极淡的暖光回弹（只有顶光的话，页面下半截会发闷） */
  --page-glow:
    radial-gradient(1800px 700px at 50% -14%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 68%),
    radial-gradient(1100px 520px at 50% 116%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 72%);

  /* 黑金的材质：香槟金**缎面**（不是碳纤维那种斜纹布，两套材质语言不打架）。四层，全部静态：
     ① 上沿一道香槟金「分缝」——radial 压成 1px 高、中间最亮、两端淡出（等宽的一条直线
        看着像描边，会淡出的才像金属件）；② 颗粒（--skin-grain，定义在下面「皮肤材质层」上方，
        **这套皮肤专用** —— 机甲叠过一份，实报「埋汰模糊」，已撤）；③ 一道很软的斜向缎光；
        ④ 面光＝上亮下暗。
     ②③ 合起来才是「缎面」：少颗粒＝塑料，少缎光＝磨砂砖。
     ①的 alpha 是量出来的：卡面顶沿比之前亮 +19 灰阶，够站稳，再加就成一条白线了。 */
  --skin-texture:
    radial-gradient(52% 1px at 50% 0, rgba(255,247,222,.72), rgba(242,217,146,.28) 40%, transparent 78%),
    var(--skin-grain),
    linear-gradient(112deg, transparent 18%, rgba(242,217,146,.10) 42%, rgba(255,246,220,.045) 52%, transparent 78%),
    linear-gradient(180deg, rgba(255,246,220,.05), rgba(0,0,0,.11) 82%);

  /* --fg 是标题色（h1~h4 全用它）。原先这两套（黑金 / 石墨银）没覆盖它，
     于是标题一直是根上的纯白 #ffffff，和各自的 --fg-2（暖白 #ebe7df / 冷白 #e9ebef）
     不同族 —— 一屏里标题纯白、正文暖白，肉眼读作「白得有点发青」。按各自色温补一档近白。
     （default 紫夜与清新 / 科幻 / 机甲本来就覆盖了 --fg，只有这两套漏。） */
  --fg: #fbf7ee;
  --fg-2: #ebe7df;
  --muted: #8b8579;
  --muted-2: #6c665e;
  --dim: #6e6862;
  --fg-3: #7c7565;
  --text-secondary: #9ca3af;

  --accent: #e4c579;
  --accent-2: #f2d992;
  --purple: #e4c579;
  --link-hover: #f0dca8;
  --on-accent: #1a1409;
  --amber: #f2a33c;
  /* 语义色同调转暖（香槟暖底上用原版翠绿 / 正红会发脏、也压不住金色） */
  --pink: #dd8b9c;
  --green: #8fc46f;
  --teal: #63b3a0;
  --red: #e2795f;
  --on-teal: #0e1f1a;

  --grad-hero: linear-gradient(135deg, rgba(228,197,121,0.12), rgba(242,217,146,0.08));
  --grad-progress: linear-gradient(90deg, #b9902f, #f2d992);
  --grad-logo: linear-gradient(135deg, #f7e7b4, #e4c579 42%, #b9902f);
  --grad-cover-blue: linear-gradient(135deg, #1b2430, #3c4a57);
  --grad-cover-purple: linear-gradient(135deg, #3a1f16, #c9a227);
  /* 铜：和「紫」那档的金区分开、又不跳出金族 */
  --grad-cover-orange: linear-gradient(135deg, #2b1a0c, #b5702f);
  --grad-pro: linear-gradient(135deg, #16130d, #3a2f16);

  --grad-art-cherry:
    radial-gradient(circle at 76% 24%, rgba(236,72,153,.6) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 32%, rgba(255,255,255,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 36%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    linear-gradient(160deg, #241708 0%, #3a1f16 48%, #c9a227 125%);
  --grad-art-sunset:
    radial-gradient(circle at 68% 74%, rgba(245,158,11,.9) 0 36px, transparent 37px),
    linear-gradient(165deg, #16130d 0%, #7c2d12 52%, #f2a33c 135%);
  --grad-art-night:
    radial-gradient(circle at 78% 22%, rgba(255,246,224,.92) 0 13px, transparent 14px),
    radial-gradient(circle at 63% 12%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 26%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    linear-gradient(170deg, #0f0e0d 0%, #1e1a12 55%, #6b5a2a 128%);
  --grad-art-rain:
    repeating-linear-gradient(115deg, rgba(235,231,223,.16) 0 1px, transparent 1px 26px),
    linear-gradient(170deg, #101318 0%, #1b222b 55%, #3c4a57 132%);
  --grad-art-hall:
    linear-gradient(115deg, rgba(255,255,255,.2) 0 2px, transparent 2px 90px),
    linear-gradient(170deg, #14302b 0%, #2a2418 58%, var(--teal) 140%);
  --grad-avatar-pink: linear-gradient(135deg, #3a1f16, #e0a15c);
  --grad-avatar-teal: linear-gradient(135deg, #14302b, var(--teal));
}

html[data-theme="silver"] {
  --bg: #131417;
  --surface: #1c1d21;
  --surface-2: #0e0f11;
  --surface-3: #24252a;

  --border: #34363c;
  --border-soft: #26272c;
  --border-hover: #454850;
  --border-strong: #565a63;

  --page-glow: radial-gradient(1800px 700px at 50% -14%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 68%);

  --fg: #f7f9fc;
  --fg-2: #e9ebef;
  --muted: #8d939c;
  --muted-2: #6e747c;
  --dim: #70767e;
  --fg-3: #7b818b;
  --text-secondary: #9ca3af;

  --accent: #c8cdd6;
  --accent-2: #e6eaf0;
  --purple: #c8cdd6;
  --link-hover: #dde2ea;
  --on-accent: #14161a;
  --amber: #f2b24c;
  /* 语义色同调转冷、降饱和，和石墨灰底同调 */
  --pink: #d68fb0;
  --green: #6fc08f;
  --teal: #5fb0c4;
  --red: #e07d80;
  --on-teal: #0b1c22;

  --grad-hero: linear-gradient(135deg, rgba(200,205,214,0.12), rgba(230,234,240,0.08));
  --grad-progress: linear-gradient(90deg, #8e96a3, #e6eaf0);
  --grad-logo: linear-gradient(135deg, #f4f6f9, #c8cdd6 45%, #8e96a3);
  --grad-cover-blue: linear-gradient(135deg, #1b2430, #55606e);
  --grad-cover-purple: linear-gradient(135deg, #2a2e36, #6b7482);
  /* 石墨银本来就是单色口径：第三档给灰阶，不给彩 */
  --grad-cover-orange: linear-gradient(135deg, #23262b, #8d949e);
  --grad-pro: linear-gradient(135deg, #14161a, #2e333b);

  --grad-art-cherry:
    radial-gradient(circle at 76% 24%, rgba(236,72,153,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 32%, rgba(255,255,255,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 36%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    linear-gradient(160deg, #1b1e24 0%, #343b46 48%, #8e96a3 125%);
  --grad-art-sunset:
    radial-gradient(circle at 68% 74%, rgba(245,158,11,.9) 0 36px, transparent 37px),
    linear-gradient(165deg, #16181c 0%, #7c2d12 52%, #f59e0b 135%);
  --grad-art-night:
    radial-gradient(circle at 78% 22%, rgba(233,236,242,.92) 0 13px, transparent 14px),
    radial-gradient(circle at 63% 12%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 26%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    linear-gradient(170deg, #0f0f11 0%, #1e222a 55%, #55606e 128%);
  --grad-art-rain:
    repeating-linear-gradient(115deg, rgba(233,236,242,.16) 0 1px, transparent 1px 26px),
    linear-gradient(170deg, #101318 0%, #1b222b 55%, #55606e 132%);
  --grad-art-hall:
    linear-gradient(115deg, rgba(255,255,255,.2) 0 2px, transparent 2px 90px),
    linear-gradient(170deg, #0f2c33 0%, #2a2e36 58%, var(--teal) 140%);
  --grad-avatar-pink: linear-gradient(135deg, #343b46, #e2e6ec);
  --grad-avatar-teal: linear-gradient(135deg, #0f2c33, var(--teal));
}

/* ─── 皮肤：清新（唯一的浅色皮肤）─────────────────────────────
   前三套都是深底，令牌默认值整套是「深底上要亮」的思路（--fg 近白、--on-accent 近白、
   语义色取高饱和亮色）。浅底上照抄会白压白、亮压亮，所以这一套整块重取：
   强调色 / 语义色一律压深一档当正文色用，--on-accent 反过来变「白字压强调色」，
   氛围光浓度降到 12%（深色皮肤下同样的百分比压在浅底上会糊成一块绿）。
   另外 --grad-art-* / --grad-cover-* 上的白字（.art-glyph 等）不能丢，
   所以这两族渐变仍取「中深薄荷」，不做成浅色块。 */
html[data-theme="fresh"] {
  color-scheme: light;

  --bg: #eef5f4;
  --surface: #ffffff;
  --surface-2: #e6efee;
  --surface-3: #f6fbfa;

  --border: #d2e3e0;
  --border-soft: #e3eeec;
  --border-hover: #b8d2ce;
  --border-strong: #97bab4;

  --page-glow: radial-gradient(1800px 700px at 50% -14%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 68%);

  --fg: #0c1c1a;
  --fg-2: #203733;
  --fg-3: #4f6c68;
  --muted: #55716c;
  --muted-2: #5f7d78;
  --dim: #66827d;
  --text-secondary: #55716c;

  --accent: #0c766e;
  --accent-2: #17855a;
  --purple: #17855a;
  --link-hover: #095c56;
  --on-accent: #ffffff;
  --amber: #8f6416;
  /* 语义色同调压深：浅底上原本的翠绿 / 正红 / 亮粉对比度只有 2~3:1，当正文色等于看不清 */
  --pink: #c8407e;
  --green: #0a6b3b;
  --teal: #0c7669;
  --red: #c0392f;
  --on-teal: #ffffff;

  --grad-hero: linear-gradient(135deg, rgba(13,129,119,0.10), rgba(23,133,90,0.07));
  --grad-progress: linear-gradient(90deg, #0c766e, #1fae76);
  --grad-logo: linear-gradient(135deg, #34ccb0, #0c766e);
  /* 封面 / 卡片底：浅底 + 深字（用它的地方写的是 color: var(--fg-2)），所以取浅薄荷 */
  --grad-cover-blue: linear-gradient(135deg, #d3ece7, #8ecdc0);
  --grad-cover-purple: linear-gradient(135deg, #dcefe3, #96ceac);
  /* 浅底上这档取偏黄的薄荷（深一档，保证上面那层白字还压得住） */
  --grad-cover-orange: linear-gradient(135deg, #e6f2dc, #93c98a);
  --grad-pro: linear-gradient(135deg, #e4f5f2, #c2e6df);

  /* 画面艺术渐变：这几族上面还压着白字（.art-glyph / 星空点），保持中深薄荷 */
  --grad-art-cherry:
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.75) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 32%, rgba(255,255,255,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 36%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    linear-gradient(160deg, #17756b 0%, #2fa892 48%, #7fd7bd 125%);
  --grad-art-sunset:
    radial-gradient(circle at 68% 74%, rgba(255,246,214,.85) 0 36px, transparent 37px),
    linear-gradient(165deg, #146b6a 0%, #2f9d7e 52%, #a5e3b3 135%);
  --grad-art-night:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.92) 0 13px, transparent 14px),
    radial-gradient(circle at 63% 12%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 26%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    linear-gradient(170deg, #123c3a 0%, #1d6f68 55%, #4fb9a8 128%);
  --grad-art-rain:
    repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 1px, transparent 1px 26px),
    linear-gradient(170deg, #14494a 0%, #1f7a72 55%, #63c9b4 132%);
  --grad-art-hall:
    linear-gradient(115deg, rgba(255,255,255,.3) 0 2px, transparent 2px 90px),
    linear-gradient(170deg, #0f5f5a 0%, #2b8f80 58%, #86d8c2 140%);
  --grad-avatar-pink: linear-gradient(135deg, #1d7f74, #8fe0c4);
  --grad-avatar-teal: linear-gradient(135deg, #0f5f5a, #4fc4ad);
}

/* ─── 皮肤：科幻（霓虹青 × 品红，深底）────────────────────────────
   与黑金 / 石墨银同样是深底，但要的是「霓虹感」，所以有三点不同：
   1) 底色压得更深、更蓝（#05070e），让霓虹亮色能「发光」；面与面之间的明度差拉大，
      否则霓虹色压在深灰底上会糊成一片；
   2) --page-glow 第一次用两层（左青右品红）再加一层极淡的方格网——单色顶光不像科幻；
   3) 强调色是亮青（--on-accent 取近黑），次级强调走品红而不是同色系的第二档青，
      进度条 / 标志走「青→品红」渐变，一眼就能和前面几套区分。
   4) 2026-09-22 收口：上面三条叠在一起会「糊」——两团同强度的青 / 品红光晕 + 双色网格
      + 处处青→品红渐变，真机上量到顶栏右下角是一片 (62,40,82) 的紫雾，用户反馈「有点乱」。
      现在的口径是**一束电，其余收着**：主光源只有左上那团青；网格单色；青→品红渐变
      只许用在小面积上（进度条 / logo / 顶栏那条 1px 实线）；大面积的底衬
      （--page-glow 的副光、--grad-hero）一律压到 10% 以下。 */
html[data-theme="scifi"] {
  --bg: #05070e;
  --surface: #0a101c;
  --surface-2: #070b14;
  --surface-3: #0e1626;

  --border: #22334f;
  --border-soft: #16233a;
  --border-hover: #2f4a70;
  --border-strong: #436394;

  --page-glow:
    /* 网格只留**一层单色**：原来横线品红、竖线青，两色在近黑底上互相咬出一层紫雾，
       整页看过去像彩色坐标纸 —— 这是「乱」的第一来源。间距也从 40px 放宽到 56px。 */
    repeating-linear-gradient(0deg, rgba(125,243,255,.03) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(125,243,255,.026) 0 1px, transparent 1px 56px),
    /* 主光源只留左上这团青。右边那团品红原来是 38%（跟青光同强度），两团对冲就没有主次，
       真机量到顶栏右下角是 (62,40,82) 的紫雾；压到 9% 当副光，页面立刻分出前后。 */
    radial-gradient(1150px 560px at 6% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(1000px 520px at 94% -6%, color-mix(in oklab, var(--accent-2) 9%, transparent), transparent 68%);

  --fg: #ffffff;
  --fg-2: #d3e6f7;
  --fg-3: #8fa8c8;
  --muted: #8ba3c4;
  --muted-2: #748cad;
  --dim: #7e93b4;
  --text-secondary: #9db3d0;

  --accent: #00e5ff;
  --accent-2: #ff2ec8;
  /* 比原来的 #bd5cff 收一档：一行入口卡里它是第三个色相，太电就变成「各是各的颜色」 */
  --purple: #a86bff;
  --link-hover: #8ff7ff;
  --on-accent: #04121a;
  --amber: #ffb020;
  --pink: #ff5ad2;
  --green: #38e08a;
  --teal: #00e5ff;
  --red: #ff5a76;
  --on-teal: #04121a;

  /* Hero / 入口卡的底衬：这是**大面积**，品红那端从 22% 收到 7.5%，
     只留一层「左上有光」的暗示；青→品红留给进度条那种小面积去表达。 */
  --grad-hero: linear-gradient(135deg, rgba(0,229,255,0.09), rgba(255,46,200,0.075));
  --grad-progress: linear-gradient(90deg, #00e5ff, #ff2ec8);
  --grad-logo: linear-gradient(135deg, #8ff7ff, #00e5ff 40%, #ff2ec8);
  --grad-cover-blue: linear-gradient(135deg, #061a2e, #0d4a6b);
  --grad-cover-purple: linear-gradient(135deg, #170a2b, #7a1e91);
  /* 原样是暖橙，在一屏青紫里最跳 —— 换成同族的青碧，三档缩略图都留在冷色里 */
  --grad-cover-orange: linear-gradient(135deg, #06222e, #1d8f9e);
  --grad-pro: linear-gradient(135deg, #06182b, #0d3350);

  --grad-art-cherry:
    radial-gradient(circle at 76% 24%, rgba(255,111,216,.75) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 32%, rgba(255,255,255,.55) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 36%, rgba(255,255,255,.4) 0 2px, transparent 3px),
    linear-gradient(160deg, #0a0a1e 0%, #2a0d3f 48%, #b81fa8 128%);
  --grad-art-sunset:
    radial-gradient(circle at 68% 74%, rgba(255,176,32,.9) 0 36px, transparent 37px),
    linear-gradient(165deg, #06121f 0%, #123a52 52%, #22d3ee 135%);
  --grad-art-night:
    radial-gradient(circle at 78% 22%, rgba(226,246,255,.92) 0 13px, transparent 14px),
    radial-gradient(circle at 63% 12%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 26%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    linear-gradient(170deg, #04070f 0%, #0a1730 55%, #1f4b7a 128%);
  --grad-art-rain:
    repeating-linear-gradient(115deg, rgba(125,243,255,.20) 0 1px, transparent 1px 22px),
    linear-gradient(170deg, #040d1a 0%, #0b2338 55%, #1d6f8f 132%);
  --grad-art-hall:
    linear-gradient(115deg, rgba(125,243,255,.22) 0 2px, transparent 2px 80px),
    linear-gradient(170deg, #0a0a1f 0%, #14224a 58%, #b81fb0 140%);
  --grad-avatar-pink: linear-gradient(135deg, #5c0f5a, #ff4fd8);
  --grad-avatar-teal: linear-gradient(135deg, #06364a, #22d3ee);
}

/* ─── 皮肤：碳纤维机甲（碳纤维斜纹 × 工业橙 / 钢蓝）──────────────────
   材料感来自「布纹」，不是靠堆颜色：
   1) 底色取冷调近黑（#0b0d10），表面只比底色亮一档 —— 碳纤维本体就是哑光深灰，
      亮一档才看得出层次，压平了就是「全黑一片」；
   2) 强调色用工业橙（警示 / 能量），次级走钢蓝（液压 / 冷光），两个色相在色环上近乎对立，
      压在深灰底上既硬派又不吵；--on-accent 反着取近黑（橙底上必须压深字）；
   3) --skin-texture 就定义在这块里（上沿 1px 冷白提亮 + 45° 与 -45° 两组 1px 细线交叉
      = 斜纹布），卡片 / 顶栏 / 弹窗共用同一块布，所以整站材质一致 —— 换布只需改这一处；
   4) 氛围光两层：左橙右蓝两团顶光（曾经还有一层铺满视口的 45° 织纹，删了 —— 见下面
      --page-glow 的注释）。就靠这两团光，不铺网格，和科幻那套的方格网区分开。
   注意：这块没有动效层（不做 .aura），硬派质感本来就是静的；
   要扫光/雷达那种动效随时可以加，入口见 App.vue 的 hasAura。 */
html[data-theme="mecha"] {
  --bg: #0b0d10;
  --surface: #15181d;
  --surface-2: #0e1013;
  --surface-3: #1c2027;

  --border: #2c343d;
  --border-soft: #1f262d;
  --border-hover: #3d4854;
  --border-strong: #4f5c69;

  --page-glow:
    /* 整页那层 45° 织纹删掉了：它和卡面织纹**同向**（都是 45°），铺满全视口时远处的背景和
       卡面会连成一块布，层次反而糊掉；而且它连正文底下的那一片也在织，字看着发软。
       碳纤维的“布”只需要出现在有厚度的面上（卡片 / 顶栏 / 弹窗），底就还它一片干净的黑，
       靠左右两团顶光做氛围（真机量到删掉后页底从 std 2.5 / 均值 15.9 变成 std 0 / 14.0）。 */
    radial-gradient(1250px 620px at 12% -12%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(1150px 560px at 88% -10%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 64%);

  /* 碳纤维机甲的材质：上沿一道 1px 冷白提亮（金属分缝）+ 45°/-45° 两组**1px 细线**织的斜纹布。
     两条都是真机上踩出来的，别再回退：
     ① 不出颗粒。曾经为了「跟黑金口径一致」把 --skin-grain 叠进来，用户当场实报
        「机甲看着有点埋汰模糊」—— 量到的证据：卡面残差 std 4.80→4.62（织纹反而被压平）、
        均值掉 8%（那层 alpha≈.13 的近黑颗粒本质是一层灰膜）。哑光碳纤维本来就不该有颗粒，
        黑金的「缎面」需要颗粒，两套材质语言不同，这条**故意不共用**。
     ② 织纹是 1px 线 / 4px 周期，不是 2px 实心带。2px 宽的 45° 带在 45° 上永远跨两个像素，
        抗锯齿一糊就是一条灰膜（平均压暗 15%，读作「脏」）；细线的平均压暗只 8.5%，
        线本身却更黑、更清亮（真机量到卡面均值 25.9→26.9、织纹残差 std 4.80→5.77）。 */
  --skin-texture:
    linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.34) 0 1px, transparent 1px 4px);

  --fg: #f2f6fa;
  --fg-2: #cbd5de;
  --fg-3: #93a1ad;
  --muted: #93a1ad;
  --muted-2: #7d8a95;
  --dim: #78858f;
  --text-secondary: #a3b0bb;

  --accent: #ff8a1f;
  --accent-2: #5aa9ff;
  /* 原来是紫罗兰 #b07cff —— 于是首页一行入口卡的图标圈是「橙 / 钢蓝 / 紫」三个色相。
     机甲的配色口径写死就是「工业橙 × 钢蓝」两个，紫是凭空多出来的。收进钢蓝这一族，
     比 accent-2 亮一档，这样一行读作 橙-blue-蓝-橙，是对称的。 */
  --purple: #8ec4ff;
  --link-hover: #ffb765;
  --on-accent: #14100a;
  --amber: #ffc53d;
  /* 语义色同调：橙系保持「热」，成功 / 音色走冷色，免得整屏都在发光 */
  --pink: #ef6f9c;
  --green: #4fd07a;
  --teal: #43c8d8;
  --red: #ff5f52;
  --on-teal: #06171a;

  --grad-hero: linear-gradient(135deg, rgba(255,138,31,0.13), rgba(90,169,255,0.10));
  --grad-progress: linear-gradient(90deg, #ff8a1f, #ffc53d);
  --grad-logo: linear-gradient(135deg, #ffd08a, #ff8a1f 45%, #b3541a);
  --grad-cover-blue: linear-gradient(135deg, #12161c, #3b4a5c);
  --grad-cover-purple: linear-gradient(135deg, #2a1a0c, #b3541a);
  /* 比「紫」那档的橙更黄一档，免得两张缩略图糊成一个色 */
  --grad-cover-orange: linear-gradient(135deg, #1a1508, #e09322);
  --grad-pro: linear-gradient(135deg, #14171c, #2b3138);

  --grad-art-cherry:
    radial-gradient(circle at 76% 24%, rgba(255,140,90,.7) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 32%, rgba(255,255,255,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 36%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    linear-gradient(160deg, #14171c 0%, #3a2a18 48%, #ff8a1f 128%);
  --grad-art-sunset:
    radial-gradient(circle at 68% 74%, rgba(255,197,61,.9) 0 36px, transparent 37px),
    linear-gradient(165deg, #0e1013 0%, #5a3410 52%, #ffb765 135%);
  --grad-art-night:
    radial-gradient(circle at 78% 22%, rgba(240,247,255,.92) 0 13px, transparent 14px),
    radial-gradient(circle at 63% 12%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 26%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    linear-gradient(170deg, #0a0c0f 0%, #161b24 55%, #46586d 128%);
  --grad-art-rain:
    repeating-linear-gradient(115deg, rgba(203,213,222,.18) 0 1px, transparent 1px 22px),
    linear-gradient(170deg, #0d1015 0%, #1a212b 55%, #4b6a8e 132%);
  --grad-art-hall:
    linear-gradient(115deg, rgba(255,255,255,.2) 0 2px, transparent 2px 80px),
    linear-gradient(170deg, #101820 0%, #24282f 58%, var(--teal) 140%);
  --grad-avatar-pink: linear-gradient(135deg, #3a2a18, #ff9a4d);
  --grad-avatar-teal: linear-gradient(135deg, #10323a, var(--teal));
}

/* ── 金属磨砂的颗粒贴图（黑金 --skin-texture 里的 var(--skin-grain)）。
   参数是**量出来的**（本机 1280×720 / dpr1.5，拿 460×70 的纯色块当对照组逐像素比）：
    baseFrequency .45 + numOctaves 2 → 颗粒粗到缩放 / 低通之后还留得住；RGB 走
    `slope=1 intercept=-.58` 把噪声压到近黑底色的均值上（这样它只做「起伏」、不整体提亮）；
    alpha 的 `slope=.26` 定强度 —— 实测均值漂移 < 2 灰阶、逐像素 ±4。
    试过 .8 的高频噪声：截图 / 缩放一低通就只剩「整块变亮 9 灰阶」，颗粒全丢，白做。
    **只有黑金用它**：机甲（哑光碳纤维）叠过同一份，卡面掉 8% 亮度、织纹被压平，
    真机上读作一层灰雾（用户实报「看着有点埋汰模糊」），已从 mecha 撤掉。
    留在 :root 只是为了让这份贴图有个显眼的定义位置 —— 它不代表「有材质的皮肤都该用颗粒」，
    新皮肤要不要颗粒先看材质语言：金属磨砂要，哑光布纹不要。 */
:root {
  --skin-grain: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27240%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.45%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3CfeComponentTransfer%3E%3CfeFuncR type=%27linear%27 slope=%271%27 intercept=%27-0.58%27/%3E%3CfeFuncG type=%27linear%27 slope=%271%27 intercept=%27-0.58%27/%3E%3CfeFuncB type=%27linear%27 slope=%271%27 intercept=%27-0.58%27/%3E%3CfeFuncA type=%27linear%27 slope=%27.26%27/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width=%27240%27 height=%27240%27 filter=%27url(%23g)%27/%3E%3C/svg%3E");
}

/* ── 皮肤材质层（「只换令牌做不到」的那层质感）─────────────────────────────
   碳纤维机甲 = 45° 斜纹布；黑金 = 香槟金缎面（上沿一道提亮 + 0° 拉丝 + 斜向反光）。
   两套材质共用这一份类名清单，各自的材质写在各自的令牌块里（`--skin-texture`）。
   要加一套「有材质的皮肤」＝ useTheme 里标 textured: true + 定义 --skin-texture，
   这里的选择器跟着 `:is(...)` 扩一格即可。
   只加 background-image 这一条声明、不改各页任何样式；`:is()` 里的主题选择器带
   html[data-theme=…]，特异性高一档，所以不受文件先后顺序影响（卡片自己的 :hover
   换底色也盖不掉材质）。全部静态，没有任何动画。 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) .topnav,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .entry-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .scene-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .char-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .asset-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .screen-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .ew-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .modal,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .drawer,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .skin-menu { background-image: var(--skin-texture); }

/* 各页 scoped 里的「私有卡片类」也要铺同一层材质。只认全局 .card 的话，同一页上会出现
   「hero / entry-card 有材质、project-card / setting-card 没有」的割裂观感（用户实报）。
   口径定死为：**内容容器铺，控件不铺** —— input / select / segmented / 按钮 / chip /
   文本域内部，以及画布、媒体内容区一律保持干净，免得「全屏都铺反而糊」。
   注意：这组是**兜底的第一层**（首屏 js 还没跑时就得有材质），完整口径见下面那条 [data-texture]。 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) .project-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .cpl-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .dh-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .stat-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .setting-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .settings-sidebar,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .panel,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .prompt-editor,
/* 工作台各页的「行级内容卡」：分镜行 / 台词行（音频生成）/ 时间轴行 / 脚本页脚 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) .sb-row,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .line-row,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .tl-row,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .sc-footer,
/* 提示词编辑器里的内嵌内容条与关键帧槽 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) .pe-ref-bar,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .kf-slot,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .media-item,
/* 其余各页的内容卡：角色图库 / 风格卡 / 短剧向导 / 空状态块 / GPU 节点池概览 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) .ri-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .genre-card,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .wz-quick,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .wz-q,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .empty,
:is(html[data-theme="mecha"], html[data-theme="gold"]) .pool-summary > div { background-image: var(--skin-texture); }

/* 材质自动铺装：composables/useSkinTexture.ts 按「外观」（有底色 + 有圆角 + 够大 +
   不是控件 / 工作区）认出内容容器后打上 data-texture，这里只认标记。
   有了它，新增卡片**不用**再回来补类名 —— 上面那组现在只剩两个作用：首屏（js 还没跑）
   和「自带渐变底、判定里故意跳过」的那几张（hero / entry-card / stat-main）。 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) [data-texture] { background-image: var(--skin-texture); }

/* hero / entry-card 自带一层渐变底，别把它盖掉：材质写在前面 = 压在最上层。
   维护口径：凡是「自带渐变底」的卡片，都得单独写一条两层背景（材质在前）。 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) .hero-panel { background-image: var(--skin-texture), var(--grad-hero); }
:is(html[data-theme="mecha"], html[data-theme="gold"]) .entry-card { background-image: var(--skin-texture), var(--grad-hero); }
/* 费用中心的「主指标」卡也自带强调色渐变，照 hero 的处理把材质压在上面 */
:is(html[data-theme="mecha"], html[data-theme="gold"]) .stat-card.stat-main {
  background-image: var(--skin-texture),
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 16%, transparent),
      color-mix(in oklab, var(--accent-2) 8%, transparent));
}

/* 顶栏的底边别掐掉：接缝两端是淡出的，全靠这条 1px 边界把「导航区」和内容区分开
   （真机上试过 border-bottom-color: transparent，整页看顶栏和内容糊在一起）。 */
html[data-theme="mecha"] .topnav { border-bottom-color: var(--border); }
/* 顶栏下沿＝一条「机加工接缝」：1px 实线、两端淡出，中段由工业橙过渡到钢蓝。
   早先这里是橙 × 暗橙的 45° 警示斜条，2px 高在真机上读起来就是一条虚线、太跳（用户实报），
   换成连续细线：保留金属分缝的意思，但不跟内容抢视线。 */
html[data-theme="mecha"] .topnav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 40%, transparent) 16%,
    color-mix(in oklab, var(--accent) 26%, transparent) 54%,
    color-mix(in oklab, var(--accent-2) 30%, transparent) 84%,
    transparent 100%);
  pointer-events: none;
}

/* ── 黑金专属的金属件（材质图那部分在上面，两套皮肤共用）────────────────── */
/* 顶栏下沿：香槟金接缝，与机甲同款做法（1px、两端淡出、静态），颜色换成一整条金 */
html[data-theme="gold"] .topnav { border-bottom-color: var(--border); }
html[data-theme="gold"] .topnav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 46%, transparent) 14%,
    color-mix(in oklab, var(--accent-2) 34%, transparent) 52%,
    color-mix(in oklab, var(--accent) 40%, transparent) 86%,
    transparent 100%);
  pointer-events: none;
}

/* 主按钮 = 真金渐变（上亮下暗）+ 金属倒角 + 一层暖光；纯色的 --accent 看着像块塑料片 */
html[data-theme="gold"] .btn-primary {
  background-image: linear-gradient(180deg, #f9ecc2, #e4c579 46%, #c9a94f);
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.65),
    inset 0 -1px 0 rgba(92,70,22,.45),
    0 10px 24px -14px color-mix(in oklab, var(--accent) 90%, transparent);
}
html[data-theme="gold"] .btn-purple {
  background-image: linear-gradient(180deg, #f9ecc2, #e4c579 46%, #c9a94f);
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.6),
    inset 0 -1px 0 rgba(92,70,22,.4),
    0 10px 24px -14px color-mix(in oklab, var(--accent) 80%, transparent);
}

/* 主按钮 = 金属倒角（上亮下暗的内阴影）+ 一层能量外发光 */
html[data-theme="mecha"] .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 22px -8px color-mix(in oklab, var(--accent) 90%, transparent);
}
html[data-theme="mecha"] .btn-purple {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 0 22px -8px color-mix(in oklab, var(--accent-2) 80%, transparent);
}

/* 科幻皮肤专属的霓虹光（破例：前面几套皮肤都只换令牌，这里给顶栏和主按钮补发光）。
   「炫酷」靠纯色令牌给不出来 —— 霓虹的辨识度来自边缘那圈光。
   只挂 .topnav / .btn-primary / .btn-purple 这三个全局类，不碰各页私有样式；
   选择器带 html[data-theme="scifi"]，比 .topnav 那类单类选择器高一档，不受文件顺序影响。 */
html[data-theme="scifi"] .topnav {
  border-bottom-color: transparent;
  /* 光晕是「弥散」的那一半、也最显脏，从 30px/62% 收到 18px/40%；
     「电」的辨识度其实全靠下面那条 1px 青→品红实线，线留着、雾收掉。 */
  box-shadow: 0 1px 18px -8px color-mix(in oklab, var(--accent) 40%, transparent);
}
/* 顶栏下沿换成「青 → 品红」的发光细线：单色描边给不出「电」的感觉 */
html[data-theme="scifi"] .topnav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    color-mix(in oklab, var(--accent) 35%, var(--accent-2)) 48%,
    var(--accent-2) 100%);
  opacity: .9;
  pointer-events: none;
}
html[data-theme="scifi"] .btn-primary {
  box-shadow: 0 0 18px -8px color-mix(in oklab, var(--accent) 80%, transparent);
}
html[data-theme="scifi"] .btn-purple {
  box-shadow: 0 0 18px -8px color-mix(in oklab, var(--accent-2) 62%, transparent);
}

/* 科幻皮肤的光波层（DOM 是 .app-shell 的第一个子元素，见 App.vue）：
   —— 为什么能压在内容下面：该皮肤下 .app-shell 自己不铺底色（底色 + 氛围光交给 body），
      于是 z-index:-1 的 .aura 正好落在「画布底色之上、内容之下」那一层。
      因此不必给 .app-main 加 z-index —— 那会把它变成层叠上下文，页内 modal（z-index 100）
      就再也盖不住顶栏（z-index 50）了。
   —— 只动 transform / opacity，交给合成器；不写 filter: blur（每帧重栅格化太贵），
      柔边靠渐变的多个停点做。
   —— **不用 mix-blend-mode**（性能坑，2026-09-22 实测）：带混合模式的层每帧都要整层
      重新合成，真机截图耗时从 62ms 涨到 153~211ms，就是「UI 发卡」的来源。
      而这两套配色里混合本来就是可以等价替换的：
      在近黑底（#05070e）上 screen(c) ≡ 普通 alpha 叠加 (b + c - b·c) ≈ c（误差 <2/255）；
      在近白底（#eef5f4）上 multiply(c) ≡ 普通 alpha 叠加 (b·c) ≈ c（误差 <2/255）。
      所以去掉混合模式后画面几乎逐像素相同，却回到纯合成器路径（见本轮实测对比）。
   —— 跟随系统「减少动态效果」：直接不渲染动画层。 */
html[data-theme="scifi"] body { background: var(--page-glow) var(--bg); }
html[data-theme="scifi"] .app-shell { background: none; }

html[data-theme="scifi"] .aura {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
html[data-theme="scifi"] .aura i { position: absolute; display: block; will-change: transform, opacity; }

/* ① 扫光带：一条斜的青光，16s 从左扫到右 */
html[data-theme="scifi"] .aura i:nth-child(1) {
  top: -30%;
  left: 0;
  width: 38vw;
  height: 160vh;
  opacity: 0;
  animation: mf-aura-sweep 16s linear infinite;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 9%, transparent) 32%,
    color-mix(in oklab, var(--accent) 20%, transparent) 50%,
    color-mix(in oklab, var(--accent) 9%, transparent) 68%,
    transparent 100%);
}

/* ②③ 光波环：右上品红、左下青，9s 一轮、错开半轮 */
html[data-theme="scifi"] .aura i:nth-child(2),
html[data-theme="scifi"] .aura i:nth-child(3) {
  /* 52vmax = 52% × 较长边（1280×720 上是 665px），margin 取负半径把 top/left 变成圆心 */
  width: 52vmax;
  height: 52vmax;
  margin: -26vmax 0 0 -26vmax;
  border-radius: 50%;
  opacity: 0;
  animation: mf-aura-ring 9s cubic-bezier(.2, 0, .3, 1) infinite;
}
html[data-theme="scifi"] .aura i:nth-child(2) {
  top: 6%;
  left: 88%;
  background: radial-gradient(circle,
    transparent 52%,
    color-mix(in oklab, var(--accent-2) 10%, transparent) 64%,
    color-mix(in oklab, var(--accent-2) 34%, transparent) 76%,
    color-mix(in oklab, var(--accent-2) 10%, transparent) 88%,
    transparent 100%);
}
html[data-theme="scifi"] .aura i:nth-child(3) {
  top: 92%;
  left: 8%;
  animation-delay: 4.5s;
  background: radial-gradient(circle,
    transparent 52%,
    color-mix(in oklab, var(--accent) 8%, transparent) 64%,
    color-mix(in oklab, var(--accent) 28%, transparent) 76%,
    color-mix(in oklab, var(--accent) 8%, transparent) 88%,
    transparent 100%);
}

@keyframes mf-aura-sweep {
  0%   { transform: rotate(14deg) translateX(-60vw); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: rotate(14deg) translateX(140vw); opacity: 0; }
}
@keyframes mf-aura-ring {
  0%   { transform: scale(.3); opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* ─── 清新皮肤的光波层：荷叶水波（同一份 DOM，浅色口径另写一套）────────
   浅底上不能照搬科幻那套：screen 混合在浅底上只会把画面推成白，等于没有；
   所以这里不能照搬科幻的 alpha 数值，而要按「近白底上 multiply(c) ≡ 普通叠加 b·c」
   重新取一档更淡的薄荷色 —— 观感一样，但省掉整个混合模式的合成开销（实测见上）。
   水由两层构成，都不需要任何图片、也不用 filter: blur：
   ① 水面波光（.wl-a / .wl-b）：两张不同尺度的光斑格铺满整屏、反向漂移，
      错位处互相干涉 —— 这是「水在动」的主体；平移量正好等于格子边长，所以循环无缝；
   ② 涟漪（.rp）：三处落点，每处三圈错相扩散（一轮 10.5s，圈间隔 3.5s）。
      落点全压在页面上下边缘 —— 那里是顶栏（82% 底色 + backdrop blur）和页脚留白，
      水面从边缘荡开最容易看见；页面中段大片被卡片盖住，属于既成布局，不硬改。
   只动 transform / opacity；同样不给 .app-main 加 z-index（理由见上面科幻那段）。 */
html[data-theme="fresh"] body { background: var(--page-glow) var(--bg); }
html[data-theme="fresh"] .app-shell { background: none; }

html[data-theme="fresh"] .aura {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
html[data-theme="fresh"] .aura i,
html[data-theme="fresh"] .aura b { position: absolute; display: block; will-change: transform, opacity; }

/* ① 水面波光：画布铺成两倍大，平移「一个格子边长」后图形接回原位（所以看不见接缝）。
   两条硬约束（踩过一次：把画布改小到 170% 后，纵向平移 396px 时底部会露 144px 空白）：
     a) 平移量必须 = 格子边长，否则循环处会有跳变；
     b) 画布尺寸 ≥ 视口 + 2×平移量。
   于是两个格子的边长都取 ≤ 320px（320 时纵向需 720+640=1360 ≤ 1440 ✓），
   画布保持 200%、偏移 -50% 把 top/left 变成中心。 */
html[data-theme="fresh"] .aura .wl { top: -50%; left: -50%; width: 200%; height: 200%; }
html[data-theme="fresh"] .aura .wl-a {
  opacity: .9;
  animation: mf-aura-water-a 30s linear infinite;
  background-size: 240px 240px;
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--accent) 13%, transparent) 0 9%,
    color-mix(in oklab, var(--accent) 6%, transparent) 24%,
    transparent 50%);
}
html[data-theme="fresh"] .aura .wl-b {
  opacity: .7;
  animation: mf-aura-water-b 44s linear infinite reverse;
  background-size: 320px 320px;
  background-position: 100px 100px;
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--accent-2) 11%, transparent) 0 7%,
    color-mix(in oklab, var(--accent-2) 5%, transparent) 20%,
    transparent 44%);
}

/* ② 涟漪：外圈一道较亮的边 + 内圈更弱的一道，像水面刚被点了一下 */
html[data-theme="fresh"] .aura .rp {
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  opacity: 0;
  animation: mf-aura-ripple 10.5s cubic-bezier(.22, .08, .3, 1) infinite;
  background:
    radial-gradient(circle,
      transparent 0 64%,
      color-mix(in oklab, var(--accent) 26%, transparent) 71%,
      transparent 79%),
    radial-gradient(circle,
      transparent 0 46%,
      color-mix(in oklab, var(--accent) 10%, transparent) 54%,
      transparent 64%);
}
/* 五个落点：上下边缘各两个（那里是顶栏 82% 底色 + 页脚留白，水面从边缘荡开最显眼），
   外加 y≈64% 那条横贯左半屏的留白带（见设计文档：首页卡片排布在这里有一整条空档） */
html[data-theme="fresh"] .aura .rp-a { left: 26%; top: 1%; }
html[data-theme="fresh"] .aura .rp-b { left: 50%; top: 99%; }
html[data-theme="fresh"] .aura .rp-c { left: 82%; top: 1%; }
html[data-theme="fresh"] .aura .rp-d { left: 22%; top: 64%; }
html[data-theme="fresh"] .aura .rp-e { left: 56%; top: 66%; }
/* 每处落点两圈、错开半轮（nth-of-type 只数 i，不受前面的 b 影响；
   两个 i 一组 = 一个落点，所以后一圈是 2/4/6/8/10）。每轮 10.5s、圈间隔 5.25s，
   五处落点交错 => 全页平均一秒就有一圈在某处扩散。 */
html[data-theme="fresh"] .aura i:nth-of-type(2),
html[data-theme="fresh"] .aura i:nth-of-type(4),
html[data-theme="fresh"] .aura i:nth-of-type(6),
html[data-theme="fresh"] .aura i:nth-of-type(8),
html[data-theme="fresh"] .aura i:nth-of-type(10) { animation-delay: 5.25s; }

@keyframes mf-aura-water-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-240px, -240px, 0); }
}
@keyframes mf-aura-water-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-320px, -320px, 0); }
}
@keyframes mf-aura-ripple {
  0%   { transform: scale(.16); opacity: 0; }
  14%  { opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="scifi"] .aura,
  html[data-theme="fresh"] .aura { display: none; }
}

/* ─── Reset & 基础 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg-2);
  font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }

/* 但 **AppIcon 是行内图标**，不能跟着变块级：块级化的 <svg> 会把「图标 + 文字」断成两行 ——
   真机表现就是设置页卡片标题「默认文生图模型」的图标独占一行、文字掉到下一行（一眼看着像串行）。
   判据只有这一处（别在各页面各写一份 display:inline-block）：
   · flex / grid 子项会被块级化，所以这条对「图标在按钮 / 卡片里」的场景没有任何影响；
   · 只影响「图标夹在文字流里」的场景 —— 正是要修的。
   vertical-align 用 em 而不是 px：同一处图标会按 size 传 15 / 22 / 26，em 才能跟着字号走。 */
.app-ico { display: inline-block; vertical-align: -0.16em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--fg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
/* 滑块原先是 --border-hover（#2a2a3a 压在 #0f0f1a 上，对比度约 1.6:1），加上 2px 的底色描边
   实际只剩 6px 宽，深色皮肤下基本看不见 —— 列表滚不动时用户会以为「没有滚动条」。
   换成 --muted-2（三套皮肤都有定义），悬停再亮一档。 */
::-webkit-scrollbar-thumb { background: var(--muted-2); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--muted-2) 70%, var(--fg)); }
::-webkit-scrollbar-track { background: transparent; }

/* ─── 布局原语 ─────────────────────────────────────────────── */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.page { padding-block: var(--space-5); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-sm)), 1fr)); gap: var(--space-4); }
.main-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-min), var(--sidebar-max)); gap: var(--space-5); align-items: start; }
.workbench-split { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.rule { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-4) 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-title { font-size: var(--text-h2); color: var(--fg); }
.section-sub { font-size: var(--text-caption); color: var(--muted); }

/* ─── 顶栏 ─────────────────────────────────────────────────── */
.topnav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); -webkit-app-region: drag; }
.topnav-inner { display: flex; align-items: center; gap: var(--space-5); height: var(--topnav-h); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--fg); font-size: var(--text-h4); }
.brand-mark { width: 28px; height: 28px; border-radius: var(--radius-lg); background: var(--grad-logo); display: grid; place-items: center; font-size: 15px; line-height: 1; box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); flex-shrink: 0;
  /* 记号是 stroke=currentColor 的线性图标，颜色不能靠背景 —— 六套皮肤的 --grad-logo 明暗差很多
     （黑金/石墨银/科幻/机甲是浅底，紫夜/清新是中间调），一律交给 --on-accent 跟着皮肤走。 */
  color: var(--on-accent); }
.topnav-nav { display: flex; gap: var(--space-1); margin-left: var(--space-2); }
.topnav-nav a { padding: 6px 10px; border-radius: var(--radius-lg); color: var(--muted); font-size: var(--text-body); font-weight: 500; transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.topnav-nav a:hover { color: var(--fg); background: var(--surface-3); }
.topnav-nav a.active { color: var(--fg); background: var(--surface-3); }
.topnav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.topnav-pro { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--grad-pro); color: var(--fg); font-size: var(--text-caption); font-weight: 600; border: 1px solid color-mix(in oklab, var(--accent-2) 45%, transparent); }
.topnav-pro:hover { filter: brightness(1.15); }

/* ─── 皮肤切换（顶栏右上角）────────────────────────────────── */
.skin-switch { position: relative; display: inline-flex; }
.skin-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 238px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: rise var(--motion-fast) var(--ease); }
.skin-menu-title { padding: 6px 8px 8px; font-size: var(--text-xs); letter-spacing: .1em; color: var(--muted-2); }
.skin-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; text-align: left; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.skin-opt:hover { background: var(--surface-3); border-color: var(--border-soft); }
.skin-opt.on { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 42%, transparent); }
.skin-dots { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.skin-dots i { display: block; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 18%, transparent); }
.skin-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.skin-text b { font-size: var(--text-caption); font-weight: 600; color: var(--fg); }
.skin-text em { font-style: normal; font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-sep { height: 1px; margin: 6px 4px; background: var(--border-soft); }
/* 背景动效开关：默认关，用户自己开（无动效的皮肤下整行不渲染） */
.motion-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; text-align: left; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.motion-row:hover { background: var(--surface-3); border-color: var(--border-soft); }
.motion-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.motion-text b { font-size: var(--text-caption); font-weight: 600; color: var(--fg); }
.motion-text em { font-style: normal; font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.motion-switch { flex: 0 0 auto; position: relative; width: 34px; height: 18px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
.motion-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted-2); transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.motion-switch.on { background: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent); }
.motion-switch.on i { transform: translateX(16px); background: var(--accent); }
.skin-check { margin-left: auto; color: var(--accent); font-size: var(--text-caption); }


/* 无边框窗口：顶栏可拖动，交互元素与窗口控制按钮除外 */
.topnav a,
.topnav button,
.topnav .topnav-actions,
.topnav .badge,
.topnav .avatar {
  -webkit-app-region: no-drag;
}
.window-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-soft);
}
.window-controls .win-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.window-controls .win-btn:hover {
  color: var(--fg);
  background: var(--surface-3);
  border-color: var(--border-hover);
}
.window-controls .win-close:hover {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

/* ─── 按钮（8.1 / 10.2）────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-xl); padding: 8px 18px; font-size: var(--text-body);
  font-weight: 600; border: 1px solid transparent; white-space: nowrap;
  transition: filter var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.1); }
/* 次级按钮的**面子**必须是皮肤色。原先只用 --surface-2 打底：五个深色皮肤的 --surface-2
   正好全落在 #070b14 ~ #0f0f1a 这一档（近黑），整套皮肤只靠一圈 1px 边框挂色相 ——
   真机上用户实报「模板管理 / 风格管理 / GPU 节点池这几个按钮，几个皮肤下都一样」。
   掺 --accent 9% 进来（oklab 混色）：色相一眼能读出来，又不会把满屏工具栏刷成彩色；
   边框同步掺 26%，让面子和边框同族、不同深浅（清新那套浅底也是同理，掺完是极淡的薄荷）。
   悬停态跟着 accent 走，不再跳到中性灰。 */
.btn-secondary {
  background: color-mix(in oklab, var(--accent) 9%, var(--surface-2));
  border-color: color-mix(in oklab, var(--accent) 26%, var(--border-hover));
  color: var(--fg-2);
}
.btn-secondary:hover {
  border-color: color-mix(in oklab, var(--accent) 44%, var(--border-hover));
  background: color-mix(in oklab, var(--accent) 14%, var(--surface-3));
}
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--fg); background: var(--surface-3); }
.btn-purple { background: var(--accent-2); color: var(--on-accent); }
.btn-purple:hover { filter: brightness(1.1); }
.btn-teal { background: var(--teal); color: var(--on-teal); }
.btn-teal:hover { filter: brightness(1.08); }
.btn-danger-ghost { background: transparent; color: var(--red); }
.btn-danger-ghost:hover { background: color-mix(in oklab, var(--red) 12%, transparent); }
.btn-sm { padding: 6px 12px; font-size: var(--text-caption); border-radius: var(--radius-lg); }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-lg); background: var(--surface-3); border: 1px solid var(--border-hover); color: var(--muted); display: inline-grid; place-items: center; }
.btn-icon:hover { color: var(--fg); border-color: var(--border-strong); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .spin { width: 13px; height: 13px; border: 2px solid color-mix(in oklab, var(--on-accent) 38%, transparent); border-top-color: var(--on-accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── 徽章 / 标签（8.4 / 3.4）──────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent);
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.plain::before { display: none; }
.badge-indigo { background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent); }
.badge-purple { background: color-mix(in oklab, var(--accent-2) 12%, transparent); color: var(--accent-2); }
.badge-pink { background: color-mix(in oklab, var(--pink) 12%, transparent); color: var(--pink); }
.badge-amber { background: color-mix(in oklab, var(--amber) 12%, transparent); color: var(--amber); }
.badge-teal { background: color-mix(in oklab, var(--teal) 12%, transparent); color: var(--teal); }
.badge-red { background: color-mix(in oklab, var(--red) 12%, transparent); color: var(--red); }
.badge-green { background: color-mix(in oklab, var(--green) 12%, transparent); color: var(--green); }
.badge-muted { background: var(--surface-3); color: var(--muted); }

/* ─── 筛选标签 / 上下文芯片 ────────────────────────────────── */
.chip {
  /* inline-flex：标签里可以放线性图标（跟随 currentColor / 皮肤） */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: var(--text-caption); font-weight: 500;
  transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--border-hover); }
.chip.active { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 55%, transparent); color: var(--fg); }
.ctx-chip { font-size: var(--text-xs); padding: 3px 8px; border-radius: var(--radius-full); background: var(--surface-3); color: var(--muted); border: 1px solid var(--border-soft); white-space: nowrap; }

/* ─── 卡片（8.2）───────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-4xl); padding: var(--space-5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-title { font-size: var(--text-h3); font-weight: 700; color: var(--fg); }
.card-sub { font-size: var(--text-caption); color: var(--muted); }

/* 入口卡片（9.1 / 8.2） */
/* auto-fit 而不是写死 3 列：加了「短剧剧本」这张卡后 4 张能均分一整行，
   以后再加一种创作类型也不用回来改这里 */
.entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
.entry-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
  padding: var(--space-5); border-radius: var(--radius-3xl);
  /* 卡片浮在 Hero 面板之上：用比面板（surface-2）更亮的 surface-3 叠主题光晕，避免出现「黑洞」 */
  background: var(--grad-hero), var(--surface-3);
  border: 1px solid var(--border-hover);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent);
  transition: transform var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), background var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.entry-card:hover {
  transform: translateY(-2px);
  background: var(--grad-hero), color-mix(in oklab, var(--accent) 9%, var(--surface-3));
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--fg) 9%, transparent), 0 10px 26px color-mix(in oklab, var(--accent) 16%, transparent);
}
/* 图标底色统一走「主题强调色家族」（紫夜=靛紫 / 黑金=香槟 / 石墨银=冷灰），
   同族三档做区分：避免琥珀、洋红这类跳色在暗色卡片上显脏、也避免换肤后不同步 */
.entry-card .entry-icon { width: 44px; height: 44px; border-radius: var(--radius-xl); display: grid; place-items: center; font-size: 20px; background: color-mix(in oklab, var(--accent) 15%, var(--surface-3)); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); }
.entry-card.idea .entry-icon { background: color-mix(in oklab, var(--accent) 18%, var(--surface-3)); border-color: color-mix(in oklab, var(--accent) 52%, transparent); }
.entry-card.story .entry-icon { background: color-mix(in oklab, var(--accent-2) 15%, var(--surface-3)); border-color: color-mix(in oklab, var(--accent-2) 46%, transparent); }
.entry-card.image .entry-icon { background: color-mix(in oklab, var(--purple) 15%, var(--surface-3)); border-color: color-mix(in oklab, var(--purple) 46%, transparent); }
.entry-card.script .entry-icon { background: color-mix(in oklab, var(--accent) 22%, var(--surface-3)); border-color: color-mix(in oklab, var(--accent) 58%, transparent); }
.entry-card h3 { font-size: var(--text-h3); color: var(--fg); }
.entry-card p { font-size: var(--text-caption); color: var(--muted); }
.entry-arrow { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-caption); display: inline-flex; align-items: center; gap: 4px; }
.entry-card:hover .entry-arrow { color: var(--link-hover); }

/* 项目卡片（8.2） */
.project-card {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-3xl);
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.project-card:hover { border-color: var(--border-strong); background: var(--surface-3); }
.proj-thumb { width: 64px; height: 64px; border-radius: var(--radius-2xl); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; border: 1px solid var(--border); }
.proj-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.proj-title { font-size: var(--text-h4); font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-meta { font-size: var(--text-small); color: var(--muted); display: flex; align-items: center; gap: var(--space-2); }
.proj-foot { display: flex; align-items: center; gap: var(--space-3); }
/* 宽屏下卡内信息列会被拉到 1000px+，进度条固定量级，别跟着卡片一起被抻长 */
.proj-foot .progress { flex: 0 1 240px; }

/* 模板卡片（8.7） */
.template-card {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3);
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-xl);
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.template-card:hover { border-color: color-mix(in oklab, var(--accent) 30%, transparent); background: var(--surface-3); }
.tpl-icon { width: 44px; height: 44px; border-radius: var(--radius-xl); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.tpl-info { min-width: 0; }
.tpl-title { font-size: var(--text-body); font-weight: 600; color: var(--fg-2); }
.tpl-meta { font-size: var(--text-small); color: var(--muted-2); }

/* 场景画面面板（抽象构图） */
.panel-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-cover-blue); }
.panel-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--bg) 72%, transparent)); pointer-events: none; }
.panel-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.5'/></svg>");
}
.panel-art .art-chip { position: absolute; top: 8px; right: 8px; z-index: 2; }
.panel-art .art-badge { position: absolute; bottom: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--bg) 72%, transparent); color: var(--fg-2); font-size: var(--text-xs); font-weight: 600; backdrop-filter: blur(4px); }

/* 画面风格（抽象渐变构图） */
.art-cherry { background: var(--grad-art-cherry); }
.art-sunset { background: var(--grad-art-sunset); }
.art-night { background: var(--grad-art-night); }
.art-rain { background: var(--grad-art-rain); }
.art-hall { background: var(--grad-art-hall); }
.art-abstract { background: var(--grad-cover-purple); }
.art-blue { background: var(--grad-cover-blue); }
.art-orange { background: var(--grad-cover-orange); }

/* 场景卡片 */
.scene-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
.scene-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.scene-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.scene-body { padding: 10px 12px 12px; }
.scene-no { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.scene-caption { font-size: var(--text-caption); color: var(--fg-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.scene-dur { font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }

/* 角色卡片 */
.char-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-4xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 0; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.char-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.char-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.char-head > div { flex: 1; min-width: 0; }
.char-name { font-size: var(--text-h3); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-role { font-size: var(--text-caption); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.char-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.char-tag { font-size: var(--text-xs); padding: 3px 8px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); border-top: 1px solid var(--border-soft); padding-top: var(--space-3); margin-top: auto; }

/* 素材卡片 */
.asset-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.asset-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.asset-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.asset-art .asset-overlay { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 58%, transparent); opacity: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); transition: opacity var(--motion-fast) var(--ease); }
.asset-card:hover .asset-overlay { opacity: 1; }
.asset-body { padding: 10px 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.asset-name { font-size: var(--text-body); font-weight: 600; color: var(--fg-2); }
.asset-meta { font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }

/* ─── 进度条（8.3 / 2.2）───────────────────────────────────── */
.progress { flex: 1; height: 5px; border-radius: 3px; background: var(--border-soft); overflow: hidden; min-width: 0; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--grad-progress); transition: width var(--motion-slow) var(--ease); }
.progress-label { font-size: var(--text-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── 头像（8.5）───────────────────────────────────────────── */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--on-accent); flex-shrink: 0; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-grad-indigo { background: var(--grad-logo); }
.avatar-grad-pink { background: var(--grad-avatar-pink); }
.avatar-grad-teal { background: var(--grad-avatar-teal); }
.avatar-grad-orange { background: var(--grad-cover-orange); }
.avatar-grad-purple { background: var(--grad-cover-purple); }

/* ─── 表单（8.6）───────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-caption); color: var(--muted); font-weight: 500; }
.input, .textarea, .select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-hover); border-radius: var(--radius-xl);
  padding: 10px 14px; color: var(--fg-2); font-size: var(--text-body); font-family: inherit;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2.4'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.search-box { position: relative; }
.search-box .input { padding-left: 34px; }
.search-box svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }

/* ─── 步骤条（2.2 进度可视化）──────────────────────────────── */
.stepper { display: flex; align-items: flex-start; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; cursor: pointer; border: none; background: none; padding: 0; }
.step .step-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border-hover); color: var(--muted); transition: all var(--motion-base) var(--ease); z-index: 1; }
.step .step-label { font-size: var(--text-xs); color: var(--muted-2); transition: color var(--motion-base) var(--ease); }
.step:hover .step-label { color: var(--fg); }
.step.done .step-dot { background: var(--surface-3); border-color: var(--border-strong); color: var(--fg); }
.step.active .step-dot { background: var(--grad-logo); border-color: transparent; color: var(--on-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent); }
.step.active .step-label { color: var(--fg); font-weight: 600; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 19px); width: calc(100% - 38px); height: 2px; background: var(--border-soft); }
.step.done:not(:last-child)::after { background: var(--grad-progress); }

/* ─── 页签 ─────────────────────────────────────────────────── */
.tab-bar { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-5); }
.tab { padding: 9px 14px; font-size: var(--text-body); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; background: none; border-top: none; border-left: none; border-right: none; transition: color var(--motion-fast) var(--ease); }
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.tab .count { color: var(--muted-2); margin-left: 4px; font-size: var(--text-xs); font-family: var(--font-mono); }

/* ─── 弹层 / 抽屉 ──────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8,8,14,.62); backdrop-filter: blur(3px); z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 56px 16px; overflow-y: auto; }
.modal-backdrop.open { display: flex; }
.modal { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-4xl); padding: var(--space-6); box-shadow: 0 16px 48px rgba(0,0,0,.5); animation: rise var(--motion-base) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.modal-title { font-size: var(--text-h2); color: var(--fg); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(8,8,14,.5); z-index: 99; display: none; }
.drawer-backdrop.open { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 100; transform: translateX(100%); transition: transform var(--motion-base) var(--ease); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border-soft); }
.drawer-body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.drawer-foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-soft); display: flex; gap: var(--space-2); }

/* ─── 开关 / 分段 / 列表行 / 设置行 ────────────────────────── */
.switch { position: relative; width: 38px; height: 22px; border-radius: var(--radius-full); background: var(--surface-3); border: 1px solid var(--border-hover); transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); flex-shrink: 0; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: left var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on::after { left: 18px; background: var(--on-accent); }
.segmented { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 4px; }
.segmented button { flex: 1; padding: 7px 10px; border-radius: var(--radius-lg); font-size: var(--text-caption); font-weight: 600; color: var(--muted); background: transparent; border: none; transition: all var(--motion-fast) var(--ease); }
.segmented button.active { background: var(--surface-3); color: var(--fg); box-shadow: 0 0 0 1px var(--border-hover); }
.list-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.list-row:last-child { border-bottom: none; }
.list-row .row-icon { width: 36px; height: 36px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border-soft); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--fg-2); flex-shrink: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: var(--text-body); color: var(--fg-2); }
.setting-hint { font-size: var(--text-xs); color: var(--muted-2); margin-top: 1px; }

/* ─── 聊天（工作台内嵌助手）───────────────────────────────── */
.chat-thread { display: flex; flex-direction: column; gap: var(--space-3); max-height: 320px; overflow-y: auto; padding-right: 2px; }
.msg { max-width: 94%; padding: 9px 12px; border-radius: var(--radius-2xl); font-size: var(--text-body); line-height: 1.55; }
.msg.ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--fg-2); border-bottom-left-radius: var(--radius-sm); }
.msg.user { align-self: flex-end; background: color-mix(in oklab, var(--accent) 84%, var(--bg)); color: var(--on-accent); border-bottom-right-radius: var(--radius-sm); }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.chat-input { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.quick-chips button { font-size: var(--text-xs); padding: 5px 10px; border-radius: var(--radius-full); border: 1px solid var(--border-hover); background: var(--surface-2); color: var(--muted); transition: all var(--motion-fast) var(--ease); }
.quick-chips button:hover { color: var(--fg); border-color: var(--accent); }

/* ─── 空状态 / 骨架屏 / Toast ──────────────────────────────── */
.empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--muted); }
.empty-state .empty-icon { width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: var(--radius-4xl); background: var(--surface-2); border: 1px dashed var(--border-hover); display: grid; place-items: center; font-size: 26px; }
.empty-state h3 { font-size: var(--text-h4); color: var(--fg-2); margin-bottom: 4px; }
.empty-state p { font-size: var(--text-caption); }
.skeleton { background: linear-gradient(100deg, var(--border-soft) 30%, var(--surface-3) 50%, var(--border-soft) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--surface-3); border: 1px solid var(--border-hover); color: var(--fg); padding: 10px 18px; border-radius: var(--radius-xl); font-size: var(--text-body); opacity: 0; pointer-events: none; transition: all var(--motion-base) var(--ease); z-index: 300; display: flex; gap: 8px; align-items: center; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Hero / 封面横幅 ──────────────────────────────────────── */
.hero-panel { border-radius: var(--radius-5xl); background: var(--grad-hero), var(--surface-2); border: 1px solid var(--border-soft); padding: var(--space-7); }
.hero-panel .hero-title { font-size: var(--text-hero); font-weight: 700; color: var(--fg); }
.hero-panel .hero-sub { font-size: var(--text-body); color: var(--muted); margin-top: 4px; }
.cover-banner { position: relative; border-radius: var(--radius-5xl); overflow: hidden; border: 1px solid var(--border); }
.cover-banner .cover-body { position: absolute; left: var(--space-5); bottom: var(--space-5); right: var(--space-5); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }

/* ─── 小贴士（渐变边框绿）─────────────────────────────────── */
.tip-card { border-color: color-mix(in oklab, var(--green) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in oklab, var(--green) 6%, var(--surface)), var(--surface)); }
.tip-card .card-title { color: var(--fg); }

/* ─── index 总览页 ─────────────────────────────────────────── */
.screen-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-4xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.screen-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.screen-card .screen-desc { font-size: var(--text-caption); color: var(--muted); }
.mini { position: relative; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--bg); aspect-ratio: 16 / 10; display: flex; flex-direction: column; }
.mini .mini-top { height: 26px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 5px; padding: 0 10px; flex-shrink: 0; }
.mini .mini-top i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-hover); }
.mini .mini-hero { margin: 8px 8px 6px; border-radius: 8px; background: var(--grad-hero), var(--surface-2); border: 1px solid var(--border-soft); flex: 1; position: relative; }
.mini .mini-hero i { position: absolute; bottom: 6px; left: 6px; right: 6px; height: 7px; border-radius: 3px; background: var(--surface-3); border: 1px solid var(--border-soft); }
.mini .mini-row { display: flex; gap: 6px; padding: 0 8px 8px; flex-shrink: 0; }
.mini .mini-row i { flex: 1; height: 14px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border-soft); }
.flow-strip { display: flex; align-items: stretch; gap: var(--space-2); flex-wrap: wrap; }
.flow-step { flex: 1; min-width: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-4); text-align: center; }
.flow-step b { display: block; font-size: var(--text-h4); color: var(--fg); margin-bottom: 2px; }
.flow-step span { font-size: var(--text-xs); color: var(--muted); }
.flow-arrow { align-self: center; color: var(--muted-2); font-size: var(--text-h3); padding: 0 2px; }

/* ─── 响应式（9.3）—— 向上分档：宽屏才放宽内容列 ────────────── */
@media (min-width: 1600px) { :root { --container-max: 1440px; --page-gutter: 32px; } }
@media (min-width: 1920px) { :root { --container-max: 1680px; --page-gutter: 40px; --sidebar-max: 380px; } }
@media (min-width: 2560px) { :root { --container-max: 2000px; --page-gutter: 56px; --sidebar-max: 400px; } }
/* 超宽屏（内容列 1440px+）：入口卡被撑成又宽又扁、内容孤零零居中；改横向「图标 + 文案 + 箭头」撑满卡片 */
@media (min-width: 1600px) {
  .entry-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title arrow"
      "icon desc arrow";
    align-items: center;
    column-gap: var(--space-4);
    row-gap: 3px;
    text-align: left;
    padding: var(--space-4) var(--space-6);
  }
  .entry-card .entry-icon { grid-area: icon; }
  .entry-card h3 { grid-area: title; }
  .entry-card p { grid-area: desc; }
  .entry-card .entry-arrow { grid-area: arrow; margin-top: 0; white-space: nowrap; }
}
@media (max-width: 1200px) {
  .workbench-split { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  :root { --page-gutter: 20px; }
  .main-split { grid-template-columns: 1fr; }
  .workbench-split { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .topnav-nav { display: none; }
}
@media (max-width: 640px) {
  :root { --page-gutter: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: 1fr; }
  .hero-panel { padding: var(--space-5); }
  .cover-banner .cover-body { left: var(--space-4); bottom: var(--space-4); right: var(--space-4); flex-direction: column; align-items: flex-start; }
  .hide-sm { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   创作起点入口页（opendesign_prompt_entry_workflows.md v1.0）
   引用：screens/entry-idea.html · entry-story.html · entry-image.html
   前缀 ew- 避免与既有组件冲突；复用 .switch/.modal/.toast 等既有组件
   ════════════════════════════════════════════════════════════════ */
:root {
  /* 提交按钮渐变（文档 2.6：模块语义色 — 琥珀=故事入口 / 粉=图片创作） */
  --grad-submit-idea: linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-submit-story: linear-gradient(135deg, var(--amber), var(--red));
  --grad-submit-image: linear-gradient(135deg, var(--pink), var(--amber));
}

.ew-page { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; animation: ew-fade .3s ease; }

.ew-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 24px; }
.ew-header .logo { font-size: var(--text-h3); }
.ew-header .logo-sub { font-size: var(--text-xs); color: var(--muted-2); margin-left: 2px; }
.ew-close { width: 38px; height: 38px; border-radius: var(--radius-xl); border: 1px solid transparent; background: none; color: var(--muted); font-size: 17px; display: grid; place-items: center; transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.ew-close:hover { color: var(--fg-2); background: var(--surface-3); border-color: var(--border-soft); }

.ew-main { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 8px var(--page-gutter) 64px; flex: 1; min-height: 0; overflow-y: auto; }

.ew-title { text-align: center; margin-bottom: 28px; }
.ew-title .ew-icon { font-size: 30px; line-height: 1; margin-bottom: 10px; display: block; }
.ew-title h1 { font-size: var(--text-hero); font-weight: 700; color: var(--fg); }
.ew-title p { font-size: var(--text-body); color: var(--muted); margin-top: 6px; }

.ew-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.ew-step { display: inline-flex; align-items: center; gap: 6px; }
.ew-step .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.ew-step .name { font-size: var(--text-caption); white-space: nowrap; }
.ew-step.on .num { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.ew-step.on .name { color: var(--link-hover); font-weight: 600; }
.ew-step.off .num { background: var(--surface-2); border: 1px solid var(--border-hover); color: var(--muted-2); }
.ew-step.off .name { color: var(--muted-2); }
.ew-link { width: 40px; height: 2px; border-radius: 1px; background: var(--border); flex-shrink: 0; }

.ew-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-4xl); padding: var(--space-6); margin-bottom: 20px; }
.ew-card-title { font-size: var(--text-small); font-weight: 600; color: var(--muted); margin-bottom: 14px; letter-spacing: .02em; }

.ew-textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border-hover); border-radius: var(--radius-2xl); padding: 16px; color: var(--fg-2); font-size: var(--text-body); font-family: inherit; line-height: 1.7; resize: none; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
.ew-textarea::placeholder { color: var(--muted-2); }
.ew-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.ew-textarea.tall { min-height: 280px; }
.ew-textarea.err { border-color: var(--red); }
.ew-counter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 8px; font-size: var(--text-small); color: var(--muted-2); }
.ew-counter .over { color: var(--red); }
.ew-hint { font-size: var(--text-xs); color: var(--red); margin-top: 6px; display: none; }
.ew-hint.show { display: block; }

.ew-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ew-pill { padding: 8px 14px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border-hover); color: var(--muted); font-size: var(--text-caption); transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.ew-pill:hover { color: var(--fg-2); border-color: var(--border-strong); }
.ew-pill.active { background: color-mix(in oklab, var(--accent) 15%, transparent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--link-hover); }
.ew-pill.sm { padding: 5px 12px; font-size: var(--text-small); }

.ew-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ew-group-label { font-size: var(--text-small); color: var(--muted); margin-bottom: 8px; display: block; }

.ew-tabs { display: flex; gap: 2px; width: fit-content; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 4px; margin-bottom: 16px; }
.ew-tabs button { padding: 8px 20px; border-radius: var(--radius-lg); font-size: var(--text-caption); font-weight: 500; color: var(--muted); background: none; border: none; transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.ew-tabs button:hover { color: var(--fg-2); }
.ew-tabs button.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.ew-pane { display: none; }
.ew-pane.open { display: block; animation: ew-fade var(--motion-base) var(--ease); }
@keyframes ew-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ew-upload { border: 2px dashed var(--border-hover); background: var(--surface); border-radius: var(--radius-4xl); padding: 48px 24px; text-align: center; cursor: pointer; transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.ew-upload:hover { border-color: var(--border-strong); }
.ew-upload.drag { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 5%, transparent); }
.ew-upload.err { border-color: var(--red); }
.ew-upload .up-icon { font-size: 46px; line-height: 1; margin-bottom: 12px; display: block; }
.ew-upload .up-main { font-size: var(--text-h4); font-weight: 600; color: var(--fg-2); }
.ew-upload .up-sub { font-size: var(--text-caption); color: var(--muted-2); margin-top: 6px; }
.ew-upload .up-btn { margin-top: 14px; }

.ew-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.ew-or::before, .ew-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ew-or span { font-size: var(--text-caption); color: var(--muted); white-space: nowrap; }
.ew-library { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ew-lib-card { aspect-ratio: 1; border-radius: var(--radius-xl); background: var(--surface-2); border: 2px solid transparent; display: grid; place-items: center; font-size: 28px; cursor: pointer; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.ew-lib-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ew-lib-card.active { border-color: var(--accent); }

.ew-file { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border-hover); border-radius: var(--radius-2xl); padding: 12px 14px; }
.ew-file .f-icon { width: 38px; height: 38px; border-radius: var(--radius-xl); background: var(--surface-3); border: 1px solid var(--border-soft); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.ew-file .f-info { min-width: 0; flex: 1; }
.ew-file .f-name { font-size: var(--text-body); font-weight: 600; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-file .f-meta { font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }
.ew-file .f-del { background: none; border: none; color: var(--muted); font-size: 15px; padding: 6px; border-radius: var(--radius-lg); flex-shrink: 0; }
.ew-file .f-del:hover { color: var(--red); background: color-mix(in oklab, var(--red) 10%, transparent); }

.ew-recog { display: flex; gap: 16px; align-items: flex-start; }
.ew-recog .recog-thumb { width: 100px; height: 100px; border-radius: var(--radius-xl); overflow: hidden; flex-shrink: 0; border: 1px solid var(--border-hover); background: var(--grad-cover-purple); display: grid; place-items: center; }
.ew-recog .recog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ew-recog .recog-body { flex: 1; min-width: 0; }
.ew-recog .recog-title { font-size: var(--text-caption); font-weight: 600; color: var(--link-hover); }
.ew-recog .recog-desc { font-size: var(--text-body); color: var(--fg-2); line-height: 1.6; margin-top: 4px; }
.ew-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ew-tag { font-size: var(--text-xs); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--muted); }
.ew-tag.hot { background: color-mix(in oklab, var(--accent) 12%, transparent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--link-hover); }
.ew-recog .ew-field { margin-top: 14px; }

.ew-radio-list { display: flex; flex-direction: column; gap: 10px; }
.ew-radio-item { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--radius-2xl); background: var(--surface-2); border: 1px solid var(--border-hover); cursor: pointer; transition: background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease); }
.ew-radio-item:hover { border-color: var(--border-strong); }
.ew-radio-item.active { background: color-mix(in oklab, var(--accent) 8%, transparent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.ew-radio { width: 18px; height: 18px; border: 2px solid var(--border-hover); border-radius: 50%; position: relative; flex-shrink: 0; margin-top: 2px; transition: border-color var(--motion-base) var(--ease); }
.ew-radio-item.active .ew-radio { border-color: var(--accent); }
.ew-radio-item.active .ew-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.ew-radio-main { font-size: var(--text-body); font-weight: 600; color: var(--fg-2); }
.ew-radio-sub { font-size: var(--text-small); color: var(--muted); margin-top: 2px; line-height: 1.5; }

.ew-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-2xl); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); font-size: var(--text-body); color: var(--fg-2); line-height: 1.55; margin-bottom: 20px; }
.ew-link-row { display: flex; gap: 10px; }
.ew-link-row .input { flex: 1; min-width: 0; }

.ew-submit { width: 100%; padding: 14px; border: none; border-radius: var(--radius-2xl); font-size: var(--text-h4); font-weight: 700; color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease); }
.ew-submit:hover { filter: brightness(1.08); }
.ew-submit:active { transform: scale(.98); }
.ew-submit:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.ew-submit.idea { background: var(--grad-submit-idea); }
.ew-submit.story { background: var(--grad-submit-story); }
.ew-submit.image { background: var(--grad-submit-image); }

.ew-loading { position: fixed; inset: 0; z-index: 100; background: color-mix(in oklab, var(--bg) 95%, transparent); display: none; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); text-align: center; }
.ew-loading.open { display: flex; animation: ew-fade var(--motion-base) var(--ease); }
.ew-spinner { width: 64px; height: 64px; border: 3px solid var(--border-hover); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; }
.ew-loading h2 { font-size: 16px; font-weight: 700; color: var(--fg); }
.ew-loading-sub { font-size: var(--text-body); color: var(--muted); margin-top: 6px; }
.ew-bar { width: min(320px, 84vw); height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 24px; }
.ew-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--grad-progress); transition: width .3s ease-in-out; }
.ew-meta { font-size: var(--text-caption); color: var(--muted-2); margin-top: 12px; font-variant-numeric: tabular-nums; }

.ew-pill:focus-visible, .ew-tabs button:focus-visible, .ew-close:focus-visible, .ew-lib-card:focus-visible, .ew-radio-item:focus-visible, .ew-submit:focus-visible, .ew-file .f-del:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 640px) {
  .ew-header { padding: 16px; }
  .ew-main { padding: 4px 16px 40px; }
  .ew-grid-2 { grid-template-columns: 1fr; }
  .ew-library { grid-template-columns: repeat(2, 1fr); }
  .ew-upload { padding: 36px 16px; }
  .ew-recog { flex-direction: column; }
  .ew-recog .recog-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .ew-steps { gap: 6px; }
  .ew-link { width: 24px; }
  .ew-tabs { width: 100%; }
  .ew-tabs button { flex: 1; padding: 8px 10px; }
}

/* ─── 登录 / 授权（docs/软件授权与登录-设计方案.md）────────────────────
   页面本身只用既有原语（.card / .field / .input / .tab-bar / .btn / .badge / .grid-3），
   这里只补「授权特有的那一层」：等级徽标、权益表、机器码、顶栏用户区。
   注意：顶栏那几个入口是「可见但上锁」（灰掉 + 锁形图标），不是直接隐藏 ——
   隐藏等于用户不知道差什么，上锁才带得出「去激活」这一步。 */

.login-wrap { display: flex; flex-direction: column; gap: var(--space-5); max-width: 1080px; }
.login-head { display: flex; flex-direction: column; gap: 6px; }
.login-title { font-size: var(--text-hero); font-weight: 700; color: var(--fg); }
.login-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.15fr); gap: var(--space-5); align-items: start; }
.login-form { gap: var(--space-3); }
.login-actions { margin-top: var(--space-2); }
.login-note { font-size: var(--text-caption); color: var(--muted); line-height: 1.6; }
.login-foot { margin-top: var(--space-2); }
.login-details { border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 10px 12px; background: var(--surface-2); }
.login-details summary { cursor: pointer; font-size: var(--text-caption); color: var(--muted); }
.login-details > .field, .login-details > .row { margin-top: var(--space-3); }

/* 状态卡：键值对 + 机器码 + 结论提示 */
.login-kv { display: flex; flex-direction: column; gap: 8px; margin: var(--space-3) 0; }
.login-kv > div { display: flex; align-items: center; gap: var(--space-3); }
.login-kv dt { width: 74px; flex: 0 0 auto; font-size: var(--text-caption); color: var(--muted); }
.login-kv dd { margin: 0; font-size: var(--text-body); color: var(--fg-2); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.login-code { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: .04em; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 3px 8px; color: var(--fg); user-select: all; }
.login-msg { margin: 0; padding: 8px 12px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border-soft); font-size: var(--text-caption); color: var(--muted); }
.login-msg.ok { color: var(--green); border-color: color-mix(in oklab, var(--green) 32%, transparent); background: color-mix(in oklab, var(--green) 10%, transparent); }
.login-msg.warn { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 34%, transparent); background: color-mix(in oklab, var(--amber) 10%, transparent); }

/* 等级徽标：颜色只随等级变，不改图标/文字色 —— 换肤时靠皮肤令牌自己合上 */
.tier-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-caption); font-weight: 600; border: 1px solid var(--border-hover); background: var(--surface-3); color: var(--muted); }
.tier-badge.tier-pro { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--accent); }
.tier-badge.tier-vip { background: color-mix(in oklab, var(--amber) 14%, transparent); border-color: color-mix(in oklab, var(--amber) 42%, transparent); color: var(--amber); }

/* 权益表 */
.login-tiers .grid-3 { gap: var(--space-4); }
.tier-col { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-2xl); background: var(--surface-2); }
.tier-col.own { border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 8%, var(--surface-2)); }
.tier-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tier-col-head b { font-size: var(--text-h4); color: var(--fg); }
.tier-perms { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 0; padding: 0; list-style: none; }
.tier-perms li { display: flex; align-items: center; gap: 7px; font-size: var(--text-caption); color: var(--fg-2); }
.tier-perms li.off { color: var(--muted-2); }

/* 顶栏：上锁的入口 + 用户区 */
.topnav-nav .nav-locked { padding: 6px 10px; border-radius: var(--radius-lg); background: none; border: none; color: var(--muted-2); font-size: var(--text-body); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.topnav-nav .nav-locked:hover { color: var(--muted); background: var(--surface-3); }

/* ─── 顶栏分组下拉（导航项多起来之后的解法：一级 ≤6 个，其余进组）─────────────────
   一级只有 5 个：主页 / 创作 / 资产 / 运营 / 系统。11 项平铺时导航自身 816px，
   加 logo 131 + 右侧 223 = 1170px，1280 的容器只剩 110px 余量 —— 再多 3 项就溢出，
   而 .topnav-nav 是 nowrap + shrink，溢出表现是「被压扁」不是换行。分组后一级约 358px。
   摆放口径（谁和谁一组、第 7 个往哪放）写在 core/auth/permissions.ts 的 NAV_GROUPS。 */
.nav-group { position: relative; }
.nav-group-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--radius-lg); background: none; border: none; color: var(--muted); font-size: var(--text-body); font-weight: 500; font-family: inherit; white-space: nowrap; }
.nav-group-btn:hover, .nav-group.open .nav-group-btn { color: var(--fg); background: var(--surface-3); }
.nav-group-btn.active { color: var(--fg); }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* 菜单外面那 8px 是「过桥」用的：按钮与卡片之间必须有间距，但鼠标从按钮走过去不能
   经过 .nav-group 之外 —— 否则 mouseleave 先到、菜单在指针到达前就关了。
   所以间距做成 .nav-menu 的 padding-top（仍算在 group 的命中区里），不是 margin / gap。 */
.nav-menu { position: absolute; top: 100%; left: 0; z-index: 60; padding-top: 8px; }
.nav-menu-body { min-width: 218px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: rise var(--motion-fast) var(--ease); }
.nav-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; color: var(--fg-2); font-size: var(--text-body); font-family: inherit; text-align: left; }
.nav-menu-item:hover { background: var(--surface-3); border-color: var(--border-soft); color: var(--fg); }
.nav-menu-item.active { color: var(--fg); background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 42%, transparent); }
.nav-menu-item .nm-t { flex: 1; }
.nav-menu-item.locked { color: var(--muted-2); }
.nav-menu-item.locked:hover { background: var(--surface-3); color: var(--muted); }
.nav-menu-item .nm-hint { font-size: var(--text-xs); color: var(--muted-2); }

/* 窄屏（≤1024px）把整条导航收进抽屉。原来这里没有任何替代入口：.topnav-nav{display:none}
   一关，页面里就再也点不到别处（只能靠浏览器后退）。抽屉是同一份 NAV_GROUPS 的第二形态。 */
.nav-burger { display: none; }
.nav-drawer { position: absolute; top: calc(100% + 8px); inset-inline: var(--page-gutter); z-index: 60; max-height: min(72vh, 560px); overflow-y: auto; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: rise var(--motion-fast) var(--ease); }
/* 抽屉里 16 条入口排成多列：单列会超出一屏（560px 上限）而出现滚动条，多列一眼看全。*/
.nav-drawer { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); align-content: start; }
.nav-drawer .nav-drawer-title { grid-column: 1 / -1; }
.nav-drawer-title { padding: 8px 9px 4px; font-size: var(--text-xs); letter-spacing: .1em; color: var(--muted-2); }

/* 窄屏：一级导航整体收进汉堡，上面那条 .nav-burger{display:none} 要在这里被盖回来
   —— 媒体查询必须写在基础规则**之后**，否则同权重、后写的赢，汉堡永远不出现。 */
@media (max-width: 1024px) {
  .nav-burger { display: inline-flex; }
  .nav-drawer { top: calc(100% + 4px); }
}
.user-wrap { position: relative; display: inline-flex; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: var(--radius-full); background: var(--surface-3); border: 1px solid var(--border-hover); color: var(--fg-2); }
.user-chip:hover { border-color: var(--border-strong); color: var(--fg); }
.user-chip .avatar { width: 26px; height: 26px; font-size: 11px; }
.user-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 262px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: rise var(--motion-fast) var(--ease); }
.user-menu-head { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.user-menu-head b { font-size: var(--text-body); color: var(--fg); }
.user-menu-head em { font-style: normal; font-size: var(--text-xs); color: var(--muted-2); }
.user-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; text-align: left; color: var(--fg-2); font-size: var(--text-body); font-family: inherit; }
.user-menu-item:hover { background: var(--surface-3); border-color: var(--border-soft); color: var(--fg); }
.user-menu-item.danger { color: var(--red); }

@media (max-width: 1200px) {
  .login-grid { grid-template-columns: 1fr; }
}