/* ============================================================
   考核系统 · 主题系统
   三套主题通过 <html data-theme="..."> 切换
   云白(默认) / 曜夜(暗色) / 青瓷
   ============================================================ */

/* ---------- 默认主题：云白（清爽偏白） ---------- */
:root,
[data-theme='cloud'] {
  color-scheme: light;

  --bg-0: #f4f6fa;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #eef1f6;
  --bg-hover: #e6ebf3;

  --line: rgba(15, 30, 60, .09);
  --line-strong: rgba(15, 30, 60, .16);

  --text-1: #131a28;
  --text-2: #55617a;
  --text-3: #8b95aa;

  --brand: #2f6bff;
  --brand-2: #6d4dff;
  --brand-soft: rgba(47, 107, 255, .10);
  --brand-line: rgba(47, 107, 255, .34);
  --grad: linear-gradient(135deg, #2f6bff 0%, #6d4dff 100%);
  --grad-soft: linear-gradient(135deg, rgba(47,107,255,.12) 0%, rgba(109,77,255,.12) 100%);

  --ok: #0fa968;
  --ok-soft: rgba(15, 169, 104, .12);
  --warn: #d98207;
  --warn-soft: rgba(217, 130, 7, .12);
  --danger: #e23a52;
  --danger-soft: rgba(226, 58, 82, .10);

  --sh-1: 0 1px 2px rgba(15, 30, 60, .06);
  --sh-2: 0 2px 10px rgba(15, 30, 60, .07);
  --sh-3: 0 12px 36px rgba(15, 30, 60, .14);
  --glow: 0 0 0 1px var(--brand-line), 0 6px 22px rgba(47, 107, 255, .16);

  --atmo-1: rgba(47, 107, 255, .13);
  --atmo-2: rgba(109, 77, 255, .11);
  --atmo-3: rgba(15, 169, 104, .07);
  --mark-text: #fff;
  --scroll-thumb: #c8d2e2;

  /* 顶栏/悬浮层 */
  --topbar-bg: rgba(255,255,255,.82);
  --float-bg: rgba(255,255,255,.94);

  /* 遮罩与描边 */
  --mask: rgba(15, 30, 60, .38);
  --mask-strong: rgba(15, 30, 60, .62);
  --auth-panel-1: rgba(255, 255, 255, .55);
  --auth-panel-2: rgba(244, 246, 250, .92);
  --danger-line: rgba(226, 58, 82, .28);
  --ok-line: rgba(15, 169, 104, .28);
  --warn-line: rgba(217, 130, 7, .28);

  /* 语义文字色（浅底需深字） */
  --brand-text: #1d4fd8;
  --ok-text: #06794a;
  --warn-text: #9a5a00;
  --danger-text: #b8213a;
  --brand-glow: rgba(47, 107, 255, .26);
  --btn-text: #fff;
}

/* ---------- 主题：曜夜（原暗色） ---------- */
[data-theme='night'] {
  color-scheme: dark;

  --bg-0: #080b14;
  --bg-1: #0d1220;
  --bg-2: #131a2c;
  --bg-3: #1a2338;
  --bg-hover: #202b45;

  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);

  --text-1: #eef2fb;
  --text-2: #a8b3cd;
  --text-3: #6b7793;

  --brand: #4f7cff;
  --brand-2: #7c5cff;
  --brand-soft: rgba(79, 124, 255, .14);
  --brand-line: rgba(79, 124, 255, .38);
  --grad: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
  --grad-soft: linear-gradient(135deg, rgba(79,124,255,.16) 0%, rgba(124,92,255,.16) 100%);

  --ok: #24c98b;
  --ok-soft: rgba(36, 201, 139, .14);
  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, .14);
  --danger: #ff5c72;
  --danger-soft: rgba(255, 92, 114, .14);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 8px 24px rgba(0, 0, 0, .35);
  --sh-3: 0 20px 50px rgba(0, 0, 0, .45);
  --glow: 0 0 0 1px var(--brand-line), 0 8px 30px rgba(79, 124, 255, .2);

  --atmo-1: rgba(79, 124, 255, .16);
  --atmo-2: rgba(124, 92, 255, .13);
  --atmo-3: rgba(36, 201, 139, .07);
  --mark-text: #fff;
  --scroll-thumb: #2c3a5c;

  /* 顶栏/悬浮层 */
  --topbar-bg: rgba(13,18,32,.8);
  --float-bg: rgba(13,18,32,.95);

  /* 遮罩与描边 */
  --mask: rgba(4, 7, 14, .74);
  --mask-strong: rgba(4, 7, 14, .86);
  --auth-panel-1: rgba(19, 26, 44, .5);
  --auth-panel-2: rgba(8, 11, 20, .9);
  --danger-line: rgba(255, 92, 114, .3);
  --ok-line: rgba(36, 201, 139, .3);
  --warn-line: rgba(255, 176, 32, .3);

  /* 语义文字色（深底需浅字） */
  --brand-text: #b9caff;
  --ok-text: #9df0cd;
  --warn-text: #ffd89a;
  --danger-text: #ffc2ca;
  --brand-glow: rgba(79, 124, 255, .35);
  --btn-text: #fff;
}

