/* ===== 設計變數 ===== */
:root{
  --bg:#f4f5fb; --surface:#ffffff; --surface-2:#f8f9fe; --border:#e6e8f0;
  --text:#1c1f2a; --text-soft:#5a6072; --text-mute:#8a90a2;
  --primary:#5b5bd6; --primary-d:#4849c4; --primary-soft:#ececfb;
  --accent:#00b3a4; --warn:#e8a33d; --danger:#e5484d; --ok:#30a46c;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 3px rgba(20,20,50,.06),0 8px 24px rgba(20,20,50,.06);
  --shadow-lg:0 12px 40px rgba(20,20,50,.14);
  --sidebar-w:280px; --font:"Segoe UI",-apple-system,"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#0f1117; --surface:#171a23; --surface-2:#1e2230; --border:#2a2f3d;
  --text:#e8eaf2; --text-soft:#a6adc0; --text-mute:#6f7689;
  --primary:#8d8df6; --primary-d:#c4c7ff; --primary-soft:#252850;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
::selection{background:var(--primary-soft);color:var(--primary-d)}

/* ===== 版面 ===== */
.layout{display:flex;min-height:100vh}
.topbar{display:none}

/* ===== 側邊欄 ===== */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  height:100vh;position:sticky;top:0;display:flex;flex-direction:column;overflow-y:auto;z-index:40}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.brand{display:flex;align-items:center;gap:12px;padding:20px 20px 14px}
.brand-logo{font-size:32.5px;filter:drop-shadow(0 2px 4px rgba(91,91,214,.3))}
.brand-title{font-weight:800;font-size:17.5px;letter-spacing:.3px}
.brand-sub{font-size:13px;color:var(--text-mute);font-weight:600}

.user-switcher{padding:0 14px 12px;position:relative}
.user-current{width:100%;display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 12px;color:var(--text);transition:.15s}
.user-current:hover{border-color:var(--primary)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--primary-soft);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.user-name{flex:1;text-align:left;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chevron{color:var(--text-mute);font-size:12px}
.user-menu{position:absolute;left:14px;right:14px;top:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:50;overflow:hidden;padding:6px}
.user-menu .um-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:14.5px;font-weight:600}
.user-menu .um-item:hover{background:var(--surface-2)}
.user-menu .um-item.active{color:var(--primary)}
.user-menu .um-sep{height:1px;background:var(--border);margin:6px 0}
.user-menu .um-add{color:var(--primary)}

.nav{padding:6px 14px;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);
  font-weight:650;font-size:15.5px;color:var(--text-soft);transition:.15s}
.nav-item span{font-size:15px}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:var(--primary-d)}

.side-section{margin:8px 14px 0;border-top:1px solid var(--border);padding-top:8px}
.side-section-head{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;
  color:var(--text-soft);font-weight:700;font-size:14px;padding:8px 6px}
.side-section-head:hover{color:var(--text)}
.side-section-body{padding:6px 6px 10px;display:flex;flex-direction:column;gap:10px}
.side-section-body.collapsed{display:none}

.field{display:flex;flex-direction:column;gap:4px}
.field-label{font-size:12.5px;font-weight:700;color:var(--text-mute);letter-spacing:.3px}
.field input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);color:var(--text);font-size:14px;transition:.15s}
select{width:100%;padding:9px 34px 9px 12px;border:1px solid var(--border);border-radius:9px;
  background-color:var(--surface-2);color:var(--text);font-family:inherit;font-size:14.5px;font-weight:600;transition:.15s;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8398' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
select:hover{border-color:var(--primary)}
select option{background:var(--surface);color:var(--text)}
.field input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-soft);font-weight:600}
.check input{width:15px;height:15px;accent-color:var(--primary)}
.side-hint{font-size:12px;color:var(--text-mute);line-height:1.5}
.ai-status{font-size:13px;font-weight:600;min-height:0}
.ai-status.ok{color:var(--ok)}.ai-status.err{color:var(--danger)}.ai-status.load{color:var(--primary)}

.btn-row{display:flex;gap:8px}
.side-footer{margin-top:auto;padding:12px 20px;border-top:1px solid var(--border)}
.side-version{font-size:12px;color:var(--text-mute);text-align:center;margin-top:8px}

/* ===== 按鈕 ===== */
.btn{border:1px solid transparent;border-radius:9px;padding:9px 16px;font-weight:700;font-size:15px;transition:.15s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn-sm{padding:7px 12px;font-size:14px}
.btn.full{width:100%}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-d);transform:translateY(-1px)}
.btn-ghost{background:var(--surface-2);color:var(--text-soft);border-color:var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--primary)}
.btn-danger-ghost{background:none;color:var(--danger);border-color:var(--border)}
.btn-danger-ghost:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.icon-btn{background:none;border:none;font-size:21.5px;padding:6px;border-radius:8px;color:var(--text)}
.icon-btn:hover{background:var(--surface-2)}

/* ===== 主內容 ===== */
.main{flex:1;min-width:0;padding:28px 36px 64px;max-width:1180px;margin:0 auto;width:100%}
.page-head{margin-bottom:22px}
.page-title{font-size:28px;font-weight:800;letter-spacing:-.3px}
.page-sub{color:var(--text-soft);font-size:15.5px;margin-top:3px}

