/* ================================================================
   tokens.css — 淘淘有梦运营系统唯一设计变量源
   所有页面必须通过此文件获取颜色、间距、圆角、字体等变量。
   不允许任何 HTML 内联 <style> 再次定义 :root 变量。

   设计锚点：TT-DESIGN.md（Linear 风格）
   变量命名规范：
   - 语义色：--c-{语义}  如 --c-good / --c-warn / --c-bad
   - 层级色：--c-bg / --c-bg2 / --c-bg3 / --c-card / --c-card-hover

   最后更新：2026-05-19（P3.1 合并3层light补丁为单一块）
   ================================================================ */

/* ===== 主色板（Dark Theme — warm graphite） ===== */
:root {
  /* 背景层级：使用不透明暖中性色，避免透明叠层变成纯黑块。 */
  --c-bg:             #121416;
  --c-bg2:            #181b1f;
  --c-bg3:            #22262b;

  /* 卡片/面板：实色分层，保证表格、弹窗和嵌套区域边界稳定。 */
  --c-card:           #1a1d21;
  --c-card-hover:     #24282e;
  --c-card-subtle:    #1e2227;
  --c-card-active:    #2a2f36;

  /* accent alpha — color-mix 派生,改一处 --c-accent 全部跟随 */
  --c-accent-04:     color-mix(in srgb, var(--c-accent) 4%, transparent);
  --c-accent-06:     color-mix(in srgb, var(--c-accent) 6%, transparent);
  --c-accent-10:     color-mix(in srgb, var(--c-accent) 10%, transparent);
  --c-accent-12:     color-mix(in srgb, var(--c-accent) 12%, transparent);
  --c-accent-14:     color-mix(in srgb, var(--c-accent) 14%, transparent);
  --c-accent-16:     color-mix(in srgb, var(--c-accent) 16%, transparent);
  --c-accent-18:     color-mix(in srgb, var(--c-accent) 18%, transparent);
  --c-accent-24:     color-mix(in srgb, var(--c-accent) 24%, transparent);
  --c-accent-28:     color-mix(in srgb, var(--c-accent) 28%, transparent);
  --c-accent-50:     color-mix(in srgb, var(--c-accent) 50%, transparent);
  /* semantic alpha — 同样派生,无需在 light 里重写 */
  --c-good-10:       color-mix(in srgb, var(--c-good) 10%, transparent);
  --c-good-22:       color-mix(in srgb, var(--c-good) 22%, transparent);
  --c-warn-10:       color-mix(in srgb, var(--c-warn) 10%, transparent);
  --c-warn-22:       color-mix(in srgb, var(--c-warn) 22%, transparent);
  --c-warn-28:       color-mix(in srgb, var(--c-warn) 28%, transparent);
  --c-bad-10:        color-mix(in srgb, var(--c-bad) 10%, transparent);
  --c-bad-22:        color-mix(in srgb, var(--c-bad) 22%, transparent);
  --c-bad-28:        color-mix(in srgb, var(--c-bad) 28%, transparent);
  --c-info-18:       color-mix(in srgb, var(--c-info) 18%, transparent);

  --c-border-faint:   rgba(232,235,238,0.07);
  --c-table-head:     #24282e;
  --c-table-row:      #1a1d21;
  --c-table-row-alt:  #1d2025;
  --c-table-row-hover:#282d34;
  --c-sticky-shadow:  rgba(0,0,0,.36);

  /* 边框：半透明白，不用实色 border */
  --c-border:         rgba(232,235,238,0.11);
  --c-border-subtle:  rgba(232,235,238,0.075);
  --c-border-hi:      rgba(232,235,238,0.18);
  --c-border-solid:   #353b43;

  /* 文本：非纯白 */
  --c-text:           #f3f4f5;
  --c-text2:          #d4d8dc;
  --c-text3:          #a0a7b0;
  --c-text4:          #7e8690;

  /* 强调色：琥珀用于选中和主操作，避免深色界面被紫蓝色统治。 */
  --c-accent:         #f4b740;
  --c-accent-hover:   #ffd166;
  --c-accent-violet:  #dc9b24;
  --c-accent-muted:   #b47a16;
  --c-on-accent:      #241805;

  /* 语义色 */
  --c-good:           #55c987;
  --c-warn:           #f4c95d;
  --c-bad:            #ff8582;
  --c-info:           #6bb8eb;
  
  /* 语义色背景（用于卡片、徽章等） */
  --c-good-bg:        rgba(85,201,135,.13);
  --c-warn-bg:        rgba(244,201,93,.13);
  --c-bad-bg:         rgba(255,133,130,.12);
  --c-info-bg:        rgba(107,184,235,.13);
  
  /* 语义色边框 */
  --c-good-border:    rgba(85,201,135,.30);
  --c-warn-border:    rgba(244,201,93,.30);
  --c-bad-border:     rgba(255,133,130,.30);
  --c-info-border:    rgba(107,184,235,.30);

  /* 圆角：6/8/12/999 */
  --r-sm:             6px;
  --r-md:             8px;
  --r-lg:             12px;
  --r-pill:           999px;

  /* 间距 base unit: 8px */
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-6:             24px;
  --sp-8:             32px;
  --sp-10:            40px;
  --sp-12:            48px;

  /* 字体 */
  /* 优化字体栈：添加更多备选字体，提升跨平台一致性 */
  --font:             'Inter', 'SF Pro Display', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  
  /* 字号层级 - 优化视觉差异 */
  --fs-hero-xl:       32px;
  --fs-hero-lg:       28px;
  --fs-heading-md:    20px;
  --fs-heading-sm:    18px;
  --fs-body:          13px;
  --fs-small:         12px;
  --fs-label:         11px;
  --fs-micro:         10px;
  --fs-value-lg:      28px;
  --fs-value-sm:      12px;
  
  /* 字重 */
  --fw-normal:        400;
  --fw-medium:        510;
  --fw-semibold:      590;
  --fw-bold:          700;
  
  /* 行高 - 针对中文优化 */
  --lh-tight:         1.08;
  --lh-heading:       1.18;
  --lh-body:          1.7;
  --lh-relaxed:       1.75;
  
  /* 字间距 */
  --ls-tight:         -1px;
  --ls-normal:        0;
  --ls-wide:          0.5px;
  --ls-wider:         1px;

  /* === Modal/Overlay/Tooltip 暗色专用 === */
  --c-overlay:            rgba(9,10,11,0.70);
  --c-modal-bg:           #20242a;
  --c-modal-border:       var(--c-border);
  --c-modal-shadow:       0 24px 80px rgba(0,0,0,0.38);
  --c-modal-input-bg:     #171a1e;
  --c-modal-input-border: var(--c-border);
  --c-modal-footer-from:  rgba(32,36,42,0);
  --c-modal-footer-to:    #20242a;
  --c-tooltip-bg:         #2a2f36;
  --c-tooltip-text:       #f3f4f5;
  --c-tooltip-shadow:     0 2px 8px rgba(0,0,0,0.3);
  --c-drawer-overlay:     rgba(0,0,0,0.4);
  --c-input-bg:           #171a1e;
  --c-input-bg-hover:     #20242a;
  --c-input-border:       var(--c-border);
  --c-input-ring:         rgba(244,183,64,0.48);
  --c-footer-border:      rgba(232,235,238,0.10);

  /* === Elevation(Dark)6 阶 + edge highlight === */
  --edge-hi:              inset 0 1px 0 rgba(255,255,255,0.035);
  --elev-0:               none;
  --elev-1:               0 1px 2px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
  --elev-2:               0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  --elev-3:               0 16px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
  --elev-popover:         0 12px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  --elev-modal:           0 30px 84px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.045);

  /* === Motion === */
  --ease-out:             cubic-bezier(.2,.7,.2,1);
  --ease-in:              cubic-bezier(.7,0,.84,0);
  --ease-inout:           cubic-bezier(.65,0,.35,1);
  --ease-spring:          cubic-bezier(.34,1.56,.64,1);
  --dur-instant:          60ms;
  --dur-fast:             140ms;
  --dur-base:             220ms;
  --dur-slow:             340ms;

  /* === Z-index 体系 === */
  --z-base:               1;
  --z-sticky:             100;
  --z-dropdown:           1000;
  --z-overlay:            9000;
  --z-modal:              9500;
  --z-popover:            9700;
  --z-toast:              9800;
  --z-tooltip:            9900;

  /* === 交互状态变量(收回 :root 作用域) === */
  --skeleton-bg:          var(--c-card);
  --skeleton-shine:       var(--c-card-hover);
  --loading-bg:           var(--c-card);
  --loading-border:       var(--c-border);
  --loading-icon-color:   var(--c-accent);
  --empty-bg:             var(--c-card);
  --empty-border:         var(--c-border);
  --empty-icon-color:     var(--c-text3);
  --empty-text-color:     var(--c-text2);
  --error-bg:             var(--c-bad-bg);
  --error-border:         var(--c-bad-border);
  --error-icon-color:     var(--c-bad);
  --error-text-color:     var(--c-bad);
  --active-transform:     translateY(0);
  --active-scale:         0.98;
  --focus-ring:           0 0 0 2px var(--c-accent-50);
}

