/* theme-light.css — 靈感勇現 淺色主題
   預設啟用（index.html 開頭的腳本設定 <html data-theme="light">）；網址加 ?theme=dark 可切回深色版。
   做法：先把整站設計變數換成淺色，再逐一覆寫原本寫死深色的元件；
   首頁沿用原本版面（標題區＋精選輪播＋作品牆），只換成淺色。
   字型：Outfit（英數）＋ 粉圓體 Huninn（標題中文）＋ Noto Sans TC（內文中文）＋ DM Mono（數字）。 */

/* ───────────── 1. 設計變數 ───────────── */
html[data-theme="light"] {
  color-scheme: light;
  --ground: #F5F1EB; --surface: #FFFFFF; --surface-2: #F4EFE8; --surface-3: #EEE8DF;
  --ink: #1D2233; --muted: #5A6174; --faint: #707789;
  --border: #E6DFD4; --border-strong: #D3C9B9;
  --navy: #1D2233; --navy-2: #2B3250;
  --ai: #0B7F7A; --ai-soft: #DAF1ED;
  --art: #C24B24; --art-soft: #FCE3D8;
  --gen: #6A45C9; --gen-soft: #ECE5FB;
  --game: #2A67C4; --game-soft: #DDE8FB;
  --book: #9A5F0A; --book-soft: #F8E9CF;
  --accent: #0B7F7A; --primary: #0B7F7A;
  --text: var(--ink); --text-muted: var(--muted); --fg: var(--ink); --fg-dim: var(--muted);
  --good: #23764C; --good-soft: #DFF1E6; --warn: #945F00; --warn-soft: #F8EDD5; --danger: #B3261E; --danger-soft: #FBE3E1;
  --glass: rgba(255, 255, 255, .72); --glass-border: rgba(255, 255, 255, .9);
  --shadow: 0 1px 2px rgba(49, 40, 80, .06), 0 8px 24px rgba(49, 40, 80, .07);
  --shadow-lg: 0 2px 6px rgba(49, 40, 80, .06), 0 24px 60px rgba(49, 40, 80, .13);
  --sans: "Outfit", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --display: "Outfit", "Huninn", "Noto Sans TC", "PingFang TC", sans-serif;
  --serif: var(--display);
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  --lg-bg: rgba(255, 255, 255, .62);
  --lg-border: rgba(255, 255, 255, .85);
  --lg-edge-top: rgba(255, 255, 255, .9);
  --lg-edge-bot: rgba(214, 203, 187, .45);
  --lg-shadow-inner: rgba(255, 255, 255, .6);
  --lg-shadow-drop: rgba(49, 40, 80, .08);
  --lg-reflect: linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, transparent 40%);
  --ai-glow: rgba(11, 127, 122, .12); --art-glow: rgba(194, 75, 36, .12); --gen-glow: rgba(106, 69, 201, .12);
}

