/* ==========================================================================
   Costco 运营中枢 · 设计令牌层（Design Tokens）
   --------------------------------------------------------------------------
   落地原则：
   1) 只做「展示层」改造，不含任何业务逻辑，不影响路由 / API / Alpine 交互。
   2) 全部视觉值走 CSS 变量；两套主题仅覆盖语义变量，组件代码一行不动。
   3) 保留既有业务规则：中国市场「涨红跌绿」语义在任何主题下都不变。
   4) 与 Tailwind Play CDN 共存：本文件用 !important 覆盖中性色（gray/white）
      相关装饰类，使历史模板无需逐页改写即可跟随主题。
   5) 字体全部自托管（/static/fonts），不依赖任何外部 CDN。
   ========================================================================== */

/* ---------- 字体：拉丁自托管 + 中文用系统衬线/黑体（避免 GB 级 Web 字体） ---------- */
@font-face{
  font-family:'Bodoni Moda';
  src:url('/static/fonts/BodoniModa-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/static/fonts/JetBrainsMono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/static/fonts/JetBrainsMono-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
/* 中文展示字（标题专用）：思源宋体 Bold，已按站内字符子集化。
   正文仍走系统黑体栈——避免为全站正文加载数 MB 中文字库，
   同时保证 Windows 用户不再退到宋体点阵（SimSun）。 */
@font-face{
  font-family:'Noto Serif SC';
  src:url('/static/fonts/NotoSerifSC-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+2E80-9FFF,U+3000-303F,U+FF00-FFEF,U+0020-007E,U+2000-206F;
}

/* ==========================================================================
   1. 尺度令牌（与主题无关）
   ========================================================================== */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px;

  /* 模块化字阶 1.25 */
  --fs-xs:12px;  --fs-sm:13px;  --fs-base:16px; --fs-md:18px;
  --fs-lg:22px;  --fs-xl:28px;  --fs-2xl:36px;  --fs-3xl:48px;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:160ms; --dur-base:320ms; --dur-slow:640ms;

  --font-body:"PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC",
              "Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC",
              "Hiragino Sans GB",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* 中文展示字：自托管子集化思源宋体（仅覆盖站内字符，185KB），仅用于标题 */
  --font-serif-cn:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC",serif;
}

/* ==========================================================================
   2. 主题 A：暖白编辑风（默认）
   70% 暖纸底 + 20% 卡片面 + 10% Costco 品牌红强调
   ========================================================================== */
:root,
[data-theme="editorial"]{
  --bg:#f6f2ea;
  --bg-elev:#fffdf8;
  --surface:#fffdf8;
  --surface-2:#f1ebe0;
  --surface-3:#e8e1d4;
  --text:#191512;
  --text-inv:#fffdf8;
  --muted:#665d52;
  --line:rgba(25,21,18,.14);
  --line-strong:rgba(25,21,18,.26);
  --accent:#c8102e;                    /* Costco 品牌红 */
  --accent-hover:#a80d26;
  --accent-soft:rgba(200,16,46,.08);
  --accent-contrast:#fffdf8;
  --rise:#b42318;                      /* 涨 = 红 */
  --drop:#0f7b3f;                      /* 跌 = 绿 */
  --warn:#9a6115;
  --ok:#1d6fbd;
  --neutral-steel:#5a6472;

  --font-display:"Bodoni Moda",var(--font-serif-cn),Georgia,serif;
  --font-display-cn:var(--font-serif-cn);
  --display-weight:700;
  --display-tracking:-0.02em;

  --grid-alpha:.035;
  --rule-accent:linear-gradient(90deg,var(--accent) 0 16%, var(--line-strong) 16% 100%);

  --shadow-1:0 2px 8px rgba(60,44,28,.06);
  --shadow-2:0 8px 28px rgba(60,44,28,.10);
  --shadow-3:0 24px 64px rgba(60,44,28,.14);

  --chart-grid:rgba(25,21,18,.10);
  --chart-tick:#665d52;
}

/* ==========================================================================
   3. 主题 B：深色终端风
   70% 近黑 + 20% 面板 + 10% 信号橙强调
   ========================================================================== */
[data-theme="terminal"]{
  --bg:#0a0d13;
  --bg-elev:#0e131c;
  --surface:#141a25;          /* 较 bg 提亮一档，保证深色下仍有卡片层级 */
  --surface-2:#1b2330;
  --surface-3:#232c3a;
  --text:#eef2f7;
  --text-inv:#0a0d13;
  --muted:#a2b0c2;            /* 提亮：深色底上正文/次要信息实测 ≥ 7:1 */
  --line:rgba(233,237,243,.16);
  --line-strong:rgba(233,237,243,.30);
  --accent:#ff6b2c;
  --accent-hover:#ff834f;
  --accent-soft:rgba(255,107,44,.12);
  --accent-contrast:#0a0d13;
  --rise:#ff5c62;
  --drop:#2dd4a7;
  --warn:#fbbf24;
  --ok:#5aa9ff;
  --neutral-steel:#8b97a8;

  --font-display:"JetBrains Mono",var(--font-body),monospace;
  --font-display-cn:var(--font-body);
  --display-weight:700;
  --display-tracking:-0.03em;

  --grid-alpha:.055;
  --rule-accent:linear-gradient(90deg,var(--accent) 0 16%, var(--line-strong) 16% 100%);

  --shadow-1:0 2px 8px rgba(0,0,0,.40);
  --shadow-2:0 8px 28px rgba(0,0,0,.52);
  --shadow-3:0 24px 64px rgba(0,0,0,.64);

  --chart-grid:rgba(233,237,243,.16);
  --chart-tick:#a2b0c2;
}

/* ==========================================================================
   4. 基础与氛围层（拒绝纯灰平铺）
   ========================================================================== */
html,body{max-width:100%; overflow-x:hidden;}   /* 兜底：任何越界装饰元素都不产生横向滚动 */
body{
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--font-body) !important;
  font-size:var(--fs-base) !important;
  line-height:1.68 !important;
  letter-spacing:.012em !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
/* 三层氛围：径向光晕 / 细网格 / 噪点；均不拦截交互 */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;}
body::before{
  z-index:0;
  background:
    radial-gradient(52rem 34rem at 6% -8%, var(--accent-soft), transparent 62%),
    radial-gradient(44rem 30rem at 102% 2%, color-mix(in srgb,var(--ok) 12%,transparent), transparent 58%);
}
body::after{
  z-index:1; opacity:var(--grid-alpha);
  background-image:
    linear-gradient(var(--line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 16%, #000 0%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 16%, #000 0%, transparent 78%);
}
/* 层次安排（关键）：氛围层 0 → 页面内容 1 → 导航 30
   早期版本把 header 和 main 都设为 z-index:2，导致 DOM 靠后的 main
   盖住导航下拉面板（面板在 header 的堆叠上下文内，无法越过 main）。 */
body > main, body > footer{position:relative; z-index:1;}
#site-header{position:relative; z-index:30;}
::selection{background:var(--accent); color:var(--accent-contrast);}

/* 焦点态统一（可访问性不可妥协） */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:2px !important;
  border-radius:2px;
}

/* ==========================================================================
   5. 导航（重写）
   —— 修 bug：原实现用 group-hover + opacity/invisible，
      visibility 不参与过渡 → 鼠标微移即瞬时隐藏，移向下拉项时来不及点击。
      新方案：hover 意图缓冲（离开延时 220ms）+ 按钮到面板之间的桥接热区
      + 键盘可达（Esc 关闭、方向键进入）+ 点击当前项可切换。
   ========================================================================== */
.site-nav{
  background:color-mix(in srgb, var(--bg-elev) 90%, transparent) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
          backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line) !important;
}
.nav-inner{
  max-width:1280px; margin:0 auto; padding:0 var(--space-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  height:62px;
}
@media (max-width:767px){ .nav-inner{padding:0 var(--space-4); height:58px;} }

.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.brand-mark{
  width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--accent); color:var(--accent-contrast);
  display:grid;place-items:center; flex-shrink:0;
  font-family:var(--font-mono); font-weight:700; font-size:14px; letter-spacing:-.04em;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-name{
  font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:16px; letter-spacing:var(--display-tracking); color:var(--text);
}
.brand-sub{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
@media (max-width:420px){ .brand-sub{display:none;} }

/* 桌面导航条 */
.nav-links{display:none; align-items:center; gap:2px;}
@media (min-width:1024px){ .nav-links{display:flex;} }

.nav-link,.nav-trigger{
  display:inline-flex; align-items:center; gap:5px;
  min-height:36px; padding:8px 12px; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:var(--fs-sm); color:var(--muted);
  text-decoration:none; border:none; background:transparent; cursor:pointer;
  white-space:nowrap; position:relative;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-link:hover,.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{
  color:var(--text); background:var(--surface-2);
}
/* 当前页：底部 2px 强调线，明确「我在哪」 */
.nav-link[aria-current="page"]{
  color:var(--text); font-weight:700;
}
.nav-link[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--accent); border-radius:2px;
}
.nav-trigger .caret{
  transition:transform var(--dur-fast) var(--ease-out); flex-shrink:0;
}
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg);}

/* 菜单容器：只做定位，不做动画 */
.nav-item{position:relative;}

/* 桥接热区：面板上方 10px 的透明条，鼠标从按钮移到面板不会掉出 hover */
.nav-item::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
  pointer-events:none;
}
.nav-item[data-open="true"]::after{pointer-events:auto;}

