:root{
  --navy:#1A2E44; --ink:#22364B; --muted:#6B7B8C;
  --bg:#EEF2F6; --card:#FFFFFF; --line:#E2E8EF; --blue:#2F6FB0;
  --radius:16px; --shadow:0 1px 3px rgba(16,32,52,.08),0 6px 18px rgba(16,32,52,.06);
  --safe-b:env(safe-area-inset-bottom,0px);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
  background:var(--navy); color:#fff; box-shadow:0 2px 10px rgba(16,32,52,.18)}
.brand{flex:1; display:flex; align-items:center; justify-content:center; text-decoration:none}
.logo{height:34px; width:auto; display:block}
.iconbtn{appearance:none;border:0;cursor:pointer;font:inherit;color:#fff;display:grid;place-items:center;
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12)}
.iconbtn:active{background:rgba(255,255,255,.26)}
.iconbtn .ic{width:22px;height:22px}
.install{margin-left:auto;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer}

/* ---------- layout ---------- */
.wrap{flex:1; width:100%; max-width:880px; margin:0 auto; padding:18px 16px 28px}
.pad{padding:24px 16px}
.lede{margin:6px 2px 20px}
.lede h1{font-size:1.32rem; line-height:1.25; margin:0 0 6px}
.lede p{margin:0; color:var(--muted); font-size:.98rem}