/* ───────────── 自動產生：把原版寫死的「淺色字／深色底」轉成淺色版可讀的顏色（mkfix.py） ───────────── */
html[data-theme="light"] .hero { background-color: var(--surface-2); }
html[data-theme="light"] .hero .hero-sub { color: var(--muted); }
html[data-theme="light"] .hero .cap b { color: var(--ink); }
html[data-theme="light"] .art .vis { color: var(--ink); }
html[data-theme="light"] .p5-draft { background-color: var(--surface-2); }
html[data-theme="light"] .p5-draft-head { background-color: var(--surface-2); }
html[data-theme="light"] .p5-pane-head { background-color: var(--surface-2); }
html[data-theme="light"] .p5-workbench { background-color: var(--surface-2); }
html[data-theme="light"] .p5-workbench-actions { background-color: var(--surface-2); }
html[data-theme="light"] .p5-security { color: var(--muted); }
html[data-theme="light"] .p5-console-wrap { background-color: var(--surface-2); }
html[data-theme="light"] .p5-console-head { color: var(--muted); }
html[data-theme="light"] .p5-console { color: #32477B; }
html[data-theme="light"] .p5-console[data-tone="ok"] { color: #228B65; }
html[data-theme="light"] .p5-console[data-tone="error"] { color: #951818; }
html[data-theme="light"] .brand-tagline { color: var(--muted); }
html[data-theme="light"] .catalog-copy>p:not(.catalog-kicker) { color: var(--muted); }
html[data-theme="light"] .catalog-stat { color: var(--muted); }
html[data-theme="light"] .catalog-stat b { color: var(--ink); }
html[data-theme="light"] .work-search { color: #189589; background-color: var(--surface-2); }
html[data-theme="light"] .gallery-count { color: var(--muted); }
html[data-theme="light"] .gallery-count b { color: var(--ink); }
html[data-theme="light"] .modal .box { background-color: var(--surface-2); }
html[data-theme="light"] .featured-stage { background-color: var(--surface-2); }
html[data-theme="light"] .featured-p5-host { background-color: var(--surface-2); }
html[data-theme="light"] .featured-empty { color: var(--muted); }
html[data-theme="light"] .site-footer b { color: #3D5070; }
html[data-theme="light"] .p5-viewer-meta { background-color: var(--surface-2); }
html[data-theme="light"] .p5-viewer-meta h2 { color: #183795; }
html[data-theme="light"] .p5-viewer-meta p { color: #375176; }
html[data-theme="light"] .p5-viewer-stage { background-color: var(--surface-2); }
html[data-theme="light"] .p5-viewer-note { background-color: var(--surface-2); }
html[data-theme="light"] .work-modal-left { background-color: var(--surface-2); }
html[data-theme="light"] .carousel-prev { color: var(--muted); }
html[data-theme="light"] .carousel-next { color: var(--muted); }
html[data-theme="light"] .book-viewer-content { color: var(--ink); }
html[data-theme="light"] .bk-kicker { color: #93621B; }
html[data-theme="light"] .bk-save-state[data-tone="dirty"] { color: #93621B; }
html[data-theme="light"] .bk-save-state[data-tone="saving"] { color: #218D80; }
html[data-theme="light"] .bk-save-state[data-tone="saved"] { color: #2E7F46; }
html[data-theme="light"] .bk-save-state[data-tone="error"] { color: #951818; }
html[data-theme="light"] .bk-toc { background-color: var(--surface-2); }
html[data-theme="light"] .bk-toc-no { color: #93621B; }
html[data-theme="light"] .bk-toc-tools button { background-color: var(--surface-2); }
html[data-theme="light"] .bk-toc-tools button[data-bk="del"]:not(:disabled):hover { background-color: var(--surface-2); }
html[data-theme="light"] .bk-add { color: #93621B; }
html[data-theme="light"] .bk-ch-title::placeholder { color: var(--muted); }
html[data-theme="light"] .bk-tool[aria-pressed="true"] { background-color: var(--surface-2); }
html[data-theme="light"] .bk-tool-image { background-color: var(--surface-2); }
html[data-theme="light"] .bk-tool-image:hover { background-color: var(--surface-2); }
html[data-theme="light"] .bk-content:has(> p:only-child > br:only-child)::before { color: var(--muted); }
html[data-theme="light"] .bk-content figcaption[contenteditable="true"]:empty::before { color: var(--muted); }
html[data-theme="light"] .tut-text h4 { color: #189588; }
html[data-theme="light"] .tut-text p { color: var(--muted); }
html[data-theme="light"] .tut-text strong { color: #314C7D; }
html[data-theme="light"] .tut-tab { color: #188195; }
html[data-theme="light"] .live-note { background-color: var(--surface-2); }
html[data-theme="light"] header.app { background-color: var(--surface-2); }
html[data-theme="light"] nav.tabs button { color: var(--muted); }
html[data-theme="light"] .liquid-surface { background-color: var(--surface-2); }
html[data-theme="light"] .quick-actions>button { background-color: var(--surface-2); }
html[data-theme="light"] .quick-actions>button:hover { background-color: var(--surface-2); }
html[data-theme="light"] .quick-symbol { background-color: var(--surface-2); }
html[data-theme="light"] .quick-actions small { color: var(--muted); }
html[data-theme="light"] .quick-actions>button>span:last-child { color: var(--muted); }
html[data-theme="light"] .fchip { background-color: var(--surface-2); }
html[data-theme="light"] .art { background-color: var(--surface-2); }
html[data-theme="light"] .art .desc { color: var(--muted); }
html[data-theme="light"] .art .meta { color: var(--muted); }
html[data-theme="light"] .card-action { background-color: var(--surface-2); }
html[data-theme="light"] .card-action:hover { background-color: var(--surface-2); }
html[data-theme="light"] .card { background-color: var(--surface-2); }
html[data-theme="light"] .hwitem { background-color: var(--surface-2); }
html[data-theme="light"] .fld { color: #3C5171; }
html[data-theme="light"] input[type=text] { background-color: var(--surface-2); }
html[data-theme="light"] input[type=url] { background-color: var(--surface-2); }
html[data-theme="light"] input[type=datetime-local] { background-color: var(--surface-2); }
html[data-theme="light"] input[type=file] { background-color: var(--surface-2); }
html[data-theme="light"] textarea { background-color: var(--surface-2); }
html[data-theme="light"] select { background-color: var(--surface-2); }
html[data-theme="light"] input[type=file]::file-selector-button { background-color: var(--surface-2); }
html[data-theme="light"] .mini { color: var(--muted); }
html[data-theme="light"] .hint { color: var(--muted); }
html[data-theme="light"] .notice { background-color: var(--surface-2); }
html[data-theme="light"] .notice.good { background-color: var(--surface-2); }
html[data-theme="light"] .locked { background-color: var(--surface-2); }
html[data-theme="light"] .locked h2 { color: #204F8E; }
html[data-theme="light"] .learning-hero p:not(.catalog-kicker) { color: var(--muted); }
html[data-theme="light"] .learning-emblem { background-color: var(--surface-2); }
html[data-theme="light"] .game-hero .learning-emblem { background-color: var(--surface-2); }
html[data-theme="light"] .homework-tab { background-color: var(--surface-2); }
html[data-theme="light"] .game-guidance>span { color: var(--muted); }
html[data-theme="light"] .count-chip { color: #395474; }
html[data-theme="light"] .assignment-description { color: #3E526F; }
html[data-theme="light"] .submission-note { color: #3E526F; }
html[data-theme="light"] .assignment-info { color: #3E536F; }
html[data-theme="light"] .missing-students { color: var(--muted); }
html[data-theme="light"] .empty-card { background-color: var(--surface-2); }
html[data-theme="light"] .empty-card h3 { color: #2D4E81; }
html[data-theme="light"] .empty-symbol { color: #384F75; }
html[data-theme="light"] .modal .top { background-color: var(--surface-2); }
html[data-theme="light"] .form-divider { color: var(--muted); }
html[data-theme="light"] .form-divider::before { background-color: var(--surface-2); }
html[data-theme="light"] .form-divider::after { background-color: var(--surface-2); }
html[data-theme="light"] .form-error { background-color: var(--surface-2); }
html[data-theme="light"] .p5-viewer-label { color: #386575; }
html[data-theme="light"] .viewer-status { background-color: var(--surface-2); }
html[data-theme="light"] .full-artwork { background-color: var(--surface-2); }
html[data-theme="light"] .image-description { color: #355378; }
html[data-theme="light"] .site-footer span { color: var(--muted); }
html[data-theme="light"] .attendance-filters input[type=search] { background-color: var(--surface-2); }
html[data-theme="light"] .attendance-stat { background-color: var(--surface-2); }
html[data-theme="light"] .attendance-stat.positive { background-color: var(--surface-2); }
html[data-theme="light"] .attendance-stat.positive b { color: #218D80; }
html[data-theme="light"] .attendance-person { background-color: var(--surface-2); }
html[data-theme="light"] .attendance-person>summary:hover { background-color: var(--surface-2); }
html[data-theme="light"] .attendance-count b { color: var(--muted); }
html[data-theme="light"] .attendance-count.attended b { color: #218D80; }
html[data-theme="light"] .attendance-expand { color: #218D80; }
html[data-theme="light"] .attendance-detail { background-color: var(--surface-2); }

/* ───────────── 2. 頁面底色、字型 ───────────── */
html[data-theme="light"] body {
  background:
    radial-gradient(1100px 560px at 8% -12%, #ECE4FA 0%, transparent 62%),
    radial-gradient(900px 520px at 100% -6%, #FDE8D8 0%, transparent 58%),
    var(--ground);
  color: var(--ink);
  font-family: var(--sans);
}
html[data-theme="light"] #apple-bg-canvas { display: none !important; }
html[data-theme="light"] :is(h1, h2, h3, .h2, .h3) { color: var(--ink); font-family: var(--display); letter-spacing: -.01em; }
html[data-theme="light"] :is(.sub, .mini, .hint, small) { color: var(--muted); }
html[data-theme="light"] a { color: var(--ai); }
html[data-theme="light"] ::selection { background: #DCD2FA; color: var(--ink); }
html[data-theme="light"] :focus-visible { outline: 2px solid var(--gen); outline-offset: 2px; }
html[data-theme="light"] .catalog-kicker { color: var(--ai); }

/* ───────────── 3. 頁首與分頁 ───────────── */
html[data-theme="light"] header.app {
  /* 玻璃選單：半透明白＋強模糊＋提高飽和度，捲動時後面的作品色彩會透出來 */
  background: linear-gradient(180deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .26)) !important;
  backdrop-filter: blur(26px) saturate(1.9) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .75) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(49, 40, 80, .06), 0 10px 32px rgba(49, 40, 80, .08) !important;
}
html[data-theme="light"] header.app.scrolled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(49, 40, 80, .08), 0 14px 40px rgba(49, 40, 80, .12) !important; }
/* 分頁列：一條浮起來的玻璃膠囊 */
html[data-theme="light"] nav.tabs {
  width: fit-content; max-width: calc(100% - 32px); margin-bottom: 12px; padding: 5px; gap: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22));
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(49, 40, 80, .05), 0 8px 24px rgba(49, 40, 80, .08);
  scrollbar-width: none;
}
html[data-theme="light"] nav.tabs::-webkit-scrollbar { display: none; }
html[data-theme="light"] .brand .brand-mark-shell { background: linear-gradient(145deg, #ffffff, #efe8ff); box-shadow: 0 2px 8px rgba(49, 40, 80, .12); }
html[data-theme="light"] .brand-copy, html[data-theme="light"] .brand-copy * { color: var(--ink); }
html[data-theme="light"] nav.tabs button {
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 999px; font-family: var(--sans); font-weight: 500;
}
html[data-theme="light"] nav.tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(49, 40, 80, .06); }
html[data-theme="light"] nav.tabs button.active,
html[data-theme="light"] nav.tabs button[aria-current="page"] {
  background: linear-gradient(180deg, rgba(46, 53, 78, .92), rgba(29, 34, 51, .92)); color: #fff; border-color: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px rgba(29, 34, 51, .22);
}
html[data-theme="light"] nav.tabs .badge { background: var(--art); color: #fff; }
html[data-theme="light"] .sub-tabs { border-bottom-color: var(--border); }
html[data-theme="light"] .sub-tab { color: var(--muted); }
html[data-theme="light"] .sub-tab:hover { color: var(--ink); background: rgba(29, 34, 51, .05); }
html[data-theme="light"] .sub-tab.active { background: var(--navy); color: #fff; }
html[data-theme="light"] .userchip, html[data-theme="light"] .auth-name { color: var(--ink); }

/* ───────────── 4. 按鈕、晶片、標籤 ───────────── */
html[data-theme="light"] .btn {
  background: #fff; color: var(--ink); border: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(49, 40, 80, .06);
}
html[data-theme="light"] .btn:hover:not(:disabled) { background: #FBF8F3; border-color: #BFB3A1; }
html[data-theme="light"] .btn.primary, html[data-theme="light"] .bigbtn { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 6px 16px rgba(29, 34, 51, .2); }
html[data-theme="light"] .btn.primary:hover:not(:disabled), html[data-theme="light"] .bigbtn:hover { background: var(--navy-2); }
html[data-theme="light"] .btn.ghost { background: transparent; box-shadow: none; }
html[data-theme="light"] .btn.danger { color: var(--danger); border-color: #EBC2BE; background: #fff; }
html[data-theme="light"] .btn.danger:hover { background: var(--danger-soft); }
html[data-theme="light"] .btn.secondary { background: var(--surface-2); }
html[data-theme="light"] .x { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
html[data-theme="light"] .card-action { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
html[data-theme="light"] .card-action:hover { background: #fff; border-color: var(--border-strong); }

html[data-theme="light"] .fchip { background: #fff; color: var(--muted); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(49, 40, 80, .05); }
html[data-theme="light"] .fchip:hover { color: var(--ink); border-color: var(--border-strong); box-shadow: 0 4px 12px rgba(49, 40, 80, .08); }
html[data-theme="light"] .fchip.on { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 6px 14px rgba(29, 34, 51, .18); }
html[data-theme="light"] .fchip.on.ai { background: var(--ai-soft); color: var(--ai); border-color: #A9DAD4; }
html[data-theme="light"] .fchip.on.draw { background: var(--art-soft); color: var(--art); border-color: #F2BFA9; }
html[data-theme="light"] .fchip.on.gen { background: var(--gen-soft); color: var(--gen); border-color: #CFC0F4; }
html[data-theme="light"] .fchip.on.game { background: var(--game-soft); color: var(--game); border-color: #B3CCF2; }
html[data-theme="light"] .fchip.on.book { background: var(--book-soft); color: var(--book); border-color: #EBCB94; }

html[data-theme="light"] .pill { background: var(--surface-2); color: var(--muted); }
html[data-theme="light"] .pill.ok { background: var(--good-soft); color: var(--good); }
html[data-theme="light"] .pill.wait { background: var(--warn-soft); color: var(--warn); }
html[data-theme="light"] .pill.no { background: #E7ECF5; color: #3A4A66; }
html[data-theme="light"] .tag { background: var(--surface-2); color: var(--muted); }
html[data-theme="light"] .tag.ai { background: var(--ai-soft); color: var(--ai); }
html[data-theme="light"] .tag.game { background: var(--game-soft); color: var(--game); }
html[data-theme="light"] .count-chip { border-color: var(--border); color: var(--muted); background: #fff; }
html[data-theme="light"] .badge { background: var(--art); color: #fff; }

/* ───────────── 5. 卡片、面板 ───────────── */
html[data-theme="light"] :is(.card, .hwitem, .art, .locked, .empty-card) {
  background: #fff; color: var(--ink); border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, var(--shadow);
}
html[data-theme="light"] :is(.art, .art.glow-ai, .art.glow-gen, .art.glow-art):hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
html[data-theme="light"] .empty-card { border-style: dashed; background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .hg-glass-panel, html[data-theme="light"] .liquid-surface {
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 #fff inset, var(--shadow); backdrop-filter: blur(16px) saturate(1.3);
}
html[data-theme="light"] .gallery-toolbar, html[data-theme="light"] .gallery-toolbar.hg-glass-panel { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 24px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="light"] .gallery-count, html[data-theme="light"] .gallery-count b { color: var(--muted); font-family: var(--mono); }
html[data-theme="light"] .work-search { background: #fff; border: 1px solid var(--border); box-shadow: none; color: var(--muted); }
html[data-theme="light"] .work-search input { color: var(--ink); background: transparent; }

html[data-theme="light"] .work-cover { background: var(--surface-3); color: var(--ink); }
html[data-theme="light"] .work-cover::after { background: linear-gradient(180deg, transparent 55%, rgba(29, 34, 51, .12)); }
html[data-theme="light"] .work-cover.game { background: radial-gradient(circle at 50% 40%, #D8F0CF, #BFE0B3 72%); }
html[data-theme="light"] .cover-placeholder { background: radial-gradient(circle at 50% 40%, #fff, transparent 70%), linear-gradient(135deg, #F1ECFA, #FBEFE6); color: var(--muted); }
html[data-theme="light"] .cover-placeholder > span { color: var(--ink); }
html[data-theme="light"] .author-dot { background: var(--gen-soft); color: var(--gen); }

html[data-theme="light"] .quick-actions > button { background: #fff; border: 1px solid var(--border); color: var(--ink); box-shadow: var(--shadow); }
html[data-theme="light"] .quick-actions > button:hover { background: #FBF8F3; border-color: var(--border-strong); }
html[data-theme="light"] .quick-symbol { background: var(--ai-soft); color: var(--ai); }

html[data-theme="light"] .learning-hero { background: linear-gradient(110deg, #F1ECFB, #FCF0E6); border: 1px solid var(--border); color: var(--ink); }
html[data-theme="light"] .learning-emblem { background: #fff; color: var(--gen); }
html[data-theme="light"] .game-hero { background: linear-gradient(110deg, #E3F3DD, #E6EFFB 75%); }
html[data-theme="light"] .game-hero .learning-emblem { background: #fff; color: var(--good); }
html[data-theme="light"] .homework-tab { background: #fff; border: 1px solid var(--border); color: var(--muted); }
html[data-theme="light"] .homework-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
html[data-theme="light"] :is(.assignment-info, .game-guidance, .submission-row) { border-color: var(--border); }

html[data-theme="light"] .notice { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); }
html[data-theme="light"] .notice.warn { background: var(--warn-soft); border-color: #EDD29B; color: #6B4600; }
html[data-theme="light"] .notice.good { background: var(--good-soft); border-color: #B7DEC6; color: #1B5C3B; }
html[data-theme="light"] .form-error { background: var(--danger-soft); color: var(--danger); }
html[data-theme="light"] :is(.form-divider::before, .form-divider::after) { background: var(--border); }

/* ───────────── 6. 表單 ───────────── */
html[data-theme="light"] :is(input[type=text], input[type=url], input[type=email], input[type=search], input[type=date], input[type=datetime-local], input[type=number], input[type=file], textarea, select) {
  background: #fff; color: var(--ink); border: 1px solid var(--border-strong); color-scheme: light;
}
html[data-theme="light"] :is(input, textarea, select):focus { border-color: var(--gen); box-shadow: 0 0 0 3px rgba(106, 69, 201, .15); outline: none; }
html[data-theme="light"] ::placeholder { color: var(--faint); }
html[data-theme="light"] input[type=file]::file-selector-button { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border-strong); }
html[data-theme="light"] label, html[data-theme="light"] .fld { color: var(--ink); }

/* ───────────── 7. 彈出視窗、提示 ───────────── */
html[data-theme="light"] .modal { background: rgba(35, 32, 56, .38); backdrop-filter: blur(6px); }
html[data-theme="light"] .modal .box { background: #fff; color: var(--ink); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(35, 32, 56, .25); }
html[data-theme="light"] .modal .top { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--ink); }
html[data-theme="light"] .work-modal-left { background: var(--surface-3); }
html[data-theme="light"] .full-artwork { background: var(--surface-3); }
html[data-theme="light"] .toast { background: var(--navy); color: #fff; box-shadow: 0 12px 30px rgba(29, 34, 51, .25); }
html[data-theme="light"] .live-note { background: rgba(255, 255, 255, .85); color: var(--ink); }
html[data-theme="light"] .skip-link { color: #fff; background: var(--navy); }

/* p5 檢視器：外框改淺色，程式編輯區維持深色（寫程式時比較好讀） */
html[data-theme="light"] .p5-viewer-meta { background: var(--surface-2); border-bottom-color: var(--border); color: var(--ink); }
html[data-theme="light"] :is(.p5-viewer-stage, .featured-p5-host) { background: var(--surface-3); }
html[data-theme="light"] .p5-viewer-note { background: #fff; color: var(--muted); }
html[data-theme="light"] .viewer-status { background: var(--surface-2); color: var(--ink); }

/* 精選輪播：淺色底 */
html[data-theme="light"] .featured-stage { background: var(--surface-3); }
html[data-theme="light"] .featured-option { background: rgba(255, 255, 255, .7); color: var(--ink); }
html[data-theme="light"] :is(.carousel-prev, .carousel-next) { background: rgba(255, 255, 255, .85); color: var(--ink); box-shadow: var(--shadow); }

/* 學習連結手風琴 */
html[data-theme="light"] .link-accordion { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); }
html[data-theme="light"] .link-accordion-count { background: var(--surface-2); color: var(--muted); }

/* ───────────── 8. 其他模組（簽到報表、寫作、教學、悄悄話）───────────── */
html[data-theme="light"] .attendance-filters input[type=search] { background: #fff; color: var(--ink); }
html[data-theme="light"] :is(.attendance-stat, .attendance-person) { background: #fff; border-color: var(--border); }
html[data-theme="light"] .attendance-stat.positive { background: var(--ai-soft); }
html[data-theme="light"] .attendance-stat.positive b { color: var(--ai); }
html[data-theme="light"] .attendance-person > summary:hover { background: #FBF8F3; }
html[data-theme="light"] .attendance-detail { background: var(--surface-2); }
html[data-theme="light"] .attendance-detail li { border-bottom-color: var(--border); }
html[data-theme="light"] :is(.attendance-count.attended b, .attendance-expand) { color: var(--ai); }

html[data-theme="light"] .bk-toc { background: #fff; border-color: var(--border); }
html[data-theme="light"] .bk-toc-item:hover { background: var(--surface-2); }
html[data-theme="light"] .bk-toc-tools button { background: #fff; border-color: var(--border); color: var(--ink); }
html[data-theme="light"] .bk-kicker, html[data-theme="light"] .bk-save-state[data-tone="dirty"] { color: var(--book); }
html[data-theme="light"] .bk-toc-no { color: var(--book); }
html[data-theme="light"] .bk-add { color: var(--book); border-color: #E3B96F; }
html[data-theme="light"] .bk-save-state[data-tone="saved"] { color: var(--good); }
html[data-theme="light"] .bk-save-state[data-tone="saving"] { color: var(--ai); }
html[data-theme="light"] .bk-paper { box-shadow: var(--shadow-lg); }

html[data-theme="light"] .tut-card { background: var(--surface-2); border-color: var(--border); }
html[data-theme="light"] .tut-text h4 { color: var(--ink); }
html[data-theme="light"] .tut-text p { color: var(--muted); }
html[data-theme="light"] .tut-text strong { color: var(--ink); }
html[data-theme="light"] .tut-btn { background: var(--gen-soft); border-color: #CFC0F4; color: #4B2FA3; }
html[data-theme="light"] .tut-tab { background: var(--ai-soft); border-color: #A9DAD4; color: #07615D; }
html[data-theme="light"] .tut-section.tut-accent { border-color: #CFC0F4; }

/* 悄悄話頁的行內樣式（名字青色、回覆粉紅、深色回覆框） */
html[data-theme="light"] [style*="#9ff9ef"] { color: var(--ai) !important; }
html[data-theme="light"] [style*="color: #ff79c6"] { color: #B02A6E !important; }
html[data-theme="light"] [style*="rgba(0,0,0,0.2)"] { background: var(--surface-2) !important; }
html[data-theme="light"] [style*="rgba(255,121,198,0.1)"] { background: #FCE7F1 !important; }
html[data-theme="light"] [style*="color: #a4fcf3"] { color: var(--ai) !important; }
html[data-theme="light"] [style*="color: #aeb8ce"] { color: var(--muted) !important; }

/* ───────────── 9. 首頁標題區（沿用原本版面，改淺色） ───────────── */
html[data-theme="light"] .catalog-hero {
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 #fff inset, 0 18px 44px rgba(49, 40, 80, .10);
}
html[data-theme="light"] .catalog-hero::before { box-shadow: none; }
html[data-theme="light"] .catalog-copy h1 { color: var(--ink); }
html[data-theme="light"] .catalog-copy h1 em {
  background: linear-gradient(110deg, #0E8C88, #7A55D8 55%, #E0603A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="light"] .catalog-copy > p:not(.catalog-kicker) { color: var(--muted); }
html[data-theme="light"] .hero-disciplines { color: var(--muted); }
html[data-theme="light"] .hero-disciplines span::before { background: var(--border-strong); }
html[data-theme="light"] .hero-disciplines span:nth-child(1)::before { background: #0E8C88; }
html[data-theme="light"] .hero-disciplines span:nth-child(2)::before { background: #E0603A; }
html[data-theme="light"] .hero-disciplines span:nth-child(3)::before { background: #7A55D8; }
html[data-theme="light"] .hero-disciplines span:nth-child(4)::before { background: #2F7BE0; }
html[data-theme="light"] .catalog-stat { color: var(--muted); }
html[data-theme="light"] .catalog-stat b { color: var(--ink); }
html[data-theme="light"] .catalog-stat i { background: var(--border); }
html[data-theme="light"] .catalog-scene { background: linear-gradient(135deg, #EFE9F8, #F9EEE6); border-left: 1px solid var(--border); }
html[data-theme="light"] .scene-label, html[data-theme="light"] .scene-label b { color: var(--muted); }
@media (max-width: 760px) { html[data-theme="light"] .catalog-scene { border-left: 0; border-top: 1px solid var(--border); } }

/* ── 對比修正（原版寫死的淺色字） ── */
html[data-theme="light"] .link-accordion-header { color: var(--ink); }
html[data-theme="light"] .link-accordion-header:hover { background: var(--surface-2); }
html[data-theme="light"] .link-accordion-desc,
html[data-theme="light"] .link-accordion-arrow { color: var(--muted); }
html[data-theme="light"] .empty,
html[data-theme="light"] .empty-symbol { color: var(--muted); }
html[data-theme="light"] .quick-actions > button > span:last-child { color: var(--muted); }
html[data-theme="light"] .learning-hero p:not(.catalog-kicker) { color: var(--muted); }
html[data-theme="light"] .catalog-kicker { color: #0A6B67; }
html[data-theme="light"] .site-footer,
html[data-theme="light"] .site-footer b,
html[data-theme="light"] .site-footer span { color: var(--muted); }
html[data-theme="light"] .site-footer img { border-color: var(--border); filter: drop-shadow(0 4px 12px rgba(49, 40, 80, .12)); }

/* ───────────── 淺色／深色切換按鈕（兩種模式都用得到，所以不限定 data-theme） ───────────── */
.theme-toggle {
  flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: 10px; padding: 0;
  border-radius: 50%; cursor: pointer; color: #FFD37A;
  background: rgba(10, 13, 24, .72); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.theme-toggle:hover { background: rgba(22, 28, 46, .9); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle:focus-visible { outline: 2px solid #8BE9FD; outline-offset: 2px; }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s, transform .35s; }
.theme-toggle .tt-moon { fill: currentColor; stroke: none; }
/* 深色時顯示太陽（按了變淺色）；淺色時顯示月亮（按了變深色） */
.theme-toggle .tt-moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
html[data-theme="light"] .theme-toggle .tt-sun { opacity: 0; transform: rotate(40deg) scale(.6); }
html[data-theme="light"] .theme-toggle .tt-moon { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(49, 40, 80, .1);
}
html[data-theme="light"] .theme-toggle:hover { background: rgba(255, 255, 255, .9); }
html[data-theme="light"] .theme-toggle:focus-visible { outline-color: var(--gen); }
@media (max-width: 500px) { .theme-toggle { width: 38px; height: 38px; margin-right: 6px; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle svg { transition: none; } }

/* ───────────── 生成式背景（gen-bg.js）＋ 毛玻璃卡片 ───────────── */
#gen-bg { display: none; }
html[data-theme="light"] #gen-bg {
  display: block; position: fixed; inset: -4%; width: 108%; height: 108%; z-index: -1; pointer-events: none;
}
html[data-theme="light"] #gen-bg.css-blur { filter: blur(22px); }
html[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, .56);
  --glass-bg-strong: rgba(255, 255, 255, .72);
  --glass-edge: rgba(255, 255, 255, .88);
  --glass-blur: blur(20px) saturate(1.6);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(49, 40, 80, .04), 0 14px 38px rgba(49, 40, 80, .09);
}
html[data-theme="light"] :is(.catalog-hero, .card, .hwitem, .locked, .link-accordion, .quick-actions > button, .hg-glass-panel:not(.gallery-toolbar), .liquid-surface) {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-edge) !important;
  backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
}
/* 作品卡片數量多，模糊輕一點比較省效能 */
html[data-theme="light"] .art {
  background: var(--glass-bg-strong); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
html[data-theme="light"] .empty-card { background: rgba(255, 255, 255, .42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="light"] .quick-actions > button:hover { background: var(--glass-bg-strong) !important; }
html[data-theme="light"] .catalog-scene { background: linear-gradient(135deg, rgba(239, 233, 248, .55), rgba(249, 238, 230, .55)); border-left-color: rgba(255, 255, 255, .7); }
html[data-theme="light"] .work-search { background: var(--glass-bg-strong); border-color: var(--glass-edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* 首頁大標：粗明體＋漸層（兩行一起漸變） */
html[data-theme="light"] .catalog-copy h1 {
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-weight: 900; letter-spacing: -.045em;
  background: linear-gradient(118deg, #1D2233 8%, #0E8C88 42%, #7A55D8 70%, #E0603A 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .catalog-copy h1 em { background: none; color: transparent; -webkit-text-fill-color: transparent; }

/* ───────────── 頁首品牌：淺色專用 Logo＋粗明體站名 ───────────── */
.brand .brand-logo-light { display: none; }
html[data-theme="light"] .brand .brand-logo { display: none; }
html[data-theme="light"] .brand .brand-logo-light { display: block; width: 44px; height: 44px; object-fit: contain; }
html[data-theme="light"] .brand .brand-mark-shell {
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 12px;
  background: linear-gradient(150deg, #FFFFFF 0%, #F6F1FF 60%, #FFF1E8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(49, 40, 80, .12);
}
html[data-theme="light"] .brand-title {
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif !important; font-weight: 900 !important;
}

/* ───────────── 版面位置（深色、淺色共用，切換時介面不會跳動） ───────────── */
nav.tabs {
  width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 12px; padding: 5px; gap: 2px;
  border: 1px solid transparent; border-radius: 999px; scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button { border-radius: 999px; }
.brand .brand-mark-shell { border-radius: 12px; }
.authbox .btn { white-space: nowrap; }
.catalog-copy h1 { padding-bottom: .06em; }
/* 深色版的分頁膠囊：同樣是玻璃，只是深色 */
html:not([data-theme="light"]) nav.tabs {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .25);
}

/* 彈出視窗：原版 app.css 用 !important 把視窗做成半透明，淺色時會透出後面的作品牆，改成幾乎不透明的毛玻璃 */
html[data-theme="light"] .modal .box {
  background: rgba(255, 253, 250, .96) !important; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .95) !important;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(35, 32, 56, .28) !important;
}
html[data-theme="light"] .image-description { color: #3A4460; }
/* 上傳表單的網址欄位與其他欄位同寬（深淺共用） */
#workExtra input[type="url"], #workExtra input[type="text"] { width: 100%; }