/* ==========================================================================
   ds.css — AI 受众预演 · Apple 风格设计系统 V3.0
   ==========================================================================
   这个文件是「整套对客界面唯一的外观来源」：换皮肤只改这里，页面不用动。
   为什么重写（取代 _ds.css）：旧版是"能用"的后台观感——灰底 + 蓝按钮 + 密集表格，
   更像内部管理系统，不像一个可以对外的产品官网。新版按 Apple 官网的信息节奏重做：

     ① 大量留白 + 非对称布局（不是所有东西都居中、不是所有区块都一样高）
     ② 字距随字号分级：字号越大字距越紧，正文归零，小字微松（这是"贵"的关键）
     ③ 玻璃材质只用在浮层（顶栏/弹窗遮罩），承载层级，绝不轻透叠轻透
     ④ 深色沉浸区讲"产品主张"，浅色区讲"信息"，明暗交替制造呼吸节奏
     ⑤ 所有可被手指碰到的运动都由 apple-motion.js 的 spring 驱动
        （CSS 这里只允许 .12s 的颜色/边框/阴影过渡 + 按下瞬间的缩放）

   ⛔ 红线（来自 apple-style-interaction-design skill）：
   - 位置/形变/位移 一律不能写 CSS transition 或 @keyframes，必须交 JS spring；
     否则用户中途反向会"硬切"，手感立刻崩。
   - 反馈不能只在 hover：按下必须有即时反馈（无延迟）。
   - 必须处理三种无障碍偏好：减动效 / 减透明 / 高对比。
   ========================================================================== */

/* ---------- 1. 设计令牌：颜色 / 几何 / 字体 / 字距 ---------- */
:root{
  /* 底色：暖白纸张感（比纯白柔和，长时间读报告不刺眼） */
  --paper:#FCFBF9;
  --paper-2:#F5F3EF;
  --surface:#FFFFFF;
  --night:#0C0B12;          /* 深色沉浸区 */
  --night-2:#15131F;
  --night-card:rgba(255,255,255,.06);

  --ink:#151318;            /* 主文字 */
  --ink-2:#5C5866;          /* 次级文字 */
  --ink-3:#918C9B;          /* 辅助/占位 */
  --ink-inv:#F7F5F2;        /* 深底上的文字 */
  --ink-inv-2:rgba(247,245,242,.62);

  --line:rgba(21,19,24,.09);
  --line-2:rgba(21,19,24,.14);
  --line-inv:rgba(255,255,255,.14);

  /* 品牌：电光靛蓝 → 紫的渐变身份（AI + 影像感） */
  --brand:#4F46E5;
  --brand-2:#7C5CF0;
  --brand-deep:#3730A3;
  --brand-soft:#EEF0FF;
  --brand-border:#C9CCFB;
  --accent:#F59E0B;         /* 琥珀：用于"高光/强调"，克制使用 */
  --accent-soft:#FFF7E8;

  --ok:#12A67A;   --ok-soft:#E7F7F1;   --ok-border:#A9E6D3;
  --warn:#F59E0B; --warn-soft:#FFF7E8; --warn-border:#FBE2AF;
  --bad:#E0524B;  --bad-soft:#FDEDEB;  --bad-border:#F6C7C2;
  --info:#3B82F6; --info-soft:#EDF4FF; --info-border:#C7DCFB;

  /* 几何：圆角跟着容器尺寸走，越大越圆 */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
  --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; --sp-20:80px; --sp-24:120px;

  /* 阴影：分层纵深（越低的层越浅，避免糊成一团） */
  --sh-xs:0 1px 2px rgba(16,14,24,.05);
  --sh-sm:0 2px 8px rgba(16,14,24,.06);
  --sh-md:0 8px 24px rgba(16,14,24,.09);
  --sh-lg:0 20px 48px rgba(16,14,24,.13);
  --sh-xl:0 40px 90px rgba(16,14,24,.20);
  --sh-brand:0 14px 34px rgba(79,70,229,.24);

  /* 玻璃材质：只给浮层用，重量编码层级 */
  --glass:rgba(252,251,249,.72);
  --glass-strong:rgba(252,251,249,.88);
  --glass-blur:saturate(180%) blur(20px);
  --scrim:rgba(12,11,18,.42);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;

  /* 字距光学分级（§15）：大字紧、小字松；行高与字号反比 */
  --ls-display:-.034em; --lh-display:1.03;
  --ls-h1:-.030em;      --lh-h1:1.06;
  --ls-h2:-.024em;      --lh-h2:1.12;
  --ls-h3:-.016em;      --lh-h3:1.24;
  --ls-h4:-.010em;      --lh-h4:1.34;
  --ls-body:0;          --lh-body:1.62;
  --ls-sm:.006em;       --lh-sm:1.58;
  --ls-xs:.020em;       --lh-xs:1.55;
  --tint:.12s;          /* 只允许颜色/边框/阴影用这么短 */
}

