/* base.css — 全局变量 + 主题族 + reset */
:root {
  /* 共享尺寸 */
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --tabbar-h: 0px;
  --gutter: clamp(12px, 1.6vw, 22px);
  --warn: #e3a248;
  --err: #ff7b7b;
  font-size: clamp(13px, 1.05vw, 15px);

  /* 默认主题 = daylight（极简日光 · 纯白） */
  --bg: #ffffff; --bg-elev: #ffffff;
  --panel: rgba(247, 248, 252, .85);
  --panel-border: rgba(20, 30, 70, .08);
  --primary: #4855e0; --primary-2: #6671ff;
  --accent: #1fb572;
  --text: #1a2238; --muted: #5b6480;
  --topbar-bg: rgba(255, 255, 255, .85);
  --tabbar-bg: rgba(255, 255, 255, .96);
  --glow-a: rgba(70, 80, 200, .04);
  --glow-b: rgba(120, 130, 200, .03);
  --shadow: 0 8px 24px rgba(20, 30, 70, .08);
  --hover-bg: rgba(20, 30, 70, .04);
  --input-bg: rgba(20, 30, 70, .04);
  --track-bg: rgba(20, 30, 70, .06);
  --code-bg: rgba(20, 30, 70, .05);
  --scroll-thumb: rgba(60, 72, 130, .25);
  --on-primary: #ffffff;

  /* 语义色（状态/反馈，与主题主色解耦） */
  --success: #22c55e;
  --danger: var(--err);
  --warning: var(--warn);

  /* 主色衍生（随 --primary / --primary-2 自动适配全部主题） */
  --primary-gradient: linear-gradient(135deg, var(--primary), var(--primary-2));
  --primary-gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary-2) 12%, transparent));
  --primary-gradient-panel: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--primary-2) 6%, transparent));
  --primary-gradient-toolbar: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), color-mix(in srgb, var(--primary-2) 4%, transparent));
  --primary-gradient-hero: linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--primary-2) 20%, transparent));
  --primary-a04: color-mix(in srgb, var(--primary) 4%, transparent);
  --primary-a06: color-mix(in srgb, var(--primary) 6%, transparent);
  --primary-a08: color-mix(in srgb, var(--primary) 8%, transparent);
  --primary-a10: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-a12: color-mix(in srgb, var(--primary) 12%, transparent);
  --primary-a14: color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-a18: color-mix(in srgb, var(--primary) 18%, transparent);
  --primary-a20: color-mix(in srgb, var(--primary) 20%, transparent);
  --primary-a25: color-mix(in srgb, var(--primary) 25%, transparent);
  --primary-a30: color-mix(in srgb, var(--primary) 30%, transparent);
  --primary-a35: color-mix(in srgb, var(--primary) 35%, transparent);
  --primary-a40: color-mix(in srgb, var(--primary) 40%, transparent);
  --primary-a45: color-mix(in srgb, var(--primary) 45%, transparent);
  --primary-a50: color-mix(in srgb, var(--primary) 50%, transparent);
  --primary-a60: color-mix(in srgb, var(--primary) 60%, transparent);
  --primary-2-a18: color-mix(in srgb, var(--primary-2) 18%, transparent);
  --success-soft: color-mix(in srgb, var(--success) 18%, transparent);
  --success-border: color-mix(in srgb, var(--success) 35%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 35%, transparent);
  --warn-soft: color-mix(in srgb, var(--warning) 18%, transparent);
  --warn-border: color-mix(in srgb, var(--warning) 35%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ====== 共享暗色主题尺寸 ====== */
[data-theme="midnight"], [data-theme="aurora"], [data-theme="sunset"], [data-theme="amber"], [data-theme="rose"], [data-theme="carbon"] {
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
  --hover-bg: rgba(255, 255, 255, .045);
  --input-bg: rgba(0, 0, 0, .32);
  --track-bg: rgba(0, 0, 0, .36);
  --code-bg: rgba(0, 0, 0, .36);
  --scroll-thumb: rgba(255, 255, 255, .08);
  --on-primary: #0a0f1e;
}

[data-theme="midnight"] {
  --bg: #0c1238; --bg-elev: #131a45;
  --panel: rgba(28, 36, 88, .58);
  --panel-border: rgba(140, 160, 240, .18);
  --primary: #7c8cff; --primary-2: #b780ff;
  --accent: #5dd39e;
  --text: #e7ebff; --muted: #8895c0;
  --topbar-bg: rgba(12, 18, 56, .78);
  --tabbar-bg: rgba(12, 18, 56, .96);
  --glow-a: rgba(124, 140, 255, .32);
  --glow-b: rgba(183, 128, 255, .26);
}
[data-theme="aurora"] {
  --bg: #003a36; --bg-elev: #015149;
  --panel: rgba(10, 80, 72, .7);
  --panel-border: rgba(120, 220, 200, .26);
  --primary: #5dd39e; --primary-2: #39a0b8;
  --accent: #9bf3c7;
  --text: #e6fcf3; --muted: #98ccc2;
  --topbar-bg: rgba(0, 58, 54, .85);
  --tabbar-bg: rgba(0, 58, 54, .96);
  --glow-a: rgba(93, 211, 158, .42);
  --glow-b: rgba(57, 160, 184, .36);
  --hover-bg: rgba(120, 220, 200, .07);
  --input-bg: rgba(10, 70, 64, .55);
  --track-bg: rgba(10, 70, 64, .7);
  --code-bg: rgba(0, 36, 32, .55);
  --scroll-thumb: rgba(120, 220, 200, .22);
}
[data-theme="sunset"] {
  --bg: #4a0d1a; --bg-elev: #5f1426;
  --panel: rgba(110, 32, 50, .68);
  --panel-border: rgba(255, 155, 110, .28);
  --primary: #ff9b6e; --primary-2: #ff5b81;
  --accent: #ffd166;
  --text: #fff1e9; --muted: #e6b6c0;
  --topbar-bg: rgba(74, 13, 26, .85);
  --tabbar-bg: rgba(74, 13, 26, .96);
  --glow-a: rgba(255, 155, 110, .42);
  --glow-b: rgba(255, 91, 129, .38);
  --hover-bg: rgba(255, 155, 110, .08);
  --input-bg: rgba(110, 32, 50, .55);
  --track-bg: rgba(110, 32, 50, .7);
  --code-bg: rgba(56, 10, 20, .55);
  --scroll-thumb: rgba(255, 155, 110, .25);
}
[data-theme="amber"] {
  --bg: #3d2e05; --bg-elev: #503e0a;
  --panel: rgba(105, 78, 18, .68);
  --panel-border: rgba(255, 209, 102, .3);
  --primary: #ffce6e; --primary-2: #ff9b3d;
  --accent: #ffec99;
  --text: #fff8e6; --muted: #dcc99a;
  --topbar-bg: rgba(61, 46, 5, .85);
  --tabbar-bg: rgba(61, 46, 5, .96);
  --glow-a: rgba(255, 209, 102, .44);
  --glow-b: rgba(255, 155, 60, .4);
  --hover-bg: rgba(255, 209, 102, .08);
  --input-bg: rgba(105, 78, 18, .55);
  --track-bg: rgba(105, 78, 18, .7);
  --code-bg: rgba(48, 36, 0, .55);
  --scroll-thumb: rgba(255, 209, 102, .26);
}
[data-theme="rose"] {
  --bg: #420f4f; --bg-elev: #561768;
  --panel: rgba(100, 32, 128, .68);
  --panel-border: rgba(255, 123, 177, .28);
  --primary: #ff7bb1; --primary-2: #b780ff;
  --accent: #ffce6e;
  --text: #fbe7f4; --muted: #d4b4e0;
  --topbar-bg: rgba(66, 15, 79, .85);
  --tabbar-bg: rgba(66, 15, 79, .96);
  --glow-a: rgba(255, 123, 177, .44);
  --glow-b: rgba(183, 128, 255, .4);
  --hover-bg: rgba(255, 123, 177, .08);
  --input-bg: rgba(100, 32, 128, .55);
  --track-bg: rgba(100, 32, 128, .7);
  --code-bg: rgba(50, 12, 60, .55);
  --scroll-thumb: rgba(255, 123, 177, .26);
}
[data-theme="carbon"] {
  --bg: #0d0f14; --bg-elev: #15181f;
  --panel: rgba(34, 36, 44, .62);
  --panel-border: rgba(180, 190, 220, .14);
  --primary: #9aa3c2; --primary-2: #6b76a8;
  --accent: #c8d0ec;
  --text: #eef0f6; --muted: #8a92a8;
  --topbar-bg: rgba(13, 15, 20, .82);
  --tabbar-bg: rgba(13, 15, 20, .96);
  --glow-a: rgba(154, 163, 194, .14);
  --glow-b: rgba(107, 118, 168, .14);
}
[data-theme="daylight"] {
  --bg: #f4f5f9; --bg-elev: #ffffff;
  --panel: #ffffff;
  --panel-border: rgba(0, 0, 0, .03);
  --primary: #3b82f6; --primary-2: #2563eb;
  --accent: #1fb572;
  --text: #1f2937; --muted: #6b7280;
  --topbar-bg: rgba(244, 245, 249, .9);
  --tabbar-bg: rgba(255, 255, 255, .98);
  --glow-a: transparent;
  --glow-b: transparent;
  --shadow: 0 4px 16px rgba(0, 0, 0, .03);
  --hover-bg: rgba(0, 0, 0, .03);
  --input-bg: rgba(0, 0, 0, .03);
  --track-bg: rgba(0, 0, 0, .05);
  --code-bg: rgba(0, 0, 0, .03);
  --scroll-thumb: rgba(0, 0, 0, .15);
  --on-primary: #ffffff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background-color: var(--bg);
  color: var(--text);
}
body {
  background-image:
    radial-gradient(1200px 800px at 80% -10%, var(--glow-a), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, var(--glow-b), transparent 60%);
  background-attachment: fixed;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
  transition: background-color .3s ease, color .2s ease;
}
/* 移动端：光斑半径更小并集中，避免在小屏被裁剪到视口外看不见 */
@media (max-width: 767px) {
  body {
    background-image:
      radial-gradient(80vw 60vw at 90% 0%, var(--glow-a), transparent 65%),
      radial-gradient(80vw 60vw at 0% 100%, var(--glow-b), transparent 65%);
  }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; margin: 0; }

/* 全局隐藏滚动条，保留滚动能力（主内容、侧栏、弹窗、子页面等） */
*,
*::before,
*::after {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}