:root {
  --ink: #172139;
  --muted: #667085;
  --cream: #f7f2e8;
  --paper: #fffdf9;
  --line: #e7dfd1;
  --navy: #172139;
  --navy-2: #24375d;
  --saffron: #e79a32;
  --saffron-soft: #fff0d4;
  --green: #326a57;
  --green-soft: #e2f0ea;
  --danger: #a83d3d;
  --white: #ffffff;
  --shadow: 0 18px 55px rgba(23, 33, 57, 0.09);
  --radius: 22px;
}

.sr-only {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

.announcement {
  width: 100%;
  min-height: 36px;
  padding: 8px 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: white;
  background: var(--navy);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.announcement span {
  min-width: 0;
}

.announcement button {
  padding: 0;
  color: #ffd894;
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 700;
}

.site-header {
  width: 100%;
  height: 78px;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 253, 249, 0.94);
  border-bottom: 1px solid rgba(231, 223, 209, 0.75);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px 13px 13px 4px;
  color: white;
  background: var(--navy);
  font-family: "Libre Caslon Display", serif;
  font-size: 17px;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: "Libre Caslon Display", serif;
  font-size: 21px;
  line-height: 1;
}

.brand small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 34px);
}

.mobile-account { display: none; }

.main-nav a {
  padding: 28px 0 25px;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
}

.main-nav a.active,
.main-nav a:hover {
  color: #a75b18;
  border-bottom-color: var(--saffron);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.button {
  min-height: 43px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: white;
  background: var(--navy);
  box-shadow: 0 10px 22px rgba(23, 33, 57, 0.17);
}

.button-primary:hover {
  background: var(--navy-2);
}

.button-accent {
  color: #27180a;
  background: var(--saffron);
  box-shadow: 0 10px 22px rgba(231, 154, 50, 0.2);
}

.button-ghost {
  background: transparent;
  border-color: var(--line);
}

.button-danger {
  color: white;
  background: var(--danger);
}

.menu-toggle {
  display: none;
}

main {
  min-height: 70vh;
}

.page {
  animation: page-in 280ms ease both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(7px); }
}

.hero {
  min-height: 610px;
  padding: 76px 5vw 64px;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
  gap: 5vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 24%, rgba(231, 154, 50, 0.2), transparent 22%),
    linear-gradient(132deg, #f8f3e9 0%, #fffdf9 58%, #f3eadb 100%);
}

.eyebrow {
  margin: 0 0 16px;
  color: #9a571f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1,
.page-hero h1,
.section-heading h2 {
  margin: 0;
  font-family: "Libre Caslon Display", serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(47px, 5.5vw, 78px);
  line-height: 0.99;
}

.hero h1 em {
  color: #a25c25;
  font-style: normal;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 635px;
  margin: 24px 0 30px;
  color: #536078;
  font-size: 18px;
  line-height: 1.7;
}

.hero-copy,
.hero-visual {
  min-width: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-trust {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  color: #49566b;
  font-size: 13px;
  font-weight: 600;
}

.hero-trust span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 9px;
  display: inline-block;
  border-radius: 50%;
  background: var(--green);
}

.hero-visual {
  min-height: 450px;
  position: relative;
}

.study-card {
  width: min(100%, 480px);
  margin: 28px auto 0;
  padding: 30px;
  position: relative;
  z-index: 2;
  color: white;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), transparent 42%),
    var(--navy);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 30px;
  box-shadow: 0 35px 70px rgba(23, 33, 57, 0.26);
  transform: rotate(1.5deg);
}

.study-card::after {
  content: "§";
  position: absolute;
  right: 22px;
  bottom: -18px;
  color: rgba(255, 255, 255, 0.07);
  font-family: Georgia, serif;
  font-size: 190px;
}

.study-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d7dfed;
  font-size: 12px;
}

