/* Dark theme. The brand stays navy + gold: navy/maroon/bronze remain the
   rich colours used for solid fills (buttons, chips, badges), while the
   "-pale" tokens — which are tinted *backgrounds* — became dark tints,
   and each one's partner text colour ("-text") became bright so it still
   reads against them. */
:root{
  --ink:#f0ead9;
  --muted:#9aa2b3;
  --bg:#0c1322;
  --surface:#18243a;
  --line: rgba(201,162,39,0.30);

  --navy:#14213d;
  --navy-deep:#0d1729;
  --navy-soft:#3b4a72;
  --navy-pale:#2b3a5c;
  --navy-text:#e8e3d4;

  --gold:#c9a227;
  --gold-soft:#e4cc7c;
  --gold-pale:#322913;
  --gold-text:#f0d071;

  --maroon:#7b2d26;
  --maroon-pale:#2f1815;
  --maroon-text:#f4b3aa;

  --bronze:#b5651d;
  --bronze-pale:#3a2a18;
  --bronze-text:#e9b277;

  --pale:#22304a;
  --paleRing:#16203a;
  --paleSurface:#131d30;

  --shadow:0 14px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  min-height:100%;
  background:
    radial-gradient(circle at 8% 8%, rgba(59,74,114,.45), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(201,162,39,.16), transparent 30%),
    radial-gradient(circle at 15% 85%, rgba(123,45,38,.18), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(201,162,39,.12), transparent 28%),
    linear-gradient(160deg,#0c1322 0%,#111a2c 45%,#0a0f1b 100%);
  background-attachment:fixed;
}

body{
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  line-height:1.5;
  min-height:100vh;

  /* Light text on a dark background blooms without smoothing. The
     synthesis rule is a backstop: any weight a font doesn't actually
     ship gets faked by smearing the strokes, which reads as blurry.
     Fredoka only goes up to 700, so its headings are set to 700
     directly below rather than the 800/900 they used to ask for. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}

.page-container{
  max-width:640px;
  margin:0 auto;
  padding:18px;
}
@media(min-width:900px){
  .page-container{max-width:900px;padding:24px;}
}

.page-container-wide{
  max-width:1280px;
  margin:0 auto;
  padding:18px 18px 100px;
}
@media(min-width:900px){
  .page-container-wide{padding:24px 28px 110px;}
}

.teacher-action-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:7;
  background:var(--surface);
  border-top:2px solid var(--line);
  padding:12px 18px;
  box-shadow:0 -8px 24px rgba(20,33,61,.14);
}
.teacher-action-bar-inner{
  max-width:1280px;
  margin:0 auto;
}

h1,h2,h3{
  font-family:"Fredoka",system-ui,sans-serif;
  letter-spacing:-.01em;
}

.hidden{display:none!important}

.view{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.app-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  padding:18px;
  max-width:640px;
  margin:0 auto;
  filter:blur(9px) saturate(1.15);
  opacity:.65;
  pointer-events:none;
  overflow:hidden;
}

.app-backdrop.hidden{display:none!important}

/* Login sits as a true modal over the (blurred) app-backdrop, matching
   the app's own profile-modal pattern: dark scrim + crisp centered card. */
#loginView{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(13,23,41,.55);
}

#loginView .login-card{max-width:460px;width:100%}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.card:before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;
  height:6px;
  background:linear-gradient(90deg,var(--navy),var(--gold),var(--bronze));
}

.step-1:before{background:linear-gradient(90deg,var(--navy-soft),var(--navy-deep))}
.step-2:before{background:linear-gradient(90deg,var(--gold),var(--bronze))}
.step-3:before{background:linear-gradient(90deg,var(--gold),var(--navy))}

.step-card h2{display:flex;align-items:center;gap:10px}
.step-number{
  flex:none;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:2px solid var(--gold);
  color:var(--navy-text);
  background:var(--gold-pale);
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:.82rem;
}

.brand-mini{display:flex;align-items:center;gap:7px;font-family:"Fredoka",sans-serif;font-size:.95rem}
.brand-check{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  color:#fff;
  font-size:.75rem;
  font-weight:900;
}

