/*
 * theme-raycast.css — Dreamina 控制台唯一设计系统来源（"一套 UI"）
 *
 * 一句话：深空暗调 + 单一冰蓝青强调（对齐落地页「显影 · SEEDANCE STUDIO」）。
 * 登录页 / 用户创作台 / 管理台三张脸共用本文件，收敛成同一套 token 与组件原语；
 * 各页 <style> 仅保留页面特有布局。
 *
 * 设计基准：落地页 landing/styles.css（bg #07080B · accent #55D6EA · Space Grotesk
 * 显示字 · JetBrains Mono HUD · 柔阴影 + accent 光晕 · 单一冷调强调、禁满屏高饱和）。
 *
 * 载入约定：必须在 tw-local.css 之后、页面内联 <style> 之前 <link>。
 *   tw-local(工具类+旧色兜底) → theme-raycast(重定义全部 token,兜底永不触发) → 页面 <style>(可覆盖)
 * 依赖自由：EXE 运行期不得联网取样式，本文件零外部引用（字体走本地栈，缺失优雅回退，绝不 fetch）。
 *
 * token 命名覆盖三页历史用名的并集（--panel/--rail/--card2/--fld-bg/--shadow… 全部就位），
 * 让各页既有的 var(--x) 无痛接管冰蓝青暗色值，换皮不破 DOM 契约。
 * 换整套皮 = 改本文件一处，顺手 bump 三页的 ?v=N。
 */

:root {
  /* ── 底色层次（深空暗调，越深越靠里；对齐 landing bg/surface） ─────────── */
  --bg:            #07080B;   /* 页面地：近黑非纯黑 */
  --base:          #04050A;   /* 更深槽：进度条底 / 输入内凹 / 日志框 */
  --panel:         #0E1016;   /* 实心面板：管理台数据卡（密集数据要清晰，不做玻璃） */
  --panel-2:       #151822;   /* 次级实心面板 / 提示条 */
  --card1:         #0E1016;   /* legacy 别名 → panel */
  --card2:         #151822;   /* 内嵌槽：kv 小格 / 表头弱底 */
  --rail:          #090A0F;   /* 侧栏 */
  --fld-bg:        rgba(255,255,255,.035);
  --row-hover:     rgba(255,255,255,.038);

  /* ── 玻璃表面（用户台卡片：透出背景光晕的低透明白） ───────── */
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.07);
  --surface-3:     rgba(255,255,255,.11);

  /* ── 文字阶（不用纯白刺眼；正文近白，标题才最亮；对齐 landing ink 阶） ── */
  --ink:           #F7F9FC;   /* 最高层级：标题 / 关键数字 */
  --soft:          #ECEFF5;   /* 正文 */
  --mut:           #9AA3B4;   /* 次要 */
  --mut2:          #7E8A9C;   /* 三级 / 标签 / 占位（≥4.5:1 达标，功能性小字不用更暗） */
  --rail-ink:      #F7F9FC;
  --rail-mut:      #8891A0;

  /* ── 强调 & 语义色（冰蓝青唯一主强调，其余仅状态语义；禁满屏高饱和） ──── */
  --acc:           #55D6EA;   /* 冰蓝青：logo / 主 CTA / 焦点 / 关键状态 / 数据 */
  --acc2:          #8AE9F7;   /* 高光态 */
  --acc-ink:       #06070A;   /* 冰蓝青实底上的深字（对比达标，不用白字） */
  --primary-soft:  rgba(85,214,234,.13);
  --acc-glow:      rgba(85,214,234,.20);
  --ok:            #5edc9e;
  --warn:          #f2c14e;
  --bad:           #ff6b81;
  --sky:           #5ec2f2;
  --info:          #5ec2f2;

  /* ── 描边（少用、极淡；优先用表面色与留白分区） ───────────── */
  --edge:          rgba(255,255,255,.09);
  --edge2:         rgba(255,255,255,.06);
  --edge-strong:   rgba(255,255,255,.16);
  --line:          #1E222D;   /* landing 低对比实心 hairline（少数确需实线处） */

  /* ── 圆角（两三档到底，全站统一；11/12 双胞胎并入 12） ─────── */
  --radius:        14px;
  --radius-lg:     14px;
  --radius-md:     12px;
  --radius-sm:     8px;
  --radius-full:   999px;

  /* ── 阴影（柔、淡、低；模拟真实光，不用硬黑大阴影；对齐 landing） ─────── */
  --shadow:        0 1px 2px rgba(0,0,0,.5);
  --shadow-panel:  0 24px 60px -24px rgba(0,0,0,.66);
  --shadow-dialog: 0 34px 70px -22px rgba(0,0,0,.8);
  --glow:          0 0 40px var(--acc-glow);

  /* ── 动效缓动 ─────────────────────────────────────────────── */
  --ease:          cubic-bezier(.34,1.56,.64,1);   /* 弹性：hover 抬升 */
  --ease-out:      cubic-bezier(.16,1,.3,1);        /* 收敛：入场（= landing ease-out） */

  /* ── 字体（本地栈，缺失回退，绝不 fetch；显示字对齐 landing Space Grotesk） ── */
  --font-sans:     'Inter','Inter Tight','Segoe UI Variable Text','PingFang SC','Microsoft YaHei UI','Noto Sans SC',system-ui,sans-serif;
  --font-display:  'Space Grotesk','Inter Tight','Inter','Segoe UI Variable Display','PingFang SC','Microsoft YaHei UI',sans-serif;
  --mono:          'JetBrains Mono','SF Mono','Cascadia Code',Consolas,'Courier New',monospace;
  --font-mono:     var(--mono);

  /* ── 字号阶梯（单一来源，三页共用；相邻层级 ≥1.25×，消灭 10/11px 乱数） ──────
   * display 34 → h1 28 → h2 20 → h3 16 → base 15 → sm 13 → xs 12(硬底线)。
   * 28/20=1.4、20/16=1.25 达标;xs 只给「大写+字距」的功能微标签,带 letter-spacing 12px 仍清晰。
   * 移动端(≤640)正文兜到 16px 防 iOS 缩放,见页尾 media。 */
  --fs-display:    34px;   /* KPI 大数字 / 关键计数 */
  --fs-h1:         28px;   /* 页面主标题 */
  --fs-h2:         20px;   /* 分区标题 */
  --fs-h3:         16px;   /* 面板 / 卡片小标题 */
  --fs-base:       15px;   /* 正文 / 表格单元 / 输入 */
  --fs-sm:         13px;   /* 次要文本 / 按钮 / 提示 */
  --fs-xs:         12px;   /* 大写微标签硬底线(kicker/th/lbl/pill) */

  /* ── 行高（标题紧、正文松，对齐红线：标题 1.1~1.3、正文 1.5~1.7） ── */
  --lh-tight:      1.15;   /* display / 大数字 */
  --lh-heading:    1.25;   /* h1~h3 */
  --lh-body:       1.6;    /* 正文 */
}