/* 下拉面板：用 opacity + translate + visibility 组合，
   并为 visibility 设置 0s/延时，避免过渡期间无法点击 */
.nav-panel{
  position:absolute; top:calc(100% + 10px); left:0; z-index:60;
  min-width:230px; padding:6px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-md); box-shadow:var(--shadow-3);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             visibility 0s linear var(--dur-fast);
}
/* 顶部强调线：面板与导航之间建立视觉连接，替代突兀的悬空感 */
.nav-panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--accent);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
/* 指示箭头：从触发器指向面板 */
.nav-panel::after{
  content:""; position:absolute; top:-5px; left:var(--arrow-x,18px);
  width:9px; height:9px; background:var(--surface);
  border-left:1px solid var(--line-strong); border-top:1px solid var(--line-strong);
  transform:rotate(45deg); border-radius:1px;
}
.nav-item[data-open="true"] .nav-panel{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             visibility 0s;
}
/* mega 面板：多列 */
.nav-panel.mega{min-width:560px; display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:10px;}
.nav-panel.mega .mega-col{display:flex; flex-direction:column; gap:1px;}
.mega-label{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); padding:9px 10px 5px;
}
.mega-label::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}
.panel-link{
  display:flex; align-items:center; gap:10px;
  min-height:40px; padding:9px 10px 9px 12px; border-radius:var(--radius-sm);
  font-size:var(--fs-sm); color:var(--text); text-decoration:none;
  position:relative;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             padding-left var(--dur-fast) var(--ease-out);
}
/* 左侧强调条：hover/聚焦时出现，代替廉价的下划线 */
.panel-link::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scaleY(0);
  width:2px; height:60%; border-radius:2px; background:var(--accent);
  transition:transform var(--dur-fast) var(--ease-out);
}
.panel-link:hover,.panel-link:focus-visible{
  background:var(--accent-soft); color:var(--accent); padding-left:16px;
}
.panel-link:hover::before,.panel-link:focus-visible::before{transform:translateY(-50%) scaleY(1);}
.panel-link .pico{
  width:15px; height:15px; flex-shrink:0; color:var(--muted);
  transition:color var(--dur-fast) var(--ease-out);
}
.panel-link:hover .pico,.panel-link:focus-visible .pico{color:var(--accent);}
.panel-link .ptxt{flex:1; min-width:0;}
.panel-link .ext{font-size:10px; color:var(--muted); flex-shrink:0;}
.panel-link[aria-disabled="true"]{color:var(--muted); cursor:not-allowed;}
.panel-link[aria-disabled="true"]:hover{background:var(--surface-2); color:var(--muted); padding-left:12px;}
.panel-link[aria-disabled="true"]:hover::before{transform:translateY(-50%) scaleY(0);}
.panel-divider{height:1px; background:var(--line); margin:6px 8px;}