.live-banner{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  font-size:.9rem;
  margin-bottom:16px;
  background:var(--pale);
  color:var(--muted);
  border:2px solid var(--line);
}

.live-banner.live{
  background:linear-gradient(135deg,var(--gold-pale),#4b3c17);
  color:var(--gold-text);
  border-color:var(--gold);
}

.live-banner.error{
  background:var(--maroon-pale);
  color:var(--maroon-text);
  border-color:var(--maroon-text);
}

.login-card{
  text-align:center;
  padding:36px 26px 26px;
  box-shadow:0 30px 90px rgba(13,23,41,.22);
}

.login-icon-wrap{
  width:88px;height:88px;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-pale),var(--bg));
  box-shadow:0 0 0 8px var(--paleRing), 0 10px 26px rgba(201,162,39,.28);
}

/* Stays light: the graduation-cap emblem inside it is a navy SVG, so it
   needs a light gold disc behind it to stay visible. */
.login-icon{
  font-size:2.6rem;
  width:76px;height:76px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#f8efd2,#e6d296);
  box-shadow:0 10px 24px rgba(201,162,39,.28);
}

.brand-area{margin-bottom:6px}

.login-card h1{
  font-size:2rem;
  background:linear-gradient(90deg,var(--ink),var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:6px;
}

.brand-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--gold-text);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.brand-line span:first-child,
.brand-line span:last-child{flex:1;max-width:40px;height:1px;background:var(--line)}

.login-intro{color:var(--muted);font-size:.9rem;margin:14px 0 18px;line-height:1.6}
.muted-line{color:#8d94a5}

.muted{color:var(--muted);font-size:.9rem;margin-bottom:14px}

.input-wrap{position:relative;margin-bottom:12px}
.input-wrap .input-icon{
  position:absolute;
  left:13px;top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;
  font-size:1rem;
  line-height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
}
.input-wrap input{padding-left:46px !important;margin-bottom:0}

.login-button{width:100%;justify-content:center;font-size:1rem}
.login-button span{display:inline-block;transition:transform .15s}
.login-button:hover span{transform:translateX(3px)}

.login-note{
  margin-top:16px;
  font-size:.76rem;
  color:var(--muted);
  background:var(--pale);
  border-radius:10px;
  padding:9px 12px;
}

.login-footer{
  text-align:center;
  color:var(--muted);
  font-size:.76rem;
  margin-top:14px;
}
.login-footer strong{color:var(--gold-text)}

input[type="text"],
input:not([type]),
input[type="number"],
input[type="file"]{
  width:100%;
  padding:12px 14px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--paleSurface);
  font:inherit;
  margin-bottom:10px;
  transition:border-color .15s, box-shadow .15s;
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="number"]:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.18);
}

.btn{
  border:0;
  border-radius:999px;
  padding:12px 20px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, opacity .15s;
}

.btn:active{transform:scale(.97)}

/* Gold rather than navy on dark — a navy fill would all but disappear
   against the dark background. */
.btn.primary{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:var(--navy-deep);
  box-shadow:0 10px 22px rgba(201,162,39,.30);
}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(201,162,39,.40)}

.btn.secondary{
  background:var(--pale);
  color:var(--navy-text);
}
.btn.secondary:hover{background:#2c3c5c}
.btn.secondary.active{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:var(--navy-deep);
}

.btn.danger{
  background:linear-gradient(135deg,#a95851,var(--maroon));
  color:#fff;
}
.btn.danger:hover{transform:translateY(-2px)}

.btn.warning{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#4a3a0a;
}
.btn.warning:hover{transform:translateY(-2px)}

.btn.ghost{background:transparent;color:var(--muted);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--navy-text)}

.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

.status{margin-top:10px;font-size:.85rem;color:var(--muted);font-weight:700}
.status.error{color:var(--maroon-text)}
.status.success{color:var(--gold-text)}

.app-navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:var(--surface);
  border-bottom:2px solid var(--line);
  padding:12px 18px;
  position:sticky;
  top:0;
  z-index:6;
  box-shadow:0 4px 18px rgba(20,33,61,.08);
}
.app-backdrop .app-navbar{position:static;box-shadow:none}