/* ===== Light Theme — 单一块，无冗余 ===== */
[data-theme='light'] {
  /* 背景层级 */
  --c-bg:             #f8fafc;
  --c-bg2:            #ffffff;
  --c-bg3:            #e2e8f0;

  /* 卡片/面板 */
  --c-card:           #ffffff;
  --c-card-hover:     #f1f5f9;
  --c-card-subtle:    #f8fafc;
  --c-card-active:    #e2e8f0;
  --c-border-faint:   #f1f5f9;
  --c-table-head:     #f8fafc;
  --c-table-row:      #ffffff;
  --c-table-row-alt:  #f8fafc;
  --c-table-row-hover:#f1f5f9;
  --c-sticky-shadow:  rgba(15,23,42,.18);

  /* 边框 */
  --c-border:         #e2e8f0;
  --c-border-subtle:  #f1f5f9;
  --c-border-hi:      #94a3b8;
  --c-border-solid:   #cbd5e1;

  /* 文本 */
  --c-text:           #0f172a;
  --c-text2:          #374151;
  --c-text3:          #64748b;
  --c-text4:          #94a3b8;

  /* 强调色 */
  --c-accent:         #e59a12;
  --c-accent-hover:   #c77e08;
  --c-accent-violet:  #d97706;
  --c-accent-muted:   #92400e;
  --c-on-accent:      #241805;

  /* 语义色（亮色下用深色变体，保证在白底上可读） */
  --c-good:           #16a34a;
  --c-warn:           #d97706;
  --c-bad:            #dc2626;
  --c-info:           #0284c7;
  
  /* 语义色背景（用于卡片、徽章等） */
  --c-good-bg:        rgba(22,163,74,.08);
  --c-warn-bg:        rgba(217,119,6,.08);
  --c-bad-bg:         rgba(220,38,38,.06);
  --c-info-bg:        rgba(2,132,199,.08);
  
  /* 语义色边框 */
  --c-good-border:    rgba(22,163,74,.16);
  --c-warn-border:    rgba(217,119,6,.16);
  --c-bad-border:     rgba(220,38,38,.16);
  --c-info-border:    rgba(2,132,199,.16);

  /* accent alpha */
  --c-accent-06: rgba(245,158,11,.06);
  --c-accent-10: rgba(245,158,11,.10);
  --c-accent-12: rgba(245,158,11,.12);
  --c-accent-14: rgba(245,158,11,.14);
  --c-accent-16: rgba(245,158,11,.16);
  --c-accent-18: rgba(245,158,11,.18);
  --c-accent-24: rgba(245,158,11,.24);
  --c-accent-28: rgba(245,158,11,.28);
  --c-accent-50: rgba(245,158,11,.50);
  /* semantic alpha */
  --c-bad-10: rgba(220,38,38,.10);
  --c-bad-22: rgba(220,38,38,.22);
  --c-bad-28: rgba(220,38,38,.28);
  --c-good-10: rgba(22,163,74,.10);
  --c-good-22: rgba(22,163,74,.22);
  --c-info-18: rgba(2,132,199,.18);
  --c-warn-10: rgba(217,119,6,.10);
  --c-warn-22: rgba(217,119,6,.22);
  --c-warn-28: rgba(217,119,6,.28);

  /* 阴影（半透明黑，替代暗色的半透明白） */
  --c-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --c-shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);

  /* Modal/Overlay/Tooltip 亮色专用 */
  --c-overlay:            rgba(0,0,0,0.45);
  --c-modal-bg:           #ffffff;
  --c-modal-border:       rgba(0,0,0,0.08);
  --c-modal-shadow:       0 8px 30px rgba(0,0,0,0.12);
  --c-modal-input-bg:     #f8fafc;
  --c-modal-input-border: #e2e8f0;
  --c-modal-footer-from:  rgba(255,255,255,0);
  --c-modal-footer-to:    #ffffff;
  --c-tooltip-bg:         #1e293b;
  --c-tooltip-text:       #ffffff;
  --c-tooltip-shadow:     0 2px 8px rgba(0,0,0,0.15);
  --c-drawer-overlay:     rgba(0,0,0,0.4);
  --c-input-bg:           #ffffff;
  --c-input-bg-hover:     #f1f5f9;
  --c-input-border:       #e2e8f0;
  --c-input-ring:         rgba(245,158,11,0.4);
  --c-footer-border:      rgba(0,0,0,0.06);

  /* === Light Elevation(柔投影,无边缘光) === */
  --edge-hi:              none;
  --elev-1:               0 1px 2px rgba(15,23,42,.06);
  --elev-2:               0 4px 12px rgba(15,23,42,.08);
  --elev-3:               0 12px 32px rgba(15,23,42,.10);
  --elev-popover:         0 8px 24px rgba(15,23,42,.10);
  --elev-modal:           0 24px 60px rgba(15,23,42,.18);
}

