/* 快閱卡 設計系統 */
:root {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fb; --fg: #111827; --fg-2: #4b5563; --fg-3: #8a93a3;
  --line: #e5e7eb; --line-2: #d1d5db;
  --pri: #4f46e5; --pri-2: #4338ca; --pri-soft: #eef2ff; --pri-fg: #ffffff;
  --ok: #059669; --ok-soft: #ecfdf5; --warn: #b45309; --warn-soft: #fffbeb; --bad: #dc2626; --bad-soft: #fef2f2;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --font: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d12; --surface: #151821; --surface-2: #1b1f2a; --fg: #eef0f4; --fg-2: #b4bac6; --fg-3: #7d8594;
    --line: #262b37; --line-2: #333a48; --pri: #818cf8; --pri-2: #a5b4fc; --pri-soft: #1e1b4b; --pri-fg: #0b0d12;
    --ok: #34d399; --ok-soft: #062e22; --warn: #fbbf24; --warn-soft: #2d2205; --bad: #f87171; --bad-soft: #2d0f0f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  }
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased }
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--pri) }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* 頂部列 */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line) }
.topbar-in { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; letter-spacing: .02em; text-decoration: none; color: var(--fg) }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: #146c80; display: grid; place-items: center; color: #fff }
.brand-mark svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 1.8 }
.brand-hhl { font-weight: 800; color: #146c80; margin-right: -3px; letter-spacing: .04em }
@media (prefers-color-scheme: dark) { .brand-hhl { color: #5fb8cc } }
.nav { display: flex; gap: 4px; margin-left: auto }
.nav a { text-decoration: none; color: var(--fg-2); padding: 7px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: center }
.nav a.on { background: var(--pri-soft); color: var(--pri) }
/* 雲端同步按鈕：右上角，小圓點顯示狀態 */
.acct { position: relative; flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); display: grid; place-items: center; cursor: pointer; font: inherit; font-weight: 700; padding: 0 }
.acct.in { background: var(--pri-soft); color: var(--pri); border-color: transparent }
.acct .dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 999px; border: 2px solid var(--surface); background: var(--fg-3, #9ca3af) }
.acct .dot.ok { background: var(--ok) } .acct .dot.syncing { background: var(--pri); animation: pulse 1s infinite alternate }
.acct .dot.error, .acct .dot.denied { background: var(--bad) } .acct .dot.offline { background: var(--warn) }
@keyframes pulse { to { opacity: .35 } }
.acct-box { max-width: 400px; width: 100%; padding: 18px; gap: 12px }
.acct-box h2 { margin: 0; font-size: 18px } .acct-box p { margin: 0; color: var(--fg-2); line-height: 1.6 }
.acct-box .who { display: flex; gap: 10px; align-items: center } .acct-box .who b { display: block }
.acct-box .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }

main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 96px }
.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px }
.page-head h1 { font-size: 26px; line-height: 1.2; margin: 0; letter-spacing: -.01em }
.page-head .sub { color: var(--fg-3); font-size: 14px; margin-top: 4px }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-3); text-decoration: none; font-size: 14px; margin-bottom: 6px }

/* 按鈕 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); padding: 9px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap }
.btn:hover { background: var(--surface-2) }
.btn:active { transform: translateY(1px) }
.btn:disabled { opacity: .5; cursor: default }
.btn-primary { background: var(--pri); border-color: var(--pri); color: var(--pri-fg) }
.btn-primary:hover { background: var(--pri-2); border-color: var(--pri-2) }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-2) }
.btn-ghost:hover { background: var(--surface-2) }
.btn-danger { color: var(--bad) }
.btn-lg { padding: 12px 18px; font-size: 15px; border-radius: 12px }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 8px }
.icon-btn { padding: 8px; border-radius: 10px }

/* 卡片 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px }
.card h2 { font-size: 16px; margin: 0 0 4px }
.card h3 { font-size: 14px; margin: 0 0 8px; color: var(--fg-2) }
.card .desc { color: var(--fg-3); font-size: 13px; margin: 0 0 12px }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }

/* 考試卡片 */
.exam-card { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s, border-color .15s }
.exam-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--line-2) }
.exam-card .t { font-weight: 700; font-size: 16px; margin-bottom: 4px }
.exam-card .meta { color: var(--fg-3); font-size: 13px }
.exam-card .foot { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }
.kpi .v { font-size: 20px; font-weight: 800; line-height: 1.1 }
.kpi .k { font-size: 12px; color: var(--fg-3) }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--fg-2); font-weight: 600 }
.chip.pri { background: var(--pri-soft); border-color: transparent; color: var(--pri) }
.chip.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok) }
.chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn) }
.chip.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad) }
button.chip { cursor: pointer }
button.chip.on { background: var(--pri); color: var(--pri-fg); border-color: var(--pri) }