/* ---------- 2. 复位与基础排印 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);font-size:16px;line-height:var(--lh-body);letter-spacing:var(--ls-body);
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,video{display:block;max-width:100%}
ul,ol{list-style:none}
::selection{background:rgba(79,70,229,.18)}

.display{font-size:clamp(40px,6.4vw,84px);font-weight:700;letter-spacing:var(--ls-display);line-height:var(--lh-display)}
h1,.h1{font-size:clamp(30px,3.6vw,52px);font-weight:700;letter-spacing:var(--ls-h1);line-height:var(--lh-h1)}
h2,.h2{font-size:clamp(24px,2.6vw,38px);font-weight:680;letter-spacing:var(--ls-h2);line-height:var(--lh-h2)}
h3,.h3{font-size:clamp(19px,1.5vw,23px);font-weight:640;letter-spacing:var(--ls-h3);line-height:var(--lh-h3)}
h4,.h4{font-size:17px;font-weight:620;letter-spacing:var(--ls-h4);line-height:var(--lh-h4)}
p{line-height:var(--lh-body)}
.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink-2);letter-spacing:-.006em}
.small{font-size:13.5px;letter-spacing:var(--ls-sm);line-height:var(--lh-sm)}
.micro{font-size:12px;letter-spacing:var(--ls-xs);line-height:var(--lh-xs)}
.muted{color:var(--ink-2)} .muted-3{color:var(--ink-3)} .mono{font-family:var(--mono);font-size:.92em}
.center{text-align:center}
.grad{background:linear-gradient(100deg,var(--brand) 0%,var(--brand-2) 55%,#4F46E5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 3. 布局容器 ---------- */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--sp-6)}
.wrap-wide{max-width:1280px}
.wrap-narrow{max-width:820px}
section{padding:var(--sp-20) 0}
section.tight{padding:var(--sp-12) 0}
section.soft{background:var(--paper-2)}
@media (max-width:720px){ section{padding:var(--sp-12) 0} .wrap{padding:0 var(--sp-4)} }

/* ---------- 4. 顶栏：玻璃材质，滚动后压缩（高度/阴影交给 JS spring） ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid transparent;
}
.nav-inner{display:flex;align-items:center;gap:var(--sp-5);height:64px;
  width:100%;max-width:1280px;margin:0 auto;padding:0 var(--sp-6)}
.nav.fixed{border-bottom-color:var(--line);box-shadow:var(--sh-xs)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16.5px;letter-spacing:-.018em;color:var(--ink)}
.brand .mark{width:22px;height:22px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 4px 12px rgba(79,70,229,.32)}
.brand .mark::after{content:"";display:block;width:100%;height:100%;border-radius:inherit}
.nav nav{display:flex;align-items:center;gap:2px}
.nav nav a{
  padding:7px 13px;border-radius:var(--r-pill);font-size:14.5px;color:var(--ink-2);font-weight:500;
  transition:color var(--tint),background-color var(--tint)}
.nav nav a:hover{color:var(--ink);background:rgba(21,19,24,.05)}
.nav nav a.active{color:var(--brand);background:var(--brand-soft)}
.nav .spacer{flex:1}
@media (max-width:860px){ .nav nav{display:none} }

/* 阅读进度条：宽度由 JS spring 推进（可被打断、回流 sluggish） */
.readbar{position:fixed;left:0;top:0;height:2px;width:0;z-index:70;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:0 2px 2px 0}