/* ===== Legacy color-token compatibility =====
   Older pages used these names before the semantic token contract stabilized.
   Keep them theme-aware so cached legacy assets never degrade to transparent. */
:root,
[data-theme='light'] {
  --c-bg1:           var(--c-bg2);
  --c-card2:         var(--c-card-subtle);
  --c-surface:       var(--c-bg3);
  --c-hover:         var(--c-card-hover);
  --c-text1:         var(--c-text);
  --c-text-soft:     var(--c-text3);
  --c-brand:         var(--c-accent);
  --c-primary:       var(--c-accent);
  --c-primary-hover: var(--c-accent-hover);
  --c-accent2:       var(--c-accent-hover);
  --c-accent-rgb:    245, 158, 11;
  --c-accent-subtle: var(--c-accent-06);
  --c-accent-border: var(--c-accent-24);
  --c-good-18:       color-mix(in srgb, var(--c-good) 18%, transparent);
  --c-warn-18:       color-mix(in srgb, var(--c-warn) 18%, transparent);
  --c-bad-18:        color-mix(in srgb, var(--c-bad) 18%, transparent);
}

/* ===== Light Theme 组件补丁 =====
   策略：
     1. 颜色优先靠 token 自动生效（Light 块已重写 --c-card / --c-text / 等）。
     2. 这里只列举颜色无法覆盖、需要"形态切换"的组件：
        - 卡片：暗色用半透明 → 亮色用实色 + 软阴影
        - 表格：暗色靠透明度分隔 → 亮色需要 head/row 显式着色
        - Hero / Modal：尺寸级元素，需独立调整
     3. 不用 !important，用 [data-theme='light'] 前缀提升特异性。
   ============================================================ */