/* 空狀態與大選項 */
.empty { text-align: center; padding: 40px 16px }
.empty .art { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 20px; background: var(--pri-soft); display: grid; place-items: center; color: var(--pri) }
.empty .art svg { width: 34px; height: 34px }
.empty h2 { margin: 0 0 6px; font-size: 20px }
.empty p { color: var(--fg-3); margin: 0 auto 20px; max-width: 420px }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; text-align: left }
.choice { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: border-color .15s, box-shadow .15s; text-align: left; width: 100% }
.choice:hover { border-color: var(--pri); box-shadow: var(--shadow-lg) }
.choice .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--pri-soft); color: var(--pri); display: grid; place-items: center; flex: none }
.choice .ic svg { width: 22px; height: 22px }
.choice b { display: block; font-size: 15px; margin-bottom: 2px }
.choice span { color: var(--fg-3); font-size: 13px }
.badge { font-size: 11px; font-weight: 700; color: var(--pri); background: var(--pri-soft); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px }

.drop { border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 28px 16px; text-align: center; color: var(--fg-2); cursor: pointer; transition: border-color .15s, background .15s; display: block }
.drop:hover, .drop.over { border-color: var(--pri); background: var(--pri-soft) }
.drop input { display: none }
.drop b { color: var(--pri) }

/* 表單 */
label.f { display: block; font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 12px 0 6px }
input.in, select.in, textarea.in { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 11px; outline: none; transition: border-color .15s, box-shadow .15s }
input.in:focus, select.in:focus, textarea.in:focus { border-color: var(--pri); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 18%, transparent) }
input.in.num { width: 76px; text-align: center }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.row > .grow { flex: 1 1 200px }
.spacer { flex: 1 }

/* 分頁 */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 18px; overflow-x: auto; scrollbar-width: none }
.tabs a { padding: 10px 14px; color: var(--fg-3); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; gap: 6px; align-items: center }
.tabs a.on { color: var(--pri); border-color: var(--pri) }

/* 表格 */
.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th { text-align: left; font-size: 12px; color: var(--fg-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle }
tr:last-child td { border-bottom: 0 }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
input.cell { width: 64px; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); text-align: center }

/* 答案編輯 */
.keygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px }
.q { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface) }
.q.missing { border-color: var(--warn); background: var(--warn-soft) }
.q .n { font-weight: 800; width: 26px; text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums }
.opts { display: flex; gap: 5px }
.opt { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); display: grid; place-items: center; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--fg-2); padding: 0; transition: background .1s }
.opt.on { background: var(--pri); border-color: var(--pri); color: var(--pri-fg) }
.q .pts { margin-left: auto; display: flex; align-items: center; gap: 3px; color: var(--fg-3); font-size: 12px }
.q .pts input { width: 44px; padding: 4px; border: 1px solid var(--line-2); border-radius: 7px; text-align: center; background: var(--surface) }
.q .lv { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface) }

/* 提示列 */
.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; align-items: flex-start }
.alert svg { margin-top: 2px }
.alert.warn { background: var(--warn-soft); color: var(--warn) }
.alert.bad { background: var(--bad-soft); color: var(--bad) }
.alert.ok { background: var(--ok-soft); color: var(--ok) }
.alert.info { background: var(--pri-soft); color: var(--pri) }
.alert ul { margin: 4px 0 0; padding-left: 18px }