.navbar-brand{display:flex;align-items:center;gap:10px}
.navbar-logo{
  width:38px;height:38px;
  flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  box-shadow:0 6px 16px rgba(201,162,39,.35);
}
.navbar-logo svg{display:block}
.navbar-title{
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:.98rem;
  letter-spacing:.04em;
  color:var(--navy-text);
  line-height:1.1;
}
.navbar-subtitle{
  font-size:.7rem;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.navbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:999px;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:.92rem;
}

.chip-teacher{
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));
  color:#fff;
  box-shadow:0 8px 20px rgba(13,23,41,.3);
}

.chip-student{
  background:linear-gradient(135deg,var(--gold),var(--bronze));
  color:#fff;
  box-shadow:0 8px 20px rgba(201,162,39,.3);
}

.progress-row{
  display:flex;
  justify-content:space-between;
  font-size:.82rem;
  margin-bottom:12px;
}

.progress-row span{
  background:var(--pale);
  color:var(--navy-text);
  padding:5px 12px;
  border-radius:999px;
  font-weight:800;
}

.question-text{
  font-family:"Fredoka",sans-serif;
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:18px;
  color:var(--ink);
}

.options{display:grid;gap:11px}

.option{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border:2px solid var(--line);
  background:var(--paleSurface);
  padding:14px 16px;
  border-radius:14px;
  font:inherit;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, border-color .12s, opacity .12s;
}

.option:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,33,61,.15);border-color:var(--gold)}

.option-badge{
  flex:none;
  width:28px;height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Fredoka",sans-serif;
  font-size:.85rem;
  color:#fff;
  background:var(--navy-soft);
}

.option:nth-of-type(1) .option-badge{background:var(--navy)}
.option:nth-of-type(2) .option-badge{background:var(--gold)}
.option:nth-of-type(3) .option-badge{background:var(--bronze)}
.option:nth-of-type(4) .option-badge{background:var(--navy-deep)}

/* Radio-style indicator on selectable (student answering) options —
   an unmistakable signal for which answer is picked, independent of
   the badge colors and never using the same gold as "correct". */
.option-radio{
  flex:none;
  margin-left:auto;
  width:22px;height:22px;
  border-radius:50%;
  border:2px solid var(--line);
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, background .15s, transform .15s;
}
.option.selected .option-radio{
  border-color:var(--gold);
  background:var(--gold);
  transform:scale(1.08);
}
.option.selected .option-radio:after{
  content:"✓";
  color:var(--navy-deep);
  font-size:.72rem;
  font-weight:900;
}

.idk-divider{
  text-align:center;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:2px 0;
}

.option:disabled{cursor:default}
.option.dim{opacity:.45}