/* 卡片 */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* 統計卡 */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.stat-label{font-size:13.5px;color:var(--text-mute);font-weight:700}
.stat-value{font-size:32.5px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.stat-value .unit{font-size:16px;color:var(--text-mute);font-weight:700;margin-left:2px}
.stat-foot{font-size:13px;color:var(--text-soft);margin-top:4px}
.stat-accent .stat-value{color:var(--primary)}

.section-title{font-size:18.5px;font-weight:800;margin:26px 0 12px;display:flex;align-items:center;gap:8px}
.section-title .tag{font-size:13px;font-weight:700;color:var(--text-mute);background:var(--surface-2);padding:2px 8px;border-radius:20px}

/* 科目卡 */
.subject-card{padding:18px 20px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);
  box-shadow:var(--shadow);transition:.18s;position:relative;overflow:hidden}
.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.subject-card .sc-code{font-size:13px;font-weight:800;color:var(--primary);letter-spacing:1px}
.subject-card .sc-name{font-size:18px;font-weight:800;margin:3px 0 8px}
.subject-card .sc-meta{font-size:13.5px;color:var(--text-soft)}
.subject-card .sc-bar{height:7px;background:var(--surface-2);border-radius:4px;margin-top:12px;overflow:hidden}
.subject-card .sc-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;padding:4px 11px;border-radius:20px;
  background:var(--surface-2);color:var(--text-soft);border:1px solid var(--border)}
.chip.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* 教材 */
.chapter{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.chapter-head{padding:15px 18px;display:flex;align-items:center;gap:12px;cursor:pointer}
.chapter-head:hover{background:var(--surface-2)}
.chapter-idx{width:30px;height:30px;border-radius:8px;background:var(--primary-soft);color:var(--primary-d);
  font-weight:800;display:grid;place-items:center;flex-shrink:0;font-size:15px}
.chapter-title{flex:1;font-weight:750;font-size:16.5px}
.chapter-qn{font-size:13px;color:var(--text-mute);font-weight:700}
.chapter-body{padding:2px 18px 18px 60px;display:none}
.chapter.open .chapter-body{display:block}
.chapter.open .chapter-head{background:var(--surface-2)}
.chapter-summary{color:var(--text-soft);font-size:15px;margin:6px 0 14px}
.kp-title{font-weight:800;font-size:14px;color:var(--text-mute);margin:14px 0 6px;letter-spacing:.3px}
.kp-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.kp-list li{position:relative;padding-left:20px;font-size:15px;color:var(--text)}
.kp-list li::before{content:"▸";position:absolute;left:2px;color:var(--primary);font-weight:800}
.concept{border-left:3px solid var(--primary);padding:6px 0 6px 12px;margin:8px 0;background:var(--surface-2);border-radius:0 8px 8px 0}
.concept .c-term{font-weight:800;font-size:15px}
.concept .c-def{font-size:14.5px;color:var(--text-soft)}
.chapter-actions{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}

/* ===== 測驗 ===== */
.quiz-setup .opt-group{margin-bottom:20px}
.quiz-setup .og-label{font-weight:800;font-size:15px;margin-bottom:9px;display:block}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.mode-card{border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;background:var(--surface);color:var(--text);transition:.15s;text-align:left}
.mode-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg)}
.mode-card.on{border-color:var(--primary);background:var(--primary-soft)}
.mode-card .mc-ico{font-size:26px}
.mode-card .mc-name{font-weight:800;font-size:16px;margin-top:6px}
.mode-card .mc-desc{font-size:13.5px;color:var(--text-soft);margin-top:3px}

.quiz-runner{max-width:820px;margin:0 auto}
.quiz-bar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.progress{flex:1;height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden;border:1px solid var(--border)}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .3s}
.quiz-count{font-weight:800;font-size:15px;white-space:nowrap}
.quiz-timer{font-weight:800;font-size:15px;color:var(--text-soft);white-space:nowrap;font-variant-numeric:tabular-nums;
  min-width:64px;text-align:right}