/* ---------- 主题：青瓷（淡雅青绿） ---------- */
[data-theme='celadon'] {
  color-scheme: light;

  --bg-0: #eef4f2;
  --bg-1: #ffffff;
  --bg-2: #fbfdfc;
  --bg-3: #e4edea;
  --bg-hover: #d9e7e3;

  --line: rgba(20, 60, 55, .10);
  --line-strong: rgba(20, 60, 55, .18);

  --text-1: #10231f;
  --text-2: #4a625c;
  --text-3: #82968f;

  --brand: #0f9488;
  --brand-2: #4a7f3f;
  --brand-soft: rgba(15, 148, 136, .11);
  --brand-line: rgba(15, 148, 136, .34);
  --grad: linear-gradient(135deg, #0f9488 0%, #4a7f3f 100%);
  --grad-soft: linear-gradient(135deg, rgba(15,148,136,.13) 0%, rgba(74,127,63,.13) 100%);

  --ok: #2d8a4e;
  --ok-soft: rgba(45, 138, 78, .12);
  --warn: #c07806;
  --warn-soft: rgba(192, 120, 6, .12);
  --danger: #cf4058;
  --danger-soft: rgba(207, 64, 88, .10);

  --sh-1: 0 1px 2px rgba(20, 60, 55, .06);
  --sh-2: 0 2px 10px rgba(20, 60, 55, .08);
  --sh-3: 0 12px 36px rgba(20, 60, 55, .15);
  --glow: 0 0 0 1px var(--brand-line), 0 6px 22px rgba(15, 148, 136, .16);

  --atmo-1: rgba(15, 148, 136, .13);
  --atmo-2: rgba(74, 127, 63, .10);
  --atmo-3: rgba(45, 138, 78, .07);
  --mark-text: #fff;
  --scroll-thumb: #c3d6d1;

  /* 顶栏/悬浮层 */
  --topbar-bg: rgba(255,255,255,.82);
  --float-bg: rgba(255,255,255,.94);

  /* 遮罩与描边 */
  --mask: rgba(16, 35, 31, .34);
  --mask-strong: rgba(16, 35, 31, .58);
  --auth-panel-1: rgba(255, 255, 255, .6);
  --auth-panel-2: rgba(238, 244, 242, .92);
  --danger-line: rgba(207, 64, 88, .28);
  --ok-line: rgba(45, 138, 78, .28);
  --warn-line: rgba(192, 120, 6, .28);

  /* 语义文字色（浅底需深字） */
  --brand-text: #0a6f66;
  --ok-text: #1f6b3b;
  --warn-text: #8a5400;
  --danger-text: #a82c42;
  --brand-glow: rgba(15, 148, 136, .26);
  --btn-text: #fff;
}

/* ---------- 主题切换控件 ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  flex-shrink: 0;
}
.theme-dot {
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  position: relative;
}
/* 每个圆点用双色分割表示该主题的代表色 */
.theme-dot[data-theme='cloud']   { background: linear-gradient(90deg, #ffffff 50%, #2f6bff 50%); }
.theme-dot[data-theme='night']   { background: linear-gradient(90deg, #0d1220 50%, #7c5cff 50%); }
.theme-dot[data-theme='celadon'] { background: linear-gradient(90deg, #ffffff 50%, #0f9488 50%); }

.theme-dot:hover { transform: scale(1.12); box-shadow: 0 2px 9px rgba(0, 0, 0, .2); }
.theme-dot.on {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
/* 选中态内圈描边，浅色主题下也能看清 */
.theme-dot.on::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid var(--bg-1);
}

@media (max-width: 640px) {
  .theme-dot { width: 28px; height: 28px; }
}