.option.selected{
  background:linear-gradient(135deg,var(--navy-pale),#35476e)!important;
  border-color:var(--gold)!important;
  border-width:3px!important;
  box-shadow:0 8px 18px rgba(201,162,39,.22);
  animation:optionPop .25s ease;
}
.option.selected .option-badge{background:var(--gold)!important;color:var(--navy-deep)!important}

.option.correct{background:linear-gradient(135deg,var(--gold-pale),#54431a)!important;border-color:var(--gold)!important;box-shadow:0 8px 18px rgba(201,162,39,.25);opacity:1!important;animation:optionPop .35s ease}
.option.correct .option-badge{background:var(--gold)!important}
.option.wrong{background:linear-gradient(135deg,var(--maroon-pale),#542a26)!important;border-color:var(--maroon-text)!important;opacity:1!important;animation:optionShake .4s ease}
.option.wrong .option-badge{background:var(--maroon)!important}
.option.idk{font-style:italic;color:var(--muted);border-style:dashed!important;background:var(--paleSurface)!important}

@keyframes optionPop{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes optionShake{20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

@keyframes questionSlideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.question-enter .question-text,
.question-enter .options{animation:questionSlideIn .32s ease}
.question-enter .options .option{animation:questionSlideIn .32s ease backwards}
.question-enter .options .option:nth-of-type(1){animation-delay:.03s}
.question-enter .options .option:nth-of-type(2){animation-delay:.07s}
.question-enter .options .option:nth-of-type(3){animation-delay:.11s}
.question-enter .options .option:nth-of-type(4){animation-delay:.15s}

@keyframes resultBounceIn{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
#studentResultCard{animation:resultBounceIn .4s ease}

.confetti-piece{
  position:absolute;
  top:-30px;
  font-size:1.4rem;
  pointer-events:none;
  animation:confettiFall 1.5s ease-in forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(320px) rotate(360deg);opacity:.15}
}

.question-block{
  border:2px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin-bottom:14px;
  background:var(--paleSurface);
}

.question-block .qn{font-weight:700;margin-bottom:8px;font-family:"Fredoka",sans-serif}
.question-block .qa{
  font-size:.82rem;
  color:var(--gold-text);
  margin-top:8px;
  font-weight:800;
  background:var(--gold-pale);
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
}
.question-block .remove-q{
  float:right;
  background:var(--maroon-pale);
  border:0;
  color:var(--maroon-text);
  cursor:pointer;
  font-weight:900;
  width:26px;height:26px;
  border-radius:50%;
}

.manual-form{
  border:2px dashed var(--line);
  border-radius:16px;
  padding:16px;
  margin:12px 0;
  background:var(--paleSurface);
}

.field-label{
  display:block;
  font-size:.76rem;
  font-weight:800;
  color:var(--muted);
  margin:10px 0 4px;
}

.field-label:first-child{margin-top:0}

.two-col{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:520px){.two-col{grid-template-columns:1fr 1fr}}

.two-col h3{font-size:.9rem;margin-bottom:10px;font-family:"Fredoka",sans-serif}

.mini-table{font-size:.85rem}

table.data{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.82rem}
table.data th{background:transparent;color:var(--muted);text-align:left;padding:0 10px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
table.data td{background:var(--paleSurface);border:1px solid var(--line);padding:8px 10px}
table.data tr td:first-child{border-radius:10px 0 0 10px}
table.data tr td:last-child{border-radius:0 10px 10px 0}

#studentResultCard{text-align:center}
#studentResultCard h2{font-size:1.8rem;margin-bottom:8px}

/* ---- Student home: available-test highlight + attended history ---- */

.available-card{
  border:2px solid var(--gold);
  background:linear-gradient(135deg,var(--gold-pale),#54431a);
  border-radius:20px;
  padding:20px;
  margin-bottom:16px;
  text-align:center;
  animation:availPulse 2.2s ease-in-out infinite;
}
.available-card h2{color:var(--gold-text);font-size:1.3rem;margin-bottom:6px}
.available-card p{color:#e2d3a4;font-size:.88rem;margin-bottom:4px}

/* A test this student has already finished: no urgency, so drop the
   pulse and calm the border/background down from the "waiting for you"
   gold treatment. */
.available-card.completed{
  animation:none;
  border-color:var(--line);
  background:var(--paleSurface);
}
.available-card.completed h2{color:var(--navy-text)}
.available-card.completed p{color:var(--muted)}
@keyframes availPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.35)}50%{box-shadow:0 0 0 10px rgba(201,162,39,0)}}

.attended-list{display:grid;gap:10px;margin-top:4px}
.attended-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  border:2px solid var(--line);
  background:var(--paleSurface);
  border-radius:14px;
  padding:12px 16px;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.attended-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,33,61,.12);border-color:var(--gold)}
.attended-item .ai-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attended-item .ai-date{font-size:.78rem;color:var(--muted)}
.attended-item .ai-score{
  display:flex;align-items:center;gap:6px;
  font-weight:700;
  font-family:"Fredoka",sans-serif;
  background:var(--gold-pale);
  color:var(--gold-text);
  padding:4px 12px;
  border-radius:999px;
}
.attended-item .ai-chevron{color:var(--muted);font-weight:900}

/* ---- Review screen (before submit) ---- */

.review-item{
  border:2px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:10px;
  background:var(--paleSurface);
}
.review-item.unanswered{border-color:var(--bronze-text);background:var(--bronze-pale)}
.review-item .ri-q{font-weight:700;margin-bottom:6px;font-family:"Fredoka",sans-serif;font-size:.95rem}
.review-item .ri-a{font-size:.88rem;color:var(--muted)}
.review-item .ri-a strong{color:var(--ink)}
.review-item .ri-change{
  margin-top:8px;
  background:none;
  border:0;
  color:var(--navy-text);
  font-weight:800;
  font-size:.82rem;
  cursor:pointer;
  text-decoration:underline;
}

/* ---- Results (after submit) ---- */

.result-item{
  border:2px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:10px;
  text-align:left;
}
.result-item.correct{background:var(--gold-pale);border-color:var(--gold)}
.result-item.wrong{background:var(--maroon-pale);border-color:var(--maroon-text)}
.result-item .ri-q{font-weight:700;margin-bottom:6px;font-family:"Fredoka",sans-serif;font-size:.95rem}
.result-item .ri-line{font-size:.85rem;margin-top:3px}
.result-item .ri-line.good{color:var(--gold-text);font-weight:800}
.result-item .ri-line.bad{color:var(--maroon-text);font-weight:800}

/* ---- Student login: grade + section fields ---- */

.student-fields{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:10px;
  margin-top:2px;
  text-align:left;
}
.student-fields .field-label{margin-top:0}
.student-fields select,
.student-fields input{margin-bottom:0}
.student-fields.hidden{display:none!important}

select{
  width:100%;
  padding:12px 14px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--paleSurface);
  font:inherit;
  color:var(--ink);
  margin-bottom:10px;
  transition:border-color .15s, box-shadow .15s;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239aa2b3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.18);
}

/* The native dropdown list renders outside the page's styling on most
   browsers, so it needs its own dark colours or it flashes up white. */
select option{background:var(--surface);color:var(--ink)}

input::placeholder,
textarea::placeholder{color:#7f879a;opacity:1}

/* Dark form controls also need the browser's own UI (date pickers,
   spinners, the file-picker button) switched to its dark variants. */
input,select,textarea{color-scheme:dark}

/* ---- Teacher dashboard: sidebar + room shell ---- */

.teacher-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
@media(min-width:900px){
  .teacher-shell{grid-template-columns:250px 1fr}
}

.grade-sidebar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow);
}
@media(min-width:900px){
  .grade-sidebar{position:sticky;top:84px}
}

.sidebar-head{text-align:center;margin-bottom:10px}
.sidebar-avatar{
  width:52px;height:52px;
  margin:0 auto 8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  box-shadow:0 8px 18px rgba(20,33,61,.3);
}
.sidebar-title{font-family:"Fredoka",sans-serif;font-weight:700;font-size:1rem}
.sidebar-sub{font-size:.74rem;color:var(--muted);margin-top:2px}

.sidebar-section-label{
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted);
  margin:16px 4px 8px;
}

.grade-menu{display:grid;gap:4px;max-height:460px;overflow-y:auto}

.grade-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:0;
  background:transparent;
  font:inherit;
  font-weight:700;
  font-size:.88rem;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  transition:background .15s, color .15s;
}
.grade-menu-item .gmi-badge{
  flex:none;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--pale);
  color:var(--navy-text);
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;
  font-weight:800;
}
.grade-menu-item:hover{background:var(--pale)}
.grade-menu-item.active{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:var(--navy-deep);
  box-shadow:0 6px 14px rgba(201,162,39,.28);
}
.grade-menu-item.active .gmi-badge{background:rgba(13,23,41,.20);color:var(--navy-deep)}