:root{--on-primary:#fff;color-scheme:light}
[data-theme="dark"]{--on-primary:#0b0d14;color-scheme:dark}
[data-theme="dark"] .q-badge.subj,
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .chapter-idx,
[data-theme="dark"] .tips .tips-head{color:var(--primary-d)}

.qcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.q-meta{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.q-badge{font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:6px;background:var(--surface-2);color:var(--text-soft)}
.q-badge.subj{background:var(--primary-soft);color:var(--primary-d)}
.q-stem{font-size:18px;font-weight:650;line-height:1.65;margin-bottom:18px;white-space:pre-wrap}
.options{display:flex;flex-direction:column;gap:10px}
.option{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);transition:.13s;text-align:left;width:100%;color:var(--text);font-size:15.5px;line-height:1.55}
.option:hover:not(:disabled){border-color:var(--primary);background:var(--surface-2)}
.option .opt-key{width:26px;height:26px;border-radius:7px;background:var(--surface-2);color:var(--text-soft);
  font-weight:800;display:grid;place-items:center;flex-shrink:0;font-size:14px;border:1px solid var(--border)}
.option span:last-child{white-space:pre-wrap;overflow-wrap:anywhere}
.option.sel{border-color:var(--primary);background:var(--primary-soft)}
.option.sel .opt-key{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.option.correct{border-color:var(--ok);background:rgba(48,164,108,.1)}
.option.correct .opt-key{background:var(--ok);color:#fff;border-color:var(--ok)}
.option.wrong{border-color:var(--danger);background:rgba(229,72,77,.09)}
.option.wrong .opt-key{background:var(--danger);color:#fff;border-color:var(--danger)}
.option:disabled{cursor:default}
.quiz-foot{margin-top:20px;display:flex;justify-content:space-between;gap:10px}

.explain{margin-top:16px;padding:15px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);font-size:15px;line-height:1.7}
.explain .ex-head{font-weight:800;color:var(--primary);margin-bottom:6px;display:flex;align-items:center;gap:7px}
.explain .ex-ans{font-weight:800;color:var(--ok)}
.explain-loading{color:var(--text-mute);font-style:italic}

/* 結果 */
.result-hero{text-align:center;padding:30px 20px}
.score-ring{width:150px;height:150px;margin:0 auto 14px}
.result-verdict{font-size:24px;font-weight:800}
.result-sub{color:var(--text-soft);margin-top:4px}
.review-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;background:var(--surface)}
.review-item .ri-head{display:flex;gap:10px;align-items:flex-start}
.ri-status{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0;font-weight:800;color:#fff}
.ri-status.ok{background:var(--ok)}.ri-status.no{background:var(--danger)}
.ri-stem{font-weight:650;font-size:15.5px;flex:1}
.ri-detail{margin:8px 0 0 34px;font-size:14.5px;color:var(--text-soft)}
.ri-detail b{color:var(--text)}

/* ===== 分析 ===== */
.weak-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.weak-row:last-child{border-bottom:none}
.weak-info{flex:1;min-width:0}
.weak-name{font-weight:750;font-size:15.5px}
.weak-meta{font-size:13.5px;color:var(--text-mute)}
.weak-bar{width:130px;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;flex-shrink:0}
.weak-bar > i{display:block;height:100%;border-radius:4px}
.weak-pct{width:44px;text-align:right;font-weight:800;font-size:15px;flex-shrink:0}
.tips{background:var(--primary-soft);border-radius:var(--radius);padding:16px 18px;margin-top:6px}
.tips .tips-head{font-weight:800;color:var(--primary-d);margin-bottom:8px;display:flex;gap:7px;align-items:center}
.tips ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.tips li{padding-left:20px;position:relative;font-size:14.5px}
.tips li::before{content:"✦";position:absolute;left:0;color:var(--primary)}

/* 空狀態 */
.empty{text-align:center;padding:50px 20px;color:var(--text-mute)}
.empty .e-ico{font-size:47.5px;margin-bottom:10px}
.empty .e-title{font-size:17.5px;font-weight:800;color:var(--text-soft)}
.empty .e-sub{font-size:14.5px;margin-top:4px}

/* 圖表 */
.chart-wrap{width:100%;overflow-x:auto}
svg.chart{display:block;width:100%;height:auto;min-width:320px}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.legend-item{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--text-soft)}
.legend-dot{width:11px;height:11px;border-radius:3px}

/* AI 出題 */
.gen-form .field{margin-bottom:14px}
.gen-preview{margin-top:20px}
.callout{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm);padding:13px 15px;font-size:14.5px;color:var(--text-soft);display:flex;gap:10px}
.callout .co-ico{font-size:19.5px}
.callout.warn{border-color:var(--warn);background:rgba(232,163,61,.1)}

/* Modal */
.modal-root{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal-scrim{position:absolute;inset:0;background:rgba(10,12,25,.5);backdrop-filter:blur(3px)}
.modal-box{position:relative;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  width:100%;max-width:440px;padding:24px;z-index:1;border:1px solid var(--border)}
.modal-title{font-size:19.5px;font-weight:800;margin-bottom:6px}
.modal-desc{color:var(--text-soft);font-size:15px;margin-bottom:16px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* Toast */
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--text);color:var(--bg);padding:11px 20px;border-radius:24px;font-size:15px;font-weight:700;
  box-shadow:var(--shadow-lg);animation:toastIn .25s ease}
.toast.ok{background:var(--ok);color:#fff}.toast.err{background:var(--danger);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.sidebar-scrim{display:none}
.spin{display:inline-block;width:15px;height:15px;border:2.5px solid var(--primary-soft);border-top-color:var(--primary);
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 響應式 ===== */
@media(max-width:860px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .main{padding:20px 18px 60px}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:60;background:var(--surface);
    border-bottom:1px solid var(--border);padding:10px 14px}
  .topbar-title{font-weight:800;font-size:16px;flex:1}
  .layout{display:block}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:39;opacity:0;pointer-events:none;transition:.25s}
  .sidebar-scrim.show{opacity:1;pointer-events:auto}
  .page-title{font-size:24px}
}
@media(max-width:460px){
  .grid-4{grid-template-columns:1fr}
  .stat-value{font-size:28px}
}

/* ============================================================
   設計精修 v2 — 依 redesign-skill（純 CSS 疊加層，不影響功能）
   判讀：學習測驗產品介面／沉穩可信／靛藍鎖定／等寬數字／克制動效
   ============================================================ */

/* 平滑捲動 + 鍵盤可視焦點環（a11y，滑鼠點擊不觸發） */
html{scroll-behavior:smooth}
:where(button,a,input,select,textarea,.option,.chip,.nav-item):focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:8px;
}

/* 數字一律等寬對齊（分數/統計/計時/題號） */
.stat-value,.quiz-count,.quiz-timer,.weak-pct,.result-sub,.stat-foot,
.chapter-qn,.side-version,.section-title .tag{font-variant-numeric:tabular-nums}

/* 標題斷行更自然，不留孤字 */
.page-title,.section-title,.result-verdict,.sc-name,.chapter-title,.mc-name{text-wrap:balance}
.page-sub,.q-stem,.concept .c-def,.chapter-summary{text-wrap:pretty}

/* 頁面極淡環境光（取自靛藍/青綠，低透明；非 AI 紫漸層） */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 560px at 12% -12%, color-mix(in srgb,var(--primary) 9%,transparent), transparent 60%),
    radial-gradient(900px 520px at 102% -4%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 55%);
}
/* 細噪點，破除數位平面感 */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 觸覺回饋：按壓回彈 + 更順的過場 */
.card,.stat{transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease}
.btn:active:not(:disabled){transform:translateY(1px) scale(.985)}
.chip:active{transform:scale(.95)}
.nav-item:active{transform:translateX(1px)}
.subject-card:active,.mode-card:active{transform:translateY(-1px)}
.option{transition:transform .13s ease, border-color .13s ease, background .13s ease}
.option:hover:not(:disabled){transform:translateX(2px)}
.option:active:not(:disabled){transform:translateX(2px) scale(.995)}

