/* ============================================================
   设计真源 token — 国内 AI 视频翻译配音工具站 v2
   06-design / moying / 2026-06-25
   前端(07 mojie)直接复用为全局 token。每个高保真页面共用本文件。
   调性：国内主流工具友好（剪映/即梦/通义系），移动优先。
   ============================================================ */
:root{
  /* —— 品牌 / 强调 ——（v3 商业级强化：主色更饱满、更有电光感，仍国内友好不刺眼）—— */
  --brand-primary:#1466FF; --brand-primary-deep:#0A4FD6; --brand-primary-soft:#E6EFFF;
  --brand-primary-100:#D2E2FF;   /* 新增：中间软阶，用于描边/弱填充 */
  --accent-coral:#FF5A52; --accent-coral-deep:#ED3B33; --accent-coral-soft:#FFEBE9;

  /* —— v3 商业级新增：第二强调（电青/赛博）+ 高光紫，用于渐变与记忆点，谨慎少量 —— */
  --accent-cyan:#00C2D6; --accent-cyan-deep:#019FB0; --accent-cyan-soft:#E0FAFD;
  --accent-violet:#7A5CFF; --accent-violet-soft:#EFEBFF;

  /* —— 语义（needs_review 琥珀独立，绝不与 success 同色）—— */
  --needs-review:#F5A524; --needs-review-soft:#FFF6E5; --needs-review-deep:#C77700;
  --success:#16B364; --success-soft:#E6F8EF;
  --warning:#F5A524; --warning-soft:#FFF6E5;
  --danger:#F04438; --danger-soft:#FEEBE9;

  /* —— 国内生态品牌色 —— */
  --wechat-green:#07C160; --alipay-blue:#1677FF;

  /* —— 中性（v3：暗化一档、加大层级反差，更"正经产品"质感）—— */
  --ink-900:#0E1320; --ink-700:#363D4D; --ink-500:#646E82;
  --ink-400:#97A1B2; --ink-300:#C6CCD6; --ink-100:#EEF1F6;
  --line:#E7EBF1; --line-strong:#D4DAE3;
  --bg-page:#F5F7FC; --bg-card:#FFFFFF; --bg-soft:#EEF2F9;
  /* 旧 hero 渐变保留（其它页仍引用），首页改用下方 v3 商业级渐变 */
  --hero-grad:linear-gradient(135deg,#EAF4FF 0%,#F6F8FB 55%,#FFF1EE 100%);

  /* —— v3 商业级渐变 / 暗场 / 玻璃（新增，先供首页用，认可后铺全站）—— */
  --grad-brand:linear-gradient(120deg,#1466FF 0%,#3D7BFF 38%,#00C2D6 100%);
  --grad-brand-soft:linear-gradient(135deg,#0A4FD6 0%,#1466FF 55%,#00A6C4 100%);
  --grad-hero-v3:radial-gradient(120% 120% at 12% 0%,#EAF1FF 0%,#F5F7FC 46%,#FFFFFF 100%);
  --grad-ink:linear-gradient(135deg,#10182B 0%,#1B2740 60%,#0C1322 100%);
  --grad-text:linear-gradient(90deg,#1466FF 0%,#00B6CC 100%);
  --surface-dark:#101726; --surface-dark-2:#192237;
  --glass-line:rgba(255,255,255,.55);

  /* —— 字体 —— */
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","Segoe UI",Roboto,sans-serif;
  --font-num:"SF Pro Display",-apple-system,"PingFang SC",system-ui,sans-serif;

  /* —— 间距 —— */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;

  /* —— 圆角 —— */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:28px;--r-pill:999px;

  /* —— 阴影（v3：双层柔影 + 更通透的环境光，提升精致度）—— */
  --sh-sm:0 1px 2px rgba(14,19,32,.06), 0 1px 1px rgba(14,19,32,.04);
  --sh-md:0 6px 18px -6px rgba(14,19,32,.12), 0 2px 6px -2px rgba(14,19,32,.06);
  --sh-lg:0 24px 60px -22px rgba(14,19,32,.30), 0 8px 20px -10px rgba(14,19,32,.12);
  --sh-xl:0 40px 90px -30px rgba(14,19,32,.38), 0 12px 28px -12px rgba(14,19,32,.16);
  --sh-brand:0 14px 34px -10px rgba(20,102,255,.45);
  --sh-coral:0 14px 34px -10px rgba(255,90,82,.45);
  --ring-brand:0 0 0 4px rgba(20,102,255,.16);

  /* —— z —— */
  --z-header:100;--z-fab:200;--z-modal:1000;--z-toast:1100;

  /* ============================================================
     Stitch「Kinetic Clarity」收割（assets/899004bc81c14ed4aac3d3bc1ca85a4b）
     Stitch 据国内友好商业级 brief 生成的权威设计系统，细化项吸收为新增 token
     （不改旧名、不破其它页；首页先用，认可后铺全站）。
     ============================================================ */
  --r-pill-cta:999px;              /* 主 CTA / 主按钮全圆角（Stitch：最大化可点性、与信息卡区分）*/
  --r-card-feature:28px;           /* 特性卡 / Hero 图圆角（Stitch shapes）*/
  --sh-float-blue:0 20px 40px rgba(20,102,255,.05);  /* Stitch Raised 浮影：极柔蓝调 */
  --glass-nav:rgba(255,255,255,.72);                 /* Stitch Glass：70% 白玻璃层 */
  --glass-nav-blur:20px;                             /* Stitch：20px backdrop blur */
  --glass-nav-line:#E2E8F0;                          /* Stitch：1px 底描边 */
  --badge-ai-bg:rgba(0,194,214,.10);                 /* Stitch AI Badge：电青 10% 底 */
  --badge-ai-fg:#019FB0;                             /* 电青 100% 字 */
}

/* ====== 复用基础类（前端可参照，非强制）====== */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-sans);color:var(--ink-900);
  background:var(--bg-page);-webkit-font-smoothing:antialiased;line-height:1.65;}
a{color:var(--brand-primary);text-decoration:none;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--r-md);font-family:inherit;font-weight:600;
  font-size:17px;height:52px;padding:0 24px;cursor:pointer;transition:.18s;}
.btn-coral{background:var(--accent-coral);color:#fff;}
.btn-coral:hover{background:var(--accent-coral-deep);box-shadow:var(--sh-coral);}
.btn-primary{background:var(--brand-primary);color:#fff;}
.btn-primary:hover{background:var(--brand-primary-deep);box-shadow:var(--sh-brand);}
.btn-ghost{background:#fff;border:1.5px solid var(--line-strong);color:var(--ink-700);}
.btn-ghost:hover{border-color:var(--brand-primary);color:var(--brand-primary);}
.btn-text{background:none;color:var(--brand-primary);height:auto;padding:4px 6px;font-size:15px;}
.btn-wechat{background:var(--wechat-green);color:#fff;}
.btn-alipay{background:var(--alipay-blue);color:#fff;}
.btn-block{width:100%;}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:8px 16px;font-size:14px;font-weight:500;border:1.5px solid var(--line-strong);
  background:#fff;color:var(--ink-700);cursor:pointer;transition:.15s;min-height:40px;}
.chip[aria-pressed="true"],.chip.is-sel{border-color:var(--brand-primary);
  background:var(--brand-primary-soft);color:var(--brand-primary-deep);font-weight:600;}
.chip.is-beta{background:var(--bg-soft);color:var(--ink-300);border-color:var(--line);
  cursor:not-allowed;position:relative;}
.chip.is-beta .beta-tag{position:absolute;top:-9px;right:-6px;font-size:10px;
  background:var(--needs-review);color:#fff;border-radius:var(--r-pill);padding:1px 7px;font-weight:600;}

.card{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:var(--sp-5);}

/* 状态标签 */
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:4px 12px;font-size:13px;font-weight:600;}
.tag .dot{width:7px;height:7px;border-radius:50%;}
.tag-queued{background:var(--ink-100);color:var(--ink-500);}
.tag-queued .dot{background:var(--ink-400);}
.tag-proc{background:var(--brand-primary-soft);color:var(--brand-primary-deep);}
.tag-proc .dot{background:var(--brand-primary);animation:pulse 1.4s infinite;}
.tag-done{background:var(--success-soft);color:#0E8a4d;}
.tag-done .dot{background:var(--success);}
.tag-review{background:var(--needs-review-soft);color:var(--needs-review-deep);}
.tag-review .dot{background:var(--needs-review);}
.tag-fail{background:var(--danger-soft);color:#B42318;}
.tag-fail .dot{background:var(--danger);}
.tag-cancel{background:var(--bg-soft);color:var(--ink-500);}
.tag-cancel .dot{background:var(--ink-400);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

@media(min-width:960px){
  .btn{height:48px;}
}