/* 掃描 */
.scanner { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; max-height: 70vh; margin: 0 auto 12px; max-width: 520px }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block }
.scanner .guide { position: absolute; inset: 7% 9%; border-radius: 10px; pointer-events: none }
.scanner .guide i { position: absolute; width: 34px; height: 34px; border: 4px solid rgba(255, 255, 255, .9) }
.scanner .guide i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0 }
.scanner .guide i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0 }
.scanner .guide i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px }
.scanner .guide i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0 }
.scanner.locked .guide i { border-color: #34d399 }
.scanner .status { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(0, 0, 0, .65); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; white-space: nowrap }
.scanner .idle { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd5e1; text-align: center; padding: 20px }
.result { display: flex; gap: 14px; align-items: flex-start }
.score-ring { width: 72px; height: 72px; flex: none }
.score-ring .bg { stroke: var(--line) }
.score-ring .fg { stroke: var(--pri); transition: stroke-dashoffset .4s }
.score-ring text { fill: var(--fg); font-weight: 800; font-size: 20px }
.result .who { font-weight: 700; font-size: 16px }

/* 分析 */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 6px 0 16px }
.stat { background: var(--surface-2); border-radius: 12px; padding: 10px 12px }
.stat .k { font-size: 12px; color: var(--fg-3) }
.stat .v { font-size: 22px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums }
.stat .s { font-size: 12px; color: var(--fg-3) }
.hist { width: 100%; max-width: 560px; display: block }
.hist .bar { fill: var(--pri) }
.hist .lbl { font-size: 10px; fill: var(--fg-2) }
.hist .axis { font-size: 9px; fill: var(--fg-3) }
.hist .axisline { stroke: var(--line-2) }
.pbar { display: inline-block; width: 54px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px }
.pfill { display: block; height: 100% }
.pfill.good { background: var(--ok) } .pfill.mid { background: var(--pri) } .pfill.low { background: var(--warn) }
.p0{width:0}.p1{width:10%}.p2{width:20%}.p3{width:30%}.p4{width:40%}.p5{width:50%}.p6{width:60%}.p7{width:70%}.p8{width:80%}.p9{width:90%}.p10{width:100%}
.optc { white-space: nowrap; margin-right: 8px; font-size: 13px; color: var(--fg-2) }
.optc.key { color: var(--ok); font-weight: 800 }
.optc small { color: var(--fg-3); margin-left: 2px }
.flag { font-size: 12px; line-height: 1.4 }
.flag.bad { color: var(--bad) } .flag.warn { color: var(--warn) } .flag.info { color: var(--fg-3) }
.ok { color: var(--ok) } .bad { color: var(--bad) } .warn { color: var(--warn) } .muted { color: var(--fg-3) }

/* 答案卡預覽 */
.sheet-preview { background: #fff; border-radius: 8px; box-shadow: var(--shadow-lg); max-width: 360px; margin: 0 auto; overflow: hidden }
.sheet-preview svg { display: block; width: 100%; height: auto }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr } }

/* 提示訊息 */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #111827; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .2s, transform .2s; z-index: 50; pointer-events: none }
.toast.show { opacity: 1; transform: translate(-50%, 0) }

/* 下拉選單 */
details.menu { position: relative }
details.menu summary { list-style: none; cursor: pointer }
details.menu summary::-webkit-details-marker { display: none }
details.menu .pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 170px; z-index: 30 }
details.menu .pop button { display: flex; width: 100%; gap: 8px; align-items: center; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px }
details.menu .pop button:hover { background: var(--surface-2) }


/* 編輯器與其他元件 */
a.choice { color: inherit; text-decoration: none }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--fg-2); cursor: pointer }
.seg button.on { background: var(--surface); color: var(--pri); box-shadow: var(--shadow) }
.ed-opts { align-items: flex-end }
.ed-opts label.f { margin-top: 0 }
.card > .ed-opts:first-child label.f { margin-top: 0 }
select.mini { border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); padding: 3px 4px; font-size: 12px; color: var(--fg-2) }
select.in.mini { width: auto; min-width: 96px; padding: 5px 6px }
.q { flex-wrap: nowrap }
.q .pts { margin-left: auto }
.q.manual { grid-column: span 2 }
.q.manual .lv { min-width: 70px }
.q .lines { width: 44px; padding: 4px; border: 1px solid var(--line-2); border-radius: 7px; text-align: center; background: var(--surface) }
.q .icon-btn { padding: 4px; color: var(--fg-3) }
.q .icon-btn svg { width: 14px; height: 14px }
@media (max-width: 560px) { .q.manual { grid-column: auto; flex-wrap: wrap } }
.quick { margin-bottom: 12px }
.add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2) }
.add-row select.in { width: auto }
.sticky { position: sticky; top: 72px }
.side .sheet-preview { max-width: 100% }
.savebar { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin: 16px -16px -96px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line) }
.drop .art { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 10px; background: var(--pri-soft); color: var(--pri); display: grid; place-items: center }
.drop .art svg { width: 24px; height: 24px }
.drop .muted { font-size: 13px; margin-top: 6px }
.row.center { justify-content: center }
.tip { text-align: center; font-size: 13px; max-width: 520px; margin: 10px auto 0 }
.scanner .idle > div > svg { width: 36px; height: 36px; opacity: .8 }
.scanner .idle p { margin: 8px 0 16px; font-size: 14px; line-height: 1.6 }
.scanner .idle[hidden], .scanner .status[hidden] { display: none }
.result { margin-bottom: 12px }
.result .grow { flex: 1; min-width: 0 }
.result .row { margin: 6px 0 }
input.in.sid { width: 140px; padding: 5px 9px; font-variant-numeric: tabular-nums; letter-spacing: .05em }
.manual-in { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px }
.manual-in label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600 }
.result-card { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft), var(--shadow) }
.result-card.alarm { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft), var(--shadow); animation: shake .45s }
@keyframes shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
@media (prefers-reduced-motion: reduce) { .result-card.alarm { animation: none } }
td.acts { white-space: nowrap; text-align: right }
.acts .icon-btn { padding: 5px }
ul.tips { margin: 0; padding-left: 18px; color: var(--fg-2); font-size: 14px }
ul.tips li + li { margin-top: 4px }
.import-review { margin-top: 16px }
.import-review th { padding: 6px 6px 8px }
.import-review label.f { margin: 0 }
.empty .btn { margin-top: 4px }
.report .row.no-print { margin-bottom: 4px }
.card .chips + .table-wrap { margin-top: 12px }
.page-head .back svg { width: 16px; height: 16px }
.tabs svg.i { width: 16px; height: 16px }
th .muted { font-weight: 400 }

