/* 批15 收敛：引入单一权威 Token 层，本文件冲突 radius/ease 定义已移除 */
@import url('./tokens-authoritative.css');

/* ============================================================
   众泰云 Design System v2.0
   对齐 OpenAI 设计系统 + 超越增强

   设计哲学：
   - 克制即身份：字重不超过 600，层次靠尺寸和色差
   - 衬线有灵魂，无衬线做系统：编辑展示用衬线，UI 用无衬线
   - 留白即分隔：section 间距 96px，不靠线分隔
   - 软圆角统一：12-16px 基础，9999px 药丸形标签
   - 青绿点睛：唯一彩色，其余近单色

   超越点：
   - 双主题丝滑过渡（var(--duration-280) ease）
   - 板块差异化气质（AI/开发者/管理）
   - 焦点环无障碍标准
   - 微交互呼吸感

   三层令牌架构：
   1. Primitives  — 原始色板（固定值，不直接使用）
   2. Semantic    — 语义令牌（随主题切换，组件引用）
   3. Component   — 组件级令牌（可选，覆盖语义令牌）
   ============================================================ */

/* ============================================================
   1. Primitives 原始色板
   ============================================================ */
:root {
    /* ---- Ink (墨色系 - OpenAI 对齐) ---- */
    --ink-0:    #ffffff;
    --ink-50:   #fafafa;
    --ink-100:  #f5f5f5;
    --ink-200:  #ededed;
    --ink-300:  #e5e5e5;
    --ink-400:  #d4d4d4;
    --ink-500:  #a8a29e;
    --ink-600:  #78716c;
    --ink-700:  #525252;
    --ink-800:  #262626;
    --ink-900:  #171717;
    --ink-950:  #0a0a0a;

    /* ---- Meridian Deep Teal (脉络青 - 品牌主色) ---- */
    --ti-50:   #E8F4F4;
    --ti-100:  #C5E0E0;
    --ti-200:  #9BC4C4;
    --ti-300:  #6BA8A8;
    --ti-400:  #3E8C8C;
    --ti-500:  #0E7C7B;
    --ti-600:  #0A6564;
    --ti-700:  #084E4D;
    --ti-800:  #063736;
    --ti-900:  #042524;

    /* ---- AI Teal (AI绿 - 对齐OpenAI青绿) ---- */
    --ai-50:   #ecfdf5;
    --ai-100:  #d1fae5;
    --ai-200:  #a7f3d0;
    --ai-400:  #34d399;
    --ai-500:  #10b981;
    --ai-600:  #059669;
    --ai-700:  #047857;
    --ai-800:  #065f46;

    /* ---- Warm Amber (脉络温度 - 强调色) ---- */
    --amber-50:  #FDF6EC;
    --amber-100: #F5E0C4;
    --amber-200: #EACCA0;
    --amber-300: #D4944A;
    --amber-400: #B87A35;
    --amber-500: #9C6228;
    --amber-600: #7A4D20;

    --red-400:  #f87171;
    --red-500:  #ef4444;
    --red-600:  #dc2626;

    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;

    /* ---- Fonts (Meridian 脉络) ---- */
    --font-display: 'InstrumentSerif', Georgia, ui-serif, serif;
    --font-body:    'InstrumentSans', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    /* ---- Type Scale (OpenAI 对齐) ---- */
    --text-xs:      12px;   /* Label */
    --text-sm:      13px;   /* Caption */
    --text-base:    16px;   /* Body */
    --text-lg:      18px;   /* Body Large */
    --text-xl:      20px;   /* H3 */
    --text-2xl:     28px;   /* H2 */
    --text-3xl:     40px;   /* H1 */
    --text-4xl:     56px;   /* Display */

    /* ---- Font Weight (克制：不超600) ---- */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;

    /* ---- Line Height ---- */
    --leading-tight:   1.08;  /* Display */
    --leading-h1:       1.15;
    --leading-h2:       1.2;
    --leading-h3:       1.3;
    --leading-body:     1.65;  /* OpenAI 标准 */
    --leading-caption:  1.4;

    /* ---- Letter Spacing ---- */
    --tracking-display: -0.02em;  /* 大字号负字距 */
    --tracking-h1:      -0.01em;
    --tracking-normal:   0em;
    --tracking-label:    0.04em;  /* 大写标签 */

    /* ---- Spacing (4px 网格 + OpenAI section 节奏) ---- */
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;   /* OpenAI section-y-desktop */
    --space-32:  128px;

    /* ---- Radius (批15 收敛：统一收敛至 tokens-authoritative.css) ---- */

    /* ---- Elevation (OpenAI 对齐：默认无阴影) ---- */
    --elev-flat:    none;
    --elev-ring:    0 0 0 1px var(--color-border-default);
    --elev-raised:  0 4px 16px rgba(13, 13, 13, 0.06);
    --elev-hover:   0 8px 24px rgba(13, 13, 13, 0.08);
    --elev-modal:   0 24px 48px rgba(13, 13, 13, 0.12);

    /* ---- Focus Ring (OpenAI 对齐) ---- */
    --focus-ring:   0 0 0 3px rgba(16, 163, 127, 0.12);
    --focus-brand:  0 0 0 3px rgba(79, 70, 229, 0.15);

    /* ---- Motion (OpenAI 对齐) ---- */
    --motion-fast:    150ms;
    --motion-base:    220ms;
    --motion-slow:    280ms;
    --motion-slower:  360ms;

    /* ---- z-index ---- */
    --z-base:      0;
    --z-dropdown:  1000;
    --z-sticky:   1020;
    --z-overlay:  1040;
    --z-modal:    1060;
    --z-toast:    1080;
    --z-tooltip:  1100;
    --z-command:  1200;

    /* ---- Layout ---- */
    --container-max:     1200px;
    --container-gutter:   48px;
    --header-height:      64px;
    --sidebar-width:      260px;
    --sidebar-collapsed:  60px;

    /* ===========================================================
       Premium Enhancement Tokens（v5.7 世界级增强）
       动效 / 阴影层次 / 玻璃态 / 渐变系统
       =========================================================== */

    /* ---- Motion 动效令牌（批15 收敛：ease 统一收敛至 tokens-authoritative.css） ---- */
    --dur-fast:     150ms;
    --dur-normal:   280ms;
    --dur-slow:     480ms;

    /* ---- Shadows 层次感阴影（多层叠加，营造悬浮深度） ---- */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-glow:  0 0 24px rgba(14, 124, 123, 0.15);

    /* ---- Glassmorphism 玻璃态令牌 ---- */
    --glass-bg:     rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur:   16px;

    /* ---- Gradients 渐变系统（品牌/强调/暖色/网格） ---- */
    --gradient-brand:  linear-gradient(135deg, #0E7C7B 0%, #0A6564 100%);
    --gradient-accent: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warm:   linear-gradient(135deg, #D4944A 0%, #B87A35 100%);
    --gradient-mesh:   radial-gradient(at 0% 0%, rgba(14, 124, 123, 0.08) 0%, transparent 50%),
                       radial-gradient(at 100% 100%, rgba(212, 148, 74, 0.06) 0%, transparent 50%);

    /* ---- 表面层次补充（卡片 / 输入框 / 导航栏分层） ---- */
    --color-bg-input:   var(--color-bg-surface);
    --color-bg-nav:     var(--color-bg-elevated);
    --color-bg-sunken:  var(--color-bg-subtle);
}

/* ============================================================
   2. Semantic 语义令牌 - 亮色主题（默认）
   ============================================================ */
:root,
[data-theme="light"] {
    /* ---- Surface ---- */
    --color-bg-base:      #ffffff;
    --color-bg-surface:   #ffffff;
    --color-bg-subtle:    var(--ink-50);   /* #fafafa */
    --color-bg-elevated:  #ffffff;
    --color-bg-hover:     var(--ink-100);  /* #f5f5f5 */
    --color-bg-active:    var(--ink-200);  /* #ededed */
    --color-bg-inverse:   var(--ink-900);  /* #171717 */

    /* ---- Text ---- */
    --color-text-primary:    var(--ink-950);   /* #0a0a0a */
    --color-text-secondary:  var(--ink-700);   /* #525252 */
    --color-text-muted:      var(--ink-500);   /* #a8a29e */
    --color-text-faint:      var(--ink-400);   /* #d4d4d4 */
    --color-text-inverse:    #ffffff;
    --color-text-link:       var(--ti-600);
    --color-text-link-hover: var(--ti-700);

    /* ---- Border ---- */
    --color-border-default:  var(--ink-300);   /* #e5e5e5 */
    --color-border-soft:     var(--ink-200);   /* #ededed */
    --color-border-strong:   var(--ink-400);   /* #d4d4d4 */
    --color-border-focus:    var(--ai-500);

    /* ---- Interactive (品牌主色) ---- */
    --color-interactive:        var(--ti-600);
    --color-interactive-hover:  var(--ti-700);
    --color-interactive-active: var(--ti-800);
    --color-interactive-light:  var(--ti-50);
    --color-interactive-subtle: rgba(79, 70, 229, 0.08);

    /* ---- AI Accent (AI绿 - 对齐OpenAI青绿) ---- */
    --color-ai:           var(--ai-500);
    --color-ai-hover:     var(--ai-600);
    --color-ai-light:     var(--ai-50);
    --color-ai-subtle:    rgba(16, 185, 129, 0.08);

    /* ---- Status ---- */
    --color-success:        var(--ai-600);
    --color-success-light:  var(--ai-50);
    --color-warning:        var(--amber-600);
    --color-warning-light:  rgba(217, 119, 6, 0.08);
    --color-error:          var(--red-600);
    --color-error-light:    rgba(220, 38, 38, 0.08);
    --color-info:           var(--blue-600);
    --color-info-light:     rgba(37, 99, 235, 0.08);

    /* ---- Brand ---- */
    --color-brand:           var(--ti-600);
    --color-brand-hover:     var(--ti-700);
    --color-brand-light:     var(--ti-50);
    --color-brand-gradient:  linear-gradient(135deg, var(--ti-600) 0%, var(--ti-800) 100%);
    --color-hero-gradient:   linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);

    /* ---- Code ---- */
    --color-code-bg:    var(--ink-100);
    --color-code-text:  var(--ink-800);
    --color-code-border: var(--ink-200);

    /* ---- Overlay ---- */
    --color-overlay: rgba(0, 0, 0, 0.4);

    /* ---- Shadows (亮色模式克制) ---- */
    --shadow-color:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-color-md: 0 4px 16px rgba(13, 13, 13, 0.06);
    --shadow-color-lg: 0 8px 24px rgba(13, 13, 13, 0.08);

    color-scheme: light;
}

/* ============================================================
   3. Semantic 语义令牌 - 暗色主题
   ============================================================ */
[data-theme="dark"] {
    /* ---- Surface ---- */
    --color-bg-base:      var(--ink-950);   /* #0a0a0a */
    --color-bg-surface:   var(--ink-900);   /* #171717 */
    --color-bg-subtle:    #1a1a1a;
    --color-bg-elevated:  #1f1f1f;
    --color-bg-hover:     var(--ink-800);   /* #262626 */
    --color-bg-active:    #2a2a2a;
    --color-bg-inverse:   #ffffff;

    /* ---- Text（WCAG AA：primary/secondary/muted/faint 对比度均 ≥ 4.5:1） ---- */
    --color-text-primary:    #f5f5f5;   /* 对 #0a0a0a ≈ 18:1 */
    --color-text-secondary:  #d4d4d4;   /* 对 #0a0a0a ≈ 12:1 */
    --color-text-muted:      var(--ink-500);   /* #a8a29e ≈ 6.6:1 */
    --color-text-faint:      #908a84;   /* 提升至 ≈ 4.9:1，满足 AA */
    --color-text-inverse:    var(--ink-950);
    --color-text-link:       var(--ti-400);
    --color-text-link-hover: var(--ti-300);

    /* ---- Border ---- */
    --color-border-default:  #2e2e2e;
    --color-border-soft:     #262626;
    --color-border-strong:   #404040;
    --color-border-focus:    var(--ai-400);

    /* ---- Interactive ---- */
    --color-interactive:        var(--ti-500);
    --color-interactive-hover:  var(--ti-400);
    --color-interactive-active: var(--ti-300);
    --color-interactive-light:  rgba(99, 102, 241, 0.12);
    --color-interactive-subtle: rgba(99, 102, 241, 0.08);

    /* ---- AI Accent ---- */
    --color-ai:           var(--ai-400);
    --color-ai-hover:     var(--ai-500);
    --color-ai-light:     rgba(16, 185, 129, 0.12);
    --color-ai-subtle:    rgba(16, 185, 129, 0.06);

    /* ---- Status ---- */
    --color-success:        var(--ai-400);
    --color-success-light:  rgba(16, 185, 129, 0.12);
    --color-warning:        var(--amber-500);
    --color-warning-light:  rgba(245, 158, 11, 0.12);
    --color-error:          var(--red-400);
    --color-error-light:    rgba(239, 68, 68, 0.12);
    --color-info:           var(--blue-400);
    --color-info-light:     rgba(59, 130, 246, 0.12);

    /* ---- Brand ---- */
    --color-brand:           var(--ti-400);
    --color-brand-hover:     var(--ti-300);
    --color-brand-light:     rgba(99, 102, 241, 0.12);
    --color-brand-gradient:  linear-gradient(135deg, var(--ti-500) 0%, var(--ti-700) 100%);
    --color-hero-gradient:   linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #0d0d0d 100%);

    /* ---- Code ---- */
    --color-code-bg:    var(--ink-800);
    --color-code-text:  #e5e5e5;
    --color-code-border: #2e2e2e;

    /* ---- Overlay ---- */
    --color-overlay: rgba(0, 0, 0, 0.6);

    /* ---- Shadows (暗色模式更克制) ---- */
    --shadow-color:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-color-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-color-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* ---- Premium 玻璃态（暗色：深底 + 低透白边） ---- */
    --glass-bg:     rgba(23, 23, 23, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* ---- Premium 阴影（暗色：纯黑 + 更高透明度，营造深度） ---- */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40);
    --shadow-glow:  0 0 24px rgba(14, 124, 123, 0.25);

    /* ---- 表面层次（暗色：输入框略低于卡片，形成井深 inset 感） ---- */
    /* 层级：base(#0a0a0a) < sunken(#0d0d0d) < input(#131313) < surface(#171717) < elevated(#1f1f1f) */
    --color-bg-input:   #131313;
    --color-bg-nav:     var(--color-bg-elevated);
    --color-bg-sunken:  #0d0d0d;

    color-scheme: dark;
}

/* ============================================================
   4. 全局重置 & 基础排版
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--leading-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--motion-slow) var(--ease-standard),
                color var(--motion-slow) var(--ease-standard);
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    line-height: var(--leading-h2);
}

h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
}

h2 {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-h1);
}

h3 {
    font-size: var(--text-xl);
    line-height: var(--leading-h3);
}

/* Display (衬线编辑展示 - OpenAI Signifier 风格) */
.display, .text-display {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--fw-regular);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
}

