/* ============================================================================
   Premium 视觉升级层 (2026-10-17)
   ----------------------------------------------------------------------------
   设计方向：由「效果堆叠」(满屏玻璃模糊/渐变/胶囊) 转向「克制精致」：
     · 更准的中性色阶与近黑文字，减少彩色噪声
     · 发丝级边框 + 分层柔和阴影（结构感来自明度差，不来自发光）
     · 主行动按钮改为「实心 + 顶部内高光」，仅保留极轻垂直渐变
     · 统一字体度量（标题紧收字距、数字等宽、标题均衡换行）
     · 180ms 缓动 + 1-2px 位移的微交互，尊重 prefers-reduced-motion

   约束（严格）：
     · 不改任何布局/尺寸/间距/断点（不写 width/height/padding/margin/font-size）
     · 不改任何模板结构、链接、模块与信息层级
     · 只覆盖「颜色/背景/边框/阴影/圆角/字距/字重/过渡/焦点环」

   回退方式：删除本文件与两个 cn 基座里的 `<link ... premium.css>` 一行即可完全还原。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 令牌 */
/* 只覆盖浅色；暗色在文件末尾单独给一套，避免把既有 .dark 主题压回浅色。
   `:root:not(.dark):not([data-theme="dark"])` 特异性 0,2,1 > 既有 .dark(0,1,0)，
   因此暗色态不会被这里误命中。 */
:root:not(.dark):not([data-theme="dark"]) {
  /* 表面：偏冷的极浅灰，比纯白更有层次 */
  --surface-base: 246 247 250;
  --surface-card: 255 255 255;
  --surface-elevated: 255 255 255;
  --surface-hover: 242 244 248;
  --surface-sunken: 238 241 246;

  /* 文字：近黑而非纯黑；次级/三级拉开层次 */
  --content-primary: 11 18 32;
  --content-secondary: 74 85 104;
  --content-tertiary: 138 148 166;
  --content-inverse: 255 255 255;

  /* 边框：发丝级，靠明度差而非粗线 */
  --border-subtle: 232 235 241;
  --border-strong: 211 217 227;

  /* 品牌：更深的蓝（提质感、降"荧光感"），光晕降饱和 */
  --border-brand: 37 79 235;
  --accent-glow: 37 79 235;

  /* 阴影：多层柔和、低透明度、冷色调 */
  --shadow-card: 0 1px 2px rgba(11, 18, 32, .04), 0 4px 14px -6px rgba(11, 18, 32, .08);
  --shadow-card-elevated: 0 2px 4px rgba(11, 18, 32, .04),
                          0 18px 48px -18px rgba(11, 18, 32, .20),
                          0 6px 16px -8px rgba(11, 18, 32, .08);
  --shadow-card-hover: 0 2px 6px rgba(11, 18, 32, .05),
                       0 14px 36px -14px rgba(11, 18, 32, .16);
}

/* 暗色同样升级（保持原有 .dark 语义，只调质感） */
.dark,
[data-theme="dark"] {
  --surface-base: 8 12 20;
  --surface-card: 16 22 34;
  --surface-elevated: 22 29 43;
  --surface-hover: 28 36 52;
  --surface-sunken: 10 15 25;
  --content-primary: 236 241 248;
  --content-secondary: 160 172 190;
  --content-tertiary: 112 124 142;
  --border-subtle: 30 38 54;
  --border-strong: 54 65 86;
  --border-brand: 88 132 255;
  --accent-glow: 88 132 255;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px -6px rgba(0, 0, 0, .45);
  --shadow-card-elevated: 0 2px 4px rgba(0, 0, 0, .35),
                          0 18px 48px -18px rgba(0, 0, 0, .65),
                          0 6px 16px -8px rgba(0, 0, 0, .45);
  --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 14px 36px -14px rgba(0, 0, 0, .55);
}

:root {
  /* 统一缓动与时长：18-22 世纪感的"高级缓动" */
  --premium-ease: cubic-bezier(.22, 1, .36, 1);
  --premium-dur: 180ms;
  /* 品牌梯度（仅用于强调文字/极细装饰，不再大面积铺底） */
  --premium-brand-grad: linear-gradient(135deg, #2a5cff 0%, #5b4bff 100%);
  --premium-hairline: rgba(11, 18, 32, .06);
}

/* ------------------------------------------------------------ 2. 全局基底 */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
}

::selection {
  background: rgba(37, 79, 235, .16);
  color: rgb(var(--content-primary) / 1);
}

/* 滚动条：细、无轨道、悬停才明显（更"系统级"） */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--border-strong) / .9) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--border-strong) / .8);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--content-tertiary) / .8); background-clip: content-box; }

