/* =========================================================================
   AUTOOPS AI（AI掌柜）· 设计系统接入层
   来源：design-spec/design-tokens.css + console.html（锁死规范）
   作用：
     1) 注入设计令牌（颜色/间距/圆角/阴影唯一真源，禁止在使用处硬编码）
     2) 将共享外壳（顶栏/侧栏）对齐新设计（顶栏改浅色、侧栏改深色 #1A1A2E）
     3) 仅对 #page-dashboard 作用域重画主页内容，零影响其它页面
   规则：全部取值走 CSS 变量；零 emoji；图标 .ico 已为 stroke 线性（1.75）
   ========================================================================= */

:root {
  /* 1. 品牌主色：电光蓝 */
  --color-primary-50:  #EEF1FE;
  --color-primary-100: #DBE2FD;
  --color-primary-200: #C3CDF8;
  --color-primary-300: #A9B8F8;
  --color-primary-400: #7E95F3;
  --color-primary-500: #5A74F0;
  --color-primary-600: #4361EE;
  --color-primary-700: #3A52D6;
  --color-primary-800: #2E41AE;
  --color-primary-900: #233183;

  /* 2. 强调色：薄荷绿 */
  --color-accent-50:  #E6FBF5;
  --color-accent-100: #C3F5EA;
  --color-accent-200: #8FEDD7;
  --color-accent-300: #5AE3C4;
  --color-accent-400: #43E0BC;
  --color-accent-500: #2BDAB1;
  --color-accent-600: #06D6A0;
  --color-accent-700: #04B58C;
  --color-accent-800: #049275;

  /* 3. 中性灰阶 / 表面 */
  --color-white:        #FFFFFF;
  --color-bg:           #FFFFFF;
  --color-bg-subtle:    #F6F8FB;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F1F4F9;
  --color-surface-3:    #E9EDF5;
  --color-surface-sunken:#EDF1F7;
  --color-border:        #E6EAF1;
  --color-border-strong: #D3DAE6;
  --color-border-subtle: #EEF1F6;
  --color-border-inverse:#FFFFFF;
  --color-text-primary:   #1B2333;
  --color-text-secondary: #414C63;
  --color-text-tertiary:  #7A869B;
  --color-text-quaternary: #9AA4B8;
  --color-text-inverse:   #FFFFFF;
  --color-text-on-accent: #043B2E;
  --color-on-primary:     #FFFFFF;

  /* 4. 语义色 */
  --color-success:      #10B981;
  --color-success-600:  #0EA372;
  --color-success-700:  #0B875F;
  --color-success-50:   #E7F7F1;
  --color-success-100:  #CDEFE3;
  --color-warning:      #F59E0B;
  --color-warning-600:  #E08A04;
  --color-warning-700:  #B86E03;
  --color-warning-50:   #FEF3E2;
  --color-warning-100:  #FCE3C2;
  --color-danger:       #EF4444;
  --color-danger-600:   #DC2F2F;
  --color-danger-700:   #B91C1C;
  --color-danger-50:    #FDECEC;
  --color-danger-100:   #FBCACA;
  --color-info:         #4361EE;
  --color-info-50:      #EEF1FE;
  --color-info-100:     #DBE2FD;
  --color-text-success: #0B875F;
  --color-text-warning: #B86E03;
  --color-text-danger:  #B91C1C;
  --color-text-info:    #3A52D6;

  /* 5. 数据可视化 */
  --chart-1: #4361EE;
  --chart-2: #06D6A0;
  --chart-3: #F59E0B;
  --chart-4: #7E95F3;
  --chart-5: #2BDAB1;
  --chart-6: #94A3C4;
  --chart-7: #8B5CF6;
  --chart-8: #F472B6;
  --chart-neutral: #E6EAF1;
  --chart-grid: #EEF1F6;
  --chart-label: #7A869B;
  --chart-seq-1: #DBE2FD;
  --chart-seq-2: #A9B8F8;
  --chart-seq-3: #7E95F3;
  --chart-seq-4: #5A74F0;
  --chart-seq-5: #4361EE;

  /* 6. RGB 通道 */
  --color-primary-500-rgb: 90, 116, 240;
  --color-primary-600-rgb: 67, 97, 238;
  --color-accent-600-rgb: 6, 214, 160;
  --color-success-rgb: 16, 185, 129;
  --color-warning-rgb: 245, 158, 11;
  --color-danger-rgb: 239, 68, 68;
  --color-text-primary-rgb: 27, 35, 51;
  --color-surface-rgb: 255, 255, 255;
  --color-sidebar-bg-rgb: 26, 26, 46;

  /* 7. 深色侧栏 */
  --color-sidebar-bg:           #1A1A2E;
  --color-sidebar-bg-2:         #2D3561;
  --color-sidebar-surface-2:    #21213B;
  --color-sidebar-border:       rgba(255, 255, 255, 0.07);
  --color-sidebar-divider:      rgba(255, 255, 255, 0.06);
  --color-sidebar-text:         #AEB6D4;
  --color-sidebar-text-dim:     #6E769A;
  --color-sidebar-text-active:  #FFFFFF;
  --color-sidebar-active-bg:    rgba(67, 97, 238, 0.28);
  --color-sidebar-hover-bg:     rgba(255, 255, 255, 0.06);
  --color-sidebar-accent:       #06D6A0;
  --color-sidebar-accent-bg:    rgba(6, 214, 160, 0.16);

  /* 8. 渐变 / 光晕 */
  --gradient-hero: linear-gradient(135deg, #4361EE 0%, #2E41AE 45%, #06D6A0 120%);
  --gradient-primary: linear-gradient(135deg, #5A74F0 0%, #4361EE 100%);
  --gradient-accent: linear-gradient(135deg, #2BDAB1 0%, #06D6A0 100%);
  --hairline-gradient: linear-gradient(90deg, var(--color-primary-500), var(--color-accent-500));
  --glow-primary: radial-gradient(50% 40% at 50% 0%, rgba(var(--color-primary-600-rgb), 0.12), rgba(var(--color-primary-600-rgb), 0) 70%);
  --bg-grid: radial-gradient(circle, rgba(27, 35, 51, 0.045) 1px, transparent 1px);
  --bg-grid-size: 22px 22px;

  /* 9. 字体 */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans TC', 'Source Han Sans TC', sans-serif;

  /* 10. 字阶 */
  --fs-display: 56px; --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 22px; --fs-h4: 18px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 13px;
  --fs-micro: 12px; --fs-nano: 11px;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* 11. 间距 */
  --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;

  /* 12. 圆角 */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px;

  /* 阴影 */
  --shadow-xs:  0 1px 2px rgba(var(--color-text-primary-rgb), 0.05);
  --shadow-sm:  0 1px 3px rgba(var(--color-text-primary-rgb), .06), 0 1px 2px rgba(var(--color-text-primary-rgb), .04);
  --shadow-md:  0 4px 12px rgba(var(--color-text-primary-rgb), .08), 0 2px 4px rgba(var(--color-text-primary-rgb), .04);
  --shadow-lg:  0 12px 32px rgba(var(--color-text-primary-rgb), .10);
  --shadow-glow: 0 8px 24px rgba(var(--color-primary-600-rgb), .22);
  --shadow-glow-accent: 0 8px 24px rgba(var(--color-accent-600-rgb), .20);
  --focus-ring: 0 0 0 3px rgba(var(--color-primary-500-rgb), 0.35);
  --focus-ring-accent: 0 0 0 3px rgba(var(--color-accent-600-rgb), 0.30);
  --focus-ring-offset: 2px;
  --hover-overlay: rgba(var(--color-text-primary-rgb), 0.04);
  --active-scale: 0.98;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms; --dur-base: 200ms;

  /* 尺寸 */
  --sidebar-w: 220px;
  --appbar-h: 60px;
  --content-pad: 24px;
  --card-pad: 24px; --card-pad-sm: 16px;
  --btn-h: 44px; --btn-h-sm: 32px; --btn-px: 24px; --btn-px-sm: 14px; --btn-gap: 8px;
  --input-h: 52px; --input-h-sm: 40px; --input-px: 16px;
  --icon-size: 24px; --icon-size-sm: 18px; --icon-size-lg: 32px;
  --logo-mark: 30px; --avatar: 36px; --chip-h: 28px;
}

/* =========================================================================
   共享外壳：顶栏改浅色（对齐新设计 appbar）
   ========================================================================= */
.nav {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.nav-brand { color: var(--color-text-primary); }
.nav-shop { color: var(--color-text-secondary); opacity: 1; }
.nav-logout {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}
.nav-logout:hover { background: var(--color-surface-2); color: var(--color-text-primary); border-color: var(--color-primary-400); }
.theme-toggle {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}
.theme-toggle:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.nav-notif {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}
.nav-notif:hover { background: var(--color-surface-2); color: var(--color-text-primary); }

/* =========================================================================
   共享外壳：侧栏改深色（对齐新设计 sidebar #1A1A2E）
   ========================================================================= */
.sidebar {
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  border-right: 1px solid var(--color-sidebar-border);
}
.sidebar-item { color: var(--color-sidebar-text); border-left-color: transparent; }
.sidebar-item .ico { color: var(--color-sidebar-text-dim); }
.sidebar-item:hover { background: var(--color-sidebar-hover-bg); color: #fff; }
.sidebar-item:hover .ico { color: #fff; }
.sidebar-item.active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-text-active);
  border-left-color: var(--color-primary-500);
  font-weight: 600;
}
.sidebar-item.active .ico { color: #fff; }
.sidebar-item.featured { background: var(--color-sidebar-accent-bg); color: var(--color-sidebar-accent); }
.sidebar-item.featured .ico { color: var(--color-sidebar-accent); }
.sidebar-section { border-top: 1px solid var(--color-sidebar-divider); }
.sidebar-section-title {
  color: var(--color-sidebar-text-dim);
  font-size: var(--fs-nano);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-xl) var(--space-xl) var(--space-sm);
  border-top: 1px solid var(--color-sidebar-divider);
}

/* 内容区浅色底 */
.main { background: var(--color-bg-subtle); }

/* =========================================================================
   按钮 / 徽章（全局对齐新设计）
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
  height: var(--btn-h); padding-inline: var(--btn-px); border-radius: var(--radius-md);
  font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0.01em;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap; cursor: pointer; border: 1px solid transparent;
}
.btn svg.ico { width: 18px; height: 18px; }
.btn-primary { background: var(--color-primary-600); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-700); box-shadow: var(--shadow-glow); }
.btn-primary:active { transform: scale(var(--active-scale)); }
.btn-accent { background: var(--color-accent-600); color: var(--color-text-on-accent); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--color-accent-500); box-shadow: var(--shadow-glow-accent); }
.btn-accent:active { transform: scale(var(--active-scale)); }
.btn-secondary { background: var(--color-surface); color: var(--color-primary-600); border-color: var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-primary-400); background: var(--color-primary-50); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { color: var(--color-text-primary); background: var(--color-surface-2); }
.btn-sm { height: var(--btn-h-sm); padding-inline: var(--btn-px-sm); font-size: var(--fs-micro); }
.btn-sm svg.ico { width: 16px; height: 16px; }
.btn-block { width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 20px; padding-inline: 10px; border-radius: var(--radius-full);
  font-size: var(--fs-nano); font-weight: var(--fw-semibold);
}
.badge-primary { background: var(--color-primary-50); color: var(--color-primary-700); }
.badge-accent  { background: var(--color-accent-50);  color: var(--color-text-success); }
.badge-success { background: var(--color-success-50); color: var(--color-text-success); }
.badge-warning { background: var(--color-warning-50); color: var(--color-text-warning); }
.badge-danger  { background: var(--color-danger-50);  color: var(--color-text-danger); }

/* =========================================================================
   主页内容（仅 #page-dashboard 作用域，零影响其它页面）
   ========================================================================= */
.card-data { position: relative; overflow: hidden; }
.card-data::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--hairline-gradient); opacity: 0.85;
}

#page-dashboard .welcome-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-2xl);
}
#page-dashboard .welcome-row h1 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0; }
#page-dashboard .welcome-row .date { font-size: var(--fs-small); color: var(--color-text-tertiary); margin-top: var(--space-xs); }
#page-dashboard .welcome-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

#page-dashboard .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }
#page-dashboard .stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-lg);
  display: flex; flex-direction: column;
}
#page-dashboard .stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; }
#page-dashboard .stat-ic { width: 32px; height: 32px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; }
#page-dashboard .stat-ic .ico { width: 18px; height: 18px; stroke-width: 1.75; }
#page-dashboard .stat-ic.blue  { background: var(--color-primary-50); color: var(--color-primary-600); }
#page-dashboard .stat-ic.mint  { background: var(--color-accent-50);  color: var(--color-accent-600); }
#page-dashboard .stat-ic.amber { background: var(--color-warning-50); color: var(--color-warning-600); }
#page-dashboard .stat-ic.rose  { background: var(--color-danger-50);  color: var(--color-danger); }
#page-dashboard .stat-value { font-size: 24px; font-weight: var(--fw-bold); letter-spacing: -0.02em; margin-top: var(--space-sm); font-variant-numeric: tabular-nums; }
#page-dashboard .stat-label { font-size: var(--fs-caption); color: var(--color-text-secondary); font-weight: var(--fw-medium); }

