/* ===== 主題 token（與 quiz_engine_v2 同源） ===== */
:root[data-theme="arcade"]{--brand-ink:#08201e;
  --page-bg:radial-gradient(120% 80% at 50% 0%,#1d1240 0%,#0b0616 60%);
  --nav-bg:rgba(13,8,32,.72); --nav-line:#241641;
  --ink:#efe8ff; --dim:#9a86c8; --dim2:#b6a7de; --dim3:#c8bbe8; --faint:#6f5f97;
  --brand:#ff2d78; --accent:#28e0d0; --warm:#ff8a3d;
  --card:#160e2c; --card2:#241641; --card3:#1c1233;
  --line:#2c1c50; --line2:#34205e; --line3:#3c2a63;
  --ready-bg:linear-gradient(165deg,#241641,#160e2c); --ready-line:#34205e;
  --ad-bg:#160e2c; --ad-line:#34205e; --ad-ink:#6f5f97;
  --tab-ink:#9a86c8; --tab-line:#2a1c47; --tab-on-ink:#ff8ab5; --tab-on-line:#ff2d78; --tab-on-bg:rgba(255,45,120,.16);
  --badge-on-bg:rgba(40,224,208,.16); --badge-on-ink:#28e0d0;
  --badge-soon-bg:#241641; --badge-soon-ink:#6f5f97;
  --note-ink:#9a86c8;
  --gcard-soon-bg:#140c28; --gcard-soon-line:#221838;
  --lcard-open-bg:linear-gradient(165deg,#2a1a4d,#160e2c); --lcard-open-line:#7a5bd6;
  --lcard-soon-bg:#160e2c; --lcard-soon-line:#241641;
  --title-font:'Noto Sans TC',sans-serif;
}
:root[data-theme="paper"]{--brand-ink:#fff;
  --page-bg:#e7dcc2;
  --nav-bg:rgba(245,238,222,.82); --nav-line:#ddceac;
  --ink:#38312a; --dim:#6e6350; --dim2:#8a7a5c; --dim3:#6e6350; --faint:#a1927a;
  --brand:#b5502f; --accent:#5a8a4a; --warm:#d98a3d;
  --card:#f5eede; --card2:#efe6d0; --card3:#f0e7d3;
  --line:#e2d6ba; --line2:#ddceac; --line3:#d8c9a6;
  --ready-bg:#f5eede; --ready-line:#e2d6ba;
  --ad-bg:#efe6d0; --ad-line:#d3c2a0; --ad-ink:#a1927a;
  --tab-ink:#8a7a5c; --tab-line:#ddceac; --tab-on-ink:#b5502f; --tab-on-line:#b5502f; --tab-on-bg:#f0e2d6;
  --badge-on-bg:#f0e2d6; --badge-on-ink:#b5502f;
  --badge-soon-bg:#e6dabf; --badge-soon-ink:#a1927a;
  --note-ink:#8a7a5c;
  --gcard-soon-bg:#ece1c8; --gcard-soon-line:#ddceac;
  --lcard-open-bg:#faf3e4; --lcard-open-line:#b5502f;
  --lcard-soon-bg:#f5eede; --lcard-soon-line:#e2d6ba;
  --title-font:'Noto Serif TC',serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page-bg);min-height:100vh;color:var(--ink);
  font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
:root[data-theme="paper"] body{
  background-color:#e7dcc2;
  background-image:radial-gradient(rgba(78,58,28,.08) .5px,transparent .6px),
    radial-gradient(rgba(120,92,48,.06) .5px,transparent .6px),
    repeating-linear-gradient(90deg,rgba(96,70,32,.018) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(96,70,32,.013) 0 1px,transparent 1px 5px);
  background-size:3px 3px,6px 6px,100% 100%,100% 100%;
  background-position:0 0,1.5px 2px,0 0,0 0;
}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.85}
h1{font-family:var(--title-font)}

/* ===== 導覽列（同引擎） ===== */
.appbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:var(--nav-bg);border-bottom:1px solid var(--nav-line)}
.appbar .inner{max-width:760px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{background:none;border:none;color:var(--brand);font-size:18px;font-weight:900;letter-spacing:.04em;
  cursor:pointer;display:flex;align-items:center;gap:7px;font-family:var(--title-font);text-decoration:none;
  flex:none;white-space:nowrap}
.abright{display:flex;align-items:center;gap:8px;min-width:0}
.gtabs{display:flex;gap:6px;align-items:center}
.gtabs:empty{display:none}
.gtab{font-size:13px;font-weight:800;padding:6px 11px;border-radius:99px;border:1px solid var(--tab-line);
  color:var(--tab-ink);background:transparent;text-decoration:none;white-space:nowrap;line-height:1.2}
a.gtab:hover{opacity:1;border-color:var(--tab-on-line)}
.gtab.on{border-color:var(--tab-on-line);background:var(--tab-on-bg);color:var(--tab-on-ink)}
.gtab.soon{opacity:.55;cursor:default}
.themepill{display:flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:99px;
  border:1px solid var(--line2);background:var(--card2);color:var(--ink);font-size:13px;font-weight:800;
  cursor:pointer;appearance:none;font-family:inherit;line-height:1;white-space:nowrap}
.themepill{position:relative}
.themepill .tico{width:17px;height:17px;display:block}
.themepill::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;background:rgba(20,16,25,.95);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:30;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.themepill:hover::after{opacity:1}
.themepill:hover{border-color:var(--tab-on-line)}
.themepill:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media(max-width:480px){
  .appbar .inner{padding:12px 12px;gap:8px}
  .brand{font-size:16px}
  .abright{gap:6px}
  .gtabs{overflow-x:auto;scrollbar-width:none}
  .gtabs::-webkit-scrollbar{display:none}
  .gtab{padding:5px 8px;font-size:12px}
  .themepill{padding:0 10px;flex:none}
  .themepill .tlabel{display:none}
}

.wrap{max-width:760px;margin:0 auto;padding:20px 20px 70px}
.crumb{max-width:760px;margin:16px auto 0;padding:0 20px;font-size:13px;color:var(--dim2);font-weight:700}
.crumb:empty{display:none}
.crumb a{color:var(--dim2)}
.crumb a:hover{text-decoration:underline}

/* ===== 標題 ===== */
h1{font-size:28px;font-weight:900;margin:14px 0 8px}
p.sub{font-size:15px;color:var(--dim2);margin:0 0 22px}

/* ===== 課程卡片 ===== */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lcard{display:block;text-align:left;border-radius:16px;padding:16px;color:var(--ink);text-decoration:none}
.lcard.open{background:var(--lcard-open-bg);border:1px solid var(--lcard-open-line);
  transition:transform .12s ease,border-color .15s}
.lcard.open:hover{transform:translateY(-2px);opacity:1}
.lcard.soon{background:var(--lcard-soon-bg);border:1px solid var(--lcard-soon-line);cursor:default}
.lcard.soon .lname{color:var(--faint)}
.ltop{display:flex;align-items:center;justify-content:space-between;gap:6px}
.lname{font-size:18px;font-weight:900;font-family:var(--title-font)}
.lbadge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;
  background:var(--badge-soon-bg);color:var(--badge-soon-ink);white-space:nowrap}
.lbadge.on{background:var(--badge-on-bg);color:var(--badge-on-ink)}
.lnote{font-size:13px;color:var(--note-ink);margin:6px 0 0}

/* ===== 廣告版位（課程格線下方） ===== */
.adslot{margin-top:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:110px;border:2px dashed var(--ad-line);border-radius:16px;background:var(--ad-bg);
  color:var(--ad-ink);font-size:13px;font-weight:700;text-align:center;padding:16px}

.sitefoot{color:var(--faint);font-size:13px;text-align:center;line-height:1.9;margin-top:34px}
.sitefoot a{color:var(--faint);text-decoration:underline}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}