/* =========================================================================
   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:           #1B2333;
  --color-sidebar-bg-2:         #232B3D;
  --color-sidebar-surface-2:    rgba(67, 97, 238, 0.18);
  --color-sidebar-border:       rgba(67, 97, 238, 0.14);
  --color-sidebar-divider:      rgba(148, 163, 184, 0.10);
  --color-sidebar-text:         #E2E8F0;
  --color-sidebar-text-dim:     #94A3B8;
  --color-sidebar-text-active:  #FFFFFF;
  --color-sidebar-active-bg:    rgba(67, 97, 238, 0.32);
  --color-sidebar-hover-bg:     rgba(67, 97, 238, 0.14);
  --color-sidebar-accent:       #06D6A0;
  --color-sidebar-accent-bg:    rgba(6, 214, 160, 0.18);

  /* 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); }

/* 内容区浅色底 */
.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; }
}


/* =========================================================================
   响应式：主页（#page-dashboard）移动端适配
   断点与 style.css 的 768px 抽屉机制对齐；全部走令牌，零硬编码
   ========================================================================= */
@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: 768px) {
  #page-dashboard .welcome-row {
    flex-direction: column; align-items: flex-start;
    gap: var(--space-lg); margin-bottom: var(--space-xl);
  }
  #page-dashboard .welcome-row h1 { font-size: var(--fs-h3); }
  #page-dashboard .welcome-actions { width: 100%; }
  #page-dashboard .welcome-actions .btn { flex: 1 1 auto; }

  #page-dashboard .stat-grid { gap: var(--space-md); }
  #page-dashboard .stat-card { padding: var(--space-md); }

  #page-dashboard .charts-row { gap: var(--space-lg); margin-bottom: var(--space-lg); }
  #page-dashboard .panel,
  #page-dashboard .card { padding: var(--card-pad-sm); }
  #page-dashboard .panel-head { margin-bottom: var(--space-lg); }

  /* 警示卡内按钮行：窄屏上下堆叠、全宽 */
  #page-dashboard .alert-actions { flex-direction: column; }
  #page-dashboard .alert-actions .btn { width: 100%; flex: 1 1 auto; }

  /* 顶栏右侧轻量压缩 */
  .nav-user { gap: 10px; }
  .nav-logout { padding: 6px 12px; font-size: 11px; }
}

/* 小手机：单列、按钮全宽堆叠 */
@media (max-width: 480px) {
  #page-dashboard .welcome-row h1 { font-size: 20px; }
  #page-dashboard .welcome-actions { flex-direction: column; }
  #page-dashboard .welcome-actions .btn { width: 100%; }

  #page-dashboard .stat-grid { grid-template-columns: 1fr; }
  #page-dashboard .stat-value { font-size: 22px; }

  #page-dashboard .charts-row { margin-bottom: var(--space-md); }
  #page-dashboard .act-item { padding: var(--space-md) 0; }
  #page-dashboard .warn-item { padding: var(--space-md) 0; }
}

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

/* 1. 侧栏 SIDEBAR（深色 #1A1A2E · 克制层次） */
.sidebar {
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  border-right: 1px solid var(--color-sidebar-border);
  box-shadow: 2px 0 8px rgba(27, 35, 51, 0.04);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 16px;
  color: var(--color-sidebar-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  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-bold);
  text-shadow: 0 0 16px rgba(67, 97, 238, 0.45);
}
.sidebar-item.active .ico { color: var(--color-sidebar-text-active); }
.sidebar-item.featured,
.sidebar-item.featured.active {
  background: var(--color-sidebar-accent-bg);
  color: #34F5C3;
  border-left-color: var(--color-accent-600);
}
.sidebar-item.featured .ico,
.sidebar-item.featured.active .ico { color: #34F5C3; }
.sidebar-item.featured:hover { background: rgba(6, 214, 160, 0.24); }
.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: 8px 16px 4px;
  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-danger);
  color: var(--color-white);
}
.sidebar-item.active .sidebar-badge,
.sidebar-item.featured .sidebar-badge,
.sidebar-item.featured.active .sidebar-badge { background: var(--color-danger); color: var(--color-white); }
.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; }