/* 右侧操作区 */
.nav-actions{display:flex; align-items:center; gap:var(--space-2); flex-shrink:0;}

/* 汉堡按钮（≥44px 触摸目标） */
.hamburger{
  display:inline-grid; place-items:center; width:44px; height:44px;
  background:transparent; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); color:var(--text); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
}
.hamburger:hover{background:var(--surface-2);}
@media (min-width:1024px){ .hamburger{display:none;} }

/* 移动端抽屉：分组 + 大触摸目标 */
.nav-drawer{
  position:fixed; top:58px; right:0; bottom:0; width:min(88vw,360px); z-index:55;
  background:var(--bg-elev); border-left:1px solid var(--line-strong);
  box-shadow:var(--shadow-3); overflow-y:auto; padding:var(--space-4) var(--space-3);
  /* 关闭时用 visibility + 位移隐藏；同时避免溢出撑大页面宽度
     （fixed + translate 会让元素仍在文档滚动区内，故配合 visibility 与 max-width 约束） */
  transform:translateX(101%); visibility:hidden;
  transition:transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  will-change:transform;
}
.nav-drawer[data-open="true"]{
  transform:none; visibility:visible;
  transition:transform var(--dur-base) var(--ease-out), visibility 0s;
}
@media (min-width:1024px){ .nav-drawer{display:none;} }
.drawer-group{margin:0 0 var(--space-4);}
.drawer-group dt{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); padding:0 0 6px 10px; border-left:2px solid var(--accent);
  margin-bottom:4px;
}
.drawer-group dd{margin:0; display:flex; flex-direction:column;}
.drawer-group a,.drawer-group button{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:44px; padding:10px 12px; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:var(--fs-base); color:var(--text);
  text-decoration:none; background:transparent; border:none; cursor:pointer; text-align:left; width:100%;
}
.drawer-group a:hover,.drawer-group button:hover{background:var(--surface-2);}
.drawer-group a[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:700;}
/* 抽屉遮罩 */
.nav-scrim{
  position:fixed; inset:0; z-index:54; background:rgba(10,13,19,.5);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav-scrim[data-open="true"]{
  opacity:1; visibility:visible;
  transition:opacity var(--dur-base) var(--ease-out), visibility 0s;
}

/* ==========================================================================
   6. Tailwind 中性色兼容映射 —— 让历史模板零改写跟随主题
   （只映射中性装饰色；语义色如 blue-600 / red-600 / emerald 另有专门映射）
   ========================================================================== */
.bg-white{background-color:var(--surface) !important;}
.bg-gray-50,.bg-gray-100{background-color:var(--surface-2) !important;}
.bg-gray-200{background-color:var(--surface-3) !important;}
.text-gray-900,.text-gray-800{color:var(--text) !important;}
.text-gray-700{color:var(--text) !important;}
.text-gray-600,.text-gray-500{color:var(--muted) !important;}
.text-gray-400{color:var(--muted) !important;}
.border-gray-100,.border-gray-200{border-color:var(--line) !important;}
.border-gray-300{border-color:var(--line-strong) !important;}
.divide-gray-100 > * + *,.divide-gray-200 > * + *{border-color:var(--line) !important;}
.hover\:bg-gray-50:hover,.hover\:bg-gray-100:hover{background-color:var(--surface-2) !important;}
.hover\:text-gray-900:hover{color:var(--text) !important;}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--accent-soft) !important;}

/* ==========================================================================
   6.1 浅底面板作用域（.light-panel）—— 修复「浅色卡片里文字看不清」

   背景：上面第 6 节把 text-gray-500/800 统一映射为深色主题的
   --muted(#a2b0c2) / --text(#eef2f7)。但部分卡片自身是**浅色渐变底**
   （如首页价格区 from-red-50 to-orange-50），深色主题的浅字压浅底后
   实测对比度仅 1.85:1（WCAG AA 要求 4.5:1），运营反馈「价格看不清」。

   解法：给这类浅底卡片加 .light-panel 标记，在其作用域内把中性色
   重新固定为深灰色阶（不随主题漂移），保证任何主题下浅底都可读。
   语义色（red-600 / orange-600）本就足够醒目，不在此覆盖。
   ========================================================================== */