/* --- 通用控件 --- */
[data-theme='light'] :where(input, select, textarea) {
  background: var(--c-bg2);
  color: var(--c-text);
  border-color: var(--c-border);
}

/* --- 表格（合并版：覆盖 .table / .tt-table / .data-table / .preview-table /
       .task-table / 裸 table，统一一处定义） --- */
[data-theme='light'] :where(table, .table, .tt-table, .data-table, .preview-table, .task-table) {
  color: var(--c-text);
}
[data-theme='light'] :where(.table, .tt-table, .data-table) {
  background: var(--c-card);
}
[data-theme='light'] :where(
  .table th, .tt-table th, .data-table th,
  .preview-table th, .task-table th, table th
) {
  background: var(--c-table-head);
  color: var(--c-text2);
  border-color: var(--c-border);
}
[data-theme='light'] :where(
  .table td, .tt-table td, .data-table td,
  .preview-table td, .task-table td, table td
) {
  background: var(--c-table-row);
  color: var(--c-text);
  border-color: var(--c-border-subtle);
}
[data-theme='light'] :where(
  .table tbody tr:hover td, .tt-table tbody tr:hover td,
  .data-table tbody tr:hover td, .preview-table tbody tr:hover td,
  .task-table tbody tr:hover td
) {
  background: var(--c-table-row-hover);
}

