:root{
  --green:#5a9178; --green-d:#3b7d6e; --green-l:#e8f3ee; --green-bar:#7fb09a;
  --ink:#2b3a33; --ink2:#55665d; --line:#d9e5df; --bg:#f4f7f5; --gold:#c0392b;
  --card:#fff; --radius:14px; --shadow:0 2px 10px rgba(40,80,60,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"PingFang TC","Heiti TC","Microsoft JhengHei",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--green-d)}
/* ---- top bar ---- */
header.top{background:linear-gradient(180deg,#6aa78f,#5a9178);color:#fff;
  padding:0;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.top-inner{max-width:1100px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-size:20px;font-weight:800;letter-spacing:.5px;display:flex;align-items:center;gap:10px}
.brand .badge{background:#fff;color:var(--green-d);border-radius:8px;padding:2px 9px;font-size:13px;font-weight:800}
.brand small{font-weight:500;opacity:.92;font-size:13px}
nav.tabs{margin-left:auto;display:flex;gap:4px;background:rgba(255,255,255,.16);padding:4px;border-radius:11px}
nav.tabs button{background:transparent;border:0;color:#eafff5;font:inherit;font-weight:700;font-size:14.5px;
  padding:7px 16px;border-radius:8px;cursor:pointer;transition:.15s}
nav.tabs button:hover{background:rgba(255,255,255,.16)}
nav.tabs button.active{background:#fff;color:var(--green-d)}
main{max-width:1100px;margin:0 auto;padding:26px 22px 70px}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2.sec{font-size:22px;margin:0 0 4px;font-weight:800}
.sub{color:var(--ink2);margin:0 0 22px;font-size:14.5px}
/* ---- home ---- */
.hero{background:linear-gradient(135deg,#5a9178,#3b7d6e);color:#fff;border-radius:18px;
  padding:30px 30px 26px;margin-bottom:26px;box-shadow:var(--shadow)}
.hero h1{margin:0 0 8px;font-size:27px;font-weight:800}
.hero p{margin:0;opacity:.95;font-size:15px;max-width:680px}
.hero .stats{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.hero .stats div{font-size:13px;opacity:.9}
.hero .stats b{display:block;font-size:26px;font-weight:800;opacity:1}
.hero-progress{margin-top:20px;background:rgba(255,255,255,.16);border-radius:12px;padding:13px 16px;
  cursor:pointer;transition:.15s;max-width:460px}
.hero-progress:hover{background:rgba(255,255,255,.24)}
.hero-progress .hp-row{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;margin-bottom:8px}
.hero-progress .hp-pct{opacity:.95}
.hero-progress .hp-bar{height:10px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
.hero-progress .hp-fill{height:100%;background:#fff;border-radius:6px;transition:width .5s ease}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.school-card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  border-top:5px solid var(--sc);cursor:pointer;transition:.18s;border:1px solid var(--line);border-top-width:5px}
.school-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(40,80,60,.13)}
.school-card .sname{font-size:18px;font-weight:800;color:var(--sc)}
.school-card .sfull{font-size:12.5px;color:var(--ink2);margin-top:2px}
.school-card .sdept{font-size:12.5px;color:var(--ink2);margin-top:6px;line-height:1.5}
.school-card .row{display:flex;gap:14px;margin-top:14px;font-size:12.5px;color:var(--ink2)}
.school-card .row b{color:var(--ink);font-size:18px;display:block}
.school-card .chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:5px}
.chip{background:var(--green-l);color:var(--green-d);font-size:11.5px;padding:2px 9px;border-radius:20px}
.howto{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.howto h3{margin:0 0 12px;font-size:16px}
.howto ol{margin:0;padding-left:20px;color:var(--ink2);font-size:14px}
.howto ol li{margin-bottom:7px}
.howto b{color:var(--ink)}
/* ---- filters ---- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.filters .fl{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.filters select,.filters input{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
.filters input[type=search]{min-width:200px}
.filters .count{margin-left:auto;font-size:13px;color:var(--ink2)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;font:inherit;font-size:13px;padding:6px 12px;cursor:pointer;color:var(--ink2)}
.seg button.on{background:var(--green);color:#fff;font-weight:700}
/* ---- question list ---- */
.qlist{display:grid;gap:14px}
.qcard{background:#fff;border:1px solid var(--line);border-left:5px solid var(--sc);border-radius:12px;
  padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.qcard:hover{box-shadow:0 6px 18px rgba(40,80,60,.12);transform:translateY(-2px)}
.qcard .qhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tag{font-size:12px;font-weight:700;padding:2px 9px;border-radius:6px}
.tag.school{background:var(--sc);color:#fff}
.tag.year{background:#eef3f7;color:#444}
.tag.subject{background:var(--green-l);color:var(--green-d)}
.tag.src{background:#fff;border:1px solid var(--line);color:var(--ink2);font-weight:500}
.qcard .qprev{color:var(--ink2);font-size:13.5px;max-height:44px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qcard .qmeta{margin-top:8px;font-size:12px;color:var(--ink2);display:flex;gap:14px;flex-wrap:wrap}
.linkonly{opacity:.85}
.empty{text-align:center;color:var(--ink2);padding:50px 0;font-size:15px}
/* ---- exam paper (考選部 style) ---- */
.paper-wrap{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.exam-head{background:#cfe3d8;color:#234;border-bottom:1px solid #b6d2c4}
.exam-head .h1{background:var(--green-bar);color:#fff;padding:10px 18px;font-weight:800;font-size:15px}
.exam-head .grid{display:flex;flex-wrap:wrap;gap:6px 26px;padding:11px 18px;font-size:13.5px}
.exam-head .grid span b{color:var(--green-d)}
.exam-head .bar2{background:#dcebe3;display:flex;flex-wrap:wrap;gap:6px 26px;padding:9px 18px;
  font-size:13.5px;border-top:1px solid #c4ddd1}
.exam-head .bar2 .time{margin-left:auto;color:var(--gold);font-weight:800}
.paper-body{padding:22px 26px}
.paper-body .notice{background:#fbf6e7;border:1px solid #ecd9a6;color:#7a5f1e;font-size:13px;
  padding:8px 12px;border-radius:8px;margin-bottom:16px}
.qtext{white-space:pre-wrap;font-size:15.5px;line-height:2.05;color:#243029;
  font-family:"PingFang TC","Heiti TC",serif}
.qtext .pts{color:var(--gold);font-weight:800;background:#fdeceb;padding:0 5px;border-radius:4px}
.qtext .head{color:var(--green-d);font-weight:800}
/* ---- 題目分段 + 小題便利貼筆記 ---- */
.qflow{white-space:pre-wrap}
.qflow.meta{margin-top:18px;padding-top:12px;border-top:1px dashed var(--line);   /* PDF 頁首/標題等非題目內容,弱化並與題目隔開 */
  color:var(--ink2);font-size:13px;line-height:1.7;opacity:.85}
.subq{position:relative;white-space:pre-wrap;padding:8px 92px 8px 14px;margin:2px 0;
  border-left:3px solid transparent;border-radius:8px;transition:.15s}
.subq:hover{background:#fafdfb;border-left-color:var(--green-l)}
.subq-text{white-space:pre-wrap}
.memo-btn{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap;font:inherit;font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;
  color:#9a7b1e;background:#fff7da;border:1px solid #ecd98b;border-radius:18px;padding:5px 11px;
  box-shadow:0 1px 3px rgba(150,120,20,.12);transition:.15s}
.memo-btn:hover{background:#ffefb0;transform:translateY(-1px)}
.memo-btn .memo-lab{font-size:12px}
.memo-btn.has{background:#f08a24;border-color:#d4761a;color:#fff;          /* 已複習:橘色,內容已編寫 */
  box-shadow:0 1px 4px rgba(214,118,26,.35)}
.memo-btn.on{background:#5a9178;border-color:#3b7d6e;color:#fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.memo-panel{display:none;white-space:normal;margin:10px 0 4px}
.memo-panel.open{display:block;animation:fade .2s ease}
.memo-tb{display:flex;flex-wrap:wrap;gap:3px;align-items:center;background:#fff7da;
  border:1px solid #ecd98b;border-bottom:0;border-radius:9px 9px 0 0;padding:6px 8px}
.memo-tb button{min-width:28px;height:28px;border:1px solid transparent;background:transparent;
  border-radius:6px;font-size:14px;cursor:pointer;color:#5b4708;display:inline-flex;align-items:center;justify-content:center}
.memo-tb button:hover{background:#fff;border-color:#ecd98b}
.memo-tb .divider{width:1px;height:18px;background:#e3cd86;margin:0 4px}
.memo-tb .grow{flex:1}
.memo-tb .memo-saved{font-size:12px;color:var(--green-d);font-weight:700;margin-right:6px}
.memo-tb .memo-clear{min-width:auto;padding:0 10px;font-size:12.5px;font-weight:700;color:#a05a52}
.memo-ed{min-height:96px;border:1px solid #ecd98b;border-radius:0 0 9px 9px;padding:12px 14px;
  font-size:14.5px;line-height:1.9;outline:none;background:#fffdf4}
.memo-ed:focus{box-shadow:inset 0 0 0 2px #ffe9a3}
.memo-ed ul,.memo-ed ol{margin:6px 0;padding-left:24px}
.memo-ed:empty:before{content:attr(data-ph);color:#bfae74}
@media(max-width:560px){.subq{padding-right:14px}.mcq-stem{padding-right:0}.memo-btn{position:static;margin:0 0 6px}}
/* ---- 選擇題:滿版題幹 + 每選項一行可勾選 ---- */
.mcq{position:relative;margin:16px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:#fff;box-shadow:var(--shadow)}
.mcq-stem{display:flex;gap:9px;align-items:baseline;font-size:16px;line-height:1.95;
  font-weight:600;color:#243029;margin-bottom:14px;padding-right:74px}   /* 右上角讓出便利貼鈕空間 */
.mcq-stem .mcq-num{color:var(--green-d);font-weight:800;flex:none}
.mcq-stem .mcq-q{flex:1}                                 /* 題目滿版,自然換行 */
.mcq-opts{display:flex;flex-direction:column;gap:10px}  /* 每個選項空一行 */
.mcq-opt{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;line-height:1.75;font-size:15px;color:#33433b;transition:.12s}
.mcq-opt:hover{background:var(--green-l);border-color:var(--green-bar)}
.mcq-opt input[type=checkbox]{margin:5px 0 0;width:18px;height:18px;flex:none;
  cursor:pointer;accent-color:var(--green)}
.mcq-opt .okey{font-weight:800;color:var(--green-d);flex:none}
.mcq-opt .otxt{flex:1}
.mcq-opt.on{background:var(--green-l);border-color:var(--green);
  box-shadow:inset 0 0 0 1px var(--green);font-weight:600}
.backbtn{background:#fff;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:14px;
  font-weight:700;color:var(--ink2);padding:8px 16px;cursor:pointer;margin-bottom:16px}
.backbtn:hover{background:var(--green-l)}
.backlink{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:14px;
  font-weight:700;color:var(--green-d);text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:7px 14px;margin-bottom:16px;box-shadow:var(--shadow);transition:.15s}
.backlink:hover{background:var(--green-l);transform:translateX(-2px)}
.src-link{display:inline-block;margin-top:18px;font-size:13px}
/* ---- answer editor ---- */
.answer-sec{margin-top:24px;border-top:2px dashed var(--line);padding-top:20px}
.answer-sec h4{margin:0 0 4px;font-size:16px}
.answer-sec .hint{color:var(--ink2);font-size:13px;margin:0 0 12px}
.toolbar{display:flex;flex-wrap:wrap;gap:3px;background:#f0f5f2;border:1px solid var(--line);
  border-bottom:0;border-radius:9px 9px 0 0;padding:7px 9px;align-items:center}
.toolbar button{min-width:30px;height:30px;border:1px solid transparent;background:transparent;
  border-radius:6px;font-size:15px;cursor:pointer;color:#37463e;display:inline-flex;align-items:center;justify-content:center}
.toolbar button:hover{background:#fff;border-color:var(--line)}
.toolbar .divider{width:1px;height:20px;background:var(--line);margin:0 4px}
.editor{min-height:240px;border:1px solid var(--line);border-radius:0 0 9px 9px;padding:16px 18px;
  font-size:15.5px;line-height:2.0;outline:none;background:#fff}
.editor:focus{box-shadow:inset 0 0 0 2px var(--green-l)}
.editor ul,.editor ol{margin:6px 0;padding-left:26px}
.editor:empty:before{content:attr(data-ph);color:#9bb0a6}
.ans-foot{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.wc{font-size:13px;color:var(--ink2)}
.wc b{color:var(--green-d)}
.ans-foot .save{margin-left:auto;display:flex;gap:8px}
.btn{font:inherit;font-size:13.5px;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2)}
.btn.primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn.primary:hover{background:var(--green-d)}
.saved-note{font-size:12.5px;color:var(--green-d)}
/* ---- frameworks ---- */
.fwlist{display:grid;gap:14px}
.fwcard{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.fwcard .fwh{background:var(--green-l);padding:12px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fwcard .fwh .topic{font-size:16px;font-weight:800;color:var(--green-d)}
.fwcard .fwh .yr{font-size:12px;color:var(--ink2);background:#fff;padding:2px 9px;border-radius:20px;border:1px solid var(--line)}
.fwcard .fwbody{padding:14px 18px}
.fwcard .blk{margin-bottom:12px}
.fwcard .blk:last-child{margin-bottom:0}
.fwcard .blk .lab{font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:3px;display:flex;align-items:center;gap:6px}
.fwcard .blk .lab .dot{width:8px;height:8px;border-radius:3px;background:var(--sc)}
.fwcard .blk .txt{font-size:14px;color:var(--ink2);line-height:1.85}
.fw-school-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--sc);color:#fff;margin-left:auto}
.fw-check{font:inherit;font-size:12px;font-weight:700;padding:4px 11px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink2);white-space:nowrap}
.fw-check:hover{background:var(--green-l)}
.fw-check.on{background:var(--green);border-color:var(--green);color:#fff}
.fwcard.fw-done{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.fwcard.fw-done .fwh{background:#e3f2ea}
/* ---- faculty ---- */
.fac-group{margin-bottom:26px}
.fac-ghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--sc)}
.fac-ghead .gname{font-size:18px;font-weight:800;color:var(--sc)}
.fac-ghead .gdept{font-size:12.5px;color:var(--ink2)}
.fac-ghead .gcount{margin-left:auto;font-size:12.5px;color:var(--ink2)}
.faclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.faccard{background:#fff;border:1px solid var(--line);border-left:5px solid var(--sc);border-radius:12px;
  padding:15px 17px;box-shadow:var(--shadow)}
.faccard .fname{font-size:17px;font-weight:800;color:var(--ink)}
.faccard .ftitle{font-size:12px;font-weight:700;color:#fff;background:var(--sc);padding:1px 9px;border-radius:6px;margin-left:7px;vertical-align:middle}
.faccard .frow{margin-top:9px;font-size:13px;line-height:1.7}
.faccard .frow .lab{font-weight:800;color:var(--green-d);font-size:12px;display:block;margin-bottom:1px}
.faccard .frow .txt{color:var(--ink2)}
.faccard .ftags{margin-top:9px;display:flex;flex-wrap:wrap;gap:5px}
.faccard .ftag{background:var(--green-l);color:var(--green-d);font-size:11.5px;padding:2px 9px;border-radius:20px}
.faccard .fsrc{display:inline-block;margin-top:10px;font-size:12px;color:var(--green-d)}
.faccard .fworks{margin-top:9px;font-size:12.5px;color:#9a6b00;background:#fff5e0;border:1px solid #f0d68a;
  border-radius:8px;padding:6px 10px;line-height:1.6}
/* ---- random draw ---- */
.draw-intro{background:linear-gradient(135deg,#5a9178,#3b7d6e);color:#fff;border-radius:18px;
  padding:26px 28px;margin-bottom:22px;box-shadow:var(--shadow)}
.draw-intro h1{margin:0 0 8px;font-size:23px;font-weight:800}
.draw-intro p{margin:0 0 6px;opacity:.95;font-size:14.5px;max-width:680px}
.draw-spec{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.draw-spec div{background:rgba(255,255,255,.16);border-radius:11px;padding:10px 16px;font-size:13.5px}
.draw-spec b{display:block;font-size:19px;font-weight:800}
.draw-btn{font:inherit;font-size:16px;font-weight:800;padding:13px 26px;border-radius:11px;cursor:pointer;
  border:0;background:#fff;color:var(--green-d);box-shadow:0 4px 14px rgba(0,0,0,.16);margin-top:18px}
.draw-btn:hover{transform:translateY(-2px)}
.draw-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 16px;box-shadow:var(--shadow);margin-bottom:16px;position:sticky;top:64px;z-index:20}
.draw-bar .timer{font-size:20px;font-weight:800;color:var(--green-d);font-variant-numeric:tabular-nums}
.draw-bar .tlab{font-size:12.5px;color:var(--ink2)}
.draw-bar .grow{flex:1}
.exam-sec-title{font-size:17px;font-weight:800;color:var(--green-d);margin:22px 0 12px;
  padding-bottom:7px;border-bottom:2px solid var(--green-l)}
.dq{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:13px;background:#fff;box-shadow:var(--shadow)}
.dq .dq-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.dq .num{width:26px;height:26px;flex-shrink:0;border-radius:7px;background:var(--green);color:#fff;
  font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.dq .qbody{font-size:15px;line-height:1.85;color:#243029;flex:1;min-width:200px}
.dq .pts{color:var(--gold);font-weight:800;font-size:12.5px;background:#fdeceb;padding:1px 8px;border-radius:5px}
.dq .src{font-size:11.5px;color:#fff;font-weight:700;padding:1px 8px;border-radius:5px}
.dq textarea,.dq input.tin{width:100%;font:inherit;font-size:14.5px;border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;margin-top:6px;background:#fcfdfc;color:var(--ink);resize:vertical}
.dq textarea{min-height:90px;line-height:1.8}
.dq textarea:focus,.dq input.tin:focus{outline:none;box-shadow:inset 0 0 0 2px var(--green-l)}
.draw-note{background:#fbf6e7;border:1px solid #ecd9a6;color:#7a5f1e;font-size:13px;
  padding:10px 14px;border-radius:10px;margin:6px 0 18px;line-height:1.7}
/* ---- progress ---- */
.pg-top{display:grid;grid-template-columns:230px 1fr;gap:18px;margin-bottom:24px}
.ring-card{background:linear-gradient(135deg,#5a9178,#3b7d6e);color:#fff;border-radius:16px;padding:22px;
  box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring{width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(#fff var(--pct),rgba(255,255,255,.28) 0);margin-bottom:12px}
.ring .inner{width:108px;height:108px;border-radius:50%;background:#46836f;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.ring .inner .big{font-size:30px;font-weight:800;line-height:1}
.ring .inner .small{font-size:12px;opacity:.9;margin-top:3px}
.ring-card .cap{font-size:13.5px;opacity:.95}
.ring-card .cap b{font-size:16px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.stat-card h3{margin:0 0 14px;font-size:15px;display:flex;align-items:center;gap:8px}
.statrow{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:13px}
.statrow:last-child{margin-bottom:0}
.statrow .lab{width:84px;flex-shrink:0;color:var(--ink);font-weight:600;text-align:right}
.statrow .track{flex:1;height:18px;background:var(--green-l);border-radius:9px;overflow:hidden;position:relative}
.statrow .fill{height:100%;border-radius:9px;transition:width .5s ease}
.statrow .val{width:62px;flex-shrink:0;color:var(--ink2);font-size:12.5px}
.statrow .val b{color:var(--ink)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
@media(max-width:760px){.pg-top{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}}
.cl-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.cl-toolbar .count{margin-left:auto;font-size:13px;color:var(--ink2)}
.cl-group{margin-bottom:22px}
.cl-ghead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cl-ghead .gname{font-size:16px;font-weight:800}
.cl-ghead .gbar{flex:1;height:8px;background:var(--green-l);border-radius:5px;overflow:hidden;max-width:260px}
.cl-ghead .gbar .gfill{height:100%;border-radius:5px}
.cl-ghead .gpct{font-size:12.5px;color:var(--ink2)}
.cl-table{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.cl-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line);
  cursor:pointer;transition:.12s}
.cl-row:first-child{border-top:0}
.cl-row:hover{background:var(--green-l)}
.cl-row.done{background:#f1f8f4}
.cl-check{width:22px;height:22px;border:2px solid var(--line);border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:#fff;transition:.12s}
.cl-row.done .cl-check{background:var(--green);border-color:var(--green)}
.cl-info{flex:1;min-width:0}
.cl-info .t{font-size:14.5px;font-weight:600;color:var(--ink)}
.cl-row.done .cl-info .t{color:var(--ink2)}
.cl-info .m{font-size:12px;color:var(--ink2);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mini-tag{font-size:11px;padding:1px 7px;border-radius:5px}
.mini-tag.draft{background:#fff5e0;color:#9a6b00;border:1px solid #f0d68a}
.mini-tag.link{background:#eef1f4;color:#667;border:1px solid var(--line)}
.cl-open{font-size:12px;color:var(--green-d);flex-shrink:0;opacity:.7}
.note-box{background:#fbf6e7;border:1px solid #ecd9a6;color:#7a5f1e;font-size:13px;
  padding:11px 15px;border-radius:10px;margin-bottom:20px;line-height:1.7}
footer{text-align:center;color:var(--ink2);font-size:12.5px;padding:24px;border-top:1px solid var(--line);margin-top:20px}
@media(max-width:640px){
  .top-inner{padding:11px 14px}.brand{font-size:17px}
  nav.tabs{width:100%;margin-left:0}nav.tabs button{flex:1;padding:7px 6px;font-size:13px}
  main{padding:18px 13px 60px}.hero{padding:22px 18px}
}
/* ---- 學習卡 翻牌遊戲 ---- */
.card-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;margin-bottom:18px;box-shadow:var(--shadow)}
.card-bar .card-prog{font-weight:800;color:var(--green-d)}
.card-bar .card-score{color:var(--ink2);font-size:14px}
.card-bar .card-score b{color:var(--green-d)}
.card-bar .grow{flex:1}
.card-q{background:linear-gradient(135deg,#5a9178,#3b7d6e);color:#fff;border-radius:14px;
  padding:22px 24px;font-size:18px;line-height:1.8;font-weight:700;box-shadow:var(--shadow);margin-bottom:18px}
.card-q .card-qnum{display:inline-block;background:#fff;color:var(--green-d);font-weight:800;
  border-radius:8px;padding:1px 10px;margin-right:10px}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:560px){.card-grid{grid-template-columns:1fr}}
.qcard-flip{cursor:pointer;perspective:1000px}
.qcard-flip[onclick]:hover .qcard-inner{box-shadow:0 8px 22px rgba(40,80,60,.16)}
.qcard-inner{position:relative;transition:transform .5s;transform-style:preserve-3d;border-radius:13px}
.qcard-flip.flipped .qcard-inner{transform:rotateY(180deg)}
.qcard-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--line);
  border-radius:13px;padding:18px 18px 18px 16px;background:#fff;display:flex;align-items:flex-start;gap:11px;
  min-height:84px;font-size:15px;line-height:1.7;color:#33433b}
.qcard-front{position:relative}
.qcard-back{position:absolute;inset:0;transform:rotateY(180deg);align-items:center}
.qcard-face .opt-key{font-weight:800;color:var(--green-d);font-size:17px;flex:none;
  width:30px;height:30px;border-radius:50%;background:var(--green-l);display:inline-flex;align-items:center;justify-content:center}
.qcard-face .opt-txt{flex:1;padding-top:3px}
.qcard-flip[onclick]:hover .qcard-front{border-color:var(--green-bar);background:var(--green-l)}
.qcard-back .back-flag{position:absolute;top:8px;right:12px;font-weight:800;font-size:13px}
.qcard-flip.correct .qcard-back{background:#e7f6ee;border-color:var(--green)}
.qcard-flip.correct .qcard-back .back-flag{color:var(--green-d)}
.qcard-flip.correct .qcard-back .opt-key{background:var(--green);color:#fff}
.qcard-flip.wrong .qcard-back{background:#fdecea;border-color:#d9534f}
.qcard-flip.wrong .qcard-back .back-flag{color:#c0392b}
.qcard-flip.wrong .qcard-back .opt-key{background:#d9534f;color:#fff}
.qcard-flip.dim .qcard-back{background:#f4f6f5;border-color:var(--line);opacity:.7}
.card-hint{text-align:center;color:var(--ink2);font-size:14px;margin:18px 0 4px}
.card-explain{margin-top:18px;border-radius:12px;padding:16px 18px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.card-explain.ok{border-left:5px solid var(--green)}
.card-explain.no{border-left:5px solid #d9534f}
.card-explain .ce-head{font-size:16px;font-weight:800;margin-bottom:8px}
.card-explain.ok .ce-head{color:var(--green-d)}
.card-explain.no .ce-head{color:#c0392b}
.card-explain .ce-why{font-size:14.5px;line-height:1.85;color:#33433b;margin-bottom:12px;white-space:pre-wrap}
.card-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.card-nav .btn{flex:1;max-width:220px}
/* ---- 讀書筆記 STUDY NOTES ---- */
.study-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:680px){.study-cards{grid-template-columns:1fr}}
.study-card{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--green);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:.18s}
.study-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(40,80,60,.13)}
.study-card .study-name{font-size:19px;font-weight:800;color:var(--green-d)}
.study-terms{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.study-term-tag{background:var(--green-l);color:var(--green-d);font-size:12.5px;font-weight:700;
  padding:3px 11px;border-radius:20px}
.study-bar{height:9px;background:var(--green-l);border-radius:5px;overflow:hidden;margin-top:6px}
.study-fill{height:100%;background:var(--green);border-radius:5px;transition:width .5s}
.study-cap{font-size:13px;color:var(--ink2);margin-top:8px}
.study-cap b{color:var(--green-d)}
.seg.study-seg{margin-bottom:20px}
.study-body .term-block{margin-bottom:22px}
.term-head{display:flex;align-items:baseline;gap:12px;margin-bottom:11px;
  border-bottom:2px solid var(--green-l);padding-bottom:6px}
.term-head .term-label{font-size:16px;font-weight:800;color:var(--ink)}
.term-head .term-prog{font-size:13px;color:var(--ink2)}
.cls-grid{display:flex;flex-wrap:wrap;gap:9px}
.cls-chip{min-width:46px;height:40px;padding:0 12px;border:1.5px solid var(--line);background:#fff;
  border-radius:9px;font:inherit;font-size:14.5px;font-weight:700;color:var(--ink2);cursor:pointer;transition:.12s;
  display:inline-flex;align-items:center;justify-content:center;gap:3px}
.cls-chip:hover{background:var(--green-l);border-color:var(--green-bar);color:var(--green-d)}
.cls-chip.has{background:var(--green);border-color:var(--green-d);color:#fff}
.cls-nav{display:flex;gap:8px}
.book-empty{background:#fbf6e7;border:1px solid #ecd9a6;color:#7a5f1e;border-radius:12px;
  padding:18px 20px;font-size:14.5px;line-height:1.9}
.book-list{display:flex;flex-direction:column;gap:10px}
.book-item{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:12px 16px;box-shadow:var(--shadow)}
.book-type{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:20px;flex:none}
.book-recommended{background:#fdece0;color:#b5651d}
.book-owned{background:var(--green-l);color:var(--green-d)}
.book-library{background:#e7eefb;color:#3a5a9a}
.book-title{font-weight:700;font-size:15px}
.book-author,.book-teacher{font-size:12.5px;color:var(--ink2)}
.book-intro{background:#fbf6e7;border:1px solid #ecd9a6;color:#7a5f1e;border-radius:10px;
  padding:11px 15px;font-size:13.5px;line-height:1.8;margin-bottom:14px}
.book-intro b{color:#5f4a12}
/* ---- 讀書筆記 關鍵字搜尋結果 ---- */
.note-result{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:10px;padding:13px 16px;margin-bottom:10px;cursor:pointer;transition:.13s;box-shadow:var(--shadow)}
.note-result:hover{background:var(--green-l);transform:translateX(2px)}
.note-result .nr-head{font-size:14.5px;font-weight:800;color:var(--green-d);margin-bottom:5px}
.note-result .nr-snip{font-size:13.5px;color:var(--ink2);line-height:1.7}
.note-result mark{background:#ffe9a3;color:#5b4708;border-radius:3px;padding:0 2px;font-weight:700}
/* ---- 逐字稿標題欄 + 滿版搜尋 ---- */
.note-title-input{width:100%;font:inherit;font-size:18px;font-weight:800;color:var(--ink);
  border:0;border-bottom:2px solid var(--line);padding:6px 2px 10px;margin-bottom:14px;outline:none;background:transparent}
.note-title-input::placeholder{color:#b3c2ba;font-weight:600;font-size:16px}
.note-title-input:focus{border-bottom-color:var(--green)}
#study-q{flex:1;min-width:0}