.light-panel .text-gray-900,
.light-panel .text-gray-800{color:#1f2937 !important;}   /* 值：深灰，对比度 ≈ 12:1 */
.light-panel .text-gray-700{color:#374151 !important;}
.light-panel .text-gray-600,
.light-panel .text-gray-500{color:#4b5563 !important;}   /* 标签：中深灰，对比度 ≈ 7:1 */
.light-panel .text-gray-400{color:#6b7280 !important;}   /* 次要：对比度 ≈ 4.8:1 */

/* ==========================================================================
   6. 既有组件类重定义（原 base.html 的 @apply 定义在此升级）
   ========================================================================== */
.card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-1) !important;
  position:relative;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2) !important;}
.card-pad{padding:var(--space-5) !important;}
@media (max-width:767px){ .card-pad{padding:var(--space-4) !important;} }

.card-title{
  font-family:var(--font-mono) !important;
  font-size:10px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  font-weight:500 !important;
  margin-bottom:var(--space-3) !important;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}

/* ---------- 记忆点 ③：编辑风数据卡 ---------- */
.metric{
  font-family:var(--font-mono) !important;
  font-weight:700 !important;
  font-size:clamp(2rem,4.2vw,2.6rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.03em !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--text) !important;
}
.card > .metric{display:block;}
/* 顶部语义色条：由卡片自身 tone 决定 */
.card[data-tone]::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-md) var(--radius-md) 0 0;}
.card[data-tone="drop"]::before{background:var(--drop);}
.card[data-tone="rise"]::before{background:var(--rise);}
.card[data-tone="warn"]::before{background:var(--warn);}
.card[data-tone="accent"]::before{background:var(--accent);}

/* 涨价 / 跌价数字色（业务语义保留） */
.text-emerald-600,.text-emerald-700,.text-green-600,.text-green-700{color:var(--drop) !important;}
.text-red-600,.text-red-700,.text-rose-600,.text-rose-700{color:var(--rise) !important;}
.text-amber-600,.text-amber-700,.text-yellow-600{color:var(--warn) !important;}
.text-blue-600,.text-blue-700{color:var(--ok) !important;}
.text-brand-500,.text-brand-600{color:var(--accent) !important;}

/* 标签 */
.tag{
  display:inline-flex !important; align-items:center; gap:5px;
  padding:3px 9px !important; border-radius:999px !important;
  font-family:var(--font-mono) !important; font-size:11px !important;
  letter-spacing:.03em !important; font-weight:500 !important;
  border:1px solid transparent !important; white-space:nowrap;
}
.tag-drop,.bg-emerald-50.text-emerald-700,.bg-green-50.text-green-700{
  color:var(--drop) !important; border-color:color-mix(in srgb,var(--drop) 40%,transparent) !important;
  background:color-mix(in srgb,var(--drop) 10%,transparent) !important;
}
.tag-rise,.bg-red-50.text-red-600,.bg-rose-50.text-rose-600{
  color:var(--rise) !important; border-color:color-mix(in srgb,var(--rise) 40%,transparent) !important;
  background:color-mix(in srgb,var(--rise) 10%,transparent) !important;
}
.tag-strike,.bg-amber-50.text-amber-700,.bg-yellow-50.text-yellow-700{
  color:var(--warn) !important; border-color:color-mix(in srgb,var(--warn) 40%,transparent) !important;
  background:color-mix(in srgb,var(--warn) 10%,transparent) !important;
}
.tag-ok,.bg-blue-50.text-blue-700{
  color:var(--ok) !important; border-color:color-mix(in srgb,var(--ok) 40%,transparent) !important;
  background:color-mix(in srgb,var(--ok) 10%,transparent) !important;
}
.tag-off,.bg-gray-100.text-gray-500,.bg-gray-50.text-gray-500{
  color:var(--muted) !important; border-color:var(--line) !important; background:var(--surface-2) !important;
}
.link{color:var(--ok) !important; text-decoration:none;}
.link:hover{color:var(--accent) !important; text-decoration:underline; text-underline-offset:3px;}

/* 按钮 */
.btn,.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px var(--space-5);
  font-family:var(--font-body); font-size:var(--fs-base); font-weight:700;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  white-space:nowrap;              /* 禁止按钮文字竖排/折行 */
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-primary,.bg-brand-500:not(.tag){
  background:var(--accent) !important; color:var(--accent-contrast) !important;
}
.btn-primary:hover{transform:translateY(-2px); background:var(--accent-hover) !important; box-shadow:var(--shadow-2);}
.btn-ghost{background:transparent !important; color:var(--text) !important; border-color:var(--line-strong) !important;}
.btn-ghost:hover{background:var(--surface-2) !important;}
.btn[disabled],.btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}

/* ---- 历史模板里的彩色实心按钮：统一到主题强调色 ----
   （原为 Tailwind bg-green-600 / bg-blue-600 / bg-indigo-600 等各自为政的颜色，
    在深色主题下过亮且与品牌色冲突。语义上它们都是「主操作」，故统一。） */
.bg-green-600,.bg-blue-600,.bg-indigo-600,.bg-cyan-600,.bg-teal-600,.bg-emerald-600{
  background:var(--accent) !important; color:var(--accent-contrast) !important;
}
.hover\:bg-green-700:hover,.hover\:bg-blue-700:hover,.hover\:bg-indigo-700:hover,
.hover\:bg-cyan-700:hover,.hover\:bg-teal-700:hover,.hover\:bg-emerald-700:hover{
  background:var(--accent-hover) !important;
}
/* 次级/中性按钮 */
.bg-gray-200,.bg-gray-100.text-gray-800,.bg-gray-100.text-gray-700{
  background:var(--surface-2) !important; color:var(--text) !important;
  border:1px solid var(--line-strong);
}
.hover\:bg-gray-300:hover,.hover\:bg-gray-200:hover{background:var(--surface-3) !important;}