/* 焦点环：键盘可见，鼠标不打扰 */
:focus-visible {
  outline: 2px solid rgb(var(--border-brand) / .55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- 3. 排版 */
/* 标题：收紧字距 + 均衡换行；Sora 已在基座加载，此处只调度量 */
h1, h2, h3, h4 {
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { letter-spacing: -.03em; }

/* 数字/金额/表格：等宽数字，避免跳动 */
.num-mono,
.num,
table td,
table th,
[class*="tabular"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero", "kern";
}

/* 品牌色文字：用统一梯度，避免各处蓝色不一致 */
.text-gradient-brand {
  background-image: var(--premium-brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------- 4. 卡片体系 */
/* 结构感 = 发丝边框 + 顶部 1px 内高光 + 极浅环境阴影 */
.card-base,
.card-elevated,
.card-sunken,
.glass-card,
.glass-card-strong {
  border-width: 1px;
  border-color: rgb(var(--border-subtle) / 1);
  border-radius: .75rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    var(--shadow-card);
  transition:
    box-shadow var(--premium-dur) var(--premium-ease),
    border-color var(--premium-dur) var(--premium-ease),
    transform var(--premium-dur) var(--premium-ease),
    background-color var(--premium-dur) var(--premium-ease);
}

/* 玻璃卡：收敛模糊强度，提高底色不透明度 —— 可读性优先，玻璃只作点缀 */
.glass-card { background-color: rgb(var(--surface-card) / .86); backdrop-filter: blur(14px) saturate(120%); }
.glass-card-strong { background-color: rgb(var(--surface-card) / .94); backdrop-filter: blur(18px) saturate(120%); }

/* 悬停：轻微抬升 + 边框转品牌色，不做发光 */
.card-hover-lift:hover,
.card-base:hover,
.card-elevated:hover,
.glass-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--border-brand) / .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    var(--shadow-card-hover);
}

/* 抬升卡（浮层/重点卡）：更强的分层，但不发光 */
.shadow-card-elevated {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    var(--shadow-card-elevated);
}

/* 下沉块（代码/摘要/HUD）：内阴影取代边框 */
.card-sunken {
  background-color: rgb(var(--surface-sunken) / 1);
  box-shadow: inset 0 1px 2px rgba(11, 18, 32, .05);
}

/* --------------------------------------------------------------- 5. 按钮 */
/* 主按钮：实心 + 极轻垂直渐变 + 顶部内高光；hover 加深 1 级并抬 1px。
   去掉了原先"蓝→紫大面积渐变 + 外发光"，改为更克制的材质感。 */
.btn-brand,
.btn-glow {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
                    linear-gradient(180deg, #2f5dfb 0%, #2547d6 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 1px 2px rgba(11, 18, 32, .12),
    0 8px 20px -10px rgba(37, 79, 235, .55);
  transition:
    transform var(--premium-dur) var(--premium-ease),
    box-shadow var(--premium-dur) var(--premium-ease),
    filter var(--premium-dur) var(--premium-ease);
}

.btn-brand:hover:not(:disabled),
.btn-glow:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.04) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 2px 4px rgba(11, 18, 32, .14),
    0 14px 28px -12px rgba(37, 79, 235, .5);
}

.btn-brand:active:not(:disabled),
.btn-glow:active:not(:disabled) {
  transform: translateY(0) scale(.99);
  filter: brightness(.98);
  box-shadow:
    inset 0 2px 4px rgba(11, 18, 32, .18),
    0 1px 2px rgba(11, 18, 32, .1);
}

.btn-brand:disabled,
.btn-glow:disabled {
  background-image: none;
  background-color: rgb(var(--surface-sunken) / 1);
  border-color: rgb(var(--border-subtle) / 1);
  color: rgb(var(--content-tertiary) / 1);
  box-shadow: none;
  transform: none;
  filter: none;
}

/* 次级按钮（白底描边）：hover 时边框转品牌 + 极浅品牌底 */
.btn-ghost {
  background-color: rgb(var(--surface-card) / 1);
  border: 1px solid rgb(var(--border-strong) / 1);
  color: rgb(var(--content-primary) / 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition:
    background-color var(--premium-dur) var(--premium-ease),
    border-color var(--premium-dur) var(--premium-ease),
    color var(--premium-dur) var(--premium-ease),
    transform var(--premium-dur) var(--premium-ease);
}
.btn-ghost:hover:not(:disabled) {
  border-color: rgb(var(--border-brand) / .45);
  background-color: rgb(var(--border-brand) / .05);
  color: rgb(var(--border-brand) / 1);
  transform: translateY(-1px);
}
.btn-ghost:active:not(:disabled) { transform: translateY(0); }

/* ------------------------------------------------------------ 6. 输入控件 */
.input-shell,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  border-radius: .625rem;
  border: 1px solid rgb(var(--border-strong) / .9);
  background-color: rgb(var(--surface-card) / 1);
  box-shadow: inset 0 1px 2px rgba(11, 18, 32, .04);
  transition:
    border-color var(--premium-dur) var(--premium-ease),
    box-shadow var(--premium-dur) var(--premium-ease),
    background-color var(--premium-dur) var(--premium-ease);
}

.input-shell:hover,
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover,
input[type="number"]:hover, input[type="search"]:hover, select:hover, textarea:hover {
  border-color: rgb(var(--border-strong) / 1);
}

.input-shell:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgb(var(--border-brand) / .65);
  box-shadow:
    0 0 0 3px rgb(var(--border-brand) / .14),
    inset 0 1px 2px rgba(11, 18, 32, .03);
}

::placeholder { color: rgb(var(--content-tertiary) / 1); }

/* --------------------------------------------------------------- 7. 表格 */
table { border-collapse: separate; border-spacing: 0; }

table thead th {
  /* 只调字距/字重/颜色 —— 不改字号与内边距，保持既有组件尺寸 */
  letter-spacing: .02em;
  font-weight: 600;
  color: rgb(var(--content-tertiary) / 1);
  background-color: transparent;
  border-bottom: 1px solid rgb(var(--border-subtle) / 1);
}

table tbody td {
  border-bottom: 1px solid rgb(var(--border-subtle) / .8);
  color: rgb(var(--content-secondary) / 1);
}

table tbody tr:last-child td { border-bottom: 0; }

table tbody tr,
.table-row-hover {
  transition: background-color 140ms var(--premium-ease);
}

table tbody tr:hover,
.table-row-hover:hover {
  background-color: rgb(var(--surface-hover) / .7);
}

/* --------------------------------------------------------------- 8. 导航 */
/* 磨砂但更"实"：高不透明度 + 更细的模糊，避免滚动时文字发灰 */
.navbar,
.design-nav,
header.sticky,
[class*="nav-glass"] {
  background-color: rgb(var(--surface-card) / .92) !important;
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgb(var(--border-subtle) / 1);
  box-shadow: 0 1px 0 rgba(11, 18, 32, .02), 0 8px 24px -24px rgba(11, 18, 32, .35);
}

/* 导航项：中性悬停 + 细下划线式激活，不使用大色块 */
.nav-link {
  border-radius: .5rem;
  transition: color var(--premium-dur) var(--premium-ease),
              background-color var(--premium-dur) var(--premium-ease);
}
.nav-link:hover { color: rgb(var(--content-primary) / 1); background-color: rgb(var(--surface-hover) / .8); }

/* 下拉/浮层：统一圆角与分层阴影 */
.dropdown-menu {
  border-radius: .75rem;
  border: 1px solid rgb(var(--border-subtle) / 1);
  box-shadow: var(--shadow-card-elevated);
  overflow: hidden;
}
.dropdown-item { border-radius: .5rem; transition: background-color 140ms var(--premium-ease); }

/* ----------------------------------------------------------- 9. 状态徽章 */
/* 轻底深字 + 左侧圆点，尺寸与字号不变 */
.badge,
.chip-option,
[class*="status-pill"] {
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
}

/* 分段控件/标签页：底部 2px 指示条，不用整块填充 */
.ops-tabs [role="tab"],
[class*="segmented"] > * {
  transition: color var(--premium-dur) var(--premium-ease),
              background-color var(--premium-dur) var(--premium-ease),
              box-shadow var(--premium-dur) var(--premium-ease);
}

/* --------------------------------------------------------- 10. 装饰与细节 */
/* 网格/光斑：降透明度，让它"若有若无" */
.bg-grid { opacity: .5; }
.section-mesh { filter: saturate(.85); }

/* 分隔线：统一发丝级 */
hr, .divider {
  border-color: rgb(var(--border-subtle) / 1);
}

/* 图片与媒体：避免半像素模糊 */
img, svg, video { image-rendering: -webkit-optimize-contrast; }

/* 图标与文字基线对齐（常见"廉价感"来源） */
.bi { vertical-align: -.125em; }

/* 链接：下划线只在 hover 出现，颜色跟随品牌 */
a { transition: color 140ms var(--premium-ease); }

/* ------------------------------------------------------ 11. 动效降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card-hover-lift:hover, .card-base:hover, .card-elevated:hover, .glass-card:hover,
  .btn-brand:hover:not(:disabled), .btn-glow:hover:not(:disabled),
  .btn-ghost:hover:not(:disabled) {
    transform: none !important;
  }
}