/* ==========================================================================
   GATEWAY TEACHQUIZ — DESIGN SYSTEM
   Canva-inspired: soft gradients · rounded shapes · smooth animations
   ========================================================================== */
/* Recovery note (2026-10-11): the prior shared stylesheet was overwritten with
   export-modal rules. This baseline was recovered from DESIGN-PREVIEW.html's
   embedded style block; the original file had no local Git/backup copy, so
   exact equivalence to the former style.css could not be verified. */

/* ---------------------------------------------------------------- tokens */
:root{
  /* brand palette */
  --brand:#6366f1;        --brand-dark:#4f46e5;   --brand-deep:#4338ca;
  --violet:#8b5cf6;       --pink:#ec4899;         --cyan:#06b6d4;
  --emerald:#10b981;      --emerald-dark:#059669; --amber:#f59e0b;
  --rose:#f43f5e;         --sky:#0ea5e9;

  /* tiers (very light backgrounds) */
  --brand-50:#eef2ff;  --brand-100:#e0e7ff;
  --violet-50:#f5f3ff; --pink-50:#fdf2f8;
  --cyan-50:#ecfeff;   --emerald-50:#ecfdf5;
  --amber-50:#fffbeb;  --rose-50:#fff1f2;
  --slate-50:#f8fafc;  --slate-100:#f1f5f9; --slate-200:#e2e8f0;

  /* ink */
  --ink:#0f172a; --ink-2:#1e293b; --muted:#64748b; --muted-2:#94a3b8;
  --line:#e9edf4; --line-2:#dee5ee;

  /* surfaces */
  --bg:#f7f9fc;
  --card:#ffffff;

  /* gradients */
  --grad-brand:linear-gradient(135deg,#6366f1 0%,#8b5cf6 48%,#ec4899 100%);
  --grad-teacher:linear-gradient(135deg,#4f46e5 0%,#7c3aed 52%,#06b6d4 100%);
  --grad-student:linear-gradient(135deg,#059669 0%,#10b981 50%,#06b6d4 100%);
  --grad-admin:linear-gradient(135deg,#0f172a 0%,#334155 60%,#4f46e5 100%);
  --grad-sunset:linear-gradient(135deg,#f59e0b 0%,#ec4899 100%);
  --grad-aurora:linear-gradient(120deg,#6366f1,#8b5cf6,#ec4899,#06b6d4,#6366f1);
  --grad-soft:linear-gradient(160deg,#eef2ff 0%,#faf5ff 40%,#f0f9ff 100%);

  /* shape */
  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-full:999px;

  /* elevation */
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 2px 6px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --sh:0 6px 16px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
  --sh-md:0 14px 34px rgba(15,23,42,.09), 0 4px 10px rgba(15,23,42,.04);
  --sh-lg:0 24px 60px rgba(15,23,42,.13), 0 8px 20px rgba(15,23,42,.06);
  --sh-brand:0 12px 28px rgba(99,102,241,.30);
  --sh-emerald:0 12px 28px rgba(16,185,129,.28);

  --ease:cubic-bezier(.22,.9,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --max:1240px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.62; font-size:15.5px; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.22; font-weight:800; letter-spacing:-.022em; color:var(--ink)}
h1{font-size:clamp(1.65rem,4vw,2.15rem)}
h2{font-size:clamp(1.3rem,3vw,1.6rem)}
h3{font-size:1.13rem}
h4{font-size:1rem}
p{margin:0 0 .85em}
a{color:var(--brand-dark); text-decoration:none; transition:color .18s var(--ease)}
a:hover{color:var(--pink)}
small{font-size:.82rem}
code,kbd{
  background:var(--slate-100); border:1px solid var(--line-2); border-radius:8px;
  padding:.12em .45em; font-size:.86em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace
}
::selection{background:var(--brand-100); color:var(--brand-deep)}
img,svg{max-width:100%}

/* ---------------------------------------------------------------- scrollbar */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px;border:3px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ---------------------------------------------------------------- keyframes */
@keyframes gtqFadeUp   {from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none}}
@keyframes gtqFadeIn   {from{opacity:0} to{opacity:1}}
@keyframes gtqPop      {0%{opacity:0;transform:scale(.93)} 65%{transform:scale(1.015)} 100%{opacity:1;transform:scale(1)}}
@keyframes gtqSlideL   {from{opacity:0;transform:translateX(-26px)} to{opacity:1;transform:none}}
@keyframes gtqSlideR   {from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none}}
@keyframes gtqSpin     {to{transform:rotate(360deg)}}
@keyframes gtqFloat    {0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes gtqFloat2   {0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(14px) rotate(-5deg)}}
@keyframes gtqBlob     {0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(34px,-26px) scale(1.09)} 66%{transform:translate(-24px,22px) scale(.94)}}
@keyframes gtqAurora   {0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
@keyframes gtqShimmer  {to{background-position:200% 0}}
@keyframes gtqRing     {0%{box-shadow:0 0 0 0 rgba(99,102,241,.45)} 70%{box-shadow:0 0 0 16px rgba(99,102,241,0)} 100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}
@keyframes gtqPulse    {50%{opacity:.55}}
@keyframes gtqShine    {0%{left:-140%} 100%{left:140%}}
@keyframes gtqBounceIn {0%{opacity:0;transform:scale(.8) translateY(16px)} 60%{opacity:1;transform:scale(1.04) translateY(-4px)} 100%{transform:scale(1) translateY(0)}}
@keyframes gtqDrawIn   {from{stroke-dashoffset:var(--dash,120)} to{stroke-dashoffset:0}}

/* ---- entrance utilities ---- */
.anim-up   {animation:gtqFadeUp .62s var(--ease) both}
.anim-in   {animation:gtqFadeIn .5s var(--ease) both}
.anim-pop  {animation:gtqPop .55s var(--ease-back) both}
.anim-left {animation:gtqSlideL .6s var(--ease) both}
.anim-right{animation:gtqSlideR .6s var(--ease) both}

/* staggered children */
.stagger > *{animation:gtqFadeUp .6s var(--ease) both}
.stagger > *:nth-child(1){animation-delay:.04s}
.stagger > *:nth-child(2){animation-delay:.10s}
.stagger > *:nth-child(3){animation-delay:.16s}
.stagger > *:nth-child(4){animation-delay:.22s}
.stagger > *:nth-child(5){animation-delay:.28s}
.stagger > *:nth-child(6){animation-delay:.34s}
.stagger > *:nth-child(7){animation-delay:.40s}
.stagger > *:nth-child(8){animation-delay:.46s}

/* scroll reveal (JS adds .in) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 20px}
.page{min-height:100vh; display:flex; flex-direction:column}
.main{flex:1; padding:30px 0 80px}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.row{display:flex; gap:13px; flex-wrap:wrap; align-items:center}
.row.between{justify-content:space-between}
.row.top{align-items:flex-start}
.spacer{flex:1}
.center{text-align:center}
.nowrap{white-space:nowrap}
.scroll-x{overflow:visible; max-width:100%}
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt{margin-top:18px}.mb{margin-bottom:18px}
.muted{color:var(--muted)}
.schedule-countdown{display:inline-block;max-width:24rem;white-space:normal;line-height:1.4;font-variant-numeric:tabular-nums}
.hidden{display:none !important}

@media print{.noprint{display:none !important}}

/* ---------------------------------------------------------------- brand */
.brand{display:flex; align-items:center; gap:12px; font-weight:800}
.brand .logo{
  width:44px;height:44px;border-radius:15px;flex:0 0 auto;
  background:var(--grad-brand); color:#fff; display:grid; place-items:center;
  font-size:1.15rem; font-weight:800; letter-spacing:-.03em;
  box-shadow:var(--sh-brand); position:relative; overflow:hidden;
  transition:transform .4s var(--ease-back), box-shadow .3s var(--ease)
}
.brand .logo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  left:-140%; animation:gtqShine 4.5s var(--ease) infinite
}
.brand:hover .logo{transform:rotate(-7deg) scale(1.07)}
.brand .t1{font-size:1.06rem; line-height:1.14; letter-spacing:-.028em; color:var(--ink)}
.brand .t2{font-size:.69rem; font-weight:700; color:var(--muted); letter-spacing:.7px; text-transform:uppercase}
.brand .logo.g-student{background:var(--grad-student); box-shadow:var(--sh-emerald)}
.brand .logo.g-admin{background:var(--grad-admin)}
.brand .logo.g-teacher{background:var(--grad-teacher)}

/* ---------------------------------------------------------------- top nav */
.topbar{
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60;
  box-shadow:0 1px 3px rgba(15,23,42,.04)
}
.topbar .inner{max-width:var(--max); margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:16px}
.navlinks{display:flex; align-items:center; gap:5px; margin-left:auto; flex-wrap:wrap}
.navlink{
  padding:10px 15px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:650; font-size:.9rem;
  white-space:nowrap; border:0; background:none; cursor:pointer; font-family:inherit;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  position:relative
}
.navlink:hover{background:var(--brand-50); color:var(--brand-dark); text-decoration:none; transform:translateY(-1px)}
.navlink.active{background:var(--brand-50); color:var(--brand-deep); font-weight:750}
.navlink.active::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2.5px;
  border-radius:99px; background:var(--grad-brand)
}
.burger{
  display:none; margin-left:auto; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:9px 13px; font-size:1.15rem; cursor:pointer;
  line-height:1; transition:.2s var(--ease); color:var(--ink)
}
.burger:hover{background:var(--brand-50); border-color:var(--brand-100)}
.navuser{display:flex; align-items:center; gap:11px; padding-left:14px; border-left:1px solid var(--line)}
.avatar{
  width:38px;height:38px;border-radius:var(--r-full); background:var(--grad-brand);
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem;
  flex:0 0 auto; box-shadow:var(--sh-brand); letter-spacing:-.02em
}
.navuser .nm{font-weight:750; font-size:.86rem; line-height:1.16}
.navuser .rl{font-size:.7rem; color:var(--muted); text-transform:capitalize; font-weight:600}
.nav-print-tools{position:relative;flex:0 0 auto}
.nav-print-trigger{display:flex;align-items:center;min-height:42px}
.nav-print-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:130;width:min(360px,calc(100vw - 24px));
  padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  box-shadow:var(--sh-lg);color:var(--ink)
}
.nav-print-menu[hidden]{display:none !important}
.nav-print-menu label{display:block;margin:0 0 6px;font-size:.82rem;font-weight:750}
.nav-print-menu select{width:100%;min-height:44px;margin:0 0 10px;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:inherit}
.nav-print-menu .hint{margin:10px 0 0;font-size:.76rem;line-height:1.45}

@media(max-width:1040px){
  .burger{display:block}
  .navlinks{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    padding:12px; gap:3px; display:none; box-shadow:var(--sh-lg);
    animation:gtqFadeUp .3s var(--ease) both
  }
  .navlinks.open{display:flex}
  .topbar .inner{position:relative; flex-wrap:wrap}
  .navlink.active::after{display:none}
  .navuser{border-left:0; border-top:1px solid var(--line); padding:12px 0 0; width:100%}
  .nav-print-tools{width:100%}
  .nav-print-trigger{width:100%;justify-content:flex-start}
  .nav-print-menu{position:static;width:100%;max-width:none;margin:4px 0 8px;box-shadow:var(--sh-sm)}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:var(--r-full); border:1px solid transparent;
  background:var(--grad-brand); color:#fff; font-weight:750; font-size:.92rem;
  cursor:pointer; font-family:inherit; text-align:center; letter-spacing:-.012em;
  box-shadow:var(--sh-brand);
  transition:transform .24s var(--ease-back), box-shadow .3s var(--ease), filter .2s var(--ease)
}
.btn::before{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); transition:none
}
.btn:hover{transform:translateY(-2.5px); box-shadow:0 16px 36px rgba(99,102,241,.4); text-decoration:none; color:#fff}
.btn:hover::before{animation:gtqShine .85s var(--ease)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:3px solid rgba(99,102,241,.4); outline-offset:2px}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none; box-shadow:none}

.btn.ghost{
  background:#fff; color:var(--ink-2); border-color:var(--line-2); box-shadow:var(--sh-sm)
}
.btn.ghost:hover{background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-deep); box-shadow:var(--sh)}
.btn.ghost::before{display:none}

.btn.ok{background:var(--grad-student); box-shadow:var(--sh-emerald)}
.btn.ok:hover{box-shadow:0 16px 36px rgba(16,185,129,.38)}
.btn.warn{background:var(--grad-sunset); box-shadow:0 12px 28px rgba(245,158,11,.3)}
.btn.warn:hover{box-shadow:0 16px 36px rgba(245,158,11,.42)}
.btn.danger{background:linear-gradient(135deg,#e11d48,#f43f5e); box-shadow:0 12px 28px rgba(244,63,94,.3)}
.btn.danger:hover{box-shadow:0 16px 36px rgba(244,63,94,.42)}
.btn.dark{background:var(--grad-admin); box-shadow:0 12px 28px rgba(15,23,42,.28)}

.btn.sm{padding:8px 15px; font-size:.83rem; border-radius:var(--r-full)}
.btn.lg{padding:15px 30px; font-size:1rem}
.btn.xl{padding:17px 38px; font-size:1.06rem}
.btn.block{width:100%}
.btn-row{display:flex; gap:11px; flex-wrap:wrap; align-items:center}
.btn-icon{width:38px;height:38px;padding:0;border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- cards */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:26px; margin-bottom:20px;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .3s var(--ease)
}
.card.tight{padding:20px}
.card.hoverable:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--brand-100)}
.card.glass{
  background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%); border-color:rgba(255,255,255,.6)
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line)
}
.card-head h2,.card-head h3{margin:0}
.card-head .ico{
  width:42px;height:42px;border-radius:var(--r-sm); display:grid; place-items:center;
  font-size:1.2rem; background:var(--brand-50); flex:0 0 auto
}