/* 移动端：工具条与标题区一律纵向堆叠，避免按钮挤压标题 */
@media (max-width:767px){
  main .flex.justify-between.items-center,
  main .flex.items-center.justify-between{
    flex-wrap:wrap; align-items:flex-start !important; gap:var(--space-3);
  }
  main .flex.justify-between.items-center > *,
  main .flex.items-center.justify-between > *{min-width:0;}
  /* 按钮组在窄屏横向铺开、等宽，触摸目标一致 */
  main .space-x-2{display:flex; gap:var(--space-2); width:100%;}
  main .space-x-2 > *{flex:1 1 0;}
}

/* 通用：所有按钮禁止文字折行成竖排（含 Tailwind 直接写 class 的历史按钮） */
main button,.page-actions button,nav button,.drawer-group button{
  white-space:nowrap;
}
/* 搜索行：输入框与按钮组等宽排布，窄屏也不挤成竖条 */
@media (max-width:767px){
  main .flex.items-center.space-x-2,
  main form .flex.items-center.space-x-2{
    display:flex; flex-wrap:wrap; gap:var(--space-2);
  }
  main .flex.items-center.space-x-2 > input,
  main form .flex.items-center.space-x-2 > input{flex:1 1 100%; min-width:0;}
  main .flex.items-center.space-x-2 > button,
  main form .flex.items-center.space-x-2 > button{flex:1 1 0; min-width:72px;}
}

/* ==========================================================================
   7. 记忆点 ②：大号展示字标题
   分两档，避免「所有页都顶着 48px 大标题」造成层级疲劳：
     · 仪表盘/首页类 → .hero-title（戏剧化大标题）
     · 其余功能页    → 默认 h1（克制的中等展示字）
   ========================================================================== */
main h1,.page-title{
  font-family:var(--font-display) !important;
  font-weight:var(--display-weight) !important;
  font-size:clamp(1.5rem,2.8vw,2rem) !important;
  line-height:1.18 !important;
  letter-spacing:var(--display-tracking) !important;
  color:var(--text) !important;
  margin-bottom:var(--space-2) !important;
  /* 均衡换行：避免窄屏出现孤字尾行 */
  text-wrap:balance;
  overflow-wrap:break-word;
}
/* 首页/仪表盘专用：戏剧化跳跃（至少 2 倍于正文） */
main h1.hero-title{
  font-size:clamp(2rem,5vw,3.25rem) !important;
  line-height:1.08 !important;
  margin-bottom:var(--space-3) !important;
}
main h2{
  font-family:var(--font-display) !important;
  font-weight:var(--display-weight) !important;
  font-size:clamp(1.1rem,1.9vw,1.35rem) !important;
  letter-spacing:var(--display-tracking) !important;
  color:var(--text) !important;
}
main h3{font-family:var(--font-body) !important; font-weight:700 !important; color:var(--text) !important;}

/* 统一页头：标题区 + 操作区（窄屏自动纵向堆叠，操作按钮独占一行） */
.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap;
}
.page-head > div:first-child{min-width:0; flex:1 1 auto;}
.page-actions{
  display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap;
  flex:0 0 auto;
}
@media (max-width:767px){
  .page-head{margin-bottom:var(--space-4);}
  .page-actions{width:100%; flex:1 1 100%;}
  .page-actions > *{flex:1 1 0; min-width:0;}
  .page-actions button{font-size:var(--fs-sm); padding:10px 12px;}
}

/* 规则线：页面 / 区块分隔的编辑化处理 */
.page-rule{height:3px; background:var(--rule-accent); margin:var(--space-4) 0 var(--space-5);}
/* 等宽元信息条：版本号 / 口径 / 时间戳这类「终端感」元数据 */
.kv-strip{
  display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5);
  margin-top:var(--space-3);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--muted); letter-spacing:.05em;
}
.kv-strip b{color:var(--text); font-weight:700; font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2);
  white-space:nowrap;
}
@media (max-width:767px){
  .eyebrow{font-size:9px; letter-spacing:.14em;}
}
.eyebrow::after{content:""; height:1px; flex:1; background:var(--line-strong); min-width:12px;}

/* ==========================================================================
   8. 记忆点 ①：终端风状态 ticker
   ========================================================================== */
.tk-bar{
  display:flex; align-items:stretch; height:34px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  overflow:hidden; position:relative;
}
.tk-badge{
  flex:0 0 auto; z-index:2; display:flex; align-items:center; gap:6px;
  padding:0 var(--space-4); background:var(--accent); color:var(--accent-contrast);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; font-weight:700;
  position:relative;
}
/* 滚动视口独立成列：从 badge 右边缘开始（badge 不是覆盖层，不再遮挡首项） */
.tk-viewport{
  flex:1 1 auto; min-width:0; overflow:hidden; position:relative;
  display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
.tk-track{
  display:inline-flex; align-items:center; white-space:nowrap;
  will-change:transform; animation:tk-scroll 52s linear infinite;
  padding-left:12px;
}
.tk-bar:hover .tk-track{animation-play-state:paused;}
.tk-item{
  display:inline-flex; align-items:center; gap:8px; padding:0 var(--space-5);
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.05em; color:var(--muted);
}
.tk-item b{color:var(--text); font-weight:700; font-variant-numeric:tabular-nums;}
.tk-sep{color:var(--line-strong);}
.tk-up{color:var(--rise);} .tk-down{color:var(--drop);} .tk-warn{color:var(--warn);}
@keyframes tk-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* 状态灯 */
.tk-led{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;}
.tk-led-live{background:var(--drop); animation:tk-pulse 1.9s var(--ease-out) infinite;}
.tk-led-warn{background:var(--warn); animation:tk-pulse 2.6s var(--ease-out) infinite;}
@keyframes tk-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--drop) 55%,transparent);}
  70%{box-shadow:0 0 0 7px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}

