:root {
  --bg: #f6f7f9; --card: #fff; --text: #1d232b; --muted: #5d6773; --line: #d9dee5;
  --accent: #1f6feb; --bad: #c62828; --warn: #c06600; --good: #2e7d32;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14181d; --card: #1d232b; --text: #e6e9ee; --muted: #9aa4b0; --line: #333c47;
          --accent: #5b9bff; --bad: #ff6b6b; --warn: #ffa94d; --good: #63c174; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 16px/1.6 system-ui, "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
a { color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 16px 0; }
.muted { color: var(--muted); }
label { display: block; margin: 10px 0 4px; font-weight: 600; }
input, select, button { font: inherit; }
input[type=text], input[type=password], select { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--text); }
input[type=file] { width: 100%; }
button { margin-top: 16px; padding: 9px 18px; border: 0; border-radius: 6px; background: var(--accent); color: #fff;
         cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.error { color: var(--bad); font-weight: 600; }
.banner { background: var(--card); border: 2px solid var(--warn); border-radius: 8px; padding: 8px 12px; font-weight: 600; }
fieldset.kinds { border: 0; padding: 0; margin: 10px 0 0; }
fieldset.kinds legend { font-weight: 600; padding: 0; }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin-right: 18px; }
label.confirm { display: flex; align-items: flex-start; margin-top: 12px; font-weight: 600; }
label.confirm input { margin-top: 6px; }
input[type=number] { width: 8em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); }
h3 { font-size: 1rem; margin: 16px 0 6px; }
.score { font-size: 3rem; font-weight: 700; line-height: 1.1; }
progress { width: 100%; height: 10px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
ol.log { list-style: none; padding: 0; margin: 0; font-variant-numeric: tabular-nums; }
ol.log li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; }
ol.log .t { color: var(--muted); min-width: 3.5em; }
ol.log .p { margin-left: auto; color: var(--bad); font-weight: 600; }
.miss { color: var(--bad); }
.false-alarm { color: var(--warn); }

/* 結果頁的播放器（player.js）：左邊影片，右邊分數和考官紀錄，下面控制列 */
body.wide main { max-width: 1320px; }
#score-card { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#score-card .score { font-size: 1.8rem; }
.conf-slider { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conf-slider label { font-weight: 600; min-width: 6.5em; font-variant-numeric: tabular-nums; }
.conf-slider input[type=range] { flex: 1 1 240px; max-width: 480px; }
.conf-slider p { flex-basis: 100%; margin: 0; }
.player { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto; gap: 12px;
          margin: 16px 0; outline: none; }
.player:fullscreen { background: #000; padding: 12px; grid-template-rows: minmax(0, 1fr) auto; color: #e6e9ee;
                     --card: #1d232b; --line: #333c47; --muted: #9aa4b0; }
.stage { position: relative; background: #000; border-radius: 8px; overflow: hidden; min-height: 0;
         aspect-ratio: 4 / 3; align-self: start; justify-self: center;
         width: min(100%, calc((100vh - 140px) * 4 / 3)); }  /* 控制列要留在螢幕裡 */
.stage video { display: block; width: 100%; height: 100%; object-fit: fill; }
.player:fullscreen .stage { height: 100%; width: auto; max-width: 100%; justify-self: center; align-self: center; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: pointer; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px;
         display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }
.player:not(:fullscreen) .panel { max-height: calc(100vh - 140px); }
.live-score { font-size: 3.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.live-score .unit { font-size: 1.2rem; margin-left: 4px; }
.score-sub { margin: 4px 0 12px; font-size: .9rem; }
.panel h2 { margin: 0 0 6px; }
.panel .log { overflow-y: auto; flex: 1; padding-right: 10px; }
.log button.jump { all: unset; display: flex; gap: 10px; width: 100%; cursor: pointer; }
.log button.jump:hover, .log button.jump:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.log li:first-child { animation: arrive .6s ease-out; }
@keyframes arrive { from { background: color-mix(in srgb, var(--bad) 25%, transparent); } }
.controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controls button { margin: 0; padding: 6px 12px; }
.controls .play { min-width: 3em; }
.controls .seek { flex: 1; min-width: 160px; }
.controls .clock { font-variant-numeric: tabular-nums; min-width: 7.5em; }
.controls .speed { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.controls .speed.on { background: var(--accent); color: #fff; }
@media (max-width: 900px) {
  .player { grid-template-columns: 1fr; }
  .player:not(:fullscreen) .panel { max-height: 50vh; }
}

/* 管理頁（teacher.html） */
body.admin main { max-width: 1000px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.row button, .row label { margin: 0; }
.row select { width: auto; }
button.small { margin: 0; padding: 4px 10px; font-size: .9rem; }
button.danger { background: var(--bad); color: #fff; }
td.code { font: 600 1.35rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .06em; }
td.actions button + button { margin-left: 6px; }
.confirm-box { margin-top: 12px; padding: 12px 14px; border: 2px solid var(--warn); border-radius: 8px; }
.confirm-box p { margin: 0 0 4px; }
.confirm-box button { margin-top: 8px; }
.notice { color: var(--good); font-weight: 600; }

/* 委託頁（index.html） */
.lead { font-size: 1.15rem; margin: 0 0 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
a.button { display: inline-block; padding: 9px 16px; border-radius: 6px; background: var(--accent); color: #fff;
           text-decoration: none; border: 1px solid var(--accent); }
a.button.secondary { background: transparent; color: var(--accent); }
.brief ol.steps > li { margin-bottom: 12px; }
.brief ul ul { margin: 4px 0; }
.brief code { font-size: .95em; padding: 0 3px; border-radius: 3px; background: var(--bg); }
table.classes { margin: 8px 0; }
table.classes td, table.classes th { white-space: normal; }