.display-lg {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: var(--fw-regular);
    line-height: 1;
    letter-spacing: -0.03em;
}

/* ---- Links ---- */
a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
}

a:hover {
    color: var(--color-text-link-hover);
}

/* ---- Text utilities ---- */
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-mono { font-family: var(--font-mono); }

.label {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ============================================================
   5. 布局容器
   ============================================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}

.container-sm { max-width: 768px; margin: 0 auto; padding: 0 var(--container-gutter); }
.container-lg { max-width: 1280px; margin: 0 auto; padding: 0 var(--container-gutter); }

.section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

.section-sm {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

/* ============================================================
   6. 核心组件
   ============================================================ */

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--motion-base) var(--ease-standard);
    white-space: nowrap;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary - 墨黑实心（OpenAI风格） */
.btn-primary {
    background: var(--color-text-primary);
    color: var(--color-bg-base);
    border-color: var(--color-text-primary);
}

.btn-primary:hover {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}

/* Brand - 众泰靛 */
.btn-brand {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}

.btn-brand:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

/* AI - 青绿点睛 */
.btn-ai {
    background: var(--color-ai);
    color: #fff;
    border-color: var(--color-ai);
}

.btn-ai:hover {
    background: var(--color-ai-hover);
    border-color: var(--color-ai-hover);
}

