/* ═══════════════════════════════════════════════════════════════
   北极星 ERP v5 - 琥珀奢华设计系统（2026-09-07 全量重构）
   设计语言：暖黑底蕴 · 琥珀金强调 · 细腻层次 · 克制的华丽
   参考：21st.dev Elegant Luxury / Claude 暗色气质
   ═══════════════════════════════════════════════════════════════ */

/* ── 设计令牌 ── */
:root {
  /* 背景暖黑四层 */
  --bg-deep: #0D0C0A;
  --bg-surface: #12110E;
  --bg-raised: #1A1814;
  --bg-overlay: #201D18;
  --glass-bg: rgba(245,242,236,0.025);
  --glass-bg-hover: rgba(245,242,236,0.05);
  --glass-border: rgba(245,242,236,0.07);
  --glass-border-hover: rgba(245,242,236,0.14);

  /* 文字暖白四级 */
  --text-primary: #F5F2EC;
  --text-secondary: #B8B2A4;
  --text-tertiary: #807A6D;
  --text-quaternary: #5A554B;

  /* 强调：琥珀金 */
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --gold: #E8C37A;
  --cream: #EDE6D8;
  --bronze: #B08D57;

  /* 辅助色（暖调化） */
  --green-400: #4ADE80;
  --green-500: #34D399;
  --green-600: #10B981;
  --blue-400: #7DA9D8;
  --blue-500: #5B8CC0;
  --purple-400: #B48ED8;
  --purple-500: #9B74C2;
  --orange-400: #F59E0B;
  --pink-400: #E8A87C;
  --red-400: #F87171;
  --red-500: #EF4444;

  /* 兼容旧变量名（映射到暖调） */
  --cyan-400: #FBBF24;
  --cyan-500: #F59E0B;
  --cyan-600: #D97706;

  /* 渐变 */
  --gradient-brand: linear-gradient(135deg, #FCD34D 0%, #F59E0B 45%, #D97706 100%);
  --gradient-primary-btn: linear-gradient(135deg, #FBBF24, #D97706);
  --gradient-text: linear-gradient(135deg, #FDF3DA 0%, #FCD34D 55%, #F59E0B 100%);
  --gradient-hairline: linear-gradient(90deg, transparent, rgba(245,242,236,0.14), transparent);
  --gradient-hairline-gold: linear-gradient(90deg, transparent, rgba(245,158,11,0.55), transparent);
  --gradient-card-top: linear-gradient(180deg, rgba(245,242,236,0.045), rgba(245,242,236,0.008) 46%, transparent);
  --gradient-hero-card: linear-gradient(135deg, rgba(217,119,6,0.1), rgba(245,158,11,0.05), rgba(180,83,9,0.04));
  --gradient-skeleton: linear-gradient(90deg, transparent, rgba(245,242,236,0.08), transparent);

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Mono', 'Consolas', monospace;
  --font-family: var(--font-sans);

  /* 动效 */
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;

  /* 阴影（暖黑 + 金色辉光） */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.32), 0 1px 8px rgba(0,0,0,0.22);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.32), 0 4px 20px rgba(0,0,0,0.26);
  --shadow-3: 0 6px 20px rgba(0,0,0,0.4), 0 12px 48px rgba(0,0,0,0.32);
  --shadow-4: 0 16px 48px rgba(0,0,0,0.48), 0 32px 96px rgba(0,0,0,0.38);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-glow-brand: 0 0 0 1px rgba(245,158,11,0.2), 0 8px 32px rgba(245,158,11,0.16);
  --shadow-glow-purple: 0 0 0 1px rgba(232,195,122,0.18), 0 8px 32px rgba(232,195,122,0.13);

  /* 边框三级 */
  --border-hairline: rgba(245,242,236,0.06);
  --border-default: rgba(245,242,236,0.1);
  --border-strong: rgba(245,242,236,0.17);

  /* 层级 */
  --z-header: 50;
  --z-sidebar: 40;
  --z-dropdown: 60;
  --z-modal: 90;
  --z-toast: 100;
  --z-tooltip: 110;

  /* 字重 */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ═══ 兼容旧模板变量 ═══ */
  --blue: var(--amber-400);
  --blue-dark: var(--amber-600);
  --blue-light: rgba(245,158,11,0.1);
  --blue-border: rgba(245,158,11,0.3);
  --blue-glow: rgba(245,158,11,0.16);
  --green: #34D399;
  --green-bg: rgba(52,211,153,0.12);
  --green-border: rgba(52,211,153,0.3);
  --amber: #F59E0B;
  --amber-bg: rgba(245,158,11,0.12);
  --amber-border: rgba(245,158,11,0.3);
  --orange: #F59E0B;
  --red: #EF4444;
  --red-bg: rgba(239,68,68,0.12);
  --red-border: rgba(239,68,68,0.3);
  --purple: #B48ED8;
  --purple-bg: rgba(180,142,216,0.12);
  --purple-border: rgba(180,142,216,0.3);
  --text-white: var(--text-primary);
  --accent-blue: var(--amber-400);
  --accent-green: var(--green-400);
  --bg-body: var(--bg-deep);
  --bg-card: var(--glass-bg);
  --bg-card-hover: var(--glass-bg-hover);
  --bg-card-solid: #1A1814;
  --bg-glass: rgba(18,17,14,0.78);
  --bg-glass-strong: rgba(18,17,14,0.93);
  --bg-input: rgba(245,242,236,0.04);
  --bg-overlay: #201D18;
  --glass-blur: blur(20px) saturate(120%);
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px;
  --tag-clearance: #FCD34D;
  --tag-clearance-bg: rgba(252,211,77,0.1);
  --tag-abandon: var(--red-400);
  --tag-abandon-bg: rgba(239,68,68,0.1);
  --tag-paused: var(--text-secondary);
  --tag-paused-bg: rgba(184,178,164,0.1);
}

/* ═══════════════════ 全局基础 ═══════════════════ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.55;
}

/* 背景光晕：暖金微光（左上）+ 暖棕（右下） */
body::before {
  content: '';
  position: fixed; top: -20%; left: -10%;
  width: 60vw; height: 60vh;
  background: radial-gradient(ellipse, rgba(245,158,11,0.07) 0%, rgba(217,119,6,0.03) 40%, transparent 70%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; bottom: -15%; right: -5%;
  width: 50vw; height: 50vh;
  background: radial-gradient(ellipse, rgba(180,83,9,0.07) 0%, rgba(232,168,124,0.02) 40%, transparent 70%);
  pointer-events: none; z-index: 0;
}

#app { min-height: 100vh; position: relative; z-index: 1; }

a { color: var(--amber-400); text-decoration: none; }
a:hover { color: var(--amber-300); }

::selection { background: rgba(245,158,11,0.3); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(245,242,236,0.1);
  border-radius: 6px;
  border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: rgba(245,242,236,0.2); }

/* ═══════════════════ 顶栏 ═══════════════════ */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 60px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: rgba(13,12,10,0.78);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border-bottom: 1px solid var(--border-hairline);
  z-index: var(--z-header);
}

.logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(252,211,77,0.18), rgba(217,119,6,0.08));
  border: 1px solid rgba(245,158,11,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(245,158,11,0.12);
}
.logo-mark svg { width: 18px; height: 18px; fill: var(--amber-400); }

.logo-text {
  font-size: 15px; font-weight: var(--fw-bold); letter-spacing: 0.12em;
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.nav-ticker {
  flex: 1; min-width: 0; height: 32px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,242,236,0.025);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-full);
  padding: 0 14px;
  overflow: hidden;
}
.ticker-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--fw-semibold);
  color: var(--amber-400); white-space: nowrap;
  letter-spacing: 0.04em;
}
.ticker-label .lucide { width: 13px; height: 13px; }
.ticker-content { flex: 1; min-width: 0; overflow: hidden; }
.ticker-track {
  display: inline-flex; align-items: center; gap: 28px; white-space: nowrap;
  font-size: 12px; color: var(--text-secondary);
  will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-item { display: inline-flex; align-items: center; gap: 6px; }
.ticker-item .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber-400);
  box-shadow: 0 0 6px rgba(245,158,11,0.7);
}
.ticker-item .value { color: var(--text-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ticker-item .up { color: var(--green-400); font-size: 9px; }
.rate-num { font-family: var(--font-mono); color: var(--amber-300); font-variant-numeric: tabular-nums; }
.rate-flash { animation: rateFlash 0.8s ease; }
@keyframes rateFlash {
  0% { color: var(--green-400); text-shadow: 0 0 8px rgba(74,222,128,0.6); }
  100% { color: var(--amber-300); text-shadow: none; }
}

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: var(--transition);
}
.nav-icon-btn:hover { background: var(--glass-bg-hover); color: var(--text-primary); border-color: var(--border-hairline); }
.nav-icon-btn .lucide { width: 17px; height: 17px; }
/* lucide 图标显式尺寸（防止 flex 收缩压扁图标） */
.nav-icon-btn svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-icon-btn .badge {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber-500); border: none; padding: 0; min-width: 0;
  box-shadow: 0 0 6px rgba(245,158,11,0.8);
}

.nav-avatar-wrap {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 6px; border-radius: var(--radius-full);
  cursor: pointer; border: 1px solid transparent;
  transition: var(--transition);
}
.nav-avatar-wrap:hover { background: var(--glass-bg-hover); border-color: var(--border-hairline); }
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gradient-brand);
  color: #201503; font-weight: var(--fw-bold); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.nav-user-name { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.nav-user-role { font-size: 11px; color: var(--text-tertiary); }
.nav-user-caret { width: 14px; height: 14px; color: var(--text-tertiary); }

/* ═══════════════════ 侧边栏 ═══════════════════ */
.sidebar {
  position: fixed; top: 60px; left: 0; bottom: 0;
  width: 220px;
  background: rgba(18,17,14,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-hairline);
  padding: 14px 10px 20px;
  overflow-y: auto;
  z-index: var(--z-sidebar);
}

.sidebar-group { margin-bottom: 6px; }
.sidebar-label {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 10px;
  cursor: pointer; user-select: none;
  transition: var(--transition);
}
.sidebar-label:hover { background: var(--glass-bg-hover); }
.sidebar-label .gl {
  flex: 1; font-size: 11.5px; font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.sidebar-icon {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-bg, var(--glass-bg));
  flex-shrink: 0;
}
.sidebar-icon .lucide, .sidebar-icon svg { width: 14px; height: 14px; stroke: var(--icon-color, var(--text-tertiary)); }
.group-caret { width: 13px; height: 13px; color: var(--text-quaternary); transition: transform 0.2s; }
.group-caret.open { transform: rotate(180deg); }
/* v5.2: 折叠动效改用 max-height+visibility（display 不可动画，规则由 v5.2 层接管） */

.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0;
  border-radius: 10px;
  font-size: 13px; font-weight: var(--fw-medium);
  color: var(--text-secondary);
  position: relative;
  transition: var(--transition);
}
.sidebar-item:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
}
.sidebar-item .sidebar-icon svg { stroke: var(--icon-color, var(--text-tertiary)); }
.sidebar-item:hover .sidebar-icon svg { stroke: var(--icon-color-hover, var(--text-primary)); }
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(245,158,11,0.13), rgba(217,119,6,0.04) 70%, transparent);
  color: var(--amber-300);
}
.sidebar-item.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: var(--gradient-brand);
  box-shadow: 0 0 8px rgba(245,158,11,0.6);
}
.sidebar-item.active .sidebar-icon svg { stroke: #fff; }
.sidebar-item .sidebar-count {
  margin-left: auto; font-size: 10.5px; font-weight: var(--fw-semibold);
  color: var(--text-tertiary); background: var(--glass-bg);
  border: 1px solid var(--border-hairline);
  padding: 1px 7px; border-radius: var(--radius-full);
}

.sidebar-item.locked { opacity: 0.4; }
.sidebar-item.locked:hover { opacity: 0.7; }
.sidebar-item .mod-lock { width: 12px; height: 12px; margin-left: auto; color: var(--text-quaternary); }

/* 侧边栏「专业模式」按钮 */
.sidebar-item.side-upgrade {
  border: 1px dashed rgba(245,158,11,0.3);
  background: rgba(245,158,11,0.04); color: var(--amber-400);
  justify-content: flex-start; cursor: pointer; font-family: inherit; text-align: left;
  margin-top: 6px;
}
.sidebar-item.side-upgrade:hover { background: rgba(245,158,11,0.09); border-color: rgba(245,158,11,0.5); color: var(--amber-300); }

/* ═══════════════════ 主布局 ═══════════════════ */
.main-content {
  margin-left: 220px; padding-top: 60px;
  min-height: 100vh; position: relative; z-index: 1;
}
.main-content.no-auth { margin-left: 0; padding-top: 0; }
.main-content .container {
  max-width: 1560px; margin: 0 auto;
  padding: 26px 28px 40px;
  animation: pageFadeIn var(--dur-slow) var(--ease-out);
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.footer { max-width: 1560px; margin: 0 auto; padding: 0 28px 30px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-tertiary);
  transition: var(--transition);
}
.back-btn:hover { color: var(--amber-400); }
.back-btn .lucide { width: 13px; height: 13px; }

/* ═══════════════════ 页面头部 ═══════════════════ */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.page-title { display: flex; align-items: center; gap: 14px; }
.page-title .title-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(217,119,6,0.06));
  border: 1px solid rgba(245,158,11,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--amber-400);
  box-shadow: 0 0 16px rgba(245,158,11,0.1);
}
.page-title .title-icon svg { width: 20px; height: 20px; }
.page-header h1, .page-title h1 {
  font-size: 26px; font-weight: var(--fw-bold); letter-spacing: -0.01em;
  margin: 0; line-height: 1.25;
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-subtitle {
  font-size: 13px; color: var(--text-tertiary); margin: 6px 0 0 58px;
}
.header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* 面包屑 */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-quaternary);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--text-tertiary); text-decoration: none; transition: var(--transition); }
.breadcrumb a:hover { color: var(--amber-400); }
.breadcrumb span { color: var(--text-secondary); }
.breadcrumb .lucide { width: 11px; height: 11px; }

/* ═══════════════════ 卡片系统 ═══════════════════ */
.stat-card, .kpi-card, .filter-card, .table-card, .chart-card,
.card, .card-grad, .card-flat, .summary-card {
  background: linear-gradient(180deg, rgba(245,242,236,0.028), rgba(245,242,236,0.014)) padding-box,
              var(--bg-surface) padding-box;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  position: relative;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(245,242,236,0.035);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.stat-card::before, .filter-card::before, .table-card::before, .chart-card::before,
.card::before, .card-grad::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gradient-hairline);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  pointer-events: none;
}
.stat-card:hover, .kpi-card:hover, .filter-card:hover, .table-card:hover,
.chart-card:hover, .card-grad:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,0.28);
  box-shadow: var(--shadow-3), var(--shadow-glow-brand), inset 0 1px 0 rgba(245,242,236,0.05);
}
.stat-card:hover::before, .filter-card:hover::before, .table-card:hover::before,
.chart-card:hover::before {
  background: var(--gradient-hairline-gold);
}

/* KPI 统计卡 */
.stat-card { padding: 20px; overflow: hidden; }
.stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stat-label {
  font-size: 11px; font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon svg { width: 17px; height: 17px; }
.stat-icon.amber, .stat-icon.orange { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber-400); }
.stat-icon.cyan, .stat-icon.blue { background: linear-gradient(135deg, rgba(232,195,122,0.2), rgba(232,195,122,0.05)); color: var(--gold); }
.stat-icon.green { background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(74,222,128,0.04)); color: var(--green-400); }
.stat-icon.purple { background: linear-gradient(135deg, rgba(180,142,216,0.18), rgba(180,142,216,0.04)); color: var(--purple-400); }
.stat-icon.red { background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(248,113,113,0.04)); color: var(--red-400); }
.stat-icon.gold { background: linear-gradient(135deg, rgba(232,195,122,0.2), rgba(232,195,122,0.05)); color: var(--gold); }
.stat-value {
  font-family: var(--font-mono); font-size: 30px; font-weight: var(--fw-bold);
  letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: var(--fw-semibold); font-family: var(--font-mono);
  padding: 3px 8px; border-radius: 9999px; font-variant-numeric: tabular-nums;
}
.stat-trend.up { background: rgba(74,222,128,0.12); color: var(--green-400); }
.stat-trend.down { background: rgba(248,113,113,0.12); color: var(--red-400); }
.stat-mini { position: absolute; bottom: 16px; right: 16px; width: 80px; height: 32px; opacity: 0.6; }