/* ---------- 5. 按钮：按下零延迟，回弹交给 spring ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:14.5px;font-weight:580;letter-spacing:-.004em;white-space:nowrap;
  padding:10px 18px;border-radius:var(--r-pill);cursor:pointer;
  will-change:transform;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--tint),box-shadow var(--tint),border-color var(--tint),color var(--tint)}
.btn:active{transform:scale(.965)}          /* 立即反馈，无过渡 */
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--brand-deep);box-shadow:0 18px 40px rgba(79,70,229,.32)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2A2733}
.btn-outline{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--ink);background:rgba(21,19,24,.04)}
.btn-ghost{color:var(--brand);background:transparent}
.btn-ghost:hover{background:var(--brand-soft)}
.btn-inv{background:#fff;color:var(--ink)}
.btn-inv:hover{background:#EFEDEA}
.btn-inv-ghost{border:1px solid var(--line-inv);color:var(--ink-inv)}
.btn-inv-ghost:hover{background:rgba(255,255,255,.08)}
.btn-sm{padding:7px 14px;font-size:13.5px}
.btn-lg{padding:14px 26px;font-size:16.5px}
.btn:disabled,.btn.is-disabled{opacity:.45;pointer-events:none}

/* 文字链接箭头：hover 时位移也由 JS spring 驱动（class .arrow-link） */
.arrow-link{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:580;font-size:15px}
.arrow-link .arw{display:inline-block;font-family:var(--font)}

/* ---------- 6. 卡片 ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--sh-xs)}
.card.flat{box-shadow:none}
.card.pad-sm{padding:var(--sp-5)}
.card-dark{background:var(--night-card);border-color:var(--line-inv);color:var(--ink-inv)}
/* 可交互卡片：hover/按下走 JS spring 的位移与缩放；这里只留阴影与边框的极短过渡 */
.tile{cursor:pointer;transition:box-shadow var(--tint),border-color var(--tint),background-color var(--tint)}
.tile:hover{border-color:var(--brand-border);box-shadow:var(--sh-md)}
.tile:active{cursor:grabbing}
.tile .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:21px;
  background:var(--brand-soft);border:1px solid var(--brand-border);margin-bottom:var(--sp-4)}
.tile h3{margin-bottom:6px}
.tile p{color:var(--ink-2);font-size:14.5px;line-height:1.6}

/* 数据卡（报告页 KPI） */
.kpi{padding:var(--sp-5) var(--sp-5)}
.kpi .k-label{font-size:12.5px;letter-spacing:var(--ls-xs);color:var(--ink-3);text-transform:none}
.kpi .k-val{font-size:38px;font-weight:700;letter-spacing:-.028em;line-height:1.05;margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:13px;color:var(--ink-2)}
.kpi .k-bar{height:4px;border-radius:2px;background:var(--paper-2);overflow:hidden;margin-top:12px}
.kpi .k-bar span{display:block;height:100%;border-radius:2px;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))}

/* ---------- 7. 徽章 / 标签 / 分段控件 ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:580;letter-spacing:var(--ls-xs)}
.badge.ok{background:var(--ok-soft);color:#0B7F5F;border:1px solid var(--ok-border)}
.badge.warn{background:var(--warn-soft);color:#A56A00;border:1px solid var(--warn-border)}
.badge.bad{background:var(--bad-soft);color:#B5362F;border:1px solid var(--bad-border)}
.badge.info{background:var(--info-soft);color:#2058AC;border:1px solid var(--info-border)}
.badge.brand{background:var(--brand-soft);color:var(--brand-deep);border:1px solid var(--brand-border)}
.badge.plain{background:rgba(21,19,24,.05);color:var(--ink-2);border:1px solid var(--line)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* 分段控件：滑动底板由 JS spring 驱动（transform 绝不写 transition） */
.segmented{display:inline-flex;position:relative;padding:4px;border-radius:var(--r-pill);
  background:rgba(21,19,24,.045);border:1px solid var(--line)}
