:root {
  --brand: #0b63f6;
  --brand-2: #00b7ff;
  --brand-3: #7048ff;
  --gold: #f5b301;
  --good: #16a34a;
  --bad: #dc2626;
  --warn: #f59e0b;
  --ink: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, .12);
  --bg: #f6f9ff;
  --card: rgba(255, 255, 255, .92);
  --glass: rgba(255, 255, 255, .74);
  --shadow: 0 22px 55px rgba(15, 23, 42, .12);
  --shadow-soft: 0 12px 28px rgba(15, 23, 42, .10);
  --radius: 22px;
  --radius-sm: 14px;
  --header-height: 78px;
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(11, 99, 246, .18), transparent 30%),
    radial-gradient(circle at 90% 5%, rgba(245, 179, 1, .16), transparent 24%),
    radial-gradient(circle at 70% 84%, rgba(112, 72, 255, .14), transparent 26%),
    linear-gradient(180deg, #f9fbff 0%, #eef5ff 44%, #f8fbff 100%);
  overflow-x: hidden;
}
body.dark {
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --line: rgba(255, 255, 255, .14);
  --bg: #07111f;
  --card: rgba(15, 23, 42, .86);
  --glass: rgba(15, 23, 42, .70);
  background:
    radial-gradient(circle at 12% 8%, rgba(11, 99, 246, .28), transparent 30%),
    radial-gradient(circle at 90% 5%, rgba(245, 179, 1, .15), transparent 24%),
    radial-gradient(circle at 70% 84%, rgba(112, 72, 255, .20), transparent 26%),
    linear-gradient(180deg, #06101e 0%, #0f172a 100%);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font); }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.skip-link { position: absolute; top: -120px; left: 16px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 1000; }
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, .84);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 25px rgba(15, 23, 42, .08);
}
body.dark .site-header { background: rgba(7, 17, 31, .84); }
.header-row { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 54px; height: 54px; object-fit: contain; border-radius: 16px; box-shadow: 0 12px 24px rgba(11, 99, 246, .15); background: #fff; }
.brand-title { display: grid; line-height: 1.05; }
.brand-title strong { font-size: clamp(1.05rem, 2vw, 1.34rem); letter-spacing: -.03em; color: var(--ink); }
.brand-title span { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle, .theme-toggle, .profile-pill {
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .08);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-toggle:hover, .theme-toggle:hover, .profile-pill:hover, .btn:hover { transform: translateY(-2px); }
.nav-toggle { display: none; }

.site-nav {
  border-top: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .62);
}
body.dark .site-nav { background: rgba(7, 17, 31, .52); border-top-color: rgba(255, 255, 255, .08); }
.nav-scroll { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #1e3a8a;
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid transparent;
  transition: .2s ease;
}
body.dark .nav-link { color: #dbeafe; }
.nav-link:hover, .nav-link.active { background: linear-gradient(135deg, rgba(11, 99, 246, .14), rgba(0, 183, 255, .12)); border-color: rgba(11, 99, 246, .18); color: var(--brand); }

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
}
.mobile-drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .52); }
.drawer-panel {
  position: absolute;
  right: 12px;
  top: 12px;
  width: min(360px, calc(100% - 24px));
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 16px;
  backdrop-filter: blur(22px);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.drawer-title { font-weight: 900; font-size: 1.05rem; }
.drawer-close { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); cursor: pointer; }
.drawer-links { display: grid; gap: 8px; }
.drawer-links a { padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.56); font-weight: 800; }
body.dark .drawer-links a { background: rgba(255,255,255,.05); }