/* 側邊欄目前頁：左側指示條 */
.nav-item{position:relative}
.nav-item.active::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--primary);
}

/* 統計卡頂部細高光，增加層次 */
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 32%,transparent),transparent)}

/* 進度/命中率條加主色光暈；主按鈕帶主色調陰影 */
.progress>i,.sc-bar>i,.weak-bar>i{box-shadow:0 0 12px color-mix(in srgb,var(--primary) 30%,transparent)}
.btn-primary{box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 26%,transparent)}
.btn-primary:hover{box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 38%,transparent)}

/* q-badge 來源標籤：AI 練習題用青綠、官方用靛藍，一眼分辨 */
.q-badge{border:1px solid var(--border)}

/* 尊重「減少動態」偏好 */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  body::before,body::after{display:none}
  .spin{animation:none!important}
}

/* ============================================================
   動效 v3 — 進場 / 資料視覺化 / 作答回饋（GPU 加速，reduce 友善）
   進場僅在換頁（.nav-enter）時觸發一次，避免測驗重繪時亂閃
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.96)}60%{transform:scale(1.01)}100%{opacity:1;transform:scale(1)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes ringDraw{from{stroke-dashoffset:var(--ringc)}}
@keyframes dotPop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes optCorrect{0%{transform:scale(1)}30%{transform:scale(1.02)}60%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes optShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 換頁：內容區塊逐一浮現 */
.nav-enter > *{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both}
.nav-enter > *:nth-child(2){animation-delay:.05s}
.nav-enter > *:nth-child(3){animation-delay:.1s}
.nav-enter > *:nth-child(4){animation-delay:.15s}
.nav-enter > *:nth-child(5){animation-delay:.2s}
.nav-enter > *:nth-child(n+6){animation-delay:.24s}

/* 換頁：卡片格線錯落彈入 */
.nav-enter .grid > *{animation:popIn .5s cubic-bezier(.16,1,.3,1) both}
.nav-enter .grid > *:nth-child(2){animation-delay:.06s}
.nav-enter .grid > *:nth-child(3){animation-delay:.12s}
.nav-enter .grid > *:nth-child(4){animation-delay:.18s}
.nav-enter .grid > *:nth-child(5){animation-delay:.24s}
.nav-enter .grid > *:nth-child(6){animation-delay:.3s}

/* 換頁：教材章節逐條浮現 */
.nav-enter .chapter{animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}
.nav-enter .chapter:nth-child(2){animation-delay:.03s}
.nav-enter .chapter:nth-child(3){animation-delay:.06s}
.nav-enter .chapter:nth-child(4){animation-delay:.09s}
.nav-enter .chapter:nth-child(n+5){animation-delay:.12s}

/* 章節展開 / 解析展開 */
.chapter.open .chapter-body{animation:slideDown .3s ease both}
.explain{animation:slideDown .3s ease both}

/* 圖表：長條生長 / 描線 / 資料點彈入 / 分數環繪製（元素層級，繪出即動） */
.bar-fill{transform-box:fill-box;transform-origin:left center;animation:growX .85s cubic-bezier(.2,.8,.2,1) both}
.line-path{stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine 1.3s cubic-bezier(.4,0,.2,1) forwards}
.line-dot{transform-box:fill-box;transform-origin:center;opacity:0;animation:dotPop .35s ease both}
.ring-progress{animation:ringDraw 1.1s cubic-bezier(.4,0,.2,1) both}

/* 儀表板/分析的命中率條生長（非測驗進度條，避免作答時重播） */
.sc-bar > i,.weak-bar > i{transform-origin:left center;animation:growX .8s cubic-bezier(.2,.8,.2,1) both}