.modal { position: fixed; inset: 0; z-index: 60; background: rgba(10, 12, 18, .72); display: grid; place-items: center; padding: 16px }
.modal-in { background: var(--surface); border-radius: var(--radius); padding: 12px; max-width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-lg) }
.modal-in .zoom-box { overflow: hidden; border-radius: 8px; touch-action: none }
.modal-in img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; border-radius: 8px; display: block; margin: 0 auto }

@media (max-width: 560px) {
  .page-head h1 { font-size: 22px }
  .nav a span { display: none }
  .card { padding: 14px }
  .table-wrap { margin: 0 -14px; padding: 0 14px }
}

/* 列印 */
@page { size: A4; margin: 0 }
.print-area { display: none }
@media print {
  body.printing-sheets > *:not(.print-area) { display: none !important }
  body.printing-sheets > .print-area { display: block }
  .sheet-page { break-after: page; width: 210mm; height: 297mm }
  .sheet-page svg { display: block; width: 210mm; height: 297mm }
  body.printing-report .topbar, body.printing-report .tabs, body.printing-report .page-head .actions, body.printing-report .no-print { display: none !important }
  body.printing-report main { padding: 12mm }
  body { background: #fff }
  .card { box-shadow: none; break-inside: avoid }
}

/* 修正 */
a.btn { text-decoration: none }
.editor { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) }
.editor .keygrid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) }
.editor .opt { width: 28px; height: 28px }
@media (max-width: 760px) { .editor { grid-template-columns: 1fr } .editor .keygrid { grid-template-columns: 1fr } }

/* ── 掃描：開始卡片 ── */
.scan-start { text-align: center }
.scan-start .scan-hero { width: 64px; height: 64px; border-radius: 20px; margin: 4px auto 12px; background: var(--pri-soft); color: var(--pri); display: grid; place-items: center }
.scan-start .scan-hero svg { width: 30px; height: 30px }
.scan-start .btn.block { display: flex; width: 100%; justify-content: center; margin-top: 10px }
.scan-start .chips.center { justify-content: center; margin-top: 14px }