#page-dashboard .charts-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); }
#page-dashboard .panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--card-pad);
}
#page-dashboard .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); }
#page-dashboard .panel-head h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); margin: 0; }
#page-dashboard .panel-head .pmeta { font-size: var(--fs-small); color: var(--color-text-tertiary); }
#page-dashboard .text-link { color: var(--color-primary-600); font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
#page-dashboard .text-link:hover { text-decoration: underline; }
#page-dashboard .chart-svg { width: 100%; height: auto; display: block; }

#page-dashboard .warn-list { display: flex; flex-direction: column; }
#page-dashboard .warn-item { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border-subtle); }
#page-dashboard .warn-item:last-child { border-bottom: 0; }
#page-dashboard .warn-item .wi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
#page-dashboard .warn-item .wi-name { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
#page-dashboard .warn-item .wi-val { font-size: var(--fs-micro); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
#page-dashboard .warn-item .wi-val.low { color: var(--color-text-warning); font-weight: var(--fw-semibold); }

#page-dashboard .activity { display: flex; flex-direction: column; }
#page-dashboard .act-item { display: flex; gap: var(--space-md); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border-subtle); }
#page-dashboard .act-item:last-child { border-bottom: 0; }
#page-dashboard .act-ic { width: 38px; height: 38px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; flex: none; }
#page-dashboard .act-ic .ico { width: 18px; height: 18px; stroke-width: 1.75; }
#page-dashboard .act-ic.blue  { background: var(--color-primary-50); color: var(--color-primary-600); }
#page-dashboard .act-ic.mint  { background: var(--color-accent-50);  color: var(--color-accent-600); }
#page-dashboard .act-ic.amber { background: var(--color-warning-50); color: var(--color-warning-600); }
#page-dashboard .act-ic.rose  { background: var(--color-danger-50);  color: var(--color-danger); }
#page-dashboard .act-body { flex: 1; }
#page-dashboard .act-body .at { font-size: var(--fs-small); color: var(--color-text-primary); }
#page-dashboard .act-body .am { font-size: var(--fs-micro); color: var(--color-text-tertiary); margin-top: 2px; }

