/* TTQS 線上測驗 — 依 ttqs-exam-prototype 設計稿 */
:root {
  --bg: #F5F4F0; --card: #FFFFFF; --border: #D9D9D4; --border-soft: #EAEAE5;
  --ink: #1A1A1A; --ink-2: #333333; --ink-3: #5A5A58; --muted: #8A8A86;
  --green: #4A7C59; --green-hover: #3E6A4B; --green-dark: #2E4F38; --green-bg: #E8EFEA;
  --ok: #2E7D4F; --ok-bg: #E2ECE6; --bad: #C8321F; --bad-bg: #F5DEDA;
  --dify: #2D5A87; --dify-bg: #DFE6ED; --warn: #C87A0A;
  --mono: 'Noto Sans Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: 'Noto Sans TC', sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 14px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 2px; background: var(--card); color: var(--ink); outline: none; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* topbar */
.topbar { height: 56px; background: var(--ink); color: #FFF; display: flex; align-items: center; padding: 0 24px; gap: 12px; position: sticky; top: 0; z-index: 20; }
.topbar img { height: 28px; width: auto; }
.topbar .title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.topbar .title .dim { opacity: 0.5; font-weight: 400; }
.topbar .spacer { flex: 1; }
.topbar .divider { width: 1px; height: 20px; background: rgba(255,255,255,0.15); }
.topbar .mono-dim { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; text-transform: uppercase; }
.timer { display: flex; align-items: center; gap: 8px; font-family: var(--mono); }
.timer .label { font-size: 11px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; }
.timer .val { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }
.timer .val.low { color: #F5A38F; }
.answered { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.8); }
.answered b { color: #FFF; }
.progress-rail { height: 3px; background: var(--border); position: sticky; top: 56px; z-index: 20; }
.progress-rail > div { height: 3px; width: 0; background: var(--green); transition: width .25s; }

/* generic */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; }
.btn { border: none; border-radius: 4px; font-size: 15px; font-weight: 600; padding: 12px 32px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-green { background: var(--green); color: #FFF; }
.btn-green:hover { background: var(--green-hover); }
.btn-green:disabled { background: var(--muted); cursor: not-allowed; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--border); font-weight: 500; }
.btn-ghost:hover { background: var(--border-soft); }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }
.icon { width: 16px; height: 16px; }

/* ===== 首頁 ===== */
#view-home .hero { max-width: 720px; margin: 0 auto; padding: 64px 24px 80px; display: flex; flex-direction: column; gap: 32px; }
#view-home h1 { font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.spec-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--border); border-radius: 4px; }
.spec-strip > div { padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.spec-strip > div + div { border-left: 1px solid var(--border-soft); }
.spec-strip .k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.spec-strip .v { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--ink); }
.spec-strip .v small { font-size: 12px; color: var(--muted); font-weight: 400; }
.spec-strip .v.text { font-family: 'Noto Sans TC', sans-serif; font-size: 15px; padding-top: 4px; }
.rules { padding: 24px; }
.rules .eyebrow { margin-bottom: 16px; }
.rules ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; counter-reset: r; }
.rules li { display: flex; gap: 12px; align-items: baseline; counter-increment: r; }
.rules li::before { content: counter(r); font-family: var(--mono); font-size: 13px; color: var(--green); font-weight: 600; }
.start-row { display: flex; gap: 16px; align-items: flex-end; }
.start-row .field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.start-row label { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.page-footer { border-top: 1px solid var(--border); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.page-footer .mono { font-size: 11px; letter-spacing: 0.04em; }
.notice-bar { background: var(--bad-bg); color: var(--bad); font-size: 13px; padding: 10px 16px; border-radius: 4px; }

/* ===== 作答頁 ===== */
#view-quiz .layout { display: flex; gap: 32px; max-width: 1120px; margin: 0 auto; padding: 32px 24px 96px; }
.q-col { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.q-card { padding: 24px; }
.q-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 16px; flex-wrap: wrap; }
.q-no { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--green); }
.q-type { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: var(--border-soft); padding: 2px 8px; border-radius: 2px; white-space: nowrap; }
.q-text { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); flex: 1; min-width: 200px; }
.opts { display: flex; flex-direction: column; gap: 8px; padding-left: 44px; }
.opt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; background: var(--card); cursor: pointer; text-align: left; font-size: 15px; color: var(--ink-2); min-height: 44px; }
.opt .radio { width: 18px; height: 18px; border: 1.5px solid var(--muted); border-radius: 50%; flex-shrink: 0; }
.opt .key { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.opt:hover { border-color: var(--muted); }
.opt.sel { border: 2px solid var(--green); padding: 11px 15px; background: var(--green-bg); font-weight: 600; color: var(--ink); }
.opt.sel .radio { border: 5px solid var(--green); background: #FFF; }
.opt.sel .key { color: var(--green-dark); font-weight: 600; }
.opts-tf { display: flex; gap: 8px; padding-left: 44px; }
.opt-tf { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 14px; background: var(--card); font-size: 15px; color: var(--ink-2); min-height: 44px; }
.opt-tf .sym { font-family: var(--mono); font-size: 18px; color: var(--ink-3); }
.opt-tf.sel { border: 2px solid var(--green); padding: 13px; background: var(--green-bg); font-weight: 600; color: var(--ink); }
.opt-tf.sel .sym { color: var(--green-dark); font-weight: 600; }

.rail { width: 264px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 91px; align-self: flex-start; }
.rail .panel { padding: 20px; }
.rail .eyebrow { margin-bottom: 14px; }
.qmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.qmap button { height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 2px; font-family: var(--mono); font-size: 12px; background: var(--card); color: var(--ink-3); border: 1px solid var(--border); }
.qmap button.done { background: var(--green); color: #FFF; border-color: var(--green); font-weight: 600; }
.qmap-legend { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--ink-3); }
.qmap-legend span { display: flex; align-items: center; gap: 6px; }
.qmap-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rail .hint { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.mobile-bar { display: none; }

/* ===== 成績頁 ===== */
#view-result .wrap, #view-review .wrap { max-width: 880px; margin: 0 auto; padding: 56px 24px 64px; display: flex; flex-direction: column; gap: 32px; }
.score-hero { display: flex; }
.score-hero .main { flex: 1; padding: 40px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--border-soft); }
.score-hero .big { display: flex; align-items: baseline; gap: 12px; }
.score-hero .big .n { font-family: var(--mono); font-size: 88px; font-weight: 600; line-height: 1; color: var(--ink); }
.score-hero .big .of { font-family: var(--mono); font-size: 20px; color: var(--muted); }
.score-hero .side { width: 320px; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.score-hero .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-3); }
.score-hero .row .v { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.score-hero .row .v small { font-size: 12px; color: var(--muted); font-weight: 400; }
.score-hero .row.total { padding-top: 14px; border-top: 1px solid var(--border-soft); }
.result-map { padding: 24px; }
.result-map .eyebrow { margin-bottom: 16px; }
.rmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.rmap > div { height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 2px; font-family: var(--mono); font-size: 11px; gap: 1px; }
.rmap .ok { background: var(--ok-bg); color: var(--ok); }
.rmap .bad { background: var(--bad-bg); color: var(--bad); }
.actions { display: flex; gap: 12px; justify-content: center; }

/* ===== 解析頁 ===== */
.review-filter { display: flex; gap: 8px; align-items: center; }
.chip { font-size: 13px; padding: 6px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink-3); }
.chip.active { background: var(--ink); color: #FFF; border-color: var(--ink); font-weight: 600; }
.review-filter .dl { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); font-weight: 500; background: none; border: none; }
.ans-row { display: flex; align-items: center; gap: 12px; border-radius: 4px; padding: 11px 15px; font-size: 15px; }
.ans-row.right { border: 2px solid var(--ok); background: var(--ok-bg); }
.ans-row.wrong { border: 2px solid var(--bad); background: var(--bad-bg); }
.ans-row .key { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.ans-row.right .key { color: var(--ok); }
.ans-row.wrong .key { color: var(--bad); }
.ans-row .txt { flex: 1; color: var(--ink); }
.ans-row .tag { font-size: 12px; font-weight: 600; }
.ans-row.right .tag { color: var(--ok); }
.ans-row.wrong .tag { color: var(--bad); }
.explain { margin-left: 44px; border-top: 1px solid var(--border-soft); padding-top: 14px; display: flex; gap: 10px; }
.explain .k { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); flex-shrink: 0; padding-top: 2px; }
.explain .t { font-size: 14px; line-height: 1.65; }
.explain .src { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ans-list { display: flex; flex-direction: column; gap: 8px; padding-left: 44px; margin-bottom: 16px; }

/* ===== 手機 ===== */
@media (max-width: 860px) {
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar .hide-m { display: none; }
  #view-home .hero { padding: 40px 16px 56px; }
  #view-home h1 { font-size: 30px; }
  .spec-strip { grid-template-columns: repeat(2, 1fr); }
  .spec-strip > div + div { border-left: none; }
  .spec-strip > div:nth-child(even) { border-left: 1px solid var(--border-soft); }
  .spec-strip > div:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
  .start-row { flex-direction: column; align-items: stretch; }
  #view-quiz .layout { padding: 16px 16px 120px; }
  .rail { display: none; }
  .opts, .opts-tf { padding-left: 0; }
  .mobile-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--border); background: var(--card); padding: 12px 16px; gap: 12px; align-items: center; z-index: 30; }
  .mobile-bar .hint { font-size: 12px; color: var(--muted); flex: 1; line-height: 1.4; }
  .score-hero { flex-direction: column; }
  .score-hero .main { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .score-hero .side { width: auto; }
  .rmap { grid-template-columns: repeat(5, 1fr); }
  .explain { margin-left: 0; }
  .ans-list { padding-left: 0; }
}

/* ===== 管理後台 ===== */
.admin-layout { display: flex; min-height: calc(100vh - 56px); }
.side-nav { width: 200px; background: #FAFAF7; border-right: 1px solid var(--border); padding: 20px 0; flex-shrink: 0; }
.side-nav .group { padding: 0 20px 12px; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 13px; color: var(--ink-3); border-left: 2px solid transparent; }
.side-nav a:hover { text-decoration: none; color: var(--ink); }
.side-nav a.active { color: var(--ink); font-weight: 600; background: var(--green-bg); border-left-color: var(--green); }
.admin-main { flex: 1; padding: 28px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.admin-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-head h1 { font-size: 20px; font-weight: 600; color: var(--ink); flex: 1; margin: 0; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat-card { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.stat-card .k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.stat-card .v { font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--ink); }
.stat-card .v small { font-size: 13px; color: var(--muted); font-weight: 400; }
.stat-card .sub { font-size: 12px; color: var(--ink-3); }
.stat-card .sub.up { color: var(--ok); }
.gen-panel { padding: 20px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.gen-panel .field { display: flex; flex-direction: column; gap: 6px; }
.gen-panel label { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.gen-panel input, .gen-panel select { padding: 9px 10px; }
.gen-panel input[type=number] { width: 80px; }
.gen-status { font-size: 13px; color: var(--ink-3); }
.qb-table { overflow: hidden; }
.qb-head { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; }
.qb-head .eyebrow { flex: 1; }
.qb-head input { width: 220px; padding: 6px 10px; font-size: 12px; }
.qb-cols, .qb-row { display: grid; grid-template-columns: 88px 1fr 80px 100px 88px 64px; padding: 10px 20px; border-bottom: 1px solid var(--border-soft); align-items: center; gap: 8px; }
.qb-cols { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.qb-row { font-size: 13px; padding: 13px 20px; }
.qb-row .qid { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.qb-row .qtext { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-row .rate { font-family: var(--mono); font-size: 12px; }
.qb-row .rate.low { color: var(--warn); }
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; justify-self: start; }
.badge-dify { background: var(--dify-bg); color: var(--dify); }
.badge-manual { background: var(--border-soft); color: var(--ink-3); }
.qb-row .del { background: none; border: none; color: var(--muted); font-size: 12px; }
.qb-row .del:hover { color: var(--bad); }
.qb-foot { padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.token-row { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }
.token-row input { width: 220px; padding: 6px 10px; font-size: 12px; }
@media (max-width: 860px) {
  .side-nav { display: none; }
  .qb-cols, .qb-row { grid-template-columns: 1fr 80px 64px; }
  .qb-cols span:nth-child(1), .qb-row .qid, .qb-cols span:nth-child(4), .qb-row .qtopic, .qb-cols span:nth-child(5), .qb-row .rate { display: none; }
}