/* --- 嵌入式卡片：用 --c-card 透明感，不要阴影 ---
   这类卡片"贴在"页面背景上，不抢视觉重量。 */
[data-theme='light'] :where(
  .card, .panel, .table-shell, .table-panel, .toolbar,
  .stat, .kpi, .metric, .task-card, .flow-row, .flow-block, .risk-box,
  .queue-card, .helper-card, .goods-card, .empty-box, .import-section,
  .import-summary-card, .import-file-card, .owner-cluster, .owner-stat,
  .signal-card, .owner-box, .filter-item, .pillbox, .mini-card,
  .store-row, .preview-table-wrap
) {
  background: var(--c-card);
  border-color: var(--c-border-subtle);
  color: var(--c-text);
}

/* --- 浮起卡片：用实色 + 软阴影，承载主要内容 ---
   .tt-card / .tt-panel 是新世代默认卡片。 */
[data-theme='light'] :where(
  .role, .state, .empty, .section-toggle,
  .metric-box, .kv-item, .note-item, .kpi-card, .status-card,
  .banner, .problem-card, .role-card, .overview-toggle,
  .maturity-card, .tt-card, .tt-panel, .tt-link-card, .tt-bi-grid,
  .entry-card, .source-card, .flow-card, .staff-card, .store-card,
  .alert-card, .channel-card, .product-card, .owner-card, .pool-card,
  .drill-card, .import-card, .pay-card, .assign-card, .procure-card
) {
  background: var(--c-bg2);
  border-color: var(--c-border);
  box-shadow: var(--c-shadow-sm);
}

/* --- Hero 区：实色背景 + 软阴影（独立块，色调略不同于 .tt-card） --- */
[data-theme='light'] :where(.hero, .tt-hero) {
  background: var(--c-bg2);
  border-color: var(--c-border);
  box-shadow: var(--c-shadow-sm);
}

/* --- Error 卡：红色语义底，单独处理 --- */
[data-theme='light'] .error {
  background: var(--c-bad-bg);
  border-color: var(--c-bad-border);
}

/* --- 次要文本 --- */
[data-theme='light'] :where(
  .muted, .msg, .sub, .s, .l, .k, .desc, .meta, .fine,
  .flow-sub, .flow-block .k, .helper-card p, .helper-card li,
  .queue-card .meta, .queue-card .desc, .goods-empty,
  .reason-box .text, .why, .signal-line, .store-row span,
  .rank, .meta-line, .copy label, .metric span, .note,
  .section-sub, .table-note, .pagination-meta, .page-indicator,
  .hero-side .focus, .msg.info, .flow-no, .mini-note,
  .tag.neutral, .row-flag, .issue-item.info,
  .kpi.kpi-risk-stock .n, .kpi.kpi-risk-owner .n, .sync-msg
) {
  color: var(--c-text2);
}

/* --- 主按钮 --- */
[data-theme='light'] :where(.btn.primary, .seg button.active, .qnh-seg button.active, .view-btn.active) {
  color: #ffffff;
}

/* --- Modal/Drawer --- */
[data-theme='light'] :where(.modal, .drawer, .modal textarea) {
  background: var(--c-card);
  color: var(--c-text);
  border-color: var(--c-border);
}

/* --- Badge/Pill/Tag --- */
[data-theme='light'] .badge { border-color: var(--c-accent-24); color: var(--c-accent); }
[data-theme='light'] .pill { border-color: var(--c-accent-24); }
[data-theme='light'] .nav-link.primary { background: var(--c-accent-12); border-color: var(--c-accent-24); color: var(--c-accent); }
[data-theme='light'] .tag.semi { background: rgba(2,132,199,.08); border-color: rgba(2,132,199,.16); color: var(--c-info); }

/* --- Note-item 左边框 --- */
[data-theme='light'] .note-item { border-left-color: var(--c-accent); background: var(--c-card-hover); }

/* --- 输入框 --- */
[data-theme='light'] select,
[data-theme='light'] input[type="text"],
[data-theme='light'] input[type="month"],
[data-theme='light'] input[type="number"],
[data-theme='light'] input[type="date"],
[data-theme='light'] textarea {
  background: var(--c-bg2);
  border-color: var(--c-border);
  color: var(--c-text);
}

/* --- 问题卡 --- */
/* problem-card 主底色已由"浮起卡片"块覆盖，这里只补 .warn 变体的红边 */
[data-theme='light'] .problem-card.warn { border-color: var(--c-bad-border); }