.segmented .ind{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--sh-sm);pointer-events:none;z-index:0}
.segmented button{position:relative;z-index:1;padding:7px 16px;border-radius:var(--r-pill);font-size:14px;
  font-weight:560;color:var(--ink-2);transition:color var(--tint)}
.segmented button.on{color:var(--ink)}
.segmented button:hover{color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface);font-size:13.5px;color:var(--ink-2);cursor:pointer;
  transition:border-color var(--tint),background-color var(--tint),color var(--tint)}
.chip:hover{border-color:var(--brand-border);background:var(--brand-soft);color:var(--brand-deep)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.on .cnt{opacity:.8}

/* ---------- 8. 表单 ---------- */
.field{margin-bottom:var(--sp-5)}
.field>label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.field .hint{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.field .err{font-size:12.5px;color:var(--bad);margin-top:6px;display:none}
.field.invalid .err{display:block}
.input,.select,.textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 14px;line-height:1.5;
  transition:border-color var(--tint),box-shadow var(--tint)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(79,70,229,.13)}
.field.invalid .input{border-color:var(--bad);box-shadow:0 0 0 4px rgba(224,82,75,.12)}
.textarea{resize:vertical;min-height:96px}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%235C5866' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

/* 开关：离散状态跳转（无法被手指中途反向），允许弹性过渡 */
.switch{position:relative;width:44px;height:26px;border-radius:var(--r-pill);background:var(--line-2);
  cursor:pointer;flex:none;transition:background-color .22s}
.switch.on{background:var(--brand)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-sm);transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.switch.on::after{transform:translateX(18px)}
.range{width:100%;accent-color:var(--brand)}

/* 拖拽投放区：虚线边框，拖拽悬停时变色（形变由 JS） */
.dropzone{border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--sp-10) var(--sp-6);text-align:center;cursor:pointer;
  transition:border-color var(--tint),background-color var(--tint)}
.dropzone.hot{border-color:var(--brand);background:var(--brand-soft)}

/* ---------- 9. 表格 ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
.tbl th{text-align:left;font-size:12.5px;letter-spacing:var(--ls-xs);color:var(--ink-3);font-weight:600;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{transition:background-color var(--tint)}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl .num{font-variant-numeric:tabular-nums}
.row-anim{will-change:transform,opacity}

/* ---------- 10. 弹窗 / 抽屉（材质分层：遮罩一层玻璃，内容层不透明） ---------- */
.modal-mask{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0}
.modal{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  width:min(560px,92vw);max-height:86vh;overflow:auto;opacity:0}
.modal .m-head{padding:var(--sp-6) var(--sp-6) 0}
.modal .m-body{padding:var(--sp-5) var(--sp-6)}
.modal .m-foot{padding:var(--sp-4) var(--sp-6) var(--sp-6);display:flex;gap:10px;justify-content:flex-end}
.drawer-mask{position:fixed;inset:0;z-index:88;display:none;background:var(--scrim);opacity:0}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:89;width:min(460px,92vw);background:var(--surface);
  box-shadow:var(--sh-xl);transform:translateX(100%);display:flex;flex-direction:column}
.drawer .d-head{padding:var(--sp-6);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.drawer .d-body{padding:var(--sp-6);overflow:auto;flex:1}
.icon-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  color:var(--ink-2);transition:background-color var(--tint)}
.icon-btn:hover{background:rgba(21,19,24,.06)}
.icon-btn:active{transform:scale(.92)}

/* ---------- 11. 可拖拽货架（首页案例横滑：橡皮筋边界 + 动量吸附） ---------- */
.shelf{display:flex;gap:var(--sp-4);overflow-x:auto;scrollbar-width:none;padding:4px var(--sp-6) var(--sp-6);
  scroll-snap-type:x proximity}
.shelf::-webkit-scrollbar{display:none}
.shelf>*{flex:none;scroll-snap-align:start}

