/* 中醫藥AI科普課堂（網頁）：老師、課程製作方、學生。和 iPad App 同一套顏色和卡片：米色紙面、墨色線、番茄紅主色。 */
:root {
  color-scheme: light;
  --paper: #F7F1E6; --surface: #FFFFFF; --wash: #FBF7F0;
  --ink: #2A2320; --ink-2: #5C4F46; --ink-3: #8A8076; --line: #E8DFCF; --line-2: #F0E9DC;
  --tomato: #C8401F; --tomato-l: #FBE3DA; --jade: #1F5C47; --jade-l: #DCEFE6; --blue: #3E6FB0; --blue-l: #E6EDF7;
  --butter: #FFD86B; --amber: #D99A1E; --amber-l: #FBEFD3;
  --plate-life: #BFE6D3; --plate-moral: #FFD3BC; --plate-med: #C9DDF5;
  --sans: "PingFang HK", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --serif: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --shadow: 0 1px 0 rgba(42,35,32,.04), 0 10px 30px rgba(42,35,32,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper) radial-gradient(rgba(42,35,32,.07) 1px, transparent 1.2px) 0 0 / 22px 22px;
  color: var(--ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; cursor: pointer; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, p { margin: 0; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 28px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: .5px; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand small { font-weight: 600; color: var(--ink-3); font-size: 13px; margin-left: 2px; }
.top .sp { flex: 1; }
.picker { display: flex; align-items: center; gap: 8px; }
.select.small { font-size: 13px; padding: 4px 30px 4px 10px; }
.select { appearance: none; border: 1.5px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C4F46' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; border-radius: 10px; padding: 7px 34px 7px 12px; font: inherit; font-weight: 700; color: var(--ink); }
.me { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--tomato); flex: none; font-size: 14px; }
.avatar.s { width: 28px; height: 28px; font-size: 13px; }
.btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 14px; font-weight: 700; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn.pri { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.btn.pri:hover { background: #B2381B; }
.btn.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.s { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- page ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 26px 28px 60px; }
.head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.head h1 { font: 800 30px/1.2 var(--serif); letter-spacing: 1px; }
.head .sub { color: var(--ink-2); margin-top: 4px; }
.head .sp { flex: 1; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.tab { border: 0; background: transparent; border-radius: 10px; padding: 7px 16px; font-weight: 700; color: var(--ink-2); }
.tab.on { background: var(--ink); color: #fff; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-h h2 { font-size: 17px; font-weight: 800; }
.card-h .hint { margin-left: auto; }
.hint { color: var(--ink-3); font-size: 13px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.empty { text-align: center; padding: 34px 20px; color: var(--ink); display: flex; flex-direction: column; align-items: center; }
.empty img { width: 190px; margin-bottom: 12px; }
.empty h2 { font: 800 20px/1.3 var(--serif); }
.nodata { color: var(--ink-3); font-weight: 700; padding: 28px 0; text-align: center; }
.sp { flex: 1; }
.dash { color: #C3B9AB; }
.loading { display: flex; gap: 8px; justify-content: center; padding: 40px 0; }
.loading span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); animation: blink 1s infinite ease-in-out; }
.loading span:nth-child(2) { animation-delay: .15s; } .loading span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.back { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; font-size: 26px; font-weight: 900; line-height: 1; box-shadow: 3px 3px 0 var(--ink); align-self: center; }
.back:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.head-pic { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 2px solid var(--ink); align-self: center; }
.chips-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip.tiny { font-size: 11px; padding: 0 7px; margin-left: 6px; background: var(--blue-l); color: var(--blue); }
.chip.new { background: var(--butter); color: var(--ink); border: 2px solid var(--ink); }
button.chip { border: 0; cursor: pointer; }
.endrow { display: flex; justify-content: flex-end; }

/* ---------- stat tiles ---------- */
.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi .label { color: var(--ink-2); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.kpi .value { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.kpi .value small { font-size: 18px; font-weight: 700; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.kpi .foot { color: var(--ink-3); font-size: 13px; }
.kpi.alert .value { color: var(--tomato); }
.kpi .keys, .goalbar .counts { display: flex; gap: 12px; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.kpi .keys i, .goalbar .counts i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.goalbar .counts { margin-top: 6px; }
.kpi .names { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- charts ---------- */
.stack { display: flex; gap: 2px; border-radius: 6px; overflow: hidden; background: transparent; }
.stack span { display: block; min-width: 6px; height: 100%; outline: none; }
.stack span:first-child { border-radius: 4px 0 0 4px; } .stack span:last-child { border-radius: 0 4px 4px 0; } .stack span:only-child { border-radius: 4px; }
.stack span:hover, .stack span:focus { filter: brightness(1.08); }
.meter { height: 8px; border-radius: 4px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 13px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend .sw.dot { border-radius: 50%; }
.legend .sw-svg { flex: none; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .grid { stroke: #EFE8DC; stroke-width: 1; }
svg.chart .axis { stroke: #D9CFBF; stroke-width: 1; }
svg.chart .tick { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
svg.chart .axis-title { fill: var(--ink-2); font-size: 12px; font-weight: 700; }
svg.chart .quad { fill: #B5AB9E; font-size: 12px; font-weight: 700; }
svg.chart .dot-label { fill: var(--ink); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
svg.chart g.dot, svg.chart g.mark, svg.chart rect { outline: none; }
svg.chart g.dot:hover circle:nth-child(2), svg.chart g.dot:focus circle:nth-child(2) { r: 8; }
.tt { position: fixed; z-index: 100; display: none; pointer-events: none; background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-width: 300px; }
.tt-row { display: flex; align-items: baseline; gap: 8px; }
.tt-row b { font-weight: 800; }
.tt-row span { color: #D8CFC4; }
.tt-key { width: 12px; height: 3px; border-radius: 2px; display: inline-block; align-self: center; flex: none; }

/* goals: one row per goal */
.goalbars { display: grid; gap: 14px; }
.goalbar .t { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.goalbar .no { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.goalbar .t p { flex: 1; font-size: 14px; font-weight: 600; }

/* students × goals */
.hm { width: 100%; border-collapse: separate; border-spacing: 0; }
.hm th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 700; padding: 0 8px 10px; white-space: nowrap; }
.hm th.c, .hm td.c { text-align: center; }
.hm td { padding: 9px 8px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.hm tr.row { cursor: pointer; }
.hm tr.row:hover td { background: var(--wash); }
.hm tr.row.attn td:first-child { box-shadow: inset 3px 0 0 var(--tomato); }
.hm td.go { color: var(--ink-3); font-size: 22px; font-weight: 700; text-align: right; width: 24px; }
.hm tr.row:hover td.go { color: var(--ink); }
.hm .who { display: flex; align-items: center; gap: 10px; min-width: 120px; }
.hm .who b { display: block; line-height: 1.2; }
.hm .who small { color: var(--ink-3); font-size: 12px; }
.hm .num { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.hm .num b { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.hm .num .meter { flex: 1; }
.hc { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font-size: 13px; font-weight: 800; outline: none; }
.hc:focus, .hc:hover { box-shadow: 0 0 0 2px var(--ink); }
.prog { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--jade); display: inline-block; }
.dots i.done { background: var(--jade); }
.dots i.now { background: linear-gradient(90deg, var(--jade) 50%, transparent 50%); }
.tablewrap { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--line-2); color: var(--ink-2); }
.chip.good { background: var(--jade-l); color: var(--jade); }
.chip.warn { background: var(--amber-l); color: #8A5A0B; }
.chip.test { background: transparent; border: 1px dashed #CFC5B5; color: var(--ink-3); font-weight: 600; }
.chip .ic { font-size: 11px; }
.coursepick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cpick { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 6px 14px 6px 6px; font-weight: 700; }
.cpick img, .cpick .ph { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--line-2); }
.cpick.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* narrative */
.ai { display: grid; gap: 16px; }
.ai .overview { font-size: 15px; line-height: 1.75; }
.ai h3 { font-size: 14px; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ai ul { margin: 0; padding-left: 18px; color: var(--ink); }
.ai li { margin: 3px 0; }
.ai .col, .two .col { border-radius: 14px; padding: 12px 14px; }
.col.good { background: var(--jade-l); } .col.hard { background: var(--amber-l); } .col.idea { background: var(--blue-l); } .col.warnbox { background: var(--tomato-l); }
.col.good h3 { color: var(--jade); } .col.hard h3 { color: #8A5A0B; } .col.idea h3 { color: var(--blue); } .col.warnbox h3 { color: var(--tomato); }
.ai .tag { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; margin-right: 4px; }
.made { color: var(--ink-3); font-size: 12px; }

/* ---------- course cards (the student app's cards) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px 22px; }
.ccard { background: #fff; border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; }
.ccard .pic { position: relative; aspect-ratio: 16 / 10; background: var(--line-2); border-bottom: 2.5px solid var(--ink); overflow: hidden; }
.ccard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard .plate { position: absolute; top: 12px; left: 12px; border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 14px; }
.ccard .flag { position: absolute; top: 12px; right: 12px; background: var(--butter); border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 13px; }
.ccard .body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ccard h3 { font-size: 22px; font-weight: 900; letter-spacing: .5px; }
.ccard .situation { color: var(--tomato); font-weight: 800; font-size: 16px; }
.ccard .meta { color: var(--ink-2); font-weight: 700; font-size: 13px; }
.ccard .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccard .foot .sp { flex: 1; }
.ccard .classprog { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.cstats { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--wash); border: 1.5px solid var(--line); cursor: pointer; }
.cstat { display: grid; gap: 4px; align-content: start; }
.cstat span { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.cstat b { font-size: 22px; font-weight: 900; line-height: 1.1; }
.cstat.alert b { color: var(--tomato); }
.csum { display: flex; gap: 12px; align-items: center; }
.csum img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 2px solid var(--ink); }
.csum b { display: block; font-size: 18px; }
.csum span { color: var(--ink-2); font-weight: 700; font-size: 14px; }
.stprog { display: grid; gap: 4px; min-width: 160px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.kbtn { border: 2.5px solid var(--ink); border-radius: 14px; padding: 7px 16px; font-weight: 900; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.kbtn.pri { background: var(--tomato); color: #fff; }
.kbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.section-h { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 16px; }
.section-h h2 { font: 800 21px/1.3 var(--serif); }

/* ---------- drawer: one student ---------- */
.veil { position: fixed; inset: 0; background: rgba(42,35,32,.32); z-index: 40; display: flex; justify-content: flex-end; }
.drawer { width: min(720px, 100%); height: 100%; overflow-y: auto; background: var(--paper); box-shadow: -10px 0 30px rgba(0,0,0,.12); padding: 0 0 40px; }
.drawer .dh { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
.drawer .dh h2 { font: 800 22px/1.2 var(--serif); }
.drawer .dh .course { color: var(--ink-2); font-weight: 700; font-size: 14px; }
.goal .no { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; flex: none; }
.drawer .dh .sp { flex: 1; }
.drawer .db { padding: 20px 24px; display: grid; gap: 16px; }
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mini { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.mini b { font-size: 26px; font-weight: 800; line-height: 1; }
.mini b small { font-size: 14px; color: var(--ink-3); margin-left: 2px; }
.mini span { color: var(--ink-2); font-size: 13px; font-weight: 700; }
.goal { border-top: 1px solid var(--line-2); padding: 12px 0; }
.goal:first-child { border-top: 0; padding-top: 0; }
.goal .gt { display: flex; gap: 10px; align-items: center; }
.goal .gt p { flex: 1; font-weight: 700; font-size: 14px; }
.lvl { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.parts { margin: 8px 0 0 32px; display: grid; gap: 6px; }
.part { display: grid; grid-template-columns: 20px 1fr; gap: 2px 8px; font-size: 14px; }
.part .ic { font-weight: 900; text-align: center; }
.part .ic.ok { color: var(--jade); } .part .ic.hint { color: var(--blue); } .part .ic.bad { color: var(--tomato); } .part .ic.none { color: #C3B9AB; }
.part .q { grid-column: 2; background: #FFF4D9; border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.part .q small { color: var(--ink-3); margin-left: 6px; }
.part .n { grid-column: 2; color: var(--ink-2); font-size: 13px; }
.session { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.session:first-of-type { border-top: 0; padding-top: 0; }
.session .sh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.session .sh b { font-weight: 800; }
.note { background: var(--jade-l); border-radius: 14px; padding: 14px 16px; }
.note h3 { font-size: 14px; font-weight: 800; color: var(--jade); margin-bottom: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two h3 { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.two ul { margin: 0; padding-left: 18px; font-size: 14px; }

/* ---------- replay ---------- */
.modal { position: fixed; inset: 0; background: rgba(42,35,32,.4); z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal .box { width: min(760px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: 0 0 18px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal .bh { position: sticky; top: 0; background: #fff; display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); z-index: 1; }
.modal .bh h2 { font-size: 18px; font-weight: 800; flex: 1; }
.modal .bb { padding: 14px 22px; }
.line { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 5px 0; font-size: 14px; }
.line .w { color: var(--ink-3); font-weight: 700; }
.line.me { background: #FFF4D9; border-radius: 8px; padding: 5px 8px; margin: 0 -8px; }
.line.me .w { color: var(--ink); }
.line.board .w { color: var(--blue); }
.scene-h { font-weight: 800; margin: 16px 0 4px; padding-top: 10px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; align-items: baseline; }

/* ---------- course preview ---------- */
.pv { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: grid; grid-template-rows: auto 1fr; }
.pv .ph { display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--line); }
.pv .ph h2 { font: 800 20px/1.2 var(--serif); }
.pv .ph .sp { flex: 1; }
.pv .pb { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 0; }
.pv .rail { overflow-y: auto; border-right: 1px solid var(--line); background: rgba(255,255,255,.6); padding: 14px 10px 30px; }
.pv .rail h4 { margin: 14px 10px 6px; font-size: 12px; color: var(--ink-3); font-weight: 800; letter-spacing: 1px; }
.pv .rail button { width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.pv .rail button.on { background: var(--ink); color: #fff; }
.pv .rail button .k { width: 26px; height: 26px; border-radius: 7px; background: var(--line-2); display: grid; place-items: center; font-size: 14px; flex: none; }
.pv .rail button.on .k { background: rgba(255,255,255,.15); }
.pv .rail button small { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.pv .rail button.on small { color: #D8CFC4; }
.pv .stage { overflow-y: auto; padding: 22px 30px 40px; }
.pv .st { max-width: 1020px; margin: 0 auto; display: grid; gap: 18px; }
.pv .sth { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pv .sth h3 { font: 800 26px/1.25 var(--serif); }
.pv .cast { display: flex; gap: 6px; margin-left: auto; }
.pv .cast img { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--line); object-fit: cover; }
.pv .board { background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); overflow: hidden; }
.pv .board video, .pv .board > img { width: 100%; display: block; background: #fff; }
.pv .steps { display: flex; flex-wrap: wrap; gap: 8px; }
.pv .steps span { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; }
.pv .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pv .tile { background: #fff; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; }
.pv .tile img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.pv .tile span { padding: 6px 10px; font-weight: 700; font-size: 14px; border-top: 1px solid var(--line-2); }
.pv .tile.ok { border-color: var(--jade); }
.pv .tile.ok span { background: var(--jade-l); color: var(--jade); }
.pv .bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pv .bin { background: #fff; border: 2px dashed #D9CFBF; border-radius: 16px; padding: 10px; }
.pv .bin h5 { margin: 0 0 8px; font-size: 15px; }
.pv .bin .its { display: flex; flex-wrap: wrap; gap: 6px; }
.pv .bin .its span { display: inline-flex; align-items: center; gap: 6px; background: var(--wash); border-radius: 10px; padding: 3px 8px 3px 3px; font-size: 13px; font-weight: 700; }
.pv .bin .its img { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; background: #fff; }
.pv .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pv .chips span { background: var(--butter); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 12px; font-weight: 800; }
.pv .info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pv .info h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
.pv .info ul { margin: 0; padding-left: 18px; font-size: 14px; }
.pv .q { font-size: 18px; font-weight: 800; }
.pv .nav { display: flex; justify-content: space-between; align-items: center; }
.pv .counter { font-weight: 800; color: var(--ink-2); background: var(--line-2); border-radius: 999px; padding: 2px 12px; font-size: 14px; }

/* ---------- sign-in ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #fff; }
.login .art { background: #F7F1E1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 32px; border-right: 2.5px solid var(--ink); }
.login .art .hero { width: min(420px, 82%); display: block; }
.login .art h1 { font: 900 34px/1.2 var(--serif); letter-spacing: 3px; text-align: center; }
.plates { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.plate-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 6px 14px 6px 6px; box-shadow: 3px 3px 0 var(--ink); }
.plate-chip img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.plate-chip b { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 800; }
.plate-chip span { display: block; font-weight: 800; font-size: 15px; margin-top: 2px; }
.login form { align-self: center; justify-self: center; width: min(360px, 88%); display: grid; gap: 16px; }
.login .brand { font-size: 24px; margin-bottom: 4px; }
.login .brand img { width: 42px; height: 42px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); }
.btn.big { padding: 12px 22px; font-size: 16px; border-radius: 12px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.field input, textarea.input, input.input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; background: #fff; }
.field input[type="checkbox"] { width: auto; padding: 0; flex: none; }
.field input:focus, textarea.input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.err { color: var(--tomato); font-size: 14px; min-height: 20px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 120; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 14px; }
.toast.bad { background: var(--tomato); }
.dlg { position: fixed; inset: 0; background: rgba(42,35,32,.35); z-index: 90; display: grid; place-items: center; padding: 16px; }
.dlg .box { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.2); display: grid; gap: 14px; }
.dlg h2 { font-size: 19px; font-weight: 800; }
.dlg .foot { display: flex; justify-content: flex-end; gap: 8px; }
.logincards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.logincards > div { border: 1.5px dashed #CFC5B5; border-radius: 12px; padding: 10px 12px; }
.logincards b { display: block; font-size: 18px; }

/* ---------- the course provider: schools ---------- */
.nav { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--wash); border: 1px solid var(--line); }
.nav a { padding: 5px 14px; border-radius: 9px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.nav a.on { background: var(--ink); color: #fff; }
.cards.schools { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 26px; }
.scard { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 18px 20px; color: var(--ink); cursor: pointer; outline: none; transition: transform .08s, box-shadow .08s; }
.scard:hover, .scard:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.scard .st { display: flex; align-items: center; gap: 12px; }
.scard .logo { width: 50px; height: 50px; border-radius: 14px; background: var(--plate-moral); border: 2.5px solid var(--ink); display: grid; place-items: center; font: 900 24px var(--serif); flex: none; }
.scard .nm { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.scard h3 { font-size: 20px; font-weight: 900; letter-spacing: .5px; }
.scard .sub { color: var(--ink-2); font-weight: 700; font-size: 13px; }
.scard .go { font-size: 26px; font-weight: 800; color: var(--ink-3); }
.code { font: 700 13px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); background: var(--line-2); border-radius: 6px; padding: 1px 8px; letter-spacing: .5px; }
.head .sub .code { font-size: 14px; }
.head > .chip { align-self: center; }
.scard .seats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.seat { display: grid; gap: 4px; align-content: start; }
.seat > span { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.seat b { font-size: 22px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.seat b small { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.seat.full b { color: var(--tomato); }
.seat .meter { outline: none; }
.seat.inline { grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; row-gap: 4px; min-width: 150px; }
.seat.inline b { font-size: 17px; }
.seat.inline .meter { grid-column: 1 / -1; }
.card-h .seat.inline { margin-right: 6px; align-self: center; }
.row-c { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.scard .sf { display: flex; gap: 12px; align-items: center; color: var(--ink-2); font-weight: 700; font-size: 13px; border-top: 1.5px solid var(--line-2); padding-top: 12px; }
.scard .nums { display: flex; gap: 26px; }
.scard .nums div { display: grid; }
.scard .nums b { font-size: 26px; font-weight: 900; line-height: 1.1; }
.scard .nums span { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.scard.cls .sf .select { flex: 1; }
.chip.bad { background: var(--tomato-l); color: var(--tomato); }
.hm td.acts { text-align: right; white-space: nowrap; }
.hm td.acts .btn + .btn { margin-left: 6px; }
.cstats.eq { grid-template-columns: repeat(3, minmax(0, 1fr)); cursor: default; }
.ccard .foot .meta { font-size: 13px; }
.form { display: grid; gap: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input.input:disabled { background: var(--wash); color: var(--ink-2); }
.picks { display: grid; gap: 4px; max-height: 250px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 12px; padding: 6px; }
.picks.off { opacity: .5; }
.pick { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.pick:hover { background: var(--wash); }
.pick img, .pick .ph { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--line-2); flex: none; }
.pick b { flex: 1; }
.dlg .field > .check { margin: 2px 0 4px; }

/* ---------- students' page ---------- */
.hello { display: flex; align-items: center; gap: 22px; background: #fff; border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 20px 26px; margin-bottom: 26px; }
.hello img { width: 120px; border-radius: 16px; }
.hello h1 { font: 900 28px/1.2 var(--sans); }
.hello p { color: var(--ink-2); font-weight: 700; margin-top: 4px; }
.hello .stats { margin-left: auto; display: flex; gap: 22px; }
.hello .stats div { text-align: center; }
.hello .stats b { display: block; font-size: 34px; font-weight: 900; line-height: 1.1; }
.hello .stats span { color: var(--ink-2); font-weight: 700; font-size: 13px; }

@media (max-width: 980px) {
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv .pb { grid-template-columns: minmax(0, 1fr); }
  .pv .rail { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 16px 16px 50px; }
  .row2 { grid-template-columns: 1fr; }
  .nav a { padding: 5px 10px; }
  .brand small { display: none; }
  .top .btn.ink { padding: 6px 10px; font-size: 13px; }
  .top { padding: 8px 14px; gap: 8px; }
  .brand span, .me .name { display: none; }
  .head h1 { font-size: 24px; }
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .pv .info { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; }
  .login .art { border-right: 0; border-bottom: 2.5px solid var(--ink); padding: 26px 18px; }
  .login .art .hero { width: 56%; }
  .login .art h1 { font-size: 26px; }
  .login form { padding: 26px 0 40px; }
  .hello { flex-wrap: wrap; }
  .hello .stats { margin-left: 0; }
  .pv .stage { padding: 16px; }
}
@media print {
  .top, .noprint, .tabs { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}