.hero { position: relative; padding: 52px 0 34px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: 28px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #0f5eea; background: rgba(11, 99, 246, .10); border: 1px solid rgba(11, 99, 246, .18); padding: 9px 13px; border-radius: 999px; font-weight: 900; font-size: .88rem; }
.hero h1 { font-size: clamp(2.15rem, 5vw, 4.55rem); line-height: .97; letter-spacing: -.065em; margin: 18px 0 18px; }
.text-gradient { background: linear-gradient(135deg, var(--brand), var(--brand-2) 52%, var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; max-width: 720px; margin: 0 0 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 20px; }
.btn {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
}
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.btn-secondary { background: #fff; color: var(--brand); border: 1px solid rgba(11, 99, 246, .20); }
body.dark .btn-secondary { background: rgba(255,255,255,.08); color: #dbeafe; }
.btn-dashboard {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #4f46e5 0%, #6d5dfc 52%, #7c3aed 100%);
  color: #fff;
  border: 1px solid rgba(79,70,229,.28);
  box-shadow: 0 16px 32px rgba(79,70,229,.27);
}
.btn-dashboard:hover { filter: brightness(1.04); box-shadow: 0 18px 36px rgba(79,70,229,.34); }
.btn-dashboard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
.btn-dashboard:hover::after { transform: translateX(120%); }
body.dark .btn-dashboard {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 58%, #8b5cf6 100%);
  color: #fff;
  border-color: rgba(167,139,250,.34);
}

.btn-gold { background: linear-gradient(135deg, #ffbe0b, #fb8500); color: #1f2937; }
.btn-good { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.74); color: var(--ink); border: 1px solid var(--line); }
body.dark .btn-ghost { background: rgba(255,255,255,.07); }
.btn:disabled { opacity: .58; cursor: not-allowed; transform: none; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.68); border: 1px solid var(--line); color: var(--muted); font-weight: 800; font-size: .86rem; }
body.dark .badge { background: rgba(255,255,255,.06); }

.hero-visual {
  position: relative;
  min-height: 400px;
  border-radius: 32px;
  padding: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(235,245,255,.76));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
body.dark .hero-visual { background: linear-gradient(135deg, rgba(15,23,42,.88), rgba(30,41,59,.76)); }
.hero-visual::before { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 180deg, rgba(11,99,246,.16), rgba(245,179,1,.12), rgba(112,72,255,.16), rgba(11,99,246,.16)); animation: spin 11s linear infinite; opacity: .9; }
@keyframes spin { to { transform: rotate(360deg); } }
.mock-device { position: relative; z-index: 1; background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 26px; padding: 18px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
body.dark .mock-device { background: rgba(15,23,42,.80); }
.device-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; display: block; border-radius: 50%; background: var(--brand); opacity: .35; }
.device-title { font-weight: 950; }
.test-preview { display: grid; gap: 12px; }
.preview-question { padding: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(11,99,246,.10), rgba(0,183,255,.10)); border: 1px solid rgba(11,99,246,.14); font-weight: 900; line-height: 1.45; }
.preview-options { display: grid; gap: 10px; }
.preview-option { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 15px; background: rgba(255,255,255,.68); border: 1px solid var(--line); color: var(--muted); font-weight: 800; }
body.dark .preview-option { background: rgba(255,255,255,.06); }
.preview-option.correct { background: rgba(22,163,74,.13); border-color: rgba(22,163,74,.22); color: var(--good); }
.floating-card { position: absolute; z-index: 2; border-radius: 18px; padding: 13px 14px; background: rgba(255,255,255,.88); border: 1px solid var(--line); box-shadow: var(--shadow-soft); font-weight: 950; backdrop-filter: blur(18px); }
body.dark .floating-card { background: rgba(15,23,42,.82); }
.floating-card.one { right: 28px; bottom: 38px; animation: floatY 4s ease-in-out infinite; }
.floating-card.two { left: 18px; bottom: 82px; animation: floatY 5s ease-in-out infinite reverse; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.section { padding: 34px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.section-title h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.45rem); letter-spacing: -.045em; }
.section-title p { margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  overflow: hidden;
  backdrop-filter: blur(18px);
}
.card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--gold)); opacity: .88; }
.card h3 { margin: 0 0 10px; letter-spacing: -.03em; font-size: 1.22rem; }
.card p { color: var(--muted); line-height: 1.68; margin: 0 0 16px; }
.icon-card { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(11,99,246,.14), rgba(0,183,255,.12)); color: var(--brand); font-size: 1.55rem; margin-bottom: 12px; }
.stats-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0; }
.stat-pill { border: 1px solid var(--line); background: rgba(255,255,255,.64); padding: 8px 10px; border-radius: 999px; color: var(--muted); font-weight: 850; font-size: .86rem; }
body.dark .stat-pill { background: rgba(255,255,255,.06); }
.locked { opacity: .72; }
.lock-ribbon { position: absolute; top: 16px; right: 16px; background: rgba(245,158,11,.14); color: #b45309; border: 1px solid rgba(245,158,11,.25); border-radius: 999px; padding: 7px 10px; font-size: .78rem; font-weight: 950; }

.page-shell { padding: 28px 0 52px; }
.page-title { margin-bottom: 20px; }
.page-title h1 { font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.055em; margin: 0 0 10px; }
.page-title p { color: var(--muted); line-height: 1.65; max-width: 780px; margin: 0; }
.form-card { max-width: 520px; margin: 30px auto; }
.form-group { display: grid; gap: 8px; margin-bottom: 14px; }
label { font-weight: 900; color: var(--ink); }
.input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  color: var(--ink);
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
  font-size: .98rem;
  transition: border .2s ease, box-shadow .2s ease;
}
body.dark .input, body.dark select, body.dark textarea { background: rgba(255,255,255,.06); }
.input:focus, select:focus, textarea:focus { border-color: rgba(11,99,246,.42); box-shadow: 0 0 0 4px rgba(11,99,246,.12); }
.helper { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.alert { padding: 13px 14px; border-radius: 16px; margin: 12px 0; font-weight: 850; border: 1px solid var(--line); }
.alert-info { background: rgba(11,99,246,.10); color: #1d4ed8; }
.alert-good { background: rgba(22,163,74,.12); color: var(--good); border-color: rgba(22,163,74,.18); }
.alert-bad { background: rgba(220,38,38,.12); color: var(--bad); border-color: rgba(220,38,38,.18); }

.dashboard-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.sidebar { position: sticky; top: 116px; display: grid; gap: 9px; }
.sidebar a, .sidebar button { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 13px 14px; color: var(--ink); font-weight: 900; cursor: pointer; }
.sidebar a.active, .sidebar button.active { background: linear-gradient(135deg, rgba(11,99,246,.15), rgba(0,183,255,.11)); color: var(--brand); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; }
td { font-weight: 750; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; font-size: .8rem; font-weight: 950; }
.status.free { background: rgba(22,163,74,.12); color: var(--good); }
.status.premium { background: rgba(245,179,1,.16); color: #b45309; }
.status.lock { background: rgba(100,116,139,.14); color: var(--muted); }


.student-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  align-items: stretch;
  padding: 28px 0 34px;
}
.student-gate[hidden], #testApp[hidden] { display: none !important; }
.student-gate-card { padding: clamp(20px, 4vw, 34px); }
.student-gate-card h1 {
  margin: 14px 0 10px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.055em;
}
.big-helper { font-size: 1rem; max-width: 780px; }
.student-form { margin-top: 20px; display: grid; gap: 4px; }
.student-gate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.privacy-note {
  margin: 12px 0 0 !important;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(22,163,74,.10);
  color: var(--good) !important;
  font-weight: 850;
  border: 1px solid rgba(22,163,74,.18);
}
.gate-graphic {
  min-height: 100%;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(11,99,246,.14), rgba(245,179,1,.14));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.gate-graphic::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 90deg, rgba(26,86,219,.22), rgba(0,183,255,.18), rgba(245,179,1,.20), rgba(26,86,219,.22));
  animation: spin 13s linear infinite;
}
.gate-phone {
  position: relative;
  z-index: 1;
  width: min(285px, calc(100% - 38px));
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(18px);
}
body.dark .gate-phone { background: rgba(15,23,42,.86); }
.gate-lines { display: grid; gap: 12px; margin: 22px 0; }
.gate-lines span { height: 44px; border-radius: 15px; background: rgba(11,99,246,.10); border: 1px solid rgba(11,99,246,.14); }
.gate-check { padding: 13px 14px; border-radius: 16px; background: rgba(22,163,74,.12); color: var(--good); border: 1px solid rgba(22,163,74,.22); font-weight: 950; text-align: center; }
.student-meta { margin-top: 4px; color: var(--good); font-weight: 850; }
.student-result-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.student-result-info span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(11,99,246,.10);
  color: var(--brand);
  border: 1px solid rgba(11,99,246,.16);
  font-weight: 900;
}

.test-shell { padding: 18px 0 34px; }
.test-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 90px;
  z-index: 50;
  backdrop-filter: blur(18px);
}
.timer-box, .score-box { display: inline-flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 16px; background: rgba(11,99,246,.10); color: var(--brand); font-weight: 950; border: 1px solid rgba(11,99,246,.14); white-space: nowrap; }
.timer-box.danger { background: rgba(220,38,38,.13); color: var(--bad); border-color: rgba(220,38,38,.18); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.02); } }
.progress-track { height: 10px; background: rgba(100,116,139,.16); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: inherit; transition: width .2s ease; }
.test-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 18px; align-items: start; }
.question-card { min-height: 520px; }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.q-number { color: var(--brand); font-weight: 950; }
.q-text { font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.65; font-weight: 900; margin: 12px 0 18px; }
.options { display: grid; gap: 12px; }
.option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: transform .18s ease, border .18s ease, background .18s ease;
}
body.dark .option { background: rgba(255,255,255,.06); }
.option:hover { transform: translateY(-2px); border-color: rgba(11,99,246,.28); }
.option input { display: none; }
.opt-key { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(11,99,246,.10); color: var(--brand); font-weight: 950; }
.option.selected { border-color: rgba(11,99,246,.55); background: rgba(11,99,246,.10); }
.option.selected .opt-key { background: var(--brand); color: #fff; }
.option.correct { border-color: rgba(22,163,74,.52); background: rgba(22,163,74,.12); }
.option.correct .opt-key { background: var(--good); color: #fff; }
.option.wrong { border-color: rgba(220,38,38,.52); background: rgba(220,38,38,.11); }
.option.wrong .opt-key { background: var(--bad); color: #fff; }
.test-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 22px; }
.palette-card { position: sticky; top: 190px; }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 14px; }
.palette button { border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 12px; min-height: 42px; color: var(--ink); cursor: pointer; font-weight: 950; }
body.dark .palette button { background: rgba(255,255,255,.07); }
.palette button.current { outline: 3px solid rgba(11,99,246,.20); border-color: var(--brand); color: var(--brand); }
.palette button.answered { background: rgba(22,163,74,.14); color: var(--good); border-color: rgba(22,163,74,.24); }
.palette button.review { background: rgba(112,72,255,.14); color: var(--brand-3); border-color: rgba(112,72,255,.24); }
.legend { display: grid; gap: 8px; margin-top: 14px; font-size: .88rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 4px; background: var(--line); display: inline-block; }
.dot.answered { background: var(--good); }
.dot.review { background: var(--brand-3); }
.dot.current { background: var(--brand); }

.result-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.score-circle {
  width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--brand) var(--score-angle, 0deg), rgba(100,116,139,.16) 0);
  margin: 8px auto 18px;
  position: relative;
}
.score-circle::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--card); }
.score-circle strong { position: relative; z-index: 1; font-size: 2.2rem; }
.review-item { margin-bottom: 14px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.68); border: 1px solid var(--line); }
body.dark .review-item { background: rgba(255,255,255,.06); }
.review-item h4 { margin: 0 0 8px; line-height: 1.45; }
.review-line { color: var(--muted); margin: 4px 0; }
.review-line.good { color: var(--good); font-weight: 900; }
.review-line.bad { color: var(--bad); font-weight: 900; }
.explanation { margin-top: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(11,99,246,.08); color: var(--muted); line-height: 1.55; }