.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 20px;
}

/* hero KPI：金色渐变描边 + 光带 */
.kpi-card { padding: 22px 24px; overflow: hidden; }
.kpi-card.hero, .kpi-card.hero-card {
  background:
    linear-gradient(180deg, rgba(245,242,236,0.03), transparent 42%) padding-box,
    linear-gradient(135deg, #17140F, #12100B) padding-box,
    linear-gradient(135deg, rgba(245,158,11,0.5), rgba(245,158,11,0.14) 45%, rgba(232,168,124,0.32)) border-box;
  border: 1px solid transparent;
}
.kpi-card.hero::before, .kpi-card.hero-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gradient-hairline-gold);
}
.kpi-value, .kpi-card.hero .kpi-value, .kpi-card.hero-card .kpi-value {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: var(--fw-bold); margin: 8px 0 2px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.kpi-card.hero .kpi-value, .kpi-card.hero-card .kpi-value {
  font-size: 42px; letter-spacing: -0.02em;
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-head { display: flex; justify-content: space-between; align-items: center; }
.kpi-label { font-size: 12px; color: var(--text-tertiary); font-weight: var(--fw-medium); }
.kpi-icon { width: 18px; height: 18px; color: var(--text-tertiary); }
.kpi-unit { font-size: 13px; color: var(--text-tertiary); margin-left: 4px; }
.kpi-delta { font-size: 12.5px; font-weight: var(--fw-semibold); }
.delta-good { color: var(--green-400); }
.delta-bad { color: var(--red-400); }
.kpi-hint { font-size: 11.5px; color: var(--text-quaternary); margin-top: 4px; }
.kpi-trend {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: 12.5px; font-weight: var(--fw-bold); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.kpi-trend.up { background: rgba(74,222,128,0.12); color: var(--green-400); }
.kpi-trend.down { background: rgba(248,113,113,0.12); color: var(--red-400); }
.kpi-mini-chart { width: 100%; position: relative; z-index: 1; }
.kpi-brand { border-color: rgba(245,158,11,0.25); }
.kpi-success { border-color: rgba(74,222,128,0.25); }
.kpi-warning { border-color: rgba(245,158,11,0.25); }
.kpi-danger { border-color: rgba(248,113,113,0.25); }
.kpi-neutral { border-color: var(--border-hairline); }

/* 筛选区 */
.filter-card { padding: 20px; margin-bottom: 16px; overflow: hidden; }
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-label { font-size: 12px; color: var(--text-tertiary); font-weight: var(--fw-semibold); white-space: nowrap; }

/* 搜索框 */
.search-box { flex: 1; min-width: 280px; position: relative; }
.search-box input {
  width: 100%; padding: 10px 14px 10px 40px;
  background: rgba(245,242,236,0.035);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
  transition: all 0.2s; outline: none;
}
.search-box input:focus {
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.13), inset 0 1px 0 rgba(245,242,236,0.04);
  background: rgba(245,242,236,0.05);
}
.search-box .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); width: 16px; height: 16px;
}

/* 胶囊筛选 */
.capsule-group {
  display: flex; gap: 4px;
  background: rgba(0,0,0,0.28);
  padding: 3px; border-radius: 9999px;
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(245,242,236,0.03);
}
.capsule-btn {
  padding: 7px 16px; border-radius: 9999px;
  font-size: 12px; font-weight: var(--fw-semibold);
  color: var(--text-tertiary); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  border: none; background: transparent;
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
}
.capsule-btn:hover:not(.active) { color: var(--text-primary); transform: translateY(-1px); }
.capsule-btn.active {
  background: var(--gradient-primary-btn);
  color: #201503;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 10px rgba(245,158,11,0.38);
}
.capsule-btn .count { font-size: 10px; opacity: 0.75; }

/* ═══════════════════ 数据表格 ═══════════════════ */
.table-card { overflow: hidden; }
.table-card .table-wrap { overflow-x: auto; }
main .table-wrap { margin-bottom: 20px; }

.data-table {
  width: 100%; min-width: 1100px;
  border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  position: sticky; top: 0; z-index: 3;
  padding: 13px 16px; text-align: left;
  font-size: 11.5px; font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(26,24,20,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 13px 16px; font-size: 13.5px;
  border-bottom: 1px solid rgba(245,242,236,0.035);
  white-space: nowrap;
}
.data-table tbody tr { transition: background 0.2s; position: relative; }
.data-table tbody tr:nth-child(even) { background: rgba(245,242,236,0.012); }
.data-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(245,158,11,0.07), rgba(217,119,6,0.03), transparent);
}
.data-table tbody tr:hover td:first-child { border-left-color: var(--amber-500); }
.data-table tbody td:first-child {
  border-left: 2px solid transparent; transition: border-color 0.2s;
}
.data-table tbody tr:last-child td { border-bottom: none; }

/* 表格变体（订单/商品/库存/退货/历史/店铺） */
.orders-table, .products-table, .stock-table, .rc-table,
.history-table, .store-table, .rank-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
}
.orders-table thead th, .products-table thead th, .stock-table thead th,
.rc-table thead th, .history-table thead th, .store-table thead th,
.rank-table thead th {
  padding: 12px 16px; text-align: left;
  font-size: 12px; font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.orders-table tbody td, .products-table tbody td, .stock-table tbody td,
.rc-table tbody td, .history-table tbody td, .store-table tbody td {
  padding: 12px 16px; font-size: 13.5px;
  border-bottom: 1px solid rgba(245,242,236,0.035);
  white-space: nowrap;
}
.orders-table tbody tr:hover, .products-table tbody tr:hover,
.stock-table tbody tr:hover, .rc-table tbody tr:hover,
.history-table tbody tr:hover, .store-table tbody tr:hover {
  background: rgba(245,158,11,0.045);
}
.rank-table tbody tr:hover { background: rgba(245,158,11,0.05); }
.rank-table .rn {
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: 13px; text-align: center;
}
.rank-table .r1 { color: var(--amber-300); text-shadow: 0 0 10px rgba(252,211,77,0.45); }
.rank-table .r2 { color: #D8D2C6; text-shadow: 0 0 10px rgba(216,210,198,0.35); }
.rank-table .r3 { color: var(--bronze); text-shadow: 0 0 10px rgba(176,141,87,0.35); }
.rank-table tbody tr:hover td:nth-child(2) { color: var(--amber-300); text-shadow: 0 0 12px rgba(245,158,11,0.45); }

/* 商品单元格 */
.product-cell { display: flex; align-items: center; gap: 12px; }
.product-thumb {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: var(--fw-bold); color: #201503;
  background: var(--gradient-brand);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  object-fit: cover;
}
.product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-name { font-weight: var(--fw-medium); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.product-sku { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }

/* 状态徽章 */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 9999px;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-delivered { background: rgba(74,222,128,0.12); color: var(--green-400); }
.status-delivered .dot { background: var(--green-400); box-shadow: 0 0 6px var(--green-400); }
.status-pending { background: rgba(245,158,11,0.12); color: var(--amber-400); }
.status-pending .dot { background: var(--amber-400); box-shadow: 0 0 6px var(--amber-400); }
.status-shipping { background: rgba(125,169,216,0.12); color: var(--blue-400); }
.status-shipping .dot { background: var(--blue-400); box-shadow: 0 0 6px var(--blue-400); }
.status-cancelled { background: rgba(248,113,113,0.12); color: var(--red-400); }
.status-cancelled .dot { background: var(--red-400); box-shadow: 0 0 6px var(--red-400); }

/* 操作列 */
.row-actions { display: flex; gap: 4px; justify-content: center; }
.row-action-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
  background: transparent; color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.row-action-btn svg { width: 15px; height: 15px; }
.row-action-btn:hover { background: rgba(245,242,236,0.06); color: var(--amber-400); }

/* 金额列 */
.amount-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-cell .orig { color: var(--text-quaternary); text-decoration: line-through; font-size: 12px; margin-right: 6px; }
.amount-cell .pay { color: var(--green-400); font-weight: var(--fw-semibold); }

/* 表头右对齐 */
.data-table thead th[style*="text-align:right"],
.data-table thead th[style*="text-align: right"],
.data-table thead th.text-right, .data-table thead th.amount-cell {
  text-align: right;
}

/* ═══════════════════ 分页 ═══════════════════ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 20px; flex-wrap: wrap; }
.pagination .page-btn, .pagination button {
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: 10px;
  background: rgba(245,242,236,0.03);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary); font-size: 13px; font-weight: var(--fw-semibold);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; font-family: inherit;
}
.pagination .page-btn:hover, .pagination button:hover {
  background: rgba(245,242,236,0.06); color: var(--text-primary);
  border-color: var(--border-default);
}
.pagination .page-btn.active, .pagination button.current, .pagination .page-btn.current {
  background: var(--gradient-primary-btn); color: #201503;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 10px rgba(245,158,11,0.35);
}
.pagination .page-btn:disabled, .pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
.page-info { font-size: 13px; color: var(--text-tertiary); margin: 0 12px; font-variant-numeric: tabular-nums; }

/* ═══════════════════ 按钮 ═══════════════════ */
button {
  font-family: inherit;
  background: rgba(245,242,236,0.04);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.4;
}
button:hover { background: rgba(245,242,236,0.08); border-color: var(--border-strong); }
button:active { transform: translateY(1px) scale(0.98); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button svg, button .lucide { pointer-events: none; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s; font-family: var(--font-sans); color: var(--text-primary);
}
.btn-icon { width: 16px; height: 16px; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn:active { transform: translateY(1px) scale(0.97); }

.btn-primary {
  background: var(--gradient-primary-btn);
  color: #201503;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px rgba(217,119,6,0.35);
  position: relative;
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(217,119,6,0.45);
}
.btn-primary:active { transform: translateY(0) scale(0.98); filter: brightness(0.96); }
.btn-primary::before {
  content: ''; position: absolute; right: 12px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  transform: translateY(-50%);
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
  opacity: 0.85; pointer-events: none;
}
.btn-primary:hover::before { transform: translateY(-50%) scale(5.5); opacity: 0; }
.btn-primary.btn-loading::before { display: none; }

.btn-secondary {
  background: var(--glass-bg);
  border-color: var(--border-default);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(245,242,236,0.05);
}
.btn-secondary:hover { background: var(--glass-bg-hover); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--glass-bg); color: var(--text-primary); }
.btn-danger { background: rgba(239,68,68,0.9); color: #fff; }
.btn-danger:hover { background: #EF4444; }
.btn-success { background: rgba(52,211,153,0.9); color: #06281A; }
.btn-success:hover { background: #34D399; }
.btn-upgrade {
  background: var(--gradient-brand);
  color: #201503;
  box-shadow: 0 4px 18px rgba(217,119,6,0.4);
}
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.btn:not(.btn-icon):hover .lucide { transform: translateX(3px) rotate(8deg); }
.btn .lucide, .btn-primary .lucide { transition: transform 0.35s var(--ease-out); }

.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ═══════════════════ 表单 ═══════════════════ */
input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="date"], input[type="search"],
input[type="datetime-local"], select, textarea {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: rgba(245,242,236,0.035);
  color: var(--text-primary);
  padding: 9px 13px;
  font-size: 13.5px; font-family: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.22);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.13), inset 0 1px 0 rgba(245,242,236,0.04);
  background: rgba(245,242,236,0.05);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B8B2A4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px; appearance: none; -webkit-appearance: none;
}
::placeholder { color: var(--text-quaternary); }

label { font-size: 12.5px; color: var(--text-secondary); font-weight: var(--fw-medium); }

/* 筛选工具栏按钮 */
.filter-btn, .store-btn, .date-btn, .status-filter, .seg, .tab,
.tt, .tag-btn, .btn-edit-cost, .btn-green, .btn-blue, .btn-orange, .tb-select {
  font-family: inherit; cursor: pointer;
  border: 1px solid var(--border-default);
  background: rgba(245,242,236,0.04);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 7px 13px; font-size: 12.5px; font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.filter-btn:hover, .store-btn:hover, .date-btn:hover, .status-filter:hover,
.seg:hover, .tab:hover, .tt:hover, .tag-btn:hover, .btn-edit-cost:hover,
.tb-select:hover { background: rgba(245,242,236,0.08); color: var(--text-primary); border-color: var(--border-strong); }
.filter-btn.active, .status-filter.active, .seg.active, .tab.active {
  background: var(--gradient-primary-btn); color: #201503; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(245,158,11,0.32);
}
.btn-green { color: var(--green-400); border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.08); }
.btn-blue { color: var(--blue-400); border-color: rgba(125,169,216,0.3); background: rgba(125,169,216,0.08); }
.btn-orange { color: var(--amber-400); border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }

/* ═══════════════════ 徽章 / 标签 ═══════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.badge-icon { width: 12px; height: 12px; }
.badge-neutral { background: rgba(184,178,164,0.14); color: var(--text-secondary); }
.badge-info { background: rgba(125,169,216,0.14); color: var(--blue-400); }
.badge-success { background: rgba(74,222,128,0.14); color: var(--green-400); }
.badge-warning { background: rgba(245,158,11,0.14); color: var(--amber-400); }
.badge-danger { background: rgba(248,113,113,0.14); color: var(--red-400); }
.badge-brand { background: rgba(245,158,11,0.12); color: var(--amber-400); }
.badge-gray { background: rgba(184,178,164,0.14); color: var(--text-secondary); }
.tag, .text-dim { color: var(--text-tertiary); }
.mono { font-family: var(--font-mono); }
.orange { color: var(--amber-400); }
.text-red { color: var(--red-400); }
.text-green { color: var(--green-400); }
.text-orange { color: var(--amber-400); }
.text-gray { color: var(--text-tertiary); }
.ops-cell { font-family: var(--font-mono); font-size: 12px; }

/* ═══════════════════ 弹窗 / 下拉 ═══════════════════ */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal);
  animation: maskFadeIn var(--dur-base) ease;
}
@keyframes maskFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: linear-gradient(180deg, rgba(245,242,236,0.03), transparent 40%) padding-box,
              var(--bg-raised) padding-box;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 420px; max-width: min(680px, 92vw);
  max-height: 86vh; overflow-y: auto;
  box-shadow: var(--shadow-4);
  animation: modalPop var(--dur-slow) var(--ease-spring);
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(14px) scale(0.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gradient-hairline-gold);
}
.modal-card { position: relative; }
.modal-card h3, .modal-box h3 { margin: 0 0 14px; font-size: 17px; font-weight: var(--fw-bold); color: var(--text-primary); }

/* 弹窗按钮组 */
.modal-actions, .modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;
}

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 170px;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px;
  display: none; z-index: var(--z-dropdown);
  box-shadow: var(--shadow-4);
}
.dropdown.open .dropdown-menu, .dropdown-menu.show { display: block; animation: dropdownIn 0.18s var(--ease-out); }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px; background: none; border: none; cursor: pointer;
  text-decoration: none;
}
.dropdown-menu a:hover, .dropdown-menu button:hover {
  background: var(--glass-bg-hover); color: var(--text-primary);
}
.dropdown-menu .lucide { width: 14px; height: 14px; }