/* 作答對錯回饋 */
.option.correct{animation:optCorrect .45s ease}
.option.wrong{animation:optShake .4s ease}

/* Modal 彈入 */
.modal-box{animation:popIn .28s cubic-bezier(.16,1,.3,1) both}
.modal-scrim{animation:fadeIn .2s ease both}

/* reduce：新動畫一律停在最終狀態 */
@media(prefers-reduced-motion:reduce){
  .nav-enter > *,.nav-enter .grid > *,.nav-enter .chapter,.explain,
  .chapter.open .chapter-body,.bar-fill,.line-dot,.ring-progress,
  .sc-bar > i,.weak-bar > i,.option.correct,.option.wrong,
  .modal-box,.modal-scrim{animation:none!important}
  .line-path{stroke-dashoffset:0!important;animation:none!important}
  .line-dot{opacity:1!important}
}

/* ============================================================
   互動增強 v4 — 雙欄測驗版面 / hover 光澤 / 漣漪 / 面板動畫
   ============================================================ */
.quiz-cols{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.quiz-opts{min-width:0}
.quiz-side{position:sticky;top:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:4px}
.quiz-anim{height:150px;display:grid;place-items:center;margin:-2px auto 6px}
.quiz-anim svg{display:block}
.qs-title{font-weight:800;font-size:15px;margin:2px 0 8px;color:var(--text)}
.qs-list{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.qs-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:14px}
.qs-row:last-child{border-bottom:none}
.qs-row span{color:var(--text-mute);font-weight:600;flex-shrink:0}
.qs-row b{color:var(--text);font-weight:700;text-align:right}

/* SVG 退路的聲納動畫 */
@keyframes sonar{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes sonarDot{0%,100%{transform:scale(.9)}50%{transform:scale(1.15)}}
.sonar{transform-box:fill-box;transform-origin:center;animation:sonar 1.6s ease-out infinite}
.sonar.s2{animation-delay:.8s}
.sonar-dot{transform-box:fill-box;transform-origin:center;animation:sonarDot 1.6s ease-in-out infinite}

/* hover 光澤掃過 */
.mode-card,.subject-card,.btn{position:relative;overflow:hidden}
.mode-card::after,.subject-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--primary) 16%,transparent) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.mode-card:hover::after,.subject-card:hover::after{transform:translateX(120%)}

/* 按鈕漣漪 */
.btn .ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);
  animation:rippleGo .6s ease-out;pointer-events:none}
@keyframes rippleGo{to{transform:scale(2.6);opacity:0}}

@media(max-width:820px){
  .quiz-cols{grid-template-columns:1fr}
  .quiz-side{position:static}
  .quiz-anim{height:120px}
}
@media(prefers-reduced-motion:reduce){
  .sonar,.sonar-dot{animation:none!important;opacity:.6}
  .mode-card::after,.subject-card::after,.btn .ripple{display:none!important}
}

/* ============================================================
   蘋果風 v5 — Hero / 科目圖卡 / 玻璃質感 / 大留白
   ============================================================ */
.hero{position:relative;border-radius:24px;overflow:hidden;min-height:340px;display:flex;align-items:center;
  margin-bottom:26px;box-shadow:var(--shadow);border:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;background-image:url("../media/hero-light.jpg");background-size:cover;background-position:center;
  transform:scale(1.03);animation:heroPan 32s ease-in-out infinite alternate}
[data-theme="dark"] .hero-bg{background-image:url("../media/hero-dark.jpg")}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes heroPan{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-2%,-1%,0)}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,
  color-mix(in srgb,var(--surface) 80%,transparent) 0%,
  color-mix(in srgb,var(--surface) 34%,transparent) 46%, transparent 72%)}