.bottom-nav { display: none; }
.site-footer { margin-top: 40px; padding: 28px 0 90px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 18px; }
.footer-grid h4 { margin: 0 0 10px; color: var(--ink); }
.footer-grid a { display: block; margin: 7px 0; color: var(--muted); font-weight: 750; }

@media (max-width: 940px) {
  .hero-grid, .test-layout, .dashboard-layout, .result-hero, .student-gate { grid-template-columns: 1fr; }
  .hero { padding-top: 30px; }
  .hero-visual { min-height: 340px; }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .profile-pill { display: none; }
  .sidebar, .palette-card { position: static; }
  .test-topbar { top: 82px; grid-template-columns: 1fr; }
  .test-topbar .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --header-height: 70px; }
  .container { width: min(100% - 22px, 1180px); }
  .brand-logo { width: 48px; height: 48px; border-radius: 14px; }
  .brand-title span { display: none; }
  .theme-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .theme-toggle span:last-child { display: none; }
  .hero h1 { font-size: clamp(2.2rem, 12vw, 3.1rem); }
  .hero-actions .btn { width: 100%; }
  .student-gate-actions .btn { width: 100%; }
  .gate-graphic { min-height: 250px; border-radius: 24px; }
  .badges { display: grid; grid-template-columns: 1fr 1fr; }
  .badge { justify-content: center; text-align: center; }
  .hero-visual { min-height: 320px; border-radius: 24px; padding: 14px; }
  .floating-card { font-size: .82rem; padding: 10px 11px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-head { display: block; }
  .card { padding: 17px; border-radius: 20px; }
  .test-shell { padding-bottom: 90px; }
  .option { grid-template-columns: 36px 1fr; padding: 12px; }
  .opt-key { width: 36px; height: 36px; }
  .palette { grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .palette button { min-height: 38px; border-radius: 11px; }
  .test-actions .btn { flex: 1 1 44%; padding-inline: 10px; }
  .btn-danger { flex-basis: 100% !important; }
  .bottom-nav {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 22px;
    padding: 8px;
    backdrop-filter: blur(18px);
  }
  body.dark .bottom-nav { background: rgba(15,23,42,.88); }
  .bottom-nav a { display: grid; place-items: center; gap: 4px; color: var(--muted); font-size: .72rem; font-weight: 900; padding: 7px 4px; border-radius: 16px; }
  .bottom-nav a.active { background: rgba(11,99,246,.12); color: var(--brand); }
  .bottom-nav b { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


.form-card .btn-primary {
  width: 100%;
}

.login-demo-note,
.local-preview {
  display: none !important;
}

.form-card .alert[hidden] {
  display: none !important;
}

.form-card .alert:not([hidden]) {
  display: block !important;
}

.dashboard-big-text {
  font-size: 2rem;
  font-weight: 950;
  margin: 0;
}

.dashboard-date-text {
  font-size: 1.6rem;
  font-weight: 950;
  margin: 0;
}
/* Secure portal additions */
[hidden] { display: none !important; }
.toast {
  position: fixed;
  right: 16px;
  bottom: 92px;
  z-index: 1000;
  max-width: min(380px, calc(100vw - 32px));
  box-shadow: var(--shadow);
}
.centered-title { text-align: center; margin-inline: auto; }
.centered-title p { margin-inline: auto; }
.login-helper { margin: 16px 0 0; text-align: center; }
.full-width { width: 100%; }
.full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.checkbox-badge { justify-content: flex-start; cursor: pointer; }
.checkbox-badge input { width: 18px; height: 18px; accent-color: var(--brand); }
.card small, td small { color: var(--muted); line-height: 1.45; }
.table-actions { display: flex; flex-wrap: wrap; gap: 7px; min-width: 230px; }
.btn-small { padding: 8px 10px; border-radius: 12px; font-size: .78rem; }

.admin-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(11,99,246,.16), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(245,179,1,.14), transparent 34%),
    var(--bg);
}
.admin-login-shell { width: min(100% - 28px, 520px); padding: 30px 0; }
.admin-login-card { padding: clamp(22px, 5vw, 36px); }
.admin-login-brand { margin-bottom: 28px; }
.admin-security-note { text-align: center; margin: 16px 0 0; }
.password-field { position: relative; }
.password-field .input { padding-right: 74px; }
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(11,99,246,.10);
  color: var(--brand);
  border-radius: 11px;
  padding: 8px 10px;
  font-weight: 900;
  cursor: pointer;
}

.dashboard-summary .card { min-height: 150px; }
.question-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
  position: sticky;
  top: 102px;
  z-index: 20;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.question-slots { display: grid; gap: 16px; }
.question-slot { padding: 0; overflow: hidden; }
.question-slot summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 950;
  background: rgba(11,99,246,.07);
  list-style-position: inside;
}
.question-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
}

@media (max-width: 680px) {
  .table-actions { min-width: 180px; }
  .question-form-grid { grid-template-columns: 1fr; }
  .question-form-grid .full { grid-column: auto; }
  .question-builder-toolbar { top: 78px; }
  .admin-login-shell { width: min(100% - 20px, 520px); }
}