#page-dashboard .progress { height: 8px; border-radius: var(--radius-full); background: var(--chart-neutral); overflow: hidden; margin-top: var(--space-sm); }
#page-dashboard .progress > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--chart-1); }
#page-dashboard .progress.accent > span { background: var(--chart-2); }
#page-dashboard .progress.warn > span { background: var(--chart-3); }

/* 主页内 .card（最近活動/快捷操作面板沿用新卡片；警示卡用内联样式保持彩色） */
#page-dashboard .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--card-pad); }

#page-dashboard .dash-quick-actions { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
#page-dashboard .quick-action {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#page-dashboard .quick-action:hover { background: var(--color-surface-2); border-color: var(--color-primary-400); transform: translateY(-1px); }
#page-dashboard .quick-action .qa-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; flex: none; }
#page-dashboard .quick-action .qa-icon .ico { width: 20px; height: 20px; stroke-width: 1.75; }
#page-dashboard .quick-action .qa-icon.cam  { background: var(--color-accent-50);  color: var(--color-accent-600); }
#page-dashboard .quick-action .qa-icon.doc  { background: var(--color-primary-50); color: var(--color-primary-600); }
#page-dashboard .quick-action .qa-icon.chart{ background: var(--color-warning-50); color: var(--color-warning-600); }
#page-dashboard .quick-action .qa-icon.box  { background: var(--color-primary-50); color: var(--color-primary-600); }
#page-dashboard .quick-action .qa-text { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
#page-dashboard .quick-action .qa-desc { font-size: var(--fs-micro); color: var(--color-text-tertiary); }