/* 主题切换按钮（右上角） */
.tk-theme-btn{
  display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:6px 12px;
  border:1px solid var(--line-strong); border-radius:999px; background:transparent; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--muted);
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tk-theme-btn:hover{color:var(--text); border-color:var(--accent); background:var(--accent-soft);}
.tk-theme-btn .tk-led{background:var(--accent);}

/* ==========================================================================
   9. 表格：宽屏表格 / 窄屏卡片（移动端不横滚）
   ========================================================================== */
table{width:100%; border-collapse:collapse;}
/* 沿用既有规则：次要列在 <1023px 隐藏（平板即收起），保证主信息可读 */
@media (max-width:1023px){ .col-opt{display:none !important;} }
thead th{
  text-align:left; white-space:nowrap; padding:10px var(--space-4);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line-strong);
  background:var(--surface-2) !important;
}
tbody td{padding:12px var(--space-4); border-bottom:1px solid var(--line); vertical-align:middle; color:var(--text);}
tbody tr:hover{background:var(--accent-soft) !important;}

/* 表格内 flex 布局防塌缩：
   历史模板里有 <div class="min-w-0"> 缺少 flex-1 的情况，
   在窄列中会把商品名压成逐字竖排。这里统一兜底。 */
tbody td .flex.items-start > .min-w-0,
tbody td .flex.items-center > .min-w-0{flex:1 1 auto;}
tbody td img{max-width:none;}
tbody td .font-medium{line-height:1.5; word-break:break-word;}

/* 商品名列最小宽度：列太多时宁可横向滚动，也不把商品名压成竖排。
   用 :has() 精确定位「含图片缩略图的第一个单元格」，不影响其他表格。 */
tbody td:first-child:has(img){min-width:260px;}
tbody td:first-child:has(img) .font-medium{min-width:170px;}
/* 数值列保持紧凑，不参与抢宽 */
tbody td.text-right,
tbody th.text-right{white-space:nowrap;}
td.num,th.num,td.text-right,th.text-right{font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right;}
.sku,.code{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:.04em;}
.product-name,a.product-name{color:var(--text); text-decoration:none; font-weight:500;}
.product-name:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

@media (max-width:767px){
  .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  /* 卡片化仅对显式标注 data-cards 的表格启用（配合每格 data-label）。
     未标注的表格保持原生表格 + 横向滚动，行为与改造前一致，避免列名丢失。 */
  table[data-cards],table[data-cards] thead,table[data-cards] tbody,
  table[data-cards] tr,table[data-cards] td,table[data-cards] th{display:block; width:100%;}
  table[data-cards] thead{display:none;}
  table[data-cards] tbody tr{
    border:1px solid var(--line); border-radius:var(--radius-md);
    margin-bottom:var(--space-3); padding:var(--space-3); background:var(--surface);
  }
  table[data-cards] tbody td{border:none; padding:5px 0; display:flex; justify-content:space-between; gap:var(--space-4);}
  table[data-cards] tbody td::before{
    content:attr(data-label); font-family:var(--font-mono); font-size:10px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted); flex-shrink:0;
  }
  td.num,td.text-right{text-align:right;}
}

/* ==========================================================================
   10. 输入控件 / 表单（错误态保留输入）
   ========================================================================== */
input[type="text"],input[type="search"],input[type="number"],input[type="date"],select,textarea{
  background:var(--surface) !important; color:var(--text) !important;
  border:1px solid var(--line-strong) !important; border-radius:var(--radius-sm);
  padding:10px var(--space-3); min-height:44px; font-size:var(--fs-base);
  font-family:var(--font-body);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent) !important;}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.8;}
[data-invalid="true"] input,[data-invalid="true"] select{border-color:var(--rise) !important;}
.field-error{display:none; font-size:var(--fs-xs); color:var(--rise); margin-top:4px;}
[data-invalid="true"] .field-error{display:block;}

/* 加载 / 空态 */
.loading{opacity:.55; pointer-events:none;}
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:220% 100%; animation:tk-shimmer 1.3s linear infinite; border-radius:var(--radius-sm);
}
@keyframes tk-shimmer{from{background-position:180% 0;} to{background-position:-40% 0;}}
.empty-state{
  padding:var(--space-6) var(--space-4); text-align:center; color:var(--muted);
  border:2px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--surface-2);
}
.empty-state strong{display:block; font-family:var(--font-display); font-size:var(--fs-lg); color:var(--text); margin-bottom:6px;}

/* 滚动条（桌面端子感） */
@media (min-width:768px){
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:0; border:2px solid var(--bg);}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent);}
}

/* ==========================================================================
   11. 动效编排与降级
   ========================================================================== */