/* ── 掃描：全螢幕相機 ── */
body.scanning { overflow: hidden }
.fs { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; overflow: hidden; touch-action: manipulation }
.fs video, .fs canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain } /* 看到的就是相機拍到的，不裁切，四角才對得準 */
.fs canvas.freeze { z-index: 2 }
.fs-top { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 12px 28px; background: linear-gradient(rgba(0,0,0,.7), transparent) }
.fs-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3 }
.fs-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fs-title span { font-size: 12.5px; color: #d1fae5 }
.fs-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; flex: none; backdrop-filter: blur(8px) }
.fs-btn svg { width: 22px; height: 22px }
.fs-btn.on { background: #fde047; color: #000 }
.fs-btn[hidden] { display: none }
.fs-missing { position: absolute; z-index: 5; bottom: calc(max(28px, calc(env(safe-area-inset-bottom) + 16px)) + 56px); left: 50%; transform: translateX(-50%);
  border: 0; border-radius: 999px; padding: 6px 14px; background: rgba(245,158,11,.92); color: #111; font-weight: 700; font-size: 13px }
.fs-missing[hidden] { display: none }
.fs-status { position: absolute; z-index: 5; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); transform: translateX(-50%);
  background: rgba(0,0,0,.66); padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(8px) }
.fs .fs-status { color: #fff }
.fs .fs-status.ok { background: rgba(5,150,105,.92); color: #fff }
.fs-status[hidden] { display: none }
.fs-flash { position: absolute; z-index: 6; left: 12px; right: 12px; top: calc(max(12px, env(safe-area-inset-top)) + 54px); display: flex; justify-content: center; pointer-events: none }
.fs-flash[hidden] { display: none }
.fs-flash-in { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: #059669; color: #fff; padding: 10px 10px 10px 14px; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 16px; animation: drop .25s ease-out }
.fs-flash-in > svg { width: 22px; height: 22px }
.fs-undo { border: 0; border-radius: 10px; background: rgba(255,255,255,.2); color: #fff; padding: 6px 10px; font-weight: 700; display: flex; gap: 4px; align-items: center }
.fs-undo svg { width: 16px; height: 16px }
@keyframes drop { from { transform: translateY(-16px); opacity: 0 } }
.fs-sheet { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow: auto; padding: 0 10px max(10px, env(safe-area-inset-bottom));
  transition: transform .25s ease; color: var(--fg) }
.fs-sheet[hidden] { display: none }
.fs-sheet .card { position: relative }
/* 檢視模式：定格的照片可以縮放、拖曳 */
.fs.review canvas.freeze { z-index: 4; cursor: grab; will-change: transform }
.fs.review canvas.freeze.zoomed { cursor: move }
.fs.review .fs-missing { display: none }
.fs.review .fs-status { bottom: auto; top: calc(max(12px, env(safe-area-inset-top)) + 58px); font-size: 13.5px; padding: 8px 14px }
.review-btn { width: 100%; justify-content: center; margin-top: 8px }
/* 檢視時的小分數鈕：可以再縮成角落一顆圓點 */
.fs-mini { position: absolute; z-index: 8; left: 0; right: 0; bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); display: flex; justify-content: center; pointer-events: none }
.fs-mini[hidden] { display: none }
.fs-mini-in { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(15,23,42,.72); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.35) }
.fs-mini-score { border: 0; background: transparent; color: #fff; font-size: 18px; font-weight: 800; padding: 0 10px; min-width: 44px; height: 40px; border-radius: 999px }
.fs-mini-score small { font-size: 12px; font-weight: 600; opacity: .7; margin-left: 1px }
.fs-mini-btn { border: 0; height: 40px; border-radius: 999px; padding: 0 14px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; background: rgba(255,255,255,.16); color: #fff }
.fs-mini-btn svg { width: 18px; height: 18px }
.fs-mini-btn.pri { background: var(--pri); color: #fff }
.fs-mini-btn.ghost { width: 40px; padding: 0; justify-content: center; background: transparent }
.fs-mini.tiny { justify-content: flex-end; padding-right: 12px }
.fs-mini.tiny .fs-mini-btn { display: none }
.fs-mini.tiny .fs-mini-in { padding: 2px; opacity: .8 }
.fs-mini.tiny .fs-mini-score { font-size: 14px; height: 36px; padding: 0 8px }
.fs-sheet .card { margin: 0; border-radius: 20px 20px 16px 16px; animation: rise .25s ease-out }
@keyframes rise { from { transform: translateY(40px); opacity: 0 } }
.fs-sheet .who { font-size: 18px; font-weight: 800 }
.edited { margin: 0 0 10px; font-size: 13px; color: var(--pri); font-weight: 600 }
.probs[hidden] { display: none }
.probs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0 }
.prob { background: var(--bad-soft); color: var(--bad); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; font-size: 13px }
.prob b { font-size: 15px }
.legend { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--muted); margin: 6px 0 10px }
.legend i { width: 12px; height: 12px; border-radius: 50%; border: 3px solid; display: inline-block; margin-right: -6px }
.legend i.g { border-color: #16a34a } .legend i.r { border-color: #dc2626 } .legend i.o { border-color: #f59e0b; border-style: dashed }
.actions-row .grow { flex: 1; justify-content: center }
.miss { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px }
.miss li { background: var(--bg); border-radius: 10px; padding: 8px 10px; display: flex; gap: 8px }
@media (prefers-reduced-motion: reduce) { .fs-flash-in, .fs-sheet .card { animation: none } .fs-sheet { transition: none } }
.card .row + .desc { margin-top: 10px }
table.grades tr.todo td:nth-child(-n+3) { color: var(--muted) }
input.cell.tot-in { width: 76px }
#cls .muted { font-size: 12.5px; align-self: center; margin-right: 2px }
.out-choices { display: grid; gap: 10px }
.out-choices .choice { padding: 14px } .out-choices .choice .ic { width: 36px; height: 36px }
#add .in { flex: 1; min-width: 0 }
.steps { margin: 0; padding-left: 22px; line-height: 1.9 }
table.teachers td:first-child { word-break: break-all }
table.teachers .chip { white-space: nowrap } table.teachers .small { font-size: 12px; margin-top: 2px }
/* 題目拖拉排序 */
.q .grip { border: 0; background: transparent; padding: 6px 3px; margin: -6px -4px -6px -6px; color: var(--fg-2); cursor: grab; touch-action: none; display: grid; place-items: center; border-radius: 6px; flex: none }
.q .grip svg { width: 16px; height: 16px; fill: currentColor; stroke: none }
.q .grip:hover, .q .grip:focus-visible { color: var(--pri); background: var(--pri-soft) }
.keygrid.sorting { user-select: none; -webkit-user-select: none }
.keygrid.sorting .q .grip { cursor: grabbing }
.q.dragging { position: relative; z-index: 2; box-shadow: 0 10px 28px rgba(0,0,0,.22); border-color: var(--pri); transform: scale(1.02); opacity: .96 }
/* 答案卡格式 */
.fmt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px }
.fmt-opt { text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; font: inherit; color: inherit }
.fmt-opt b { font-size: 14px } .fmt-opt span { font-size: 12.5px; color: var(--fg-3); line-height: 1.45 }
.fmt-opt:hover:not(:disabled) { border-color: var(--pri) }
.fmt-opt.on { border-color: var(--pri); background: var(--pri-soft) } .fmt-opt.on b { color: var(--pri) }
.fmt-opt:disabled { opacity: .5; cursor: not-allowed }
/* 掃描紀錄 */
.hist-box { max-width: 520px; width: 100% } .hist-box h2 { margin: 0; font-size: 17px }
.hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.hist-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px }
.hist-row.now { border-color: var(--ok); background: var(--ok-soft) }
.small { font-size: 12.5px }
.btn.old-n { gap: 3px; padding-inline: 6px; font-size: 12px }
/* 學生趨勢 */
.flip svg { transform: scaleX(-1) }
.chart-box { position: relative }
svg.trend { height: auto; display: block; touch-action: pan-y }
svg.trend .g { stroke: var(--line); stroke-width: 1 } svg.trend .g.base { stroke: var(--line-2) }
svg.trend .ax { font-size: 11px; fill: var(--fg-3) } svg.trend .ax.sub { font-size: 10px }
svg.trend .me { fill: none; stroke: var(--pri); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round }
svg.trend .avg { fill: none; stroke: var(--fg-3); stroke-width: 2; stroke-dasharray: 5 4 }
svg.trend .dot { fill: var(--pri); stroke: var(--surface); stroke-width: 2 }
svg.trend .lbl { font-size: 12px; font-weight: 700; fill: var(--fg) }
svg.trend .hit { fill: transparent; cursor: crosshair } svg.trend .cross { stroke: var(--line-2); stroke-width: 1 }
.chart-box .tip { position: absolute; top: 0; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; pointer-events: none; white-space: nowrap }
.legend .sw { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--pri); margin: 0 4px 3px 0; vertical-align: middle }
.legend .sw.avg { border-top: 2px dashed var(--fg-3); margin-left: 8px }
td a.stu { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line-2) } td a.stu:hover { color: var(--pri) }
.hist-table td, .hist-table th { white-space: nowrap }
svg.trend { max-width: 100% }
.empty .compat { display: inline-flex; gap: 6px; align-items: center; margin-top: 18px } .empty .compat svg { width: 16px; height: 16px; color: var(--ok) }
/* 家長查詢頁 */
body.parent .topbar-in { justify-content: space-between }
.p-list { list-style: none; margin: 0; padding: 0 } .p-list li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 3px } .p-list li:first-child { border-top: 0 }
.p-score { font-weight: 800; font-size: 18px }
.p-foot { text-align: center; line-height: 1.8; margin: 18px 0 30px }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; flex: 1; min-width: 0 }