/* =========================================================================
   表单组件（Form elements）
   ========================================================================= */
.field { display: flex; flex-direction: column; gap: var(--space-sm); }
.field label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.field-row { display: flex; align-items: center; gap: var(--space-md); }

.input {
  height: var(--input-h);
  padding-inline: var(--input-px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  width: 100%;
}
.input::placeholder { color: var(--color-text-tertiary); }
.input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
  outline: none;
}
.input:user-invalid,
.input.invalid { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb), .12); }
.input:disabled { background: var(--color-surface-2); color: var(--color-text-tertiary); cursor: not-allowed; }
.input-sm { height: var(--input-h-sm); font-size: var(--fs-small); }

.switch {
  position: relative;
  width: 40px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background var(--dur-fast) var(--ease-out);
  flex: none;
  cursor: pointer;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--color-primary-600); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

/* =========================================================================
   登录页（.auth / .auth-card）
   ========================================================================= */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg) var(--space-4xl);
  background-color: var(--color-bg-subtle);
  background-image: var(--bg-grid);
  background-size: var(--bg-grid-size);
  background-position: center top;
  position: relative;
  overflow-y: auto;
}
.auth::before {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -18%;
  width: 75%;
  height: 85%;
  background: var(--glow-primary);
  pointer-events: none;
}
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - var(--space-4xl) * 2);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hairline-gradient);
  opacity: 0.9;
}
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
  text-decoration: none;
  margin-bottom: var(--space-lg);
  transition: color var(--dur-fast) var(--ease-out);
  border-radius: var(--radius-xs);
  padding: var(--space-xs) var(--space-sm);
}
.auth-back:hover { color: var(--color-primary-600); background: var(--color-surface-2); }
.auth-back svg { width: 16px; height: 16px; }
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
.auth-logo {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--gradient-hero);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.auth-logo svg { width: 26px; height: 26px; stroke: var(--color-text-inverse); }
.auth-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
}
.auth-sub {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
  letter-spacing: 0.08em;
}
.auth-welcome { text-align: center; margin-bottom: var(--space-2xl); }
.auth-welcome h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.auth-welcome p {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
}
.auth-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.auth-form .field { gap: var(--space-sm); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .lead-ic {
  position: absolute;
  left: 14px;
  width: 18px; height: 18px;
  color: var(--color-text-tertiary);
  pointer-events: none;
  display: flex;
}
.input-group .input { padding-left: 44px; }
.input-group.has-trail .input { padding-right: 44px; }
.auth .input:focus {
  border-color: var(--color-primary-600);
  box-shadow: var(--focus-ring);
}
.trail-btn {
  position: absolute;
  right: 6px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  border: none; background: none; cursor: pointer;
}
.trail-btn:hover { color: var(--color-text-secondary); background: var(--color-surface-2); }
.trail-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.trail-btn svg { width: 18px; height: 18px; }
.trail-btn .ic-eye-off { display: none; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.auth-link {
  color: var(--color-primary-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.auth-link:hover { color: var(--color-primary-700); }
.auth-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.remember {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.remember input:focus-visible + .switch { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.remember input:checked + .switch { background: var(--color-primary-600); }
.remember input:checked + .switch::after { transform: translateX(18px); }
.auth-submit { width: 100%; margin-top: var(--space-xs); }
.auth-submit:hover { transform: translateY(-2px); }
.auth-submit:active { transform: translateY(-2px) scale(var(--active-scale)); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  color: var(--color-text-tertiary);
  font-size: var(--fs-micro);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.auth-signup { text-align: center; font-size: var(--fs-small); color: var(--color-text-secondary); }
.auth-signup a { color: var(--color-primary-600); font-weight: var(--fw-semibold); }
.auth-signup a:hover { color: var(--color-primary-700); }
.auth-signup a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); }
.auth-foot {
  text-align: center;
  margin-top: var(--space-xl);
  font-size: var(--fs-micro);
  color: var(--color-text-quaternary);
}

/* 登录页 register 表单复用 .auth-form；这里补充旧版注册所需的密码强度容器 */
#pwdStrengthContainer { margin-top: var(--space-sm); }

@media (max-width: 480px) {
  .auth-card { padding: var(--space-2xl) var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-submit:hover, .auth-submit:active { transform: none; }
}


@media (max-width: 1100px) {
  #page-dashboard .stat-grid { grid-template-columns: repeat(2, 1fr); }
  #page-dashboard .charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #page-dashboard .stat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   后台组件样式（整体视觉对齐 · 覆盖旧 style.css）
   ============================================================ */

/* 1. 侧栏 SIDEBAR（深色 #1A1A2E · 克制层次） */
.sidebar {
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  border-right: 1px solid var(--color-sidebar-border);
  display: flex;
  flex-direction: column;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  color: var(--color-sidebar-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.sidebar-item .ico {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-sidebar-text-dim);
  flex: none;
}
.sidebar-item:hover { background: var(--color-sidebar-hover-bg); color: var(--color-sidebar-text-active); }
.sidebar-item:hover .ico { color: var(--color-sidebar-text-active); }
.sidebar-item.active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-text-active);
  border-left-color: var(--color-primary-500);
  font-weight: var(--fw-semibold);
}
.sidebar-item.active .ico { color: var(--color-sidebar-text-active); }
.sidebar-item.featured,
.sidebar-item.featured.active {
  background: var(--color-sidebar-accent-bg);
  color: var(--color-sidebar-accent);
  border-left-color: var(--color-accent-600);
}
.sidebar-item.featured .ico,
.sidebar-item.featured.active .ico { color: var(--color-sidebar-accent); }
.sidebar-item.featured:hover { background: var(--color-sidebar-accent-bg); }
.sidebar-section { border-top: 1px solid var(--color-sidebar-divider); }
.sidebar-section-title {
  color: var(--color-sidebar-text-dim);
  font-size: var(--fs-nano);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-xl) var(--space-xl) var(--space-sm);
  border-top: 1px solid var(--color-sidebar-divider);
}
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--chip-h);
  height: var(--chip-h);
  padding: 0 var(--space-xs);
  margin-left: auto;
  border-radius: var(--radius-full);
  font-size: var(--fs-nano);
  font-weight: var(--fw-semibold);
  background: var(--color-sidebar-surface-2);
  color: var(--color-sidebar-text);
}
.sidebar-item.active .sidebar-badge { background: var(--color-primary-600); color: var(--color-on-primary); }
.sidebar-item.featured .sidebar-badge,
.sidebar-item.featured.active .sidebar-badge { background: var(--color-sidebar-accent); color: var(--color-text-on-accent); }
.sidebar-subitem {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl) var(--space-sm) calc(var(--space-xl) + 20px);
  color: var(--color-sidebar-text-dim);
  font-size: var(--fs-micro);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.sidebar-subitem:hover { background: var(--color-sidebar-hover-bg); color: var(--color-sidebar-text-active); }
.sidebar-subitem.active {
  background: var(--color-sidebar-surface-2);
  color: var(--color-sidebar-accent);
  border-left-color: var(--color-accent-600);
  font-weight: var(--fw-semibold);
}

/* 2. 数据表格 TABLE（浅色 · 紧凑 · 作用域 .main） */
.main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.main thead th {
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-strong);
}
/* 別名映射表：CJK 表頭不需大寫/字距；表格級 overflow 改 visible 防止父層 border-radius 裁切文字 */
.main .alias-table {
  overflow: visible;
}
.main .alias-table thead th {
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* 別名表單語言選擇器：保證內容完整可見 */
.alias-field-xs select {
  overflow: visible;
  text-overflow: clip;
}
.main tbody td {
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-secondary);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-subtle);
}
.main tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.main tbody tr:hover { background: var(--color-surface-2); }
.main tbody tr:last-child td { border-bottom: 0; }
.main table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.main table thead th:last-child  { border-top-right-radius: var(--radius-lg); }
.main table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.main table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-lg); }
.main table.table-zebra tbody tr:nth-child(even) { background: var(--color-bg-subtle); }
.main table.table-zebra tbody tr:nth-child(even):hover { background: var(--color-surface-2); }
.main table.table-compact thead th,
.main table.table-compact tbody td { padding: var(--space-xs) var(--space-md); }