/* ---------- 12. 页脚（深色收尾，给页面一个"落地"的重量） ---------- */
/* 注意：必须限定 footer.foot —— 报告页 KPI 卡内部也有 .foot（小字脚注），不能被页脚样式劫持 */
footer.foot{background:var(--night);color:var(--ink-inv);padding:var(--sp-16) 0 var(--sp-8)}
footer.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-8)}
footer.foot h5{font-size:12.5px;letter-spacing:var(--ls-xs);color:rgba(247,245,242,.5);margin-bottom:12px;font-weight:600}
footer.foot a{display:block;padding:6px 0;font-size:14px;color:var(--ink-inv-2)}
.foot a:hover{color:var(--ink-inv)}
footer.foot .brand-inv{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:#fff;letter-spacing:-.018em}
footer.foot .legal{margin-top:var(--sp-10);padding-top:var(--sp-5);border-top:1px solid var(--line-inv);
  font-size:12.5px;color:rgba(247,245,242,.42);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:720px){ .foot .cols{grid-template-columns:1fr 1fr} }

/* ---------- 13. 滚动揭示：初始态交给 CSS，运动过程交给 JS spring ---------- */
.reveal{opacity:0;will-change:transform,opacity}
.no-motion .reveal{opacity:1;transform:none}

/* ---------- 14. 深色区块辅助（明暗节奏） ---------- */
.night{background:var(--night);color:var(--ink-inv)}
.night .lead{color:var(--ink-inv-2)}
.night .card{background:var(--night-card);border-color:var(--line-inv);box-shadow:none}
.night .tile:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09)}
.night .tile .ico{background:rgba(255,255,255,.09);border-color:var(--line-inv)}
.night h1,.night h2,.night h3,.night h4{color:#fff}
.night .muted{color:var(--ink-inv-2)}
.hairline{height:1px;background:var(--line);border:0}
.night .hairline{background:var(--line-inv)}

/* 光晕背景：只作氛围，不抢内容 */
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.glow.a{width:560px;height:560px;background:rgba(79,70,229,.20);top:-160px;left:-80px}
.glow.b{width:480px;height:480px;background:rgba(245,158,11,.16);top:120px;right:-120px}
.layer-up{position:relative;z-index:1}

/* ---------- 15. 无障碍三件套：反馈不能丢，只简化运动 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .btn:active{transform:none}
  .reveal{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-transparency: reduce){
  .nav{background:var(--paper)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .modal-mask,.drawer-mask{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(12,11,18,.66)!important}
  .card.glass{background:var(--surface)!important;backdrop-filter:none!important}
}
@media (prefers-contrast: more){
  :root{--ink:#000;--ink-2:#333;--ink-3:#555;--line:rgba(0,0,0,.28);--line-2:rgba(0,0,0,.4)}
  .card,.modal,.drawer{border-width:1.5px}
  *{box-shadow:none!important}
  .btn-primary,.btn-dark{background:#000;color:#fff}
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}

/* ==========================================================================
   16. 兼容层 A：旧 CSS 变量别名（V1/V2 页面的 <style> 里大量引用旧变量名，
       这里把它们映射到新调色板。这样存量页面只换样式表就整体换肤，JS/DOM 不动）
   ========================================================================== */
:root{
  /* 颜色 */
  --c-primary:var(--brand); --c-primary-hover:var(--brand-deep); --c-primary-active:#3126A8;
  --c-primary-soft:var(--brand-soft); --c-primary-border:var(--brand-border);
  --c-accent:var(--accent); --c-accent-soft:var(--accent-soft);
  --c-success:var(--ok); --c-success-soft:var(--ok-soft); --c-success-border:var(--ok-border);
  --c-warning:var(--warn); --c-warning-soft:var(--warn-soft); --c-warning-border:var(--warn-border);
  --c-danger:var(--bad); --c-danger-soft:var(--bad-soft); --c-danger-border:var(--bad-border);
  --c-info:var(--info); --c-info-soft:var(--info-soft); --c-info-border:var(--info-border);
  --c-text:var(--ink); --c-text-2:var(--ink-2); --c-text-3:var(--ink-3);
  --c-border:var(--line); --c-border-2:var(--line-2);
  --c-bg:var(--paper-2); --c-surface:var(--surface); --c-surface-2:#F6F4F0;
  --c-score-hi:var(--ok); --c-score-mid:var(--warn); --c-score-lo:var(--bad);
  /* 材质 */
  --glass-bg:var(--glass); --glass-bg-strong:var(--glass-strong); --glass-border:var(--line);
  /* 字号（旧 scale） */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14.5px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  /* 字距/行高（旧 scale 名） */
  --ls-2xl:var(--ls-h1); --ls-xl:var(--ls-h2); --ls-lg:var(--ls-h3); --ls-md:var(--ls-h4);
  --lh-2xl:var(--lh-h1); --lh-xl:var(--lh-h2); --lh-lg:var(--lh-h3); --lh-md:var(--lh-body);
}

/* ==========================================================================
   17. 兼容层 B：旧组件类名 → 新视觉
   ========================================================================== */

/* —— 应用布局（后台型页面：顶栏 + 侧栏 + 主区）—— */
.app{display:flex;min-height:100vh}
.sidebar{width:224px;background:var(--surface);border-right:1px solid var(--line);
  padding:var(--sp-4) var(--sp-3);flex-shrink:0}
.sidebar .group{font-size:11.5px;letter-spacing:.09em;color:var(--ink-3);margin:var(--sp-4) 0 var(--sp-2) 6px;font-weight:600}
.sidebar a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14px;margin-bottom:2px;transition:background-color var(--tint),color var(--tint)}
.sidebar a.active,.sidebar a:hover{background:var(--brand-soft);color:var(--brand-deep)}
.main{flex:1;padding:var(--sp-8) var(--sp-6);overflow:auto;width:100%}
@media(min-width:1280px){.main{max-width:1220px;margin:0 auto}}