/* --- 状态药丸 --- */
[data-theme='light'] .pill.draft,
[data-theme='light'] .pill.unlocked { background: rgba(217,119,6,.08); color: var(--c-warn); border-color: transparent; }
[data-theme='light'] .pill.confirmed,
[data-theme='light'] .pill.locked { background: rgba(22,163,74,.08); color: var(--c-good); border-color: transparent; }
[data-theme='light'] .pill.system { background: var(--c-card-hover); color: var(--c-text2); border-color: var(--c-border); }

/* --- 风险药丸 --- */
[data-theme='light'] .risk-high-pill,
[data-theme='light'] .pill.risk-high { background: rgba(220,38,38,.08); color: var(--c-bad); border-color: transparent; }
[data-theme='light'] .risk-mid-pill,
[data-theme='light'] .pill.risk-mid { background: rgba(217,119,6,.08); color: var(--c-warn); border-color: transparent; }
[data-theme='light'] .risk-low-pill,
[data-theme='light'] .pill.risk-low { background: rgba(22,163,74,.08); color: var(--c-good); border-color: transparent; }

/* --- 自动化标签 --- */
[data-theme='light'] .auto-automatic,
[data-theme='light'] .tag.auto { background: rgba(22,163,74,.08); color: var(--c-good); border-color: transparent; }
[data-theme='light'] .auto-semi,
[data-theme='light'] .tag.semi { background: rgba(2,132,199,.08); color: var(--c-info); border-color: transparent; }
[data-theme='light'] .auto-manual,
[data-theme='light'] .tag.manual { background: rgba(217,119,6,.08); color: var(--c-warn); border-color: transparent; }

/* --- Quick-pill / Quick-stats --- */
[data-theme='light'] .quick-pill { background: var(--c-card-hover); border-color: var(--c-border); color: var(--c-text2); }
[data-theme='light'] .quick-pill.high { background: rgba(220,38,38,.08); color: var(--c-bad); border-color: rgba(220,38,38,.16); }
[data-theme='light'] .quick-pill.mid { background: rgba(217,119,6,.08); color: var(--c-warn); border-color: rgba(217,119,6,.16); }
[data-theme='light'] .quick-pill.ok { background: rgba(22,163,74,.08); color: var(--c-good); border-color: rgba(22,163,74,.16); }

/* --- Mini-card --- */
[data-theme='light'] .mini-card { background: var(--c-bg2); border-color: var(--c-border); }

/* --- Settle pill --- */
[data-theme='light'] .settle-ok { background: rgba(22,163,74,.08); color: var(--c-good); }
[data-theme='light'] .settle-wait { background: rgba(217,119,6,.08); color: var(--c-warn); }

/* --- Hero-chip --- */
[data-theme='light'] .hero-chip,
[data-theme='light'] .hero-meta .pill,
[data-theme='light'] .hero-meta .chip { background: var(--c-card-hover); border-color: var(--c-border); color: var(--c-text2); }

/* --- 亮色下移除 inset 白色高光 --- */
[data-theme="light"] [style*="inset 0 1px 0 rgba(255,255,255"] {
  box-shadow: none !important;
}

/* ===== 浮空变量已收回 :root,此处保留空块标记 ===== */