.hero-inner{position:relative;padding:46px 8% 46px 44px;max-width:660px}
.hero-eyebrow{font-size:14px;font-weight:700;letter-spacing:.6px;color:var(--primary-d);margin-bottom:10px;text-transform:none}
.hero-title{font-size:clamp(28px,4.6vw,48px);font-weight:800;letter-spacing:-1px;line-height:1.04;margin-bottom:12px;text-wrap:balance}
.hero-sub{font-size:clamp(14px,1.5vw,17px);color:var(--text-soft);max-width:46ch;margin-bottom:22px;line-height:1.55}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* 大按鈕 + 玻璃按鈕 */
.btn-lg{padding:13px 26px;font-size:16.5px;border-radius:13px}
.btn-glass{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-glass:hover{background:color-mix(in srgb,var(--surface) 78%,transparent);border-color:var(--primary)}

/* 科目圖卡（Apple 產品卡） */
.sc-card{padding:0;display:flex;flex-direction:column;text-align:left;border-radius:20px}
.sc-card .sc-media{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:20px 20px 0 0}
.sc-card .sc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.sc-card:hover .sc-media img{transform:scale(1.05)}
.sc-card .sc-badge{position:absolute;top:12px;left:12px;
  background:color-mix(in srgb,var(--surface) 68%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--primary-d);
  font-weight:800;font-size:13px;padding:4px 11px;border-radius:20px;letter-spacing:.5px;
  border:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.sc-card .sc-body{padding:16px 18px 18px}
.sc-card .sc-name{font-size:18px;font-weight:800;margin-bottom:6px}
.sc-card .sc-meta{font-size:13.5px;color:var(--text-soft)}
.sc-card .sc-bar{margin-top:12px}

/* 玻璃頂列（行動版） */
@media(max-width:860px){
  .topbar{background:color-mix(in srgb,var(--surface) 72%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}

/* 蘋果風：留白與圓角 */
.section-title{margin-top:34px}
.card,.stat{border-radius:16px}

@media(max-width:600px){
  .hero-inner{padding:30px 22px}
  .hero{min-height:270px}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg{animation:none!important}
  .sc-card:hover .sc-media img{transform:none!important}
}

/* Hero 影片：深色與減少動態時退回靜態圖 */
[data-theme="dark"] .hero-video{display:none}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ============================================================
   毛邊玻璃 v7 — 全站 Apple 玻璃質感 + 大圓弧 + 游標聚光 hover
   ============================================================ */
:root{
  --radius:18px; --radius-sm:12px;
  --glass:rgba(255,255,255,.66); --glass-2:rgba(255,255,255,.5);
  --glass-brd:rgba(255,255,255,.7); --glass-hi:rgba(255,255,255,.9);
  --blur:16px;
}
[data-theme="dark"]{
  --glass:rgba(26,29,40,.55); --glass-2:rgba(30,34,48,.45);
  --glass-brd:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.13);
}

/* 更豐富的環境光，讓玻璃有東西可折射 */
body::before{
  background:
    radial-gradient(1100px 620px at 8% -12%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 60%),
    radial-gradient(1000px 560px at 104% -6%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 58%),
    radial-gradient(900px 700px at 60% 118%, color-mix(in srgb,var(--primary) 10%,transparent), transparent 60%) !important;
}

/* 玻璃表面 */
.card,.stat,.mode-card,.subject-card,.qcard,.quiz-side,.modal-box,
.chapter,.user-menu,.user-current,.callout,.explain{
  background:var(--glass) !important;
  backdrop-filter:blur(var(--blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);
  border:1px solid var(--glass-brd);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow);
}
.sidebar{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-right:1px solid var(--glass-brd);
}
.modal-scrim{background:rgba(10,12,25,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* 玻璃圓弧 */
.card,.stat{border-radius:var(--radius)}
.chip{border-radius:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.field input,select{border-radius:12px;background-color:var(--glass-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* 游標聚光 hover（跟隨滑鼠的光暈） */
.spotlight::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--primary) 20%,transparent), transparent 46%);
  opacity:0;transition:opacity .35s ease}
.spotlight:hover::before{opacity:1}
.spotlight > *{position:relative;z-index:1}

/* 卡片 hover：浮起 + 邊框發光 */
.card,.stat{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover,.stat:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-lg), 0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent)}
.subject-card:hover,.mode-card:hover{
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-lg), 0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent)}

/* 導覽/圖示 hover 微動 */
.nav-item{transition:background .18s, color .18s, transform .18s}
.nav-item:hover{transform:translateX(3px)}
/* 圖示 hover 只保留 SVG 描繪，不做位移/縮放 */
.mode-card:hover .mc-ico{transform:none}
.chip{transition:transform .15s, background .15s, color .15s, border-color .15s}
.chip:hover{transform:translateY(-2px);border-color:var(--primary)}
.stat:hover .stat-value{transition:color .25s}
.stat:hover{color:inherit}

/* 主按鈕：玻璃光暈 + hover 掃光 */
.btn-primary{box-shadow:0 4px 16px color-mix(in srgb,var(--primary) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 8px 26px color-mix(in srgb,var(--primary) 44%,transparent), inset 0 1px 0 rgba(255,255,255,.3)}

/* AI 出題預覽卡等一般 card 內文層級 */
.qcard > *, .quiz-side > *{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .spotlight::before{display:none!important}
  .card,.stat,.subject-card,.mode-card,.nav-item,.chip{transition:none!important}
  .card:hover,.stat:hover{transform:none!important}
}

/* ============================================================
   v8 — 沉浸式動態背景 / SVG 圖示 / 移除掃光
   ============================================================ */
/* 取消滑過時左到右的閃光掃過 */
.mode-card::after,.subject-card::after{display:none !important}

/* 沉浸式壁紙背景（vpick 生成，緩慢漂移；深色自動換圖） */
.app-bg{position:fixed;inset:-4%;z-index:-4;pointer-events:none;
  background-image:url("../media/bg-light.jpg");background-size:cover;background-position:center;
  animation:bgDrift 46s ease-in-out infinite alternate}
[data-theme="dark"] .app-bg{background-image:url("../media/bg-dark.jpg")}
@keyframes bgDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-2%,-1.5%,0)}}
.app-veil{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 48%,transparent)}
body::before{opacity:.5}
body{background:var(--bg)}

/* ===== SVG 圖示 ===== */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.17em;flex-shrink:0;stroke-width:1.75}
.ic-wrap{display:inline-flex;align-items:center;justify-content:center;width:1.2em;height:1.2em}
.ic-wrap .ic{width:100%;height:100%;vertical-align:middle}
.ic-lg{width:1.6em;height:1.6em}
.ic-xl{width:46px;height:46px;stroke-width:1.5}
.btn .ic{width:16px;height:16px}
.btn-lg .ic{width:18px;height:18px}
.btn-sm .ic{width:15px;height:15px}

