:root{
  --bg:#fbfaf8; --surface:#fff; --surface-2:#f4f2ee; --line:#e3ded6;
  --ink:#1d1c1a; --ink-2:#55504a; --ink-3:#8a837a;
  --navy:#1c4f7c; --navy-soft:#e8f0f7;
  --gold:#b8791f; --gold-soft:#fdf3e2;
  --ok:#2f6b45; --ok-soft:#e7f2ea;
  --bad:#a3352c; --bad-soft:#fbeae8;
  --code-bg:#1b2129; --code-ink:#d7dae0;
  --r:12px;
  --shadow:0 1px 2px rgba(29,28,26,.05),0 4px 14px rgba(29,28,26,.05);
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,
         BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.7}
a{color:var(--navy)}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);
  padding:1px 5px;border-radius:4px;border:1px solid var(--line)}
pre{font-family:var(--mono);font-size:14px;line-height:1.6;margin:0;
  white-space:pre-wrap;word-break:break-word}
h1{font-size:26px;margin:18px 0 12px}
h2{font-size:20px;margin:28px 0 10px}
h3{font-size:17px;margin:20px 0 8px;color:var(--navy)}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}
.nowrap{white-space:nowrap}

/* layout */
.wrap{max-width:820px;margin:0 auto;padding:18px 16px 70px}
.wrap.wide{max-width:1240px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow)}
.crumbs{margin:4px 0 10px;font-size:14px}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.empty{padding:22px;text-align:center;color:var(--ink-3);background:var(--surface);
  border:1px dashed var(--line);border-radius:var(--r)}

/* topbar */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:800}
.brand-mark{font-family:var(--mono);color:var(--gold)}
.topnav{display:flex;gap:4px;margin-left:6px;flex:1;flex-wrap:wrap}
.topnav a{padding:6px 12px;border-radius:8px;text-decoration:none;color:var(--ink-2);font-size:15px}
.topnav a:hover{background:var(--surface-2);color:var(--ink)}
.topuser{display:flex;align-items:center;gap:10px;font-size:14px}
.uname{font-weight:600}
.logout{color:var(--ink-3);text-decoration:none}
.logout:hover{color:var(--bad)}
@media(max-width:560px){ .brand-text{display:none} }

/* buttons */
.btn{display:inline-block;font-family:inherit;font-size:15px;padding:9px 16px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;
  text-decoration:none;line-height:1.3}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.btn-primary:hover{filter:brightness(1.12);background:var(--navy)}