/* ═══════════════════ 空状态 / 提示 ═══════════════════ */
.empty-state, .empty-guide {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 56px 24px; text-align: center;
}
.empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-quaternary);
}
.empty-icon i, .empty-icon svg { width: 28px; height: 28px; }
.empty-title { font-size: 16px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.empty-desc { font-size: 13px; color: var(--text-secondary); max-width: 360px; }
.empty-secondary { margin-top: 4px; font-size: 12px; color: var(--text-quaternary); }

.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--radius-md);
  font-size: 13px; margin-bottom: 12px;
  border: 1px solid var(--border-default);
  background: var(--glass-bg);
}
.banner-icon { width: 16px; height: 16px; flex: none; }
.banner-text { flex: 1; color: var(--text-primary); }
.banner-action { color: var(--amber-400); font-weight: var(--fw-semibold); white-space: nowrap; }
.banner-info { border-color: rgba(125,169,216,0.3); background: rgba(125,169,216,0.07); }
.banner-warning { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.07); }
.banner-danger { border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.07); }
.banner-success { border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.07); }
.banner-upgrade { border-color: rgba(245,158,11,0.4); background: var(--gradient-hero-card); }
.banner-close { background: none; border: none; color: var(--text-tertiary); font-size: 18px; cursor: pointer; }

/* ═══════════════════ 进度条 ═══════════════════ */
.progress-block { margin: 8px 0; }
.progress-meta {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;
}
.progress-track {
  height: 8px; border-radius: 4px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }
.progress-brand { background: var(--gradient-brand); }
.progress-success { background: var(--green-400); }
.progress-warning { background: var(--amber-400); }
.progress-danger { background: var(--red-400); }

/* ═══════════════════ Tabs ═══════════════════ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-hairline); }
.tab {
  background: none; border: none; padding: 10px 16px; cursor: pointer;
  color: var(--text-secondary); font-size: 13.5px;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--amber-400); border-bottom-color: var(--amber-500); }

/* ═══════════════════ Tooltip / Toast ═══════════════════ */
.tooltip {
  position: fixed; z-index: var(--z-tooltip);
  background: var(--bg-raised); color: var(--text-primary);
  padding: 6px 10px; border-radius: 8px; font-size: 12px;
  border: 1px solid var(--border-default);
  pointer-events: none; display: none;
  box-shadow: var(--shadow-3);
}

.toast-container {
  position: fixed; top: 16px; right: 16px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 12px 18px; border-radius: var(--radius-md);
  font-size: 13.5px; color: var(--text-primary);
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  opacity: 0; transform: translateX(20px);
  transition: all 0.25s; cursor: pointer;
  box-shadow: var(--shadow-3);
}
.toast-in { opacity: 1; transform: translateX(0); }
.toast-out { opacity: 0; transform: translateX(20px); }
.toast-success { border-color: rgba(74,222,128,0.5); }
.toast-error { border-color: rgba(248,113,113,0.5); }
.toast-info { border-color: rgba(125,169,216,0.5); }
.toast-warning { border-color: rgba(245,158,11,0.5); }

/* ═══════════════════ 图表 ═══════════════════ */
.chart-card { padding: 24px; overflow: hidden; }
.chart-title { font-size: 15.5px; font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 10px; }
.chart-title-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient-brand);
  box-shadow: 0 0 8px rgba(245,158,11,0.7);
}

.svg-chart { position: relative; }
.svg-chart-tip {
  position: absolute; z-index: var(--z-tooltip); pointer-events: none;
  background: rgba(26,24,20,0.97);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 10px; padding: 8px 12px;
  font-size: 12px; color: var(--text-primary);
  box-shadow: var(--shadow-3), 0 0 20px rgba(245,158,11,0.12);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  min-width: 120px; max-width: 260px;
}
.svg-chart-tip.show { opacity: 1; transform: translateY(0); }
.svg-chart-tip .tip-title { color: var(--text-tertiary); font-size: 11px; margin-bottom: 4px; }
.svg-chart-tip .tip-row {
  display: flex; align-items: center; gap: 6px; padding: 1px 0;
  font-variant-numeric: tabular-nums;
}
.svg-chart-tip .tip-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.svg-chart-tip .tip-val { margin-left: auto; font-weight: var(--fw-semibold); }
.svg-legend-row {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  justify-content: flex-end; padding: 4px 8px 6px;
  font-size: 11px; color: var(--text-secondary);
}
.svg-legend { display: inline-flex; align-items: center; gap: 5px; }
.svg-legend-dot {
  width: 9px; height: 9px; border-radius: 3px; display: inline-block;
  box-shadow: 0 0 6px rgba(245,242,236,0.14);
}

/* 图表动画（charts.js v2 配套） */
.c-bar { transform-box: fill-box; transform-origin: bottom; animation: barGrow 0.7s var(--ease-out) backwards; }
@keyframes barGrow { from { transform: scaleY(0); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }
.c-line { animation: lineDraw 1s var(--ease-out) backwards; }
@keyframes lineDraw { from { opacity: 0; } to { opacity: 1; } }
.c-area { animation: areaFade 1.1s ease backwards; }
@keyframes areaFade { from { opacity: 0; } to { opacity: 1; } }
.c-dot { transform-box: fill-box; transform-origin: center; animation: dotPop 0.45s var(--ease-spring) backwards; }
@keyframes dotPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.c-dot.hot { animation: none; r: 5.5px; stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(245,158,11,0.9)); }
.c-hoverline { transition: opacity 0.15s ease; }
.c-overlay { cursor: crosshair; }
.c-pie { transform-box: fill-box; transform-origin: center; animation: piePop 0.6s var(--ease-spring) backwards; }
@keyframes piePop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
.c-pie:hover { filter: brightness(1.25); }

/* ═══════════════════ 动效层（保留氛围特效，暖调化） ═══════════════════ */

/* 卡片激光扫过 */
.kpi-card::after, .card-grad::after, .card::after,
.stat-card::after, .filter-card::after, .table-card::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: -70%; width: 55%;
  background: linear-gradient(105deg, transparent 30%, rgba(252,211,77,0.1) 45%, rgba(252,211,77,0.18) 50%, rgba(252,211,77,0.1) 55%, transparent 70%);
  transform: skewX(-12deg);
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.kpi-card:hover::after, .card-grad:hover::after, .card:hover::after,
.stat-card:hover::after, .filter-card:hover::after, .table-card:hover::after { left: 140%; }

/* 背景网格 */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(245,242,236,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,242,236,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}

/* 背景粒子 */
.bg-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-particles .p {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: var(--pc, rgba(252,211,77,0.6));
  opacity: 0; animation: particleFloat var(--pd, 15s) linear infinite;
  animation-delay: var(--pdel, 0s);
}
@keyframes particleFloat {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: var(--po, 0.4); }
  90% { opacity: var(--po, 0.4); }
  100% { opacity: 0; transform: translate(var(--px, 30px), -110vh); }
}

/* 极光光晕 */
.aurora-glow {
  position: fixed; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.09), transparent 65%);
  filter: blur(40px);
  animation: auroraBreathe 9s ease-in-out infinite;
}
@keyframes auroraBreathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  50% { transform: scale(1.15) translate(20px, -14px); opacity: 1; }
}

/* 鼠标跟随光晕 */
.mouse-glow { position: relative; }
.mouse-glow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(245,158,11,0.08), transparent 70%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 0;
}
.mouse-glow:hover::before { opacity: 1; }
.mouse-glow > * { position: relative; z-index: 1; }

/* 按钮涟漪 */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(252,211,77,0.35);
  transform: scale(0); animation: rippleGrow 0.65s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleGrow { to { transform: scale(1); opacity: 0; } }

/* 表格行错开入场 */
.stagger-row { animation: staggerIn 0.4s var(--ease-out) backwards; }
@keyframes staggerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* KPI 错峰入场 */
.stats-grid .stat-card, .stats-grid .kpi-card { animation: cardRise var(--dur-slow) var(--ease-out) backwards; }
.stats-grid .stat-card:nth-child(1), .stats-grid .kpi-card:nth-child(1) { animation-delay: 0.02s; }
.stats-grid .stat-card:nth-child(2), .stats-grid .kpi-card:nth-child(2) { animation-delay: 0.07s; }
.stats-grid .stat-card:nth-child(3), .stats-grid .kpi-card:nth-child(3) { animation-delay: 0.12s; }
.stats-grid .stat-card:nth-child(4), .stats-grid .kpi-card:nth-child(4) { animation-delay: 0.17s; }
.stats-grid .stat-card:nth-child(5), .stats-grid .kpi-card:nth-child(5) { animation-delay: 0.22s; }
.stats-grid .stat-card:nth-child(6), .stats-grid .kpi-card:nth-child(6) { animation-delay: 0.27s; }
@keyframes cardRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 骨架屏 */
.skeleton {
  position: relative; overflow: hidden;
  background: rgba(245,242,236,0.04);
  border-radius: var(--radius-md);
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-skeleton);
  transform: translateX(-100%);
  animation: skeletonSlide 1.4s ease infinite;
}
@keyframes skeletonSlide { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.skeleton-card {
  background: var(--glass-bg);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
}
.skeleton-line { height: 14px; margin-bottom: 14px; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-num { height: 36px; width: 55%; margin-bottom: 14px; border-radius: 8px; }
.skeleton-row { display: flex; gap: 16px; padding: 13px 16px; border-bottom: 1px solid rgba(245,242,236,0.035); }
.skeleton-row .skeleton { flex: 1; height: 12px; border-radius: 6px; }
.skeleton-row .skeleton.w40 { flex: 0.4; }
.skeleton-row .skeleton.w60 { flex: 0.6; }
.skeleton-row .skeleton.w80 { flex: 0.8; }

/* 数字滚动 */
.num-anim { display: inline-block; font-variant-numeric: tabular-nums; }

/* ═══════════════════ 卡片结构 ═══════════════════ */
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-hairline);
}
.card-title { display: flex; align-items: center; gap: 8px; }
.card-title h3 { margin: 0; font-size: 15px; color: var(--text-primary); font-weight: var(--fw-semibold); }
.card-icon { width: 18px; height: 18px; color: var(--amber-400); }
.card-body { padding: 20px; }

/* 区块标题 */
main h3 {
  font-size: 15px; font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}

/* 广告概览精修 */
.ad-stat { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 10px; }

/* 预警条目精修 */
.alert-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius-md);
  background: rgba(245,242,236,0.025);
  border: 1px solid var(--border-hairline);
  margin-bottom: 8px; font-size: 13px;
}

/* ═══════════════════ 响应式 ═══════════════════ */
@media (max-width: 1400px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .data-table { min-width: 1000px; }
}
@media (max-width: 1200px) {
  .page-header h1, .page-title h1 { font-size: 22px; }
  .stat-value { font-size: 24px; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .search-box { min-width: 100%; }
  .page-header { flex-direction: column; gap: 12px; }
  .main-content .container { padding: 18px 16px 30px; }
  .modal-box { min-width: 0; }
  .nav-user-info { display: none; }
}

/* 键盘焦点 */
:focus-visible { outline: 2px solid rgba(245,158,11,0.55); outline-offset: 2px; }

/* 减弱动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-track { animation: none; }
  .bg-particles .p { animation: none; opacity: 0; }
}

/* ═══════════════════ v5 补丁层（覆盖旧选择器清单，暖调化） ═══════════════════ */

/* 徽章/标签 色变体 */
.badge-amber, .tag-amber { background: rgba(245,158,11,0.14); color: var(--amber-400); }
.badge-blue, .tag-blue { background: rgba(125,169,216,0.14); color: var(--blue-400); }
.badge-green, .tag-green { background: rgba(74,222,128,0.14); color: var(--green-400); }
.badge-orange { background: rgba(245,158,11,0.14); color: var(--amber-400); }
.badge-purple, .tag-purple { background: rgba(180,142,216,0.14); color: var(--purple-400); }
.badge-red, .tag-red { background: rgba(248,113,113,0.14); color: var(--red-400); }
.tag-pink { background: rgba(232,168,124,0.14); color: var(--pink-400); }

/* 语义工具类 */
.muted { color: var(--text-tertiary); }
.sub { color: var(--text-quaternary); font-size: 0.85em; }
.small { font-size: 12px; }
.big { font-size: 17px; }
.lbl { font-size: 12px; color: var(--text-tertiary); }
.hint { font-size: 11.5px; color: var(--text-quaternary); }
.info { color: var(--blue-400); }
.success { color: var(--green-400); }
.danger { color: var(--red-400); }
.warning { color: var(--amber-400); }
.pink { color: var(--pink-400); }
.t-cyan, .g-cyan { color: var(--amber-400); }
.t-green, .g-green { color: var(--green-400); }
.t-orange, .g-orange { color: var(--amber-400); }
.t-pink, .g-pink { color: var(--pink-400); }
.t-purple, .g-purple { color: var(--purple-400); }

/* 预警条目 */
.alert, .alert-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(245,242,236,0.025); border: 1px solid var(--border-hairline); margin-bottom: 8px; font-size: 13px; }
.alert-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.alert-icon .lucide, .alert-icon svg { width: 15px; height: 15px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: 13px; }
.alert-desc { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.alert-action { flex: none; align-self: center; }
.alert-info { border-color: rgba(125,169,216,0.3); background: rgba(125,169,216,0.06); }
.alert-info .alert-icon { background: rgba(125,169,216,0.14); color: var(--blue-400); }
.alert-success { border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.06); }
.alert-success .alert-icon { background: rgba(74,222,128,0.14); color: var(--green-400); }
.alert-warning { border-color: rgba(245,158,11,0.32); background: rgba(245,158,11,0.06); }
.alert-warning .alert-icon { background: rgba(245,158,11,0.14); color: var(--amber-400); }
.alert-error { border-color: rgba(248,113,113,0.32); background: rgba(248,113,113,0.06); }
.alert-error .alert-icon { background: rgba(248,113,113,0.14); color: var(--red-400); }
.alert-img { width: 26px; height: 26px; border-radius: 7px; }