/* Secondary - 描边 */
.btn-secondary {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.btn-secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

/* Ghost - 透明 */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

/* Pill shape */
.btn-pill {
    border-radius: var(--radius-pill);
}

/* Sizes */
.btn-sm { padding: 6px 14px; font-size: var(--text-xs); }
.btn-lg { padding: 14px 24px; font-size: var(--text-base); }

/* ---- Cards ---- */
.card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: box-shadow var(--motion-base) var(--ease-standard),
                border-color var(--motion-base) var(--ease-standard);
}

.card-hover:hover {
    box-shadow: var(--elev-raised);
    border-color: var(--color-border-default);
}

.card-elevated {
    box-shadow: var(--elev-raised);
}

.card-body { padding: var(--space-6); }
.card-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-soft);
}
.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-soft);
}

/* ---- Inputs ---- */
.input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    transition: border-color var(--motion-base) var(--ease-standard),
                box-shadow var(--motion-base) var(--ease-standard);
    outline: none;
}

.input::placeholder {
    color: var(--color-text-muted);
}

.input:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--focus-ring);
}

.input-error {
    border-color: var(--color-error);
}

.input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* ---- Pills / Tags ---- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}

.tag-success { background: var(--color-success-light); color: var(--color-success); }
.tag-warning { background: var(--color-warning-light); color: var(--color-warning); }
.tag-error   { background: var(--color-error-light); color: var(--color-error); }
.tag-info    { background: var(--color-info-light); color: var(--color-info); }
.tag-brand   { background: var(--color-interactive-light); color: var(--color-brand); }