/* 側邊欄品牌 / 導覽 / 區塊標題 圖示 */
.brand-logo{font-size:0;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.brand-logo .ic-wrap{width:20px;height:20px;color:#fff}
.nav-item .ic-wrap{width:19px;height:19px;color:currentColor;opacity:.9}
.nav-item.active .ic-wrap{opacity:1}
.sh-label{display:inline-flex;align-items:center;gap:7px}
.sh-label .ic-wrap{width:16px;height:16px}
.topbar-title .ic-wrap{width:20px;height:20px;color:var(--primary);vertical-align:-.2em}

/* 模式/動作卡圖示（主色） */
.mc-ico{display:flex;align-items:center}
.mc-ico .ic{width:26px;height:26px;color:var(--primary);stroke-width:1.7}
.co-ico .ic{width:20px;height:20px;color:var(--primary)}
.tips-head .ic,.chip .ic{width:15px;height:15px;margin-right:5px}
.e-ico{color:var(--text-mute)}

/* 使用者首字頭像 */
.user-avatar{font-weight:800;color:var(--primary-d);font-size:15px}
.um-ava{width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-d);
  display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.um-item .ic{width:15px;height:15px;margin-right:2px}

/* 計時器時鐘圖示 */
.quiz-timer{display:inline-flex;align-items:center;gap:5px}
.quiz-timer .ic{width:15px;height:15px;opacity:.8}

@media(prefers-reduced-motion:reduce){ .app-bg{animation:none!important} }

/* ============================================================
   v9 — 效能優化 + 墨流し背景
   捲動卡頓主因是大量 backdrop-filter：內容卡片改「半透明假玻璃」，
   只在側欄/頂列/Modal（不隨內容捲動）保留真模糊。
   ============================================================ */
:root{ --glass:rgba(255,255,255,.82); --glass-2:rgba(255,255,255,.72) }
[data-theme="dark"]{ --glass:rgba(24,27,38,.76); --glass-2:rgba(30,34,48,.64) }

/* 移除內容卡片的即時模糊（保留半透明 + 內光的玻璃感）*/
.card,.stat,.mode-card,.subject-card,.qcard,.quiz-side,.chapter,
.user-menu,.user-current,.callout,.explain,.chip,.field input,select{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
/* 只保留在這些不捲動表面（成本低）*/
.sidebar{backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
.modal-box{backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}

/* GPU 提示，減少捲動重繪 */
.app-bg{will-change:transform;transform:translateZ(0)}
.hero-video{will-change:transform}
body::after{display:none}          /* 移除噪點層，改由墨流與壁紙提供質感 */
body::before{opacity:.42}

/* 墨流し canvas（游標墨水），在壁紙之上、內容之下 */
.ink{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}


/* ============================================================
   v13 — 精簡模式（手機/低階/減少動態）：關閉重特效以求流暢
   ============================================================ */
.lite .app-bg{animation:none !important}
.lite .hero-video{display:none !important}
.lite .spotlight::before{display:none !important}

/* 鍵盤焦點環（可鍵盤操作的自訂元素） */
.chapter-head:focus-visible,.side-section-head:focus-visible,.user-current:focus-visible{
  outline:2px solid var(--primary);outline-offset:-2px;border-radius:10px}

/* 倒數計時最後 60 秒警示 */
.quiz-timer.warn{color:var(--danger)!important;font-weight:800;animation:pulseWarn 1s ease-in-out infinite}
@keyframes pulseWarn{0%,100%{opacity:1}50%{opacity:.55}}

/* 題目收藏鈕（★） */
.qz-bm{margin-left:auto;background:none;border:none;color:var(--text-mute);padding:5px;border-radius:8px;display:inline-flex;cursor:pointer;transition:.15s}
.qz-bm:hover{color:var(--warn);background:var(--surface-2)}
.qz-bm .ic{width:18px;height:18px;fill:none;transition:fill .15s}
.qz-bm.on{color:var(--warn)}
.qz-bm.on .ic{fill:var(--warn)}

/* 教材搜尋 */
.learn-search{width:100%;max-width:420px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--glass-2,var(--surface-2));color:var(--text);font-size:15px;margin-bottom:16px}
.learn-search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.hl{background:color-mix(in srgb,var(--warn) 35%,transparent);border-radius:3px;padding:0 1px}

/* 墨水開關：關閉時淡化並讓水滴圖示留白 */
#inkToggle.is-off{opacity:.6}
#inkToggle.is-off .ic{opacity:.7}

/* ============================================================
   Apple 玻璃 v2（junior）— 質感升級
   桌面非 LITE：內容卡回歸「真模糊＋高飽和」的蘋果玻璃；
   邊緣 1px 亮邊捕光、內頂高光、更柔的大半徑陰影。
   LITE / reduced-motion 維持假玻璃保流暢。
   ============================================================ */
:root{
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.44);
  --glass-brd:rgba(255,255,255,.75); --glass-hi:rgba(255,255,255,.95);
}
[data-theme="dark"]{
  --glass:rgba(24,27,40,.52); --glass-2:rgba(30,34,50,.42);
  --glass-brd:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.16);
}
html:not(.lite) .card,
html:not(.lite) .mode-card,
html:not(.lite) .subject-card,
html:not(.lite) .stat-card,
html:not(.lite) .chapter,
html:not(.lite) .review-item{
  backdrop-filter:blur(26px) saturate(1.9) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.9) !important;
  border:1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 0 .5px rgba(255,255,255,.06),
    0 24px 60px -24px rgba(30,34,90,.28);
}
html:not(.lite) body[data-theme="dark"] .card{ box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 60px -24px rgba(0,0,0,.55); }
.sidebar{ backdrop-filter:blur(30px) saturate(1.9); -webkit-backdrop-filter:blur(30px) saturate(1.9);
  border-right:1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), 12px 0 40px -28px rgba(30,34,90,.25); }
