@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

:root {
  --brand: #102a43;
  --brand-2: #0e7490;
  --accent: #14b8a6;
  --accent-strong: #0f766e;
  --ink: #102a43;
  --muted: #627d98;
  --line: #d9e2ec;
  --surface: #ffffff;
  --surface-soft: #f4f8fb;
  --danger: #dc2626;
  --shadow-sm: 0 6px 18px rgba(16, 42, 67, .07);
  --shadow-lg: 0 24px 70px rgba(16, 42, 67, .13);
  --radius: 18px;
}

html { min-width: 320px; background: #edf4f7; }

body {
  min-height: 100dvh;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  background:
    radial-gradient(circle at 0 0, rgba(20,184,166,.13), transparent 30rem),
    radial-gradient(circle at 100% 0, rgba(14,116,144,.11), transparent 34rem),
    linear-gradient(145deg, #f7fbfc 0%, #edf4f7 52%, #e8f1f4 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .45;
  pointer-events: none;
  background-image: linear-gradient(rgba(16,42,67,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,42,67,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.brand-logo { width:42px; height:42px; display:block; flex:0 0 auto; }
.dashboard-brand { width:max-content; display:flex; align-items:center; gap:11px; margin:0 0 14px; color:var(--ink); text-decoration:none; }
.dashboard-brand span,.dashboard-brand b,.dashboard-brand small { display:block; }
.dashboard-brand b { font:800 .98rem "Manrope",sans-serif; }
.dashboard-brand small { margin-top:2px; color:var(--muted); font-size:.72rem; }

h1, h2, h3, h4, .title, .brand { font-family: "Manrope", "DM Sans", sans-serif !important; letter-spacing: -.035em; }
a, button, input, select, textarea { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Retire the old illustrated background while keeping the existing DOM intact. */
.bg {
  background: transparent !important;
  filter: none !important;
  pointer-events: none !important;
}

.container {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: clamp(16px, 2.2vw, 34px) !important;
}

.container > .panel {
  min-height: calc(100dvh - clamp(80px, 9vw, 112px));
}

.panel, .card, .stat, .chart-card {
  border: 1px solid rgba(217, 226, 236, .9) !important;
  background: rgba(255,255,255,.91) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(14px);
}

.panel {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(18px, 2.5vw, 34px) !important;
  border-radius: clamp(18px, 2vw, 26px) !important;
}

.panel .panel { min-height: 0; box-shadow: none !important; background: var(--surface-soft) !important; }

.panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid var(--line);
}

.panel-head h1, .panel > h1 {
  margin: 0 0 5px !important;
  color: var(--ink) !important;
  font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
  line-height: 1.1;
}

.muted { color: var(--muted) !important; }

.actions {
  position: relative;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 0 16px !important;
  padding: 9px !important;
  border: 1px solid rgba(217,226,236,.9);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.actions a, .actions button, .btn, button.grade-save, button.grade-clear {
  min-height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.topbar, .container > div:not(.panel):not(.actions) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.topbar a, .topbar button,
.container > div:not(.panel):not(.actions) > a,
.container > div:not(.panel):not(.actions) > form > button,
.panel form button[type="submit"], .panel form a {
  min-height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 15px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
}

.container > div:not(.panel):not(.actions) > a, .panel form a { background: #e8f0f4 !important; color: var(--ink) !important; border-color: var(--line) !important; }
.container > div:not(.panel):not(.actions) > form > button { background: var(--danger) !important; color: #fff !important; }
.panel form button[type="submit"]:not(.grade-clear) { background: linear-gradient(135deg,var(--brand-2),var(--accent-strong)) !important; color: #fff !important; }
.panel form button.btn-danger, .panel form button[style*="#ef4444"], .panel form button[style*="#dc2626"] { background: var(--danger) !important; color: #fff !important; }

.actions a:hover, .actions button:hover, .btn:hover, button.grade-save:hover { transform: translateY(-2px); filter: saturate(1.1) brightness(.97); }
.btn-primary, .grade-save { background: linear-gradient(135deg, var(--brand-2), var(--accent-strong)) !important; color: #fff !important; }
.btn-neutral { background: #e8f0f4 !important; color: var(--ink) !important; border-color: var(--line) !important; }
.btn-danger { background: #dc2626 !important; color: #fff !important; }

.input, input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
  min-height: 46px;
  max-width: 100%;
  padding: 11px 13px !important;
  color: var(--ink) !important;
  background-color: #fff !important;
  border: 1px solid #bcccdc !important;
  border-radius: 11px !important;
  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea { min-height: 210px; resize: vertical; line-height: 1.55; }
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand-2) !important; box-shadow: 0 0 0 4px rgba(14,116,144,.14) !important; }
label { color: var(--ink); font-weight: 700; }

.table-wrap {
  width: 100%;
  margin-top: 18px !important;
  overflow: auto !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  scrollbar-width: thin;
}

.tbl { width: 100% !important; border-spacing: 0 !important; }
.tbl th {
  padding: 13px 16px !important;
  color: #486581 !important;
  background: #f2f7f9 !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase;
}
.tbl td { padding: 14px 16px !important; border-bottom: 1px solid #e8eff3 !important; }
.tbl tbody tr { transition: background .16s ease; }
.tbl tbody tr:hover { background: #f0fdfa !important; }
.tbl tbody tr:last-child td { border-bottom: 0 !important; }
.name { color: var(--ink); font-weight: 700 !important; }
.mono { color: #486581; font-size: .92rem; }

.stats { gap: 12px !important; margin: 16px 0 20px !important; }
.stat {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 18px !important;
  border-radius: 16px !important;
}
.stat::after { content:""; position:absolute; width:64px; height:64px; right:-18px; bottom:-22px; border-radius:50%; background:rgba(20,184,166,.12); }
.stat .k { margin-top: 8px; color: var(--brand-2); font: 800 clamp(1.6rem,3vw,2.15rem)/1 "Manrope",sans-serif; }
.charts { gap: 18px !important; }
.chart-card { border-radius: 18px !important; }
.chart-wrap { max-height: 430px; }

.bulk-toolbar {
  margin: 22px 0 4px !important;
  padding: 12px !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f6fafb;
}
.hint { color: #486581 !important; background: transparent !important; border: 0 !important; }
.grade-pill, .pill, .badge { box-shadow: none !important; }
.grade-input { min-height: 40px !important; }
.pager { padding-top: 20px !important; }
.page-item .page-link { border-color: var(--line) !important; box-shadow: none !important; }
.page-item.active .page-link { background: var(--brand-2) !important; border-color: var(--brand-2) !important; }

/* Public entry pages become true edge-to-edge split layouts. */
.stage {
  width: 100% !important;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: minmax(280px, .9fr) minmax(420px, 1.1fr) !important;
  place-items: stretch !important;
  padding: 0 !important;
}
.stage::before {
  content: "GRADE TRACKER";
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 6vw, 84px);
  color: #fff;
  font: 800 clamp(2.4rem, 6vw, 6.8rem)/.9 "Manrope", sans-serif;
  letter-spacing: -.07em;
  background:
    radial-gradient(circle at 15% 20%, rgba(45,212,191,.5), transparent 26rem),
    linear-gradient(145deg, #102a43 5%, #0e7490 64%, #14b8a6 140%);
}
.stage > .card {
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 !important;
  padding: clamp(32px, 8vw, 110px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
  text-align: left !important;
}
.stage .title { max-width: 720px; margin-bottom: 18px !important; font-size: clamp(2.2rem, 5vw, 4.8rem) !important; line-height: .98; }
.stage .muted { max-width: 60ch !important; margin: 0 !important; line-height: 1.7 !important; }
.stage .btn { align-self: flex-start; margin-top: 30px !important; background: linear-gradient(135deg,var(--brand-2),var(--accent-strong)) !important; }
.stage form { width: min(100%, 560px); }
.stage .field { margin-bottom: 18px !important; }
.stage .field label { margin-bottom: 7px !important; }
.stage .hint { padding: 0 !important; font-size: .85rem; }

/* Student grade page: wide, information-led rather than centered card. */
.page {
  width: 100% !important;
  min-height: 100dvh !important;
  display: block !important;
  padding: clamp(16px, 3vw, 44px) !important;
}
.page > .card {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100dvh - clamp(32px,6vw,88px));
  display: grid;
  grid-template-columns: minmax(240px,.7fr) minmax(360px,1.3fr);
  grid-template-rows: auto auto 1fr;
  gap: 12px clamp(28px,5vw,80px);
  align-content: center;
  padding: clamp(26px, 5vw, 70px) !important;
  border-radius: 28px !important;
  text-align: left !important;
}
.page > .card .title { grid-column: 1; font-size: clamp(2.8rem,7vw,7rem) !important; line-height: .84; color: var(--brand); }
.page > .card > .muted, .page > .card > .picker { grid-column: 1; }
.page > .card > .badge { grid-column: 2; grid-row: 1 / 4; width: 100% !important; max-width: none !important; min-height: 430px; margin: 0 !important; border-radius: 24px !important; }
.page > .card > form:last-child { grid-column: 1; align-self: end; }
.logout { width: auto !important; min-width: 160px; margin: 20px 0 0 !important; border-radius: 11px !important; box-shadow: none !important; }
.grade { margin: 0 !important; font-size: clamp(5rem,14vw,11rem) !important; }
.subj { margin: 0 !important; }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr !important; }
  .stage::before { min-height: 210px; align-items: center; padding: 28px; font-size: clamp(2.5rem,12vw,5rem); }
  .stage > .card { min-height: calc(100dvh - 210px); padding: clamp(28px,8vw,64px) !important; }
  .page > .card { grid-template-columns: 1fr; grid-template-rows: auto; }
  .page > .card .title, .page > .card > .muted, .page > .card > .picker, .page > .card > .badge, .page > .card > form:last-child { grid-column: 1; grid-row: auto; }
  .page > .card > .badge { min-height: 300px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 640px) {
  .container { padding: 10px !important; }
  .container > .panel { min-height: calc(100dvh - 78px); }
  .panel { padding: 16px !important; border-radius: 16px !important; }
  .panel-head { align-items: stretch !important; flex-direction: column !important; }
  .panel-head form { width: 100% !important; flex-wrap: wrap; }
  .panel-head select { width: 100% !important; }
  .actions { flex-wrap: nowrap !important; overflow-x: auto !important; padding: 7px !important; }
  .actions > * { flex: 0 0 auto !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat { min-height: 96px; padding: 14px !important; }
  .bulk-toolbar > div { width: 100%; display: grid !important; grid-template-columns: 1fr !important; }
  .bulk-toolbar button { width: 100%; }
  .form-grid { grid-template-columns: 1fr !important; }
  select.input, select[style] { min-width: 0 !important; width: 100% !important; }
  .table-wrap { margin-inline: -4px; width: calc(100% + 8px); }
  .tbl { min-width: 680px; }
  .page { padding: 10px !important; }
  .page > .card { min-height: calc(100dvh - 20px); padding: 24px 18px !important; border-radius: 18px !important; }
  .page > .card > .badge { min-height: 260px; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr !important; }
  .stage::before { min-height: 170px; }
  .stage > .card { min-height: calc(100dvh - 170px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Landing page — a single cohesive, full-viewport composition. */
.welcome-shell {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(4,32,51,.93) 0%, rgba(6,55,75,.86) 46%, rgba(7,91,100,.62) 100%),
    url('/images/bg-grade.png') center / cover no-repeat;
}
.welcome-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(48vw, 760px);
  aspect-ratio: 1;
  right: -12vw;
  top: -32%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.018);
}
.welcome-nav {
  width: 100%;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(24px,6vw,96px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.welcome-brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font:800 1rem "Manrope",sans-serif; letter-spacing:-.02em; }
.welcome-mark { width:42px; height:42px; display:grid; place-items:center; color:#073c4b; background:#5eead4; border-radius:12px; font-size:.85rem; letter-spacing:-.04em; }
.welcome-nav-link { min-height:42px; display:inline-flex; align-items:center; padding:9px 17px; color:#fff; text-decoration:none; font-weight:700; border:1px solid rgba(255,255,255,.38); border-radius:11px; transition:.2s ease; }
.welcome-nav-link:hover { background:#fff; color:#0b4050; }
.welcome-main {
  width: 100%;
  min-height: calc(100dvh - 150px);
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(340px,.65fr);
  align-items: center;
  gap: clamp(50px,8vw,140px);
  padding: clamp(56px,7vw,110px) clamp(24px,8vw,150px) 80px;
}
.welcome-copy { max-width: 850px; }
.welcome-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:24px; color:#99f6e4; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.welcome-eyebrow span { width:28px; height:2px; background:#5eead4; }
.welcome-copy h1 { margin:0; color:#fff; font-size:clamp(3.3rem,6.5vw,7.6rem); line-height:.93; letter-spacing:-.075em; }
.welcome-copy h1 em { color:#5eead4; font-style:normal; }
.welcome-lead { max-width:630px; margin:28px 0 0; color:#d7edf0; font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.7; }
.welcome-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:38px; }
.welcome-primary { min-height:52px; display:inline-flex; align-items:center; gap:22px; padding:13px 20px; color:#073c4b; background:#5eead4; text-decoration:none; font-weight:800; border-radius:13px; box-shadow:0 16px 36px rgba(0,0,0,.18); transition:.2s ease; }
.welcome-primary:hover { transform:translateY(-2px); background:#fff; }
.welcome-primary span { font-size:1.25rem; }
.welcome-secure { display:flex; align-items:center; gap:8px; color:#cce8eb; font-size:.9rem; }
.welcome-secure b { width:24px; height:24px; display:grid; place-items:center; color:#073c4b; background:rgba(94,234,212,.9); border-radius:50%; }
.welcome-note { align-self:center; padding:clamp(26px,3vw,44px); border:1px solid rgba(255,255,255,.22); border-radius:24px; background:rgba(255,255,255,.1); box-shadow:0 28px 70px rgba(0,24,38,.26); backdrop-filter:blur(18px); transform:translateY(22px); }
.welcome-note-icon { height:50px; color:#5eead4; font:800 4.8rem/.8 Georgia,serif; }
.welcome-note blockquote { margin:12px 0 32px; color:#f4ffff; font:600 clamp(1.08rem,1.7vw,1.42rem)/1.65 "Manrope",sans-serif; letter-spacing:-.025em; }
.welcome-note-footer { display:flex; align-items:center; gap:12px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); }
.welcome-avatar { width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; color:#073c4b; background:#5eead4; border-radius:50%; font-weight:800; }
.welcome-note-footer b, .welcome-note-footer small { display:block; }
.welcome-note-footer b { color:#fff; font-size:.9rem; }
.welcome-note-footer small { margin-top:3px; color:#afd2d7; }
.welcome-footer { position:absolute; left:0; right:0; bottom:0; min-height:64px; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(24px,6vw,96px); color:#a9cdd2; font-size:.8rem; letter-spacing:.04em; }

@media (max-width: 900px) {
  .welcome-main { grid-template-columns:1fr; gap:44px; align-content:center; padding-top:52px; padding-bottom:110px; }
  .welcome-copy { max-width:720px; }
  .welcome-note { max-width:620px; transform:none; }
  .welcome-footer { position:absolute; }
}
@media (max-width: 560px) {
  .welcome-nav { min-height:70px; padding:14px 18px; }
  .welcome-mark { width:38px; height:38px; }
  .welcome-main { min-height:calc(100dvh - 70px); padding:46px 20px 100px; }
  .welcome-copy h1 { font-size:clamp(3rem,15vw,4.7rem); }
  .welcome-lead { margin-top:22px; }
  .welcome-actions { align-items:flex-start; flex-direction:column; gap:18px; margin-top:30px; }
  .welcome-primary { width:100%; justify-content:space-between; }
  .welcome-note { padding:24px 20px; border-radius:18px; }
  .welcome-footer { padding:14px 20px; }
  .welcome-footer span:last-child { display:none; }
}

/* Student dashboard */
.student-shell { min-height:100dvh; color:var(--ink); background:linear-gradient(145deg,#f7fbfc,#eaf3f6); }
.student-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(18px,5vw,72px); background:rgba(255,255,255,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.student-brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.student-brand .brand-logo { width:40px; height:40px; }
.student-brand b { font-family:"Manrope",sans-serif; }
.student-header form { margin:0; }
.student-logout { min-height:40px; padding:9px 15px; color:#b91c1c; background:#fff; border:1px solid #fecaca; border-radius:10px; font-weight:800; cursor:pointer; }
.student-logout:hover { background:#fef2f2; }
.student-main { width:100%; max-width:1440px; margin:0 auto; padding:clamp(28px,5vw,70px) clamp(18px,5vw,72px); }
.student-welcome { margin-bottom:clamp(26px,4vw,46px); }
.student-kicker { display:block; margin-bottom:10px; color:#0e7490; font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.student-welcome h1 { margin:0; color:var(--ink); font-size:clamp(2.2rem,5vw,4.5rem); line-height:1; letter-spacing:-.06em; }
.student-welcome p { margin:12px 0 0; color:var(--muted); font-size:clamp(.95rem,1.4vw,1.12rem); }
.student-grid { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr); gap:clamp(18px,3vw,34px); align-items:stretch; }
.student-controls,.student-score { border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-sm); }
.student-controls { display:flex; flex-direction:column; justify-content:space-between; min-height:390px; padding:clamp(22px,3vw,38px); background:#fff; }
.student-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.student-section-head span:first-child { color:var(--muted); font-size:.8rem; font-weight:700; }
.student-section-head h2 { margin:7px 0 0; font-size:clamp(1.5rem,2.5vw,2.3rem); line-height:1.15; }
.student-status { flex:0 0 auto; padding:6px 10px; color:#0f766e; background:#ccfbf1; border-radius:999px; font-size:.72rem; font-weight:800; }
.student-picker { margin-top:44px; }
.student-picker label { display:block; margin-bottom:8px; font-size:.84rem; }
.subject-dropdown { position:relative; width:100%; }
.subject-dropdown summary { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; color:var(--ink); background:#fff; border:1px solid #bcccdc; border-radius:13px; font-weight:700; cursor:pointer; list-style:none; transition:border-color .18s ease,box-shadow .18s ease; }
.subject-dropdown summary::-webkit-details-marker { display:none; }
.subject-dropdown summary:hover { border-color:#0e7490; }
.subject-dropdown[open] summary { border-color:#0e7490; box-shadow:0 0 0 4px rgba(14,116,144,.13); }
.subject-chevron { width:9px; height:9px; flex:0 0 auto; border-right:2px solid #486581; border-bottom:2px solid #486581; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
.subject-dropdown[open] .subject-chevron { transform:rotate(225deg) translate(-2px,-2px); }
.subject-options { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 9px); overflow:hidden; padding:7px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 45px rgba(16,42,67,.18); }
.subject-option { width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; color:#334e68; background:transparent; border:0; border-radius:9px; text-align:left; font-weight:700; cursor:pointer; }
.subject-option:hover,.subject-option:focus-visible { color:#0f766e; background:#f0fdfa; outline:none; }
.subject-option.is-selected { color:#0f766e; background:#ccfbf1; }
.subject-option.is-selected span:last-child { width:23px; height:23px; display:grid; place-items:center; color:#fff; background:#14b8a6; border-radius:50%; font-size:.72rem; }
.student-empty { margin-top:28px; padding:16px; color:var(--muted); background:var(--surface-soft); border-radius:12px; }
.student-score { min-height:390px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(26px,4vw,52px); text-align:center; background:var(--score-bg); color:var(--score-color); }
.student-score-label { margin-bottom:8px; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.72; }
.student-score-value { font:800 clamp(6rem,14vw,12rem)/.9 "Manrope",sans-serif; letter-spacing:-.08em; font-variant-numeric:tabular-nums; }
.student-score-message { margin-top:18px; font:800 clamp(1.15rem,2vw,1.55rem) "Manrope",sans-serif; }
.student-score-subject { margin-top:7px; font-size:.9rem; font-weight:700; opacity:.75; }
.student-score-quote { max-width:520px; margin:24px 0 0; padding-top:20px; border-top:1px solid currentColor; color:inherit; font-size:clamp(.84rem,1.25vw,.98rem); font-style:italic; font-weight:600; line-height:1.55; opacity:.78; }
.student-note { margin:24px 0 0; color:#829ab1; font-size:.82rem; text-align:center; }

@media (max-width: 800px) {
  .student-grid { grid-template-columns:1fr; }
  .student-controls { min-height:0; }
  .student-picker { margin-top:30px; }
  .student-score { min-height:330px; }
}
@media (max-width: 520px) {
  .student-header { min-height:64px; padding:11px 14px; }
  .student-brand .brand-logo { width:38px; height:38px; }
  .student-brand b { font-size:.9rem; }
  .student-logout { min-height:38px; padding:8px 12px; font-size:.8rem; }
  .student-main { padding:28px 14px 34px; }
  .student-welcome { margin-bottom:24px; }
  .student-welcome h1 { font-size:2.35rem; }
  .student-controls,.student-score { border-radius:18px; }
  .student-controls { padding:20px; }
  .student-section-head { align-items:center; }
  .student-section-head h2 { font-size:1.35rem; }
  .student-picker { margin-top:24px; }
  .student-score { min-height:270px; padding:26px 18px; }
  .student-score-value { font-size:clamp(6rem,34vw,9rem); }
  .student-score-quote { margin-top:18px; padding-top:16px; }
  .student-note { line-height:1.55; }
}

/* Login page */
.login-shell {
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(100deg, rgba(4,32,51,.95) 0%, rgba(6,61,78,.88) 52%, rgba(8,108,113,.65) 100%),
    url('/images/bg-grade.png') center/cover no-repeat;
}
.login-shell::before { content:""; position:absolute; z-index:-1; width:540px; height:540px; left:-240px; bottom:-240px; border:1px solid rgba(94,234,212,.19); border-radius:50%; box-shadow:0 0 0 85px rgba(94,234,212,.035),0 0 0 170px rgba(94,234,212,.025); }
.login-nav { min-height:84px; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(24px,6vw,96px); border-bottom:1px solid rgba(255,255,255,.14); }
.login-brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font:800 1rem "Manrope",sans-serif; }
.login-mark,.login-mobile-mark { width:42px; height:42px; display:grid; place-items:center; color:#073c4b; background:#5eead4; border-radius:12px; font-weight:800; font-size:.85rem; }
.login-back { color:#d7edf0; text-decoration:none; font-size:.9rem; font-weight:700; }
.login-back:hover { color:#fff; }
.login-main { min-height:calc(100dvh - 84px); display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,520px); align-items:center; gap:clamp(50px,9vw,160px); padding:clamp(42px,6vw,90px) clamp(24px,8vw,150px); }
.login-intro { max-width:760px; }
.login-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:22px; color:#99f6e4; font-size:.77rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-eyebrow span { width:28px; height:2px; background:#5eead4; }
.login-intro h1 { margin:0; color:#fff; font-size:clamp(3.2rem,6vw,7rem); line-height:.94; letter-spacing:-.07em; }
.login-intro h1 em { color:#5eead4; font-style:normal; }
.login-intro > p { max-width:590px; margin:26px 0 0; color:#d1e8eb; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.7; }
.login-points { display:flex; gap:34px; flex-wrap:wrap; margin-top:40px; }
.login-points > div { display:flex; align-items:center; gap:11px; }
.login-points b { width:30px; height:30px; display:grid; place-items:center; color:#073c4b; background:#5eead4; border-radius:9px; }
.login-points strong,.login-points small { display:block; }
.login-points strong { color:#fff; font-size:.9rem; }
.login-points small { margin-top:2px; color:#a9cdd2; }
.login-panel { width:100%; padding:clamp(28px,3.5vw,46px); color:var(--ink); background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.7); border-radius:24px; box-shadow:0 32px 90px rgba(0,24,38,.32); }
.login-panel-head { display:flex; align-items:center; gap:14px; margin-bottom:32px; }
.login-mobile-mark,.login-mobile-logo { display:none; }
.login-mobile-logo { width:42px; height:42px; flex:0 0 auto; }
.login-panel h2 { margin:0 0 6px; font-size:clamp(1.8rem,3vw,2.45rem); line-height:1.1; }
.login-panel-head p { margin:0; color:var(--muted); }
.login-field { margin-bottom:19px; }
.login-field label { display:block; margin-bottom:7px; font-size:.9rem; }
.login-field input { width:100%; min-height:50px; padding:12px 14px !important; }
.login-password-wrap { position:relative; }
.login-password-wrap input { padding-right:50px !important; }
.login-eye { position:absolute; right:8px; top:50%; width:36px; height:36px; display:grid; place-items:center; padding:0; color:#627d98; background:transparent; border:0; border-radius:9px; transform:translateY(-50%); cursor:pointer; }
.login-eye:hover { background:#edf4f7; }
.login-eye svg { width:20px; height:20px; }
.login-hint { margin:7px 0 0; color:#627d98; font-size:.78rem; }
.login-error { margin-top:7px; padding:9px 11px; color:#991b1b; background:#fef2f2; border-radius:8px; font-size:.82rem; font-weight:700; }
.login-remember { display:flex; align-items:center; gap:9px; margin:2px 0 24px; color:#486581; font-size:.87rem; cursor:pointer; }
.login-remember input { width:17px; height:17px; accent-color:#0e7490; }
.login-submit { width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:13px 18px; color:#fff; background:linear-gradient(135deg,#0e7490,#0f766e); border:0; border-radius:12px; font-weight:800; cursor:pointer; box-shadow:0 12px 26px rgba(14,116,144,.23); transition:.2s ease; }
.login-submit:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(14,116,144,.3); }
.login-submit span { font-size:1.2rem; }
.login-help { margin:22px 0 0; color:#829ab1; text-align:center; font-size:.78rem; }

@media (max-width: 900px) {
  .login-main { grid-template-columns:1fr; gap:40px; padding-top:50px; padding-bottom:70px; }
  .login-intro { max-width:680px; }
  .login-panel { max-width:600px; }
}
@media (max-width: 560px) {
  .login-nav { min-height:70px; padding:14px 18px; }
  .login-mark { width:38px; height:38px; }
  .login-brand > span:last-child { display:none; }
  .login-main { min-height:calc(100dvh - 70px); padding:34px 16px; }
  .login-intro { display:none; }
  .login-panel { padding:28px 20px; border-radius:20px; }
  .login-mobile-mark { display:grid; flex:0 0 auto; }
  .login-mobile-logo { display:block; }
}