/* ---- Badges ---- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: #fff;
    background: var(--color-error);
    border-radius: var(--radius-pill);
}

/* ---- Tables ---- */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--color-border-default);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.table td {
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-soft);
}

.table tbody tr:hover {
    background: var(--color-bg-hover);
}

/* ---- Code ---- */
code, pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

code {
    padding: 2px 6px;
    background: var(--color-code-bg);
    color: var(--color-code-text);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-code-border);
}

pre {
    padding: var(--space-4);
    background: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: 1.55;
}

pre code {
    padding: 0;
    background: none;
    border: none;
}

/* ---- Focus visible (无障碍) ---- */
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- Scrollbar (优雅滚动条) ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ---- Selection ---- */
::selection {
    background: var(--color-interactive-subtle);
    color: var(--color-text-primary);
}

/* ============================================================
   7. 主题切换过渡
   ============================================================ */
[data-theme] *,
[data-theme] *::before,
[data-theme] *::after {
    transition: background-color var(--motion-slow) var(--ease-standard),
                border-color var(--motion-slow) var(--ease-standard),
                color var(--motion-slow) var(--ease-standard);
}

/* ============================================================
   8. 板块差异化气质（超越OpenAI）
   ============================================================ */

/* AI 板块 - 青绿点睛 */
.sector-ai {
    --color-accent: var(--color-ai);
    --color-accent-light: var(--color-ai-light);
}