.tk-reveal{opacity:0; transform:translateY(22px);}
.tk-reveal.is-in{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.tk-reveal[data-d="1"].is-in{transition-delay:80ms;}
.tk-reveal[data-d="2"].is-in{transition-delay:160ms;}
.tk-reveal[data-d="3"].is-in{transition-delay:240ms;}
.tk-reveal[data-d="4"].is-in{transition-delay:320ms;}
.tk-reveal[data-d="5"].is-in{transition-delay:400ms;}

/* 尊重系统偏好：关闭全部装饰动效 */
@media (prefers-reduced-motion: reduce){
  .tk-reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .tk-track{animation:none !important;}
  .tk-led-live,.tk-led-warn{animation:none !important;}
  .skeleton{animation:none !important;}
  *{scroll-behavior:auto !important;}
  .card,.btn{transition:none !important;}
}

/* ==========================================================================
   12. 仪表盘 · 指标下钻抽屉（Drill-down Drawer）
   —— 点击指标卡 / 图表元素，右侧滑出商品清单。
      与仪表盘同一套令牌，不跳页、不打断上下文。
   ========================================================================== */

/* 可下钻元素：给出明确的可点击暗示（右侧箭头 + hover 抬升） */
[data-drill]{
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
[data-drill]:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2) !important;
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line) ) !important;
}
[data-drill]:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
/* 卡片右下角的下钻提示 */
.drill-hint{
  position:absolute; right:10px; bottom:8px;
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  color:var(--muted); opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
[data-drill]:hover .drill-hint{opacity:1; color:var(--accent);}

/* 遮罩 */
.drill-scrim{
  position:fixed; inset:0; z-index:80; background:rgba(10,13,19,.48);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.drill-scrim[data-open="true"]{
  opacity:1; visibility:visible;
  transition:opacity var(--dur-base) var(--ease-out), visibility 0s;
}

/* 抽屉主体
   注意：z-index 必须高于导航栏（#site-header 为 30）。
   早期版本用 71，被独立的导航层叠上下文盖住，导致抽屉标题被遮。
   这里提到 90/91，并置于 body 直系（不受 header 上下文影响）。 */
.drill-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:91;
  width:min(94vw, 880px);
  display:flex; flex-direction:column;
  background:var(--bg-elev);
  border-left:1px solid var(--line-strong);
  box-shadow:var(--shadow-3);
  transform:translateX(101%); visibility:hidden;
  transition:transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.drill-panel[data-open="true"]{
  transform:none; visibility:visible;
  transition:transform var(--dur-base) var(--ease-out), visibility 0s;
}
@media (max-width:767px){
  .drill-panel{width:100vw; top:0;}   /* 手机全屏，避免内容被压扁 */
}

/* 头部 */
.drill-head{
  padding:var(--space-4) var(--space-4) var(--space-3);
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3);
  flex-shrink:0;
}
.drill-title{
  font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:var(--fs-lg); letter-spacing:var(--display-tracking);
  color:var(--text); margin:0; line-height:1.2;
}
.drill-sub{
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted);
  letter-spacing:.04em; margin-top:4px;
}
.drill-sub b{color:var(--accent); font-variant-numeric:tabular-nums;}
.drill-close{
  flex-shrink:0; width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  color:var(--text); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drill-close:hover{background:var(--accent-soft); color:var(--accent);}

/* 工具条 */
.drill-tools{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center;
  background:var(--surface-2); flex-shrink:0;
}
.drill-tools input[type="search"]{flex:1 1 200px; min-width:0; min-height:40px;}
.drill-tools select{min-height:40px; padding:8px var(--space-2);}
.drill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:8px var(--space-3);
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:700;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drill-btn:hover{background:var(--surface-3);}
.drill-btn.primary{background:var(--accent); color:var(--accent-contrast); border-color:transparent;}
.drill-btn.primary:hover{background:var(--accent-hover);}
.drill-btn[disabled]{opacity:.5; cursor:not-allowed;}

/* 表体 */
.drill-body{flex:1; overflow-y:auto; overflow-x:auto; padding:var(--space-3) var(--space-4);}
.drill-body table{font-size:var(--fs-sm); min-width:100%;}
.drill-body thead th{position:sticky; top:0; z-index:1;}
/* 商品名列：图片 + 名称 + 编码，宽度下限防止塌缩 */
.drill-body td.d-name{min-width:200px;}
.drill-prod{display:flex; align-items:flex-start; gap:10px;}
.drill-thumb{
  width:40px; height:40px; border-radius:var(--radius-sm); flex-shrink:0;
  object-fit:contain; background:var(--surface-2); border:1px solid var(--line);
}
.drill-prod-txt{flex:1 1 auto; min-width:0;}
.drill-prod-name{
  color:var(--text); font-weight:500; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
.drill-prod-code{
  font-family:var(--font-mono); font-size:10px; color:var(--muted);
  letter-spacing:.04em; margin-top:2px;
}
/* 双详情链接 */
.drill-links{display:flex; gap:6px; flex-wrap:wrap;}
.drill-link{
  display:inline-flex; align-items:center; gap:3px;
  min-height:30px; padding:4px 8px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  color:var(--ok); text-decoration:none; border:1px solid color-mix(in srgb,var(--ok) 34%,transparent);
  background:color-mix(in srgb,var(--ok) 8%,transparent);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drill-link:hover{background:var(--ok); color:var(--accent-contrast);}
.drill-link.final{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 34%,transparent); background:var(--accent-soft);}
.drill-link.final:hover{background:var(--accent); color:var(--accent-contrast);}

/* 状态徽标（下钻面板内，比全站 tag 更紧凑） */
.drill-flag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:999px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; white-space:nowrap;
}
.drill-flag.ok{color:var(--drop); background:color-mix(in srgb,var(--drop) 12%,transparent);}
.drill-flag.off{color:var(--warn); background:color-mix(in srgb,var(--warn) 12%,transparent);}
.drill-flag.dead{color:var(--muted); background:var(--surface-2);}

/* 页脚分页 */
.drill-foot{
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap; flex-shrink:0;
  background:var(--surface-2);
}
.drill-page-info{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:.04em;}
.drill-page-info b{color:var(--text); font-variant-numeric:tabular-nums;}
.drill-pager{display:flex; align-items:center; gap:6px;}
.drill-pager .drill-btn{padding:6px 10px; min-height:36px;}

/* 空态 / 加载态 */
.drill-empty{
  padding:var(--space-8) var(--space-4); text-align:center; color:var(--muted);
  border:2px dashed var(--line-strong); border-radius:var(--radius-md);
  background:var(--surface); margin:var(--space-4) 0;
}
.drill-empty strong{
  display:block; font-family:var(--font-display); font-size:var(--fs-md);
  color:var(--text); margin-bottom:6px;
}
.drill-skel{padding:4px 0;}
.drill-skel-row{
  height:46px; margin-bottom:6px; border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:220% 100%; animation:tk-shimmer 1.3s linear infinite;
}

/* 图表下钻：让可点击的图形元素有手型与聚焦态 */
canvas[data-drill-chart]{cursor:pointer;}
.legend-click{cursor:pointer; transition:color var(--dur-fast) var(--ease-out);}
.legend-click:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  .drill-panel,.drill-scrim,[data-drill]{transition:none !important;}
  .drill-skel-row{animation:none !important;}
  [data-drill]:hover{transform:none;}
}

