/* PrepHub theme: "the reference shelf".
   Every quiz is a cloth-bound book in its subject's colour, set in a bookish serif with a gilt rule.
   Everything around the covers stays quiet: paper, ink and hairlines.
   Loaded after the original stylesheets, which stay unchanged. */

@font-face {
  font-family: 'PH Literata';
  src: url('../fonts/literata-latin-opsz-normal.woff2') format('woff2-variations'), url('../fonts/literata-latin-opsz-normal.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PH Literata';
  src: url('../fonts/literata-latin-opsz-italic.woff2') format('woff2-variations'), url('../fonts/literata-latin-opsz-italic.woff2') format('woff2');
  font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PH Sans';
  src: url('../fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PH Sans';
  src: url('../fonts/dm-sans-latin-wght-italic.woff2') format('woff2-variations'), url('../fonts/dm-sans-latin-wght-italic.woff2') format('woff2');
  font-weight: 100 1000; font-style: italic; font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --bg: #f4f5f8;          /* paper */
  --surface: #ffffff;     /* sheet */
  --text: #1c1a33;        /* ink */
  --muted: #5c6077;       /* pencil: 5.9:1 on white */
  --faint: #8a8ea3;       /* hints and icons only */
  --border: #e2e4ec;      /* rule */
  --purple: #4b3ac4;      /* violet: links and actions */
  --purple-hover: #3c2da8;
  --soft: #eeebfa;
  --gilt: #e3c27e;
  --serif: 'PH Literata', 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'PH Sans', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cloth:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 4px);
}
body.dark {
  --bg: #11131e;
  --surface: #191c2a;
  --text: #ecebf5;
  --muted: #a6a9bf;
  --faint: #7c8098;
  --border: #2a2d40;
  --purple: #ab9fff;
  --purple-hover: #c4bbff;
  --soft: #262246;
  --gilt: #d6b56f;
}

/* ---------------------------------------------------------------- base type */
body { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .brand { font-family: var(--sans); }
h1, .section-heading h2, .block-title, .hero-copy h2, .daily-card h2, .panel-heading h2, .start-panel h2,
.detail-cover h2, .question-illustration h2, .feature-panel h2, .result-banner h2, .affairs-panel h3,
.cover-caption, .book-front strong, .empty-state h3, .empty-page h2, .front-card h2, .auth-art h2, .soft-note h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.btn:focus-visible { box-shadow: none; }
.nav-count, .plan-time, .plan-number, .timer-pill, .score-ring strong, .result-stats strong { font-variant-numeric: tabular-nums; }

/* Arrows appended to links and buttons are dropped: the words say where they go. */
.text-link > .bi-arrow-right, .text-link > .bi-arrow-up-right, .primary-btn > .bi-arrow-right, .test-start > .bi { display: none; }
.text-link > .bi-arrow-left { display: inline-block; margin-right: 4px; }

/* ---------------------------------------------------------------- sidebar and top bar */
.brand { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; height: 76px; }
.brand-mark { background: var(--purple); border-radius: 9px; width: 32px; height: 32px; font-size: 18px; }
.brand-dot { background: var(--gilt); }
.nav-caption { font-size: 12px; letter-spacing: 0; font-weight: 600; color: var(--faint); text-transform: none; margin-bottom: 6px; }
.side-nav { gap: 2px; }
.side-nav a { font-size: 14px; padding: 9px 12px; gap: 11px; color: var(--muted); border-radius: 8px; font-weight: 500; min-height: 40px; }
.side-nav a i { font-size: 17px; color: var(--faint); }
.side-nav a:hover { background: var(--bg); color: var(--text); }
.side-nav a:hover i { color: var(--text); }
.side-nav a.active { background: var(--soft); color: var(--purple); font-weight: 600; box-shadow: inset 3px 0 0 var(--purple); }
.side-nav a.active i { color: var(--purple); }
.nav-count { font-size: 12px; color: var(--muted); border-color: var(--border); border-radius: 6px; padding: 0 6px; }
.nav-dot { background: var(--gilt); }
.sidebar-footer { font-size: 12.5px; color: var(--muted); }
.topbar { height: 72px; }
.search-box { font-size: 13px; border-radius: 9px; }
.search-box input { font-size: 13.5px; }
.icon-button { border-radius: 9px; color: var(--muted); }
.avatar { background: var(--soft); color: var(--purple); outline-color: var(--border); }
.breadcrumb-line, .crumbs { font-size: 13px; }

/* ---------------------------------------------------------------- page headings */
.page-heading { margin-bottom: 28px; align-items: flex-end; }
h1 { font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 8px; }
.inner-heading h1 { font-size: 32px; line-height: 1.2; }
.page-heading p, .inner-heading p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.page-heading .eyebrow, .inner-heading .eyebrow, .hero-label, .wave { display: none; }
.eyebrow { font-size: 12.5px; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.eyebrow > span { display: none; }
.exam-switch { background: var(--bg); border-color: var(--border); border-radius: 10px; }
.exam-switch button { font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 16px; border-radius: 7px; }
.exam-switch button.selected { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

/* ---------------------------------------------------------------- buttons and links */
.text-link { font-size: 13.5px; font-weight: 600; color: var(--purple); }
.text-link:hover { color: var(--purple-hover); text-decoration: underline; text-underline-offset: 3px; }
.primary-btn, .hero-button { background: var(--purple); border: 1px solid var(--purple); color: #fff; font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 9px; box-shadow: none; }
.primary-btn:hover, .primary-btn:focus, .hero-button:hover { background: var(--purple-hover); border-color: var(--purple-hover); color: #fff; }
body.dark .primary-btn, body.dark .hero-button { color: #15132b; }
.secondary-btn { font-size: 14px; padding: 10px 16px; border-radius: 9px; color: var(--text); }
.secondary-btn:hover { border-color: var(--purple); color: var(--purple); }
.small-label { font-size: 13px; color: var(--muted); }
.tag-pill { font-size: 12.5px; border-radius: 999px; padding: 3px 11px; }

/* ---------------------------------------------------------------- cover system
   --hue (the subject's ink colour from the admin panel) is turned into a deep cloth tone with the same hue,
   so every subject keeps its colour but gains depth. Older browsers get the light colours instead. */
.test-cover, .detail-cover, .question-illustration, .feature-panel, .daily-card, .daily-feature, .auth-art, .article-art {
  --cover: var(--wash, #eee9f7);
  --cover-deep: var(--wash, #eee9f7);
  --print: var(--text);
  background-color: var(--cover);
  color: var(--print);
}
@supports (color: oklch(from red l c h)) {
  .test-cover, .detail-cover, .question-illustration, .feature-panel, .daily-card, .daily-feature, .auth-art, .article-art {
    --cover: oklch(from var(--hue, #8b73b5) 0.37 min(calc(c * 1.3), 0.095) h);
    --cover-deep: oklch(from var(--hue, #8b73b5) 0.3 min(calc(c * 1.2), 0.085) h);
    --print: oklch(from var(--hue, #8b73b5) 0.96 0.025 h);
    --print-soft: oklch(from var(--hue, #8b73b5) 0.86 0.05 h);
    background-image: var(--cloth);
  }
  body.dark .test-cover, body.dark .detail-cover, body.dark .question-illustration, body.dark .feature-panel, body.dark .daily-card, body.dark .daily-feature, body.dark .auth-art, body.dark .article-art {
    --cover: oklch(from var(--hue, #8b73b5) 0.33 min(calc(c * 1.2), 0.09) h);
    --cover-deep: oklch(from var(--hue, #8b73b5) 0.27 min(calc(c * 1.1), 0.08) h);
  }
}
body.dark .test-cover, body.dark .detail-cover, body.dark .question-illustration, body.dark .feature-panel,
body.dark .hero-banner, body.dark .daily-card, .dark .article-art, .dark .auth-art { filter: none; }

/* ---------------------------------------------------------------- quiz cards */
.test-grid { gap: 18px; }
.test-card { position: relative; border-radius: 14px; border-color: var(--border); background: var(--surface); transition: border-color .15s; }
.test-card:hover { border-color: color-mix(in oklab, var(--purple) 40%, var(--border)); box-shadow: none; }
.test-card:focus-within { border-color: var(--purple); }
.test-cover { height: 152px; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 22px 20px 40px; isolation: auto; }
.catalog-grid .test-cover { height: 152px; }
/* the spine: a darker band with two gilt bands, like a hardbound book */
.test-cover::before, .detail-cover::before, .question-illustration::before, .feature-panel::before, .daily-card::before, .daily-feature::before, .auth-art::before, .article-art::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 16px; height: auto; border: 0; border-radius: 0; opacity: 1;
  background:
    linear-gradient(to bottom, transparent 16px, var(--gilt) 16px 17px, transparent 17px 20px, var(--gilt) 20px 21px, transparent 21px calc(100% - 21px), var(--gilt) calc(100% - 21px) calc(100% - 20px), transparent calc(100% - 20px) calc(100% - 17px), var(--gilt) calc(100% - 17px) calc(100% - 16px), transparent calc(100% - 16px)),
    var(--cover-deep);
  box-shadow: inset -1px 0 0 rgb(255 255 255 / .08), 1px 0 0 rgb(0 0 0 / .18);
  left: 0; right: auto; top: 0; bottom: 0; transform: none; z-index: 0;
}
@supports not (color: oklch(from red l c h)) {
  .test-cover::before, .detail-cover::before, .question-illustration::before, .feature-panel::before, .daily-card::before { opacity: .5; }
}
.test-cover::after { content: none; }
.test-cover > .bi { position: absolute; right: -14px; bottom: -26px; font-size: 118px; line-height: 1; opacity: .13; transform: rotate(-6deg); color: var(--print); z-index: 0; }
.cover-caption { position: relative; z-index: 1; margin: 0; max-width: 78%; font-size: 23px; font-weight: 500; line-height: 1.16; letter-spacing: -0.012em; color: var(--print); }
.catalog-grid .cover-caption { font-size: 23px; }
.cover-caption small { font-family: var(--sans); font-size: 12px; letter-spacing: .01em; font-weight: 500; margin-bottom: 7px; opacity: 1; color: var(--print-soft, var(--print)); }
.test-badge { left: 40px; top: 16px; font-size: 11.5px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: transparent; color: var(--print); border: 1px solid color-mix(in oklab, var(--print) 38%, transparent); z-index: 1; }
.save-button { top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px; font-size: 14px; color: var(--print); background: color-mix(in oklab, var(--print) 10%, transparent); border: 1px solid color-mix(in oklab, var(--print) 30%, transparent); z-index: 3; }
.save-button:hover { background: color-mix(in oklab, var(--print) 20%, transparent); color: var(--print); }
.save-button.saved { background: var(--print); color: var(--cover); border-color: var(--print); }
.test-body { padding: 18px 20px 16px; }
.catalog-grid .test-body { padding: 18px 20px 16px; }
.test-category, .catalog-grid .test-category { display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.exam-chip { font-size: 11.5px; font-weight: 600; color: var(--purple); background: var(--soft); border-radius: 999px; padding: 1px 8px; }
.test-body h3, .catalog-grid .test-body h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin: 6px 0 10px; }
.test-body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 14px; }
.test-body h3 a:focus-visible { outline: none; }
.test-body h3 a:focus-visible::after { outline: 2px solid var(--purple); outline-offset: 2px; }
.test-meta, .catalog-grid .test-meta { font-size: 13px; gap: 16px; color: var(--muted); }
.test-meta i { color: var(--faint); margin-right: 5px; }
.test-bottom { margin-top: 16px; padding-top: 13px; }
.difficulty, .catalog-grid .difficulty { font-size: 13px; color: var(--muted); gap: 8px; }
.difficulty::before { content: none; }
.difficulty.medium { color: var(--muted); }
.level-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.level-bars i { width: 4px; border-radius: 1px; background: var(--border); }
.level-bars i:nth-child(1) { height: 6px; }
.level-bars i:nth-child(2) { height: 9px; }
.level-bars i:nth-child(3) { height: 12px; }
.level-1 .level-bars i:nth-child(-n+1), .level-2 .level-bars i:nth-child(-n+2), .level-3 .level-bars i:nth-child(-n+3) { background: var(--text); }
.test-start, .catalog-grid .test-start { font-size: 13.5px; color: var(--purple); font-weight: 600; }
.test-card:hover .test-start { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- home */
.hero-banner { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; min-height: 320px; }
.hero-copy { padding: 44px 44px 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero-copy h2 { font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px; }
.hero-copy h2 em { color: inherit; font-style: normal; }
.hero-copy p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; max-width: 46ch; }
.hero-footnote { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.hero-footnote i { color: var(--purple); }
/* ruled notebook paper behind the books, with the red margin line of an Indian exercise book */
.hero-art { background:
  linear-gradient(to right, transparent 46px, rgb(214 92 92 / .35) 46px 47px, transparent 47px),
  repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in oklab, var(--purple) 12%, transparent) 27px 28px);
  border-left: 1px solid var(--border); }
.orbit, .spark, .tag-top { display: none; }
.book { box-shadow: 10px 18px 26px rgb(28 26 51 / .18); border-radius: 3px 8px 8px 3px; }
.book-back { background-color: #7c5320; background-image: var(--cloth); border-right-color: #efe1c4; }
.book-middle { background-color: #24584b; background-image: var(--cloth); border-right-color: #e3eee8; }
.book-front { background-color: #3d3184; background-image: var(--cloth); color: #f1eadb; border-left: 9px solid #2b2364; border-right-color: #ece7f7; }
.book-front small { font-size: 9.5px; letter-spacing: .02em; color: var(--gilt); }
.book-front strong { font-size: 26px; font-weight: 500; line-height: 1.1; color: #f6f1e6; }
.book-line { background: var(--gilt); width: 36px; }
.book-front > span { font-size: 8.5px; letter-spacing: .02em; color: #d9cfee; }
.floating-tag { font-size: 12.5px; color: var(--muted); border-color: var(--border); background: var(--surface); box-shadow: 0 8px 20px rgb(28 26 51 / .08); }
.floating-tag small { font-size: 11.5px; }
.quick-stats { padding: 24px 0; }
.quick-stats strong { font-size: 14px; font-weight: 600; color: var(--text); }
.quick-stats div div > span { font-size: 13px; color: var(--muted); }
.stat-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 18px; }
.stat-icon.lilac { background: #eeebfa; color: #4b3ac4; }
.stat-icon.mint { background: #e3f1ea; color: #1d6a4e; }
.stat-icon.peach { background: #f7ecdf; color: #8b5013; }
body.dark .stat-icon.lilac { background: #262246; color: #b9afff; }
body.dark .stat-icon.mint { background: #18302a; color: #8fd1b3; }
body.dark .stat-icon.peach { background: #33261a; color: #e7b77c; }
.section-heading { margin-bottom: 18px; align-items: flex-end; }
.section-heading h2 { font-size: 25px; font-weight: 600; line-height: 1.2; margin: 0 0 6px; }
.section-heading p { font-size: 14px; color: var(--muted); }
.section-block { margin-top: 34px; }
.subject-card { border-radius: 14px; padding: 18px 16px 16px; transition: border-color .15s; }
.subject-card:hover, .subject-card.selected { transform: none; box-shadow: none; border-color: color-mix(in oklab, var(--purple) 40%, var(--border)); }
.subject-card > .bi-arrow-up-right { display: none; }
.subject-card strong { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.subject-card small { font-size: 13px; color: var(--muted); }
.subject-symbol { width: 42px; height: 42px; border-radius: 11px; font-size: 19px; margin-bottom: 16px; background: var(--wash, var(--soft)); color: var(--hue, var(--purple)); }
@supports (color: oklch(from red l c h)) {
  .subject-symbol { background: oklch(from var(--hue, #8b73b5) 0.95 0.03 h); color: oklch(from var(--hue, #8b73b5) 0.42 calc(c * 1.35) h); }
  body.dark .subject-symbol { background: oklch(from var(--hue, #8b73b5) 0.3 calc(c * .8) h); color: oklch(from var(--hue, #8b73b5) 0.86 0.06 h); }
}
.subject-card-foot { font-size: 13.5px; font-weight: 600; }
.filter-row { gap: 8px; margin-bottom: 20px; }
.filter-row button { font-size: 13px; padding: 7px 15px; border-radius: 999px; color: var(--muted); border-color: var(--border); background: var(--surface); }
.filter-row button:hover { color: var(--text); border-color: color-mix(in oklab, var(--text) 25%, var(--border)); }
.filter-row button.active, body.dark .filter-row button.active { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 600; }

/* the Daily Five: a special edition on the shelf */
.daily-card { --hue: #7a64c9; position: relative; overflow: hidden; border: 0; border-radius: 16px; padding: 24px 24px 20px 40px; }
.daily-top { font-size: 13px; letter-spacing: 0; color: var(--print-soft, var(--print)); font-weight: 500; }
.daily-top > span > i { color: var(--gilt); }
.live-pill { font-size: 11.5px; letter-spacing: 0; color: var(--print); border-color: color-mix(in oklab, var(--print) 35%, transparent); border-radius: 999px; padding: 1px 9px; }
.daily-card h2 { font-size: 29px; font-weight: 500; line-height: 1.12; color: var(--print); margin: 22px 0 12px; }
.daily-card > p { font-size: 14px; line-height: 1.6; color: var(--print-soft, var(--print)); }
.daily-meta { font-size: 13px; color: var(--print-soft, var(--print)); }
.daily-button { background: var(--print); border-color: var(--print); color: var(--cover-deep); font-size: 14px; font-weight: 600; padding: 11px 14px; justify-content: center; border-radius: 9px; }
.daily-button:hover, .daily-button:focus { background: #fff; border-color: #fff; color: var(--cover-deep); }
.daily-bottom { font-size: 12.5px; color: var(--print-soft, var(--print)); }
.right-column > * + * { margin-top: 18px; }
.panel { border-radius: 14px; padding: 22px; }
.panel-heading h2 { font-size: 18px; font-weight: 600; line-height: 1.25; }
.panel-heading > i { color: var(--faint); font-size: 16px; }
.panel-subtitle { font-size: 13.5px; color: var(--muted); }
.plan-item strong { font-size: 14px; font-weight: 600; }
.plan-item p { font-size: 13px; color: var(--muted); }
.plan-number { font-size: 12px; font-weight: 600; color: var(--purple); background: var(--soft); width: 30px; height: 30px; border-radius: 8px; }
.plan-time { font-size: 12.5px; color: var(--muted); }
.plan-note { font-size: 12.5px; color: var(--muted); }
.plan-note a { color: var(--purple); font-weight: 600; }
.affairs-panel, body.dark .affairs-panel { background: var(--surface); }
.reading-label { font-size: 12.5px; letter-spacing: 0; color: var(--muted); font-weight: 600; margin: 18px 0 8px; }
.affairs-panel h3, body.dark .affairs-panel h3 { font-size: 22px; font-weight: 500; line-height: 1.2; color: var(--text); }
.affairs-panel > p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.affairs-panel .text-link { color: var(--purple); }

/* ---------------------------------------------------------------- test details and subject pages */
.detail-cover { position: relative; border-radius: 16px; padding: 36px 40px 36px 56px; min-height: 280px; }
.detail-cover h2 { font-size: 38px; font-weight: 500; line-height: 1.1; color: var(--print); margin-top: 20px; position: relative; }
.detail-cover > .bi { position: relative; font-size: 120px; opacity: .2; transform: rotate(-6deg); color: var(--print); }
.detail-cover .tag-pill, .feature-panel .tag-pill { background: transparent; color: var(--print); border-color: color-mix(in oklab, var(--print) 38%, transparent); position: relative; }
.detail-cover .tag-chip { background: color-mix(in oklab, var(--print) 12%, transparent); color: var(--print); border-color: color-mix(in oklab, var(--print) 30%, transparent); position: relative; z-index: 1; }
.feature-panel { position: relative; overflow: hidden; border-radius: 16px; padding: 32px 36px 32px 56px; }
.feature-panel > .bi { position: relative; opacity: .22; color: var(--print); }
.feature-panel h2 { font-size: 30px; font-weight: 500; line-height: 1.15; color: var(--print); margin-top: 14px; }
.block-title { font-size: 23px; font-weight: 600; }
.start-panel h2 { font-size: 25px; font-weight: 600; line-height: 1.2; margin: 4px 0 22px; }
.start-panel dl > div { font-size: 14px; padding: 11px 0; }
.start-note { font-size: 13px; color: var(--muted); }
.body-copy, .instruction-list { font-size: 15px; line-height: 1.65; color: var(--muted); }
.instruction-list li { margin-bottom: 8px; }
.subject-card-foot { color: var(--purple); }

/* ---------------------------------------------------------------- practice session: an OMR sheet */
.timer-pill { font-size: 18px; color: var(--text); border-radius: 12px; }
.quiz-topline { font-size: 13.5px; }
.quiz-progress { height: 6px; border-radius: 999px; }
.quiz-progress > span { background: var(--purple); }
.question-card { border-radius: 16px; }
.question-illustration { border-radius: 12px; padding: 28px 28px 28px 44px; }
.question-illustration > .bi { position: relative; font-size: 84px; opacity: .2; margin-bottom: 36px; color: var(--print); }
.question-illustration > span { position: relative; font-size: 12.5px; letter-spacing: 0; color: var(--print-soft, var(--print)); font-weight: 500; }
.question-illustration h2 { position: relative; font-size: 30px; font-weight: 500; line-height: 1.14; color: var(--print); margin: 10px 0 22px; }
.question-illustration > small { position: relative; font-size: 12.5px; letter-spacing: 0; color: var(--print-soft, var(--print)); }
.question-orbit { display: none; }
.question-label { font-size: 13px; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.question-content > h2 { font-size: 22px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; }
.answer-option { border-radius: 11px; padding: 14px 16px; gap: 14px; transition: border-color .15s, background-color .15s; }
.answer-option:hover { border-color: color-mix(in oklab, var(--text) 30%, var(--border)); }
.answer-option > span { width: 30px; height: 30px; background: transparent; border: 1.5px solid color-mix(in oklab, var(--text) 45%, transparent); color: var(--text); font-size: 13px; font-weight: 600; transition: background-color .15s, color .15s; }
.answer-option > strong { font-size: 15px; font-weight: 500; }
.answer-option > .bi { display: none; }
/* a chosen answer is a filled bubble, as on the OMR answer sheet */
.answer-option.chosen, .answer-option:has(input:checked) { border-color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--text); }
.answer-option.chosen > span, .answer-option:has(input:checked) > span { background: var(--text); border-color: var(--text); color: var(--surface); }
.answer-option:has(input:focus-visible) { outline: 2px solid var(--purple); outline-offset: 2px; }
.quiz-actions .btn, .quiz-actions .text-link { font-size: 14px; }
.quiz-actions .btn { padding: 10px 16px; }
.quiz-hint { font-size: 14px; border-radius: 11px; }
.session-note { font-size: 13px; color: var(--muted); }
.palette-grid button { font-size: 13px; border-radius: 8px; }
.palette-grid button.answered, .legend-dot.answered { background: var(--text); border-color: var(--text); color: var(--surface); }
.palette-grid button.marked, .legend-dot.marked { background: #fbefd7; border-color: #e5c78a; color: #7a4f05; }
body.dark .palette-grid button.marked, body.dark .legend-dot.marked { background: #3a2f17; border-color: #8a6a2b; color: #f0d29a; }
.question-palette { font-size: 13px; }

/* ---------------------------------------------------------------- results */
.result-banner { background: var(--surface); border-radius: 16px; }
.result-banner h2 { font-size: 28px; font-weight: 600; line-height: 1.2; }
.result-banner p { font-size: 15px; }
.score-ring { background: conic-gradient(var(--purple) var(--score), var(--border) 0); }
.score-ring strong { color: var(--text); font-family: var(--serif); font-weight: 600; }
.score-ring span, .score-ring small { font-size: 13px; }
.result-stats > div { border-radius: 14px; }
.result-stats strong { font-size: 22px; }
.result-stats > div > span:last-child { font-size: 13px; }

/* ---------------------------------------------------------------- shared inner pages */
.front-card { border-radius: 14px; }
.front-card p { font-size: 14px; line-height: 1.65; }
.front-card h3 { font-size: 16px; }
.front-icon { background: var(--soft); color: var(--purple); }
.demo-label { font-size: 12.5px; color: var(--purple); }
.front-form label { font-size: 14px; }
.front-form .field-help { font-size: 13px; }
.front-form .form-control, .front-form .form-select, .front-toolbar .form-control { font-size: 14px; border-radius: 9px; }
.empty-state p, .empty-page p { font-size: 14px; color: var(--muted); }
.page-footer, .site-footer { font-size: 13px; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1199px) {
  .hero-copy h2 { font-size: 38px; }
}
@media (max-width: 700px) {
  h1, .inner-heading h1 { font-size: 26px; }
  .hero-copy { padding: 28px 22px; }
  .hero-copy h2 { font-size: 31px; }
  .section-heading h2 { font-size: 22px; }
  .test-cover, .catalog-grid .test-cover { height: 140px; padding: 0 18px 18px 36px; }
  .cover-caption, .catalog-grid .cover-caption { font-size: 21px; max-width: 84%; }
  .test-badge { left: 36px; }
  .test-body, .catalog-grid .test-body { padding: 16px 16px 14px; }
  .detail-cover { padding: 26px 24px 26px 40px; min-height: 220px; }
  .detail-cover h2 { font-size: 29px; }
  .feature-panel { padding: 24px 22px 24px 40px; }
  .feature-panel h2 { font-size: 24px; }
  .daily-card { padding: 22px 20px 18px 36px; }
  .question-content > h2 { font-size: 19px; }
  .answer-option > strong { font-size: 14.5px; }
  .quiz-actions .btn, .quiz-actions .text-link { font-size: 13.5px; }
  .result-banner h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .test-card, .subject-card, .answer-option, .answer-option > span { transition: none; }
}

/* ---------------------------------------------------------------- question navigator and tags */
.question-palette .panel-heading h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.palette-grid button { height: 36px; font-size: 13px; }
.palette-grid button.current { outline: 2px solid var(--purple); outline-offset: 2px; }
.palette-legend { font-size: 12.5px; gap: 10px; }
.legend-dot { width: 12px; height: 12px; }
.palette-summary strong { font-size: 24px; color: var(--text); font-family: var(--serif); }
.palette-summary > span { font-size: 13px; }
.question-palette .primary-btn { font-size: 14px; }
.tag-chip { font-size: 12.5px; font-weight: 500; padding: 3px 11px; }
.quiz-header .small-label, .quiz-head .small-label { font-size: 13px; }

/* ---------------------------------------------------------------- subject page */
.topic-list li { font-size: 14px; color: var(--text); gap: 14px; }
.topic-list span { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.soft-note { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); }
.soft-note > .bi { color: var(--gilt); }
.soft-note h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--text); }
.soft-note p { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------------------------------------------------------------- results review */
.result-banner .eyebrow { display: block; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.review-number { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.review-card { border-radius: 14px; }
.review-card summary strong { font-size: 15px; line-height: 1.5; }
.answer-status { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.answer-status.correct { color: #1d6a4e; background: #e3f1ea; }
.answer-status.incorrect { color: #9b2c2c; background: #fbe9e7; }
.answer-status.skipped { color: var(--muted); background: var(--bg); }
.dark .answer-status.correct { color: #8fd1b3; }
.dark .answer-status.incorrect { color: #f0a49c; }
.dark .answer-status.skipped { color: var(--muted); }
.review-options > div { font-size: 14.5px; color: var(--text); border-radius: 10px; padding: 11px 14px; }
.review-options > div > span:first-child { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--text) 35%, transparent); font-size: 12px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.review-options .right-answer { border-color: #9ccbb3; background: #eef7f2; color: #14503a; }
.review-options .right-answer > span:first-child { background: #1d6a4e; border-color: #1d6a4e; color: #fff; }
.review-options .wrong-answer { border-color: #e7b3ad; background: #fcf0ee; color: #7d2222; }
.review-options .wrong-answer > span:first-child { background: #9b2c2c; border-color: #9b2c2c; color: #fff; }
.dark .review-options .right-answer { color: #b9e5cf; }
.dark .review-options .wrong-answer { color: #f3c0ba; }
.explanation { border-radius: 12px; border-left: 3px solid var(--gilt); }
.explanation strong { font-size: 13.5px; color: var(--text); }
.explanation p { font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.pass-badge { font-size: 13px; }
.review-grid a { font-size: 13px; border-radius: 8px; }
.review-grid a.answered { background: var(--text); border-color: var(--text); color: var(--surface); }
.review-grid a.marked, body.dark .review-grid a.marked { background: #fbefd7; border-color: #e5c78a; color: #7a4f05; }
body.dark .review-grid a.answered { background: var(--text); border-color: var(--text); color: var(--surface); }
.team-badge, .nav-soon { font-size: 11px; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: 1px 8px; }

/* ---------------------------------------------------------------- the Daily Five page */
.daily-feature, .dark .daily-feature { border: 0; border-radius: 18px; padding: 44px 44px 40px 64px; }
.daily-feature-label { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--print-soft, var(--print)); }
.daily-feature-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gilt); }
.daily-feature h2 { font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--print); margin-top: 18px; }
.daily-feature > p { position: relative; font-size: 15.5px; line-height: 1.6; color: var(--print-soft, var(--print)); max-width: 46ch; }
.daily-feature-icon { color: var(--print); opacity: .1; }
.daily-feature-meta .tag-pill { background: transparent; color: var(--print); border-color: color-mix(in oklab, var(--print) 38%, transparent); position: relative; }
.daily-feature .primary-btn { position: relative; background: var(--print); border-color: var(--print); color: var(--cover-deep); }
.daily-feature .primary-btn:hover, .daily-feature .primary-btn:focus { background: #fff; border-color: #fff; color: var(--cover-deep); }
.daily-feature > small { position: relative; font-size: 13px; line-height: 1.6; color: var(--print-soft, var(--print)); max-width: 52ch; }
@media (max-width: 700px) {
  .daily-feature, .dark .daily-feature { padding: 28px 22px 26px 40px; }
  .daily-feature h2 { font-size: 34px; }
}

/* ---------------------------------------------------------------- leaderboard and community */
.competition-tabs a, .competition-tabs button { font-size: 13px; padding: 7px 15px; border-radius: 999px; }
.competition-tabs a.active, .competition-tabs button.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.competition-tabs a:hover { color: var(--text); }
.notice-banner { background: var(--surface); color: var(--muted); font-size: 13.5px; line-height: 1.6; border-radius: 12px; border-left: 3px solid var(--gilt); }
.notice-banner > .bi { color: var(--faint); }
.podium-card { border-radius: 14px; }
.podium-card.winner { background: var(--surface); border-color: color-mix(in oklab, var(--gilt) 70%, var(--border)); box-shadow: inset 0 3px 0 var(--gilt); }
.podium-avatar { background: var(--soft); color: var(--purple); }
.podium-avatar > span { background: var(--gilt); color: #3a2a06; }
.podium-card h3 { font-size: 15px; font-weight: 600; }
.podium-card p { font-size: 13px; }
.podium-card strong { color: var(--text); font-family: var(--serif); font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; }
.front-table { font-size: 14px; }
.front-table th { font-size: 12.5px; letter-spacing: 0; font-weight: 600; text-transform: none; }
.front-table td { font-variant-numeric: tabular-nums; }
.small-avatar { background: var(--soft); color: var(--purple); font-size: 12px; font-weight: 600; }
.discussion-row { border-radius: 14px; }
.discussion-row h2 { font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.discussion-row p { font-size: 14px; line-height: 1.6; }
.discussion-info { font-size: 12.5px; }
.discussion-count { font-size: 13px; color: var(--muted); }
.front-small { font-size: 13px; line-height: 1.6; }
.front-empty { border-radius: 14px; }
.front-empty > .bi { color: var(--faint); }
.front-empty p { font-size: 14px; }
.pager .btn { font-size: 13.5px; }
.post-actions, .post-actions .link-button { font-size: 13px; }
.profile-tabs a { font-size: 13.5px; }

/* ---------------------------------------------------------------- sign-in, reading guides, profile */
.auth-art, .dark .auth-art { --hue: #7a64c9; position: relative; overflow: hidden; padding-left: 56px; }
.auth-art > .bi { position: relative; color: var(--gilt); font-size: 44px; }
.auth-art h2 { position: relative; font-size: 38px; font-weight: 500; line-height: 1.1; color: var(--print); }
.auth-art p { position: relative; font-size: 15px; line-height: 1.6; color: var(--print-soft, var(--print)); }
.auth-art .text-link { position: relative; color: var(--print); }
.auth-content h1 { font-size: 32px; }
.auth-content > p { font-size: 15px; color: var(--muted); }
.article-art { position: relative; overflow: hidden; align-items: flex-start; padding: 0 24px 22px 40px; justify-content: flex-end; }
.article-art.art-0 { --hue: #9b86c3; }
.article-art.art-1 { --hue: #82a894; }
.article-art.art-2 { --hue: #c5934a; }
.article-art .bi { position: absolute; right: -10px; bottom: -22px; font-size: 120px; opacity: .14; color: var(--print); }
.article-art span { position: relative; font-family: var(--serif); font-size: 19px; letter-spacing: 0; font-weight: 500; color: var(--print); }
.article-card { border-radius: 14px; }
.article-card-body .eyebrow { font-size: 12.5px; letter-spacing: 0; }
.article-card-body h2 { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.25; }
.article-card-body p { font-size: 14px; line-height: 1.6; }
.article-card-body .text-link { font-size: 13.5px; }
.profile-hero, .dark .profile-hero { background: var(--surface); border-color: var(--border); border-radius: 16px; }
.profile-cover-decoration { display: none; }
.profile-back span { font-size: 12.5px; letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- account menu (top bar avatar) */
.account-menu { position: relative; }
button.avatar { padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
button.avatar:hover, .account-menu .show > .avatar, button.avatar[aria-expanded="true"] { outline-color: var(--purple); }
button.avatar:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
a.avatar .bi { font-size: 15px; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
button.avatar:has(> img) { overflow: hidden; }
.account-dropdown {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: 14px;
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--bg);
  --bs-dropdown-link-active-color: var(--purple);
  --bs-dropdown-link-active-bg: var(--soft);
  --bs-dropdown-divider-bg: var(--border);
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-item-padding-x: 12px;
  --bs-dropdown-item-padding-y: 9px;
  min-width: 260px; padding: 6px; font-size: 14px;
  box-shadow: 0 14px 36px rgb(28 26 51 / .12), 0 2px 6px rgb(28 26 51 / .06);
}
body.dark .account-dropdown { box-shadow: 0 14px 36px rgb(0 0 0 / .45); }
.account-dropdown .dropdown-item { display: flex; align-items: center; gap: 11px; border-radius: 9px; font-weight: 500; }
.account-dropdown .dropdown-item > .bi { font-size: 16px; color: var(--faint); width: 18px; text-align: center; }
.account-dropdown .dropdown-item:hover > .bi, .account-dropdown .dropdown-item.active > .bi { color: inherit; }
.account-dropdown .dropdown-item.active { font-weight: 600; }
.account-dropdown .dropdown-divider { margin: 6px 4px; }
.account-dropdown form { margin: 0; }
.account-signout { width: 100%; text-align: left; border: 0; background: transparent; }
.account-signout:hover { color: #9b2c2c; }
body.dark .account-signout:hover { color: #f0a49c; }
.account-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 6px; }
.account-head .avatar { width: 38px; height: 38px; flex-shrink: 0; outline: 0; border: 0; font-size: 14px; }
.account-head strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.account-head small { display: block; font-size: 12.5px; color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .account-dropdown.show { animation: account-open .14s ease-out; }
  @keyframes account-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}