/* 顶栏（旧 .topnav：与新版 .nav 同语言，兜底旧页面未改标记的） */
.topnav{position:sticky;top:0;z-index:60;height:60px;display:flex;align-items:center;gap:var(--sp-5);
  padding:0 var(--sp-6);background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid transparent;transition:border-color var(--tint),box-shadow var(--tint)}
.topnav.scrolled,.topnav.fixed{border-bottom-color:var(--line);box-shadow:var(--sh-xs)}
.topnav .brand{font-weight:700;font-size:16.5px;letter-spacing:-.018em;color:var(--ink);display:flex;align-items:center;gap:9px}
.topnav .brand .dot{width:10px;height:10px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 0 4px var(--brand-soft)}
.topnav nav{display:flex;gap:2px}
.topnav nav a{padding:7px 13px;border-radius:var(--r-pill);font-size:14px;color:var(--ink-2);cursor:pointer;
  transition:background-color var(--tint),color var(--tint)}
.topnav nav a.active,.topnav nav a:hover{color:var(--brand-deep);background:var(--brand-soft)}
.topnav .spacer{flex:1}

/* 页头 */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-6)}
.page-title{font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:var(--ls-h2);line-height:var(--lh-h2)}
.page-sub{color:var(--ink-2);font-size:14.5px;margin-top:6px;max-width:640px}

/* 网格 */
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-4{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* 通用工具 */
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row.wrap{flex-wrap:wrap} .row.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:var(--sp-2)}
.divider{height:1px;background:var(--line);margin:var(--sp-5) 0}
.hint{font-size:12.5px;color:var(--ink-3)}
.ttl{font-weight:620;font-size:15px;letter-spacing:var(--ls-h4)}
.sub{color:var(--ink-2);font-size:13px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px}
.kv .k{color:var(--ink-2)} .kv .v{font-weight:600;font-variant-numeric:tabular-nums}
.stat{text-align:center}
.stat .n{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--ink-3);letter-spacing:var(--ls-xs)}
.stat-row{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}
.pill{padding:3px 10px;border-radius:var(--r-pill);background:rgba(21,19,24,.05);
  font-size:12px;color:var(--ink-2);letter-spacing:var(--ls-xs)}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:580;letter-spacing:var(--ls-xs)}