/* 开发者板块 - 深色优先 */
.sector-developer {
    --color-bg-base: var(--ink-950);
    --color-bg-surface: var(--ink-900);
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #d4d4d4;
    --color-border-default: #2e2e2e;
}

/* 管理后台 - 紧凑高效 */
.sector-admin {
    --container-max: 1440px;
    --header-height: 56px;
}

/* ============================================================
   9. 动效工具类（与 animations.css 配合）
   ============================================================ */
.fade-in {
    animation: fadeIn var(--motion-slow) var(--ease-standard);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    animation: slideUp var(--motion-slow) var(--ease-standard);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   10. 响应式断点
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --container-gutter: 24px;
        --space-24: 64px;
    }

    .display-lg {
        font-size: 48px;
    }

    h1 {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 480px) {
    :root {
        --container-gutter: 16px;
        --space-24: 48px;
    }

    .display-lg {
        font-size: 36px;
    }
}

/* ============================================================
   11. AI消息7态样式（v5.7 对话体验升级）
   ============================================================ */
.ai-message {
    --ai-bg: var(--bg-surface);
    --ai-border: var(--border-default);
    --ai-radius: var(--radius-lg);
    padding: var(--space-4);
    border-radius: var(--ai-radius);
    border: 1px solid var(--ai-border);
    background: var(--ai-bg);
    transition: all var(--duration-normal) ease;
}