/* ============================================================
   侧栏统一浅色覆盖（2026-07-24）
   撤销上方「后台组件」区块的深色侧栏 restyle，回归项目浅色 UI 铁律：
   白底 + 细描边 + 中等字号，与内容区/其他菜单视觉一致。
   如需回退深色，删除本段即可恢复 design-system.css 原深色侧栏。
   ============================================================ */
.sidebar {
  background: #fff;
  color: var(--text, #1a1a2e);
  border-right: 1px solid var(--border, #e5e7eb);
  box-shadow: none;
  padding-top: 20px;
  display: block;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: var(--text-sec, #6b7280);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  text-shadow: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sidebar-item .ico {
  width: 20px;
  height: 20px;
  color: var(--text-sec, #6b7280);
  flex: none;
}
.sidebar-item:hover { background: var(--border-light, #f3f4f6); color: var(--text, #1a1a2e); }
.sidebar-item:hover .ico { color: var(--text, #1a1a2e); }
.sidebar-item.active {
  color: var(--primary-light, #4361ee);
  background: var(--primary-glow, rgba(67, 97, 238, 0.15));
  border-left-color: var(--primary-light, #4361ee);
  font-weight: 600;
  text-shadow: none;
}
.sidebar-item.active .ico { color: var(--primary-light, #4361ee); }
.sidebar-item.featured,
.sidebar-item.featured.active {
  background: var(--primary-glow, rgba(67, 97, 238, 0.15));
  color: var(--primary-light, #4361ee);
  border-left-color: var(--primary-light, #4361ee);
}
.sidebar-item.featured .ico,
.sidebar-item.featured.active .ico { color: var(--primary-light, #4361ee); }
.sidebar-item.featured:hover { background: var(--primary-glow, rgba(67, 97, 238, 0.15)); }
.sidebar-section { border-top: 1px solid var(--border-light, #f3f4f6); }
.sidebar-section-title {
  color: var(--text-muted, #9ca3af);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 16px;
  border-top: 1px solid var(--border-light, #f3f4f6);
}
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: auto;
  padding: 2px 8px;
  margin-left: auto;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--danger, #ef4444);
  color: #fff;
}

/* ====================================================================
   响应式表格（v1.5 2026-07-24 客户反馈"窄屏表格被压坏、按钮被切"）
   - .data-table-wrap 外层容器：横向可滚 + 容器查询驱动列折叠
   - .col-priority-2 / .col-priority-3：次要列分级（3=最先折叠，2=次之）
   - .row-toggle：行首三角按钮，配合 .row-detail-row 展开次要字段
   - 不用视口媒体查询：容器查询（@container）让每张表根据自己可用宽度
     决定何时折叠，不受外层布局影响（即"动态阈值"）
   ==================================================================== */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  container-type: inline-size;
}
.data-table { min-width: 100%; }
.row-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--color-primary-500);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  border-radius: 4px;
  transition: transform .15s, background .15s, color .15s;
  user-select: none;
}
.row-toggle:hover { background: var(--bg-sec); }
.row-toggle[aria-expanded="true"] { transform: rotate(90deg); }
.row-detail-row.hidden { display: none; }
/* 容器查询：表格自身宽度 < 1100px 时，折叠 col-priority-3 列 */
@container (max-width: 1100px) {
  th.col-priority-3,
  td.col-priority-3 { display: none; }
}
/* 表格自身宽度 < 760px 时，再折叠 col-priority-2 列 */
@container (max-width: 760px) {
  th.col-priority-2,
  td.col-priority-2 { display: none; }
  .row-toggle { padding: 6px 8px; }
}
/* 按角色自適應：非主賬號（staff/manager/regional）隱藏成本/利潤等敏感列
   main.js 依角色在 <body> 加 .hide-sensitive；主賬號默認顯示，可用工具條手動隱藏 */
body.hide-sensitive .col-sensitive { display: none !important; }

/* 表格工具條（左下角浮動：一鍵展開全部 / 成本利潤開關） */
.rd-toolbar {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9000;
  display: flex;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.rd-toolbar .btn { font-size: 12px; padding: 4px 10px; }

/* 移动端：行展开详情的样式 */
.row-detail-content {
  padding: 10px 14px;
  background: var(--bg-sec, #f5f5f7);
  font-size: 13px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 16px;
  border-radius: 4px;
  margin: 4px 0;
}
.row-detail-content > div { display: flex; gap: 6px; }
.row-detail-content > div > .lbl {
  color: var(--text-sec);
  min-width: 60px;
}