.sidebar-stats{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.78rem;
  color:var(--muted);
  text-align:center;
}
.sidebar-stats strong{
  display:block;
  color:var(--navy-text);
  font-family:"Fredoka",sans-serif;
  font-size:1.4rem;
  line-height:1.3;
}

.teacher-main{min-width:0}

.room-empty-card{text-align:center;padding:40px 22px}

.room-setup-row{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  margin-top:6px;
}
@media(min-width:600px){
  .room-setup-row{grid-template-columns:repeat(3,1fr)}
}
.room-setup-row input:disabled{opacity:.65;cursor:not-allowed;background:var(--pale)}

.teacher-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media(min-width:1000px){
  .teacher-grid{grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .teacher-grid .card{margin-bottom:0}
}

/* ---- Student home: subject-grouped available tests ---- */

.subjects-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:16px;
}
@media(min-width:640px){
  .subjects-grid{grid-template-columns:repeat(2,1fr)}
}
.subjects-grid .available-card{margin-bottom:0}
.subject-icon{font-size:1.6rem;margin-bottom:4px}

.subject-tag{
  background:var(--pale);
  color:var(--navy-text);
  padding:5px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.76rem;
}

/* ---- Test mode: best-effort deterrents while answering/reviewing ---- */

.test-mode-banner{
  position:fixed;
  top:66px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  background:var(--navy);
  color:#fff;
  padding:8px 18px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  text-align:center;
  max-width:92vw;
  box-shadow:0 8px 20px rgba(20,33,61,.3);
}