.ai-message--typing {
    --ai-border: var(--ti-200);
    background: linear-gradient(90deg, var(--ti-50) 25%, var(--bg-surface) 50%, var(--ti-50) 75%);
    background-size: 200% 100%;
    animation: ai-typing-shimmer var(--duration-1500) infinite;
}

@keyframes ai-typing-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ai-message--streaming {
    --ai-border: var(--ti-300);
    border-left: 3px solid var(--ti-500);
}

.ai-message--thinking {
    --ai-border: var(--amber-200);
    background: var(--amber-50);
}

.ai-message--thinking::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--amber-300);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ai-thinking-spin var(--duration-800) linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes ai-thinking-spin {
    to { transform: rotate(360deg); }
}

.ai-message--tool_use {
    --ai-border: var(--ti-300);
    background: var(--ti-50);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.ai-message--error {
    --ai-border: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.ai-message--success {
    --ai-border: var(--success-border);
    background: var(--success-bg);
    color: var(--success);
}

.ai-message--idle {
    --ai-border: var(--border-default);
    opacity: 0.7;
}

/* AI消息状态指示器 */
.ai-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.ai-status-dot--typing { background: var(--ti-400); animation: ai-pulse var(--duration-1000) infinite; }
.ai-status-dot--streaming { background: var(--ti-500); }
.ai-status-dot--thinking { background: var(--amber-400); animation: ai-pulse var(--duration-1200) infinite; }
.ai-status-dot--tool_use { background: var(--ti-300); }
.ai-status-dot--error { background: var(--danger); }
.ai-status-dot--success { background: var(--success); }
.ai-status-dot--idle { background: var(--text-tertiary); }

@keyframes ai-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================================
   13. 世界级组件样式（对齐 Linear / Vercel / WorkBuddy）
   - Glassmorphism 卡片
   - 微交互按钮（hover 提升 + 阴影变化 + 过渡动画）
   - 输入框聚焦动效（边框渐变发光）
   - 骨架屏 shimmer 优化
   - 渐变文字标题
   - 浮动操作按钮（FAB）
   - 顶部进度条（路由切换动画）
   - 暗色模式全覆盖
   ============================================================ */

/* ---- 13.1 Glassmorphism 玻璃态卡片 ---- */
.glass-card {
    background: var(--glass-bg, rgba(255, 255, 255, 0.72));
    backdrop-filter: var(--blur-lg) var(--blur-saturate);
    -webkit-backdrop-filter: var(--blur-lg) var(--blur-saturate);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-normal, var(--duration-250)) var(--ease-emphasized, cubic-bezier(0.2,0,0,1)),
                box-shadow var(--duration-normal, var(--duration-250)) var(--ease-emphasized, cubic-bezier(0.2,0,0,1)),
                border-color var(--duration-normal, var(--duration-250)) var(--ease-default);
}
.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl), var(--shadow-glow-soft);
    border-color: var(--glass-border-hover, rgba(8, 145, 178, 0.20));
}