/* 图表小部件 */
.bar-chart { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bar-label { width: 90px; flex: none; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 8px; border-radius: 4px; background: rgba(0,0,0,0.3); overflow: hidden; border: 1px solid var(--border-hairline); }
.bar-fill { height: 100%; border-radius: 4px; background: var(--gradient-brand); transition: width 0.5s var(--ease-out); }
.bar-value { width: 56px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.spark-bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.spark-bars span { flex: 1; background: var(--gradient-brand); border-radius: 2px 2px 0 0; opacity: 0.85; min-height: 2px; }
.donut { position: relative; width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.donut-center { text-align: center; }
.mini-chart { width: 100%; height: 44px; }

/* hero 卡辅助 */
.hero-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.hero-meta .m-item { }
.hero-meta .m-label { font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
.hero-meta .m-val { font-family: var(--font-mono); font-size: 18px; font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hero-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-hairline); }

/* KPI 网格与图标 */
.kpi-grid { display: grid; gap: 16px; }
.kpi-icon-wrap { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.kpi-icon-wrap .lucide { width: 17px; height: 17px; }
.kpi-icon-cyan, .kpi-icon-orange { background: rgba(245,158,11,0.16); color: var(--amber-400); }
.kpi-icon-purple { background: rgba(180,142,216,0.16); color: var(--purple-400); }
.kpi-icon-pink { background: rgba(232,168,124,0.16); color: var(--pink-400); }
.kpi-sub { font-size: 12px; color: var(--text-tertiary); }

/* 卡片变体 */
.card-glass { background: rgba(26,24,20,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); }
.card-hero { padding: 24px; border-radius: var(--radius-xl); }
.card-sub { font-size: 12px; color: var(--text-tertiary); }
.clickable-card { cursor: pointer; }
.clickable-card:hover { border-color: rgba(245,158,11,0.3); box-shadow: var(--shadow-glow-brand); transform: translateY(-2px); }

/* 图表头 */
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-wrap { position: relative; }

/* 按钮胶囊 */
.btn-pill { border-radius: 9999px; padding: 7px 16px; }

/* 分段 Tabs */
.seg-tabs { display: inline-flex; background: rgba(0,0,0,0.28); border: 1px solid var(--border-hairline); border-radius: 9999px; padding: 3px; gap: 3px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }
.seg-tabs .seg { border-radius: 9999px; border: none; background: transparent; color: var(--text-tertiary); padding: 7px 16px; font-size: 12.5px; font-weight: var(--fw-semibold); }
.seg-tabs .seg.active { background: var(--gradient-primary-btn); color: #201503; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(245,158,11,0.32); }

/* 工具条/表单 */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12.5px; color: var(--text-secondary); font-weight: var(--fw-medium); margin-bottom: 6px; }

/* 风险等级 */
.risk-low { color: var(--green-400); }
.risk-mid { color: var(--amber-400); }
.risk-high { color: var(--red-400); }

/* 趋势胶囊 */
.trend-capsule { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 9999px; font-size: 11px; font-weight: var(--fw-semibold); font-family: var(--font-mono); }

/* 发光数字 */
.glow-num { text-shadow: 0 0 12px rgba(245,158,11,0.45); }

/* 商品缩略 */
.thumb-initial { display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: #201503; }

/* 等级 pill */
.pill { display: inline-flex; align-items: center; justify-content: center; padding: 2px 9px; border-radius: 9999px; font-size: 11px; font-weight: var(--fw-semibold); }
.pill-1 { background: rgba(252,211,77,0.14); color: var(--amber-300); }
.pill-2 { background: rgba(184,178,164,0.14); color: var(--text-secondary); }
.pill-3 { background: rgba(176,141,87,0.16); color: var(--bronze); }
.pill-4 { background: rgba(245,242,236,0.08); color: var(--text-tertiary); }

/* 表格兜底 / 空单元格 */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { padding: 12px 16px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-tertiary); text-align: left; border-bottom: 1px solid var(--border-default); }
.table td { padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid rgba(245,242,236,0.035); }
.table tbody tr:hover { background: rgba(245,158,11,0.045); }
.empty-cell { color: var(--text-quaternary); font-size: 12px; text-align: center; padding: 22px 10px; }

/* 决策链 / 流程 */
.decision-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.node { padding: 6px 14px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--border-default); font-size: 12.5px; color: var(--text-secondary); }
.arrow, .sep { color: var(--text-quaternary); font-size: 12px; }

/* 页副标题 / 数字 */
.page-sub { font-size: 13px; color: var(--text-tertiary); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cta { font-weight: var(--fw-semibold); color: var(--amber-400); }

/* Element Plus 残留类基础适配 */
.el-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: rgba(245,242,236,0.04); color: var(--text-primary); font-size: 13.5px; cursor: pointer; transition: var(--transition); }
.el-button:hover { background: rgba(245,242,236,0.08); }
.el-button--primary { background: var(--gradient-primary-btn); color: #201503; border-color: transparent; box-shadow: 0 4px 14px rgba(217,119,6,0.35); }
.el-button--small { padding: 5px 12px; font-size: 12px; }
.el-input__inner, .el-input__wrapper, .el-textarea__inner {
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: rgba(245,242,236,0.035); color: var(--text-primary); padding: 9px 13px; font-size: 13.5px; font-family: inherit;
}
.el-input__inner:focus, .el-textarea__inner:focus { outline: none; border-color: rgba(245,158,11,0.55); box-shadow: 0 0 0 3px rgba(245,158,11,0.13); }
.el-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.el-table th, .el-table .el-table__cell { padding: 12px 16px; border-bottom: 1px solid rgba(245,242,236,0.035); text-align: left; }
.el-table th { font-size: 12px; color: var(--text-tertiary); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--border-default); }
.el-card__header { padding: 16px 20px; border-bottom: 1px solid var(--border-hairline); font-weight: var(--fw-semibold); }
.el-dialog { background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-4); }
.el-dialog__title { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-primary); }
.el-tabs__nav-wrap { border-bottom: 1px solid var(--border-hairline); }
.el-tabs__item { padding: 10px 16px; color: var(--text-secondary); font-size: 13.5px; cursor: pointer; }
.el-tabs__item.is-active { color: var(--amber-400); }
.el-tabs__active-bar { background: var(--amber-500); height: 2px; }
.el-tag { display: inline-flex; padding: 3px 10px; border-radius: 9999px; font-size: 11.5px; font-weight: var(--fw-semibold); background: rgba(184,178,164,0.14); color: var(--text-secondary); }
.el-pagination, .el-pager { display: flex; align-items: center; gap: 6px; justify-content: center; }
.el-form-item__label { font-size: 12.5px; color: var(--text-secondary); font-weight: var(--fw-medium); }
.el-popper, .el-dropdown-menu, .el-select-dropdown__item { background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-4); color: var(--text-primary); }
.el-select-dropdown__item.is-selected, .el-select-dropdown__item.is-hovering { background: rgba(245,158,11,0.1); color: var(--amber-300); }
.el-message, .el-notification, .el-message-box { background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); box-shadow: var(--shadow-3); }
.el-message-box__title { font-size: 16px; font-weight: var(--fw-bold); }
.el-message-box__message { font-size: 13.5px; color: var(--text-secondary); }
.el-date-editor { border-radius: var(--radius-md); border: 1px solid var(--border-default); background: rgba(245,242,236,0.035); }

/* 其他小类兜底 */
.item { }
.input { }
.is-light { opacity: 0.75; }
.is-active { color: var(--amber-400); }
#app { }
.b { font-weight: var(--fw-bold); }
.css, .html { font-family: var(--font-mono); font-size: 12px; }
.ad-cta { color: var(--amber-400); font-weight: var(--fw-semibold); }
.ad-types { display: flex; gap: 8px; flex-wrap: wrap; }
.empty-guide-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.22); display: flex; align-items: center; justify-content: center; color: var(--amber-400); }
.empty-guide-icon svg { width: 24px; height: 24px; }

.el-select__wrapper { display: inline-flex; align-items: center; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: rgba(245,242,236,0.035); padding: 7px 13px; color: var(--text-primary); font-size: 13.5px; }
.t { }
legend { font-size: 12.5px; color: var(--text-secondary); font-weight: var(--fw-medium); }

/* ═══════════════════ v5.1 质感打磨层（2026-09-07 用户反馈：质感/细节/排版） ═══════════════════
   参考 Uiverse 金融卡多层质感 + Linear/Vercel 细节节奏 */