.btn-ghost{background:transparent}
.btn-sm{font-size:13.5px;padding:5px 11px}
.btn-block{width:100%;margin-top:14px}
.btn:disabled{opacity:.55;cursor:default}
.actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:30px 26px;box-shadow:var(--shadow)}
.login-kicker{font-size:12px;letter-spacing:.16em;color:var(--gold);font-weight:800}
.login-card h1{margin:6px 0 2px;font-size:23px}
.login-sub{margin:0 0 18px;color:var(--ink-3);font-size:14.5px}
.login-card label{display:block;font-size:13.5px;font-weight:700;margin:12px 0 5px;color:var(--ink-2)}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:16px;background:var(--bg)}
.login-card input:focus{outline:2px solid var(--navy);outline-offset:-1px;background:#fff}
.login-help{margin:16px 0 0;font-size:13px;color:var(--ink-3);text-align:center}

/* alerts */
.alert{padding:12px 15px;border-radius:10px;margin:14px 0;font-size:14.5px;
  border:1px solid var(--line);border-left:4px solid var(--ink-3);background:var(--surface)}
.alert-bad{background:var(--bad-soft);border-left-color:var(--bad);color:#6d221c}
.alert-warn{background:var(--gold-soft);border-left-color:var(--gold);color:#6b4a12}
.alert-ok{background:var(--ok-soft);border-left-color:var(--ok);color:#1f4a30}

/* pills */
.pill{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:20px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);white-space:nowrap}
.pill-ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.pill-warn{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.pill-bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.pill-muted{color:var(--ink-3)}

/* live banner */
.live-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:8px 0 20px;
  background:var(--navy);color:#fff;border-radius:var(--r);text-decoration:none;box-shadow:var(--shadow)}
.live-dot{width:10px;height:10px;border-radius:50%;background:#7fe0a0;flex:none;
  animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-text{flex:1;display:flex;flex-direction:column;line-height:1.4}
.live-text span{font-size:14px;opacity:.85}
.live-go{font-weight:700;white-space:nowrap}

/* problem list */
.weekhead{font-size:14px;letter-spacing:.06em;color:var(--ink-3);margin:24px 0 8px;
  border-bottom:1px solid var(--line);padding-bottom:5px}
.prob{display:flex;align-items:center;gap:12px;padding:13px 15px;margin:8px 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.prob:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.prob-done{background:linear-gradient(90deg,var(--ok-soft),var(--surface) 45%)}
.prob-kind{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.kind-quiz{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.kind-homework{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}
.prob-main{flex:1;display:flex;flex-direction:column;min-width:0}
.prob-code{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.prob-state{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tries{font-size:11.5px;color:var(--ink-3)}

/* split panels */
.split{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:1000px){ .split{grid-template-columns:1fr 1fr;align-items:start} }
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow)}
.phead h1{margin:8px 0 4px;font-size:22px}
.pmeta{font-size:13.5px;color:var(--ink-3)}
.prose p{margin:10px 0}
.prose ul,.prose ol{padding-left:22px}

/* samples */
.sample{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.sample-col{min-width:0}
.sample-label{font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);font-weight:700;margin-bottom:3px}
.sample pre,.case-diff pre{background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;overflow-x:auto;min-height:38px}
.hintbox{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.hintbox summary{padding:9px 14px;cursor:pointer;font-weight:700;color:var(--navy)}
.hintbox .prose{padding:0 14px 12px}

/* editor */
.editor{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--code-bg)}
.editor-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 12px;background:#141a20;color:#9aa5b1;font-size:12.5px;letter-spacing:.06em}
.editor-tip{color:#6c7885}
.editor-body{display:flex;max-height:60vh;overflow:auto}
.gutter{padding:12px 8px 12px 12px;color:#4d5a68;font-family:var(--mono);font-size:14px;
  line-height:1.65;text-align:right;user-select:none;flex:none;min-width:38px;
  white-space:pre;overflow:hidden}
.editor textarea{flex:1;border:0;outline:0;resize:none;background:transparent;color:var(--code-ink);
  font-family:var(--mono);font-size:14px;line-height:1.65;padding:12px 14px 12px 6px;
  min-height:320px;white-space:pre;overflow-wrap:normal;tab-size:4;overflow:hidden}
@media(max-width:700px){
  .editor textarea{font-size:15px;min-height:260px}
  .gutter{font-size:15px}
}

/* result */
.result{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface)}
.result-head{display:flex;align-items:center;gap:12px;padding:11px 15px;background:var(--surface-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.result-badge{font-weight:800}
.result-score{font-size:13.5px;color:var(--ink-3)}
.result-msg{padding:12px 15px;font-size:15px}
.result-ok .result-head{background:var(--ok-soft)} .result-ok .result-badge{color:var(--ok)}
.result-warn .result-head{background:var(--gold-soft)} .result-warn .result-badge{color:var(--gold)}
.result-bad .result-head{background:var(--bad-soft)} .result-bad .result-badge{color:var(--bad)}
.result-foot{padding:11px 15px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.cases{padding:0 15px 12px}
.case{border:1px solid var(--line);border-radius:9px;margin:8px 0;overflow:hidden}
.case-head{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;font-size:13.5px;
  background:var(--surface-2)}
.case-pass .case-head{background:var(--ok-soft);color:var(--ok)}
.case-wrong .case-head,.case-error .case-head,.case-timeout .case-head{background:var(--bad-soft);color:var(--bad)}
.case-hint{padding:9px 12px;font-size:14px;color:var(--ink-2)}
.case-diff{display:grid;grid-template-columns:1fr;gap:8px;padding:0 12px 12px}
@media(min-width:640px){ .case-diff{grid-template-columns:repeat(3,1fr)} }
.case-diff pre.bad{border-color:var(--bad);background:var(--bad-soft)}

/* history */
.histitem{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--surface)}
.histitem summary{padding:10px 14px;cursor:pointer;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.codeview{padding:12px 14px;background:var(--code-bg);color:var(--code-ink);margin:0;
  border-top:1px solid var(--line);overflow-x:auto}

/* outbox */
.outbox{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface)}
.outbox-label{padding:7px 14px;font-size:12px;letter-spacing:.08em;color:var(--ink-3);
  font-weight:700;background:var(--surface-2);border-bottom:1px solid var(--line)}
.outbox pre{padding:13px 15px;min-height:80px}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tbl{border-collapse:collapse;width:100%;font-size:14.5px}
.tbl th,.tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{background:var(--surface-2);font-weight:700;font-size:13.5px;white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl form{margin:0}
pre.mini{font-size:12.5px;max-width:230px;max-height:80px;overflow:auto;background:var(--surface-2);
  padding:6px 8px;border-radius:6px}
.tbl-scores td,.tbl-scores th{text-align:center;padding:7px 9px}
.tbl-scores .sticky{position:sticky;left:0;background:var(--surface);text-align:left;z-index:1}
.tbl-scores th.sticky{background:var(--surface-2)}
.cell-ok{background:var(--ok-soft);font-weight:700;color:var(--ok)}
.cell-warn{background:var(--gold-soft);color:var(--gold)}
.cell-none{color:var(--ink-3)}

/* stats */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.stat{flex:1;min-width:120px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:26px;line-height:1.2;color:var(--navy)}
.stat span{font-size:13px;color:var(--ink-3)}

/* live board */
.liveform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.liveform label{font-weight:700;font-size:14.5px}
.liveform select{flex:1;min-width:220px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font-family:inherit;font-size:15px;background:var(--bg)}
.boardhead{display:flex;justify-content:space-between;gap:12px;align-items:center;
  flex-wrap:wrap;margin-bottom:12px}
.counts{display:flex;gap:6px;flex-wrap:wrap}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.seat{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--surface);
  display:flex;flex-direction:column;gap:1px;line-height:1.35}
.seat-no{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.seat-name{font-weight:700;font-size:14.5px}
.seat-tries{font-size:11.5px;color:var(--ink-3)}
.seat-done{background:var(--ok-soft);border-color:var(--ok)}
.seat-partial{background:var(--gold-soft);border-color:var(--gold)}
.seat-trying{background:var(--bad-soft);border-color:var(--bad)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 4px;font-size:13.5px;color:var(--ink-2)}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;
  vertical-align:-1px;border:1px solid var(--line)}
.sw-done{background:var(--ok-soft);border-color:var(--ok)}
.sw-partial{background:var(--gold-soft);border-color:var(--gold)}
.sw-trying{background:var(--bad-soft);border-color:var(--bad)}
.sw-none{background:var(--surface)}

/* ================= M1：作業批改、上傳、隨堂測驗 ================= */

/* 選擇題作業：單欄版面 */
.onecol{display:block}
.onecol .panel{margin-bottom:18px}
.choiceform .qcard{box-shadow:none;margin:14px 0}
.choiceform .qcard:first-child{margin-top:4px}

/* 表單欄位 */
.fieldlabel{display:block;font-size:13.5px;font-weight:700;margin:14px 0 6px;color:var(--ink-2)}
.fieldlabel .req{color:var(--bad);font-weight:700}
.answerbox{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:15.5px;line-height:1.75;background:var(--bg);resize:vertical}
.answerbox:focus{outline:2px solid var(--navy);outline-offset:-1px;background:#fff}
.answerview{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;font-family:var(--sans);font-size:15px;line-height:1.8}

/* 截止時間 */
.due{color:var(--ink-2)}
.due-over{color:var(--bad);font-weight:700}

/* 檔案上傳 */
.uploadbox{margin-top:16px;padding:14px;border:1px dashed var(--line);border-radius:10px;
  background:var(--surface-2)}
.uploadbox input[type=file]{font-family:inherit;font-size:14px;max-width:100%}
.uploadhint{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.65}
.filelist{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.fchip{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:4px 10px;
  border-radius:8px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);text-decoration:none;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
a.fchip:hover{border-color:var(--navy);color:var(--navy)}
.filepick{cursor:pointer;font-size:12.5px;padding:3px 10px;border-radius:7px;
  border:1px solid #3a4550;color:#9aa5b1}
.filepick:hover{background:#232c35;color:#cfd6dd}
.editor-actions{display:flex;align-items:center;gap:10px}
.result-files{padding:10px 15px;border-top:1px dashed var(--line);display:flex;
  gap:6px;flex-wrap:wrap;align-items:center}
.teacher-comment{padding:12px 15px;background:var(--gold-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.75;color:#6b4a12}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.shots img{width:100%;border:1px solid var(--line);border-radius:9px;display:block}

/* 批改頁 */
.scorerow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.scorerow input{width:110px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font-family:var(--mono);font-size:20px;font-weight:700;text-align:center;background:var(--bg)}
.quickscore{display:flex;gap:6px;flex-wrap:wrap}
.stat-alert{border-color:var(--gold);background:var(--gold-soft);text-decoration:none}
.stat-alert b{color:var(--gold)}
a.stat{color:inherit}

/* 隨堂測驗：作答 */
.quizbar{position:sticky;top:56px;z-index:15;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;background:var(--navy);color:#fff;
  padding:12px 16px;border-radius:var(--r);margin:6px 0 14px;box-shadow:var(--shadow)}
.quizbar .muted{color:#b9cde0}
.quiztimer{font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px}
#timer{font-family:var(--mono);font-size:22px}
.quizbar-warn{background:#8a3d15}
.quizbar-over{background:var(--bad)}
#savedhint{font-size:12.5px;font-weight:400;color:#b9cde0;transition:color .2s}
#savedhint.saved{color:#8ff0b4}

.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:12px 0;box-shadow:var(--shadow)}
.qcard-ok{border-left:4px solid var(--ok)}
.qcard-bad{border-left:4px solid var(--bad)}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.qno{font-weight:800;color:var(--navy)}
.qpoints{font-size:13px;color:var(--ink-3)}
.qstem{font-size:16px;line-height:1.8}
.qsnippet{background:var(--code-bg);color:var(--code-ink);border-radius:9px;
  padding:13px 15px;margin:10px 0;overflow-x:auto;white-space:pre}
.choices{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.choice{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);cursor:pointer;line-height:1.65}
.choice:hover{border-color:var(--navy)}
.choice input{margin-top:4px}
.choice.picked{background:var(--navy-soft);border-color:var(--navy)}
.choice-key{font-family:var(--mono);font-weight:700;color:var(--ink-3);flex:none}
.choice-text{flex:1}
.choice-tag{font-size:12px;font-weight:700;padding:1px 8px;border-radius:20px;flex:none}
.choice-correct{background:var(--ok-soft);border-color:var(--ok)}
.choice-correct .choice-tag{background:var(--ok);color:#fff}
.choice-yours{background:var(--bad-soft);border-color:var(--bad)}
.choice-yours .choice-tag{background:var(--bad);color:#fff}
.qexplain{margin-top:11px;padding:11px 14px;background:var(--surface-2);border-radius:9px;
  font-size:14.5px;color:var(--ink-2);line-height:1.75}
.quizsubmit{margin:26px 0 40px}

/* 成績卡 */
.scorecard{background:var(--navy);color:#fff;border-radius:16px;padding:28px 24px;
  text-align:center;margin:10px 0 22px;box-shadow:var(--shadow)}
.scorecard-kicker{font-size:13px;letter-spacing:.1em;color:#b9cde0}
.scorecard-score{font-size:56px;font-weight:800;line-height:1.1;margin:6px 0}
.scorecard-score span{font-size:20px;font-weight:400;color:#b9cde0;margin-left:6px}
.scorecard-split{font-size:14.5px;color:#d5e3ef}

/* 教師：測驗統計 */
.quizctl{display:flex;gap:8px;flex-wrap:wrap}
.quizctl form{margin:0}
.bands{display:flex;gap:14px;align-items:flex-end;height:150px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.band{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:4px}
.band-bar{width:100%;max-width:64px;background:var(--navy);border-radius:6px 6px 0 0;min-height:3px}
.band-n{font-weight:700;font-size:15px}
.band-k{font-size:12.5px;color:var(--ink-3)}
.ratebar{display:inline-block;width:80px;height:8px;background:var(--surface-2);
  border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:6px}
.ratebar i{display:block;height:100%;background:var(--ok)}
.row-alert{background:var(--bad-soft)}
.row-alert .ratebar i{background:var(--bad)}
.pickchip{display:inline-block;font-family:var(--mono);font-size:12px;padding:1px 7px;
  margin:1px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)}
.pickchip-ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);font-weight:700}

/* ---------------------------------------------------------- 學期成績 */
.weightbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.wchip{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:4px 13px;font-size:13.5px}
.wchip b{color:var(--navy)}
.wchip-off{opacity:.55}
.wchip-note{color:var(--ink-3);font-size:12px}
.wsum{font-size:13.5px;color:var(--ink-3);margin-left:auto}
.wsum-warn{color:var(--gold);font-weight:700}

.gradedist{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.gd{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:4px 12px;font-size:13.5px;color:var(--ink-2)}
.gd b{color:var(--navy);margin-right:6px}

.th-sub{font-weight:400;font-size:11.5px;color:var(--ink-3)}
.cell-bad{background:var(--bad-soft);color:var(--bad)}

.gradecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin:14px 0 22px;box-shadow:var(--shadow)}
.gradecard-big{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gc-grade{font-size:52px;font-weight:800;line-height:1;color:var(--navy);
  min-width:72px;text-align:center}
.gc-優,.gc-甲{color:var(--ok)}
.gc-乙,.gc-丙{color:var(--gold)}
.gc-丁{color:var(--bad)}
.gc-num{font-size:22px;font-weight:700}
.gc-label{font-size:16px;color:var(--ink-2)}
.gc-trend{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-2)}
.gc-trend-up{color:var(--ok)}
.gc-trend-down{color:var(--bad)}

.catrow{margin:14px 0}
.catrow-off{opacity:.5}
.catrow-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.catrow-num{margin-left:auto;font-size:19px;font-weight:700;color:var(--navy)}
.bar{height:10px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);
  overflow:hidden;margin:5px 0 3px}
.bar span{display:block;height:100%;background:var(--navy);
  background:linear-gradient(90deg,var(--navy),#3d7cb0)}

.tbl-settings td{padding:6px 8px;vertical-align:top}
.tbl-settings select,.tbl-settings input{font-family:inherit;font-size:14px;
  padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.in-xs{width:64px}
.in-sm{width:104px}
.in-md{width:150px}
.in-lg{width:100%;min-width:180px}
.row-off{opacity:.5;background:var(--surface-2)}
.btn-danger{color:var(--bad);border-color:var(--bad)}
.btn-danger:hover{background:var(--bad-soft)}

.inline-form{display:inline-flex;align-items:center;gap:8px;margin:10px 0}
.inline-form select{font-family:inherit;font-size:15px;padding:8px 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.addform{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:12px 0 20px;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r)}
.addform label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;
  font-weight:700;color:var(--ink-2)}
.addform input,.addform select{font-family:inherit;font-size:14.5px;font-weight:400;
  padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.addform .unit{display:flex;align-items:center;gap:5px;font-weight:400}
.helpbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 20px 14px;font-size:14.5px}
.helpbox ul{padding-left:20px;margin:6px 0 14px}
.helpbox li{margin:4px 0}