/* 玻璃态导航栏 */
.glass-nav {
    background: var(--glass-bg, rgba(255, 255, 255, 0.72));
    backdrop-filter: var(--blur-md) var(--blur-saturate);
    -webkit-backdrop-filter: var(--blur-md) var(--blur-saturate);
    border-bottom: 1px solid var(--color-border-default, var(--color-border));
}

/* ---- 13.2 微交互按钮（Linear 风格） ---- */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-5, 20px);
    font-family: var(--font-body, var(--font-sans));
    font-size: var(--text-sm, 14px);
    font-weight: var(--fw-medium, 500);
    line-height: 1;
    color: var(--color-on-accent, #fff);
    background: var(--color-interactive, var(--color-accent));
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: transform var(--duration-fast, var(--duration-150)) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
                box-shadow var(--duration-fast, var(--duration-150)) var(--ease-default),
                background-color var(--duration-fast, var(--duration-150)) var(--ease-default);
    will-change: transform;
}
.btn-premium:hover {
    background: var(--color-interactive-hover, var(--color-accent-hover));
    transform: translateY(-1px);
    box-shadow: var(--shadow-color-primary, var(--shadow-md));
}
.btn-premium:active {
    transform: translateY(0) scale(0.98);
    background: var(--color-interactive-active, var(--color-accent-active));
}
.btn-premium:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* 次级按钮（描边） */
.btn-premium--secondary {
    color: var(--color-text-primary);
    background: transparent;
    border-color: var(--color-border-default, var(--color-border));
}
.btn-premium--secondary:hover {
    background: var(--color-bg-hover, var(--color-bg-secondary));
    border-color: var(--color-border-strong, var(--color-border));
    box-shadow: var(--shadow-sm);
}

/* 幽灵按钮（无边框） */
.btn-premium--ghost {
    color: var(--color-text-secondary);
    background: transparent;
    border-color: transparent;
}
.btn-premium--ghost:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover, var(--color-bg-secondary));
    box-shadow: none;
}

/* ---- 13.3 输入框聚焦动效（边框渐变发光） ---- */
.input-premium {
    width: 100%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-family: var(--font-body, var(--font-sans));
    font-size: var(--text-base, 16px);
    color: var(--color-text-primary);
    background: var(--color-bg-input, var(--color-bg-secondary));
    border: 1px solid var(--color-border-default, var(--color-border));
    border-radius: var(--radius-md, 8px);
    transition: border-color var(--duration-normal, var(--duration-250)) var(--ease-default),
                box-shadow var(--duration-normal, var(--duration-250)) var(--ease-default),
                background-color var(--duration-normal, var(--duration-250)) var(--ease-default);
}
.input-premium::placeholder {
    color: var(--color-text-muted, var(--color-text-tertiary));
}
.input-premium:hover {
    border-color: var(--color-border-strong, var(--color-border));
}
.input-premium:focus {
    outline: none;
    border-color: var(--color-interactive, var(--color-accent));
    box-shadow: 0 0 0 3px var(--color-interactive-subtle, rgba(8, 145, 178, 0.12)),
                inset 0 0 0 1px var(--color-interactive, var(--color-accent));
    background: var(--color-bg-surface, #fff);
}

/* 带渐变发光的聚焦态（高光强调） */
.input-glow:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-interactive, var(--color-accent)),
                0 0 16px -2px var(--color-interactive, var(--color-accent)),
                inset 0 0 0 1px var(--color-interactive, var(--color-accent));
}