/* ── 1. 卡片质感：顶部光源 + 主体渐变 + 双内高光 + 四层阴影 ── */
.stat-card, .kpi-card, .filter-card, .table-card, .chart-card,
.card-grad, .summary-card, .modal-box {
  background:
    radial-gradient(130% 85% at 50% -12%, rgba(245,242,236,0.06), transparent 55%),
    linear-gradient(180deg, #171410 0%, #13100C 55%, #100E0A 100%);
  border: 1px solid rgba(245,242,236,0.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 1px 2px rgba(0,0,0,0.3),
    0 8px 24px rgba(0,0,0,0.32);
}
.stat-card:hover, .kpi-card:hover, .filter-card:hover, .table-card:hover,
.chart-card:hover, .card-grad:hover {
  transform: translateY(-4px);
  border-color: rgba(245,158,11,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.3),
    0 14px 34px rgba(0,0,0,0.42),
    0 0 0 1px rgba(245,158,11,0.12),
    0 0 36px rgba(245,158,11,0.14);
}

/* hero KPI：金描边质感强化 */
.kpi-card.hero, .kpi-card.hero-card {
  background:
    radial-gradient(130% 85% at 50% -12%, rgba(252,211,77,0.09), transparent 50%),
    linear-gradient(180deg, #1A160E 0%, #14100A 60%, #100D08 100%) padding-box,
    linear-gradient(135deg, rgba(252,211,77,0.62) 0%, rgba(245,158,11,0.2) 40%, rgba(232,168,124,0.42) 100%) border-box;
  border: 1px solid transparent;
}
.kpi-card.hero .kpi-value, .kpi-card.hero-card .kpi-value {
  font-size: 46px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ── 2. 细节：数字排版统一 ── */
.stat-value { font-size: 32px; letter-spacing: -0.025em; }
.stat-label { letter-spacing: 0.05em; }
.kpi-value { font-size: 28px; letter-spacing: -0.02em; }

/* ── 3. 表格质感：行高 46 + 表头微金 + hover 左侧金条 ── */
.data-table thead th {
  padding: 14px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(245,242,236,0.12);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5);
  background: linear-gradient(180deg, rgba(245,242,236,0.02), rgba(245,242,236,0.008));
}
.data-table tbody td { padding: 14px 16px; }
.data-table tbody tr { border-radius: 8px; }
.data-table tbody tr:hover { background: linear-gradient(90deg, rgba(245,158,11,0.085), rgba(217,119,6,0.04) 55%, transparent); }

/* ── 4. 按钮质感：40px 高 + 强内高光 + 底部内影 ── */
.btn { padding: 10px 20px; border-radius: 10px; font-size: 13.5px; }
button.btn-primary, .btn-primary {
  background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 48%, #D97706 100%);
  color: #241703;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.35),
    0 6px 18px rgba(217,119,6,0.4);
}
.btn-primary:hover, button.btn-primary:hover {
  background: linear-gradient(180deg, #FDE68A 0%, #FBBF24 48%, #F59E0B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.35),
    0 10px 26px rgba(217,119,6,0.5);
}
.btn-secondary, .btn-ghost {
  background: linear-gradient(180deg, rgba(245,242,236,0.07), rgba(245,242,236,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.3);
}
.capsule-btn { padding: 8px 18px; }
.capsule-group { box-shadow: inset 0 2px 5px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(245,242,236,0.04), 0 1px 0 rgba(0,0,0,0.3); }

/* ── 5. 表单质感：输入框 40px 高 + 内凹 + focus 金环 ── */
input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="date"], input[type="search"],
input[type="datetime-local"], select, textarea {
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(245,242,236,0.04);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(245,158,11,0.6);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.14), inset 0 1px 2px rgba(0,0,0,0.3);
}

/* ── 6. 排版节奏 ── */
.page-header { margin-bottom: 28px; }
.page-header h1, .page-title h1 { font-size: 28px; letter-spacing: -0.015em; }
.page-subtitle { margin-left: 62px; font-size: 13.5px; }
.stats-grid { gap: 18px; margin-bottom: 24px; }
.filter-card { padding: 20px 22px; margin-bottom: 18px; }
.table-card .table-wrap { }
main h3 { font-size: 15.5px; margin-bottom: 14px; }
.breadcrumb { margin-bottom: 14px; font-size: 12px; }
.stat-card { padding: 22px; }
.chart-card { padding: 26px; }
.kpi-card { padding: 24px 26px; }

/* ── 7. 徽章/状态细节 ── */
.status-badge, .badge { padding: 4px 11px; font-size: 11px; letter-spacing: 0.03em; }
.status-badge .dot { width: 5px; height: 5px; }
.row-action-btn { width: 32px; height: 32px; border-radius: 9px; }
.pagination { padding: 22px; gap: 7px; }
.pagination .page-btn, .pagination button { border-radius: 9px; min-width: 34px; height: 34px; }

/* ── 8. 弹窗质感 ── */
.modal-box {
  background:
    radial-gradient(130% 60% at 50% -10%, rgba(252,211,77,0.05), transparent 55%),
    linear-gradient(180deg, #1C1914 0%, #16130E 100%);
  border-color: rgba(245,242,236,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.55), 0 0 60px rgba(245,158,11,0.06);
}

/* ── 9. 侧边栏质感 ── */
.sidebar {
  background:
    radial-gradient(100% 40% at 50% -5%, rgba(245,242,236,0.02), transparent 60%),
    linear-gradient(180deg, #131009 0%, #100E0B 100%);
}
.sidebar-item.active { box-shadow: inset 2px 0 0 var(--amber-500), inset 0 1px 0 rgba(255,255,255,0.03); }

/* ── 10. 图表卡质感 ── */
.chart-title { font-size: 16px; letter-spacing: -0.01em; }
.chart-title-dot { width: 7px; height: 7px; box-shadow: 0 0 10px rgba(245,158,11,0.8); }

/* ═══════════════════ v5.2 字体系统 + 组件细节层（2026-09-07） ═══════════════════ */

/* ── Inter 字体（4 字重 × 4 子集，本地 woff2，CSP 安全） ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC;
}

/* ── 字体系统令牌（大厂排版：Inter 数字/拉丁 + 系统中文） ── */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;

  /* 文字色四级（更鲜明的层级） */
  --text-primary: #FAF8F2;
  --text-secondary: #B7B1A4;
  --text-tertiary: #8B8477;
  --text-quaternary: #5C574D;

  /* 字号阶梯 */
  --fs-hero: 48px;
  --fs-h1: 30px;
  --fs-h2: 20px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;
}

/* ── 排版重设 ── */
body { font-size: var(--fs-body); line-height: 1.6; letter-spacing: 0.01em; }
.page-header h1, .page-title h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page-subtitle { font-size: var(--fs-sm); letter-spacing: 0.01em; }
main h3, .card-title h3, .chart-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.005em; }

/* 数字统一 Inter + tabular */
.stat-value, .kpi-value, .stat-trend, .kpi-trend, .amount-cell,
.data-table td, .page-info, .ticker-item .value, .rate-num,
.bar-value, .m-val, .kpi-delta {
  font-family: 'Inter', var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-value { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
.kpi-card.hero .kpi-value, .kpi-card.hero-card .kpi-value { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.035em; }
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-tertiary); }
.data-table thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-tertiary); }
.data-table tbody td { font-size: 13.5px; color: var(--text-secondary); }
.data-table tbody td:first-child, .data-table tbody td:nth-child(2) { color: var(--text-primary); }
.status-badge, .badge { font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; }
.btn, button { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; }
.btn-primary { font-weight: 600; }
.breadcrumb { font-size: 12.5px; }
.filter-label { font-size: var(--fs-xs); font-weight: 600; }
.page-info { font-size: var(--fs-xs); }
/* SKU/货号保持 mono */
.product-sku, .mono, .ops-cell, .num { font-family: var(--font-mono); }

/* ── 背景层级重设（拉大层级差） ── */
:root {
  --bg-deep: #0B0A07;
  --bg-surface: #131009;
  --bg-raised: #1B1710;
  --bg-overlay: #241F16;
}
body { background: var(--bg-deep); }
.top-nav { background: rgba(11,10,7,0.72); }
.sidebar {
  background:
    radial-gradient(100% 36% at 50% -4%, rgba(252,211,77,0.028), transparent 60%),
    linear-gradient(180deg, #100E0A 0%, #0D0C09 100%);
}
.stat-card, .kpi-card, .filter-card, .table-card, .chart-card, .card-grad {
  background:
    radial-gradient(130% 85% at 50% -12%, rgba(245,242,236,0.05), transparent 55%),
    linear-gradient(180deg, #171410 0%, #131009 60%, #100E0A 100%);
}

/* ── 侧边栏折叠动效（max-height 展开 + 错峰 + 位移） ── */
.sidebar-group .sidebar-item {
  max-height: 0; opacity: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0;
  overflow: hidden;
  transform: translateX(-6px);
  transition: max-height 0.3s var(--ease-out), opacity 0.22s ease,
              padding 0.3s var(--ease-out), margin 0.3s var(--ease-out),
              transform 0.3s var(--ease-out), background 0.2s, color 0.2s;
  visibility: hidden;
}
.sidebar-group.open .sidebar-item {
  max-height: 46px; opacity: 1;
  padding: 8px 10px; margin: 1px 0;
  transform: translateX(0);
  visibility: visible;
}
.sidebar-group.open .sidebar-item:nth-child(2) { transition-delay: 0.01s; }
.sidebar-group.open .sidebar-item:nth-child(3) { transition-delay: 0.03s; }
.sidebar-group.open .sidebar-item:nth-child(4) { transition-delay: 0.05s; }
.sidebar-group.open .sidebar-item:nth-child(5) { transition-delay: 0.07s; }
.sidebar-group.open .sidebar-item:nth-child(6) { transition-delay: 0.09s; }
.sidebar-group.open .sidebar-item:nth-child(7) { transition-delay: 0.11s; }
.sidebar-group.open .sidebar-item:nth-child(8) { transition-delay: 0.13s; }
.sidebar-group.open .sidebar-item:nth-child(9) { transition-delay: 0.15s; }
.sidebar-group.open .sidebar-item:nth-child(10) { transition-delay: 0.17s; }
.sidebar-group:not(.open) .sidebar-item { transition-delay: 0s; }

/* ── 下拉菜单动效（spring + 右上原点） ── */
.dropdown-menu {
  transform-origin: top right;
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-4);
}
.dropdown.open .dropdown-menu, .dropdown-menu.show {
  display: block;
  animation: dropdownPop 0.22s var(--ease-spring);
}
@keyframes dropdownPop {
  from { opacity: 0; transform: translateY(-8px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-menu a, .dropdown-menu button {
  padding: 8px 12px; border-radius: 8px; font-size: var(--fs-sm);
  transition: background 0.15s, color 0.15s, padding-left 0.2s var(--ease-out);
}
.dropdown-menu a:hover, .dropdown-menu button:hover {
  background: rgba(245,158,11,0.1); color: var(--amber-300);
  padding-left: 15px;
}

/* ── 按钮细节完善 ── */
.nav-icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  transition: all 0.2s var(--ease-out);
}
.nav-icon-btn:hover { transform: translateY(-1px); background: rgba(245,242,236,0.07); border-color: var(--border-default); }
.nav-icon-btn:active { transform: translateY(0) scale(0.94); }
.btn-sm { padding: 6px 13px; font-size: var(--fs-xs); border-radius: 9px; }
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 12px; }
.btn-secondary { border-radius: 10px; }
.btn-ghost { border-radius: 10px; }
.btn-danger, .btn-success { border-radius: 10px; }
button.store-btn, button.date-btn, button.status-filter, button.filter-btn,
button.seg, button.tab, button.tag-btn, .tb-select {
  border-radius: 9px; font-size: var(--fs-xs); font-weight: 500;
}
.capsule-btn { font-size: var(--fs-xs); }

/* ── 卡片细节完善 ── */
.stat-icon { width: 38px; height: 38px; border-radius: 11px; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-header { margin-bottom: 12px; }
.chart-card { padding: 26px; }
.chart-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.table-card::before, .filter-card::before { height: 1px; }
.kpi-card { padding: 24px 26px; }
.kpi-label { font-size: var(--fs-xs); }
.kpi-hint { font-size: 11.5px; }

/* ── 输入框细节 ── */
input, select, textarea { font-size: var(--fs-sm); letter-spacing: 0.01em; }
.search-box input { font-size: var(--fs-sm); }
::placeholder { color: var(--text-quaternary); }

/* ── 顶栏细节 ── */
.logo-text { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; }
.ticker-item { font-size: var(--fs-xs); }
.ticker-label { font-size: 11px; letter-spacing: 0.06em; }
.nav-user-name { font-size: var(--fs-xs); font-weight: 600; }
.nav-user-role { font-size: 11px; }

/* ── 面包屑 / 页脚 ── */
.breadcrumb { color: var(--text-quaternary); }
.breadcrumb span { color: var(--text-tertiary); }
.back-btn { font-size: var(--fs-xs); font-weight: 500; }

/* ── 弹窗细节 ── */
.modal-box h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.modal-box { font-size: var(--fs-body); }
.modal-actions .btn { border-radius: 10px; }

/* ── 分页细节 ── */
.pagination .page-btn, .pagination button { font-size: var(--fs-xs); font-weight: 600; }

/* ── 空状态细节 ── */
.empty-title { font-size: 15px; font-weight: 600; }
.empty-desc { font-size: var(--fs-sm); }

/* ── banner/tooltip/toast 细节 ── */
.banner { font-size: var(--fs-sm); }
.tooltip { font-size: var(--fs-xs); }
.toast { font-size: var(--fs-sm); font-weight: 500; }

/* ── tabs 细节 ── */
.tab { font-size: var(--fs-sm); font-weight: 500; }
.tab.active { font-weight: 600; }


/* ═══════════════════ v5.3 表单控件精修（店铺选择 / 日期 / 下拉 / 复选） ═══════════════════ */

/* ── 日期选择器：日历图标琥珀金化（暗色下默认黑色图标不可见） ── */
input[type="date"] { min-height: 40px; font-variant-numeric: tabular-nums; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(71%) sepia(49%) saturate(560%) hue-rotate(2deg) brightness(1.06);
  cursor: pointer; opacity: .85;
  transition: opacity .2s, transform .25s var(--ease-out);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; transform: scale(1.18) rotate(3deg); }
input[type="date"]:invalid { color: var(--text-quaternary); }
input[type="date"]:invalid::-webkit-datetime-edit { color: var(--text-quaternary); }

/* ── 下拉框：暖金 hover、金色箭头、深色选项列表 ── */
select { min-height: 40px; cursor: pointer; }
select:hover {
  border-color: rgba(245,158,11,.45);
  background-color: rgba(245,242,236,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(245,242,236,.05);
}
select option { background: #1B1710; color: #FAF8F2; padding: 8px 10px; }
select option:checked { background: rgba(245,158,11,.16); color: #FBBF24; }

/* ── 复选框 / 单选框：琥珀色 ── */
input[type="checkbox"], input[type="radio"] { accent-color: #F59E0B; width: 15px; height: 15px; cursor: pointer; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* ── 筛选行统一规格（压过各页内联旧样式：双类特异性 0,2,1 > 0,1,1） ── */
.filter-card .filter-item input,
.filter-card .filter-item select,
.filter-row .filter-item input,
.filter-row .filter-item select,
.filter-bar .filter-item input,
.filter-bar .filter-item select {
  min-height: 40px; padding: 8px 13px;
  background-color: rgba(245,242,236,.035);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13.5px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.filter-card .filter-item input:hover,
.filter-card .filter-item select:hover,
.filter-row .filter-item input:hover,
.filter-row .filter-item select:hover {
  border-color: rgba(245,158,11,.4);
  background-color: rgba(245,242,236,.055);
}
.filter-card .filter-item input:focus,
.filter-card .filter-item select:focus,
.filter-row .filter-item input:focus,
.filter-row .filter-item select:focus {
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,.13), 0 2px 12px rgba(0,0,0,.3);
  background-color: rgba(245,242,236,.05);
}

/* ── 兜底：任何 filter-item 内控件焦点统一金色（覆盖页面内联冷色焦点） ── */
.filter-item input:focus, .filter-item select:focus,
.filter-item input:focus-visible, .filter-item select:focus-visible {
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.13), 0 2px 12px rgba(0,0,0,.3) !important;
}

/* v5.3b：表单弹窗类（form-item）焦点统一金色 */
.form-item input:focus, .form-item select:focus, .form-item textarea:focus {
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.13), 0 2px 12px rgba(0,0,0,.3) !important;
}

/* v5.3c：确保 select 自定义箭头不被 background 简写重置 */
select, .filter-item select, .form-item select, .filter-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E8C37A' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
}
select, .filter-item select, .form-item select, .filter-card select,
.filter-row select, .filter-bar select { padding-right: 32px !important; }

/* ═══════════════════ v5.4 侧边栏文字图标比例 + 分级动效（2026-09-07） ═══════════════════ */

/* ── 图标与文字比例：容器收窄更精致、图标放大、文字更清晰 ── */
.sidebar-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
}
.sidebar-icon .lucide, .sidebar-icon svg {
  width: 15px; height: 15px;
}
.sidebar-label { gap: 10px; padding: 9px 11px; }
/* 一级分组标题：字号大于二级菜单项，层级正确 */
.sidebar-label .gl {
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.group-caret { width: 12px; height: 12px; }

.sidebar-item {
  font-size: 13.5px;
  gap: 11px;
  letter-spacing: 0.01em;
}

/* ── 分级动效：时长/曲线统一、错峰更利落、展开收起对称 ── */
.sidebar-group .sidebar-item {
  transition: max-height 0.32s var(--ease-out), opacity 0.2s ease,
              padding 0.32s var(--ease-out), margin 0.32s var(--ease-out),
              transform 0.32s var(--ease-out), background 0.2s, color 0.2s;
}
.sidebar-group.open .sidebar-item {
  max-height: 48px;
  padding: 8px 11px;
}
.sidebar-group.open .sidebar-item:nth-child(2)  { transition-delay: 0s; }
.sidebar-group.open .sidebar-item:nth-child(3)  { transition-delay: 0.02s; }
.sidebar-group.open .sidebar-item:nth-child(4)  { transition-delay: 0.04s; }
.sidebar-group.open .sidebar-item:nth-child(5)  { transition-delay: 0.06s; }
.sidebar-group.open .sidebar-item:nth-child(6)  { transition-delay: 0.08s; }
.sidebar-group.open .sidebar-item:nth-child(7)  { transition-delay: 0.1s; }
.sidebar-group.open .sidebar-item:nth-child(8)  { transition-delay: 0.12s; }
.sidebar-group.open .sidebar-item:nth-child(9)  { transition-delay: 0.14s; }
.sidebar-group.open .sidebar-item:nth-child(10) { transition-delay: 0.16s; }
.sidebar-group.open .sidebar-item:nth-child(11) { transition-delay: 0.18s; }
.sidebar-group.open .sidebar-item:nth-child(12) { transition-delay: 0.2s; }
.sidebar-group:not(.open) .sidebar-item { transition-delay: 0s; }

/* ── 分组头交互：hover 图标轻抬、标题与 caret 提亮 ── */
.sidebar-label .sidebar-icon,
.sidebar-item .sidebar-icon {
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.sidebar-label .group-caret {
  transition: transform 0.25s var(--ease-out), color 0.2s ease;
}
.sidebar-label:hover .gl { color: var(--text-primary); }
.sidebar-label:hover .group-caret { color: var(--text-primary); }
.sidebar-label:hover .sidebar-icon { transform: translateY(-1px); }

/* ── 菜单项图标呼应：hover 上浮微放大、active 品牌色辉光 ── */
.sidebar-item:hover .sidebar-icon { transform: translateY(-1px) scale(1.06); }
.sidebar-item.active .sidebar-icon {
  box-shadow: 0 0 10px var(--item-glow, rgba(245,158,11,0.3)),
              inset 0 1px 0 rgba(255,255,255,0.12);
}
.sidebar-item.active .sidebar-icon svg {
  filter: drop-shadow(0 0 4px var(--item-glow, rgba(245,158,11,0.45)));
}

/* ── 动效降级 ── */
@media (prefers-reduced-motion: reduce) {
  .sidebar-group .sidebar-item,
  .sidebar-label .group-caret,
  .sidebar-label .sidebar-icon,
  .sidebar-item .sidebar-icon {
    transition: none !important;
  }
}


/* ═══════════════════ v7.1 浅色主题（独立设计语言 · 21st.dev shadcn 风） ═══════════════════ */
/* 原则：中性浅灰底 + 纯白卡片 + 细边框 + 扁平阴影；金色收敛为「强调色」；
   不用径向光/辉光/金描边（那是暗色语言）；图表浅色专属 */

html.light {
  /* ── 中性背景四层 ── */
  --bg-deep: #F7F7F5;
  --bg-surface: #F0F0ED;
  --bg-raised: #FFFFFF;
  --bg-overlay: #FFFFFF;
  --glass-bg: rgba(24,24,27,0.03);
  --glass-bg-hover: rgba(24,24,27,0.06);
  --glass-border: rgba(24,24,27,0.08);
  --glass-border-hover: rgba(24,24,27,0.16);

  /* ── 文字 zinc 系 ── */
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-tertiary: #71717A;
  --text-quaternary: #A1A1AA;

  /* ── 强调：金色收敛（文字金用 600/700，按钮渐变保留亮金） ── */
  --amber-300: #D97706;
  --amber-400: #D97706;
  --amber-500: #F59E0B;
  --amber-600: #B45309;
  --amber-700: #92400E;
  --gold: #A16207;
  --cream: #3F3F46;
  --bronze: #8A5A20;
  --cyan-400: #D97706;
  --cyan-500: #B45309;
  --cyan-600: #92400E;

  /* ── 辅助色（浅底提饱和） ── */
  --green-400: #22C55E;
  --green-500: #16A34A;
  --green-600: #15803D;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6;
  --orange-400: #F59E0B;
  --pink-400: #EC4899;
  --red-400: #F87171;
  --red-500: #EF4444;

  /* ── 渐变：按钮保持亮金，文字渐变改深金 ── */
  --gradient-brand: linear-gradient(135deg, #FBBF24 0%, #F59E0B 45%, #D97706 100%);
  --gradient-primary-btn: linear-gradient(135deg, #FBBF24, #D97706);
  --gradient-text: linear-gradient(135deg, #78350F 0%, #B45309 55%, #D97706 100%);
  --gradient-hairline: linear-gradient(90deg, transparent, rgba(24,24,27,0.12), transparent);
  --gradient-hairline-gold: linear-gradient(90deg, transparent, rgba(180,83,9,0.35), transparent);
  --gradient-card-top: linear-gradient(180deg, rgba(24,24,27,0.02), transparent 46%, transparent);
  --gradient-hero-card: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.03), transparent);
  --gradient-skeleton: linear-gradient(90deg, transparent, rgba(24,24,27,0.07), transparent);

  /* ── 边框 / 阴影：扁平 ── */
  --border-hairline: rgba(24,24,27,0.07);
  --border-default: rgba(24,24,27,0.12);
  --border-strong: rgba(24,24,27,0.2);
  --shadow-1: 0 1px 2px rgba(24,24,27,0.04);
  --shadow-2: 0 1px 3px rgba(24,24,27,0.05), 0 4px 12px rgba(24,24,27,0.04);
  --shadow-3: 0 4px 12px rgba(24,24,27,0.06), 0 12px 32px rgba(24,24,27,0.08);

  background: var(--bg-deep);
  color: var(--text-primary);
}

/* ═══ 基础 ═══ */
html.light body { background: var(--bg-deep); color: var(--text-primary); }

/* ═══ 顶栏 / 侧边栏：纯白 + 细边框，无渐变无辉光 ═══ */
html.light .top-nav { background: rgba(255,255,255,0.9); }
html.light .sidebar { background: #FFFFFF; border-right-color: var(--border-hairline); }
html.light .sidebar-label:hover { background: var(--glass-bg); }
html.light .sidebar-label .gl { color: var(--text-tertiary); }
html.light .sidebar-item { color: var(--text-secondary); }
html.light .sidebar-item:hover { background: var(--glass-bg); color: var(--text-primary); }
html.light .sidebar-item.active {
  background: rgba(245,158,11,0.1);
  color: #92400E;
  box-shadow: inset 2px 0 0 #F59E0B;
}
html.light .sidebar-item.active .sidebar-icon svg { stroke: #B45309; }
html.light .sidebar-item.active::before { display: none; }
html.light .group-caret { color: var(--text-quaternary); }
html.light .sidebar-item.locked { opacity: 0.55; }
html.light .nav-ticker { color: var(--text-secondary); }
html.light .nav-user-name { color: var(--text-primary); }
html.light .nav-user-role { color: var(--text-tertiary); }
html.light .nav-icon-btn { color: var(--text-secondary); }
html.light .nav-icon-btn:hover { background: var(--glass-bg); color: var(--text-primary); }

/* ═══ 卡片：纯白 + 细边框 + 扁平阴影（去掉径向光） ═══ */
html.light .stat-card, html.light .kpi-card, html.light .filter-card,
html.light .table-card, html.light .chart-card, html.light .card-grad {
  background: #FFFFFF;
  border-color: var(--border-hairline);
  box-shadow: var(--shadow-2);
}
html.light .stat-card:hover, html.light .table-card:hover, html.light .chart-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-3);
}
html.light .stat-label { color: var(--text-tertiary); }
html.light .stat-value { color: var(--text-primary); }
html.light .stat-icon { background: rgba(245,158,11,0.1); }
html.light .stat-icon svg, html.light .stat-icon .lucide { stroke: #B45309; }

/* ═══ 看板 db-* ═══ */
html.light .db-card {
  background: #FFFFFF;
  border-color: var(--border-hairline);
  box-shadow: var(--shadow-2);
}
html.light .db-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-3); }
/* hero 主卡：白底 + 金色细边 + 左上淡金高光（克制版） */
html.light .db-hero {
  border: 1px solid rgba(245,158,11,0.35);
  background: linear-gradient(180deg, #FFFCF5 0%, #FFFFFF 70%);
  box-shadow: var(--shadow-2);
}
html.light .db-hero .db-kpi-value {
  background: linear-gradient(135deg,#78350F 0%,#B45309 45%,#D97706 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: none;
}
html.light .db-kpi-value { color: #18181B; }
html.light .db-kpi-label { color: var(--text-tertiary); }
html.light .db-kpi-ico { background: rgba(245,158,11,0.12); }
html.light .db-kpi-ico svg, html.light .db-kpi-ico .lucide { stroke: #B45309; }
html.light .db-kpi-foot-t { color: var(--text-quaternary); }
html.light .db-kpi-foot-v { color: var(--text-secondary); }
html.light .db-card-title { color: var(--text-primary); }
html.light .db-card-title svg, html.light .db-card-title .lucide { color: #B45309; }
html.light .db-sub-note { color: var(--text-quaternary); }
html.light .db-empty { color: var(--text-quaternary); }
html.light .db-legend .lg { color: var(--text-tertiary); }
/* 涨跌徽标浅底版 */
html.light .delta-badge.up { color:#15803D; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); }
html.light .delta-badge.down { color:#DC2626; background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.25); }
html.light .delta-badge.flat { color:var(--text-quaternary); background:var(--glass-bg); border-color:var(--border-hairline); }
/* 排行 / 进度 */
html.light .rank-no { background: rgba(24,24,27,0.05); color: var(--text-tertiary); }
html.light .rank-item:first-child .rank-no { color:#78350F; background:rgba(245,158,11,0.2); }
html.light .rank-track { background: rgba(24,24,27,0.07); }
html.light .rank-fill { background: linear-gradient(90deg,#D97706,#F59E0B 70%,#FBBF24); }
html.light .rank-val { color:#B45309; }
html.light .rank-line b { color: var(--text-primary); }
html.light .rank-orders { color: var(--text-quaternary); }
/* 热销 / 概览 */
html.light .sku-name { color: var(--text-secondary); }
html.light .sku-name .sku-badge { background: rgba(245,158,11,0.14); color:#B45309; }
html.light .sku-val { color:#B45309; }
html.light .sku-orders { color: var(--text-quaternary); }
html.light .db-month-row { color: var(--text-secondary); border-bottom-color: rgba(24,24,27,0.06); }
html.light .db-month-row b { color: var(--text-primary); }
html.light .db-month-row.gold b { color:#B45309; }
html.light .db-margin-track { background: rgba(24,24,27,0.07); }
html.light #marginFill { background: linear-gradient(90deg,#D97706,#F59E0B 60%,#FBBF24); }
html.light .db-month-note { color: var(--text-quaternary); }
/* 预警 */
html.light .alert-item { background: #FBFBFA; border-color: var(--border-hairline); }
html.light .alert-title { color: var(--text-primary); }
html.light .alert-detail { color: var(--text-tertiary); }
/* spark 柱 */
html.light .db-spark span { background: linear-gradient(180deg,#F59E0B,#B45309); }

/* ═══ 表格 / 输入 / 弹窗 ═══ */
html.light .data-table th {
  background: #FAFAF9; color: var(--text-tertiary);
  border-bottom-color: var(--border-default);
}
html.light .data-table td { border-bottom-color: rgba(24,24,27,0.05); }
html.light .data-table tbody tr:hover { background: rgba(245,158,11,0.04); }
html.light .table tbody tr:hover { background: rgba(245,158,11,0.04); }
html.light .table th { color: var(--text-tertiary); border-bottom-color: var(--border-default); }
html.light .table td { border-bottom-color: rgba(24,24,27,0.05); }
html.light .pagination .page-btn { background: #FFFFFF; border-color: var(--border-default); color: var(--text-secondary); }
html.light .pagination .page-btn.active { background: rgba(245,158,11,0.12); color: #92400E; border-color: rgba(245,158,11,0.3); }
html.light .filter-card input, html.light .filter-card select,
html.light .filter-row input, html.light .filter-row select,
html.light .filter-bar input, html.light .filter-bar select {
  background-color: #FFFFFF;
  border-color: var(--border-default);
  color: var(--text-primary);
}
html.light .filter-card input:focus, html.light .filter-card select:focus,
html.light .filter-row input:focus, html.light .filter-bar select:focus {
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}
html.light input[type="text"], html.light input[type="search"],
html.light input[type="number"], html.light input[type="password"],
html.light input:not([type]) {
  background-color: #FFFFFF;
  border-color: var(--border-default);
  color: var(--text-primary);
}
html.light select { background-color: #FFFFFF; color: var(--text-primary); }
html.light select:hover { border-color: rgba(245,158,11,0.45); background-color: #FFFFFF; }
html.light select option { background: #FFFFFF; color: #18181B; }
html.light select option:checked { background: rgba(245,158,11,0.14); color: #92400E; }
html.light .modal-box {
  background: #FFFFFF;
  border-color: var(--border-default);
  box-shadow: var(--shadow-3);
}
html.light .dropdown-menu {
  background: #FFFFFF;
  border-color: var(--border-default);
  box-shadow: var(--shadow-3);
}
html.light .toast { background: #FFFFFF; color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-3); }
html.light .badge-gray { background: var(--glass-bg); color: var(--text-secondary); border-color: var(--border-hairline); }
html.light .empty-cell { color: var(--text-quaternary); }

/* ═══ 图表：浅色专属（CSS 覆盖 SVG 内联属性） ═══ */
html.light .svg-chart text { fill:#71717A !important; }
html.light .svg-chart line { stroke:rgba(24,24,27,0.07) !important; }
html.light .svg-chart .c-hoverline { stroke:rgba(24,24,27,0.22) !important; }
html.light .svg-chart circle { stroke:rgba(24,24,27,0.12) !important; }
html.light .svg-legend { color: var(--text-secondary); }

/* ═══ 背景特效：浅色下不适用（暗色炫技元素） ═══ */
html.light .bg-grid, html.light .bg-particles { display: none; }
html.light .mouse-glow::before { display: none; }
html.light .bg-aurora { opacity: 0.18; }

/* ═══ 老组件金渐变文字 → 深金（暗色遗留） ═══ */
html.light .plan-price,
html.light .hero-kpi .stat-value,
html.light .gradient-text,
html.light .page-header h1 {
  background: linear-gradient(135deg,#78350F 0%,#B45309 55%,#D97706 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: none;
}
html.light .hero-kpi {
  background: #FFFCF5 !important;
  border: 1px solid rgba(245,158,11,0.35) !important;
  box-shadow: var(--shadow-2) !important;
}
html.light .hero-kpi::before { display: none; }
html.light .glow-num { text-shadow: none; }

/* ═══ 套餐页（billing）浅色专属 ═══ */
html.light .sub-banner { background: #FFFFFF; border-color: var(--border-hairline); box-shadow: var(--shadow-2); }
html.light .sub-banner::before { background: linear-gradient(180deg,#F59E0B,#D97706); box-shadow: none; }
html.light .plan-card {
  background: #FFFFFF;
  border-color: var(--border-hairline);
  box-shadow: var(--shadow-2);
}
html.light .plan-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-3); }
html.light .plan-featured {
  border: 1px solid rgba(245,158,11,0.45);
  background: linear-gradient(180deg, #FFFCF5 0%, #FFFFFF 80%);
  box-shadow: var(--shadow-2);
}
html.light .plan-featured:hover { box-shadow: var(--shadow-3); }
html.light .plan-name { color: var(--text-primary); }
html.light .plan-stores { background: var(--glass-bg); border-color: var(--border-hairline); color: var(--text-secondary); }
html.light .plan-divider { background: linear-gradient(90deg, transparent, rgba(24,24,27,0.1) 20%, rgba(24,24,27,0.1) 80%, transparent); }
html.light .plan-feats li { color: var(--text-secondary); }
html.light .plan-feats li .feat-ico { background: rgba(245,158,11,0.12); }
html.light .plan-feats li .feat-ico svg { stroke: #B45309; }
html.light .plan-feats li.off .feat-ico { background: rgba(24,24,27,0.06); }
html.light .activate-card { background: #FFFFFF; }
html.light #licenseInput { background: #FFFFFF; border-color: var(--border-default); color: var(--text-primary); }
html.light #licenseInput:focus { border-color: rgba(245,158,11,0.5); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }

/* ═══ 登录 / 注册页 ═══ */
html.light .login-card, html.light .register-card {
  background: #FFFFFF;
  border: 1px solid var(--border-default);
  box-shadow: 0 24px 70px rgba(24,24,27,0.14);
}
html.light .brand-side {
  background: #FFFFFF;
  border-right-color: var(--border-hairline);
}
html.light .brand-name { background: linear-gradient(90deg, #18181B, #52525B); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
html.light .brand-title { background: linear-gradient(135deg, #78350F, #B45309, #D97706); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
html.light .brand-sub { color: var(--text-tertiary); }
html.light .feat .ficon { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.16); color: #B45309; }
html.light .feat .ft { color: var(--text-primary); }
html.light .feat .fd { color: var(--text-tertiary); }
html.light .field input {
  background: #FFFFFF;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
html.light .field input:focus { border-color: rgba(245,158,11,0.55); box-shadow: 0 0 0 4px rgba(245,158,11,0.1); }
html.light .form-head h2 { color: var(--text-primary); }
html.light .form-head p { color: var(--text-tertiary); }
html.light .login-btn { box-shadow: 0 6px 18px rgba(217,119,6,0.28); }
html.light .bg-grid { display: none; }
html.light .bg-aurora { opacity: 0.12; }
html.light .form-foot a { color: #B45309; }


/* ═══════════════════ v8 比例与布局精修（2026-09-07） ═══════════════════ */
/* 问题根因不是配色，而是比例：侧边栏偏窄、内容区拥挤、数字不突出、表格行密 */

/* ── 侧边栏：220→240px，行高舒展 ── */
.sidebar { width: 240px; padding: 16px 12px 20px; }
.main-content { margin-left: 240px; }
.sidebar-group { margin-bottom: 8px; }
.sidebar-label { padding: 10px 12px; }
.sidebar-item { padding: 9px 12px; }

/* ── 内容容器：更大呼吸空间 ── */
.main-content .container { max-width: 1640px; padding: 30px 36px 48px; }
.footer { max-width: 1640px; }

/* ── 页面标题节奏 ── */
.page-header { margin-bottom: 26px; }
.page-header h1, .page-title h1 { font-size: 27px; line-height: 1.25; }
.page-sub { margin-top: 7px; font-size: 13px; line-height: 1.6; }

/* ── 卡片统一：圆角 16、标题内距舒展 ── */
.table-card, .chart-card, .filter-card, .stat-card, .kpi-card, .card-grad {
  border-radius: 16px;
}
.card-title { padding: 18px 22px 0; }

/* ── 表格：行高舒展（13/18 节奏） ── */
.data-table th, .table th { padding: 13px 18px; }
.data-table td, .table td { padding: 13px 18px; }

/* ── 按钮：统一高度 38px ── */
.btn { min-height: 38px; padding: 8px 18px; border-radius: 10px; font-size: 13.5px; }
.btn-sm, .capsule-btn { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }

/* ── 窄屏回退 ── */
@media (max-width: 1000px) {
  .sidebar { width: 220px; }
  .main-content { margin-left: 220px; }
  .main-content .container { padding: 24px 20px 40px; }
}


/* ═══════════════════ v9.1 工作台原子组件（2026-09-08 · 各页自行组合） ═══════════════════ */
/* 单行统计条 */
.o-stats { display:flex; align-items:stretch; margin-bottom:12px;
  background:var(--bg-raised); border:1px solid var(--border-hairline); border-radius:12px;
  box-shadow: var(--shadow-1); overflow:hidden; }
.o-stat { flex:1; display:flex; align-items:baseline; gap:8px; padding:12px 18px;
  border-right:1px solid var(--border-hairline); white-space:nowrap; min-width:0; }
.o-stat:last-child { border-right:none; }
.o-stat-v { font-size:22px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--text-primary); }
.o-stat-v.warn { color:var(--orange-400); }
.o-stat-v.info { color:var(--blue-400); }
.o-stat-v.good { color:var(--green-400); }
.o-stat-v.bad { color:var(--red-400); }
.o-stat-l { font-size:12px; color:var(--text-tertiary); white-space:nowrap; }
.o-stat-s { font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; margin-left:auto; white-space:nowrap; }

/* 横向占比带 */
.o-cats { margin-bottom:12px; background:var(--bg-raised); border:1px solid var(--border-hairline);
  border-radius:12px; padding:10px 14px; box-shadow: var(--shadow-1); }
.o-cats-empty { font-size:12px; color:var(--text-quaternary); }
.o-cat-track { display:flex; height:10px; border-radius:5px; overflow:hidden;
  background:rgba(120,113,108,.12); margin-bottom:8px; }
.o-cat-seg { height:100%; transition:width .6s var(--ease-out); }
.o-cat-seg:first-child { border-radius:5px 0 0 5px; }
.o-cat-seg:last-child { border-radius:0 5px 5px 0; }
.o-cat-legend { display:flex; flex-wrap:wrap; gap:6px 16px; }
.o-cat-lg { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.o-cat-lg i { width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.o-cat-lg b { color:var(--text-primary); font-weight:600; }

/* 单行工具栏 */
.o-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.o-filters { display:flex; align-items:center; gap:8px; flex:1; flex-wrap:wrap; justify-content:flex-end; }
.o-in { height:36px; padding:0 12px; border-radius:9px; font-size:13px;
  background:var(--bg-raised); border:1px solid var(--border-default); color:var(--text-primary); outline:none; }
.o-in:focus { border-color:rgba(245,158,11,.5); box-shadow:0 0 0 3px rgba(245,158,11,.12); }
.o-dash { color:var(--text-quaternary); font-size:13px; }
.o-search { display:flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border-radius:9px; background:var(--bg-raised); border:1px solid var(--border-default); min-width:220px; }
.o-search:focus-within { border-color:rgba(245,158,11,.5); box-shadow:0 0 0 3px rgba(245,158,11,.12); }
.o-search svg { width:14px; height:14px; color:var(--text-quaternary); flex-shrink:0; }
.o-search input { flex:1; border:none; background:none; outline:none; font-size:13px; color:var(--text-primary); }

/* 全宽表格卡（工作台主角） */
.o-table { padding: 0; overflow:hidden; }
.o-table .data-table { border:none; }
.o-table thead th { position:sticky; top:0; z-index:2; background:var(--bg-raised);
  font-size:12px; font-weight:600; letter-spacing:.02em; }
.o-table tbody td { font-size:13.5px; padding:14px 18px; }
.o-table tbody tr { transition:background .15s; }
.o-cell-product { display:flex; flex-direction:column; gap:3px; min-width:0; }
.o-cell-product .p-name { color:var(--text-primary); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-cell-product .p-sku { font-size:11.5px; color:var(--text-quaternary); font-family:var(--font-mono); }
.o-cell-store { display:flex; flex-direction:column; gap:3px; }
.o-cell-store .s-name { color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-cell-store .s-plat { font-size:11px; color:var(--text-quaternary); text-transform:uppercase; letter-spacing:.04em; }
.o-post { font-family:var(--font-mono); font-size:12.5px; color:var(--text-secondary); }
.o-time { font-size:12.5px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.o-money { font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.o-comm { color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.num { text-align:right; font-variant-numeric:tabular-nums; }

/* 统一分页 */
.o-page { display:flex; gap:8px; justify-content:center; padding:16px 0; }
.o-page .page-btn { padding:7px 13px; border-radius:var(--radius-sm); cursor:pointer;
  border:1px solid var(--border-default); background:var(--bg-raised); color:var(--text-secondary); }
.o-page .page-btn.active { background:var(--gradient-primary-btn); color:#fff; border:none; }
.o-page .page-btn:disabled { opacity:.4; cursor:not-allowed; }

/* 星级 */
.o-stars { color:var(--orange-400); letter-spacing:2px; font-size:13px; white-space:nowrap; }
.o-stars .off { color:var(--text-quaternary); }

@media (max-width:1100px) {
  .o-stat { padding:10px 12px; gap:5px; }
  .o-stat-s { display:none; }
  .o-toolbar { flex-direction:column; align-items:stretch; }
  .o-filters { justify-content:flex-start; }
}

/* ─── 顶栏三件套 + 今日要点头条（2026-09-08 从 V2 移植） ─── */
.ticker-item.ticker-link { color: #c7d4e5; text-decoration: none; transition: color 0.2s; }
.ticker-item.ticker-link:hover { color: var(--cyan-400); text-decoration: underline; }
.nb-search:hover { background: linear-gradient(135deg, rgba(34,211,238,0.22), rgba(59,130,246,0.14)); color: #22D3EE; box-shadow: 0 8px 22px rgba(34,211,238,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
.nb-notify:hover { background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(245,158,11,0.14)); color: #FBBF24; box-shadow: 0 8px 22px rgba(251,191,36,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
.nb-help:hover { background: linear-gradient(135deg, rgba(167,139,250,0.22), rgba(139,92,246,0.14)); color: #A78BFA; box-shadow: 0 8px 22px rgba(167,139,250,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
.nav-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: 348px; max-height: 460px; display: flex; flex-direction: column;
  background: rgba(13,18,32,0.96);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(245,158,11,0.16);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03), 0 0 40px rgba(245,158,11,0.07);
  overflow: hidden; z-index: 300;
  animation: dropdownIn 0.2s cubic-bezier(0.22,0.61,0.36,1);
}
.nav-dropdown::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.6), rgba(232,195,122,0.6), transparent);
}
.nd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--glass-border);
}
.nd-title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.nd-title-ic {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--c);
}
.nd-title-ic svg { width: 15px; height: 15px; }
.nd-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cyan-400); text-decoration: none; font-weight: 500; transition: gap 0.15s; }
.nd-more:hover { gap: 7px; }
.nd-body { overflow-y: auto; padding: 6px; flex: 1; }
.nd-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 14px 4px;
}
.nd-sum-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border-radius: 10px; text-decoration: none;
  background: rgba(255,255,255,0.03); border: 1px solid transparent;
  transition: all 0.15s;
}
.nd-sum-item:hover { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.nd-sum-num { font-size: 19px; font-weight: 800; font-family: var(--font-mono); line-height: 1.2; }
.nd-sum-label { font-size: 11px; color: var(--text-tertiary); }
.nd-empty { padding: 32px 0; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.notify-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px; border-radius: 12px; cursor: default;
  transition: background 0.15s, transform 0.15s;
}
.notify-item:hover { background: rgba(255,255,255,0.05); transform: translateX(2px); }
.ni-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 8px rgba(52,211,153,0.5); }
.ni-dot.fail { background: var(--red-400); box-shadow: 0 0 8px rgba(248,113,113,0.7); }
.ni-main { flex: 1; min-width: 0; }
.ni-title { font-size: 13px; color: var(--text-primary); line-height: 1.5; word-break: break-all; }
.ni-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.ni-status { font-size: 11px; font-weight: 700; color: var(--green-400); flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); }
.ni-status.fail { color: var(--red-400); background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px; }
.help-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; border-radius: 12px; text-decoration: none;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.18s;
}
.hl-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  color: var(--c);
}
.hl-ic svg { width: 15px; height: 15px; }
.help-link:hover {
  background: color-mix(in srgb, var(--c) 10%, rgba(255,255,255,0.02));
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
  color: var(--text-primary); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.nd-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--glass-border);
  font-size: 11px; color: var(--text-tertiary);
}
.nd-key { font-family: var(--font-mono); color: var(--text-quaternary); }
.nav-search-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(3,6,14,0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: overlayIn 0.16s ease;
}
.nav-search-panel {
  width: min(680px, 92vw); max-height: 72vh;
  display: flex; flex-direction: column; position: relative;
  background: rgba(13,18,32,0.97);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(34,211,238,0.22);
  border-radius: 20px;
  box-shadow: 0 32px 90px rgba(0,0,0,0.6), 0 0 70px rgba(34,211,238,0.1);
  overflow: hidden;
  animation: searchIn 0.2s cubic-bezier(0.22,0.61,0.36,1);
}
.nav-search-panel::before {
  content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.7), rgba(167,139,250,0.7), transparent);
}
.nsp-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 16px; border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.nsp-input-row::after {
  content: ''; position: absolute; bottom: -1px; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, rgba(34,211,238,0.7), rgba(59,130,246,0.7), rgba(167,139,250,0.7));
  opacity: 0; transition: opacity 0.2s;
}
.nsp-input-row:focus-within::after { opacity: 1; }
.nsp-input-row > svg { width: 20px; height: 20px; color: var(--cyan-400); flex-shrink: 0; }
.nsp-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 16px; color: var(--text-primary); font-family: inherit;
}
.nsp-input::placeholder { color: var(--text-quaternary); }
.nsp-close {
  width: 30px; height: 30px; border-radius: 8px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); color: var(--text-tertiary);
  border: 1px solid transparent; cursor: pointer; flex-shrink: 0;
  transition: all 0.15s;
}
.nsp-close:hover { color: var(--text-primary); border-color: var(--glass-border); background: rgba(255,255,255,0.09); }
.nsp-close svg { width: 15px; height: 15px; }
.nsp-results { overflow-y: auto; padding: 10px; }
.nsp-hint { padding: 30px 14px; color: var(--text-tertiary); font-size: 14px; text-align: center; }
.nsp-hint-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.nsp-hint-title svg { width: 16px; height: 16px; color: var(--purple-400); }
.nsp-hint-row { text-align: left; padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.nsp-hint-row:hover { background: rgba(255,255,255,0.03); }
.nsp-hint-row span { color: var(--cyan-400); font-weight: 600; margin-right: 6px; }
.nsg { margin-bottom: 6px; }
.nsg-title {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 6px; font-size: 12px; font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
}
.nsg-ic {
  width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.nsg-ic svg { width: 11px; height: 11px; }
.nsg-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; text-decoration: none;
  color: var(--text-primary); font-size: 14px;
  transition: background 0.12s, transform 0.12s;
}
.nsg-item:hover { background: color-mix(in srgb, var(--c, #22D3EE) 8%, transparent); transform: translateX(2px); }
.nsg-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  color: var(--c);
}
.nsg-icon svg { width: 15px; height: 15px; }
.nsg-item .mono { font-family: var(--font-mono); }
.nsg-url { margin-left: auto; font-size: 11px; color: var(--text-quaternary); flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   新手指引条（guide-banner）— 未完成引导时顶栏下方展示
   ═══════════════════════════════════════════════ */
.guide-banner {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin: 0 24px 14px; padding: 12px 16px;
  border-radius: var(--radius-lg, 14px);
  background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(59,130,246,0.06) 55%, rgba(167,139,250,0.08));
  border: 1px solid rgba(34,211,238,0.28);
  box-shadow: 0 6px 24px rgba(2,8,23,0.35);
}
.gb-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-primary-btn, linear-gradient(135deg,#22D3EE,#3B82F6));
  color: #fff; box-shadow: 0 4px 14px rgba(34,211,238,0.35);
}
.gb-icon svg { width: 19px; height: 19px; }
.gb-body { flex: 1; min-width: 0; }
.gb-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 6px;
}
.gb-progress {
  font-size: 12px; font-weight: 600; color: #22D3EE;
  background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.3);
  padding: 2px 9px; border-radius: 999px;
}
.gb-tasks { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-task {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary);
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
  border-radius: 999px; padding: 3px 10px;
}
.gb-task svg { width: 13px; height: 13px; }
.gb-task.done { color: var(--green-400, #34D399); border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.08); }
.gb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.gb-actions .btn-sm { padding: 6px 14px; font-size: 13px; }
.gb-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gb-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.gb-close svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .guide-banner { margin: 0 14px 12px; flex-wrap: wrap; }
  .gb-actions { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   v17 · Galaxy UI 细节层（2026-09-10）
   灵感：uiverse-io/galaxy（MIT 许可，3000+ 社区组件）
   落地 4 手法（改编为暖黑 + 琥珀金设计系统）：
   ① 流动金环描边按钮（gradient ring button 手法）
   ② 四角光球呼吸卡（glow balls 手法，紫 → 琥珀金）
   ③ 非对称角渐变描边卡（curvy card-border 手法）
   ④ 主按钮 hover 光斑涟漪（share button 手法）
   ===================================================================== */

/* ── ① 流动金环描边按钮 ── */
.btn-flow-ring {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 28px;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: #FDE68A; text-decoration: none; cursor: pointer;
  border-radius: 999px;
  border: double 2px transparent;
  background-image:
    linear-gradient(#1A150D, #1A150D),
    linear-gradient(135deg, #F59E0B 0%, #FDE68A 22%, #B45309 48%, #FBBF24 72%, #F59E0B 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation: flowRingMove 4s linear infinite;
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
}
.btn-flow-ring:hover {
  transform: translateY(-2px);
  color: #FFFBEB;
  box-shadow: 0 10px 30px rgba(245,158,11,.25), 0 0 20px rgba(245,158,11,.15);
  animation-duration: 2.2s;
}
.btn-flow-ring:active { transform: translateY(0) scale(.97); }
.btn-flow-ring svg { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes flowRingMove {
  0%   { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 300% 50%; }
}

/* ── ② 四角光球呼吸卡 ── */
.card-glow-orb { position: relative; overflow: hidden; }
.card-glow-orb::before, .card-glow-orb::after {
  content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
  filter: blur(52px); opacity: .5; pointer-events: none; z-index: 0;
}
.card-glow-orb::before {
  top: -70px; left: -55px;
  background: radial-gradient(circle, #F59E0B 0%, #B45309 55%, transparent 78%);
  animation: orbBreathe1 6s ease-in-out infinite;
}
.card-glow-orb::after {
  bottom: -80px; right: -55px;
  background: radial-gradient(circle, #FBBF24 0%, #92400E 55%, transparent 78%);
  animation: orbBreathe2 8s ease-in-out infinite;
}
.card-glow-orb > * { position: relative; z-index: 1; }
@keyframes orbBreathe1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .45; }
  50%      { transform: translate(20px, 16px) scale(1.18); opacity: .7; }
}
@keyframes orbBreathe2 {
  0%, 100% { transform: translate(0, 0) scale(1.06); opacity: .4; }
  50%      { transform: translate(-18px, -14px) scale(.9); opacity: .62; }
}

/* ── ③ 非对称角渐变描边卡 ── */
.card-aura {
  position: relative;
  border-radius: 6px 24px;
  padding: 1px;
  overflow: hidden;
  background-image:
    radial-gradient(rgba(17,15,10,.94), rgba(17,15,10,.98)),
    linear-gradient(140deg, rgba(245,158,11,.85) 0%, rgba(245,158,11,.10) 38%, rgba(251,191,36,.60) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 0 rgba(245,158,11,0);
  transition: box-shadow .45s ease, transform .45s ease;
}
.card-aura:hover {
  box-shadow: 0 8px 36px rgba(245,158,11,.16), 0 0 22px rgba(245,158,11,.10);
  transform: translateY(-2px);
}
.card-aura > * { border-radius: 5px 23px; }

/* ── ④ 主按钮 hover 光斑涟漪 ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: -60%; left: -60%; width: 220%; height: 220%;
  background: radial-gradient(circle, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 58%);
  transform: scale(0); transition: transform .55s ease-out;
  pointer-events: none; border-radius: inherit;
}
.btn-primary:hover::after { transform: scale(1); }

/* 明暗切换按钮金色太阳辉光（base.html 主题切换） */
.theme-toggle-btn { position: relative; transition: filter .3s ease; }
.theme-toggle-btn:hover { filter: drop-shadow(0 0 8px rgba(245,158,11,.7)); }

/* reduced-motion 全降级 */
@media (prefers-reduced-motion: reduce) {
  .btn-flow-ring, .card-glow-orb::before, .card-glow-orb::after { animation: none; }
  .btn-primary::after { transition: none; }
}

/* =====================================================================
   v18 · 侧边栏二级收纳 + 细节层（2026-09-10）
   ① 模块按子组折叠收纳（经营/核心组不再平铺 24+ 项）
   ② 子组标题金色圆点 + 数量徽标 + 折叠动效错峰
   ③ 内部工具（API 调试）不出现在租户导航
   ===================================================================== */

/* ── 子组容器 ── */
.sidebar-sub { position: relative; }
.sidebar-sub + .sidebar-sub { margin-top: 2px; }
.sidebar-sub-label {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 12px;
  border-radius: 8px;
  cursor: pointer; user-select: none;
  transition: background .2s var(--ease-out);
}
.sidebar-sub-label:hover { background: rgba(255,255,255,.035); }
.sidebar-sub-label .sub-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient-brand);
  box-shadow: 0 0 7px rgba(245,158,11,.55);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.sidebar-sub-label .st {
  flex: 1; font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-quaternary);
  transition: color .2s;
}
.sidebar-sub-label .sub-count {
  font-size: 9.5px; line-height: 1;
  color: var(--text-quaternary);
  background: var(--glass-bg);
  border: 1px solid var(--border-hairline);
  padding: 2px 6px; border-radius: 999px;
}
.sidebar-sub-label .sub-caret {
  width: 11px; height: 11px; color: var(--text-quaternary);
  transition: transform .25s var(--ease-out);
}
.sidebar-sub.open > .sidebar-sub-label .sub-caret { transform: rotate(180deg); }
.sidebar-sub.open > .sidebar-sub-label .st { color: var(--text-tertiary); }
.sidebar-sub.open > .sidebar-sub-label .sub-dot { box-shadow: 0 0 10px rgba(245,158,11,.8); }

/* ── 子组内条目：组开 + 子组开 才展开（覆盖旧平铺规则） ── */
.sidebar-group .sidebar-sub .sidebar-item {
  max-height: 0; opacity: 0;
  padding-top: 0; padding-bottom: 0; padding-left: 10px;
  margin: 0; overflow: hidden;
  transform: translateX(-6px); visibility: hidden;
  transition: max-height .28s var(--ease-out), opacity .2s ease,
              padding .28s var(--ease-out), margin .28s var(--ease-out),
              transform .28s var(--ease-out), background .2s, color .2s;
}
.sidebar-group.open .sidebar-sub.open .sidebar-item {
  max-height: 44px; opacity: 1;
  padding: 7px 10px 7px 16px; margin: 1px 0;
  transform: translateX(0); visibility: visible;
}
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(1) { transition-delay: .01s; }
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(2) { transition-delay: .03s; }
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(3) { transition-delay: .05s; }
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(4) { transition-delay: .07s; }
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(5) { transition-delay: .09s; }
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(6) { transition-delay: .11s; }
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(7) { transition-delay: .13s; }
.sidebar-group.open .sidebar-sub.open .sidebar-item:nth-child(8) { transition-delay: .15s; }
.sidebar-group .sidebar-sub:not(.open) .sidebar-item,
.sidebar-group:not(.open) .sidebar-sub .sidebar-item { transition-delay: 0s; }

/* 子组条目左移进金条视觉层级 */
.sidebar-group.open .sidebar-sub.open .sidebar-item .sidebar-icon {
  width: 24px; height: 24px; border-radius: 7px;
}

/* ── 顶栏搜索高亮命中项 ── */
.nsp-results .nsp-hit:hover { background: rgba(245,158,11,.08); }

/* reduced-motion 降级 */
@media (prefers-reduced-motion: reduce) {
  .sidebar-group .sidebar-sub .sidebar-item,
  .sidebar-group.open .sidebar-sub.open .sidebar-item { transition: none; }
}

/* =====================================================================
   v19 · 图标体系精修层（2026-09-10）
   ① 页头 h1 图标：容器化（渐变底 + 金描边 + 顶部高光 + 辉光）
   ② 全局图标线条：圆头端点、细线 1.8（精致感）
   ③ 图标 hover 微呼吸（金色辉光随动）
   ===================================================================== */

/* ── 页头 h1 图标容器化（全站 57 模板通用） ── */
.page-header h1 .lucide, .page-title h1 .lucide,
.page-header h1 svg.lucide, .page-title h1 svg.lucide {
  width: 36px; height: 36px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 10px;
  vertical-align: -8px;
  margin-right: 10px;
  flex-shrink: 0;
  background:
    linear-gradient(135deg, rgba(245,158,11,.22), rgba(217,119,6,.05)) padding-box,
    linear-gradient(150deg, rgba(245,158,11,.55), rgba(245,158,11,.12)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 16px rgba(245,158,11,.15);
  stroke: #FCD34D;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px rgba(245,158,11,.35));
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.page-header h1:hover .lucide {
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 22px rgba(245,158,11,.22);
}

/* ── 全局图标线条：圆头端点（Lucide 默认属性保底，细线更精致） ── */
.lucide {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 侧边栏图标：hover 微抬 + 辉光随动 ── */
.sidebar-item:hover .sidebar-icon {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,158,11,.12);
}
.sidebar-icon { transition: transform .25s var(--ease-out), box-shadow .25s; }
.sidebar-item.active .sidebar-icon {
  box-shadow: 0 0 12px rgba(245,158,11,.25);
}

/* ── 顶栏图标按钮：hover 金色描边环 ── */
.nav-icon-btn { border: 1px solid transparent; transition: var(--transition); }
.nav-icon-btn:hover {
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.06);
  box-shadow: 0 0 12px rgba(245,158,11,.12);
}

/* reduced-motion 降级 */
@media (prefers-reduced-motion: reduce) {
  .page-header h1 .lucide, .sidebar-icon, .nav-icon-btn { transition: none; }
  .page-header h1:hover .lucide { transform: none; }
}

/* ── 按钮图标尺寸体系（统一：默认 15 / sm 13 / lg 16） ── */
.btn .lucide, .btn svg.lucide { width: 15px; height: 15px; flex-shrink: 0; }
.btn-sm .lucide { width: 13px; height: 13px; }
.btn-lg .lucide { width: 16px; height: 16px; }

/* ── 侧边栏图标容器精修：inset 高光 + 金色描边渐隐 ── */
.sidebar-icon {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
.sidebar-label .sidebar-icon { width: 25px; height: 25px; border-radius: 7.5px; }
.sidebar-group.open .sidebar-sub.open .sidebar-item .sidebar-icon {
  width: 25px; height: 25px; border-radius: 7.5px;
}
.sidebar-item.active .sidebar-icon {
  border: 1px solid rgba(245,158,11,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 12px rgba(245,158,11,.28);
}

/* ── 表头/筛选器图标微光（filter-card/table 头部图标统一） ── */
.filter-card .filter-item .lucide,
.data-table th .lucide {
  filter: drop-shadow(0 0 3px rgba(245,158,11,.18));
}

/* reduced-motion 降级 */
@media (prefers-reduced-motion: reduce) {
  .btn .lucide { transition: none; }
}

/* ── 顶栏品牌图标精修：渐变描边星形 + 呼吸辉光 ── */
.logo-mark {
  background:
    linear-gradient(135deg, rgba(252,211,77,.2), rgba(217,119,6,.06)) padding-box,
    linear-gradient(150deg, rgba(245,158,11,.55), rgba(245,158,11,.12)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 16px rgba(245,158,11,.16);
  animation: logoBreathe 4.5s ease-in-out infinite;
}
.logo-mark svg {
  fill: #FCD34D;
  filter: drop-shadow(0 0 4px rgba(245,158,11,.5));
}
@keyframes logoBreathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 14px rgba(245,158,11,.13); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 22px rgba(245,158,11,.24); }
}

/* ── 用户头像精修：金色渐变 + 内高光 + 光晕描边 ── */
.nav-avatar {
  background:
    radial-gradient(130% 110% at 30% 20%, rgba(255,255,255,.28), transparent 50%),
    var(--gradient-brand);
  border: 1px solid rgba(245,158,11,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 2px 8px rgba(245,158,11,.28);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.nav-avatar-wrap:hover .nav-avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 14px rgba(245,158,11,.4); }

/* ── 今日要点图标微光 ── */
.ticker-label .lucide { filter: drop-shadow(0 0 4px rgba(245,158,11,.35)); }

/* reduced-motion 降级 */
@media (prefers-reduced-motion: reduce) {
  .logo-mark { animation: none; }
}

/* ── 通用操作链接按钮（订单详情/商品改价等表格操作列） ── */
.op-link { color:var(--amber-400); cursor:pointer; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:8px;
  border:1px solid rgba(245,158,11,.25);
  background:rgba(245,158,11,.06);
  transition:background .2s, border-color .2s, box-shadow .2s, color .2s; }
.op-link:hover { text-decoration:none; background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.45); box-shadow:0 0 12px rgba(245,158,11,.2); }
.op-link .op-eye, .op-link svg, .op-link .lucide { width:13px; height:13px;
  filter:drop-shadow(0 0 3px rgba(245,158,11,.3)); }

/* ── 商品图占位（无图状态精致化） ── */
.prod-img-empty { display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg, rgba(245,158,11,.08), rgba(217,119,6,.02)),
    var(--glass-bg);
  border:1px solid rgba(245,158,11,.18); }
.prod-img-empty svg, .prod-img-empty .lucide { width:14px; height:14px;
  color:var(--text-quaternary); filter:drop-shadow(0 0 3px rgba(245,158,11,.15)); }

/* ── 状态圆点统一辉光（SKU 状态 / 库存健康） ── */
.sku-status .dot { box-shadow:0 0 6px currentColor; }
.health-dots .h-dot { width:7px; height:7px;
  box-shadow:0 0 5px rgba(245,158,11,.25); }

/* ── 全局筛选器图标（filter-item 的 date/select 金色内嵌图标） ── */
.filter-item input[type="date"] {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:10px center; padding-left:32px;
}
.filter-item select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:10px center; padding-left:32px;
}

/* ── 星级：金色渐变 + 辉光 ── */
.o-stars { color:#FCD34D; letter-spacing:2px; font-size:13.5px; white-space:nowrap;
  text-shadow:0 0 8px rgba(245,158,11,.4); }
.o-stars .off { color:rgba(184,178,164,.22); text-shadow:none; }

/* ── 全站表格空态：inbox 图标 + 呼吸 ── */
.empty-cell { position:relative; }
.empty-cell::before { content:""; display:block; width:44px; height:44px; margin:0 auto 14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-opacity='0.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:emptyFloat 4s ease-in-out infinite; }
@keyframes emptyFloat {
  0%, 100% { transform:translateY(0); opacity:.55; }
  50% { transform:translateY(-4px); opacity:.8; }
}

/* reduced-motion 降级 */
@media (prefers-reduced-motion: reduce) {
  .empty-cell::before { animation:none; }
}

/* ── 店铺卡操作图标按钮：圆形容器 + 三色语义 hover ── */
.store-ops { display:flex; gap:6px; }
.store-ops .btn-sm { width:30px; height:30px; padding:0; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; }
.store-ops .btn-sm svg, .store-ops .btn-sm .lucide { width:14px; height:14px; }
.store-ops .btn-sm:nth-child(1):hover { color:var(--blue-400); border-color:rgba(125,169,216,.35);
  background:rgba(125,169,216,.1); box-shadow:0 0 10px rgba(125,169,216,.15); }
.store-ops .btn-sm:nth-child(2):hover { color:var(--amber-400); border-color:rgba(245,158,11,.4);
  background:rgba(245,158,11,.1); box-shadow:0 0 10px rgba(245,158,11,.15); }
.store-ops .btn-sm:nth-child(3):hover { color:var(--red-400); border-color:rgba(248,113,113,.4);
  background:rgba(248,113,113,.1); box-shadow:0 0 10px rgba(248,113,113,.15); }

/* ── 店铺卡 hover 上浮 + 金边 ── */
.store-card { transition:transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.store-card:hover { transform:translateY(-3px); border-color:rgba(245,158,11,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 26px rgba(245,158,11,.08); }

/* ── 统计条图标容器（o-stats 带 .o-ico 时生效，全站统一） ── */
.o-stat:has(.o-ico) { position:relative; padding-left:52px; }
.o-stat .o-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg, rgba(245,158,11,.22), rgba(217,119,6,.05)) padding-box,
    linear-gradient(150deg, rgba(245,158,11,.4), rgba(245,158,11,.1)) border-box;
  border:1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.o-stat .o-ico svg, .o-stat .o-ico .lucide { width:14px; height:14px; stroke:#FCD34D; stroke-width:1.8;
  filter:drop-shadow(0 0 4px rgba(245,158,11,.35)); }

/* ── 指标卡图标（stat-card 带 .stat-icon 时右上角图标容器） ── */
.stat-card:has(.stat-icon) { position:relative; }
.stat-card .stat-icon { position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg, rgba(245,158,11,.2), rgba(217,119,6,.05)) padding-box,
    linear-gradient(150deg, rgba(245,158,11,.38), rgba(245,158,11,.1)) border-box;
  border:1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.stat-card .stat-icon svg, .stat-card .stat-icon .lucide { width:15px; height:15px;
  stroke:#FCD34D; stroke-width:1.8; filter:drop-shadow(0 0 4px rgba(245,158,11,.32)); }
.stat-card:has(.stat-icon) .stat-label { padding-right:38px; }

/* ── 轻量空态（聊天/侧栏等小容器）：气泡图标 + 居中 ── */
.empty-tip { display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 14px; text-align:center; font-size:12px; color:var(--text-quaternary); }
.empty-tip::before { content:""; width:34px; height:34px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-opacity='0.3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ── 弹窗精修：顶部光斑 + 关闭按钮 + 滚动条 ── */
.modal-box {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(245,158,11,.06), transparent 55%),
    linear-gradient(180deg, #1A1712 0%, #141109 55%, #100E0A 100%);
  border-color: rgba(245,158,11,.16);
}
.modal-box::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(80% 45% at 50% 0%, rgba(255,255,255,.045), transparent 60%);
  pointer-events: none;
}
/* 弹窗头部关闭按钮（含 x 图标的按钮）圆形化 */
.modal-header .btn-ghost, .modal-actions .btn-ghost { border-radius: 9px; }
.modal-header .btn-sm { width: 30px; height: 30px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 8px; }
.modal-header .btn-sm:hover { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.35);
  color: var(--red-400); }

/* ── 全站滚动条（弹窗/侧栏/表格横向）：细金条 ── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(184,178,164,.16); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(245,158,11,.35); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(184,178,164,.25) transparent; }

/* ═══ v21：语言切换器（中/俄/英） ═══ */
.nb-lang { position: relative; }
.lang-badge {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--amber-400);
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 6px;
  font-family: 'Inter', var(--font-sans);
}
.nb-lang:hover .lang-badge {
  background: rgba(245,158,11,0.2);
  box-shadow: 0 0 10px rgba(245,158,11,0.25);
}
.lang-dropdown { width: 240px; }
.lang-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 12px; margin: 2px 0;
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: all 0.15s;
}
.lang-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(245,158,11,0.2); }
.lang-item.active {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.32);
}
.lang-flag {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: rgba(245,158,11,0.12); color: var(--amber-400);
  border: 1px solid rgba(245,158,11,0.25);
}
.lang-item.active .lang-flag { background: rgba(245,158,11,0.22); box-shadow: 0 0 10px rgba(245,158,11,0.2); }
.lang-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.lang-sub { font-size: 11px; color: var(--text-tertiary); }
.lang-item.active .lang-name { color: var(--amber-400); }


/* ══ v20 侧边栏比例重整：分组标题弱化、菜单项加大、图标容器放大 ══ */
.sidebar-label .gl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-quaternary);
  text-transform: none;
}
.sidebar-label { gap: 10px; padding: 8px 10px; }
.sidebar-label .sidebar-icon { width: 26px; height: 26px; border-radius: 8px; }

.sidebar-item {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  gap: 12px;
  border-radius: 10px;
}
.sidebar-group.open .sidebar-item { padding: 9px 11px; }
.sidebar-item .sidebar-icon { width: 26px; height: 26px; border-radius: 8px; }
.sidebar-icon .lucide, .sidebar-icon svg { width: 16px; height: 16px; }

.sidebar-sub-label .st { font-size: 11px; letter-spacing: 0.08em; }
.sidebar-sub-label { padding: 6px 8px 6px 12px; }
.sidebar-group.open .sidebar-sub.open .sidebar-item { padding: 8px 11px; }
.sidebar-group.open .sidebar-sub.open .sidebar-item .sidebar-icon { width: 26px; height: 26px; border-radius: 8px; }
.sidebar-group { margin-bottom: 10px; }

/* ═══════════════════ v21 侧边栏排列重做（参考 21st.dev shadcn sidebar 规范） ═══════════════════ */
/* 分级靠缩进+颜色，字号统一 15px */
.sidebar-group { margin-bottom: 18px; }
.sidebar-label { padding: 0 12px 8px; background: none; }
.sidebar-label:hover { background: none; }
.sidebar-label:hover .gl { color: var(--text-tertiary); }
.sidebar-label .gl {
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: none;
  color: var(--text-quaternary);
  transition: color .2s;
}
/* 子组标题：同字号，中灰 + 金点 */
.sidebar-sub-label { padding: 5px 12px 5px 12px; gap: 6px; border-radius: 8px; }
.sidebar-sub-label:hover { background: rgba(255,255,255,.03); }
.sidebar-sub-label .st {
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  color: var(--text-tertiary);
}
.sidebar-sub-label .sub-dot { width: 6px; height: 6px; }
/* 菜单项：统一 40px 行高，15px 字 */
.sidebar-item {
  height: 40px; padding: 0 12px; margin: 1px 0;
  font-size: 15px; font-weight: 500; gap: 10px;
  border-radius: 9px; letter-spacing: 0.01em;
}
.sidebar-group.open .sidebar-item,
.sidebar-group.open .sidebar-sub.open .sidebar-item {
  height: 40px; padding: 0 12px;
}
/* 子组内菜单项向右缩进 → 层级一目了然 */
.sidebar-sub .sidebar-item { padding-left: 30px !important; }
/* 缩进项的 active 金条贴图标起点 */
.sidebar-sub .sidebar-item.active::before { left: 30px; }
/* 图标容器：28px，图标 17px */
.sidebar-item .sidebar-icon,
.sidebar-label .sidebar-icon {
  width: 28px; height: 28px; border-radius: 8px;
}
.sidebar-group.open .sidebar-sub.open .sidebar-item .sidebar-icon {
  width: 28px; height: 28px; border-radius: 8px;
}
.sidebar-icon .lucide, .sidebar-icon svg { width: 17px; height: 17px; }
.sidebar-item .sidebar-count { font-size: 12px; }

/* ═══ AI 额度耗尽全局弹窗（Token 计费） ═══ */
.ai-quota-modal {
  position: fixed; inset: 0; z-index: 120000;
  display: none; align-items: center; justify-content: center;
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(6px);
}
.ai-quota-modal.show { display: flex; }
.aqm-card {
  width: min(420px, 92vw); padding: 28px 26px 22px;
  border-radius: 18px; text-align: center;
  background: var(--bg-panel, #0d1424);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  animation: aqm-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes aqm-in {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.aqm-icon {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.18));
  border: 1px solid rgba(34, 211, 238, 0.35);
}
.aqm-icon svg { width: 26px; height: 26px; stroke: #22d3ee; }
.aqm-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--text, #e6edf7); }
.aqm-card > p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6;
  color: var(--text-dim, #8a97ad); }
.aqm-usage {
  margin-bottom: 18px; padding: 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px; color: var(--text-dim, #8a97ad);
}
.aqm-usage b { color: #f59e0b; font-size: 15px; font-family: Consolas, monospace; }
.aqm-actions { display: flex; gap: 10px; justify-content: center; }