.fullscreen-nudge{
  position:fixed;
  inset:0;
  z-index:8;
  background:rgba(13,23,41,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.fullscreen-nudge.hidden{display:none!important}
.fullscreen-nudge-card{
  background:var(--surface);
  border-radius:20px;
  padding:28px 26px;
  text-align:center;
  max-width:340px;
  box-shadow:var(--shadow);
}
.fullscreen-nudge-card p{margin-bottom:14px;font-weight:800;color:var(--ink)}

.leave-warning{color:var(--maroon-text)!important;font-weight:900!important}

.susp-flag{
  margin-left:6px;
  background:var(--bronze-pale);
  color:var(--bronze-text);
  padding:2px 8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
}

/* Test-taking content should resist casual copy/select while in test mode. */
.test-locked{user-select:none;-webkit-user-select:none}

/* ---- Admin overview room ---- */

.btn.danger.small{
  padding:7px 14px;
  font-size:.78rem;
  flex-shrink:0;
}

.admin-two-col{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.admin-two-col{grid-template-columns:1fr 1fr}}

.admin-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}

.admin-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--paleSurface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
}

.admin-row-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-row-main strong{font-family:"Fredoka",sans-serif}
.admin-row-main .muted{font-size:.76rem}

.btn.secondary.small{padding:7px 14px;font-size:.78rem;flex-shrink:0}
.admin-row-actions{display:flex;gap:8px;flex-shrink:0}

/* A room's inline worksheet editor, opened from its "Edit" button. */
.admin-room-block{margin-bottom:8px}
.admin-room-block .admin-row{margin-bottom:0}
.admin-room-editor{
  background:var(--paleSurface);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 14px 14px;
  padding:14px 16px;
  margin-top:-1px;
}
.admin-room-editor .manual-form{background:transparent;border:0;padding:0;margin-top:12px}

/* ---- ⋮ menu (student/teacher navbars) ---- */

.kebab-wrap{position:relative}
.icon-btn{padding:10px 14px;font-size:1.1rem;line-height:1;position:relative}

.bell-badge{
  position:absolute;
  top:2px;right:2px;
  min-width:16px;height:16px;
  padding:0 3px;
  border-radius:999px;
  background:var(--maroon);
  color:#fff;
  font-size:.62rem;
  font-weight:900;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.bell-badge.hidden{display:none!important}

.notif-panel{min-width:260px;max-width:320px;max-height:340px;overflow-y:auto}
.notif-item{
  padding:10px 12px;
  border-radius:10px;
  font-size:.84rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.4;
}
.notif-item + .notif-item{margin-top:2px}
.notif-item-clickable{cursor:pointer;transition:background .12s}
.notif-item-clickable:hover{background:var(--pale)}
.kebab-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:20;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:6px;
  min-width:200px;
}
.kebab-dropdown.hidden{display:none!important}
.kebab-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
}
.kebab-item:hover{background:var(--pale)}

textarea{
  width:100%;
  padding:12px 14px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--paleSurface);
  color:var(--ink);
  font:inherit;
  margin-bottom:10px;
  resize:vertical;
  transition:border-color .15s, box-shadow .15s;
}
textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.18);
}