/* ---------------------------------------------------------------- forms */
label{display:block; font-weight:700; font-size:.86rem; margin-bottom:7px; color:var(--ink-2)}
input,select,textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  font-size:.95rem; font-family:inherit; background:#fff; color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease)
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:#c7d2e0}
input:focus,select:focus,textarea:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(99,102,241,.14); background:#fff
}
input:disabled,select:disabled,textarea:disabled{background:var(--slate-100); color:var(--muted); cursor:not-allowed}
select{
  appearance:none; -webkit-appearance:none; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px
}
select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
}
textarea{resize:vertical; min-height:130px; line-height:1.7; font-size:.92rem}
.field{margin-bottom:17px}
.field:last-child{margin-bottom:0}
.hint{font-size:.79rem; color:var(--muted); margin-top:6px; line-height:1.5}
.form-narrow{max-width:470px; margin:0 auto}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.checkline{
  display:flex; align-items:flex-start; gap:11px; font-weight:600; font-size:.9rem;
  cursor:pointer; padding:10px 13px; border-radius:var(--r-sm); transition:background .2s var(--ease)
}
.checkline:hover{background:var(--brand-50)}
.checkline input{width:auto; margin-top:3px; accent-color:var(--brand); cursor:pointer; width:17px; height:17px}
.err{
  color:var(--rose); font-size:.86rem; font-weight:650; margin-top:11px;
  padding:11px 15px; background:var(--rose-50); border-radius:var(--r-sm);
  border-left:4px solid var(--rose); display:none; animation:gtqFadeUp .3s var(--ease) both
}
.err.show{display:block}
.ok-msg{
  color:#047857; font-size:.87rem; font-weight:650; margin-top:11px;
  padding:11px 15px; background:var(--emerald-50); border-radius:var(--r-sm);
  border-left:4px solid var(--emerald); display:none; animation:gtqFadeUp .3s var(--ease) both
}
.ok-msg.show{display:block}

