/* ==================================================================
   themes.css — 云上公学·地理实验室 · 主题层（V9.2）
   ------------------------------------------------------------------
   加载顺序：base.css（现状基线，唯一视觉来源）→ 本文件 → pages/*.css。
   机制：html[data-theme="<id>"] 覆盖 :root token + 少量组件签名规则，
   组件 DOM 完全复用 base.css——改 token 一处、全站生效。
   默认不设 data-theme = 现状基线；由 theme.js 依用户选择
   （localStorage.gl_theme，仅本机）设置。风格画廊页复用本文件。
   （"暗色科技"已按 2026-09-28 评审意见移除——学生主要在教室/
   手机亮色环境使用。其中 .gal-* 规则仅风格画廊页存在对应类。）
   ================================================================== */

/* ==================================================================
   主题 1：测绘蓝图（借鉴 工程制图 / USGS 地形图 / 野簿记录）
   ================================================================== */
html[data-theme="blueprint"] {
  --g-bg: #f3f6f7; --g-surface: #ffffff; --g-surface-2: #eef4f6; --g-surface-3: #e6eef1;
  --g-ink: #0e3440; --g-ink-2: #2d5b6e; --g-mute: #4f7585; --g-mute-2: #8fb0bc;
  --g-line: rgba(14,80,100,0.28); --g-line-2: rgba(14,80,100,0.13);
  --g-primary: #0e7490;
  --g-grad: linear-gradient(135deg, #0d6e8a, #0e7490);
  --g-grad-hover: linear-gradient(135deg, #0a5d75, #0c6580);
  --g-grad-ink: linear-gradient(115deg, #0e3440 0%, #0e7490 55%, #0891b2 90%);
  --g-primary-soft: rgba(14,116,144,0.10); --g-primary-soft-2: rgba(8,145,178,0.08);
  --g-ok: #047857; --g-ok-bg: #ecfdf5;
  --g-warn: #b45309; --g-warn-bg: #fffbeb;
  --g-danger: #b91c1c; --g-danger-bg: #fef2f2; --g-danger-2: #f87171;
  --g-info: #0369a1; --g-info-bg: #f0f9ff;
  --g-exams: #0e7490; --g-exams-bg: #e0f2f7;
  --g-knowledge: #0f766e; --g-knowledge-2: #14b8a6; --g-knowledge-bg: #ebf7f4;
  --g-tasks: #0891b2; --g-tasks-2: #22d3ee; --g-tasks-bg: #e3f6fa;
  --g-wash-1: linear-gradient(135deg, #e0f2f7, #d6ecf3);
  --g-wash-2: linear-gradient(135deg, #dcf0ec, #d3ecf2);
  --g-wash-3: linear-gradient(135deg, #d8f0f5, #d6ecf3);
  --g-wash-4: linear-gradient(135deg, #e2f1f6, #dbeff4);
  --g-r-sm: 5px; --g-r-md: 7px; --g-r-lg: 9px; --g-r-xl: 12px;
  --g-sh-sm: 0 1px 0 rgba(14,80,100,0.08);
  --g-sh-md: 0 2px 0 rgba(14,80,100,0.10);
  --g-sh-lg: 0 3px 0 rgba(14,80,100,0.12);
  --g-sh-primary: 0 2px 0 rgba(10,93,117,0.45);
  --g-sh-primary-hover: 0 3px 0 rgba(10,93,117,0.5);
}
html[data-theme="blueprint"] body::before {
  background-image:
    linear-gradient(to right, rgba(14,116,144,0.17) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,116,144,0.17) 1px, transparent 1px),
    linear-gradient(to right, rgba(14,116,144,0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,116,144,0.075) 1px, transparent 1px);
}
html[data-theme="blueprint"] body::after { display: none; }
html[data-theme="blueprint"] .nav-bar {
  background: rgba(255,255,255,0.94); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 2px solid var(--g-ink); box-shadow: 0 1px 0 rgba(14,80,100,0.15);
}
html[data-theme="blueprint"] .card, html[data-theme="blueprint"] .stat-card {
  border: 1px solid rgba(14,80,100,0.45);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(14,116,144,0.30), 0 1px 0 rgba(14,80,100,0.08);
}
html[data-theme="blueprint"] .btn:not(.btn-outline):not(.btn-danger):not(.btn-ghost),
html[data-theme="blueprint"] .btn-primary {
  background: var(--g-primary); border-radius: 6px;
  box-shadow: 0 2px 0 var(--g-ink);
}
html[data-theme="blueprint"] .btn:not(.btn-outline):not(.btn-danger):not(.btn-ghost):hover,
html[data-theme="blueprint"] .btn-primary:hover:not(:disabled) {
  transform: translateY(1px); box-shadow: 0 1px 0 var(--g-ink);
}
html[data-theme="blueprint"] .btn-outline, html[data-theme="blueprint"] .btn-danger, html[data-theme="blueprint"] .btn-ghost {
  border-radius: 6px; box-shadow: 0 2px 0 rgba(14,80,100,0.30);
}
html[data-theme="blueprint"] .chip, html[data-theme="blueprint"] .q-type, html[data-theme="blueprint"] .q-subject,
html[data-theme="blueprint"] .tag-chip, html[data-theme="blueprint"] .track-badge {
  background: transparent; border: 1px dashed rgba(14,80,100,0.55); color: var(--g-ink-2); border-radius: 4px;
}
html[data-theme="blueprint"] .q-subject { color: var(--g-primary); }
html[data-theme="blueprint"] .page-title { letter-spacing: 0.05em; }
html[data-theme="blueprint"] .gal-stats .v { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
html[data-theme="blueprint"] table.data-table th { border-bottom: 1.5px solid var(--g-ink); }

/* ==================================================================
   主题 2：学术纸感（借鉴 Notion / Medium / 教科书排版）
   ================================================================== */
html[data-theme="paper"] {
  --g-bg: #faf7f2; --g-surface: #fffefa; --g-surface-2: #f5f1e8; --g-surface-3: #eee9dd;
  --g-ink: #211d16; --g-ink-2: #4a443a; --g-mute: #716a5b; --g-mute-2: #a89f8d;
  --g-line: rgba(33,29,22,0.17); --g-line-2: rgba(33,29,22,0.09);
  --g-primary: #166534;
  --g-grad: linear-gradient(135deg, #1d6f3d, #166534);
  --g-grad-hover: linear-gradient(135deg, #175c33, #14522b);
  --g-grad-ink: linear-gradient(115deg, #211d16 0%, #3f6212 65%, #166534 95%);
  --g-primary-soft: rgba(22,101,52,0.09); --g-primary-soft-2: rgba(22,101,52,0.07);
  --g-ok: #166534; --g-ok-bg: #f0f5ec;
  --g-warn: #92400e; --g-warn-bg: #faf3e3;
  --g-danger: #b91c1c; --g-danger-bg: #fbeeec; --g-danger-2: #f87171;
  --g-info: #1e5a8a; --g-info-bg: #edf3f7;
  --g-exams: #9a3412; --g-exams-bg: #f7ede4;
  --g-knowledge: #5b21b6; --g-knowledge-2: #7c3aed; --g-knowledge-bg: #f1ecf9;
  --g-tasks: #0f766e; --g-tasks-2: #14b8a6; --g-tasks-bg: #e8f4f2;
  --g-wash-1: linear-gradient(135deg, #f1efe4, #e7ecd9);
  --g-wash-2: linear-gradient(135deg, #efe9e0, #e9e2d3);
  --g-wash-3: linear-gradient(135deg, #e9efe6, #e2ebdd);
  --g-wash-4: linear-gradient(135deg, #f0ede5, #e8e4d8);
  --g-r-sm: 6px; --g-r-md: 8px; --g-r-lg: 10px; --g-r-xl: 14px;
  --g-sh-sm: none;
  --g-sh-md: 0 1px 3px rgba(33,29,22,0.08);
  --g-sh-lg: 0 2px 6px rgba(33,29,22,0.10);
  --g-sh-primary: 0 1px 2px rgba(22,101,52,0.35);
  --g-sh-primary-hover: 0 2px 4px rgba(22,101,52,0.4);
}
html[data-theme="paper"] body::before, html[data-theme="paper"] body::after { display: none; }
html[data-theme="paper"] h1, html[data-theme="paper"] h2, html[data-theme="paper"] h3,
html[data-theme="paper"] .page-title, html[data-theme="paper"] .card-title {
  font-family: Georgia, "Times New Roman", "Songti SC", "STZhongsong", "SimSun", serif;
}
html[data-theme="paper"] .nav-bar { background: rgba(250,247,242,0.94); box-shadow: none; }
html[data-theme="paper"] .nav-brand {
  background: none; -webkit-text-fill-color: var(--g-ink); color: var(--g-ink);
  font-family: Georgia, "Songti SC", "SimSun", serif; font-weight: 700;
}
html[data-theme="paper"] .card { box-shadow: none; }
html[data-theme="paper"] .tag-chip { background: var(--g-surface-3); color: var(--g-ink-2); }
html[data-theme="paper"] .track-badge { background: var(--g-surface-3); color: var(--g-primary); box-shadow: none; }

/* ==================================================================
   主题 3：活力课堂（借鉴 Duolingo / Quizlet / Kahoot）
   ================================================================== */
html[data-theme="playful"] {
  --g-bg: #eef7ff; --g-surface: #ffffff; --g-surface-2: #f0f9ff; --g-surface-3: #e0f2fe;
  --g-ink: #0f2437; --g-ink-2: #33526b; --g-mute: #4c7189; --g-mute-2: #93b5c9;
  --g-line: rgba(15,36,55,0.15); --g-line-2: rgba(15,36,55,0.08);
  --g-primary: #2f9e44;
  --g-grad: linear-gradient(180deg, #51cf66, #2f9e44);
  --g-grad-hover: linear-gradient(180deg, #43c058, #278a3b);
  --g-grad-ink: linear-gradient(115deg, #0f2437 0%, #2f9e44 55%, #22b8cf 90%);
  --g-primary-soft: rgba(47,158,68,0.13); --g-primary-soft-2: rgba(34,184,207,0.10);
  --g-ok: #2f9e44; --g-ok-bg: #e6f7ea;
  --g-warn: #e8590c; --g-warn-bg: #fff0e3;
  --g-danger: #e03131; --g-danger-bg: #fdeaea; --g-danger-2: #ff8787;
  --g-info: #1c7ed6; --g-info-bg: #e7f5ff;
  --g-exams: #1c7ed6; --g-exams-bg: #e7f5ff;
  --g-knowledge: #7048e8; --g-knowledge-2: #9775fa; --g-knowledge-bg: #f1ecfe;
  --g-tasks: #0ca678; --g-tasks-2: #38d9a9; --g-tasks-bg: #e3f9f1;
  --g-wash-1: linear-gradient(135deg, #fff3bf, #ffe8cc);
  --g-wash-2: linear-gradient(135deg, #f3f0ff, #e7f5ff);
  --g-wash-3: linear-gradient(135deg, #e6fcf5, #e7f5ff);
  --g-wash-4: linear-gradient(135deg, #e7f5ff, #f3f0ff);
  --g-r-sm: 10px; --g-r-md: 14px; --g-r-lg: 20px; --g-r-xl: 26px;
  --g-sh-sm: 0 3px 0 rgba(15,36,55,0.08);
  --g-sh-md: 0 5px 0 rgba(15,36,55,0.10);
  --g-sh-lg: 0 8px 0 rgba(15,36,55,0.12);
  --g-sh-primary: 0 4px 0 #226e37;
  --g-sh-primary-hover: 0 2px 0 #226e37;
}
html[data-theme="playful"] body::before {
  background-image: radial-gradient(rgba(15,36,55,0.07) 2.2px, transparent 2.6px);
  background-size: 26px 26px;
}
html[data-theme="playful"] body::after { display: none; }
html[data-theme="playful"] .btn, html[data-theme="playful"] .btn-primary { border-radius: 14px; }
html[data-theme="playful"] .btn:hover, html[data-theme="playful"] .btn-primary:hover:not(:disabled) {
  transform: translateY(2px); box-shadow: 0 2px 0 #226e37;
}
html[data-theme="playful"] .btn-outline, html[data-theme="playful"] .btn-danger {
  border-width: 2px; border-radius: 14px; box-shadow: 0 3px 0 rgba(15,36,55,0.10);
}
html[data-theme="playful"] .stat-card { border: 2px solid var(--g-surface-3); }
html[data-theme="playful"] .q-type { background: #fff3bf; color: #e67700; }
html[data-theme="playful"] .q-subject { background: #e7f5ff; color: #1c7ed6; }
html[data-theme="playful"] .gal-stats .v { letter-spacing: -0.01em; }

/* ==================================================================
   主题 4：新粗野主义（借鉴 Gumroad / Figma Community）
   ================================================================== */
html[data-theme="brutal"] {
  --g-bg: #ffffff; --g-surface: #ffffff; --g-surface-2: #fafaf7; --g-surface-3: #f1f1ee;
  --g-ink: #111111; --g-ink-2: #111111; --g-mute: #4a4a4a; --g-mute-2: #8a8a8a;
  --g-line: #111111; --g-line-2: rgba(17,17,17,0.25);
  --g-primary: #111111;
  --g-grad: linear-gradient(135deg, #1a1a1a, #000000);
  --g-grad-hover: linear-gradient(135deg, #2e2e2e, #1a1a1a);
  --g-grad-ink: linear-gradient(115deg, #111, #111);
  --g-primary-soft: rgba(250,204,21,0.40); --g-primary-soft-2: rgba(250,204,21,0.30);
  --g-ok: #15803d; --g-ok-bg: #dcfce7;
  --g-warn: #a16207; --g-warn-bg: #fef9c3;
  --g-danger: #dc2626; --g-danger-bg: #fee2e2; --g-danger-2: #ef4444;
  --g-info: #1d4ed8; --g-info-bg: #dbeafe;
  --g-exams: #1d4ed8; --g-exams-bg: #dbeafe;
  --g-knowledge: #7c3aed; --g-knowledge-2: #8b5cf6; --g-knowledge-bg: #ede9fe;
  --g-tasks: #0e7490; --g-tasks-2: #06b6d4; --g-tasks-bg: #cffafe;
  --g-wash-1: linear-gradient(135deg, #fde047, #fde047);
  --g-wash-2: linear-gradient(135deg, #e9d5ff, #e9d5ff);
  --g-wash-3: linear-gradient(135deg, #a5f3fc, #a5f3fc);
  --g-wash-4: linear-gradient(135deg, #bfdbfe, #bfdbfe);
  --g-r-sm: 4px; --g-r-md: 6px; --g-r-lg: 8px; --g-r-xl: 10px;
  --g-sh-sm: 4px 4px 0 #111;
  --g-sh-md: 5px 5px 0 #111;
  --g-sh-lg: 7px 7px 0 #111;
  --g-sh-primary: 4px 4px 0 #111;
  --g-sh-primary-hover: 6px 6px 0 #111;
}
html[data-theme="brutal"] body::before, html[data-theme="brutal"] body::after { display: none; }
html[data-theme="brutal"] .nav-bar {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 2px solid #111; box-shadow: none;
}
html[data-theme="brutal"] .nav-brand { background: none; -webkit-text-fill-color: #111; color: #111; font-weight: 900; }
html[data-theme="brutal"] .card { border: 2px solid #111; }
html[data-theme="brutal"] .btn, html[data-theme="brutal"] .btn-primary,
html[data-theme="brutal"] .btn-outline, html[data-theme="brutal"] .btn-danger, html[data-theme="brutal"] .btn-ghost {
  border: 2px solid #111; border-radius: 8px; box-shadow: 3px 3px 0 #111; font-weight: 800;
}
html[data-theme="brutal"] .btn-outline { background: #fff; color: #111; }
html[data-theme="brutal"] .btn-ghost { background: #fff; color: #111; }
html[data-theme="brutal"] .btn:hover, html[data-theme="brutal"] .btn-primary:hover:not(:disabled) {
  transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #111;
}
html[data-theme="brutal"] .page-title { font-weight: 900; letter-spacing: -0.015em; }
html[data-theme="brutal"] .chip, html[data-theme="brutal"] .q-type, html[data-theme="brutal"] .q-subject,
html[data-theme="brutal"] .tag-chip, html[data-theme="brutal"] .track-badge {
  border: 1.5px solid #111; background: #fde047; color: #111; font-weight: 700;
}
html[data-theme="brutal"] .q-subject { background: #bfdbfe; }
html[data-theme="brutal"] table.data-table th { background: #fde047; border-bottom: 2px solid #111; }
html[data-theme="brutal"] input, html[data-theme="brutal"] select, html[data-theme="brutal"] textarea {
  border: 2px solid #111;
}
html[data-theme="brutal"] ::selection { background: #fde047; }

/* ==================================================================
   主题 5：渐变辉光（借鉴 Stripe / Raycast —— 现状基线的加强版）
   ================================================================== */
html[data-theme="glow"] {
  --g-bg: #f5f6ff;
  --g-grad: linear-gradient(135deg, #7c3aed, #4f46e5 48%, #0ea5e9);
  --g-grad-hover: linear-gradient(135deg, #6d28d9, #4338ca 48%, #0284c7);
  --g-grad-ink: linear-gradient(115deg, #312e81 0%, #7c3aed 45%, #0ea5e9 88%);
  --g-primary-soft: rgba(124,58,237,0.12);
  --g-sh-md: 0 2px 6px rgba(79,70,229,0.06), 0 14px 40px -14px rgba(79,70,229,0.22);
  --g-sh-lg: 0 4px 10px rgba(79,70,229,0.06), 0 24px 56px -16px rgba(79,70,229,0.32);
  --g-sh-primary: 0 8px 28px -6px rgba(124,58,237,0.5);
  --g-sh-primary-hover: 0 12px 34px -8px rgba(124,58,237,0.6);
  --g-r-lg: 18px; --g-r-xl: 24px;
}
html[data-theme="glow"] body::after {
  background:
    radial-gradient(48rem 32rem at 12% -8%, rgba(124,58,237,0.20), transparent 60%),
    radial-gradient(44rem 30rem at 88% -8%, rgba(14,165,233,0.20), transparent 62%),
    radial-gradient(36rem 28rem at 50% 8%, rgba(236,72,153,0.10), transparent 66%);
}
html[data-theme="glow"] .nav-bar {
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.9); backdrop-filter: blur(24px) saturate(1.9);
}
html[data-theme="glow"] .page-title {
  background: var(--g-grad-ink);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html[data-theme="glow"] .card {
  border-color: rgba(124,58,237,0.16);
  box-shadow: 0 1px 2px rgba(79,70,229,0.05), 0 12px 40px -18px rgba(79,70,229,0.25);
}
html[data-theme="glow"] a.gal-cardlink:hover {
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.22), 0 18px 50px -16px rgba(124,58,237,0.4);
}

/* ==================================================================
   主题选择器 UI（theme.js 注入导航栏；样式随 token，任意主题下可用）
   ================================================================== */
.theme-wrap { position: relative; flex: 0 0 auto; display: flex; }
.nav-theme-btn {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface); color: var(--g-mute); cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease);
}
.nav-theme-btn:hover { background: var(--g-primary-soft); color: var(--g-primary); border-color: var(--g-primary); }
.nav-theme-btn svg { width: 17px; height: 17px; }
.theme-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300;
  min-width: 156px; padding: var(--g-sp-2);
  background: var(--g-surface); border: 1px solid var(--g-line); border-radius: var(--g-r-md);
  box-shadow: var(--g-sh-lg);
  display: none;
}
.theme-wrap.open .theme-pop { display: block; }
.theme-pop-title { display: block; padding: 3px var(--g-sp-2) 6px; font-size: var(--g-fs-xs); color: var(--g-mute); font-weight: 600; letter-spacing: 0.5px; }
.theme-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px var(--g-sp-2); border: none; border-radius: var(--g-r-sm);
  background: transparent; color: var(--g-ink-2);
  font-size: var(--g-fs-sm); font-weight: 500; text-align: left; cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease);
}
.theme-opt:hover { background: var(--g-primary-soft); color: var(--g-primary); }
.theme-opt.on {
  background: linear-gradient(135deg, var(--g-primary-soft), var(--g-primary-soft-2));
  color: var(--g-primary); font-weight: 700;
}
.theme-opt .tick { margin-left: auto; font-size: var(--g-fs-xs); color: var(--g-primary); visibility: hidden; }
.theme-opt.on .tick { visibility: visible; }
.theme-pop-note { display: block; padding: 6px var(--g-sp-2) 2px; font-size: var(--g-fs-xs); color: var(--g-mute); }