.topbar{ backdrop-filter:blur(26px) saturate(1.9); -webkit-backdrop-filter:blur(26px) saturate(1.9); }
.modal-box{ backdrop-filter:blur(30px) saturate(1.9); -webkit-backdrop-filter:blur(30px) saturate(1.9);
  border:1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), 0 40px 100px -30px rgba(0,0,0,.4); }
.chip{ border:1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi); }
.btn-glass{ backdrop-filter:blur(18px) saturate(1.8); -webkit-backdrop-filter:blur(18px) saturate(1.8);
  border:1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -12px rgba(30,34,90,.3); }
/* 認證切換 chips */
.cert-switch .chip{ font-size:13px; padding:5px 12px }
.cert-switch .chip.on{ background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 88%, #fff), var(--primary)); color:var(--on-primary,#fff); border-color:transparent }
/* hero 玻璃卡與大標更精緻 */
.hero-inner{ text-shadow: 0 1px 24px rgba(255,255,255,.25) }
[data-theme="dark"] .hero-inner{ text-shadow: 0 1px 24px rgba(0,0,0,.45) }
/* LITE 維持假玻璃 */
.lite .card,.lite .mode-card,.lite .subject-card,.lite .stat-card,.lite .chapter,.lite .review-item{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* 主題雙圖切換：跟隨站內深淺色即時換圖 */
.sc-media .img-dark{display:none}
body[data-theme="dark"] .sc-media .img-light{display:none}
body[data-theme="dark"] .sc-media .img-dark{display:block}

/* 修：使用者頭像改鮮明漸層圓（避免與名字重複的破圖感） */
.user-avatar{
  background:linear-gradient(135deg,var(--primary),var(--accent)) !important;
  color:#fff !important; font-weight:800; font-size:14px;
  box-shadow:0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
}
/* 修：測驗摘要動畫圓點 → 主題圖片 */
.quiz-anim.quiz-anim-img{height:auto;display:block;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin:0 0 14px}
.quiz-anim-img img{width:100%;height:100%;object-fit:cover;display:none}
.quiz-anim-img .img-light{display:block}
body[data-theme="dark"] .quiz-anim-img .img-light{display:none}
body[data-theme="dark"] .quiz-anim-img .img-dark{display:block}

/* 圖片停留動畫：原地緩慢放大＋微增亮（Apple 式；不位移、不掃光） */
.sc-media{overflow:hidden}
.sc-media img,.quiz-anim-img img{
  transition:transform .65s cubic-bezier(.25,.7,.25,1), filter .65s ease;
  will-change:transform;
}
.subject-card:hover .sc-media img{transform:scale(1.045);filter:brightness(1.05) saturate(1.08)}
.quiz-anim-img:hover img{transform:scale(1.045);filter:brightness(1.05) saturate(1.08)}
.lite .sc-media img,.lite .quiz-anim-img img{transition:none}
.lite .subject-card:hover .sc-media img,.lite .quiz-anim-img:hover img{transform:none;filter:none}
@media (prefers-reduced-motion: reduce){
  .sc-media img,.quiz-anim-img img{transition:none}
  .subject-card:hover .sc-media img,.quiz-anim-img:hover img{transform:none;filter:none}
}

/* 停留動畫影片層 */
.hover-media{position:relative}
.hover-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:1}
.hover-vid.on{opacity:1}
.sc-badge{z-index:2}
.lite .hover-vid{display:none}
@media (prefers-reduced-motion: reduce){ .hover-vid{display:none} }

/* 修：使用者選單改近不透明面板，避免下方內容透字重疊 */
.user-menu{
  background:rgba(255,255,255,.97) !important; z-index:90;
  backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 18px 50px rgba(20,24,60,.25);
}
body[data-theme="dark"] .user-menu{ background:rgba(24,27,40,.97) !important; }

/* 深淺色浮動鈕（右上角，統一入口） */
.theme-fab{position:fixed;top:12px;right:14px;z-index:30;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);
  background:var(--glass-2,rgba(255,255,255,.72));backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  color:var(--text);cursor:pointer;box-shadow:0 6px 20px rgba(20,24,60,.18);transition:transform .2s, background .2s}
.theme-fab:hover{transform:translateY(-1px)}
.theme-fab svg{width:18px;height:18px}
@media (max-width:820px){ .theme-fab{top:9px;right:10px;width:34px;height:34px} }