.tag-ok{background:var(--ok-soft);color:#0B7F5F;border:1px solid var(--ok-border)}
.tag-fail{background:var(--bad-soft);color:#B5362F;border:1px solid var(--bad-border)}
.tag-run{background:var(--info-soft);color:#2058AC;border:1px solid var(--info-border)}
.tag-wait{background:var(--warn-soft);color:#A56A00;border:1px solid var(--warn-border)}

/* 徽章补充变体（旧名） */
.badge.primary{background:var(--brand-soft);color:var(--brand-deep);border:1px solid var(--brand-border)}
.badge.success{background:var(--ok-soft);color:#0B7F5F;border:1px solid var(--ok-border)}
.badge.warning{background:var(--warn-soft);color:#A56A00;border:1px solid var(--warn-border)}
.badge.danger,.badge.bad{background:var(--bad-soft);color:#B5362F;border:1px solid var(--bad-border)}
.badge.gray{background:rgba(21,19,24,.05);color:var(--ink-2);border:1px solid var(--line)}

/* 表格（旧 .table） */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.table th{text-align:left;font-size:12px;letter-spacing:var(--ls-xs);color:var(--ink-3);font-weight:600;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle;
  transition:background-color var(--tint)}
.table tbody tr:hover td{background:var(--paper-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.tr-drag{cursor:grab} .tr-drag.dragging{opacity:.94;box-shadow:var(--sh-lg);position:relative;z-index:5;background:var(--surface)}

/* 标签页（旧 .tabs，下划线式） */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:var(--sp-5)}
.tabs button{padding:10px 14px;font-size:14px;color:var(--ink-2);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:560;
  transition:color var(--tint),border-color var(--tint)}
.tabs button.on{color:var(--brand-deep);border-bottom-color:var(--brand);font-weight:620}
.tabs button:hover{color:var(--ink)}

/* 分段控件：未接 app.js（无 .ind）时给选中态一个可见兜底 */
.segmented:not(:has(.ind)) button.on{background:var(--surface);box-shadow:var(--sh-sm)}

/* 弹窗 / 抽屉（旧结构：.modal>.m-head/.m-body 或直接内容，.drawer>header/.body） */
.modal-mask.show{opacity:1;pointer-events:auto}
.modal{transform:translateY(8px) scale(.98)}
.modal.show{transform:none;opacity:1}
.modal h3{letter-spacing:var(--ls-h3)}
.modal .foot{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-5)}
.drawer-mask{display:none}
.drawer-mask.show{opacity:1}
.drawer header{padding:var(--sp-5);border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between}
.drawer .body{padding:var(--sp-5);overflow:auto;flex:1}
.drawer .grabber{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:5px;
  border-radius:var(--r-pill);background:var(--line-2);cursor:grab}

/* Toast */
.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-md);font-size:13.5px;
  box-shadow:var(--sh-md);display:flex;align-items:center;gap:8px;will-change:transform,opacity}
.toast.success{background:#0E8A66} .toast.error{background:var(--bad)} .toast.info{background:var(--info)}

/* 进度 / 加载 / 骨架（宽度动画由 JS spring 或页面 JS 驱动） */
.progress{height:7px;background:var(--paper-2);border-radius:var(--r-pill);overflow:hidden}
.progress>span{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand),var(--brand-2));will-change:width}
.spinner{width:16px;height:16px;border:2px solid var(--brand-border);border-top-color:var(--brand);
  border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton,.sk{background:linear-gradient(90deg,#EFEDE9 25%,#E4E1DB 37%,#EFEDE9 63%);
  background-size:400% 100%;animation:sk 1.3s infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* 空状态 */
.empty{text-align:center;padding:var(--sp-10) var(--sp-4);color:var(--ink-2)}
.empty .ico{font-size:34px;opacity:.45;margin-bottom:var(--sp-3)}

/* 评分环形仪表 */
.gauge{display:inline-flex;flex-direction:column;align-items:center}
.gauge .ring{position:relative;width:96px;height:96px}
.gauge .ring svg{transform:rotate(-90deg)}
.gauge .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;letter-spacing:var(--ls-h2);font-variant-numeric:tabular-nums}
.gauge .cap{font-size:12px;color:var(--ink-3);margin-top:4px;letter-spacing:var(--ls-xs)}

/* 旧 KPI 结构（.kpi .v/.l，报告页/看板用） */
.kpi .v{font-size:30px;font-weight:700;letter-spacing:-.026em;line-height:1.06;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px;color:var(--ink-3);letter-spacing:var(--ls-xs)}

/* 时间轴（报告页核心图） */
.tl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4)}
.tl .tl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.tl svg{width:100%;display:block;overflow:visible}
.tl .axis{stroke:var(--line-2);stroke-width:1}
.tl .attn-line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round}
.tl .anchor{cursor:pointer}
.tl .anchor circle{fill:var(--surface);stroke:var(--brand);stroke-width:2;transition:fill var(--tint)}
.tl .anchor:hover circle,.tl .anchor.sel circle{fill:var(--brand)}
.tl .conf{font-size:12px;font-weight:600;letter-spacing:var(--ls-xs);display:inline-flex;align-items:center;gap:5px}
.tl .conf::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tl .conf.hi{color:#0B7F5F} .tl .conf.lo{color:var(--ink-3)}
.tl-drill{margin-top:var(--sp-3);border-top:1px dashed var(--line-2);padding-top:var(--sp-3);display:none}
.tl-drill.open{display:block}
.tl-drill .slice{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13.5px}
.tl-drill .bar{height:8px;border-radius:var(--r-pill);background:var(--brand-soft);flex:1;overflow:hidden}
.tl-drill .bar>i{display:block;height:100%;background:var(--brand);width:0;will-change:width}
.tl-scrubber{cursor:ew-resize}

/* 段落卡 / 选项卡 */
.opt{border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px;cursor:pointer;background:var(--surface);
  transition:background-color var(--tint),border-color var(--tint),box-shadow var(--tint)}
.opt:hover{border-color:var(--brand-border);background:var(--brand-soft)}
.opt.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}
.opt .t{font-weight:600;font-size:14px} .opt .d{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.para .sev.hi{background:var(--bad-soft);color:#B5362F}
.para .sev.mid{background:var(--warn-soft);color:#A56A00}
.para .sev.lo{background:var(--ok-soft);color:#0B7F5F}

/* 步骤条 */
.steps{display:flex;align-items:center;margin-bottom:var(--sp-6)}
.steps .st{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:13.5px}
.steps .st .n{width:26px;height:26px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  transition:background-color var(--tint),border-color var(--tint),color var(--tint)}
.steps .st.on{color:var(--brand-deep);font-weight:600}
.steps .st.on .n{background:var(--brand);color:#fff;border-color:var(--brand)}
.steps .st.done .n{background:var(--ok);color:#fff;border-color:var(--ok)}
.steps .bar{flex:1;height:2px;background:var(--line);margin:0 12px;transition:background-color var(--tint)}
.steps .bar.done{background:var(--ok)}
.step-panel{display:none} .step-panel.on{display:block}

/* 提示条（旧 .callout / .warn-box / .err-banner 兜底） */
.callout{border-left:3px solid var(--info);background:var(--info-soft);padding:11px 14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13.5px;color:var(--ink)}
.callout.warn{border-color:var(--warn);background:var(--warn-soft)}
.callout.danger{border-color:var(--bad);background:var(--bad-soft)}
.warn-box{border:1px solid var(--warn-border);background:var(--warn-soft);color:#7A4E00;
  padding:11px 14px;border-radius:var(--r-sm);font-size:13.5px}

/* 搜索框前缀图标定位（任务列表页） */
.search{position:relative}
.search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:14px;pointer-events:none}
.search .input{padding-left:34px}

/* 代码块（开放 API 页） */
.code-block{background:#17151F;color:#E8E6F2;border-radius:var(--r-md);padding:var(--sp-4);
  font-family:var(--mono);font-size:13px;line-height:1.65;overflow:auto}
.code-block .c-str{color:#A5D6A7} .code-block .c-num{color:#F5C97B}
.code-block .c-key{color:#9FA8FF} .code-block .c-com{color:#6E6A80}
.copy-btn{border:1px solid var(--line-inv);color:rgba(255,255,255,.75);border-radius:var(--r-sm);
  padding:4px 10px;font-size:12px;cursor:pointer;transition:background-color var(--tint),color var(--tint)}
.copy-btn:hover{background:rgba(255,255,255,.09);color:#fff}