/* ── 页面地基 ──────────────────────────────────────────────── */
* { -webkit-tap-highlight-color:transparent; }
body {
  margin:0;
  background:var(--bg);
  color:var(--soft);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── 标题基线（三页共用字号阶梯；页面可加字体家族/字距,勿再改 font-size） ── */
h1 { font-size:var(--fs-h1); line-height:var(--lh-heading); font-weight:800; color:var(--ink); margin:0; letter-spacing:-.015em; }
h2 { font-size:var(--fs-h2); line-height:var(--lh-heading); font-weight:700; color:var(--ink); margin:0; letter-spacing:-.01em; }
h3 { font-size:var(--fs-h3); line-height:var(--lh-heading); font-weight:650; color:var(--soft); margin:0; }
/* 柔焦冷调氛围：以冰蓝青为主、底部一抹冷蓝紫，低饱和，从玻璃卡与留白间隙透出（对齐 landing 星云） */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 48% at 14% -8%,  rgba(85,214,234,.11),  transparent 60%),
    radial-gradient(50% 44% at 92% 2%,   rgba(85,214,234,.06),  transparent 62%),
    radial-gradient(62% 54% at 60% 112%, rgba(96,120,180,.06),  transparent 60%);
}
.wrap { position:relative; z-index:1; }

/* ── 全站键盘焦点环（对齐 landing：2px 冰蓝青 outline + offset；组件另有柔环叠加） ── */
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

/* ── 滚动条 ────────────────────────────────────────────────── */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.11); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); background-clip:padding-box; }

/* ── 玻璃卡片（用户台默认；管理台自带实心 .card 覆盖本条） ───── */
.card {
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-panel);
}

/* ── 分组标签 / mono kicker（对齐 landing 大写字距 HUD 质感） ── */
.lbl { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mut2); font-family:var(--mono); }