/* ---------------------------------------------------------------- alerts */
.alert{
  padding:15px 18px; border-radius:var(--r-md); font-size:.9rem; margin-bottom:17px;
  border:1px solid; border-left-width:5px; line-height:1.62;
  animation:gtqFadeUp .45s var(--ease) both
}
.alert.info   {background:var(--brand-50);   border-color:#c7d2fe; border-left-color:var(--brand);   color:#3730a3}
.alert.warn   {background:var(--amber-50);   border-color:#fde68a; border-left-color:var(--amber);   color:#92400e}
.alert.danger {background:var(--rose-50);    border-color:#fecdd3; border-left-color:var(--rose);    color:#9f1239}
.alert.ok     {background:var(--emerald-50); border-color:#a7f3d0; border-left-color:var(--emerald); color:#065f46}

/* ---------------------------------------------------------------- badges */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--r-full); font-size:.745rem; font-weight:750;
  letter-spacing:.015em; white-space:nowrap; border:1px solid transparent
}
.badge.b-blue   {background:var(--brand-50);   color:var(--brand-deep); border-color:#c7d2fe}
.badge.b-green  {background:var(--emerald-50); color:#065f46;           border-color:#a7f3d0}
.badge.b-red    {background:var(--rose-50);    color:#9f1239;           border-color:#fecdd3}
.badge.b-amber  {background:var(--amber-50);   color:#92400e;           border-color:#fde68a}
.badge.b-gray   {background:var(--slate-100);  color:#475569;           border-color:var(--line-2)}
.badge.b-violet {background:var(--violet-50);  color:#5b21b6;           border-color:#ddd6fe}
.badge.dot::before{content:""; width:7px;height:7px;border-radius:50%; background:currentColor; animation:gtqPulse 2s infinite}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:var(--r-full); background:#fff;
  border:1px solid var(--line-2); font-size:.79rem; font-weight:650;
  margin:0 7px 7px 0; box-shadow:var(--sh-xs); transition:.22s var(--ease)
}
.chip:hover{transform:translateY(-2px); box-shadow:var(--sh-sm); border-color:var(--brand-100)}

/* ---------------------------------------------------------------- stats */
.stat{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh);
  transition:transform .35s var(--ease-back), box-shadow .35s var(--ease)
}
.stat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-brand); opacity:.9
}
.stat:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.stat .lbl{font-size:.73rem; text-transform:uppercase; letter-spacing:.9px; color:var(--muted); font-weight:800}
.stat .val{
  font-size:clamp(1.7rem,4vw,2.15rem); font-weight:850; line-height:1.08;
  margin:8px 0 3px; letter-spacing:-.035em;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent
}
.stat .sub{font-size:.79rem; color:var(--muted)}
.stat.live::before{background:var(--grad-student)}
.stat.live .val{background:var(--grad-student); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat.live .lbl::before{
  content:"●"; color:var(--emerald); margin-right:6px; animation:gtqPulse 1.7s infinite
}
.stat.warm::before{background:var(--grad-sunset)}
.stat.warm .val{background:var(--grad-sunset); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* ---------------------------------------------------------------- tables */
.tbl-wrap{
  overflow:visible; max-width:100%;
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff
}
table.tbl{width:100%; max-width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; font-size:.88rem; background:#fff}
table.tbl th,table.tbl td{padding:13px 15px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
table.tbl th{
  background:var(--slate-50); font-weight:800; font-size:.73rem; text-transform:uppercase;
  letter-spacing:.7px; color:#475569; white-space:nowrap; position:sticky; top:0; z-index:2
}
table.tbl tbody tr{transition:background .16s var(--ease)}
table.tbl tbody tr:hover{background:var(--brand-50)}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.num,table.tbl th.num{text-align:center; font-variant-numeric:tabular-nums}
table.tbl code{font-size:.84em}

/* ---------------------------------------------------------------- landing */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:var(--grad-aurora); background-size:320% 320%;
  animation:gtqAurora 22s ease infinite;
  padding:clamp(52px,8vw,92px) 0 clamp(64px,9vw,104px)
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.20),transparent 42%),
             radial-gradient(circle at 82% 78%,rgba(255,255,255,.14),transparent 46%)
}
.hero .wrap{position:relative; z-index:3}
.hero h1{font-size:clamp(2rem,6vw,3.15rem); letter-spacing:-.04em; color:#fff; font-weight:850; line-height:1.1}
.hero p{font-size:clamp(.98rem,2.4vw,1.12rem); max-width:640px; color:rgba(255,255,255,.93)}
.hero .brand .t1{color:#fff}
.hero .brand .t2{color:rgba(255,255,255,.78)}
.hero .logo{background:rgba(255,255,255,.24); box-shadow:0 8px 26px rgba(0,0,0,.16); backdrop-filter:blur(8px)}
.hero-pill{
  display:inline-flex; align-items:center; gap:9px; padding:8px 17px;
  border-radius:var(--r-full); background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.32); font-size:.83rem; font-weight:700;
  backdrop-filter:blur(8px); margin-bottom:20px
}
/* floating blobs */
.blob{position:absolute; border-radius:50%; filter:blur(52px); opacity:.5; pointer-events:none; z-index:1}
.blob.b1{width:340px;height:340px; background:#fbbf24; top:-90px; left:-70px; animation:gtqBlob 19s ease-in-out infinite}
.blob.b2{width:400px;height:400px; background:#22d3ee; bottom:-150px; right:-80px; animation:gtqBlob 24s ease-in-out infinite reverse}
.blob.b3{width:250px;height:250px; background:#f472b6; top:38%; right:22%; animation:gtqBlob 16s ease-in-out infinite}

.choice{
  position:relative; overflow:hidden; display:block; color:var(--ink);
  background:rgba(255,255,255,.97); border:2px solid transparent; border-radius:var(--r-xl);
  padding:32px 26px; text-align:center; box-shadow:var(--sh-md);
  transition:transform .4s var(--ease-back), box-shadow .4s var(--ease), border-color .35s var(--ease)
}
.choice::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:var(--grad-brand); transition:opacity .35s var(--ease); z-index:0
}
.choice > *{position:relative; z-index:1}
.choice:hover{transform:translateY(-8px) scale(1.017); box-shadow:var(--sh-lg); border-color:var(--brand-100); text-decoration:none; color:var(--ink)}
.choice .ico{
  width:76px;height:76px;border-radius:24px; margin:0 auto 16px; display:grid; place-items:center;
  font-size:2.1rem; background:var(--brand-50); box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease-back)
}
.choice:hover .ico{transform:scale(1.13) rotate(-7deg)}
.choice:hover .ico{animation:gtqFloat 2.6s ease-in-out infinite}
.choice.stu .ico{background:var(--emerald-50)}
.choice.adm .ico{background:var(--slate-100)}
.choice.stu:hover{border-color:#a7f3d0}

/* ---------------------------------------------------------------- auth */
.auth-wrap{
  position:relative; overflow:hidden;
  min-height:100vh; display:grid; place-items:center; padding:34px 20px;
  background:var(--grad-soft)
}
.auth-wrap::before{
  content:""; position:absolute; width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.16),transparent 68%);
  top:-190px; left:-140px; animation:gtqBlob 21s ease-in-out infinite
}
.auth-wrap::after{
  content:""; position:absolute; width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.13),transparent 68%);
  bottom:-170px; right:-120px; animation:gtqBlob 26s ease-in-out infinite reverse
}
.auth-card{
  position:relative; z-index:2; width:100%; max-width:480px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.8); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); padding:34px; animation:gtqPop .6s var(--ease-back) both
}
.auth-card.wide{max-width:660px}
.auth-card::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:4px;
  border-radius:0 0 6px 6px; background:var(--grad-brand)
}
.tabs{
  display:flex; gap:5px; background:var(--slate-100); padding:5px;
  border-radius:var(--r-md); margin-bottom:24px
}
.tabs button{
  flex:1; padding:11px 8px; border:0; background:none; border-radius:var(--r-sm);
  font-weight:750; font-size:.86rem; cursor:pointer; font-family:inherit; color:var(--muted);
  transition:.24s var(--ease)
}
.tabs button:hover{color:var(--brand-dark)}
.tabs button.on{background:#fff; color:var(--brand-deep); box-shadow:var(--sh-sm); transform:translateY(-1px)}
.tabs-3 button{font-size:.8rem; padding:11px 5px}

/* gatekeeper PIN */
.gate-pin{display:flex; gap:11px; justify-content:center; margin:24px 0 8px}
.gate-pin input{
  width:52px;height:64px; text-align:center; font-size:1.5rem; font-weight:800; padding:0;
  border:2px solid var(--line-2); border-radius:var(--r-md); transition:.22s var(--ease);
  background:#fff
}
.gate-pin input:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(99,102,241,.15); transform:translateY(-3px) scale(1.04)}
.gate-pin input:not(:placeholder-shown){border-color:var(--brand); background:var(--brand-50)}
@media(max-width:430px){.gate-pin{gap:7px} .gate-pin input{width:40px;height:52px;font-size:1.15rem}}
.gate-lock{
  width:82px;height:82px;border-radius:28px; background:var(--grad-brand); color:#fff;
  display:grid; place-items:center; margin:0 auto 20px; font-size:2.2rem;
  box-shadow:var(--sh-brand); animation:gtqFloat 4s ease-in-out infinite
}
.gate-lock.dark{background:var(--grad-admin); box-shadow:0 14px 34px rgba(15,23,42,.32)}

/* ---------------------------------------------------------------- quiz builder */
.qb-item{
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:18px; margin-bottom:14px;
  background:#fff; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  animation:gtqFadeUp .45s var(--ease) both
}
.qb-item:hover{border-color:var(--brand-100); box-shadow:var(--sh-sm)}
.qb-item .qtop{display:flex; align-items:center; gap:12px; margin-bottom:13px}
.qb-num{
  width:36px;height:36px;border-radius:var(--r-sm); background:var(--grad-brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.88rem; flex:0 0 auto;
  box-shadow:0 4px 12px rgba(99,102,241,.28)
}
.choice-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px}
@media(max-width:700px){.choice-grid{grid-template-columns:1fr}}
.choice-in{display:flex; align-items:center; gap:9px}
.choice-in .ltr{
  width:34px;height:34px;border-radius:var(--r-xs); background:var(--slate-100);
  display:grid; place-items:center; font-weight:800; font-size:.82rem; flex:0 0 auto;
  color:var(--ink-2); transition:.2s var(--ease)
}

/* ---------------------------------------------------------------- exam */
.exam-shell{background:var(--slate-50); min-height:100vh}
.exam-bar{
  position:sticky; top:0; z-index:70; background:var(--grad-admin); color:#fff;
  padding:13px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  box-shadow:0 4px 20px rgba(15,23,42,.22)
}
.exam-bar .ttl{font-weight:750; font-size:.95rem; letter-spacing:-.015em}
.exam-bar .sub{font-size:.75rem; color:#94a3b8}
.timer{
  margin-left:auto; font-variant-numeric:tabular-nums; font-weight:850; font-size:1.35rem;
  background:rgba(255,255,255,.16); padding:8px 20px; border-radius:var(--r-md);
  letter-spacing:.02em; transition:background .3s var(--ease)
}
.timer.warn{background:#b45309; animation:gtqPulse 1s infinite}
.timer.crit{background:#dc2626; animation:gtqPulse .7s infinite}
.q-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:26px;
  margin-bottom:18px; box-shadow:var(--sh-sm);
  animation:gtqFadeUp .5s var(--ease) both;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease)
}
.q-card:hover{border-color:var(--brand-100); box-shadow:var(--sh)}
.q-text{font-size:1.05rem; font-weight:650; margin-bottom:18px; display:flex; gap:13px; align-items:flex-start; line-height:1.55}
.q-text .qn{
  flex:0 0 auto; background:var(--grad-brand); color:#fff; font-weight:800;
  border-radius:var(--r-xs); padding:3px 12px; font-size:.88rem;
  box-shadow:0 4px 12px rgba(99,102,241,.26)
}
.opt{
  display:flex; align-items:flex-start; gap:13px; padding:15px 17px;
  border:2px solid var(--line-2); border-radius:var(--r-md); margin-bottom:10px;
  cursor:pointer; transition:.2s var(--ease); background:#fff
}
.opt:hover{border-color:#a5b4fc; background:var(--brand-50); transform:translateX(3px)}
/* ONE COLOUR ONLY once answered — no green/red feedback */
.opt.picked{
  border-color:var(--brand); background:var(--brand-50);
  box-shadow:0 6px 18px rgba(99,102,241,.16)
}
.opt.picked .ltr{background:var(--grad-brand); color:#fff}
.opt .ltr{
  width:33px;height:33px;border-radius:var(--r-xs); background:var(--slate-100);
  display:grid; place-items:center; font-weight:800; flex:0 0 auto; font-size:.86rem;
  transition:.2s var(--ease); color:var(--ink-2)
}
.opt .tx{flex:1; padding-top:4px; line-height:1.55}
.qnav-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:9px}
.qnav-btn{
  aspect-ratio:1; border:2px solid var(--line-2); background:#fff; border-radius:var(--r-xs);
  font-weight:750; cursor:pointer; font-family:inherit; font-size:.87rem; color:var(--ink-2);
  transition:.2s var(--ease)
}
.qnav-btn:hover{border-color:var(--brand); background:var(--brand-50); transform:translateY(-2px)}
.qnav-btn.done{background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(99,102,241,.28)}
.qnav-btn.cur{outline:3px solid rgba(99,102,241,.32); outline-offset:2px}

/* review */
.rev-item{
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:18px; margin-bottom:13px;
  background:#fff; animation:gtqFadeUp .45s var(--ease) both
}
.rev-item.wrong{border-left:5px solid var(--rose); background:linear-gradient(90deg,var(--rose-50),#fff 32%)}
.rev-item.right{border-left:5px solid var(--emerald); background:linear-gradient(90deg,var(--emerald-50),#fff 32%)}
.rev-opt{padding:11px 15px; border-radius:var(--r-sm); margin-top:8px; font-size:.9rem; border:1.5px solid var(--line); background:#fff}
.rev-opt.correct{background:var(--emerald-50); border-color:#6ee7b7; font-weight:750}
.rev-opt.chosen-wrong{background:var(--rose-50); border-color:#fda4af; font-weight:750}

/* ---------------------------------------------------------------- charts */
.bar-row{display:flex; align-items:center; gap:12px; margin-bottom:9px; font-size:.84rem}
.bar-row .nm{width:82px; flex:0 0 auto; font-weight:750; color:#475569; overflow:hidden; text-overflow:ellipsis}
.bar-track{flex:1; background:var(--slate-100); border-radius:var(--r-full); height:24px; overflow:hidden}
.bar-fill{
  height:100%; border-radius:var(--r-full); width:0;
  background:var(--grad-brand);
  transition:width 1.05s var(--ease);
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.07)
}
.bar-fill.low{background:linear-gradient(90deg,#f43f5e,#fb7185)}
.bar-fill.mid{background:var(--grad-sunset)}
.bar-fill.high{background:var(--grad-student)}
.bar-row .vl{width:62px; text-align:right; font-variant-numeric:tabular-nums; font-weight:750; flex:0 0 auto}

/* ---------------------------------------------------------------- modal */
.modal-bg{
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:none; place-items:center; z-index:200; padding:20px; overflow-y:auto
}
.modal-bg.open{display:grid; animation:gtqFadeIn .22s var(--ease) both}
.modal{
  background:#fff; border-radius:var(--r-xl); padding:30px; max-width:660px; width:100%;
  box-shadow:var(--sh-lg); max-height:90vh; overflow-y:auto;
  animation:gtqPop .38s var(--ease-back) both
}
.modal.sm{max-width:450px}

/* ---------------------------------------------------------------- toast */
#toasts{position:fixed; right:18px; bottom:18px; z-index:400; display:flex; flex-direction:column; gap:11px; max-width:min(390px,92vw)}
.toast{
  background:var(--ink); color:#fff; padding:15px 19px; border-radius:var(--r-md);
  font-size:.88rem; font-weight:650; box-shadow:var(--sh-lg);
  border-left:5px solid var(--brand); animation:gtqSlideR .38s var(--ease-back) both;
  backdrop-filter:blur(8px)
}
.toast.ok  {border-left-color:var(--emerald)}
.toast.err {border-left-color:var(--rose)}
.toast.warn{border-left-color:var(--amber)}

/* ---------------------------------------------------------------- misc */
.empty{text-align:center; padding:52px 20px; color:var(--muted); animation:gtqFadeIn .5s var(--ease) both}
.empty .ic{font-size:3rem; margin-bottom:14px; opacity:.55; animation:gtqFloat 4.5s ease-in-out infinite}
.spinner{
  width:19px;height:19px; border:2.5px solid rgba(255,255,255,.34); border-top-color:#fff;
  border-radius:50%; animation:gtqSpin .68s linear infinite; display:inline-block; flex:0 0 auto
}
.spinner.dark{border-color:var(--line-2); border-top-color:var(--brand)}
.skeleton{
  background:linear-gradient(90deg,var(--slate-100) 25%,#e8eef6 50%,var(--slate-100) 75%);
  background-size:200% 100%; animation:gtqShimmer 1.4s linear infinite; border-radius:var(--r-xs)
}
.kv{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line-2); font-size:.9rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted); font-weight:650}
.kv .v{font-weight:750; text-align:right}
.pill-list{display:flex; flex-wrap:wrap; gap:8px}
.divider{height:1px; background:var(--line); margin:22px 0; border:0}
.prog{flex:1; background:var(--slate-200); border-radius:var(--r-full); height:10px; overflow:hidden; min-width:96px}
.prog > i{display:block; height:100%; background:var(--grad-brand); border-radius:var(--r-full); transition:width .45s var(--ease); width:0}
.ring-pulse{animation:gtqRing 2.2s var(--ease) infinite}

/* feature cards on landing */
.feature{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh);
  transition:transform .4s var(--ease-back), box-shadow .4s var(--ease)
}
.feature:hover{transform:translateY(-6px); box-shadow:var(--sh-md)}
.feature .fico{
  width:54px;height:54px;border-radius:var(--r-md); display:grid; place-items:center;
  font-size:1.5rem; margin-bottom:15px; transition:transform .45s var(--ease-back)
}
.feature:hover .fico{transform:scale(1.1) rotate(-8deg)}
.feature h3{margin-bottom:8px; font-size:1.05rem}
.feature p{margin:0; font-size:.9rem; color:var(--muted); line-height:1.65}

/* step cards */
.step{
  position:relative; padding:26px 22px; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh); text-align:center;
  transition:transform .38s var(--ease-back), box-shadow .38s var(--ease)
}
.step:hover{transform:translateY(-6px); box-shadow:var(--sh-md)}
.step .n{
  width:44px;height:44px;border-radius:var(--r-full); background:var(--grad-brand); color:#fff;
  display:grid; place-items:center; font-weight:850; margin:0 auto 15px; font-size:1.05rem;
  box-shadow:var(--sh-brand)
}

/* footer */
.site-foot{border-top:1px solid var(--line); background:#fff; padding:26px 0}
.site-foot .wrap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem; color:var(--muted)}

/* ==========================================================================
   EXAM RUNTIME  (added with the exam screen rewrite)
   ========================================================================== */
.exam-body{background:var(--slate-50); min-height:100vh; margin:0}
.exam-stage{padding:0 16px}
.exam-stage .card{margin:40px auto}
.exam-actions{display:flex; gap:8px; align-items:center}
.exam-bar .btn.ghost{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.28)}
.exam-bar .btn.ghost:hover{background:rgba(255,255,255,.26); color:#fff}

/* progress strip under the bar */
.prog{height:7px; background:var(--slate-200); position:sticky; top:62px; z-index:69}
.prog-fill{
  height:100%; width:0; background:var(--grad-brand); border-radius:0 var(--r-full) var(--r-full) 0;
  transition:width .45s var(--ease)
}
.prog-text{
  position:sticky; top:69px; z-index:69; background:#fff; border-bottom:1px solid var(--line);
  padding:7px 20px; font-size:.79rem; font-weight:750; color:var(--muted); letter-spacing:.02em
}

/* question area */
.exam-wrap{max-width:840px; margin:0 auto; padding:20px 16px 0}
.exam-banner{
  background:linear-gradient(135deg,var(--amber-50),#fff); border:1.5px solid #fde68a;
  color:#92400e; border-radius:var(--r-md); padding:13px 17px; font-size:.86rem;
  margin-bottom:20px; line-height:1.6; animation:gtqFadeIn .5s var(--ease)
}
.q-host{display:block}

/* item sheet (bottom drawer) */
.qsheet{
  position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.5);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease)
}
.qsheet.on{opacity:1; pointer-events:auto}
.qsheet-in{
  position:absolute; left:0; right:0; bottom:0; background:#fff;
  border-radius:var(--r-xl) var(--r-xl) 0 0; padding:22px; max-height:78vh; overflow-y:auto;
  transform:translateY(100%); transition:transform .38s var(--ease-back); box-shadow:0 -14px 40px rgba(15,23,42,.2)
}
.qsheet.on .qsheet-in{transform:translateY(0)}
.qsheet .row.between{margin-bottom:10px}

/* fullscreen violation notice */
.fs-warn{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgba(127,29,29,.92); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease)
}
.fs-warn.on{opacity:1; pointer-events:auto; animation:gtqFadeIn .25s var(--ease)}
.fs-warn-in{
  background:#fff; border-radius:var(--r-lg); padding:32px 28px; max-width:420px; text-align:center;
  box-shadow:var(--sh-lg); animation:gtqPop .4s var(--ease-back)
}
.fs-warn-in h3{color:#b91c1c; font-size:1.15rem}

/* rules + big percentage */
.rules-list{margin:0; padding-left:20px; line-height:1.85; font-size:.9rem}
.rules-list li{margin-bottom:4px}
.rules-list li::marker{color:var(--brand)}
.big-pct{
  font-size:1.5rem; font-weight:850; margin-top:2px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent
}

/* ==========================================================================
   EXAM · INPUT GUARDS (anti-cheat v3)
   Desktop/focus fallback guards against page escape and copying. Mobile mode
   below stays a normal browser document with scrolling and pinch zoom.
   ========================================================================== */
.exam-body{
  overscroll-behavior:none;          /* kills pull-to-refresh + rubber-band */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;        /* iOS long-press callout */
  -webkit-tap-highlight-color:transparent;
}
.exam-body .q-host, .exam-body .exam-wrap{ touch-action:pan-y }   /* scrolling items is still allowed */

/* Desktop/legacy focus fallback: keep the exam inside a fixed viewport. */
.exam-focus{
  touch-action:none;
  overscroll-behavior:none;
  position:fixed; inset:0; width:100%; height:100%;
  overflow:hidden;
  background:var(--slate-50);
}
.exam-focus .exam-stage,
.exam-focus .exam-wrap{ height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y }
.exam-focus .exam-bar{
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  padding-left:calc(20px + env(safe-area-inset-left, 0px));
  padding-right:calc(20px + env(safe-area-inset-right, 0px));
}
.exam-focus .exam-wrap{ padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)) }

/* Mobile exam mode is a normal browser document, not a simulated fullscreen
   frame. Keep native page scrolling and pinch zoom available. */
.exam-focus.exam-mobile-mode{
  touch-action:auto;
  position:static; inset:auto; width:100%; height:auto; min-height:100vh;
  overflow:visible;
}
.exam-focus.exam-mobile-mode .exam-stage,
.exam-focus.exam-mobile-mode .exam-wrap{
  height:auto; overflow:visible; -webkit-overflow-scrolling:auto; touch-action:auto;
}
.exam-focus.exam-mobile-mode .exam-wrap{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))}

/* the "focus mode" explanation banner inside the exam */
.focus-note{
  margin:0 16px 12px; padding:12px 15px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand-50),#fff);
  border:1.5px solid #c7d2fe; color:#3730a3; font-size:.85rem; line-height:1.6;
  animation:gtqFadeIn .5s var(--ease)
}

/* seal badge in the exam bar — the live proof that the exam is still sealed */
.seal-wrap{display:flex; align-items:center; gap:10px; margin-left:auto}
.seal-badge{
  font-size:.68rem; font-weight:800; letter-spacing:.02em; padding:5px 10px; border-radius:var(--r-full);
  white-space:nowrap; border:1px solid transparent
}
.seal-badge.ok  {background:rgba(16,185,129,.18); color:#a7f3d0; border-color:rgba(16,185,129,.45)}
.seal-badge.bad {background:rgba(239,68,68,.22);  color:#fecaca; border-color:rgba(239,68,68,.5); animation:gtqPulse 1s ease-in-out infinite}
@media(max-width:520px){
  .seal-wrap{gap:6px}
  .seal-badge{font-size:.68rem; padding:5px 8px}
  .seal-badge .lbl{display:none}     /* icon lang sa maliit na screen */
}

/* deployed-build chip (portals only) — lets you verify which build is live */
.build-chip{
  position:fixed; left:10px; bottom:10px; z-index:9998;
  font-size:.68rem; font-weight:800; letter-spacing:.02em;
  background:rgba(15,23,42,.72); color:#e2e8f0; padding:5px 9px; border-radius:var(--r-full);
  pointer-events:none; opacity:.85
}

/* live diagnostics panel inside the exam (tap the seal badge) */
.diag-box{
  margin:10px 16px 0; padding:12px 15px; border-radius:var(--r-md);
  background:#0f172a; color:#e2e8f0; font-size:.8rem; line-height:1.5;
  border:1px solid rgba(148,163,184,.35)
}
.diag-box .dl{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed rgba(148,163,184,.25)}
.diag-box .dl span:first-child{color:#94a3b8}
.diag-box .dl span:last-child{font-weight:700; text-align:right}
.diag-box .hint{color:#94a3b8 !important}
.seal-badge{border:1px solid transparent; cursor:pointer; font-family:inherit}


/* ==========================================================================
   v1.8.4 — RESPONSIVE POLISH
   Reflow every view into the available width; long data stays readable and
   tables become labeled cards on small screens (no sideways page scrolling).
   ========================================================================== */
html{max-width:100%; overflow-x:clip; scroll-behavior:smooth}
body{max-width:100%; overflow-x:clip; overflow-wrap:anywhere}
main,section,header,footer,nav,form,.wrap,.main,.view,.apane,.grid,.row,.card,.auth-card,
.topbar .inner,.navlinks,.navuser,.exam-shell,.exam-stage,.exam-wrap,.q-host{min-width:0; max-width:100%}
.grid>* , .row>*{min-width:0}
input,select,textarea,button{max-width:100%}
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;min-height:18px;padding:0;flex:0 0 auto;accent-color:var(--brand)}
.checkline input{padding:0 !important;flex:0 0 17px}
img,svg,video,canvas,iframe{max-width:100%}
pre,code{max-width:100%; overflow-wrap:anywhere; white-space:pre-wrap}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }
:focus-visible{outline:3px solid rgba(99,102,241,.48); outline-offset:3px}

/* The page frame retains a quiet, consistent rhythm at all widths. */
.wrap{padding-inline:clamp(14px,2.4vw,24px)}
.main{padding-block:clamp(24px,3.8vw,38px) clamp(52px,7vw,82px)}
.grid{gap:clamp(14px,2vw,22px)}
.card{scroll-margin-top:90px}
.card-head{align-items:flex-start}
.card-head>*{min-width:0}
.field,.form-grid,.btn-row{min-width:0; max-width:100%}
.btn{min-height:44px; line-height:1.25; white-space:normal}
.btn.sm{min-height:40px}
.btn-row{gap:10px}

/* Navigation: readable dropdown, generous touch targets, and no name overflow. */
.topbar .inner{padding-inline:clamp(12px,2.3vw,22px)}
.brand{min-width:0; max-width:100%}
.brand>div:last-child{min-width:0}
.brand .t1,.brand .t2,.navuser .nm{overflow-wrap:anywhere}
.navlink{white-space:normal}
.navuser{min-width:0; flex-wrap:wrap}
@media(max-width:1040px){
  .topbar .inner{gap:10px}
  .burger{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;margin-left:auto;padding:0}
  .navlinks{max-height:min(72vh,620px);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain}
  .navlink{min-height:44px;display:flex;align-items:center}
  .navuser{align-items:center;gap:9px}
  .navuser>div:nth-child(2){flex:1 1 130px;min-width:0}
  .navuser .btn{flex:0 0 auto}
}

/* Landing page: keep the hero vivid while making every portal card comfortable. */
.hero .wrap{width:100%}
.hero .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px) and (min-width:701px){.hero .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero .grid>.choice:last-child{grid-column:1/-1}}
.choice{height:100%;display:flex;flex-direction:column;align-items:stretch}
.choice .ico{flex:0 0 auto}
.choice>p{flex:1}
.choice .btn{margin-top:auto}
.feature,.step{height:100%}
.site-foot .wrap{align-items:center}

/* Auth forms and reset screens. */
.auth-wrap{min-height:100vh;min-height:100dvh;padding-top:max(24px,env(safe-area-inset-top,0px));padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
.auth-card{max-width:min(100%,660px)}
.auth-card:not(.wide){max-width:min(100%,480px)}
.tabs button{min-width:0;overflow-wrap:anywhere}
.gate-pin{max-width:100%;flex-wrap:nowrap}

/* Desktop/tablet tables: use all available width; never force an overflow rail. */
.scroll-x,.tbl-wrap{width:100%;max-width:100%;overflow:visible !important;-webkit-overflow-scrolling:auto}
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
table.tbl{width:100%;max-width:100%;min-width:0 !important;table-layout:fixed;border-collapse:collapse;border-spacing:0;background:#fff;font-size:.84rem}
table.tbl th,table.tbl td{padding:11px clamp(8px,1.15vw,14px);white-space:normal;overflow-wrap:anywhere;word-break:normal;vertical-align:top}
table.tbl th{position:static;top:auto;letter-spacing:.045em;line-height:1.35}
table.tbl td.nowrap,table.tbl .nowrap{white-space:normal}
table.tbl td .btn{margin:2px 5px 2px 0;max-width:100%;vertical-align:middle}
table.tbl td .badge{white-space:normal;max-width:100%;vertical-align:middle}
table.tbl td input,table.tbl td select,table.tbl td textarea{min-width:0;width:100%}

/* Data-heavy records transform to labeled cards instead of shrinking to unreadable columns. */
@media(max-width:920px){
  .scroll-x,.tbl-wrap{border:0;border-radius:0;background:transparent}
  table.tbl,table.tbl tbody{display:block;width:100%;background:transparent}
  table.tbl thead{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  table.tbl tbody tr{display:block;width:100%;margin:0 0 12px;padding:2px 0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-sm)}
  table.tbl tbody tr:hover{background:#fff}
  table.tbl tbody td{display:block;width:100%;min-width:0;padding:11px 14px;text-align:left !important;border-bottom:1px solid var(--line);line-height:1.5}
  table.tbl tbody td:last-child{border-bottom:0}
  table.tbl tbody td.num{text-align:left !important}
  table.tbl tbody td::before{content:attr(data-label);display:block;margin:0 0 4px;color:var(--muted);font-size:.65rem;font-weight:850;letter-spacing:.075em;line-height:1.35;text-transform:uppercase}
  table.tbl tbody td[data-label=""]::before,table.tbl tbody td:not([data-label])::before,table.tbl tbody td[colspan]::before{display:none}
  table.tbl tbody td[colspan]{display:block}
  table.tbl td .btn{margin:3px 6px 3px 0}
  table.tbl td code{white-space:normal;overflow-wrap:anywhere}
}

/* Score charts stack naturally on phones; category, bar, and value remain legible. */
.bar-row{min-width:0;flex-wrap:wrap}
.bar-row .nm{min-width:0;max-width:38%;white-space:normal;overflow-wrap:anywhere}
.bar-track{min-width:0}

/* Modals use the viewport safely on phones and leave the document scrollable. */
.modal-bg{padding:clamp(10px,3vw,20px);overflow-y:auto;overscroll-behavior:contain}
.modal{width:100%;max-width:min(660px,100%);max-height:calc(100dvh - 24px);padding:clamp(18px,4vw,30px);overflow-y:auto;overscroll-behavior:contain}
#toasts{right:max(10px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));width:min(390px,calc(100vw - 20px));max-width:calc(100vw - 20px)}

/* Exam remains sealed but the question content itself stays vertically scrollable. */
.exam-stage{padding-inline:clamp(8px,2vw,16px)}
.exam-stage .card{margin:clamp(18px,4vw,40px) auto}
.exam-bar{gap:10px;padding:11px clamp(12px,2.8vw,20px)}
.exam-bar>*{min-width:0;max-width:100%}
.exam-bar .ttl,.exam-bar .sub{overflow-wrap:anywhere;word-break:normal}
.exam-actions{min-width:0;flex-wrap:wrap}
.timer{max-width:100%;font-size:clamp(1rem,3vw,1.35rem);padding:7px clamp(10px,2vw,20px)}
.exam-wrap{width:100%;padding-inline:clamp(10px,2vw,16px)}
.exam-banner,.q-card,.opt,.q-text,.rev-item{min-width:0;max-width:100%;overflow-wrap:anywhere}
.q-card{padding:clamp(16px,3vw,26px)}
.opt{align-items:flex-start}
.opt .tx{min-width:0;overflow-wrap:anywhere}
.qsheet-in{width:100%;max-width:100%;padding:clamp(16px,4vw,22px);padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
.qnav-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
.fs-warn{padding:14px}
.fs-warn-in{width:min(100%,420px);padding:clamp(18px,5vw,32px)}

@media(max-width:700px){
  .wrap{padding-inline:16px}
  .main{padding-block:24px 58px}
  .grid{gap:14px}
  .card{padding:18px;border-radius:20px;margin-bottom:16px}
  .card.tight{padding:16px}
  .card-head{gap:10px;margin-bottom:14px;padding-bottom:12px}
  .card-head h2{font-size:1.22rem}
  .hero{padding:45px 0 54px}
  .hero h1{font-size:clamp(2rem,9vw,2.7rem)}
  .hero .brand{margin-bottom:24px !important}
  .hero .brand .t1{font-size:1.25rem !important}
  .hero .grid{grid-template-columns:minmax(0,1fr);margin-top:27px !important}
  .choice{padding:24px 20px;border-radius:24px}
  .choice:hover{transform:translateY(-2px) scale(1);box-shadow:var(--sh-md)}
  .feature,.step{padding:21px}
  .site-foot{padding:20px 0}
  .site-foot .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .auth-wrap{align-items:start;padding-inline:12px}
  .auth-card{padding:24px 18px;border-radius:24px}
  .auth-card::before{left:18px;right:18px}
  .tabs{gap:3px;padding:4px;margin-bottom:20px}
  .tabs button,.tabs-3 button{padding:10px 4px;font-size:.76rem;line-height:1.25}
  .gate-pin{gap:clamp(4px,1.8vw,7px)}
  .gate-pin input{width:clamp(32px,10vw,42px);height:clamp(48px,16vw,60px);font-size:clamp(1.05rem,4vw,1.35rem)}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:0}
  input,select,textarea{font-size:16px;padding:12px 13px}
  textarea{min-height:115px}
  .btn{min-height:46px}
  .btn.sm{min-height:42px;padding:9px 13px}
  .btn.lg{padding:14px 20px}
  .btn-row{gap:8px}
  .btn-row>.btn{flex:1 1 150px}
  .row.between{align-items:flex-start}
  .row.between>.btn-row,.row.between>.btn{max-width:100%}
  .badge{white-space:normal;max-width:100%;line-height:1.35}
  .pill-list{gap:6px}
  .bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:center}
  .bar-row .nm{grid-column:1;grid-row:1;width:auto !important;max-width:none;flex:none}
  .bar-row .vl{grid-column:2;grid-row:1;width:auto;min-width:0;text-align:right}
  .bar-row .bar-track{grid-column:1 / -1;grid-row:2;width:100%}
  .exam-bar{gap:8px;padding-top:calc(9px + env(safe-area-inset-top,0px));padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px))}
  .exam-bar>div:first-child{flex:1 1 calc(100% - 100px)}
  .exam-bar .ttl{font-size:.88rem;line-height:1.25}
  .exam-bar .sub{font-size:.7rem}
  .exam-bar .seal-wrap{gap:6px;margin-left:auto}
  .exam-bar .seal-badge{font-size:.66rem;padding:5px 7px}
  .exam-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .exam-actions .btn{width:100%;min-width:0;padding:10px 9px}
  .timer{font-size:1rem;padding:6px 9px}
  .prog,.prog-text{position:static;top:auto}
  .prog-text{padding:8px 14px;font-size:.75rem}
  .exam-wrap{padding:14px 10px 0}
  .exam-banner{padding:12px;font-size:.81rem;margin-bottom:14px}
  .q-card{padding:16px;margin-bottom:13px}
  .q-text{gap:9px;font-size:.98rem;margin-bottom:14px}
  .q-text .qn{padding:3px 9px}
  .opt{gap:9px;padding:12px;margin-bottom:8px}
  .opt .ltr{width:30px;height:30px}
  .qsheet-in{max-height:88vh}
  .focus-note,.diag-box{margin-inline:10px}
  .ac-log{overflow-x:clip;overflow-y:auto;overflow-wrap:anywhere;word-break:break-word}
  .build-chip{left:8px;bottom:8px}
}

@media(max-width:380px){
  .wrap{padding-inline:13px}
  .hero{padding-top:38px}
  .auth-card{padding-inline:15px}
  .tabs button,.tabs-3 button{font-size:.72rem}
  .card{padding:16px}
  .exam-bar .seal-badge{padding:5px 6px}
  .exam-actions{gap:6px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{animation:none}
}

/* Teacher paper-test export modal. */
.paper-export-modal{max-width:min(900px,100%)}
.paper-export-modal h2,.paper-export-modal h3{color:var(--ink)}
.paper-export-modal hr{border:0;border-top:1px solid var(--line-2);margin:20px 0}
.print-logo-preview{display:flex;align-items:center;justify-content:center;min-height:72px;margin:8px 0;padding:8px;border:1px dashed var(--line-2);border-radius:12px;color:var(--muted);font-size:.78rem;background:#f8fafc}
.print-logo-preview img{max-width:100%;max-height:92px;object-fit:contain}
.signatory-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.signatory-block{min-width:0;margin:0;padding:12px;border:1px solid var(--line-2);border-radius:12px;background:#fbfdff}
.signatory-block legend{padding:0 6px;font-weight:700;color:var(--ink);font-size:.88rem}
.prepared-by-block{grid-column:1/-1}
.signatory-list{display:flex;flex-direction:column;gap:9px}
.signatory-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.signatory-block .field{min-width:0}
#paperExportModal .btn-row{flex-wrap:wrap}
#paperExportModal .btn-row.between{align-items:flex-start}
#paperExportModal .hint{line-height:1.5}
@media(max-width:620px){
  #paperExportModal .grid.g2{grid-template-columns:minmax(0,1fr)}
  .signatory-settings{grid-template-columns:minmax(0,1fr)}
  .prepared-by-block{grid-column:auto}
  .signatory-entry{grid-template-columns:minmax(0,1fr)}
  #paperExportModal .btn-row.between{display:grid;grid-template-columns:1fr}
  #paperExportModal .btn-row.between>.btn-row{display:grid;grid-template-columns:1fr}
  #paperExportModal .btn-row .btn{width:100%}
}

/* Local, review-first paper OMR workflow. The photo stays in the browser. */
.paper-scan-launch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--line-2);border-radius:14px;background:#f8fafc}
.paper-scan-launch .muted{font-size:.82rem;margin-top:4px}
.paper-scanner-modal{max-width:min(1100px,100%)}
.paper-scanner-modal h2,.paper-scanner-modal h3{color:var(--ink)}
.paper-scanner-modal hr{border:0;border-top:1px solid var(--line-2);margin:18px 0}
.paper-scan-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.paper-scan-file{cursor:pointer}
.paper-camera-wrap{position:relative;width:min(100%,800px);aspect-ratio:1.3077;margin:14px auto 0;background:#0f172a;border-radius:14px;overflow:hidden}
.paper-camera-wrap video{display:block;width:100%;height:100%;object-fit:contain}
.paper-camera-guide{position:absolute;left:4%;top:4%;width:92%;height:92%;border:2px dashed #94a3b8;border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.82),0 0 14px rgba(148,163,184,.55);pointer-events:none;transition:border-color .12s,box-shadow .12s}
.paper-camera-guide .guide-target{position:absolute;z-index:2;width:clamp(22px,3.6vw,32px);height:clamp(22px,3.6vw,32px);transform:translate(-50%,-50%);border:3px solid #94a3b8;border-radius:3px;background:rgba(148,163,184,.16);box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 10px rgba(148,163,184,.65);transition:border-color .12s,background-color .12s,box-shadow .12s}
.paper-camera-guide .guide-target.detected{border-color:#f59e0b;background:rgba(245,158,11,.18);box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 12px rgba(245,158,11,.85)}
.paper-camera-guide .guide-target.aligned{border-color:#16a34a;background:rgba(34,197,94,.24);box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 14px rgba(34,197,94,.95)}
.paper-camera-guide.all-aligned{border-color:#16a34a;box-shadow:0 0 0 2px rgba(255,255,255,.86),0 0 18px rgba(34,197,94,.56)}
.paper-camera-guide span{z-index:3;min-width:min(420px,94%)}
.paper-camera-guide .guide-target.tl{left:2.3529%;top:3.0769%}
.paper-camera-guide .guide-target.tr{left:97.6471%;top:3.0769%}
.paper-camera-guide .guide-target.bl{left:2.3529%;top:96.9231%}
.paper-camera-guide .guide-target.br{left:97.6471%;top:96.9231%}
.paper-camera-guide .guide-target.searching{animation-duration:2.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:left,top}
.paper-camera-guide .guide-target.searching.tl{animation-name:paper-search-tl}
.paper-camera-guide .guide-target.searching.tr{animation-name:paper-search-tr}
.paper-camera-guide .guide-target.searching.bl{animation-name:paper-search-bl}
.paper-camera-guide .guide-target.searching.br{animation-name:paper-search-br}
@keyframes paper-search-tl{0%,100%{left:2.3529%;top:3.0769%}25%{left:15%;top:3.0769%}50%{left:15%;top:16%}75%{left:2.3529%;top:16%}}
@keyframes paper-search-tr{0%,100%{left:97.6471%;top:3.0769%}25%{left:85%;top:3.0769%}50%{left:85%;top:16%}75%{left:97.6471%;top:16%}}
@keyframes paper-search-bl{0%,100%{left:2.3529%;top:96.9231%}25%{left:15%;top:96.9231%}50%{left:15%;top:84%}75%{left:2.3529%;top:84%}}
@keyframes paper-search-br{0%,100%{left:97.6471%;top:96.9231%}25%{left:85%;top:96.9231%}50%{left:85%;top:84%}75%{left:97.6471%;top:84%}}
.paper-camera-guide span{position:absolute;left:50%;bottom:6px;max-width:94%;transform:translateX(-50%);padding:5px 8px;border-radius:8px;background:rgba(15,23,42,.82);color:#fff;font-size:.75rem;text-align:center;white-space:normal}
.paper-scan-stage{margin-top:14px;padding:12px;border:1px solid var(--line-2);border-radius:14px;background:#f8fafc}
#paperScanCanvas{display:block;max-width:100%;max-height:58vh;width:auto;height:auto;margin:0 auto;border:1px solid #cbd5e1;border-radius:8px;touch-action:none;cursor:crosshair}
.paper-scan-status{margin-top:12px;padding:10px 12px;border-radius:10px;background:#eff6ff;color:#1e3a8a;font-size:.86rem}
.paper-scan-status.error{background:#fff1f2;color:#9f1239}
.paper-scan-status.success{background:#ecfdf5;color:#065f46}
.paper-scan-status.warning{background:#fffbeb;color:#92400e}
.paper-scan-review{margin-top:18px}
.scan-answer-summary{margin:10px 0;padding:10px 12px;border-radius:10px;background:#f1f5f9;font-size:.85rem}
.scan-form-preview{margin:12px 0;padding:10px;border:1px solid var(--line-2);border-radius:12px;background:#f8fafc}
.scan-form-preview b{display:block;margin-bottom:8px;font-size:.82rem}
#paperRectifiedCanvas{display:block;max-width:100%;max-height:48vh;width:auto;height:auto;border:1px solid #cbd5e1;border-radius:8px}
.scan-answer-list{max-height:330px;overflow:auto;border:1px solid var(--line-2);border-radius:12px}
.scan-answer-table{width:100%;border-collapse:collapse;font-size:.82rem}
.scan-answer-table th,.scan-answer-table td{padding:7px 10px;border-bottom:1px solid var(--line-2);text-align:left}
.scan-answer-table th{position:sticky;top:0;background:#f8fafc;z-index:1}
.scan-answer-table select{min-width:110px;padding:6px}
.scan-uncertain{color:#b45309;font-weight:700}
@media(max-width:620px){
  .paper-scan-launch{align-items:stretch;flex-direction:column}
  .paper-scan-launch .btn{width:100%}
  #paperScannerModal .grid.g2{grid-template-columns:minmax(0,1fr)}
  #paperScannerModal .btn-row.between{align-items:stretch;flex-direction:column}
  #paperScannerModal #savePaperScan{width:100%}
  #paperScanCanvas{max-height:48vh}
}


/* Paper scanning is a full-screen workflow, with an edge-to-edge live camera view. */
#paperScannerModal.modal-bg{padding:0;place-items:stretch}
#paperScannerModal .paper-scanner-modal{position:relative;display:flex;flex-direction:column;width:100%;max-width:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh;margin:0;padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));border-radius:0;overflow-y:auto;overscroll-behavior:contain;animation:none}
#paperScannerModal .paper-camera-wrap{width:min(100%,1200px);max-height:68dvh}
#paperScannerModal #paperScanCanvas{max-height:62dvh}
#paperScannerModal .paper-scan-stage{max-height:72dvh;overflow:auto}
#paperScannerModal.camera-active .paper-scanner-modal{overflow:hidden;padding:0;background:#020617}
#paperScannerModal.camera-active .paper-camera-wrap{position:fixed;inset:0;z-index:1;width:100vw;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;margin:0;border-radius:0}
#paperScannerModal.camera-active .paper-camera-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#paperScannerModal.camera-active .paper-scanner-modal>.row.between{position:fixed;z-index:5;top:max(8px,env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));margin:0;align-items:flex-start;pointer-events:none}
#paperScannerModal.camera-active .paper-scanner-modal>.row.between>div{max-width:min(70vw,440px);padding:8px 12px;border-radius:12px;background:rgba(15,23,42,.72);color:#fff;pointer-events:none}
#paperScannerModal.camera-active .paper-scanner-modal>.row.between h2{color:#fff;font-size:1rem}
#paperScannerModal.camera-active .paper-scanner-modal>.row.between p{display:none}
#paperScannerModal.camera-active #closePaperScanner{pointer-events:auto;min-width:44px;min-height:44px}
#paperScannerModal.camera-active .paper-scanner-modal>.field,#paperScannerModal.camera-active .paper-scanner-modal>p.hint,#paperScannerModal.camera-active .paper-scan-stage,#paperScannerModal.camera-active .paper-scan-status,#paperScannerModal.camera-active .paper-scanner-modal>.btn-row,#paperScannerModal.camera-active .paper-scan-review{display:none!important}
#paperScannerModal.camera-active .paper-scan-actions{position:fixed;z-index:5;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));justify-content:center;padding:10px;border-radius:16px;background:rgba(15,23,42,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#paperScannerModal.camera-active #startPaperCamera,#paperScannerModal.camera-active .paper-scan-file{display:none!important}
#paperScannerModal.camera-active .paper-scan-actions .btn{min-height:48px}
#paperScannerModal.camera-active .paper-camera-guide span{bottom:12px;max-width:92%;min-width:0;font-size:.8rem}
@media(max-width:620px){
  #paperScannerModal .paper-scanner-modal{padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  #paperScannerModal .paper-camera-wrap{width:100%;max-height:65dvh}
  #paperScannerModal.camera-active .paper-camera-wrap{max-height:none}
  #paperScannerModal.camera-active .paper-scanner-modal>.row.between>div{max-width:65vw;padding:7px 10px}
  #paperScannerModal.camera-active .paper-scan-actions{gap:7px;padding:8px}
  #paperScannerModal.camera-active .paper-scan-actions .btn{flex:1 1 135px;padding-inline:12px}
}

@media(orientation:landscape){
  #paperScannerModal.camera-active .paper-scan-actions{top:50%;bottom:auto;left:auto;right:max(12px,env(safe-area-inset-right,0px));width:clamp(130px,17vw,180px);transform:translateY(-50%);flex-direction:column;align-items:stretch}
  #paperScannerModal.camera-active .paper-scan-actions .btn{width:100%;flex:0 0 auto}
}

/* v1.18.0 — email-free registration and teacher-assisted password recovery. */
/* v1.19.0 — answer-review privacy copy and focus-mode messaging. */
@media(max-width:1040px){
  .nav-print-tools{width:100%;min-width:0}
  .nav-print-trigger{width:100%;min-height:48px;justify-content:flex-start;text-align:left;white-space:normal;line-height:1.25}
  .nav-print-menu{width:100%;max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain}
  .nav-print-menu .btn{width:100%;min-height:46px}
}
@media(max-width:620px){
  .nav-print-menu{padding:13px;max-height:min(48vh,360px)}
  #paperScannerModal .paper-scan-stage,
  #paperScannerModal .scan-form-preview,
  #paperScannerModal .scan-answer-list{flex:0 0 auto;min-width:0}
  #paperScannerModal .paper-scan-stage{width:100%;max-height:none;overflow:visible;padding:8px}
  #paperScannerModal #paperScanCanvas,
  #paperScannerModal #paperRectifiedCanvas{display:block;width:100%!important;height:auto!important;max-width:100%;max-height:none!important;flex:none;margin:8px auto;object-fit:contain}
  #paperScannerModal .scan-form-preview{padding:9px}
  .scan-form-preview-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px}
  .scan-form-preview-head>b{margin:0}
  .scan-key-legend{display:inline-flex;align-items:center;gap:6px;color:#475569;font-size:.74rem;font-weight:650}
  .scan-key-legend i{display:inline-block;width:12px;height:12px;border:1px solid #713f12;border-radius:50%;background:#facc15;flex:0 0 auto}
  .scan-answer-list{max-height:none;overflow:visible;border:0}
  .scan-answer-table,.scan-answer-table tbody{display:block;width:100%}
  .scan-answer-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  .scan-answer-table tbody tr{display:grid;grid-template-columns:2.6rem minmax(0,1fr);margin:0 0 9px;border:1px solid var(--line-2);border-radius:11px;background:#fff;overflow:hidden}
  .scan-answer-table tbody td{display:block;min-width:0;padding:8px 10px;text-align:left;border-bottom:1px solid #e2e8f0;overflow-wrap:anywhere;word-break:normal}
  .scan-answer-table tbody td:first-child{grid-column:1;grid-row:1/span 4;display:flex;align-items:flex-start;justify-content:center;padding:12px 4px 8px;border-right:1px solid #e2e8f0;border-bottom:0;background:#f8fafc;font-weight:850}
  .scan-answer-table tbody td:not(:first-child){grid-column:2}
  .scan-answer-table tbody td:last-child{border-bottom:0}
  .scan-answer-table td[data-label]::before{content:attr(data-label);display:block;margin:0 0 3px;color:#64748b;font-size:.64rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .scan-answer-table td:first-child::before{display:none}
  .scan-answer-table select{width:100%;min-width:0;min-height:42px}
}
.paper-scan-stage,#paperScanCanvas,.scan-form-preview,#paperRectifiedCanvas,.scan-answer-list{min-width:0}
#paperScanCanvas{flex:0 0 auto}
.scan-form-preview-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.scan-form-preview-head>b{margin:0}
.scan-key-legend{display:inline-flex;align-items:center;gap:6px;color:#475569;font-size:.76rem;font-weight:650}
.scan-key-legend i{display:inline-block;width:12px;height:12px;border:1px solid #713f12;border-radius:50%;background:#facc15;flex:0 0 auto}
#paperRectifiedCanvas{width:min(100%,850px);height:auto;max-height:none}
.scan-answer-table{width:100%;table-layout:fixed}
.scan-answer-table th:nth-child(1){width:48px}
.scan-answer-table th:nth-child(2){width:108px}
.scan-answer-table th:nth-child(3){width:38%}
.scan-answer-table th:nth-child(4){width:160px}
.scan-answer-table th:nth-child(5){width:150px}
.scan-answer-table td{overflow-wrap:anywhere;word-break:normal;vertical-align:top}
.scan-answer-table select{width:100%;min-width:0;max-width:100%}
.scan-correct-answer{color:#1e293b}
.scan-answer-result{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:4px 8px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.25;white-space:normal}
.scan-result-correct{background:#dcfce7;border-color:#86efac;color:#166534}
.scan-result-incorrect{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.scan-paper-only-field{display:flex;align-items:flex-end}
.scan-paper-only-field .checkline{align-items:flex-start;gap:10px;margin:0;padding:11px 12px;border:1px solid #cbd5e1;border-radius:11px;background:#f8fafc;line-height:1.4}
.scan-paper-only-field .checkline input{margin-top:2px}
.scan-paper-only-field small{color:#475569;font-weight:500}