/* ---------- landing (teacher / admin choice) ---------- */
.gate{max-width:420px;margin:6vh auto 0;text-align:center}
.gate .hero-apple{width:84px;height:84px;border-radius:22px;background:var(--blue);display:grid;place-items:center;margin:0 auto 16px;box-shadow:var(--shadow)}
.gate .hero-apple svg{width:52px;height:52px;color:#fff}
.gate h1{font-size:1.5rem;margin:0 0 4px}
.gate .sub{color:var(--muted);margin:0 0 26px}
.choices{display:grid;gap:14px}
.choice{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:var(--shadow)}
.choice:active{transform:scale(.99)}
.choice .ci{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.choice .ci svg{width:26px;height:26px}
.choice h3{margin:0;font-size:1.08rem}
.choice p{margin:2px 0 0;color:var(--muted);font-size:.86rem}

/* ---------- forms ---------- */
.form{max-width:380px;margin:7vh auto 0}
.form .card-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)}
.form h2{margin:0 0 4px;font-size:1.25rem}
.form .hint{color:var(--muted);font-size:.86rem;margin:0 0 18px}
label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number]{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
input:focus{outline:none;border-color:var(--blue)}
.btn-primary{width:100%;margin-top:18px;padding:13px;border:0;border-radius:12px;background:var(--blue);
  color:#fff;font-size:1rem;font-weight:600;cursor:pointer}
.btn-primary:disabled{opacity:.6}
.btn-text{background:none;border:0;color:var(--blue);font:inherit;cursor:pointer;margin-top:14px;font-size:.88rem}
.link-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.err{color:#C0392B;font-size:.86rem;margin-top:12px;min-height:1.1em}
.ok{color:#0E6655;font-size:.9rem;margin-top:12px}

/* ---------- level grid ---------- */
.levels{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.level{--c:var(--blue); position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:128px; padding:16px; border-radius:var(--radius); cursor:pointer; color:#fff; background:var(--c);
  border:0; text-align:left; font:inherit; box-shadow:var(--shadow); overflow:hidden; transition:transform .12s}
.level:active{transform:scale(.98)}
.level .n{font-size:2.5rem; font-weight:800; line-height:1}
.level .lt{font-weight:700; font-size:1.02rem; margin-top:2px}
.level .tp{font-size:.8rem; opacity:.92; margin-top:8px; line-height:1.35}
.level .badge{position:absolute; top:12px; right:12px; background:rgba(255,255,255,.22); border-radius:999px;
  font-size:.72rem; font-weight:700; padding:4px 9px}
.level .apple{position:absolute; right:-14px; bottom:-14px; width:96px; height:96px; opacity:.12}

/* ---------- level detail ---------- */
.lvhead{display:flex; align-items:center; gap:12px; margin:2px 2px 16px}
.lvhead .dot{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.25rem;flex:none}
.lvhead h1{font-size:1.3rem; margin:0}
.lvhead p{margin:2px 0 0; color:var(--muted); font-size:.85rem}
.res{display:grid; gap:12px}
.card{display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.card .glyph{flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  color:var(--c,#2F6FB0); background:color-mix(in srgb,var(--c,#2F6FB0) 12%,#fff)}
.card .glyph svg{width:26px;height:26px}
.card .meta{min-width:0; flex:1}
.card .meta h3{margin:0; font-size:1.02rem; line-height:1.2}
.card .meta p{margin:3px 0 0; color:var(--muted); font-size:.83rem}
.card .acts{display:flex; gap:8px; flex:none}
.abtn{appearance:none;border:0;cursor:pointer;font:inherit;text-decoration:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:12px;color:#fff;background:var(--c,#2F6FB0)}
.abtn.ghost{background:color-mix(in srgb,var(--c,#2F6FB0) 12%,#fff);color:var(--c,#2F6FB0)}
.abtn:active{filter:brightness(.94)}
.abtn svg{width:22px;height:22px}
@media (max-width:460px){
  .card{flex-wrap:wrap}
  .card .acts{width:100%;margin-top:4px}
  .abtn{flex:1;width:auto}
}

/* ---------- in-site PDF viewer ---------- */
.viewer{position:fixed;inset:0;z-index:60;background:#3a4654;display:flex;flex-direction:column}
.viewer-bar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 10px) 10px 10px;background:var(--navy);color:#fff}
.viewer-title{flex:1;min-width:0;font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-acts{display:flex;gap:6px}
.iconbtn.light{background:rgba(255,255,255,.16)}
.iconbtn.zoom{font-size:1.4rem;font-weight:600;line-height:1}
.viewer-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 12px calc(20px + var(--safe-b));
  display:flex;flex-direction:column;align-items:center;gap:14px;overscroll-behavior:contain}
.pdf-page{background:#fff;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.35);max-width:100%;display:flex;align-items:center;justify-content:center}
.pdf-page canvas{display:block;max-width:100%;height:auto;border-radius:4px}
.viewer-msg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;padding:0 24px;font-size:1rem}
.viewer-msg .vlink{display:inline-block;margin-top:12px;color:#fff;font-weight:600;text-decoration:underline}

/* ---------- install affordance ---------- */
.install-slot:empty{display:none}
.install-slot{margin-top:22px}
.install-card{width:100%;appearance:none;cursor:pointer;font:inherit;font-weight:600;font-size:.98rem;
  border:1.5px dashed color-mix(in srgb,var(--blue) 55%,#fff);background:color-mix(in srgb,var(--blue) 8%,#fff);
  color:var(--blue);border-radius:14px;padding:15px}
.install-card:active{background:color-mix(in srgb,var(--blue) 16%,#fff)}
.gate-note{color:#B7770D;background:#FEF9E7;border-radius:10px;padding:10px 12px;font-size:.86rem;margin:0 0 18px}
.center{text-align:center}

/* ---------- footer + toast ---------- */
.foot{text-align:center; color:var(--muted); font-size:.8rem;
  padding:18px 16px calc(18px + var(--safe-b)); display:flex; flex-direction:column; gap:2px}
.foot .muted{opacity:.72}
.toast{position:fixed; left:50%; bottom:calc(22px + var(--safe-b)); transform:translateX(-50%);
  background:var(--navy); color:#fff; padding:11px 18px; border-radius:999px; font-size:.9rem;
  box-shadow:0 6px 22px rgba(16,32,52,.3); z-index:80; max-width:88vw; text-align:center}
.skel{height:128px;border-radius:var(--radius);background:linear-gradient(100deg,#e6ecf2 30%,#f2f6fa 50%,#e6ecf2 70%);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.topbar,.foot,.install,.toast{display:none!important}}