/* ---- 13.4 骨架屏 shimmer 优化（更平滑的渐变扫光） ---- */
.skeleton-premium {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-subtle, var(--color-bg-tertiary));
    border-radius: var(--radius-md, 8px);
}
.skeleton-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-bg-hover, rgba(255, 255, 255, 0.4)) 50%,
        transparent 100%
    );
    animation: skeleton-sweep var(--duration-1600) var(--ease-in-out, cubic-bezier(0.65,0,0.35,1)) infinite;
    will-change: transform;
}
@keyframes skeleton-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---- 13.5 渐变文字标题 ---- */
.text-gradient {
    background: linear-gradient(135deg, var(--ti-500, var(--color-accent)) 0%, var(--ai-500, var(--color-accent-hover)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text-gradient-warm {
    background: linear-gradient(135deg, var(--amber-400, #f59e0b) 0%, var(--ti-500, var(--color-accent)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text-gradient-hero {
    background: linear-gradient(180deg, var(--color-text-primary) 0%, var(--color-text-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- 13.6 浮动操作按钮 FAB ---- */
.fab {
    position: fixed;
    right: var(--space-6, 24px);
    bottom: var(--space-6, 24px);
    z-index: var(--z-popover, 300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 24px;
    color: var(--color-on-accent, #fff);
    background: var(--color-interactive, var(--color-accent));
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    box-shadow: var(--shadow-color-primary, var(--shadow-lg));
    transition: transform var(--duration-normal, var(--duration-250)) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
                box-shadow var(--duration-normal, var(--duration-250)) var(--ease-default),
                opacity var(--duration-normal, var(--duration-250)) var(--ease-default);
    will-change: transform;
}
.fab:hover {
    transform: scale(1.08) rotate(0deg);
    box-shadow: var(--shadow-xl), var(--shadow-glow-brand);
}
.fab:active {
    transform: scale(0.96);
}
.fab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-color-primary, var(--shadow-lg));
}

/* FAB 扩展（带标签） */
.fab--extended {
    width: auto;
    min-width: 56px;
    padding: 0 var(--space-5, 20px);
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 14px);
    font-weight: var(--fw-medium, 500);
}

/* ---- 13.7 顶部进度条（路由切换动画） ---- */
.route-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-max, 9999);
    width: 100%;
    height: 3px;
    pointer-events: none;
    background: transparent;
}
.route-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ti-500, var(--color-accent)) 0%, var(--ai-500, var(--color-accent-hover)) 100%);
    box-shadow: 0 0 8px var(--ti-500, var(--color-accent));
    border-radius: 0 var(--radius-full, 9999px) var(--radius-full, 9999px) 0;
    transition: width var(--duration-slow, var(--duration-slower)) var(--ease-emphasized, cubic-bezier(0.2,0,0,1)),
                opacity var(--duration-normal, var(--duration-250)) var(--ease-default);
    opacity: 0;
}
.route-progress.is-loading .route-progress__bar {
    width: 85%;
    opacity: 1;
    transition: width var(--duration-2000) var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
                opacity var(--duration-normal, var(--duration-250)) var(--ease-default);
}
.route-progress.is-done .route-progress__bar {
    width: 100%;
    opacity: 0;
    transition: width var(--duration-fast, var(--duration-150)) var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
                opacity var(--duration-slow, var(--duration-slower)) var(--ease-default) var(--duration-fast);
}

/* ---- 13.8 暗色模式全覆盖（新组件适配） ---- */
[data-theme="dark"] .glass-card {
    --glass-border-hover: rgba(34, 211, 238, 0.30);
}
[data-theme="dark"] .input-premium {
    background: var(--color-bg-input, #131313);
}
[data-theme="dark"] .input-premium:focus {
    background: var(--color-bg-elevated, #1f1f1f);
}
[data-theme="dark"] .skeleton-premium::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
}
[data-theme="dark"] .text-gradient-hero {
    background: linear-gradient(180deg, #f5f5f5 0%, #a8a29e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .fab {
    box-shadow: var(--shadow-color-primary, var(--shadow-lg)), var(--shadow-glow-brand);
}

/* ============================================================
   12. 打印样式
   ============================================================ */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}