/* ==========================================================================
   13. 仪表盘指标卡 · 口径拆项（商品总数 → 在架 / 已下架）
   —— 用两个可点击小块承载细分口径，避免主数值含义被稀释。
   ========================================================================== */
.split-kv{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px;
  margin-top:var(--space-3); padding-top:var(--space-3);
  border-top:1px dashed var(--line);
}
.split-kv.compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.split-item{
  display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  min-height:44px; padding:6px 8px; cursor:pointer;
  min-width:0; overflow:hidden;              /* 防长文本把网格轨道撑破卡片 */
  background:var(--surface-2); border:1px solid transparent;
  border-radius:var(--radius-sm); text-align:left; font-family:inherit;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.split-item:hover{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.split-label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.split-value{
  font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:var(--fs-md); color:var(--text); line-height:1.2;
}
.split-note{
  font-family:var(--font-mono); font-size:9px; color:var(--muted);
  letter-spacing:.02em; line-height:1.3;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.split-item.danger .split-value{color:var(--muted);}
.split-item.danger:hover{background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 40%,transparent);}
@media (max-width:420px){
  .split-kv{grid-template-columns:1fr;}
}

/* 降价卡内的窗口选择器（替代原静态「近 N 天」标签） */
.window-picker{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  color:var(--drop); background:color-mix(in srgb,var(--drop) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--drop) 40%,transparent);
  border-radius:999px; padding:3px 8px; cursor:pointer;
  min-height:26px; line-height:1;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.window-picker:hover{background:color-mix(in srgb,var(--drop) 20%,transparent);}
.window-picker:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* 加载中禁用态 */
.card[data-loading="true"]{opacity:.62; pointer-events:none;}

/* 图表卡标题的辅助说明 */
.chart-hint{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
  color:var(--muted); font-weight:400; text-transform:none;
  opacity:0; transition:opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.card:hover .chart-hint{opacity:1; color:var(--accent);}
.unit-note{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.04em;
  color:var(--muted); font-weight:400; text-transform:none; margin-left:4px;
}
/* 触屏无 hover：始终显示提示，避免功能不可发现 */
@media (hover: none){
  .chart-hint{opacity:.75;}
  .drill-hint{opacity:.75;}
}

/* 下钻表格：表头与数据列对齐补强
   —— 数值列右对齐、状态与操作列居中，避免「标题看起来偏左」的视觉错位 */
.drill-body table th.text-center,
.drill-body table td.text-center{text-align:center;}
.drill-body table td .drill-links{justify-content:center;}
.drill-body table thead th{font-weight:500;}

/* 划线折扣卡的窗口选择器（warn 语义色，与降价卡的 drop 绿区分） */
.window-picker.warn{
  color:var(--warn);
  background:color-mix(in srgb, var(--warn) 10%, transparent);
  border-color:color-mix(in srgb, var(--warn) 40%, transparent);
}
.window-picker.warn:hover{
  background:color-mix(in srgb, var(--warn) 20%, transparent);
}

/* ==========================================================================
   14. 仪表盘 · 最近任务提示（sys_task_log 队列状态口径说明）
   —— PENDING 的排队记录容易被误读成「当前抓取失败」，加视觉标记与注释行。
   ========================================================================== */
.kv-task{position:relative; cursor:help;}
.kv-task-stale{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
  color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 36%, transparent);
  vertical-align:1px;
}
.task-note{
  margin-top:8px; padding:8px 12px; border-radius:var(--radius-sm);
  font-size:var(--fs-xs); line-height:1.6; color:var(--muted);
  background:color-mix(in srgb, var(--warn) 7%, transparent);
  border-left:3px solid color-mix(in srgb, var(--warn) 55%, transparent);
}
.task-note code{
  font-family:var(--font-mono); font-size:10px; color:var(--text);
  background:var(--surface-3); padding:1px 4px; border-radius:4px;
}
.task-note b{color:var(--text);}