/* ── 输入控件 ──────────────────────────────────────────────── */
.fld {
  background:var(--fld-bg);
  border:1px solid var(--edge);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:8px 12px;
  transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);
}
.fld::placeholder { color:var(--mut2); }
.fld:hover { border-color:var(--edge-strong); background:rgba(255,255,255,.05); }
.fld:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--primary-soft); background:rgba(255,255,255,.05); }
select.fld {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239AA3B4' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px;
}
/* option 必须显式写死背景色——浏览器原生下拉弹层不继承 CSS 变量，不写就透明看不见 */
select.fld option {
  background: #1A1E2A;
  color: #F7F9FC;
}
select.fld option:checked {
  background: #233040;
  color: #55D6EA;
}
/* optgroup 标签同样需要写死，否则浏览器用系统浅灰底 */
select.fld optgroup {
  background: #0E1016;
  color: #7E8A9C;
}
select.fld optgroup option {
  background: #1A1E2A;
  color: #F7F9FC;
}

/* ── 按钮（主次分明：冰蓝青实底 = 唯一主动作；柔青 = 重要次动作；玻璃幽灵 = 一般次要） ── */
.btn {
  border-radius:var(--radius-sm); padding:8px 16px; font-weight:600; font-size:var(--fs-sm);
  transition:transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease), color .16s var(--ease);
  cursor:pointer; border:1px solid transparent; white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-pri {
  background:var(--acc); color:var(--acc-ink); font-weight:700;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 24px -12px rgba(85,214,234,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-pri:hover { background:var(--acc2); transform:translateY(-1px); box-shadow:0 14px 32px -12px rgba(85,214,234,.62), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-pri:active { transform:translateY(0) scale(.99); }
/* 柔青：重要但非"本屏唯一主 CTA"的动作（激活/批量激活/建套餐…）——保留冰蓝青语义、让实心青只留给单一焦点。 */
.btn-acc { background:var(--primary-soft); color:var(--acc); border:1px solid rgba(85,214,234,.32); font-weight:700; }
.btn-acc:hover { background:rgba(85,214,234,.2); border-color:rgba(85,214,234,.5); }
.btn-acc:active { transform:translateY(0) scale(.99); }
.btn-gho { background:var(--surface-2); border:1px solid var(--edge); color:var(--soft); }
.btn-gho:hover { background:var(--surface-3); border-color:var(--edge-strong); color:var(--ink); }
.btn-gho:active { transform:translateY(0) scale(.99); }
.btn-bad {
  background:rgba(255,107,129,.12); border:1px solid rgba(255,107,129,.32); color:var(--bad);
}
.btn-bad:hover { background:rgba(255,107,129,.2); border-color:rgba(255,107,129,.5); }
/* 危险幽灵：逐行破坏动作默认克制（灰），hover 才转红——红只在"意图删除"时出现，不在表里刷屏；批量删除仍用实底 btn-bad 作单一破坏 CTA。 */
.btn-dgho { background:var(--surface-2); border:1px solid var(--edge); color:var(--mut); }
.btn-dgho:hover { background:rgba(255,107,129,.14); border-color:rgba(255,107,129,.45); color:var(--bad); }
.btn-dgho:active { transform:translateY(0) scale(.99); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--primary-soft); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }

/* ── 药丸标签 & 状态点 ─────────────────────────────────────── */
.pill { font-size:var(--fs-xs); padding:4px 10px; border-radius:999px; font-weight:700; letter-spacing:.03em; display:inline-block; line-height:1.4; }
.dot  { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ── 键盘提示 chip（主 CTA 上的 ⌘↵） ───────────────────────── */
.kbd {
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:600;
  padding:1px 6px; border-radius:6px; margin-left:8px;
  background:rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.18); color:#06202a;
}

/* ── 等宽（IP / id / 数字，HUD 质感） ──────────────────────── */
.mono, .font-mono { font-family:var(--mono); }

/* ── 表格（用户台默认；管理台自带更密的表覆盖本条） ─────────── */
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
th { text-align:left; color:var(--mut2); font-weight:600; font-size:var(--fs-xs); letter-spacing:.07em; text-transform:uppercase; padding:8px; border-bottom:1px solid var(--edge); }
td { padding:8px; border-bottom:1px solid var(--edge2); }
tbody tr:hover { background:var(--row-hover); }

/* ── 移动端触控底线：可点元素 ≥44px、输入 ≥16px（防 iOS 缩放）；覆盖漏网的段控件/文件选择 ── */
@media (max-width:640px) {
  :root { --fs-base:16px; --fs-sm:14px; }   /* 正文兜到 16px 防 iOS 缩放,次要文本随之抬到 14px */
  .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .fld { min-height:44px; font-size:16px; }
  #viewToggle button { min-height:44px; }
  input[type="file"] { min-height:44px; font-size:16px; }
  input, select, textarea { font-size:16px; }
}

/* ── 减少动效偏好 ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