/* Shared student/admin authentication layout */
.auth-card { width: min(100%, 520px); }
.auth-card .password-toggle:focus-visible,
.auth-card .btn:focus-visible,
.auth-card .input:focus-visible {
  outline: 3px solid rgba(11, 99, 246, .25);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .bottom-nav {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* Account management and settings */
.compact-head { margin-bottom: 14px; }
.input-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.settings-card { max-width: 680px; }
.setup-help-card { max-width: 680px; margin-top: 18px; }
.setup-help-card code {
  display: block;
  overflow-x: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 23, 42, .06);
  color: var(--ink);
  font-weight: 750;
}
body.dark .setup-help-card code { background: rgba(255, 255, 255, .06); }
.text-center { text-align: center; }
.justify-center { justify-content: center; }

.app-dialog {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: transparent;
  overflow: visible;
}
.app-dialog::backdrop {
  background: rgba(2, 6, 23, .62);
  backdrop-filter: blur(5px);
}
.dialog-card {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.dialog-head h2 { margin: 12px 0 0; }
.dialog-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 680px) {
  .input-action-row { grid-template-columns: 1fr 1fr; }
  .input-action-row .input { grid-column: 1 / -1; }
  .input-action-row .btn { width: 100%; }
  .dialog-actions .btn { flex: 1 1 100%; }
  .app-dialog { width: min(100% - 14px, 760px); }
  .dialog-card { max-height: calc(100vh - 14px); padding: 18px; }
}

/* Exam integrity mode */
.integrity-rules {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  padding: 15px 17px;
  border: 1px solid rgba(245, 179, 1, .42);
  border-radius: 16px;
  background: rgba(245, 179, 1, .09);
  color: var(--ink);
  line-height: 1.5;
}
.integrity-rules strong { color: #9a6700; }
body.dark .integrity-rules strong { color: #ffd36a; }
.integrity-rules span { color: var(--muted); }
.test-title-block { min-width: 240px; }
.test-security-controls {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.integrity-status {
  padding: 9px 12px;
  border: 1px solid rgba(22, 163, 74, .28);
  border-radius: 999px;
  background: rgba(22, 163, 74, .09);
  color: #15803d;
  font-size: .82rem;
  font-weight: 900;
  white-space: nowrap;
}
.integrity-status.has-warning {
  border-color: rgba(245, 158, 11, .38);
  background: rgba(245, 158, 11, .12);
  color: #b45309;
}
.integrity-status.is-locked {
  border-color: rgba(220, 38, 38, .38);
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
}
body.dark .integrity-status { color: #86efac; }
body.dark .integrity-status.has-warning { color: #fcd34d; }
body.dark .integrity-status.is-locked { color: #fca5a5; }
.exam-warning-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(7px);
}
.exam-warning-overlay[hidden] { display: none; }
.exam-warning-card {
  width: min(100%, 480px);
  padding: clamp(24px, 5vw, 34px);
  border: 2px solid #ef4444;
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .36);
}
.exam-warning-icon { font-size: 50px; line-height: 1; }
.exam-warning-card h2 {
  margin: 14px 0 10px;
  color: #dc2626;
  font-size: clamp(1.55rem, 4vw, 2rem);
}
.exam-warning-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.exam-warning-count {
  margin: 20px 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(220, 38, 38, .10);
  color: #b91c1c;
  font-weight: 800;
}
.integrity-result-alert {
  margin: 16px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 14px;
  background: rgba(245, 158, 11, .10);
  color: #92400e;
  font-weight: 800;
}
.integrity-result-alert.auto {
  border-color: rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .10);
  color: #b91c1c;
}
body.dark .integrity-result-alert { color: #fcd34d; }
body.dark .integrity-result-alert.auto { color: #fca5a5; }

@media (max-width: 900px) {
  .test-topbar { align-items: stretch; }
  .test-security-controls { justify-items: stretch; }
  .integrity-status { text-align: center; }
}

@media (max-width: 680px) {
  .test-security-controls { width: 100%; }
  .test-security-controls .btn { width: 100%; }
  .integrity-status { white-space: normal; }
  .exam-warning-overlay { padding: 10px; }
  .exam-warning-card { border-radius: 20px; }
}

/* v2.3: one-attempt controls, warning visibility and test-toolbar polish */
.test-topbar {
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
}
.test-topbar > .btn-danger {
  width: auto;
  min-width: 150px;
  white-space: nowrap;
}
.test-security-controls {
  justify-items: stretch;
  min-width: 190px;
}
.attempt-policy {
  padding: 8px 11px;
  border: 1px solid rgba(11, 99, 246, .22);
  border-radius: 999px;
  background: rgba(11, 99, 246, .08);
  color: var(--brand);
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}
body.dark .attempt-policy { color: #93c5fd; }

.exam-warning-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}
.exam-warning-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.exam-warning-overlay[hidden] { display: none !important; }
body.exam-warning-open { overflow: hidden; }
.exam-warning-return-note {
  margin-top: 10px !important;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(11, 99, 246, .07);
  font-size: .82rem;
}

.attempted-card {
  border-color: rgba(22, 163, 74, .30);
  background: linear-gradient(180deg, rgba(22, 163, 74, .06), var(--card));
}
.attempted-button { cursor: default; }
.attempt-limit-note {
  margin: 12px 0 15px;
  padding: 10px 12px;
  border: 1px solid rgba(22, 163, 74, .24);
  border-radius: 13px;
  background: rgba(22, 163, 74, .08);
  color: #166534;
  font-weight: 800;
  line-height: 1.45;
}
body.dark .attempt-limit-note { color: #86efac; }
.attempt-blocked-card {
  max-width: 760px;
  margin: 42px auto;
  padding: clamp(24px, 5vw, 42px);
  text-align: center;
}
.attempt-blocked-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(22, 163, 74, .11);
  font-size: 38px;
}
.attempt-blocked-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}
.attempt-blocked-summary span {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(100, 116, 139, .06);
  color: var(--muted);
}
.attempt-blocked-summary strong { color: var(--ink); }

@media (max-width: 1080px) {
  .test-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .test-topbar > .btn-danger {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 940px) {
  .test-topbar {
    grid-template-columns: 1fr;
  }
  .attempt-policy { white-space: normal; }
}

@media (max-width: 680px) {
  .attempt-blocked-summary { grid-template-columns: 1fr; }
}

/* v2.4: Exam Focus UI — calm, distraction-free computer-based test theme */
body.exam-page {
  --exam-navy: #0b1f3a;
  --exam-blue: #1769e0;
  --exam-blue-soft: #eaf2ff;
  --exam-surface: #ffffff;
  --exam-border: #d7e0ec;
  --exam-bg: #eef3f8;
  background:
    linear-gradient(rgba(255,255,255,.48), rgba(255,255,255,.48)),
    linear-gradient(180deg, #e9f0f7 0, #f5f8fb 360px, #eef3f8 100%);
}
body.exam-page.dark {
  --exam-navy: #eff6ff;
  --exam-blue: #60a5fa;
  --exam-blue-soft: rgba(59,130,246,.14);
  --exam-surface: #101b2d;
  --exam-border: rgba(255,255,255,.13);
  --exam-bg: #07111f;
}

body.exam-running { background: var(--exam-bg); }
body.exam-running .site-header {
  background: rgba(255,255,255,.97);
  box-shadow: 0 1px 0 rgba(15,23,42,.09);
  backdrop-filter: none;
}
body.exam-running.dark .site-header { background: rgba(7,17,31,.97); }
body.exam-running .site-nav,
body.exam-running .bottom-nav { display: none !important; }
body.exam-running .header-row { min-height: 64px; }
body.exam-running .brand-logo { width: 42px; height: 42px; border-radius: 11px; box-shadow: none; }
body.exam-running .brand-title strong { font-size: 1.05rem; }
body.exam-running .brand-title span { font-size: .72rem; margin-top: 3px; }
body.exam-running .theme-toggle,
body.exam-running .nav-toggle { display: none !important; }
body.exam-running .profile-pill { box-shadow: none; background: #f8fafc; }
body.exam-running.dark .profile-pill { background: rgba(255,255,255,.06); }
body.exam-running .test-shell { padding: 14px 0 34px; }

body.exam-running .test-topbar {
  top: 72px;
  grid-template-columns: minmax(300px, 1fr) minmax(205px, auto) auto auto;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border-color: var(--exam-border);
  background: var(--exam-surface);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  backdrop-filter: none;
}
.test-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.test-title-row > strong { color: var(--exam-navy); font-size: 1rem; letter-spacing: -.01em; }
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #166534;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  font-size: .72rem;
  font-weight: 900;
}
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.14); }
body.dark .live-status { color: #86efac; background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.22); }
.progress-wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 9px; }
.progress-wrap .progress-track { margin: 0; height: 7px; background: #e5ebf3; }
body.dark .progress-wrap .progress-track { background: rgba(255,255,255,.10); }
.progress-wrap .progress-bar { background: var(--exam-blue); }
.progress-caption { color: var(--muted); font-size: .72rem; font-weight: 850; white-space: nowrap; }

.test-security-controls { display: grid; gap: 7px; min-width: 205px; }
.integrity-status,
.attempt-policy {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid var(--exam-border);
  background: #f8fafc;
  color: #334155;
  font-size: .76rem;
  font-weight: 850;
  white-space: nowrap;
}
body.dark .integrity-status,
body.dark .attempt-policy { background: rgba(255,255,255,.05); color: #dbeafe; }
.integrity-status.has-warning { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.integrity-status.is-locked { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.exam-clock { display: grid; justify-items: center; gap: 4px; }
.exam-clock-label { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
body.exam-running .timer-box {
  min-width: 112px;
  justify-content: center;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--exam-blue-soft);
  color: var(--exam-blue);
  border-color: #bfd5fa;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.exam-toolbar-actions { display: grid; gap: 8px; min-width: 150px; }
body.exam-running .exam-toolbar-actions .btn {
  min-height: 39px;
  border-radius: 10px;
  padding: 9px 14px;
  justify-content: center;
  transform: none;
  box-shadow: none;
}
body.exam-running #submitBtn { background: #dc2626; }
body.exam-running #submitBtn:hover { background: #b91c1c; }

body.exam-running .test-layout {
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 16px;
  margin-top: 16px;
}
body.exam-running .question-card,
body.exam-running .palette-card {
  border-radius: 16px;
  border-color: var(--exam-border);
  background: var(--exam-surface);
  box-shadow: 0 7px 18px rgba(15,23,42,.07);
  backdrop-filter: none;
}
body.exam-running .question-card::after,
body.exam-running .palette-card::after { display: none; }
body.exam-running .question-card { min-height: 590px; padding: clamp(20px, 2.6vw, 32px); }
.question-meta { padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--exam-border); }
.question-meta > div:first-child { display: grid; gap: 4px; }
.q-number { color: var(--exam-blue); font-size: .88rem; letter-spacing: .01em; }
.question-instruction { color: var(--muted); font-size: .76rem; font-weight: 750; }
.question-stats { display: flex; gap: 8px; }
.question-stats span {
  min-width: 90px;
  padding: 8px 10px;
  border: 1px solid var(--exam-border);
  border-radius: 9px;
  background: #f8fafc;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
}
.question-stats b { color: var(--exam-navy); margin-left: 3px; }
body.dark .question-stats span { background: rgba(255,255,255,.04); }
body.exam-running .q-text {
  max-width: 900px;
  margin: 6px 0 24px;
  color: var(--exam-navy);
  font-size: clamp(1.16rem, 2vw, 1.48rem);
  line-height: 1.55;
  font-weight: 780;
  letter-spacing: -.015em;
}
body.exam-running .options { gap: 11px; }
body.exam-running .option {
  grid-template-columns: 40px minmax(0,1fr);
  gap: 13px;
  min-height: 64px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--exam-border);
  background: var(--exam-surface);
  color: #1e293b;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.dark.exam-running .option { color: #e2e8f0; }
body.exam-running .option:hover { transform: none; border-color: #8eb8f2; background: #f8fbff; }
body.dark.exam-running .option:hover { background: rgba(59,130,246,.08); }
body.exam-running .opt-key {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #edf2f8;
  color: #334155;
  font-size: .86rem;
}
body.dark.exam-running .opt-key { background: rgba(255,255,255,.08); color: #dbeafe; }
body.exam-running .option.selected {
  border-color: var(--exam-blue);
  background: var(--exam-blue-soft);
  box-shadow: 0 0 0 2px rgba(23,105,224,.10);
}
body.exam-running .option.selected .opt-key { background: var(--exam-blue); color: #fff; }
body.exam-running .test-actions {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--exam-border);
}
body.exam-running .test-actions .btn {
  border-radius: 10px;
  min-height: 42px;
  padding: 10px 15px;
  box-shadow: none;
  transform: none;
}
body.exam-running .btn-primary { background: var(--exam-blue); }
body.exam-running .btn-primary:hover { background: #0f56bd; }
body.exam-running .btn-gold { background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; }
body.dark.exam-running .btn-gold { background: rgba(245,158,11,.10); color: #fcd34d; border-color: rgba(245,158,11,.28); }

body.exam-running .palette-card { top: 198px; padding: 18px; }
.palette-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.palette-card-head h3 { margin-bottom: 5px; font-size: 1.05rem; color: var(--exam-navy); }
.palette-card-head p { margin: 0; font-size: .76rem; line-height: 1.45; }
.palette-close-btn { display: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--exam-border); background: #f8fafc; color: var(--ink); cursor: pointer; }
.palette-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 12px; }
.palette-summary span { padding: 9px; border-radius: 9px; background: #f8fafc; border: 1px solid var(--exam-border); color: var(--muted); font-size: .72rem; font-weight: 800; text-align: center; }
body.dark .palette-summary span { background: rgba(255,255,255,.04); }
.palette-summary b { color: var(--exam-navy); }
body.exam-running .palette { grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 0; }
body.exam-running .palette button {
  min-height: 39px;
  border-radius: 8px;
  background: #f8fafc;
  border-color: var(--exam-border);
  font-size: .78rem;
}
body.dark.exam-running .palette button { background: rgba(255,255,255,.04); }
body.exam-running .palette button.current { outline: 2px solid rgba(23,105,224,.16); border-color: var(--exam-blue); background: var(--exam-blue-soft); color: var(--exam-blue); }
body.exam-running .palette button.answered { background: #ecfdf3; color: #15803d; border-color: #86efac; }
body.exam-running .palette button.review { background: #f3e8ff; color: #7e22ce; border-color: #d8b4fe; }
body.dark.exam-running .palette button.answered { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.28); }
body.dark.exam-running .palette button.review { background: rgba(168,85,247,.12); color: #d8b4fe; border-color: rgba(168,85,247,.28); }
body.exam-running .legend { grid-template-columns: 1fr 1fr; gap: 7px 10px; padding-top: 13px; border-top: 1px solid var(--exam-border); font-size: .72rem; }
.palette-toggle-btn { display: none; }
.palette-backdrop { display: none; }

body.exam-running .exam-warning-overlay { background: rgba(4,13,28,.78); backdrop-filter: blur(6px); }
body.exam-running .exam-warning-card { max-width: 500px; border-radius: 16px; border-width: 1px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }

@media (max-width: 1120px) {
  body.exam-running .test-topbar { grid-template-columns: minmax(280px,1fr) auto auto; }
  body.exam-running .exam-toolbar-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  body.exam-running .test-topbar { top: 70px; grid-template-columns: minmax(0,1fr) auto; }
  body.exam-running .test-security-controls { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  body.exam-running .exam-clock { grid-column: 2; grid-row: 1; }
  body.exam-running .exam-toolbar-actions { grid-column: 1 / -1; }
  body.exam-running .test-layout { grid-template-columns: 1fr; }
  body.exam-running .palette-card { position: fixed; z-index: 155; left: 14px; right: 14px; bottom: 14px; top: auto; max-height: min(78vh, 720px); overflow: auto; transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; }
  body.exam-running .palette-card.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .palette-close-btn { display: grid; place-items: center; flex: 0 0 auto; }
  .palette-toggle-btn {
    position: fixed;
    z-index: 72;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #b8cff0;
    border-radius: 12px;
    background: #fff;
    color: var(--exam-blue);
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
    font-weight: 900;
    cursor: pointer;
  }
  body.dark .palette-toggle-btn { background: #101b2d; border-color: rgba(255,255,255,.16); }
  .palette-toggle-btn span { padding: 4px 7px; border-radius: 7px; background: var(--exam-blue-soft); font-size: .72rem; }
  .palette-backdrop {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: block;
    background: rgba(2,6,23,.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .palette-backdrop.is-open { opacity: 1; pointer-events: auto; }
  body.palette-open { overflow: hidden; }
}

@media (max-width: 680px) {
  body.exam-running .header-row { min-height: 58px; }
  body.exam-running .brand-logo { width: 38px; height: 38px; }
  body.exam-running .profile-pill { display: inline-flex; padding: 8px 10px; font-size: .78rem; }
  body.exam-running .test-shell { padding-top: 9px; padding-bottom: 88px; }
  body.exam-running .test-topbar { top: 62px; padding: 12px; border-radius: 13px; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .live-status { display: none; }
  body.exam-running .test-title-row > strong { font-size: .9rem; }
  body.exam-running .test-title-block .helper { font-size: .72rem; }
  body.exam-running .exam-clock-label { display: none; }
  body.exam-running .timer-box { min-width: 94px; padding: 9px 10px; font-size: .9rem; }
  body.exam-running .test-security-controls { grid-template-columns: 1fr; gap: 6px; }
  body.exam-running .integrity-status,
  body.exam-running .attempt-policy { min-height: 31px; font-size: .7rem; }
  body.exam-running .exam-toolbar-actions { grid-template-columns: 1fr 1fr; gap: 7px; }
  body.exam-running .exam-toolbar-actions .btn { min-width: 0; padding-inline: 8px; font-size: .74rem; }
  body.exam-running .question-card { min-height: 0; padding: 17px 15px 88px; border-radius: 13px; }
  .question-meta { align-items: flex-start; }
  .question-stats { width: 100%; }
  .question-stats span { flex: 1; min-width: 0; }
  body.exam-running .q-text { font-size: 1.08rem; line-height: 1.52; margin-bottom: 18px; }
  body.exam-running .option { min-height: 58px; padding: 10px 11px; grid-template-columns: 36px minmax(0,1fr); font-size: .9rem; }
  body.exam-running .opt-key { width: 34px; height: 34px; border-radius: 8px; }
  body.exam-running .test-actions {
    position: fixed;
    z-index: 68;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 0;
    padding: 9px 11px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--exam-border);
    background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 24px rgba(15,23,42,.10);
  }
  body.dark.exam-running .test-actions { background: rgba(7,17,31,.97); }
  body.exam-running .test-actions .btn { min-height: 41px; padding: 8px 6px; font-size: .72rem; }
  body.exam-running #markBtn,
  body.exam-running #clearBtn { display: none; }
  .palette-toggle-btn { bottom: 71px; }
  body.exam-running .palette-card { bottom: 70px; left: 8px; right: 8px; padding: 15px; }
  body.exam-running .palette { grid-template-columns: repeat(5,1fr); }
}


/* v2.5: Mobile exam layout — compact, safe-area aware and free from browser-toolbar overlap */
body.exam-page.exam-running .site-nav,
body.exam-page.exam-running .bottom-nav,
body.exam-page.exam-running .mobile-drawer {
  display: none !important;
}

@media (max-width: 680px) {
  html { scroll-padding-top: 12px; }

  body.exam-page.exam-running {
    min-height: 100dvh;
    background: #eef3f8;
    overscroll-behavior-y: contain;
  }

  body.dark.exam-page.exam-running { background: #07111f; }

  /* The website header and bottom navigation are distractions during a live exam. */
  body.exam-page.exam-running .site-header,
  body.exam-page.exam-running .bottom-nav,
  body.exam-page.exam-running .mobile-drawer {
    display: none !important;
  }

  body.exam-page.exam-running .test-shell {
    padding: max(8px, env(safe-area-inset-top)) 0 calc(22px + env(safe-area-inset-bottom));
  }

  body.exam-page.exam-running .container {
    width: calc(100% - 16px);
  }

  /* Compact status console: title, two integrity chips, then timer and submit. */
  body.exam-page.exam-running .test-topbar {
    position: relative;
    top: auto;
    z-index: 50;
    grid-template-columns: minmax(0, 1fr) minmax(118px, .42fr);
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
  }

  body.exam-page.exam-running .test-title-block {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.exam-page.exam-running .test-title-row {
    display: block;
  }

  body.exam-page.exam-running .test-title-row > strong {
    display: block;
    overflow: hidden;
    color: var(--exam-navy);
    font-size: .98rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.exam-page.exam-running .live-status,
  body.exam-page.exam-running .progress-caption,
  body.exam-page.exam-running .exam-clock-label {
    display: none !important;
  }

  body.exam-page.exam-running .test-title-block .helper {
    margin-top: 2px;
    font-size: .72rem;
    line-height: 1.35;
  }

  body.exam-page.exam-running .student-meta {
    color: #15803d;
    font-weight: 850;
  }

  body.exam-page.exam-running .progress-wrap {
    display: block;
    margin-top: 7px;
  }

  body.exam-page.exam-running .progress-wrap .progress-track {
    height: 6px;
  }

  body.exam-page.exam-running .test-security-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
  }

  body.exam-page.exam-running .integrity-status,
  body.exam-page.exam-running .attempt-policy {
    min-width: 0;
    min-height: 34px;
    padding: 7px 6px;
    overflow: hidden;
    border-radius: 9px;
    font-size: .68rem;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.exam-page.exam-running .exam-clock {
    grid-column: 1;
    grid-row: auto;
    display: block;
    min-width: 0;
  }

  body.exam-page.exam-running .timer-box {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 1rem;
  }

  body.exam-page.exam-running .exam-toolbar-actions {
    grid-column: 2;
    display: block;
    min-width: 0;
  }

  /* Mobile Safari does not support document fullscreen reliably. */
  body.exam-page.exam-running #fullscreenBtn {
    display: none !important;
  }

  body.exam-page.exam-running #submitBtn {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: .76rem;
  }

  body.exam-page.exam-running .test-layout {
    display: block;
    margin-top: 9px;
  }

  body.exam-page.exam-running .question-card {
    min-height: 0;
    padding: 15px 13px;
    border-radius: 14px;
  }

  body.exam-page.exam-running .question-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 11px;
  }

  body.exam-page.exam-running .question-meta > div:first-child {
    min-width: 0;
  }

  body.exam-page.exam-running .q-number {
    font-size: .86rem;
  }

  body.exam-page.exam-running .question-instruction {
    display: none;
  }

  body.exam-page.exam-running .question-stats {
    width: auto;
    gap: 5px;
  }

  body.exam-page.exam-running .question-stats span {
    min-width: 0;
    padding: 6px 7px;
    border-radius: 8px;
    font-size: .66rem;
  }

  body.exam-page.exam-running .q-text {
    margin: 2px 0 16px;
    font-size: 1.06rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
  }

  body.exam-page.exam-running .options {
    gap: 9px;
  }

  body.exam-page.exam-running .option {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-height: 54px;
    padding: 9px 10px;
    border-radius: 11px;
    font-size: .9rem;
    line-height: 1.4;
  }

  body.exam-page.exam-running .opt-key {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: .78rem;
  }

  /* Keep every action reachable, but do not pin it over Safari's browser bar. */
  body.exam-page.exam-running .test-actions {
    position: static;
    z-index: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
    padding: 14px 0 0;
    border-top: 1px solid var(--exam-border);
    background: transparent;
    box-shadow: none;
  }

  body.dark.exam-page.exam-running .test-actions { background: transparent; }

  body.exam-page.exam-running .test-actions .btn {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    padding: 8px 7px;
    border-radius: 10px;
    font-size: .7rem;
    line-height: 1.15;
  }

  body.exam-page.exam-running #markBtn,
  body.exam-page.exam-running #clearBtn {
    display: inline-flex;
  }

  /* Palette opens as a true bottom sheet, while its launcher stays in document flow. */
  body.exam-page.exam-running .palette-toggle-btn {
    position: static;
    width: 100%;
    min-height: 42px;
    margin: 9px 0 0;
    justify-content: space-between;
    border-radius: 11px;
    box-shadow: none;
  }

  body.exam-page.exam-running .palette-card {
    position: fixed;
    z-index: 155;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    top: auto;
    max-height: min(76dvh, 620px);
    padding: 14px;
    overflow: auto;
    border-radius: 16px;
    transform: translateY(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
  }

  body.exam-page.exam-running .palette-card.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  body.exam-page.exam-running .palette {
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
  }

  body.exam-page.exam-running .palette button {
    min-height: 42px;
    font-size: .78rem;
  }

  body.exam-page.exam-running .legend {
    grid-template-columns: 1fr 1fr;
  }

  body.exam-page.exam-running .exam-warning-overlay {
    padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
  }

  body.exam-page.exam-running .exam-warning-card {
    max-height: 88dvh;
    padding: 22px 16px;
    overflow: auto;
  }
}

@media (max-width: 390px) {
  body.exam-page.exam-running .test-topbar {
    grid-template-columns: minmax(0, 1fr) 112px;
    padding: 10px;
  }

  body.exam-page.exam-running .test-title-row > strong { font-size: .9rem; }
  body.exam-page.exam-running .integrity-status,
  body.exam-page.exam-running .attempt-policy { font-size: .62rem; }
  body.exam-page.exam-running .question-card { padding: 13px 11px; }
  body.exam-page.exam-running .q-text { font-size: 1rem; }
  body.exam-page.exam-running .question-stats span { padding-inline: 5px; }
}

@media (max-width: 680px) and (orientation: landscape) and (max-height: 520px) {
  body.exam-page.exam-running .test-topbar {
    position: relative;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, .65fr) 110px;
  }

  body.exam-page.exam-running .test-title-block { grid-column: 1; }
  body.exam-page.exam-running .test-security-controls { grid-column: 2; grid-template-columns: 1fr; }
  body.exam-page.exam-running .exam-clock { grid-column: 3; }
  body.exam-page.exam-running .exam-toolbar-actions { grid-column: 3; }
}

/* ================================================================
   Test start notice — v2.6
   The exam timer and integrity monitoring begin only after consent.
   ================================================================ */
body.exam-prestart {
  overflow: hidden;
}

.exam-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5, 15, 35, .72);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.exam-start-overlay[hidden] {
  display: none !important;
}

.exam-start-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.exam-start-card {
  width: min(100%, 720px);
  max-height: min(92dvh, 820px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(148, 163, 184, .36);
  border-top: 5px solid #1677ff;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(2, 8, 23, .34);
  color: #101828;
  transform: translateY(14px) scale(.985);
  transition: transform .22s ease;
  -webkit-overflow-scrolling: touch;
}

.exam-start-overlay.is-open .exam-start-card {
  transform: translateY(0) scale(1);
}

.exam-start-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.exam-start-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #eaf3ff;
  font-size: 1.65rem;
}

.exam-start-heading h2 {
  margin: 3px 0 6px;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.12;
}

.exam-start-heading p {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}

.exam-start-test-name {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #f8fbff;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 850;
}

.exam-start-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.exam-start-facts > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #dce5f0;
  border-radius: 13px;
  background: #fff;
}

.exam-start-facts > div > span {
  grid-row: 1 / 3;
  font-size: 1.35rem;
}

.exam-start-facts strong {
  min-width: 0;
  overflow: hidden;
  color: #0f5ed7;
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exam-start-facts small {
  color: #64748b;
  font-size: .73rem;
  font-weight: 700;
}

.exam-start-student {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #eefbf2;
  color: #166534;
}

.exam-start-student span {
  font-weight: 700;
}

.exam-start-student strong {
  overflow-wrap: anywhere;
  text-align: right;
}

.exam-start-rules {
  margin-top: 17px;
  padding: 16px 18px;
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  background: #fffaf0;
}

.exam-start-rules h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.exam-start-rules ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: #475569;
  font-size: .9rem;
  line-height: 1.45;
}

.exam-start-consent,
.exam-start-fullscreen {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.4;
}

.exam-start-consent:has(input:checked) {
  border-color: #60a5fa;
  background: #eff6ff;
}

.exam-start-consent input,
.exam-start-fullscreen input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #1677ff;
}

.exam-start-fullscreen {
  margin-top: 9px;
  color: #475569;
  font-weight: 650;
}

.exam-start-fullscreen small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-weight: 500;
}

.exam-start-actions {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(220px, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.exam-start-actions .btn {
  min-height: 50px;
}

.exam-start-actions .btn:disabled {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.2);
}

.exam-start-note {
  margin: 11px 0 0;
  color: #64748b;
  font-size: .76rem;
  line-height: 1.45;
  text-align: center;
}

body.dark .exam-start-card {
  border-color: #334155;
  background: #111827;
  color: #f8fafc;
}

body.dark .exam-start-icon,
body.dark .exam-start-test-name,
body.dark .exam-start-facts > div,
body.dark .exam-start-consent,
body.dark .exam-start-fullscreen {
  border-color: #334155;
  background: #172033;
  color: #e5eefc;
}

body.dark .exam-start-heading p,
body.dark .exam-start-facts small,
body.dark .exam-start-rules ul,
body.dark .exam-start-fullscreen,
body.dark .exam-start-fullscreen small,
body.dark .exam-start-note {
  color: #a9b7cb;
}

body.dark .exam-start-test-name { color: #f8fafc; }
body.dark .exam-start-rules { background: #2b2112; }
body.dark .exam-start-consent:has(input:checked) { background: #12233d; }

@media (max-width: 680px) {
  .exam-start-overlay {
    align-items: end;
    padding: max(10px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .exam-start-card {
    width: 100%;
    max-height: 92dvh;
    padding: 18px 14px max(16px, env(safe-area-inset-bottom));
    border-top-width: 4px;
    border-radius: 20px 20px 14px 14px;
  }

  .exam-start-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }

  .exam-start-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.35rem;
  }

  .exam-start-heading h2 {
    margin-top: 1px;
    font-size: 1.4rem;
  }

  .exam-start-heading p {
    font-size: .83rem;
  }

  .exam-start-test-name {
    margin-top: 14px;
    padding: 11px 12px;
    font-size: .94rem;
  }

  .exam-start-facts {
    gap: 7px;
  }

  .exam-start-facts > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 5px;
    text-align: center;
  }

  .exam-start-facts > div > span {
    font-size: 1.12rem;
  }

  .exam-start-facts strong {
    max-width: 100%;
    font-size: .88rem;
  }

  .exam-start-facts small {
    font-size: .62rem;
  }

  .exam-start-student {
    padding: 9px 11px;
    font-size: .84rem;
  }

  .exam-start-rules {
    margin-top: 12px;
    padding: 12px 13px;
  }

  .exam-start-rules h3 { font-size: .92rem; }
  .exam-start-rules ul {
    gap: 5px;
    padding-left: 17px;
    font-size: .76rem;
  }

  .exam-start-consent,
  .exam-start-fullscreen {
    margin-top: 10px;
    padding: 10px;
    font-size: .78rem;
  }

  .exam-start-actions {
    grid-template-columns: .7fr 1.3fr;
    margin-top: 12px;
  }

  .exam-start-actions .btn {
    min-height: 46px;
    padding-inline: 9px;
    font-size: .78rem;
  }

  .exam-start-note {
    margin-top: 8px;
    font-size: .66rem;
  }
}

@media (max-width: 390px) {
  .exam-start-card { padding-inline: 11px; }
  .exam-start-facts strong { font-size: .8rem; }
  .exam-start-actions { grid-template-columns: 1fr; }
  .exam-start-actions .btn-secondary { order: 2; }
}

/* =========================================================
   NextGen Sarkari Icon & Motion System v2.7
   Local SVG icons, subtle exam-focused motion and richer cards
   ========================================================= */
.ngs-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: -0.18em;
}
.ngs-svg-icon { width: 100%; height: 100%; display: block; }
.nav-link .ngs-icon,
.drawer-links .ngs-icon,
.sidebar .ngs-icon { width: 18px; height: 18px; }
.theme-toggle .ngs-icon,
.nav-toggle .ngs-icon,
.profile-pill .ngs-icon { width: 17px; height: 17px; }
.bottom-nav .ngs-icon { width: 22px; height: 22px; stroke-width: 2.15; }
.eyebrow .ngs-icon,
.badge .ngs-icon { width: 16px; height: 16px; }
.icon-card .ngs-icon { width: 27px; height: 27px; stroke-width: 2.05; }
.floating-card .ngs-icon { width: 18px; height: 18px; color: var(--brand); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .36;
  background-image:
    linear-gradient(rgba(11, 99, 246, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 99, 246, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
body.dark::before { opacity: .16; }

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,99,246,.55), rgba(0,183,255,.45), rgba(245,179,1,.5), transparent);
  opacity: .65;
}

.nav-link .ngs-icon,
.sidebar a .ngs-icon,
.drawer-links a .ngs-icon,
.bottom-nav a .ngs-icon {
  transition: transform .2s ease, color .2s ease;
}
.nav-link:hover .ngs-icon,
.nav-link.active .ngs-icon,
.sidebar a:hover .ngs-icon,
.sidebar a.active .ngs-icon { transform: translateY(-1px) scale(1.08); }

.card {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 99, 246, .20);
  box-shadow: 0 20px 42px rgba(15, 23, 42, .13);
}
body.exam-active .card:hover,
body[data-admin-page] .table-wrap .card:hover { transform: none; }

.feature-card,
.admin-action-card,
.metric-card { isolation: isolate; }
.feature-card::before,
.admin-action-card::before,
.metric-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -66px;
  bottom: -78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,99,246,.16), transparent 68%);
  z-index: -1;
  transition: transform .35s ease, opacity .35s ease;
}
.feature-card:hover::before,
.admin-action-card:hover::before,
.metric-card:hover::before { transform: scale(1.22); opacity: .9; }

.icon-card,
.metric-icon {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(11,99,246,.08), 0 10px 24px rgba(11,99,246,.12);
}
.icon-card::after,
.metric-icon::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55), transparent 62%);
  transform: translateX(-55%) rotate(10deg);
  transition: transform .55s ease;
}
.card:hover .icon-card::after,
.metric-card:hover .metric-icon::after { transform: translateX(55%) rotate(10deg); }

.metric-card {
  min-height: 142px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 13px;
  align-items: start;
}
.metric-icon {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: linear-gradient(135deg, rgba(11,99,246,.15), rgba(0,183,255,.12));
}
.metric-icon .ngs-icon { width: 23px; height: 23px; }
.metric-card h3 { margin: 2px 0 6px; font-size: .94rem; color: var(--muted); }
.metric-card .dashboard-big-text { margin: 0; font-size: 2rem; line-height: 1; align-self: end; }
.metric-note { grid-column: 2; margin-top: 7px; color: var(--muted); font-size: .74rem; font-weight: 750; }

.hero-copy { position: relative; z-index: 2; }
.hero-copy::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  left: -110px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,183,255,.13), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hero-actions .btn-primary { position: relative; overflow: hidden; }
.hero-actions .btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -35%;
  width: 28%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
  animation: buttonSheen 4.8s ease-in-out infinite;
}
@keyframes buttonSheen { 0%, 68% { left: -35%; } 88%, 100% { left: 125%; } }

.live-status { box-shadow: 0 0 0 0 rgba(22,163,74,.28); animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.28); } 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

.reveal-ready { opacity: 0; transform: translateY(16px); }
.reveal-ready.is-visible { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.reveal-delay-1.is-visible { transition-delay: .06s; }
.reveal-delay-2.is-visible { transition-delay: .12s; }
.reveal-delay-3.is-visible { transition-delay: .18s; }

.exam-start-facts .ngs-icon,
.integrity-status .ngs-icon,
.attempt-policy .ngs-icon,
.timer-box .ngs-icon,
.exam-warning-icon .ngs-icon,
.exam-start-icon .ngs-icon {
  width: 1.15em;
  height: 1.15em;
}
.exam-warning-icon .ngs-icon { width: 46px; height: 46px; }
.exam-start-icon .ngs-icon { width: 28px; height: 28px; }

@media (max-width: 760px) {
  body::before { background-size: 28px 28px; }
  .card:hover { transform: none; }
  .metric-card { min-height: 118px; grid-template-columns: 40px minmax(0,1fr); padding: 16px; }
  .metric-icon { width: 40px; height: 40px; border-radius: 13px; }
  .metric-icon .ngs-icon { width: 20px; height: 20px; }
  .metric-card .dashboard-big-text { font-size: 1.7rem; }
  .hero-actions .btn-primary::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual::before,
  .floating-card,
  .hero-actions .btn-primary::after,
  .live-status { animation: none !important; }
  .reveal-ready,
  .reveal-ready.is-visible { opacity: 1; transform: none; transition: none; }
  .card, .ngs-icon, .icon-card::after, .metric-icon::after { transition: none !important; }
}

.question-slot > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.question-slot-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: .74rem;
  font-weight: 900;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.55);
}
.question-slot-state.complete {
  color: var(--good);
  border-color: rgba(22,163,74,.22);
  background: rgba(22,163,74,.10);
}
.question-slot-state .ngs-icon { width: 14px; height: 14px; }
body.dark .question-slot-state { background: rgba(255,255,255,.05); }

.btn .ngs-icon { width: 17px; height: 17px; }
.btn-small .ngs-icon { width: 14px; height: 14px; }
.lock-ribbon .ngs-icon { width: 14px; height: 14px; }
.student-result-info .ngs-icon,
.integrity-result-alert .ngs-icon { width: 16px; height: 16px; }

@media (max-width: 520px) {
  .question-slot > summary { align-items: flex-start; }
  .question-slot-state { font-size: .66rem; white-space: nowrap; }
}


/* Privacy, legal and session-state improvements — 2026-07-29 */
html:not([data-session-ready="true"]) [data-logged-out],
html:not([data-session-ready="true"]) [data-student-only] { visibility: hidden; }
.mock-legal-bar {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mock-legal-bar nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mock-legal-bar nav a { display: inline-block; margin: 0; }
.mock-legal-bar p { margin: 10px 0 0; font-size: .82rem; line-height: 1.55; }
.mock-legal-bar strong { color: var(--ink); }
.student-privacy-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 16px 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--muted);
  line-height: 1.55;
  font-size: .88rem;
}
.student-privacy-consent:has(input:checked) { border-color: rgba(14,165,233,.48); background: rgba(14,165,233,.08); }
.student-privacy-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: #0284c7; }
.student-privacy-consent a, .privacy-note a { font-weight: 800; text-decoration: underline; }
.exam-legal-links {
  max-width: 1120px;
  margin: 18px auto 36px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  color: var(--muted);
  font-size: .8rem;
}
.exam-legal-links a { font-weight: 800; }
.exam-legal-links span { flex-basis: 100%; text-align: center; }
body.exam-running .exam-legal-links { display: none; }
.mock-independence-notice { padding: 0 0 8px; }
.mock-independence-notice .container {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  color: var(--muted);
  line-height: 1.55;
}
.mock-independence-notice strong { color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) {
  .mock-independence-notice .container { grid-template-columns: 1fr; gap: 5px; margin: 0 14px; width: auto; }
  .mock-independence-notice strong { white-space: normal; }
  .exam-legal-links { justify-content: flex-start; }
  .exam-legal-links span { text-align: left; }
}