@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root { --ink:#16243f; --accent:#0b5cad; --cream:#f3f5f8; --paper:#ffffff; --line:#e1e6ec; --mute:#6c7686; --good:#1d5b38; --goodbg:#eaf5ee; --warn:#8a6316; --warnbg:#fdf4e3; --bad:#084a8c; --badbg:#fbecec; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:#26313d; font-family:'Inter',sans-serif; font-size:17px; line-height:1.55; }
h1,h2,h3 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--ink); line-height:1.1; margin:0; }
h1 { font-size:36px; } h2 { font-size:27px; } h3 { font-family:'Inter',sans-serif; font-weight:700; font-size:17px; }
.kicker { font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; }
.sans { font-family:'Inter',sans-serif; }
.top { background:var(--ink); color:#fff; padding:13px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:sticky; top:0; z-index:20; }
.top img { width:32px; height:32px; object-fit:contain; }
.top .brand { font-family:'Inter',sans-serif; font-weight:700; letter-spacing:.05em; font-size:14px; line-height:1.2; }
.top .brand small { display:block; font-weight:500; letter-spacing:.12em; color:#9fb0cb; font-size:11px; }
.top .homelink { display:flex; align-items:center; gap:16px; color:inherit; text-decoration:none; cursor:pointer; }
.top .spacer { flex:1; }
.top .who { font-family:'Inter',sans-serif; font-size:13.5px; color:#c7d2e4; }
.wrap { max-width:1140px; margin:0 auto; padding:30px 22px 80px; }
.wide { max-width:1240px; }
.btn { cursor:pointer; font-family:'Inter',sans-serif; font-weight:700; font-size:14px; border-radius:8px; border:1px solid #cfd7e0; background:#fff; color:var(--ink); padding:8px 14px; text-decoration:none; display:inline-block; white-space:nowrap; }
.btn:hover { border-color:#aab5c2; }
.btn.primary { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.good { background:#1a7d52; border-color:#1a7d52; color:#fff; }
.btn.danger { color:var(--bad); border-color:#e5c3c3; }
.btn.ghost { background:transparent; color:#c7d2e4; border-color:rgba(255,255,255,.25); }
.btn.big { font-size:16px; padding:12px 22px; }
.btn.small { font-size:12.5px; padding:5px 10px; }
.btn[disabled] { opacity:.45; cursor:default; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px 22px; margin:14px 0; }
.row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.chip { font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.1em; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.chip.locked { background:#e9edf2; color:#6c7686; } .chip.open { background:var(--goodbg); color:var(--good); }
.chip.prog { background:var(--warnbg); color:var(--warn); } .chip.done { background:#e9e4f6; color:#4f3a8a; } .chip.bad { background:var(--badbg); color:var(--bad); }
.mute { color:var(--mute); } .small { font-size:14.5px; }
.alert { background:var(--badbg); border:1px solid #e5c3c3; color:var(--bad); border-radius:6px; padding:10px 14px; margin:12px 0; font-family:'Inter',sans-serif; font-size:14px; }
.note { background:color-mix(in srgb, var(--accent), white 90%); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; padding:11px 15px; margin:14px 0; font-size:15.5px; }
.gate { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink); padding:20px; }
.gate-card { background:var(--paper); border-radius:10px; padding:38px 40px; max-width:440px; width:100%; text-align:center; }
.gate-card h1 { margin:8px 0 10px; } .gate-logo { width:54px; height:54px; object-fit:contain; }
.gate-card .quiet { display:block; margin-top:18px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--mute); }
/* questions */
.q { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin:14px 0; }
.q .qhead { display:flex; gap:12px; align-items:baseline; }
.q .qnum { font-family:'Inter',sans-serif; font-weight:700; color:var(--accent); flex:none; }
.q .qtext { font-weight:600; font-size:18px; color:#1d2733; flex:1; white-space:pre-wrap; }
.q .pts { font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; color:var(--mute); flex:none; }
.opt { display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left; cursor:pointer; margin-top:8px; padding:10px 13px; border-radius:6px; border:1.5px solid #dde3ea; background:#fff; font-family:'Inter',sans-serif; font-size:16.5px; color:#26313d; }
.opt b { font-family:'Inter',sans-serif; color:var(--mute); }
.opt.sel { border-color:var(--accent); background:color-mix(in srgb, var(--accent), white 90%); } .opt.sel b { color:var(--accent); }
.opt.right { border-color:#1a7d52; background:var(--goodbg); } .opt.wrong { border-color:#c9545d; background:var(--badbg); }
textarea, input[type=text], input[type=number], select { font-family:'Inter',sans-serif; font-size:16px; border:1.5px solid #cfd7e0; border-radius:6px; padding:10px 12px; background:#fff; color:#26313d; width:100%; }
textarea { min-height:120px; resize:vertical; line-height:1.5; }
textarea.long { min-height:220px; }
.rubric { width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; }
.rubric th, .rubric td { border:1px solid #dde3ea; padding:8px 10px; vertical-align:top; text-align:left; }
.rubric th { font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:.08em; background:#f8fafc; color:var(--ink); }
.rubric td.crit { font-family:'Inter',sans-serif; font-weight:700; color:var(--ink); width:22%; }
.rubric td.lvl { cursor:default; } .rubric td.lvl .lp { font-family:'Inter',sans-serif; font-weight:700; font-size:12px; color:var(--accent); display:block; }
.rubric.click td.lvl { cursor:pointer; } .rubric.click td.lvl:hover { background:#f6f2fb; }
.rubric td.lvl.on { background:color-mix(in srgb, var(--accent), white 82%); outline:2px solid var(--accent); outline-offset:-2px; }
.rubric td.lvl.ai { box-shadow:inset 0 -3px 0 #e0a100; }
.bar { position:sticky; bottom:0; background:var(--paper); border-top:1px solid var(--line); padding:12px 22px; display:flex; gap:14px; align-items:center; z-index:15; }
/* teacher */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:18px 0 8px; flex-wrap:wrap; }
.tab { cursor:pointer; border:none; background:transparent; font-family:'Inter',sans-serif; font-weight:700; font-size:15px; color:var(--mute); padding:10px 16px; border-bottom:3px solid transparent; }
.tab.on { color:var(--ink); border-bottom-color:var(--accent); }
table.grid { border-collapse:collapse; width:100%; font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; }
table.grid th, table.grid td { border:1px solid #dde3ea; padding:7px 10px; text-align:center; white-space:nowrap; }
table.grid th { background:#f8fafc; color:var(--ink); font-size:12px; vertical-align:bottom; }
table.grid td.name, table.grid th.name { text-align:left; position:sticky; left:0; background:#ffffff; font-weight:600; }
.scroll { overflow:auto; border:1px solid var(--line); border-radius:6px; }
.cell-good { background:var(--goodbg); color:var(--good); } .cell-mid { background:var(--warnbg); color:var(--warn); } .cell-low { background:var(--badbg); color:var(--bad); } .cell-pend { color:#a59c88; }
.resp { background:#f8fafc; border:1px solid #dde3ea; border-radius:6px; padding:12px 14px; white-space:pre-wrap; font-size:16px; margin-top:10px; }
.aibox { border:1px dashed #e0a100; background:#fffaeb; border-radius:6px; padding:10px 13px; margin-top:10px; font-size:14.5px; }
.aibox b { font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:.1em; color:#8a6316; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; padding:11px 20px; border-radius:24px; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px 14px; margin:12px 0; font-family:'Inter',sans-serif; font-size:14px; }
.checks label { display:flex; gap:8px; align-items:center; }
/* legacy small-screen tweaks */
@media (max-width:640px) { .wrap { padding:20px 14px 80px; } h1 { font-size:29px; } .rubric { font-size:13px; } }

@media print { .top, .tabs, .btn, .bar, textarea, .toast { display:none !important; } body { background:#fff; } .card { break-inside:avoid; border-color:#ccc; } .wrap { max-width:none; padding:0; } }

/* ===== phones (quiz page + teacher dashboard) ===== */
html, body { overflow-x:hidden; -webkit-text-size-adjust:100%; }
@media (max-width:700px) {
  body { font-size:16px; }
  .top { padding:10px 14px; gap:8px; }
  .top .who { display:none; }
  .top .homelink { gap:8px; }
  .top .brand small { display:none; }
  .wrap { padding:18px 14px 110px; }
  h1 { font-size:27px; } h2 { font-size:22px; }
  .card { padding:16px 15px; border-radius:8px; }
  .q { padding:15px 14px; } .q .qtext { font-size:16.5px; } .q .qhead { flex-wrap:wrap; }
  .opt { font-size:16px; padding:11px 12px; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:none; padding:10px 12px; font-size:14.5px; }
  .bar { flex-wrap:wrap; gap:8px 10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .bar .grow { display:none; }
  .bar .btn.big { flex:1 1 auto; text-align:center; }
  .rubric { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rubric td.crit { min-width:110px; } .rubric td.lvl { min-width:130px; }
  .gate { padding:14px; } .gate-card { padding:30px 22px; }
  .btn { padding:9px 13px; } .btn.small { padding:7px 11px; }
  input[type=datetime-local] { max-width:100% !important; }
  .checks { grid-template-columns:1fr; }
  .toast { left:14px; right:14px; transform:none; text-align:center; }
}

/* photo cards shared by the dashboards */
.hero { position:relative; border-radius:12px; overflow:hidden; color:#fff; padding:28px 30px 26px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; background:#16243f center/cover no-repeat; margin:14px 0; box-shadow:0 14px 34px rgba(22,36,63,.18); }
.hero .kicker { color:#c7d2e4; }
.hero h2 { color:#fff; font-size:34px; margin-top:6px; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hero p { color:#e3e9f3; margin:8px 0 0; max-width:640px; font-size:17px; line-height:1.45; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.hero .row { margin-top:14px; }
.hero .btn.light { background:#fff; border-color:#fff; color:var(--ink); }
.thumb { width:136px; height:92px; object-fit:cover; border-radius:8px; flex:none; background:#e9edf2; }
.thumb.sq { width:92px; height:68px; }
.chstrip { border-radius:10px; overflow:hidden; color:#fff; padding:18px 22px; margin:30px 0 4px; background:#16243f center/cover no-repeat; min-height:120px; display:flex; flex-direction:column; justify-content:flex-end; }
.chstrip .kicker { color:#c7d2e4; }
.chstrip h2 { color:#fff; font-size:25px; margin-top:4px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:14px 0; }
.tile { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:18px 20px; border-top:4px solid var(--accent); }
.tile .n { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:40px; line-height:1; }
@media (max-width:640px) { .thumb { width:96px; height:66px; } .hero h2 { font-size:27px; } .hero { min-height:190px; padding:22px 20px; } }

/* teacher-edition teaching notes */
.tn { margin-top:18px; border:1px solid #d9d2ee; border-left:5px solid #6d4fc3; border-radius:8px; background:#faf8ff; padding:14px 18px 16px; }
.tn-head { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px; }
.tn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px 20px; }
.tn-box { background:#fff; border:1px solid #e6e1f3; border-radius:8px; padding:12px 16px 14px; font-size:15px; line-height:1.45; }
.tn-box:first-child { grid-column:1 / -1; }
.tn-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; color:var(--ink); margin-bottom:6px; }
.tn-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 18px; }
.tn-label { font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.1em; color:#6d4fc3; margin-bottom:2px; }
.tn ul, .tn ol { margin:4px 0 0 18px; padding:0; } .tn li { margin-bottom:5px; }
.tn-group { border-top:1px solid #eee9f8; padding-top:8px; margin-top:8px; } .tn-group:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.tn-mis { border-top:1px solid #eee9f8; padding-top:6px; margin-top:6px; } .tn-mis:first-child { border-top:none; padding-top:0; margin-top:0; }
@media print { .tn { break-inside:avoid; } }

/* inbox button + unread badge in the top bar */
.btn.inbox { position:relative; padding-right:14px; }
.btn.inbox.on { background:rgba(255,255,255,.12); color:#fff; }
.badge { position:absolute; top:-8px; right:-8px; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#dc2626; color:#fff; font-family:'Inter',sans-serif; font-weight:700; font-size:12px; line-height:20px; text-align:center; box-shadow:0 0 0 2px var(--ink); }