.status-pill,
.tag {
  padding: 7px 10px;
  display: inline-block;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.status-pill {
  color: #25180a;
  background: #f5bb63;
}

.study-card h3 {
  max-width: 330px;
  margin: 26px 0 12px;
  font-family: "Libre Caslon Display", serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 1.15;
}

.study-card > p {
  max-width: 330px;
  color: #bcc7d9;
  line-height: 1.6;
}

.progress-label {
  margin-top: 34px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.progress-track {
  height: 8px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
}

.progress-track span {
  width: 72%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--saffron);
}

.floating-stat {
  padding: 18px 21px;
  position: absolute;
  z-index: 4;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.floating-stat strong,
.floating-stat small {
  display: block;
}

.floating-stat strong {
  font-size: 23px;
}

.floating-stat small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.floating-stat.one {
  left: -2%;
  bottom: 35px;
  transform: rotate(-4deg);
}

.floating-stat.two {
  right: -1%;
  top: 4px;
  transform: rotate(4deg);
}

.section {
  padding: 82px 5vw;
}

.section-soft {
  background: var(--cream);
}

.section-dark {
  color: white;
  background: var(--navy);
}

.section-heading {
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}

.section-heading h2 {
  font-size: clamp(35px, 4vw, 52px);
}

.section-heading p {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.section-dark .section-heading p {
  color: #b6c0d0;
}

.text-link {
  padding: 0;
  color: #99551d;
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 800;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.category-card {
  min-height: 230px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.category-card:hover,
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.category-icon {
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  background: var(--navy);
  font-family: "Libre Caslon Display", serif;
  font-size: 20px;
}

.category-card[data-tone="saffron"] .category-icon { background: #ad6726; }
.category-card[data-tone="green"] .category-icon { background: var(--green); }
.category-card[data-tone="plum"] .category-icon { background: #714a6e; }
.category-card[data-tone="blue"] .category-icon { background: #315d8a; }

.category-card h3 {
  margin: 36px 0 8px;
  font-size: 18px;
}

.category-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.category-card > span:last-child {
  margin-top: 20px;
  color: #9a571f;
  font-size: 12px;
  font-weight: 800;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.product-card {
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.product-art {
  height: 145px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  color: white;
  background: var(--product-accent);
}

.product-art::before,
.product-art::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
}

.product-art::before {
  width: 155px;
  height: 155px;
  right: -45px;
  top: -64px;
}

.product-art::after {
  width: 95px;
  height: 95px;
  right: 30px;
  bottom: -62px;
}

.product-art strong {
  max-width: 190px;
  display: block;
  position: relative;
  z-index: 1;
  font-family: "Libre Caslon Display", serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.15;
}

.product-body {
  padding: 20px;
}

.product-body h3 {
  margin: 13px 0 7px;
  font-size: 17px;
}

.product-body > p {
  min-height: 40px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.tag {
  color: #74400e;
  background: var(--saffron-soft);
}

.rating {
  margin-top: 15px;
  color: #7b8595;
  font-size: 12px;
}

.rating strong {
  color: #925413;
}

.price-row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.price strong {
  font-size: 22px;
}

.price s {
  margin-left: 6px;
  color: #9299a5;
  font-size: 12px;
}

.price-row .button {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 12px;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 22px;
}

.feature {
  padding: 28px;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.feature:last-child {
  border: 0;
}

.feature strong {
  display: block;
  font-size: 16px;
}

.feature p {
  margin: 8px 0 0;
  color: #b6c0d0;
  font-size: 13px;
  line-height: 1.55;
}

.page-hero {
  padding: 68px 5vw 48px;
  background: linear-gradient(135deg, var(--cream), #fffdf9);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  max-width: 800px;
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.05;
}

.page-hero > p:not(.eyebrow) {
  max-width: 700px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.exam-layout,
.dashboard-layout,
.admin-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
}

.filter-panel,
.dashboard-sidebar,
.admin-sidebar {
  align-self: start;
  padding: 20px;
  position: sticky;
  top: 100px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.filter-panel strong,
.dashboard-sidebar strong,
.admin-sidebar strong {
  margin-bottom: 15px;
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.filter-button,
.side-link {
  width: 100%;
  padding: 11px 12px;
  display: flex;
  justify-content: space-between;
  color: #586478;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

.filter-button.active,
.side-link.active,
.filter-button:hover,
.side-link:hover {
  color: var(--ink);
  background: var(--cream);
}

.exam-list {
  display: grid;
  gap: 18px;
}

.exam-group-card,
.surface-card {
  padding: 26px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.exam-group-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.exam-group-head h2 {
  margin: 0 0 8px;
  font-family: "Libre Caslon Display", serif;
  font-size: 30px;
  font-weight: 400;
}

.exam-group-head p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.exam-links {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.exam-chip {
  padding: 9px 12px;
  color: #3c4a61;
  background: #f8f5ef;
  border: 1px solid #ebe3d6;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.toolbar {
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.search-input,
.select-input,
.form-input,
.form-textarea {
  padding: 12px 14px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
}

.search-input {
  width: min(100%, 480px);
}

.search-input:focus,
.select-input:focus,
.form-input:focus,
.form-textarea:focus {
  border-color: #c58a4b;
  box-shadow: 0 0 0 3px rgba(231, 154, 50, 0.13);
}

.document-list,
.result-list {
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.document-row,
.result-row {
  padding: 17px 20px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
}

.document-row:last-child,
.result-row:last-child {
  border-bottom: 0;
}

.doc-icon {
  width: 40px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #8d4a32;
  background: #f8e7df;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
}

.document-row h3,
.result-row h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.document-row p,
.result-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.test-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.test-type-card {
  padding: 30px;
  color: white;
  background: var(--navy);
  border-radius: 22px;
}

.test-type-card:nth-child(2) {
  color: var(--ink);
  background: var(--saffron-soft);
}

.test-type-card .number {
  color: rgba(255,255,255,0.25);
  font-family: "Libre Caslon Display", serif;
  font-size: 54px;
}

.test-type-card:nth-child(2) .number {
  color: rgba(85,45,10,0.18);
}

.test-type-card h2 {
  margin: 18px 0 10px;
  font-family: "Libre Caslon Display", serif;
  font-size: 30px;
  font-weight: 400;
}

.test-type-card p {
  min-height: 66px;
  color: #bec7d6;
  line-height: 1.6;
}

.test-type-card:nth-child(2) p {
  color: #6f5a46;
}

.test-card-list {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.access-summary {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.access-summary h2,
.access-summary p { margin: 4px 0; }

.admin-load-warning {
  margin-bottom: 20px;
  padding: 16px 18px;
  color: #7a321d;
  background: #fff0e9;
  border: 1px solid #e9b49f;
  border-radius: 12px;
}

.admin-load-warning p { margin: 6px 0; }

.test-listing {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.test-listing h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.test-listing p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.pill-row {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  padding: 2px 9px;
  display: inline-block;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pill-free {
  color: var(--green);
  background: var(--green-soft);
}

.pill-attempted {
  color: var(--navy-2);
  background: #e8edf7;
}

.pill-live {
  color: #8c2f2f;
  background: #fbe4e1;
}

.pill-live::before {
  content: "\25cf";
  margin-right: 4px;
}

.pill-upcoming {
  color: #8a5a12;
  background: var(--saffron-soft);
}

.pill-closed {
  color: var(--muted);
  background: #eceef2;
}

.test-listing .card-note {
  margin-top: 4px;
  font-size: 11px;
}

.test-listing .button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.test-shell {
  min-height: calc(100vh - 114px);
  background: #f5f2eb;
}

.test-header {
  padding: 15px 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  color: white;
  background: var(--navy);
}

.test-header h1 {
  margin: 0 0 4px;
  font-size: 16px;
}

.test-header p {
  margin: 0;
  color: #b7c1d1;
  font-size: 11px;
}

.timer {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.test-layout {
  padding: 28px 4vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 24px;
}

.question-panel {
  min-height: 520px;
  padding: 30px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 19px;
}

.question-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.question-panel h2 {
  max-width: 850px;
  margin: 28px 0;
  font-family: "Libre Caslon Display", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
}

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

.option {
  width: 100%;
  padding: 15px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}

.option:hover {
  border-color: #c8b9a3;
}

.option.selected {
  background: #fff7e8;
  border-color: var(--saffron);
}

.option-letter {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3efe8;
  font-size: 12px;
  font-weight: 800;
}

.option.selected .option-letter {
  color: white;
  background: #b86e25;
}

.question-actions {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.question-nav {
  padding: 22px;
  align-self: start;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.question-nav h3 {
  margin: 0 0 16px;
  font-size: 14px;
}

.question-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.question-number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #f4f1eb;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.question-number.answered {
  color: white;
  background: var(--green);
}

.question-number.current {
  border-color: var(--saffron);
}

.legend {
  margin-top: 20px;
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
}

.legend i {
  width: 10px;
  height: 10px;
  margin-right: 7px;
  display: inline-block;
  border-radius: 3px;
  background: #f4f1eb;
}

.legend .answered-key { background: var(--green); }
.legend .current-key { background: var(--saffron); }

.dashboard-sidebar .profile {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.avatar {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--navy);
  border-radius: 50%;
  font-weight: 800;
}

.profile h3,
.profile p {
  margin: 0;
}

.profile p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.stat-grid {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stat-card {
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.stat-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.stat-card strong {
  margin-top: 8px;
  display: block;
  font-size: 26px;
}

.result-row {
  grid-template-columns: minmax(0, 1fr) 90px 90px 100px;
}

.score-pill {
  padding: 8px 10px;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.analysis-summary {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 22px;
}

.score-ring {
  width: 190px;
  height: 190px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--green) var(--score-angle), #e8e5de 0);
}

.score-ring::before {
  content: "";
  width: 150px;
  height: 150px;
  position: absolute;
  background: white;
  border-radius: 50%;
}

.score-ring span {
  position: relative;
  z-index: 1;
  text-align: center;
}

.score-ring strong,
.score-ring small {
  display: block;
}

.score-ring strong {
  font-size: 32px;
}

.score-ring small {
  color: var(--muted);
  font-size: 11px;
}

.review-list {
  display: grid;
  gap: 15px;
}

.review-card {
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-left: 5px solid #c74a4a;
  border-radius: 14px;
}

.review-card.correct {
  border-left-color: var(--green);
}

.review-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
}

.review-card p {
  margin: 7px 0 0;
  color: #596579;
  font-size: 13px;
  line-height: 1.55;
}

.review-card .explanation {
  margin-top: 14px;
  padding: 13px;
  background: #f7f5f0;
  border-radius: 10px;
}

.review-actions {
  margin-top: 14px;
}

.admin-sidebar {
  color: white;
  background: var(--navy);
  border-color: var(--navy);
}

.admin-sidebar .side-link {
  color: #c4cddd;
}

.admin-sidebar .side-link.active,
.admin-sidebar .side-link:hover {
  color: white;
  background: rgba(255,255,255,0.1);
}

.admin-section-picker { display: none; }
.admin-layout > div { min-width: 0; }

.admin-topbar {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.admin-topbar h1 {
  margin: 0;
  font-family: "Libre Caslon Display", serif;
  font-size: 34px;
  font-weight: 400;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  overflow-wrap: anywhere;
}

.admin-table th {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editor-toolbar,
.question-picker-tools {
  margin: 18px 0;
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(150px, 1fr) minmax(170px, 1fr);
  gap: 10px;
  align-items: center;
}

.editor-toolbar.single-search { grid-template-columns: minmax(260px, 560px); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-secondary { margin-top: 30px; }
.admin-secondary summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.danger-text { color: #a53d25; }
.editor-warning { padding: 12px 14px; color: #70421f; background: #fff5de; border: 1px solid #e8c986; border-radius: 10px; }
.workflow-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.workflow-strip span { padding: 10px; color: var(--muted); background: #eef0f3; border-radius: 8px; text-align: center; }
.workflow-strip .done { color: #1f654d; background: #e3f4ec; }
.question-preview h3 { font-size: 20px; line-height: 1.5; }
.question-preview li { margin: 10px 0; padding: 8px; }
.question-preview .correct-option { color: #165a43; background: #e5f5ed; border-radius: 8px; }
.modal-sticky-actions { padding-top: 12px; position: sticky; bottom: 0; background: white; border-top: 1px solid var(--line); }

.status {
  padding: 6px 9px;
  display: inline-block;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.status.published,
.status.resolved {
  color: #245b48;
  background: var(--green-soft);
}

.status.draft,
.status.open {
  color: #86520e;
  background: var(--saffron-soft);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
}

.principles {
  display: grid;
  gap: 12px;
}

.principle {
  padding: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.principle strong {
  display: block;
  margin-bottom: 6px;
}

.principle p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.empty-state {
  padding: 55px 20px;
  text-align: center;
  color: var(--muted);
}

.modal-backdrop {
  padding: 20px;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(14, 22, 39, 0.68);
}

.modal {
  width: min(100%, 500px);
  max-height: 90vh;
  padding: 28px;
  overflow-x: hidden;
  overflow-y: auto;
  background: white;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.24);
}

.modal .form-input,
.modal .form-textarea,
.modal select,
.modal input,
.modal textarea { max-width: 100%; min-width: 0; }
.modal-head > div { min-width: 0; }
.modal-head h2, .modal-head p { overflow-wrap: anywhere; }

.modal.modal-wide {
  width: min(920px, calc(100vw - 40px));
}

.question-manager-modal {
  padding: 0;
  overflow: hidden;
}

.question-manager-modal .modal-head {
  padding: 26px 30px 18px;
  border-bottom: 1px solid var(--line);
}

.question-manager-modal .modal-head .form-note { margin: 5px 0 0; }

.question-manager {
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
  max-height: calc(90vh - 126px);
  min-width: 0;
}

.question-manager .question-picker-tools {
  margin: 0;
  padding: 18px 30px 14px;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 230px) auto;
}

.question-manager .question-picker-tools label { min-width: 0; }
.question-manager .question-picker-tools .form-input { width: 100%; min-width: 0; }
.selection-count { padding: 9px 12px; white-space: nowrap; color: #245b48; background: var(--green-soft); border-radius: 999px; text-align: center; }

.picker-list-heading {
  padding: 0 30px 10px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}
.picker-list-heading strong { color: var(--ink); font-size: 14px; }

.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.modal h2 {
  margin: 0;
  font-family: "Libre Caslon Display", serif;
  font-size: 31px;
  font-weight: 400;
}

.modal-close {
  width: 34px;
  height: 34px;
  background: #f3f0ea;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.modal > p {
  color: var(--muted);
  line-height: 1.6;
}

.question-picker {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 30px;
}

.question-picker legend {
  font-weight: 700;
  padding: 0 6px;
}

#test-questions-form .question-picker label {
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 4px;
  min-width: 0;
  cursor: pointer;
}

.question-picker label:last-child { border-bottom: 0; }
.question-picker input { width: 18px; height: 18px; margin: 2px 0 0; }
.question-picker span { min-width: 0; display: grid; gap: 3px; }
.question-picker span strong { line-height: 1.45; overflow-wrap: anywhere; }
.question-picker small { color: var(--muted); }
.question-picker .question-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.question-manager .modal-sticky-actions {
  padding: 14px 30px;
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 -8px 20px rgba(14, 22, 39, 0.05);
}
.question-manager .modal-sticky-actions p { margin: 0; display: grid; gap: 3px; }
.question-manager .modal-sticky-actions small { color: var(--muted); }
.question-manager .modal-sticky-actions > div { display: flex; gap: 10px; flex-shrink: 0; }

.import-errors {
  background: #fff4f2;
  border: 1px solid #e4b5ae;
  border-radius: 12px;
  color: #702a20;
  max-height: 48vh;
  overflow: auto;
  padding: 16px;
}

.import-errors > div { border-top: 1px solid #e4b5ae; padding: 10px 0; }
.import-errors ul { margin: 6px 0 0; }

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.form-textarea {
  min-height: 110px;
  resize: vertical;
}

.form-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.toast {
  min-width: 270px;
  padding: 14px 17px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  color: white;
  background: var(--navy);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 13px;
  animation: toast-in 200ms ease both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
}

.site-footer {
  padding: 55px 5vw;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
  color: #c6cede;
  background: #111a2d;
  font-size: 13px;
}

.footer-brand {
  color: white;
}

.site-footer p {
  max-width: 330px;
  line-height: 1.6;
}

.site-footer > div:not(:first-child) {
  display: grid;
  align-content: start;
  gap: 12px;
}

.site-footer > div > strong {
  margin-bottom: 4px;
  color: white;
}

.site-footer a:hover {
  color: white;
}

@media (max-width: 1120px) {
  .main-nav {
    gap: 15px;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { padding: 16px; position: static; }
  .admin-sidebar > strong,
  .admin-sidebar > .side-link { display: none; }
  .admin-section-picker { display: grid; gap: 7px; color: white; font-size: 12px; font-weight: 700; }
  .admin-section-picker .form-input { width: 100%; }
  .admin-table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (max-width: 820px) {
  .filter-bar { grid-template-columns: 1fr; }
  .editor-toolbar,
  .question-picker-tools { grid-template-columns: 1fr; }
  .question-manager-modal { width: 100%; max-height: calc(100dvh - 16px); }
  .question-manager-modal .modal-head { padding: 20px 18px 14px; }
  .question-manager { max-height: calc(100dvh - 112px); }
  .question-manager .question-picker-tools { padding: 14px 18px 10px; grid-template-columns: 1fr; }
  .selection-count { justify-self: start; }
  .picker-list-heading { padding: 2px 18px 10px; }
  .question-picker { padding: 0 18px; }
  .question-manager .modal-sticky-actions { padding: 12px 18px; align-items: stretch; flex-direction: column; }
  .question-manager .modal-sticky-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 4px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .menu-toggle span {
    width: 20px;
    height: 2px;
    display: block;
    background: var(--ink);
  }

  .main-nav {
    padding: 16px 5vw;
    display: none;
    position: absolute;
    top: 77px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .main-nav.open {
    display: grid;
  }

  .main-nav .mobile-account {
    padding: 11px 0;
    display: block;
    text-align: left;
  }

  .main-nav a {
    padding: 11px 0;
  }

  .header-actions {
    display: none;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 410px;
  }

  .category-grid,
  .feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature:nth-child(2) {
    border-right: 0;
  }

  .feature:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  .exam-layout,
  .dashboard-layout,
  .admin-layout,
  .analysis-summary,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .filter-panel,
  .dashboard-sidebar,
  .admin-sidebar {
    position: static;
  }

  .filter-panel {
    display: flex;
    overflow-x: auto;
  }

  .filter-panel strong {
    display: none;
  }

  .filter-button {
    width: auto;
    white-space: nowrap;
  }

  .test-layout {
    grid-template-columns: 1fr;
  }

  .question-nav {
    grid-row: 1;
  }

  .question-map {
    grid-template-columns: repeat(10, 1fr);
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .modal-backdrop { padding: 8px; }
  .modal { width: 100%; max-height: calc(100dvh - 16px); padding: 20px; border-radius: 16px; }
  .modal.question-manager-modal { padding: 0; }
  .modal h2 { font-size: 27px; }
  .modal-head { gap: 12px; }
  .modal-close { flex: 0 0 34px; }
  .admin-topbar { align-items: stretch; flex-direction: column; }
  .admin-topbar .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-topbar .hero-actions .button { width: 100%; }
  .surface-card { padding: 18px; border-radius: 14px; }
  .editor-toolbar { margin: 14px 0; }
  .workflow-strip { grid-template-columns: 1fr; }
  .toast { min-width: 0; left: 12px; right: 12px; bottom: 12px; }
  .access-summary { align-items: stretch; flex-direction: column; }
  .announcement {
    gap: 8px;
    justify-content: space-between;
    font-size: 11px;
  }

  .announcement span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .announcement button {
    flex: 0 0 auto;
  }

  .site-header {
    height: 70px;
  }

  .brand small {
    display: none;
  }

  .hero,
  .section,
  .page-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    padding-top: 54px;
  }

  .hero h1 {
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: 42px;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-visual {
    min-height: 360px;
  }

  .study-card {
    width: calc(100% - 12px);
    padding: 23px;
  }

  .floating-stat.one {
    left: 4px;
  }

  .floating-stat.two {
    right: 4px;
  }

  .category-grid,
  .product-grid,
  .test-type-grid,
  .feature-strip,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .feature {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .toolbar {
    flex-direction: column;
  }

  .search-input,
  .select-input {
    width: 100%;
  }

  .document-row {
    grid-template-columns: 40px 1fr auto;
  }

  .document-row > span {
    display: none;
  }

  .test-listing {
    align-items: start;
    flex-direction: column;
  }

  .test-layout {
    padding: 18px 12px;
  }

  .question-panel {
    padding: 20px;
  }

  .question-panel h2 {
    font-size: 23px;
  }

  .question-map {
    grid-template-columns: repeat(5, 1fr);
  }

  .result-row {
    grid-template-columns: 1fr auto;
  }

  .result-row > span:not(.score-pill) {
    display: none;
  }

  .admin-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .admin-table td:first-child { min-width: 190px; white-space: normal; }

  .site-footer {
    grid-template-columns: 1fr;
  }
}

/* Previous-year papers carry their year as a badge so the catalogue can be scanned by year. */
.year-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(232, 164, 58, 0.16);
  color: #8a5b11;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Per-topic breakdown on the result page. Replaces a hardcoded paragraph that claimed the
   same "strongest area" for every student on every test. */
.insight-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.insight-table td { padding: 7px 0; font-size: 14px; color: var(--muted); vertical-align: middle; }
.insight-table td:first-child { color: var(--ink, #172139); font-weight: 500; padding-right: 14px; }
.insight-score { white-space: nowrap; padding-right: 14px !important; font-variant-numeric: tabular-nums; }
.insight-bar { width: 45%; }
.insight-bar span {
  display: block; height: 7px; border-radius: 999px;
  background: linear-gradient(90deg, #e8a43a, #c8873a); min-width: 2px;
}
.insight-pct { text-align: right; width: 48px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .insight-bar { display: none; } }

/* Marked-for-review state in the question palette and its control. */
.question-number.marked { background: #6d4aa6; border-color: #6d4aa6; color: #fff; }
.question-number.marked.answered { background: #6d4aa6; }
.question-number.marked.current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e8a43a; }
.legend .marked-key { background: #6d4aa6; }
.button.is-marked { border-color: #6d4aa6; color: #6d4aa6; }

/* Makes a floored score explicable: "6 x 1 - 34 x 0.25 = -2.5 (floored to 0)". */
.marks-line {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Timer turns urgent for the last five minutes. */
#test-timer.is-low { background: #b3261e; color: #fff; border-color: #b3261e; }

/* ---------------------------------------------------------------------------
   Test player on a phone.

   Three problems, found by auditing at 360px — the width of the budget Android
   most candidates in this market actually use:

   1. .question-actions is a flex row that does not wrap. Adding "Clear response"
      and "Mark for review" put four buttons in it, whose combined min-content is
      465px, and a flex item will not shrink below min-content. That forced the
      whole grid column — and with it the viewport — to 477px on a 360px screen.
   2. .question-nav was pinned to grid-row 1 below 900px, so the palette filled
      the entire first screen and the question itself sat below the fold.
   3. A fixed five-column palette overflowed, putting questions 5, 10, 15 and 20
      off-screen where they could not be tapped at all.
   --------------------------------------------------------------------------- */

.question-actions {
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  /* The question is what the candidate came for; the palette is navigation. */
  .question-nav {
    grid-row: auto;
  }
  .question-map {
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  }
}

@media (max-width: 640px) {
  .question-actions button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    white-space: nowrap;
  }
  /* Never wider than the screen, and never so small it cannot be tapped. */
  .question-map {
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    gap: 6px;
  }
  .question-number {
    font-size: 13px;
  }
  .test-header .button,
  .test-header button {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  /* The title, clock and submit button competed for one row and pushed the submit
     button off the right edge. Let the title take its own line and keep the two
     controls together underneath, where both stay fully tappable. */
  .test-header {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .test-header > :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  .test-header h1 {
    font-size: 15px;
  }
}

@media (max-width: 900px) {
  /* Exam group filters become a horizontal strip below 900px (`width: auto` plus
     `white-space: nowrap`), but .filter-panel neither wrapped nor scrolled — so the
     later groups ran past its edge with no way to reach them. On a phone that meant
     APO, AIBE and CLAT could not be selected at all. The strip now scrolls. */
  .filter-panel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .filter-panel::-webkit-scrollbar { display: none; }
  .filter-button {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* Invitation to keep a guest result by creating an account. */
.claim-card {
  border: 1px solid rgba(232, 164, 58, 0.45);
  background: linear-gradient(180deg, rgba(232, 164, 58, 0.07), transparent 70%);
}
.claim-card .hero-actions,
.claim-card .button + .button { margin-left: 8px; }
@media (max-width: 640px) {
  .claim-card .button { display: block; width: 100%; margin: 8px 0 0; }
}

/* An examination with nothing published yet says so, rather than leading to an empty page. */
.exam-chip.is-empty { opacity: 0.62; }
.exam-chip .chip-note {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #8a5b11;
  background: rgba(232, 164, 58, 0.16);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Standing on the result page: a reason to take the paper again. */
.standing-line {
  margin: 4px 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(62, 123, 100, 0.10);
  color: #245b48;
  font-size: 14px;
}

/* Tells a candidate on a bad connection that their answers are not reaching the server.
   Answers survive in memory and are resent on submission, so this is a warning, not an
   error — but silence was worse. */
.timer-group { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#save-state {
  font-size: 11px;
  letter-spacing: 0.02em;
  min-height: 13px;
  color: transparent;
}
#save-state.is-unsaved { color: #ffb4a8; }

/* Import preview: lead with how many rows share each problem, keep the row-by-row list
   available but collapsed. A real paper produces the same complaint on every row. */
.import-summary { margin: 4px 0 18px; }
.import-summary h3 { margin: 0 0 10px; font-size: 15px; }
.import-summary .admin-table td { vertical-align: top; padding: 9px 10px; }
.import-count {
  width: 54px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #9a3412;
  background: rgba(154, 52, 18, 0.08);
  border-radius: 8px;
  text-align: center;
}
.import-errors-details { margin-bottom: 16px; }
.import-errors-details summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0; }
.import-errors-details .import-errors { max-height: 320px; overflow-y: auto; margin-top: 10px; }

/* Plain-language legal summaries: readable lists rather than a wall of prose. */
.legal-body h2 { font-size: 17px; margin: 22px 0 10px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body ul { margin: 0 0 6px; padding-left: 20px; color: var(--muted); line-height: 1.75; }
.legal-body li { margin: 6px 0; }
.legal-body li strong { color: var(--ink, #172139); }

/* Paging for the question bank, which is no longer loaded in full. */
.table-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}
.table-pager .button { padding: 8px 16px; }

/* Choosing which tests a pack includes, rather than typing their ids. */
.pack-tests { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; }
.pack-tests legend { padding: 0 6px; font-size: 13px; color: var(--muted); }
.pack-test { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.pack-test input { margin-top: 3px; }
.pack-test small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Subjects and their topics, so a content operator can open up a new area of the syllabus. */
.taxonomy-group { border-top: 1px solid var(--line); padding: 14px 0; }
.taxonomy-group:first-of-type { border-top: 0; }
.taxonomy-subject { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.taxonomy-subject strong { font-size: 15px; }
.taxonomy-subject small { color: var(--muted); font-size: 13px; }
.taxonomy-topics { list-style: none; margin: 10px 0 0; padding: 0 0 0 18px; }
.taxonomy-topics li { display: flex; align-items: center; gap: 12px; padding: 5px 0; color: var(--muted); font-size: 14px; }
.taxonomy-empty { margin: 8px 0 0 18px; }

/* First-load states. The database scales to zero, so a cold start is the normal first
   visit of the day and must not look like a broken page. */
.boot-state { padding: 90px 20px; text-align: center; }
.boot-state h2 { margin: 0 0 10px; }
.boot-state p { color: var(--muted); margin: 0 auto 20px; max-width: 420px; }
.boot-spinner {
  width: 28px; height: 28px; margin: 0 auto 22px;
  border: 3px solid rgba(23, 33, 57, 0.12);
  border-top-color: #e8a43a;
  border-radius: 50%;
  animation: boot-spin 0.9s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spinner { animation-duration: 3s; } }

/* Recent form and per-paper bests, so a candidate can see whether they are improving
   rather than only a lifetime average that flattens it. */
.stat-card small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.stat-card small.is-up { color: #2f7d5b; }
.stat-card small.is-down { color: #a8452f; }
.best-by-test { margin: 0 0 22px; }
.best-by-test h3 { font-size: 15px; margin: 0 0 10px; }
.best-by-test ul { list-style: none; margin: 0; padding: 0; }
.best-by-test li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.best-by-test li span { color: var(--muted); }
.best-by-test li strong { font-variant-numeric: tabular-nums; }