/* Stable first paint while the compiled application shell is loading. */
html[data-tt-shell-booting]:not([data-tt-compiled-shell-ready]),
html[data-tt-app-booting] {
  background: var(--c-bg, #090a0b);
}

html[data-tt-shell-booting]:not([data-tt-compiled-shell-ready]) body > :not(#tt-compiled-shell-root):not(#tt-shell-boot-placeholder) {
  visibility: hidden !important;
}

#tt-shell-boot-placeholder { display: none; }
html[data-tt-shell-booting]:not([data-tt-compiled-shell-ready]) #tt-shell-boot-placeholder,
html[data-tt-app-booting] #tt-shell-boot-placeholder {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  pointer-events: none;
}
.tt-shell-boot-logo,
.tt-shell-boot-brand,
.tt-shell-boot-nav,
.tt-shell-boot-title,
.tt-shell-boot-cards i,
.tt-shell-boot-panel {
  position: fixed;
  display: block;
  background: var(--c-card-hover, #1a1c1f);
  border: 1px solid var(--c-border, #24272b);
  border-radius: 6px;
}
.tt-shell-boot-logo { left: 16px; top: 14px; width: 28px; height: 28px; background: #5e6ad2; border: 0; }
.tt-shell-boot-brand { left: 54px; top: 21px; width: 112px; height: 14px; border: 0; }
.tt-shell-boot-nav { left: 18px; width: 172px; height: 34px; }
.tt-shell-boot-nav-a { top: 78px; }
.tt-shell-boot-nav-b { top: 124px; }
.tt-shell-boot-nav-c { top: 170px; }
.tt-shell-boot-main { position: fixed; inset: var(--app-topbar-h, 56px) 0 0 var(--app-sidebar-expanded, 240px); padding: 28px 24px; }
.tt-shell-boot-title { position: static; width: 176px; height: 22px; margin-bottom: 24px; }
.tt-shell-boot-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tt-shell-boot-cards i { position: static; height: 104px; }
.tt-shell-boot-panel { position: static; width: 100%; height: 260px; margin-top: 16px; }
html[data-tt-shell-booting][data-tt-sidebar-collapsed="1"]:not([data-tt-compiled-shell-ready]) .tt-shell-boot-brand,
html[data-tt-shell-booting][data-tt-sidebar-collapsed="1"]:not([data-tt-compiled-shell-ready]) .tt-shell-boot-nav { display: none; }
html[data-tt-shell-booting][data-tt-sidebar-collapsed="1"]:not([data-tt-compiled-shell-ready]) .tt-shell-boot-logo { left: 22px; }
html[data-tt-shell-booting][data-tt-sidebar-collapsed="1"]:not([data-tt-compiled-shell-ready]) .tt-shell-boot-main { left: var(--app-sidebar-collapsed, 56px); }

html[data-tt-shell-booting]:not([data-tt-compiled-shell-ready])::before,
html[data-tt-app-booting]::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 2147483000;
  width: var(--app-sidebar-expanded, 240px);
  pointer-events: none;
  background: var(--c-bg2, #0f1011);
  border-right: 1px solid var(--c-border, #24272b);
}

html[data-tt-shell-booting][data-tt-sidebar-collapsed="1"]:not([data-tt-compiled-shell-ready])::before {
  width: var(--app-sidebar-collapsed, 56px);
}

html[data-tt-shell-booting]:not([data-tt-compiled-shell-ready])::after,
html[data-tt-app-booting]::after {
  content: "";
  position: fixed;
  inset: 0 0 auto var(--app-sidebar-expanded, 240px);
  z-index: 2147482999;
  height: var(--app-topbar-h, 56px);
  pointer-events: none;
  background: var(--c-bg2, #0f1011);
  border-bottom: 1px solid var(--c-border, #24272b);
}

html[data-tt-shell-booting][data-tt-sidebar-collapsed="1"]:not([data-tt-compiled-shell-ready])::after {
  left: var(--app-sidebar-collapsed, 56px);
}

@media (max-width: 760px) {
  html[data-tt-shell-booting]:not([data-tt-compiled-shell-ready])::before,
  html[data-tt-app-booting]::before { display: none; }
  html[data-tt-shell-booting]:not([data-tt-compiled-shell-ready])::after,
  html[data-tt-app-booting]::after {
    left: 0;
    height: var(--app-topbar-h, 56px);
  }
  html[data-tt-shell-booting][data-tt-workspace-tabs]:not([data-tt-compiled-shell-ready])::after {
    height: 98px;
  }
  .tt-shell-boot-logo,
  .tt-shell-boot-brand,
  .tt-shell-boot-nav { display: none; }
  .tt-shell-boot-main { left: 0; top: var(--app-topbar-h, 56px); padding: 18px 14px; }
  .tt-shell-boot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-shell-boot-cards i { height: 88px; }
}

/* Cross-document navigation stays native; this only bridges the visual handoff. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: ease-out;
}

html[data-tt-navigating]::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 2147483646;
  width: 34%;
  height: 2px;
  pointer-events: none;
  background: var(--c-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-accent) 55%, transparent);
  transform: translateX(-110%);
  animation: tt-navigation-progress 900ms cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes tt-navigation-progress {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(115%); }
  100% { transform: translateX(205%); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
  html[data-tt-navigating]::before { animation: none; transform: translateX(0); }
}