/* 3. AI 聊天组件（#support-* · !important 覆盖内联） */
#support-bubble {
  background: var(--color-primary-600) !important;
  color: var(--color-on-primary) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-glow) !important;
}
#support-bubble .unread-badge {
  background: var(--color-danger) !important;
  color: var(--color-on-primary) !important;
}
#support-panel {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}
#support-panel > div:first-child {
  background: var(--gradient-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: var(--space-md) var(--space-lg) !important;
}
#support-panel > div:first-child span {
  color: var(--color-on-primary) !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold) !important;
}
#support-close-btn:hover { background: var(--color-sidebar-hover-bg) !important; }
#support-messages {
  background: var(--color-bg-subtle) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-caption) !important;
  padding: var(--space-md) var(--space-lg) !important;
  gap: var(--space-sm) !important;
}
#support-messages [style*="align-self:flex-end"] {
  background: var(--color-primary-600) !important;
  color: var(--color-on-primary) !important;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg) !important;
  padding: var(--space-sm) var(--space-md) !important;
  font-size: var(--fs-caption) !important;
}
#support-messages [style*="align-self:flex-start"]:not(#typing-indicator) {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 2px solid var(--color-accent-600) !important;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs) !important;
  padding: var(--space-sm) var(--space-md) !important;
  font-size: var(--fs-caption) !important;
}
#support-messages button {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-primary-200) !important;
  color: var(--color-primary-700) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--fs-nano) !important;
  padding: var(--space-xs) var(--space-md) !important;
  cursor: pointer !important;
}
#support-messages button:hover { background: var(--color-primary-50) !important; }
#support-quick-actions {
  border-top: 1px solid var(--color-border) !important;
  padding: var(--space-sm) var(--space-lg) !important;
}
#support-input {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-full) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--fs-small) !important;
  padding: var(--space-sm) var(--space-lg) !important;
}
#support-input::placeholder { color: var(--color-text-tertiary) !important; }
#support-input:focus {
  border-color: var(--color-primary-500) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}
#support-send-btn {
  background: var(--color-primary-600) !important;
  color: var(--color-on-primary) !important;
  border-radius: var(--radius-full) !important;
  font-weight: var(--fw-semibold) !important;
}
#support-quick-actions button:last-child {
  background: transparent !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-full) !important;
}
#feedback-reminder-banner {
  margin: var(--space-md) 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
  background: var(--color-warning-50) !important;
  border: 1px solid var(--color-warning) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
}
#feedback-reminder-banner * { color: var(--color-text-warning) !important; }
#feedback-reminder-banner strong { font-weight: var(--fw-bold) !important; }