/* ============================================
   设计系统 Token — 单一定义源
   暗色/亮色主题完整适配，高对比度可读性优先
   ============================================ */

/* ── 全局过渡 ── */
html {
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── 文字选中色 ── */
::selection {
  background: #6C5CE7;
  color: #fff;
}
[data-theme="light"] ::selection {
  background: #2563eb;
  color: #fff;
}

/* ========================================
   暗色主题（默认）
   ======================================== */
:root {
  /* ── 主色 ── */
  --color-primary: #7C6FF7;
  --color-primary-light: #A29BFE;
  --color-primary-dark: #5B4ECC;
  --color-primary-bg: rgba(124, 111, 247, 0.12);

  /* ── 功能色 ── */
  --color-success: #00C896;
  --color-success-bg: rgba(0, 200, 150, 0.12);
  --color-warning: #F6C343;
  --color-warning-bg: rgba(246, 195, 67, 0.12);
  --color-danger: #FF6B6B;
  --color-danger-bg: rgba(255, 107, 107, 0.12);
  --color-info: #64B5F6;

  /* ── 中性色（暗色主题） ── */
  --color-bg: #0C0E14;
  --color-bg-secondary: #0F1119;
  --color-surface: #131620;
  --color-surface-hover: rgba(255, 255, 255, 0.05);
  --color-border: #1E2130;
  --color-border-light: rgba(30, 33, 48, 0.7);
  --color-text: #E8E8F0;
  --color-text-secondary: #A0A0B8;
  --color-text-muted: #6B6E80;

  /* ── 间距 ── */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;
  --space-xxxxl: 40px;

  /* ── 圆角 ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── 阴影 ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03) inset;

  /* ── 字体 ── */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 18px;
  --font-size-xxl: 22px;
  --font-size-xxxl: 28px;

  /* ── 过渡 ── */
  --transition: 0.2s ease;

  /* ── 别名兼容 ── */
  --gradient-brand: linear-gradient(135deg, #7C6FF7, #A29BFE);
  --bg-surface: var(--color-surface);
  --border-subtle: var(--color-border-light);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-primary);
  --bg-input: var(--color-bg-secondary);
  --bg-root: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --bg-card: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --bg-app: var(--color-bg);
  --font-sm: var(--font-size-sm);
  --font-body: var(--font-size-base);
  --font-h3: var(--font-size-xl);
  --error: var(--color-danger);
  --border: var(--color-border);
  --border-color: var(--color-border);
  --text: var(--color-text);
}

/* ========================================
   亮色主题
   ======================================== */
[data-theme="light"] {
  --color-primary: #5B4ECC;
  --color-primary-light: #7C6FF7;
  --color-primary-dark: #4032B3;
  --color-primary-bg: rgba(91, 78, 204, 0.08);

  --color-bg: #F2F4F7;
  --color-bg-secondary: #E8EAF0;
  --color-surface: #FFFFFF;
  --color-surface-hover: rgba(91, 78, 204, 0.05);
  --color-border: #D4D8E0;
  --color-border-light: rgba(212, 216, 224, 0.8);
  --color-text: #1A1A2E;
  --color-text-secondary: #505570;
  --color-text-muted: #8085A0;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04) inset;

  --gradient-brand: linear-gradient(135deg, #5B4ECC, #7C6FF7);

  --bg-surface: var(--color-surface);
  --border-subtle: var(--color-border-light);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-primary);
  --bg-input: var(--color-bg-secondary);
  --bg-root: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --bg-card: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --bg-app: var(--color-bg);

  --border: var(--color-border);
  --border-color: var(--color-border);
  --text: var(--color-text);
  --error: var(--color-danger);
  --font-sm: var(--font-size-sm);
  --font-body: var(--font-size-base);
  --font-h3: var(--font-size-xl);
}

/* ========================================
   超管端暗色主题
   ======================================== */
body.admin-console {
  --color-primary: #E8553D;
  --color-primary-light: #F07B6A;
  --color-primary-dark: #C0392B;
  --color-primary-bg: rgba(232, 85, 61, 0.12);
  --color-bg: #120A08;
  --color-bg-secondary: #150C0A;
  --color-surface: #1E1210;
  --color-surface-hover: rgba(232, 85, 61, 0.06);
  --color-border: #2E1E1C;
  --color-border-light: rgba(46, 30, 28, 0.7);
  --gradient-brand: linear-gradient(135deg, #E8553D, #F07B6A);
  --accent-primary: var(--color-primary);
  --bg-surface: var(--color-surface);
  --bg-input: var(--color-bg-secondary);
  --bg-root: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --bg-card: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --bg-app: var(--color-bg);
  --border-subtle: rgba(46, 30, 28, 0.7);
  --border: var(--color-border);
  --border-color: var(--color-border);
}

body.admin-console .sidebar-brand { border-bottom-color: var(--color-primary); }
body.admin-console .sidebar-link.active { background: var(--color-primary); }
body.admin-console .sidebar-section-label { color: var(--color-primary-light); }
body.admin-console .btn-primary { background: var(--color-primary); }
body.admin-console .btn-primary:hover { background: var(--color-primary-dark); }
body.admin-console .identity-bar { background: linear-gradient(90deg, #E8553D, #F07B6A); }

/* ── 超管端亮色主题 ── */
[data-theme="light"] body.admin-console {
  --color-primary: #DC3545;
  --color-primary-light: #E74C3C;
  --color-primary-dark: #B02A37;
  --color-primary-bg: rgba(220, 53, 69, 0.08);
  --color-bg: #FEF5F5;
  --color-bg-secondary: #FDE8E8;
  --color-surface: #FFFFFF;
  --color-surface-hover: rgba(220, 53, 69, 0.05);
  --color-border: #F5C6CB;
  --color-border-light: rgba(245, 198, 203, 0.8);
  --color-text: #1A1A2E;
  --color-text-secondary: #505570;
  --color-text-muted: #8085A0;
  --gradient-brand: linear-gradient(135deg, #DC3545, #E74C3C);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04) inset;
  --accent-primary: var(--color-primary);
  --bg-surface: var(--color-surface);
  --bg-input: var(--color-bg-secondary);
  --bg-root: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --bg-card: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --bg-app: var(--color-bg);
  --border-subtle: rgba(245, 198, 203, 0.8);
  --border: var(--color-border);
  --border-color: var(--color-border);
  --text: var(--color-text);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
}
[data-theme="light"] body.admin-console .identity-bar { background: linear-gradient(90deg, #DC3545, #E74C3C); }

/* ========================================
   租户端暗色主题
   ======================================== */
body.tenant-console {
  --color-primary: #3B82F6;
  --color-primary-light: #60A5FA;
  --color-primary-dark: #2563EB;
  --color-primary-bg: rgba(59, 130, 246, 0.12);
  --color-bg: #0A101A;
  --color-bg-secondary: #0C131F;
  --color-surface: #111827;
  --color-surface-hover: rgba(59, 130, 246, 0.06);
  --color-border: #1E293B;
  --color-border-light: rgba(30, 41, 59, 0.7);
  --gradient-brand: linear-gradient(135deg, #3B82F6, #60A5FA);
  --accent-primary: var(--color-primary);
  --bg-surface: var(--color-surface);
  --bg-input: var(--color-bg-secondary);
  --bg-root: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --bg-card: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --bg-app: var(--color-bg);
  --border-subtle: rgba(30, 41, 59, 0.7);
  --border: var(--color-border);
  --border-color: var(--color-border);

  --tenant-accent: var(--color-primary);
  --tenant-accent-light: var(--color-primary-light);
}

body.tenant-console .sidebar-brand { border-bottom-color: var(--color-primary); }
body.tenant-console .sidebar-link.active { background: var(--color-primary); color: #fff; }
body.tenant-console .sidebar-section-label { color: var(--color-primary-light); }
body.tenant-console .btn-primary { background: var(--color-primary); }
body.tenant-console .btn-primary:hover { background: var(--color-primary-dark); }
body.tenant-console .identity-bar { background: linear-gradient(90deg, #2563EB, #3B82F6); }

/* ── 租户端亮色主题 ── */
[data-theme="light"] body.tenant-console {
  --color-primary: #2563EB;
  --color-primary-light: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-primary-bg: rgba(37, 99, 235, 0.08);
  --color-bg: #F0F4FA;
  --color-bg-secondary: #E2E8F0;
  --color-surface: #FFFFFF;
  --color-surface-hover: rgba(37, 99, 235, 0.05);
  --color-border: #CBD5E1;
  --color-border-light: rgba(203, 213, 225, 0.8);
  --color-text: #1A1A2E;
  --color-text-secondary: #505570;
  --color-text-muted: #8085A0;
  --gradient-brand: linear-gradient(135deg, #2563EB, #3B82F6);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04) inset;
  --accent-primary: var(--color-primary);
  --bg-surface: var(--color-surface);
  --bg-input: var(--color-bg-secondary);
  --bg-root: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --bg-card: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --bg-app: var(--color-bg);
  --border-subtle: rgba(203, 213, 225, 0.8);
  --border: var(--color-border);
  --border-color: var(--color-border);
  --text: var(--color-text);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --tenant-accent: var(--color-primary);
  --tenant-accent-light: var(--color-primary-light);
}
[data-theme="light"] body.tenant-console .sidebar-link.active { background: var(--color-primary); color: #fff; }
[data-theme="light"] body.tenant-console .identity-bar { background: linear-gradient(90deg, #1D4ED8, #2563EB); }

/* ── 全局重置 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: var(--color-primary-light); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--color-primary); text-decoration: underline; }

/* ── 身份条通用样式 ── */
.identity-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 26px; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 11px; font-weight: 600; color: #fff;
  letter-spacing: 1.5px; backdrop-filter: blur(8px);
}
.identity-bar .dot {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.8);
  animation: dot-pulse 2s infinite;
}
@keyframes dot-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.app-layout { padding-top: 26px; }