body, html {
  overflow-x: hidden;
  width: 100%
}

.subject-card-glow, .topic-pagination .is-current {
  pointer-events: none
}

.breadcrumb-bar li, .qnum, .sr-only {
  white-space: nowrap
}

.footer-links a, .footer-socials a, .og-preview-link, .question-tags a, .tag-alphabet a, .tag-alphabet span, .tag-directory-link, a, a.meta-chip {
  text-decoration: none
}

@font-face {
  font-family: "Anek Devanagari";
  src: url("fonts/AnekDevanagari-Devanagari-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Latin-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
  --bg: #eef7fb;
  --surface: #ffffff;
  --ink: #101820;
  --muted: #536170;
  --line: #d6e8ee;
  --primary: #080f1c;
  --secondary: #18bfd6;
  --accent: #fff200;
  --success: #11c78d;
  --danger: #f74556;
  --radius: 5px;
  --shadow: 0 12px 28px rgba(8, 15, 28, .08)
}

html[data-theme=dark] {
  --bg: #05080d;
  --surface: #0b111b;
  --ink: #f2fbff;
  --muted: #a9bbc7;
  --line: rgba(24, 191, 214, .24);
  --primary: #18bfd6;
  --secondary: #45e3f2;
  --accent: #fff200;
  --success: #34d399;
  --danger: #fb7185;
  --shadow: 0 18px 42px rgba(0, 0, 0, .35)
}

html[data-color-theme=royal-blue] {
  --primary: #080f1c;
  --secondary: #18bfd6;
  --accent: #fff200
}

html[data-color-theme=emerald-gold] {
  --primary: #047857;
  --secondary: #10b981;
  --accent: #f59e0b
}

html[data-color-theme=ruby-rose] {
  --primary: #be123c;
  --secondary: #e11d48;
  --accent: #f59e0b
}

html[data-color-theme=sapphire] {
  --primary: #1d4ed8;
  --secondary: #2563eb;
  --accent: #38bdf8
}

html[data-color-theme=amethyst] {
  --primary: #7c3aed;
  --secondary: #a855f7;
  --accent: #f472b6
}

html[data-color-theme=teal-luxe] {
  --primary: #0f766e;
  --secondary: #14b8a6;
  --accent: #facc15
}

html[data-color-theme=indigo-neon] {
  --primary: #4338ca;
  --secondary: #6366f1;
  --accent: #22d3ee
}

html[data-color-theme=sunset] {
  --primary: #ea580c;
  --secondary: #f97316;
  --accent: #f43f5e
}

html[data-color-theme=forest] {
  --primary: #166534;
  --secondary: #22c55e;
  --accent: #84cc16
}

html[data-color-theme=ocean] {
  --primary: #0369a1;
  --secondary: #0ea5e9;
  --accent: #06b6d4
}

html[data-color-theme=graphite] {
  --primary: #334155;
  --secondary: #64748b;
  --accent: #f59e0b
}

html[data-color-theme=magenta] {
  --primary: #c026d3;
  --secondary: #ec4899;
  --accent: #f97316
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(24, 191, 214, .13), transparent 300px),
    var(--bg);
  min-height: 100vh
}

body.content-copy-locked .breadcrumb-bar, body.content-copy-locked .options, body.content-copy-locked .options button, body.content-copy-locked .site-footer, body.content-copy-locked .site-header, body.content-copy-locked main {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none
}

body.content-copy-locked [contenteditable=true], body.content-copy-locked input, body.content-copy-locked select, body.content-copy-locked textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default
}


html[data-theme=dark] body {
  background: radial-gradient(circle at 12% 0, rgba(32, 213, 210, .14), transparent 32%), radial-gradient(circle at 90% 12%, rgba(59, 130, 246, .16), transparent 34%), var(--bg)
}

a {
  color: inherit
}

img {
  max-width: 100%;
  height: auto
}

sub, sup {
  line-height: 0;
  font-size: .72em
}

sub {
  vertical-align: sub
}

sup {
  vertical-align: super
}

.question-card mjx-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0
}

@media print {
  .breadcrumb-bar, .global-search-strip, .question-actions, .question-share-row, .quiz-bottom-nav, .quiz-lifeline-panel, .site-footer, .site-header, .social-share {
    display: none !important
  }

  body {
    background: #fff !important;
    color: #000 !important
  }

  main {
    width: 100% !important
  }

  .card, .question-card {
    box-shadow: none !important;
    break-inside: avoid
  }
}

.site-header {
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px clamp(16px, 4vw, 54px);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(24, 191, 214, .18)
}

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

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 15, 28, .16)
}

.brand-logo {
  width: 138px;
  height: 48px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid rgba(11, 63, 152, .14);
  border-radius: 18px
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.brand-icon {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  border: 1px solid rgba(6, 182, 212, .18);
  box-shadow: 0 7px 18px rgba(11, 63, 152, .18)
}

.brand-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px
}

.brand-copy {
  display: grid;
  gap: 1px;
  line-height: 1.08
}

.brand-copy strong {
  color: var(--primary);
  font-size: 18px;
  font-weight: 650 !important
}

.brand-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 450 !important
}

.brand small, .brand strong, .difficulty-link span, .difficulty-link strong, .quiz-player .quiz-question-card.is-active, .quiz-player.is-reviewing-wrong .quiz-question-card.is-wrong-card, .result-metrics b, .result-metrics small {
  display: block
}

.brand small {
  color: var(--muted);
  font-weight: 700
}

.top-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.auth-modal[hidden], .class-modal[hidden], .menu-toggle, .mobile-nav-head, .nav-backdrop, .options [data-quiz-option].is-lifeline-hidden, .qshare.copy b, .quiz-player .answer-details:not(.is-revealed) .answer-reveal, .quiz-player .quiz-question-card, .quiz-player.is-reviewing-wrong .quiz-question-card, .quiz-result-card[hidden] {
  display: none
}

.menu-toggle {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(11, 63, 152, .14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(19, 32, 51, .1);
  cursor: pointer;
  place-items: center;
  padding: 11px
}

.menu-toggle span, .top-nav a {
  border-radius: 999px
}

.nav-btn, .nav-class, .nav-user {
  padding: 10px 12px
}

.menu-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  margin: 3px 0;
  background: var(--primary)
}

.top-nav a:hover {
  color: var(--bg)
}

.nav-btn {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit
}

.nav-class {
  border: 1px solid rgba(217, 164, 65, .32);
  cursor: pointer;
  border-radius: 999px;
  color: #835b05;
  font: inherit
}

.brand-mini, .mobile-nav-close, .nav-control, .nav-user {
  color: var(--primary)
}

.nav-user {
  border-radius: 999px;
  background: #eef1ff
}

.nav-control {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(11, 63, 152, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 9px 22px rgba(11, 63, 152, .08);
  font: inherit
}

.breadcrumb-bar ol, .global-search-form {
  align-items: center;
  display: flex;
  margin: 0 auto
}

.theme-toggle {
  cursor: pointer
}

.theme-toggle span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  line-height: 1
}

.breadcrumb-bar ol, main {
  width: min(1160px, calc(100% - 32px))
}

.language-control {
  padding-right: 7px
}

.language-control select {
  min-height: 30px;
  border: 0;
  outline: 0;
  background: 0 0;
  color: inherit;
  font: inherit;
  cursor: pointer
}

body.secondary-language-disabled .hindi, body.secondary-language-disabled .question-hi {
  display: none !important
}

body.secondary-language-disabled .question-en {
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 950
}

.brand-mini {
  font-weight: 950
}

.btn, .eyebrow, .icon {
  font-weight: 900
}

.mobile-nav-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: #eef1ff;
  cursor: pointer;
  font-size: 28px;
  line-height: 1
}

.breadcrumb-bar {
  top: 77px;
  z-index: 9;
  background: #fff;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(82, 82, 82, 0.8);
  border-top: 1px solid rgba(99, 99, 99, 0.8);
}

.global-search-strip {
  padding: 10px clamp(16px, 4vw, 54px);
  background: #007d82;
}

.global-search-form {
  width: min(980px, 100%);
  min-height: 48px;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid rgba(11, 63, 152, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 28px rgba(11, 63, 152, .08)
}

.global-search-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary))
}

.global-search-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: 0 0;
  color: var(--ink);
  font: inherit;
  font-weight: 750
}

.global-search-form input::placeholder {
  color: #7b8798
}

.global-search-form button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font: inherit;
  box-shadow: 0 10px 22px rgba(11, 63, 152, .18)
}

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

.breadcrumb-bar ol {
  padding: 10px 0;
  gap: 8px;
  list-style: none;
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: none
}

.breadcrumb-bar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px
}

.breadcrumb-bar li:last-child {
  flex: 1 1 260px;
  min-width: min(100%, 260px);
  white-space: normal
}

.breadcrumb-bar li:last-child span {
  display: inline;
  overflow-wrap: anywhere;
  line-height: 1.35
}

.breadcrumb-bar li+li::before {
  content: "/";
  color: #ff0000;
  font-weight: 900
}

.breadcrumb-bar a, .chapter-copy strong a:hover, .chapter-hero .hero-panel h2, .eyebrow, .question-en a:hover {
  color: var(--primary)
}

.breadcrumb-bar span {
  color: #000;
  text-shadow: 0 1px 2px #fff
}

html[data-theme=dark] .site-header {
  background: rgba(7, 17, 31, .88);
  border-bottom-color: rgba(148, 163, 184, .18);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .24)
}

html[data-theme=dark] .brand-logo, html[data-theme=dark] .menu-toggle, html[data-theme=dark] .nav-class, html[data-theme=dark] .nav-control, html[data-theme=dark] .nav-user, html[data-theme=dark] .top-nav a {
  background: rgba(15, 27, 45, .9);
  border-color: rgba(148, 163, 184, .22);
  color: #e8f3ff
}

html[data-theme=dark] .brand-copy strong {
  color: #ecf8ff
}

html[data-theme=dark] .nav-btn, html[data-theme=dark] .top-nav a:hover {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #fff
}

html[data-theme=dark] .menu-toggle span {
  background: #dbeafe
}

html[data-theme=dark] .breadcrumb-bar {
  background: linear-gradient(90deg, rgba(12, 28, 47, .96), rgba(14, 41, 53, .96));
  border-bottom-color: rgba(148, 163, 184, .18)
}

html[data-theme=dark] .global-search-strip {
  background: #0b1526;
  border-bottom-color: rgba(148, 163, 184, .18)
}

html[data-theme=dark] .global-search-form {
  background: rgba(15, 27, 45, .92);
  border-color: rgba(148, 163, 184, .24);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28)
}

html[data-theme=dark] .global-search-form input::placeholder {
  color: #91a3bb
}

html[data-theme=dark] .mobile-nav-close {
  background: rgba(59, 130, 246, .18);
  color: #e8f3ff
}

main {
  margin: 0 auto
}

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 2.0fr) minmax(280px, .95fr);
  gap: 24px;
  align-items: center;
  margin: 18px 0 22px;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(2, 168, 197, .2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 242, 0, .22), transparent 24%),
    radial-gradient(circle at 12% 6%, rgba(24, 191, 214, .24), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(229, 250, 253, .9));
  box-shadow: 0 28px 80px rgba(8, 15, 28, .12)
}

.hero::after {
  content: "PJ";
  position: absolute;
  right: clamp(18px, 5vw, 70px);
  top: 18px;
  color: rgba(8, 15, 28, .06);
  font-size: clamp(72px, 13vw, 190px);
  font-weight: 950;
  line-height: 1;
  transform: rotate(-7deg);
  pointer-events: none
}

.eyebrow {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line)
}

h1, h2, h3 {
  letter-spacing: 0;
  line-height: 1.08
}

.hero p, .section-lead {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55
}

.card, .hero-panel, .question-card, .search-box {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(24, 191, 214, .22);
  border-radius: 18px;
  box-shadow: var(--shadow)
}

html[data-theme=dark] .answer-details, html[data-theme=dark] .auth-dialog, html[data-theme=dark] .card, html[data-theme=dark] .class-dialog, html[data-theme=dark] .hero-panel, html[data-theme=dark] .question-card, html[data-theme=dark] .quiz-control-panel, html[data-theme=dark] .quiz-result-card, html[data-theme=dark] .quiz-reward-quote, html[data-theme=dark] .search-box {
  background:
    radial-gradient(circle at 100% 0, rgba(32, 243, 234, .1), transparent 32%),
    linear-gradient(135deg, rgba(10, 22, 42, .96), rgba(5, 13, 27, .94));
  border-color: rgba(32, 243, 234, .24);
  box-shadow: var(--shadow)
}

html[data-theme=dark] .chapter-card, html[data-theme=dark] .difficulty-board, html[data-theme=dark] .level-card, html[data-theme=dark] .mini-metrics span, html[data-theme=dark] .options button, html[data-theme=dark] .options>span, html[data-theme=dark] .quiz-live-stats span, html[data-theme=dark] .quiz-palette button, html[data-theme=dark] .quiz-progress-head span, html[data-theme=dark] .seo-faq details, html[data-theme=dark] .seo-link-panel, html[data-theme=dark] .stat, html[data-theme=dark] .stream-field select {
  background: rgba(10, 22, 38, .86);
  border-color: rgba(148, 163, 184, .22);
  color: var(--ink)
}

.mini-metrics span, .muted, html[data-theme=dark] .hindi, html[data-theme=dark] .muted, html[data-theme=dark] .question-en, html[data-theme=dark] .subject-card p {
  color: var(--muted)
}

html[data-theme=dark] input, html[data-theme=dark] select, html[data-theme=dark] textarea {
  background-color: #0b1526;
  border-color: rgba(148, 163, 184, .3);
  color: var(--ink)
}

html[data-theme=dark] .question-card h1, html[data-theme=dark] .question-card h3, html[data-theme=dark] .question-hi {
  color: #f6fbff
}

html[data-theme=dark] .eyebrow {
  background: rgba(32, 213, 210, .12);
  border-color: rgba(32, 213, 210, .28);
  color: #8ff8f4
}

html[data-theme=dark] .hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 242, 0, .16), transparent 22%),
    radial-gradient(circle at 8% 6%, rgba(24, 191, 214, .2), transparent 30%),
    linear-gradient(135deg, rgba(8, 15, 28, .97), rgba(3, 6, 12, .96));
  border-color: rgba(32, 243, 234, .24);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38)
}

html[data-theme=dark] .card::before {
  opacity: .9;
  box-shadow: 0 0 18px rgba(32, 243, 234, .24)
}

.hero-panel {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 22px
}

.hero-panel::before {
  content: "01";
  right: 18px;
  top: 14px;
  opacity: .14;
  font-size: 56px
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px
}

.exam-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px
}

.exam-feature-strip a {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(24, 191, 214, .22);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(231, 250, 253, .88));
  box-shadow: 0 14px 34px rgba(8, 15, 28, .07)
}

.exam-feature-strip a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #080f1c, #18bfd6, #fff200)
}

.exam-feature-strip strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2
}

.exam-feature-strip span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45
}

.exam-feature-strip a:hover {
  transform: translateY(-2px);
  border-color: rgba(24, 191, 214, .42);
  box-shadow: 0 22px 48px rgba(8, 15, 28, .11)
}

html[data-theme=dark] .exam-feature-strip a {
  background:
    radial-gradient(circle at 100% 0, rgba(24, 191, 214, .1), transparent 32%),
    linear-gradient(135deg, rgba(10, 22, 42, .96), rgba(5, 13, 27, .94));
  border-color: rgba(24, 191, 214, .25)
}

.exam-taxonomy-grid,
.exam-landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 26px
}

.exam-taxonomy-card,
.exam-landing-card {
  border: 1px solid rgba(24, 191, 214, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(8, 15, 28, .07)
}

.exam-taxonomy-card {
  display: grid;
  gap: 10px;
  min-height: 218px;
  padding: 18px
}

.exam-taxonomy-card strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15
}

.exam-taxonomy-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45
}

.exam-taxonomy-card ul,
.exam-landing-card ul {
  margin: 0;
  padding-left: 18px
}

.exam-taxonomy-card li,
.exam-landing-card li {
  margin: 5px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42
}

.exam-taxonomy-card:hover {
  transform: translateY(-2px);
  border-color: rgba(24, 191, 214, .42);
  box-shadow: 0 22px 48px rgba(8, 15, 28, .11)
}

.exam-landing-hero .hero-panel .mini-metrics span {
  border: 1px solid rgba(24, 191, 214, .16)
}

.exam-landing-card {
  padding: 18px
}

html[data-theme=dark] .exam-taxonomy-card,
html[data-theme=dark] .exam-landing-card {
  background:
    radial-gradient(circle at 100% 0, rgba(24, 191, 214, .1), transparent 32%),
    linear-gradient(135deg, rgba(10, 22, 42, .96), rgba(5, 13, 27, .94));
  border-color: rgba(24, 191, 214, .25)
}

.mini-metrics {
  display: grid;
  gap: 10px;
  margin-top: 16px
}

.mini-metrics span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #f8faff;
  font-weight: 850
}

.mini-metrics strong {
  color: var(--ink);
  font-size: 22px
}

.stat {
  padding: 16px;
  border: 1px solid rgba(2, 168, 197, .16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(232, 250, 253, .86))
}

.stat strong {
  display: block;
  font-size: x-large;
  font-weight: bolder;
  color: var(--primary);
  padding-bottom: 10px
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px
}

.btn, .section-title.compact {
  align-items: center
}

.btn {
  display: inline-flex;
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #e5f8fb;
  color: var(--primary)
}

.action-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  margin-right: 7px;
  border-radius: 7px;
  font-size: 15px;
  line-height: 1;
  color: var(--primary);
  background: rgba(11, 94, 215, .09)
}

.btn.primary .action-icon, .btn.success .action-icon, .nav-btn .action-icon, .global-search-form button .action-icon {
  color: #fff;
  background: rgba(255, 255, 255, .2)
}

.btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #080f1c, #0e3442 58%, #18bfd6);
  box-shadow: 0 14px 30px rgba(8, 15, 28, .18)
}

.icon {
  color: #080f1c;
  background: var(--accent)
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .58
}

.search-box {
  padding: 12px;
  display: flex;
  gap: 8px;
  margin: 22px 0
}

.search-box input {
  flex: 1;
  border: 0;
  outline: 0;
  background: 0 0;
  font: inherit;
  min-width: 0;
  padding: 10px
}

.search-box button {
  border: 0;
  cursor: pointer
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 14px
}

.grid, .icon {
  display: grid
}

.section-title h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px)
}

.section-title.compact p {
  margin: 6px 0 0
}

.grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

.card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  transition: transform .18s, box-shadow .18s, border-color .18s
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  opacity: .72;
  pointer-events: none
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(2, 168, 197, .38);
  box-shadow: 0 22px 55px rgba(23, 32, 51, .12)
}

.icon {
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(8, 15, 28, .14)
}

.subject-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.options, .related-question-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.subject-card {
  position: relative;
  min-height: 190px;
  padding: 20px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--subject-color) 38%, #fff);
  border-radius: 24px;
  background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--subject-color) 34%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--subject-color) 18%, #fff) 0, #fff 54%, color-mix(in srgb, var(--subject-color) 10%, #f8fbff) 100%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--subject-color) 18%, rgba(23, 32, 51, .1))
}

.subject-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -52px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--subject-color) 18%, transparent);
  z-index: -1
}

.subject-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 62px color-mix(in srgb, var(--subject-color) 24%, rgba(23, 32, 51, .14))
}

.subject-card-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, .42), transparent 48%);
  z-index: -1
}

.subject-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--subject-color), color-mix(in srgb, var(--subject-color) 58%, #101828));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--subject-color) 30%, transparent)
}

.subject-card-kicker {
  display: inline-flex;
  margin-top: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--subject-color) 12%, #fff);
  color: color-mix(in srgb, var(--subject-color) 70%, #132033);
  font-size: 12px;
  font-weight: 950
}

.subject-card h2 {
  margin: 10px 0 8px;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.08
}

.subject-card p {
  margin: 0;
  color: #4f5b6f
}

.subject-card-cta {
  display: inline-flex;
  margin-top: 18px;
  color: color-mix(in srgb, var(--subject-color) 76%, #132033);
  font-weight: 950
}

.top-subject-grid .card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--primary) 4%), #fff)
}

.top-subject-grid .card::after {
  content: "Top";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, white);
  color: #9a6700;
  font-size: 11px;
  font-weight: 900
}

.top-subject-grid .card p {
  color: var(--primary);
  font-weight: 850
}

.question-list {
  display: grid;
  gap: 14px;
  margin-bottom: 5px
}

.related-question-links {
  padding: 18px
}

.related-question-links>p {
  margin: 0 0 14px
}

.related-question-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: related-question;
  display: grid;
  gap: 10px
}

.related-question-grid li {
  counter-increment: related-question;
  min-width: 0
}

.related-question-grid a {
  min-height: 58px;
  height: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(11, 94, 215, .16);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, #f2f8ff);
  color: var(--text);
  font-size: 15px;
  line-height: 1.38;
  transition: border-color .18s, transform .18s, box-shadow .18s
}

.related-question-grid a::before {
  content: counter(related-question);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(11, 94, 215, .1);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700
}

.related-question-grid a span, .topic-list-copy {
  min-width: 0
}

.related-question-grid a span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal
}

.related-question-grid a span mjx-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle
}

.related-question-grid a i {
  color: var(--primary);
  font-size: 12px
}

.related-question-grid a:hover {
  border-color: rgba(11, 94, 215, .34);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(11, 94, 215, .08)
}

html[data-theme=dark] .related-question-grid a {
  background: linear-gradient(135deg, rgba(15, 27, 45, .96), rgba(10, 48, 58, .9));
  border-color: rgba(148, 163, 184, .22);
  color: #edf6ff
}

html[data-theme=dark] .related-question-grid a::before {
  background: rgba(32, 213, 210, .14);
  color: #67e8f9
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 15px
}

.question-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid #c7daf5;
  border-radius: 999px;
  background: #f1f7ff;
  color: #184b91;
  font-size: 13px;
  transition: border-color .16s, background .16s
}

.question-tags a:focus-visible, .question-tags a:hover {
  border-color: #0b5ed7;
  background: #e3efff;
  outline: 0
}

.tag-detail-hero, .tag-hero {
  margin-bottom: 22px
}

.tag-alphabet {
  position: sticky;
  top: 78px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px
}

.tag-alphabet a, .tag-alphabet span {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 10px;
  font-size: 14px
}

.tag-alphabet a {
  border: 1px solid #bdd9f4;
  background: #eff7ff;
  color: #104d9b
}

.tag-alphabet a:focus-visible, .tag-alphabet a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  outline: 0
}

.tag-alphabet span {
  background: #f4f6f8;
  color: #a9b2bf
}

.tag-directory {
  display: grid;
  gap: 15px
}

.tag-letter-group {
  scroll-margin-top: 135px;
  padding: 16px
}

.tag-letter-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px
}

.tag-letter-heading strong {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 20px
}

.tag-letter-heading span {
  color: var(--muted);
  font-size: 14px
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 11px
}

.tag-directory-link {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #87c1ff;
  background: linear-gradient(135deg, #f4f8ff, #eefcfb);
}

.badge, .pagination {
  align-items: center
}

.badge, .qnum {
  background: var(--primary)
}

.tag-directory-link:focus-visible, .tag-directory-link:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  outline: 0
}

.tag-directory-link span {
  color: #163a68;
  font-size: medium;
  text-transform: capitalize;
}

.tag-directory-link b {
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 24px 0;
  color: var(--muted)
}

.topic-pagination {
  gap: 8px
}

.topic-pagination .btn {
  min-width: 42px;
  min-height: 42px;
  justify-content: center;
  padding: 9px 13px
}

.pagination-gap {
  padding: 0 3px
}

html[data-theme=dark] .question-tags a {
  border-color: #25456c;
  background: #14263c;
  color: #9ac8ff
}

html[data-theme=dark] .tag-directory-link {
  border-color: #234665;
  background: linear-gradient(135deg, #101c31, #122b35);
  color: #f3f7fc
}

html[data-theme=dark] .tag-directory-link span {
  color: #e5f0ff
}

html[data-theme=dark] .tag-alphabet a {
  border-color: #284e72;
  background: #14263c;
  color: #aad3ff
}

html[data-theme=dark] .tag-alphabet span {
  background: #111d2c;
  color: #50657c
}

.question-card {
  padding: 15px;
  margin-bottom: 25px
}

.question-card h2 a {
  margin: 12px 0 8px;
  color: var(--danger)
}

.question-card strong {
  color: var(--primary);
  font-weight: 900
}

.qnum {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900
}

.qnum small {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 900
}

.question-card h3 {
  margin: 12px 0 8px;
  color: #8b1020;
  line-height: 2rem
}

.question-card h1 {
  margin: 10px 0;
  color: var(--danger)
}

.hindi {
  color: #344054;
  font-weight: 700;
  font-family: "Anek Devanagari", "Nirmala UI", Mangal, sans-serif
}

.answer-value, .options button>span {
  font-family: "Anek Devanagari", "Segoe UI", "Nirmala UI", sans-serif
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px
}

.badge, .meta-chip {
  display: inline-flex;
  min-height: 32px;
  border-radius: 999px
}

.badge {
  padding: 5px 9px;
  color: #fff
}

.meta-chip {
  align-items: center;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(23, 32, 51, .07)
}

.badge-easy {
  background: var(--success)
}

.badge-medium {
  background: var(--secondary)
}

.badge-hard {
  background: #f97316
}

.badge-expert {
  background: var(--danger)
}

.quiz-context-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0 4px
}

.quiz-context-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid transparent;
  box-shadow: 0 10px 22px rgba(23, 32, 51, .08)
}

.subject-context {
  color: #075985;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border-color: rgba(2, 132, 199, .22)
}

.chapter-context {
  color: #0f3b7a;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border-color: rgba(37, 99, 235, .22)
}

.topic-context {
  color: #115e59;
  background: linear-gradient(135deg, #ccfbf1, #99f6e4);
  border-color: rgba(20, 184, 166, .24)
}

.difficulty-context.difficulty-easy {
  color: #166534;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: rgba(22, 163, 74, .22)
}

.difficulty-context.difficulty-medium {
  color: #854d0e;
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  border-color: rgba(202, 138, 4, .22)
}

.class-context, .difficulty-context.difficulty-hard {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  border-color: rgba(249, 115, 22, .22)
}

.difficulty-context.difficulty-hard {
  color: #9a3412
}

.difficulty-context.difficulty-expert {
  color: #991b1b;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: rgba(220, 38, 38, .22)
}

.class-context {
  color: #7c2d12
}

.level-context {
  color: #5b21b6;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-color: rgba(124, 58, 237, .22)
}

.options {
  display: grid;
  gap: 10px;
  margin: 14px 0
}

.options>span {
  padding: 12px;
  border-radius: 10px;
  background: #f6f8ff;
  border: 1px solid var(--muted);
  font-weight: 800
}

.options button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid var(--muted);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-transform: capitalize;
  text-shadow: none;
  line-height: 1.45;
  transition: transform .14s, border-color .14s, background .14s
}

.answer-label, .social-share>span {
  font-size: 13px;
  text-transform: uppercase
}

.options button>span {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: 0 0;
  color: inherit;
  line-height: 1.32;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical
}

.options button>span .option-text-left, .options button>span .option-text-right {
  display: inline
}

.options button>span .option-text-left {
  color: #087f83
}

.options button>span .option-text-separator {
  display: inline-block;
  margin: 0 7px;
  color: #9aa9ba;
  font-weight: 500
}

.options button>span .option-text-right {
  color: #1d4ed8;
  font-family: Poppins, "Segoe UI", Arial, sans-serif
}

.options button.option-correct>span .option-text-left, .options button.option-correct>span .option-text-right, .options button.option-wrong>span .option-text-left, .options button.option-wrong>span .option-text-right {
  color: inherit
}

html[data-theme=dark] .options button>span .option-text-left {
  color: #4fd1c5
}

html[data-theme=dark] .options button>span .option-text-right {
  color: #75a9ff
}

.options button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--primary);
  background: #eef5ff
}

.options button:disabled {
  cursor: default
}

.options button strong, .options>span strong {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #003f9e 0%, #006bd6 48%, #00a8ad 100%);
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 0;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  box-shadow: 0 10px 22px rgba(0, 63, 158, .3), 0 0 0 4px rgba(11, 94, 215, .08), inset 0 1px 0 rgba(255, 255, 255, .28)
}

.options button:nth-child(2) strong {
  background: linear-gradient(135deg, #00856f, #00a8ad)
}

.options button:nth-child(3) strong {
  background: linear-gradient(135deg, #c2410c, #f59e0b)
}

.options button:nth-child(4) strong {
  background: linear-gradient(135deg, #7e22ce, #db2777)
}

.options button.option-correct {
  border-color: #12a56f;
  background: #e9fbf2;
  color: #064e34
}

.options button.option-correct strong {
  background: linear-gradient(135deg, #047857, #12a56f);
  box-shadow: 0 10px 22px rgba(18, 165, 111, .32), 0 0 0 4px rgba(18, 165, 111, .12)
}

.options button.option-wrong {
  border-color: #e13f51;
  background: #fff0f2;
  color: #8b1020
}

.options button.option-wrong strong {
  background: linear-gradient(135deg, #b91c1c, #e13f51);
  box-shadow: 0 10px 22px rgba(225, 63, 81, .32), 0 0 0 4px rgba(225, 63, 81, .12)
}

.quiz-snackbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 80;
  width: min(720px, calc(100% - 28px));
  padding: 14px 16px;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(19, 32, 51, .24);
  color: #fff;
  font-weight: 850;
  line-height: 1.55;
  transform: translate(-50%, 130%);
  opacity: 0;
  transition: transform .22s, opacity .22s
}

.quiz-snackbar.show {
  transform: translate(-50%, 0);
  opacity: 1
}

.quiz-snackbar.is-correct {
  background: linear-gradient(135deg, #0f9f6e, #047857)
}

.quiz-snackbar.is-wrong {
  background: linear-gradient(135deg, #d63045, #8f1424)
}

details {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px
}

summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--primary)
}

.answer-details {
  border-radius: 18px;
  padding: 14px 16px
}

.answer-box, .answer-locked {
  padding: 16px;
  border-radius: 16px
}

.answer-details summary {
  list-style-position: inside
}

.answer-reveal {
  margin-top: 14px;
  display: grid;
  gap: 8px
}

.answer-label {
  color: var(--success);
  letter-spacing: .02em;
  text-shadow: 1px 1px 2px #fff
}

.answer-value {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 22px)
}

.answer-reveal p {
  margin: 0 0 8px;
  line-height: 1.7
}

.answer-box {
  border-left: 5px solid var(--success)
}

.answer-locked {
  margin-top: 14px;
  border: 1px dashed rgba(11, 63, 152, .42);
  background: #f3f8ff
}

.answer-locked p {
  color: var(--muted);
  margin: 6px 0 12px
}

.social-share {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.social-share-level, .social-share-subject {
  margin: 16px 0 22px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(219, 231, 241, .9);
  box-shadow: 0 10px 26px rgba(23, 32, 51, .06)
}

.social-share>span {
  color: var(--muted);
  font-weight: 950;
  letter-spacing: .04em
}

.level-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 14px
}

.social-share>div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.share-btn {
  border: 0;
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(23, 32, 51, .12)
}

.share-btn i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-style: normal;
  font-size: 11px;
  font-weight: 1000
}

.follow-whatsapp, .qshare.whatsapp, .share-btn.whatsapp {
  background: #25d366
}

.follow-facebook, .qshare.facebook, .share-btn.facebook, .social-fb {
  background: #1877f2
}

.qshare.twitter, .share-btn.twitter, .social-x {
  background: #111827
}

.follow-telegram, .qshare.telegram, .share-btn.telegram, .social-tg {
  background: #229ed9
}

.follow-linkedin, .qshare.linkedin, .share-btn.linkedin, .social-in {
  background: #0a66c2
}

.follow-instagram, .share-btn.instagram, .social-ig {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af)
}

.og-preview-link::before, .qshare.copy, .share-btn.copy {
  background: linear-gradient(135deg, var(--primary), var(--secondary))
}

.follow-social-card {
  width: min(760px, 100%);
  margin: 18px auto 0;
  padding: 16px;
  display: grid;
  gap: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 249, 255, .94));
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 18px 42px rgba(23, 32, 51, .09)
}

.follow-social-card strong {
  display: block;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 950
}

.follow-social-card span {
  display: inline-flex;
  margin-top: 5px;
  color: var(--primary);
  font-weight: 950
}

.follow-social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap
}

.follow-social-link, .og-preview-link::before {
  display: inline-grid;
  color: #fff;
  place-items: center
}

.follow-social-link {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 20px;
  box-shadow: 0 12px 26px rgba(23, 32, 51, .16);
  transition: transform .16s, box-shadow .16s
}

.follow-social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(23, 32, 51, .22)
}

.follow-x {
  background: #000
}

.follow-youtube, .social-yt {
  background: red
}

.follow-threads {
  background: #101010
}

html[data-theme=dark] .follow-social-card {
  background: linear-gradient(135deg, rgba(15, 27, 45, .96), rgba(10, 22, 38, .92));
  border-color: rgba(32, 213, 210, .22)
}

.og-preview-tools {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.og-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff8df;
  color: #8a5a00;
  border: 1px solid rgba(217, 164, 65, .48);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(23, 32, 51, .08)
}

.og-preview-link::before {
  content: "OG";
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 10px
}

.quiz-player {
  display: grid;
  gap: 14px;
  margin-top: 16px
}

.quiz-control-panel {
  position: sticky;
  top: 124px;
  z-index: 8;
  display: grid;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(12, 92, 182, .16);
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, .16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(236, 247, 255, .96));
  box-shadow: 0 18px 44px rgba(11, 94, 215, .1)
}

.question-actions, .quiz-bottom-nav, .quiz-live-stats, .quiz-progress-head, .result-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.quiz-progress-head {
  justify-content: space-between
}

.quiz-progress-head strong {
  color: var(--ink);
  font-size: clamp(17px, 2.4vw, 22px)
}

.quiz-live-stats span, .quiz-progress-head span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #0b4fb3;
  font-size: 13px;
  font-weight: 900
}

.quiz-live-stats .quiz-stat-chip {
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06)
}

.quiz-live-stats .stat-answered {
  color: #075985;
  border-color: rgba(14, 165, 233, .22);
  background: linear-gradient(135deg, #e0f2fe, #eff6ff)
}

.quiz-live-stats .stat-correct {
  color: #14532d;
  border-color: rgba(34, 197, 94, .24);
  background: linear-gradient(135deg, #dcfce7, #f0fdf4)
}

.quiz-live-stats .stat-time {
  color: #7c2d12;
  border-color: rgba(245, 158, 11, .28);
  background: linear-gradient(135deg, #ffedd5, #fffbeb)
}

.quiz-progress-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #dbeafe;
  overflow: hidden
}

.class-dialog, .class-modal {
  overflow-y: auto;
  overscroll-behavior: contain
}

.quiz-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #064eae, #0891b2, #10b981);
  box-shadow: 0 0 18px rgba(14, 165, 233, .42);
  transition: width .2s
}

.quiz-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  padding: 10px;
  border-color: rgba(11, 94, 215, .12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(241, 248, 255, .9)),
    radial-gradient(circle at 90% 0, rgba(20, 184, 166, .12), transparent 28%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07)
}

.quiz-palette button {
  min-width: 0;
  min-height: 31px;
  padding: 4px 6px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  color: #243047;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .045);
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s
}

.quiz-palette button.is-current {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  background: linear-gradient(135deg, #064eae, #0891b2);
  box-shadow: 0 10px 20px rgba(8, 145, 178, .28);
  transform: translateY(-1px)
}

.quiz-palette button.is-pending {
  border-color: rgba(148, 163, 184, .38)
}

.quiz-palette button.is-answered {
  color: #075985;
  border-color: rgba(14, 165, 233, .35);
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff)
}

.quiz-palette button.is-correct {
  color: #14532d;
  border-color: rgba(18, 165, 111, .5);
  background: linear-gradient(135deg, #bbf7d0, #ecfdf5)
}

.quiz-palette button.is-wrong {
  color: #991b1b;
  border-color: rgba(225, 63, 81, .48);
  background: linear-gradient(135deg, #fecaca, #fff1f2)
}

.quiz-palette button.is-skipped {
  color: #92400e;
  border-color: rgba(245, 158, 11, .55);
  background: linear-gradient(135deg, #fde68a, #fffbeb)
}

.quiz-palette button.is-current.is-correct, .quiz-palette button.is-current.is-skipped, .quiz-palette button.is-current.is-wrong {
  color: #fff;
  background: #0b5ed7
}

.quiz-question-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11, 94, 215, .12);
  background:
    radial-gradient(circle at 100% 0, rgba(20, 184, 166, .11), transparent 30%),
    linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .09)
}

.quiz-question-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #064eae, #0891b2, #10b981);
  pointer-events: none
}

.question-hi {
  margin: 14px 0 8px;
  color: red;
  font-size: clamp(21px, 3.2vw, 29px);
  line-height: 1.5;
  font-family: "Anek Devanagari", "Nirmala UI", Mangal, sans-serif;
  letter-spacing: 0
}

.question-en {
  margin: 0 0 14px;
  color: #475467;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.65
}

.question-en a {
  color: #1877f2;
  font-size: x-large
}

.options button, .options button>span {
  font-size: clamp(14px, 1.45vw, 17px)
}

.qnum {
  min-width: auto;
  padding: 9px 12px;
  background: linear-gradient(135deg, #0b5ed7, #0ea5e9)
}

.options button {
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  text-transform: none
}

.quiz-options button:hover:not(:disabled) {
  border-color: rgba(8, 145, 178, .42);
  background: linear-gradient(180deg, #ffffff, #eefaff);
  box-shadow: 0 16px 34px rgba(8, 145, 178, .12)
}

.options button:focus-visible, .question-action-btn:focus-visible, .quiz-bottom-nav .btn:focus-visible, .quiz-palette button:focus-visible {
  outline: rgba(11, 94, 215, .24) solid 3px;
  outline-offset: 2px
}

.answer-details {
  margin-top: 16px;
  background: linear-gradient(135deg, #a1f7b3bb, #53ccebf5);
  border: 1px solid rgba(18, 138, 99, .2);
  box-shadow: 0 14px 34px rgba(18, 138, 99, .08)
}

.answer-details[open] {
  animation: .18s softReveal
}

@keyframes softReveal {
  from {
    opacity: .78;
    transform: translateY(4px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.answer-box {
  border-left: 5px solid #12a56f;
  background: #fff;
  box-shadow: 0 10px 22px rgba(23, 32, 51, .05)
}

.explanation-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.explanation-steps article {
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(219, 231, 241, .9);
  box-shadow: 0 10px 24px rgba(23, 32, 51, .05)
}

.explanation-steps span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #0b5ed7;
  font-size: 12px;
  font-weight: 950
}

.explanation-steps h3 {
  margin: 10px 0 6px;
  color: #101828;
  font-size: 16px;
  line-height: 1.4
}

.explanation-steps p {
  margin: 0;
  color: #475467;
  font-size: 15px;
  line-height: 1.7;
  font-family: "Anek Devanagari", "Segoe UI", "Nirmala UI", sans-serif
}

.quiz-lifeline-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  margin: 14px 0 12px;
  padding: 9px;
  border: 1px solid rgba(8, 145, 178, .16);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(236, 253, 245, .76)),
    radial-gradient(circle at 100% 0, rgba(16, 185, 129, .12), transparent 30%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8)
}

.quiz-lifeline-btn {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(11, 94, 215, .14);
  border-radius: 15px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  color: #083f91;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(23, 32, 51, .06);
  transition: transform .18s, border-color .18s, box-shadow .18s
}

.quiz-lifeline-btn span {
  width: 34px;
  height: 34px;
  grid-row: 1/3;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #064eae, #0891b2, #10b981);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 8px 15px rgba(8, 145, 178, .2)
}

.quiz-lifeline-btn b, .quiz-lifeline-btn small {
  line-height: 1.1;
  min-width: 0;
  white-space: nowrap
}

.quiz-lifeline-btn b {
  font-size: 14px;
  font-weight: 950
}

.quiz-lifeline-btn small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis
}

.quiz-lifeline-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 94, 215, .38);
  box-shadow: 0 14px 28px rgba(11, 94, 215, .12)
}

.quiz-lifeline-btn:focus-visible {
  outline: rgba(11, 94, 215, .24) solid 3px;
  outline-offset: 2px
}

.quiz-lifeline-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none
}

.qshare:hover, .question-action-link.admin-edit-link:hover, .question-action-link.admin-poster-link:hover {
  transform: translateY(-1px)
}

.question-actions, .settings-links {
  margin-top: 14px
}

.question-action-btn, .question-action-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(11, 94, 215, .18);
  background: #f8fbff;
  color: #0b4fb3;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none
}

.question-action-btn.is-bookmarked {
  color: #92400e;
  border-color: rgba(245, 158, 11, .36);
  background: #fffbeb
}

.admin-question-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, .14)
}

.question-action-link.admin-edit-link {
  border-color: rgba(245, 158, 11, .35);
  background: linear-gradient(135deg, #111827, #0b5ed7);
  color: #fff;
  box-shadow: 0 10px 22px rgba(11, 94, 215, .18)
}

.question-action-link.admin-poster-link {
  border-color: rgba(13, 148, 136, .28);
  background: linear-gradient(135deg, #047857, #0891b2);
  color: #fff;
  box-shadow: 0 10px 22px rgba(8, 145, 178, .16)
}

.question-share-row {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(11, 94, 215, .12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(248, 251, 255, .98), rgba(236, 253, 253, .9))
}

.question-share-row>span {
  margin-right: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .02em
}

.qshare {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
  transition: transform .15s, box-shadow .15s
}

.qshare:hover {
  box-shadow: 0 14px 26px rgba(15, 23, 42, .16)
}

html[data-theme=dark] .question-share-row {
  background: linear-gradient(135deg, rgba(15, 27, 45, .96), rgba(10, 48, 58, .88));
  border-color: rgba(148, 163, 184, .22)
}

.quiz-bottom-nav {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(8, 145, 178, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(20, 184, 166, .13), transparent 42%),
    rgba(255, 255, 255, .92);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
  backdrop-filter: blur(14px)
}

.auth-modal, .class-modal {
  position: fixed;
  inset: 0;
  padding: 18px;
  display: grid;
  place-items: center
}

.quiz-bottom-nav .btn, .result-actions .btn {
  min-height: 46px
}

.quiz-bottom-nav .btn {
  position: relative;
  min-width: 118px;
  padding: 12px 18px;
  border: 1px solid rgba(11, 94, 215, .18);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #eef6ff);
  color: #0b4fb3;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s
}

.quiz-bottom-nav .btn:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 145, 178, .35);
  box-shadow: 0 16px 34px rgba(8, 145, 178, .16)
}

.quiz-bottom-nav [data-quiz-prev]::before {
  content: "←";
  margin-right: 8px;
  font-weight: 950
}

.quiz-bottom-nav [data-quiz-next]::after {
  content: "→";
  margin-left: 8px;
  font-weight: 950
}

.quiz-bottom-nav .btn.primary {
  border-color: rgba(7, 89, 133, .22);
  background: linear-gradient(135deg, #064eae, #0891b2);
  color: #fff;
  box-shadow: 0 16px 34px rgba(8, 145, 178, .24)
}

.quiz-bottom-nav .btn.success {
  min-width: 164px;
  border: 0;
  background: linear-gradient(135deg, #10b981, #0891b2, #064eae);
  color: #fff;
  box-shadow: 0 18px 38px rgba(16, 185, 129, .28), inset 0 1px 0 rgba(255, 255, 255, .28)
}

.quiz-bottom-nav .btn.success::before {
  content: "✓";
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  margin-right: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18)
}

.btn.success {
  color: #fff;
  background: #12a56f
}

.quiz-result-card {
  border: 1px solid rgba(18, 165, 111, .22);
  background: linear-gradient(135deg, #fff, #f0fdf4)
}

.quiz-result-card h2 {
  margin: 6px 0 16px;
  font-size: clamp(24px, 4vw, 36px);
  color: #101828
}

.leaderboard-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  gap: 22px;
  align-items: center;
  margin: 18px 0;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(8, 145, 178, .18);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .2), transparent 22%),
    radial-gradient(circle at 8% 0, rgba(16, 185, 129, .32), transparent 28%),
    linear-gradient(135deg, #062b6f 0%, #075c9d 46%, #0891b2 100%);
  box-shadow: 0 26px 70px rgba(6, 43, 111, .22)
}

.leaderboard-hero::after {
  content: "🏆";
  position: absolute;
  right: 28px;
  top: 16px;
  font-size: clamp(52px, 10vw, 120px);
  opacity: .14;
  transform: rotate(-10deg);
  pointer-events: none
}

.leaderboard-hero .eyebrow {
  color: #c8fff2;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22)
}

.leaderboard-hero h1 {
  margin: 12px 0 8px;
  color: #fff;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.02
}

.leaderboard-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7
}

.leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px
}

.leaderboard-tabs a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .11);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14)
}

.leaderboard-tabs a.is-active {
  color: #063c76;
  background: linear-gradient(135deg, #fff, #dffcff);
  box-shadow: 0 14px 30px rgba(255, 255, 255, .18)
}

.leaderboard-hero-stats {
  display: grid;
  gap: 12px
}

.leaderboard-hero-stats span {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 22px;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(12px)
}

.leaderboard-hero-stats b {
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1
}

.leaderboard-hero-stats small {
  color: rgba(255, 255, 255, .82);
  font-weight: 850
}

.leaderboard-board {
  display: grid;
  gap: 18px;
  margin: 18px 0 28px
}

.leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end
}

.podium-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 22px 16px;
  border-radius: 28px;
  text-align: center;
  border: 1px solid rgba(8, 145, 178, .16);
  background: linear-gradient(180deg, #fff, #f4fbff);
  box-shadow: 0 22px 50px rgba(15, 23, 42, .1)
}

.podium-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, #f59e0b, #facc15)
}

.podium-card.rank-1 {
  min-height: 250px;
  transform: translateY(-10px);
  border-color: rgba(245, 158, 11, .34);
  background: radial-gradient(circle at 50% 0, rgba(250, 204, 21, .22), transparent 34%), linear-gradient(180deg, #fffdf4, #fff)
}

.podium-card.rank-2::before {
  background: linear-gradient(90deg, #94a3b8, #e2e8f0)
}

.podium-card.rank-3::before {
  background: linear-gradient(90deg, #b45309, #f97316)
}

.podium-rank {
  position: absolute;
  top: 16px;
  left: 16px;
  min-width: 42px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #064eae, #0891b2);
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(8, 145, 178, .24)
}

.podium-avatar, .rank-avatar {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #064eae, #0891b2, #10b981);
  font-weight: 950;
  box-shadow: 0 16px 32px rgba(8, 145, 178, .24)
}

.podium-avatar {
  width: 78px;
  height: 78px;
  border-radius: 26px;
  font-size: 34px
}

.podium-card h2 {
  margin: 0;
  color: #101828;
  font-size: clamp(20px, 3vw, 28px)
}

.podium-card p {
  margin: 0;
  color: #475467;
  font-weight: 900
}

.leaderboard-list {
  display: grid;
  gap: 10px
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 72px 52px minmax(0, 1fr) 120px 110px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(11, 94, 215, .11);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06)
}

.rank-number {
  color: #075985;
  font-weight: 950
}

.rank-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px
}

.leaderboard-row strong {
  min-width: 0;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.rank-score, .rank-xp {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 16px;
  font-weight: 950
}

.rank-score {
  color: #075985;
  background: #e0f2fe
}

.rank-xp {
  color: #166534;
  background: #dcfce7
}

.rank-score small, .rank-xp small {
  color: inherit;
  opacity: .72;
  font-size: 11px;
  text-transform: uppercase
}

.leaderboard-empty {
  padding: clamp(24px, 5vw, 50px);
  border: 1px solid rgba(8, 145, 178, .16);
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(135deg, #fff, #effcff);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .08)
}

.leaderboard-empty-icon {
  font-size: 64px
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px
}

.result-metrics span {
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(219, 231, 241, .9);
  box-shadow: 0 8px 20px rgba(23, 32, 51, .05)
}

.result-metrics b {
  color: #0b5ed7;
  font-size: 20px
}

.result-metrics small {
  color: var(--muted);
  margin-top: 4px;
  font-weight: 850
}

.seo-link-panel {
  margin: 22px 0;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(219, 231, 241, .92);
  background: radial-gradient(circle at top right, rgba(14, 165, 233, .12), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(245, 251, 255, .92));
  box-shadow: 0 16px 40px rgba(23, 32, 51, .07)
}

.seo-link-panel h2 {
  margin: 4px 0 14px;
  font-size: clamp(21px, 3vw, 30px)
}

.seo-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.level-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.seo-link-grid a {
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(219, 231, 241, .9);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 32, 51, .06)
}

.seo-link-grid h3, .seo-link-grid span {
  display: block;
  overflow-wrap: anywhere
}

.seo-link-grid h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35
}

.seo-link-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45
}

.seo-faq {
  margin: 24px 0
}

.difficulty-board+.difficulty-board, .stream-field {
  margin-top: 16px
}

.seo-faq-list {
  display: grid;
  gap: 12px
}

.seo-faq details {
  border: 1px solid rgba(219, 231, 241, .9);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23, 32, 51, .06);
  overflow: hidden
}

.seo-faq summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 950;
  color: var(--ink)
}

.seo-faq p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.7
}

.auth-modal {
  z-index: 50;
  background: rgba(16, 21, 40, .54)
}

.class-modal {
  z-index: 60;
  background: radial-gradient(circle at 20% 10%, rgba(217, 164, 65, .24), transparent 22rem), radial-gradient(circle at 80% 0, rgba(0, 125, 130, .22), transparent 24rem), rgba(7, 20, 36, .7);
  backdrop-filter: blur(10px)
}

.class-dialog {
  width: min(560px, 100%);
  max-height: calc(100dvh - 36px);
  padding: 26px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(16, 21, 40, .28)
}

.class-dialog h2 {
  margin: 14px 0 8px;
  font-size: clamp(28px, 5vw, 42px)
}

.stream-field {
  display: grid;
  gap: 8px;
  color: #172033;
  font-weight: 900
}

.auth-message.error, .class-message {
  color: var(--danger)
}

.stream-field span {
  font-size: 13px;
  letter-spacing: 0
}

.stream-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(11, 63, 152, .16);
  border-radius: 16px;
  background: #f7fbff;
  color: #132033;
  font: inherit;
  font-weight: 800
}

.class-grid.inline, .settings-stream {
  margin-bottom: 18px
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px
}

.otp-box, .phone-row {
  display: flex;
  gap: 8px
}

.class-grid button {
  min-height: 104px;
  position: relative;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  border-radius: 20px;
  padding: 16px;
  text-align: left;
  background: linear-gradient(135deg, #0b3f98, #02a8ad);
  color: #fff;
  box-shadow: 0 14px 34px rgba(23, 32, 51, .16);
  transition: transform .16s, box-shadow .16s, filter .16s
}

.class-grid button::before {
  content: "";
  position: absolute;
  inset: -55% -25% auto auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22)
}

.class-grid button::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16)
}

.class-grid button:first-child {
  background: linear-gradient(135deg, #0b3f98, #5b7cfa)
}

.class-grid button:nth-child(2) {
  background: linear-gradient(135deg, #007d82, #13c9b5)
}

.class-grid button:nth-child(3) {
  background: linear-gradient(135deg, #d98316, #f2c94c)
}

.class-grid button:nth-child(4) {
  background: linear-gradient(135deg, #c32945, #8d5cf6)
}

.class-grid button:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 44px rgba(23, 32, 51, .22)
}

.class-grid strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 22px;
  margin-bottom: 6px
}

.class-grid span {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .88);
  font-weight: 800
}

.class-message {
  min-height: 20px;
  font-weight: 900
}

.auth-dialog {
  width: min(430px, 100%);
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 21, 40, .24)
}

.auth-close, .level-links a {
  background: #eef1ff;
  color: var(--primary)
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer
}

.auth-action {
  width: 100%;
  margin: 12px 0
}

.otp-box {
  margin-top: 10px
}

.phone-row {
  min-width: 0;
  flex: 1;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 0 12px
}

.phone-prefix {
  flex: 0 0 auto;
  color: var(--primary);
  font-weight: 950
}

.otp-box input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  font: inherit
}

.phone-row input {
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  width: 100%;
  outline: 0
}

.phone-row:focus-within {
  border-color: rgba(92, 74, 255, .62);
  box-shadow: 0 0 0 4px rgba(92, 74, 255, .11)
}

.auth-message {
  min-height: 20px;
  color: var(--muted);
  font-weight: 800
}

.alert {
  padding: 12px;
  border-radius: 14px;
  background: #fff8e8;
  color: #835b05;
  font-weight: 800
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: start
}

.sidebar-card {
  position: sticky;
  top: 88px
}

.level-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, white);
  color: var(--primary);
  font-weight: 900;
  text-align: center;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06)
}

.level-links a:nth-child(2) {
  border-color: color-mix(in srgb, var(--secondary) 24%, var(--line));
  background: color-mix(in srgb, var(--secondary) 10%, white);
  color: var(--secondary)
}

.level-links a:nth-child(3) {
  border-color: color-mix(in srgb, #d9a441 28%, var(--line));
  background: color-mix(in srgb, #d9a441 13%, white);
  color: #9a6700
}

.level-links a:nth-child(4) {
  border-color: color-mix(in srgb, #e11d48 24%, var(--line));
  background: color-mix(in srgb, #e11d48 10%, white);
  color: #be123c
}

.level-links a:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .1)
}

.game-map-shell {
  margin: 26px 0 34px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(228, 232, 244, .92);
  border-radius: 26px;
  box-shadow: var(--shadow)
}

.game-map-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px
}

.game-map-head h2 {
  margin: 10px 0 6px
}

.chapter-shell {
  margin: 24px 0 32px
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

.chapter-card {
  min-height: 176px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 10px 14px;
  align-items: start;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(219, 231, 241, .95);
  background: radial-gradient(circle at top right, rgba(2, 168, 173, .14), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 250, 255, .94));
  box-shadow: 0 16px 38px rgba(23, 32, 51, .08);
  transition: transform .16s, border-color .16s, box-shadow .16s
}

.chapter-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 63, 152, .28);
  box-shadow: 0 20px 48px rgba(23, 32, 51, .12)
}

.chapter-index {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  background: #2e2b2b;
  box-shadow: 0 12px 26px rgba(11, 63, 152, .2)
}

.chapter-copy {
  min-width: 0;
  display: grid;
  gap: 5px
}

.chapter-copy strong {
  color: #172033;
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere
}

.chapter-copy small, .quiz-status small {
  color: var(--muted);
  font-weight: 800
}

.chapter-copy em {
  color: #526276;
  font-size: small;
  font-style: normal;
  line-height: 1.42
}

.chapter-topic-list {
  grid-column: 1/-1;
  display: grid;
  gap: 7px;
  margin-top: 3px
}

.chapter-topic-list b, .related-topic-heading p, .store-card form, .store-card h2, .store-card p {
  margin: 0
}

.chapter-topic-list b a {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 9px;
  margin: 0;
  color: #172033;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 250, 255, .96));
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(15, 23, 42, .06);
  font-size: 12px;
  line-height: 1.25;
  text-align: left
}

.chapter-topic-list b a:hover {
  border-color: rgba(11, 94, 215, .34);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(11, 63, 152, .12)
}

.topic-chip-number {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 0 4px rgba(11, 94, 215, .08);
  font-size: 11px;
  font-weight: 950;
  line-height: 1
}

.body-dark .topic-chip-number {
  background: linear-gradient(135deg, #0b5ed7, #14b8a6);
  color: #000
}

.chapter-topic-list b span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.chapter-topic-list b small {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(11, 94, 215, .1);
  font-size: 11px;
  font-weight: 950
}

html[data-theme=dark] .chapter-topic-list b a {
  color: #edf6ff;
  background: linear-gradient(135deg, rgba(15, 27, 45, .96), rgba(11, 44, 55, .9));
  border-color: rgba(148, 163, 184, .22)
}

html[data-theme=dark] .chapter-topic-list b small {
  color: #9ff8f3;
  background: rgba(32, 213, 210, .12)
}

.chapter-count {
  grid-column: 1/-1;
  justify-self: start;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--primary);
  background: #eef6ff
}

.chapter-difficulty-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px
}

.chapter-difficulty-pill {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 13px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 10px 24px rgba(23, 32, 51, .1)
}

.chapter-difficulty-pill b {
  display: block;
  margin-top: 3px;
  font-size: 15px
}

.chapter-difficulty-pill.difficulty-easy, .difficulty-link.difficulty-easy, .difficulty-tabs a:first-child {
  background: linear-gradient(135deg, #0f9f6e, #02b8a5)
}

.chapter-difficulty-pill.difficulty-medium, .difficulty-link.difficulty-medium, .difficulty-tabs a:nth-child(2) {
  background: linear-gradient(135deg, #0b62c4, #5b7cfa)
}

.chapter-difficulty-pill.difficulty-hard, .difficulty-link.difficulty-hard, .difficulty-tabs a:nth-child(3) {
  background: linear-gradient(135deg, #d97706, #f59e0b)
}

.chapter-difficulty-pill.difficulty-expert, .difficulty-link.difficulty-expert, .difficulty-tabs a:nth-child(4) {
  background: linear-gradient(135deg, #c0264f, #7c3aed)
}

.chapter-levels {
  margin: 18px 0 28px
}

.chapter-seo-summary, .chapter-topics {
  margin: 18px 0 22px
}

.chapter-seo-summary h2 {
  margin: 8px 0 10px
}

.chapter-seo-summary p {
  color: var(--muted);
  line-height: 1.65
}

.chapter-seo-summary ul {
  margin: 14px 0 0;
  padding-left: 20px;
  line-height: 1.7;
  font-weight: 750
}

.topic-list-pro {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none
}

.topic-list-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(11, 94, 215, .14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(236, 253, 253, .94)), var(--surface);
  box-shadow: 0 10px 24px rgba(11, 63, 152, .06)
}

.topic-list-index {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(11, 63, 152, .18)
}

.topic-list-copy strong {
  display: block;
  color: #10233f;
  font-size: 16px;
  line-height: 1.25
}

.topic-list-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45
}

.topic-list-count {
  white-space: nowrap;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(11, 94, 215, .1);
  color: var(--primary);
  font-weight: 950;
  font-size: 13px
}

.topic-nav-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0
}

.topic-nav-panel h2 {
  margin: 4px 0 0
}

.topic-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end
}

.topic-context-list {
  display: grid;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 14px 0 0
}

.topic-context-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(11, 63, 152, .1);
  border-radius: 10px;
  background: rgba(242, 247, 251, .82);
  color: var(--ink)
}

.topic-context-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary))
}

.topic-context-list span {
  flex: 0 0 58px;
  color: var(--muted);
  font-size: 12px
}

.topic-context-list strong {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35
}

html[data-theme=dark] .topic-context-list li {
  background: rgba(10, 22, 38, .74);
  border-color: rgba(148, 163, 184, .18)
}

.related-topic-panel {
  margin: 18px 0;
  padding: clamp(16px, 2.5vw, 24px);
  border-color: rgba(11, 63, 152, .12);
  background: radial-gradient(circle at 92% 2%, rgba(2, 168, 173, .13), transparent 30%), linear-gradient(135deg, #fff 0, #f6fbff 100%);
  overflow: hidden
}

.related-topic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px
}

.related-topic-heading {
  display: flex;
  align-items: center;
  gap: 14px
}

.related-topic-heading .eyebrow {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(11, 63, 152, .06)
}

.related-topic-heading h2 {
  margin: 7px 0 3px;
  font-size: clamp(20px, 2vw, 24px)
}

.related-topic-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  font-size: 22px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 12px 22px rgba(11, 63, 152, .2)
}

.related-topic-total {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(2, 168, 173, .18);
  border-radius: 999px;
  background: rgba(2, 168, 173, .08);
  color: var(--primary);
  font-size: 13px
}

.about-check-grid, .related-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.chapter-quiz-links, .difficulty-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.related-topic-grid a {
  min-height: 94px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(11, 63, 152, .11);
  background: #fff;
  box-shadow: 0 8px 18px rgba(11, 63, 152, .055);
  transition: border-color .18s, box-shadow .18s, transform .18s
}

.difficulty-link, .difficulty-tabs a {
  display: grid;
  box-shadow: 0 14px 30px rgba(23, 32, 51, .12)
}

.related-topic-grid a:hover {
  border-color: rgba(2, 168, 173, .38);
  box-shadow: 0 14px 28px rgba(11, 63, 152, .11);
  transform: translateY(-2px)
}

.related-topic-number {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11, 63, 152, .1), rgba(2, 168, 173, .15));
  color: var(--primary);
  font-size: 14px
}

.level-copy, .related-topic-copy {
  min-width: 0;
  display: grid;
  gap: 4px
}

.related-topic-copy small {
  color: var(--secondary);
  font-size: 11px;
  text-transform: uppercase
}

.related-topic-grid strong {
  line-height: 1.25;
  color: #dc143c
}

.related-topic-count {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700
}

.difficulty-link, .difficulty-tabs a, .level-badge {
  font-weight: 950;
  color: #fff
}

.related-topic-arrow {
  margin-left: auto;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 63, 152, .07);
  color: var(--primary);
  font-size: 18px
}

html[data-theme=dark] .related-topic-panel {
  background: radial-gradient(circle at 92% 2%, rgba(32, 213, 210, .13), transparent 30%), linear-gradient(135deg, rgba(15, 27, 45, .96), rgba(10, 22, 38, .94));
  border-color: rgba(32, 213, 210, .24)
}

html[data-theme=dark] .related-topic-grid a {
  background: rgba(10, 22, 38, .76);
  border-color: rgba(148, 163, 184, .22)
}

html[data-theme=dark] .related-topic-grid strong, html[data-theme=dark] .topic-list-copy strong {
  color: #edf6ff
}

html[data-theme=dark] .related-topic-arrow, html[data-theme=dark] .related-topic-number {
  background: rgba(32, 213, 210, .12);
  color: #8ff8f4
}

html[data-theme=dark] .topic-list-item {
  background: linear-gradient(135deg, rgba(15, 27, 45, .96), rgba(10, 48, 58, .9));
  border-color: rgba(148, 163, 184, .22)
}

html[data-theme=dark] .topic-list-count {
  background: rgba(32, 213, 210, .13);
  color: #9ff8f3
}

.chapter-quiz-links {
  display: grid;
  gap: 10px
}

.difficulty-link {
  min-height: 82px;
  align-content: center;
  gap: 5px;
  padding: 14px 12px;
  border-radius: 18px;
  text-align: center
}

.difficulty-link span {
  font-size: 13px;
  opacity: .92
}

.difficulty-link.is-empty {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(.22)
}

.difficulty-tabs {
  display: grid;
  gap: 10px;
  margin-bottom: 18px
}

.difficulty-tabs a {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  place-items: center;
  padding: 10px;
  border-radius: 15px;
  background: linear-gradient(135deg, #0b3f98, #02a8ad);
  border: 0;
  transition: transform .15s, box-shadow .15s, filter .15s
}

.difficulty-tabs a::after {
  content: "";
  position: absolute;
  inset: auto -18px -28px auto;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18)
}

.difficulty-tabs a:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 42px rgba(23, 32, 51, .2)
}

.difficulty-board {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(228, 232, 244, .9)
}

.difficulty-board-head {
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(11, 63, 152, .08), rgba(2, 168, 173, .08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}

.level-alert, .quiz-status, .store-notice {
  margin-bottom: 16px
}

.difficulty-board-head .btn {
  min-height: 40px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 24px rgba(11, 63, 152, .18)
}

.difficulty-easy .difficulty-board-head {
  background: linear-gradient(135deg, rgba(15, 159, 110, .15), rgba(2, 184, 165, .12))
}

.difficulty-easy .difficulty-board-head .btn {
  background: #0f9f6e
}

.difficulty-medium .difficulty-board-head {
  background: linear-gradient(135deg, rgba(11, 98, 196, .14), rgba(91, 124, 250, .12))
}

.difficulty-medium .difficulty-board-head .btn {
  background: #0b62c4
}

.difficulty-hard .difficulty-board-head {
  background: linear-gradient(135deg, rgba(217, 119, 6, .16), rgba(245, 158, 11, .14))
}

.difficulty-hard .difficulty-board-head .btn {
  background: #d97706
}

.difficulty-expert .difficulty-board-head {
  background: linear-gradient(135deg, rgba(192, 38, 79, .14), rgba(124, 58, 237, .13))
}

.difficulty-expert .difficulty-board-head .btn {
  background: #c0264f
}

.difficulty-board-head h3 {
  margin: 0;
  font-size: 22px
}

.level-card {
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  gap: 10px 12px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(228, 232, 244, .95);
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 32, 51, .08);
  transition: transform .18s, border-color .18s, box-shadow .18s
}

.level-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 63, 152, .34);
  box-shadow: 0 18px 42px rgba(23, 32, 51, .11)
}

.level-card.is-ready {
  border-color: rgba(18, 138, 99, .3)
}

.level-card.is-empty {
  opacity: .72;
  cursor: not-allowed
}

.level-badge {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 10px 22px rgba(11, 63, 152, .2)
}

.level-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.1
}

.level-copy small {
  color: var(--muted);
  font-weight: 900
}

.level-count {
  padding: 7px 9px;
  border-radius: 999px;
  background: #f2f7fb;
  color: var(--primary);
  font-size: 13px;
  font-weight: 950
}

.level-topic-head {
  grid-column: 1/-1;
  font-size: 11px;
}

.level-topics {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.level-topics b {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(222, 222, 222, .75), rgba(255, 255, 251, .34));
  font-size: 12px;
  font-weight: 600
}

.level-topics b span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.level-topics b small {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(2, 168, 173, .14);
  color: var(--primary);
  font-size: 10px
}

.level-topics em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal
}

.level-progress {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef7;
  grid-column: 1/-1
}

html[data-theme=dark] .level-topics b {
  background: rgba(32, 213, 210, .1);
  color: var(--ink)
}

.level-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--secondary))
}

.level-progress.fill-1 i {
  width: 10%
}

.level-progress.fill-2 i {
  width: 20%
}

.level-progress.fill-3 i {
  width: 30%
}

.level-progress.fill-4 i {
  width: 40%
}

.level-progress.fill-5 i {
  width: 50%
}

.level-progress.fill-6 i {
  width: 60%
}

.level-progress.fill-7 i {
  width: 70%
}

.level-progress.fill-8 i {
  width: 80%
}

.level-progress.fill-9 i {
  width: 90%
}

.level-progress.fill-10 i {
  width: 100%
}

.quiz-status {
  display: grid;
  grid-template-columns: 1.1fr .85fr .8fr .9fr auto;
  gap: 14px;
  align-items: center
}

.quiz-status>div {
  display: grid;
  gap: 5px
}

.quiz-status strong {
  font-size: 20px
}

.quiz-timer-card {
  padding: 12px 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0b3f98, #02a8ad);
  box-shadow: 0 12px 24px rgba(11, 63, 152, .18)
}

.quiz-timer-card .muted, .quiz-timer-card small {
  color: rgba(255, 255, 255, .84)
}

.quiz-timer-card strong {
  font-size: 28px;
  letter-spacing: .5px;
  color: #fff
}

.quiz-timer-card.is-warning {
  background: linear-gradient(135deg, #d97706, #f74556)
}

.quiz-timer-card.is-ended {
  background: linear-gradient(135deg, #4b5563, #111827)
}

.metric-grid .stat, .store-card {
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--shadow)
}

.quiz-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px
}

.metric-grid, .store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 34px
}

.store-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(228, 232, 244, .9)
}

.profile-avatar span, .store-icon {
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  font-weight: 950;
  display: grid;
  color: #fff
}

.store-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px
}

.profile-avatar {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px
}

.profile-avatar span {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  font-size: 36px
}

.subject-intro-card {
  display: grid;
  gap: 10px;
  margin: 18px 0 8px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, white 10%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07)
}

.subject-intro-card strong {
  color: var(--primary);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.2
}

.subject-intro-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.65
}

.subject-intro-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.subject-intro-card span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, white);
  color: var(--primary);
  font-size: 13px;
  font-weight: 850
}

.metric-grid .stat {
  display: grid;
  align-content: start;
  min-height: 86px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(228, 232, 244, .9);
  border-radius: 16px;
  overflow: hidden
}

.metric-grid .stat strong {
  min-width: 0;
  padding-bottom: 8px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere
}

.metric-grid .stat span {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal
}

.store-card-featured {
  background: linear-gradient(135deg, rgba(11, 63, 152, .08), rgba(0, 125, 130, .1)), #fff
}

.store-wallet {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.settings-panel {
  margin-bottom: 34px
}

.profile-data-panel {
  position: relative;
  margin-top: 28px;
  padding: clamp(18px, 3vw, 30px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--primary) 6%), color-mix(in srgb, var(--surface) 96%, var(--secondary) 4%));
}

.profile-data-panel::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  pointer-events: none
}

.profile-data-form {
  display: grid;
  gap: 16px
}

.profile-data-form .full {
  grid-column: 1 / -1
}

.profile-form-section {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, white 6%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06)
}

.profile-form-section legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: var(--primary);
  font-weight: 950
}

.profile-section-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px
}

.profile-form-grid .wide {
  grid-column: 1 / -1
}

.profile-data-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850
}

.profile-data-form input,
.profile-data-form select {
  width: 100%;
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 750;
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease
}

.profile-data-form input:focus,
.profile-data-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent)
}

.premium-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px
}

.premium-theme-option {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .04)
}

.premium-theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.premium-theme-option b {
  font-size: 13px;
  line-height: 1.15
}

.premium-theme-option:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), 0 14px 30px rgba(15, 23, 42, .08)
}

.premium-theme-option:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 950
}

.premium-theme-swatch {
  width: 46px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--theme-a), var(--theme-b) 58%, var(--theme-c));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 8px 18px color-mix(in srgb, var(--theme-a) 28%, transparent)
}

.consent-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), color-mix(in srgb, var(--secondary) 7%, var(--surface)))
}

.consent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.consent-box label {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, white);
  color: var(--ink);
  font-weight: 700
}

.consent-box input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  accent-color: var(--primary)
}

.profile-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%)
}

.profile-save-bar span {
  color: var(--muted);
  font-weight: 750
}

.profile-save-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap
}

.privacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px
}

.gdpr-consent-banner {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(11, 94, 215, .18);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .22)
}

.gdpr-consent-banner[hidden] {
  display: none !important
}

.gdpr-consent-banner p {
  margin: 5px 0 6px;
  color: var(--muted)
}

.gdpr-consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 250px
}

.about-hero .hero-panel {
  background: radial-gradient(circle at 12% 18%, rgba(0, 125, 130, .16), transparent 34%), linear-gradient(135deg, rgba(11, 94, 215, .08), rgba(16, 185, 129, .12)), #fff
}

.about-score-card span {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em
}

.about-score-card strong {
  display: block;
  color: var(--primary);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1;
  margin-bottom: 12px
}

.about-message {
  max-width: 760px;
  font-weight: 700
}

.about-point-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none
}

.about-point-list li {
  position: relative;
  padding: 12px 14px 12px 42px;
  border: 1px solid rgba(11, 94, 215, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  color: var(--text);
  font-weight: 800
}

.about-point-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), #10b981);
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .12)
}

.about-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px
}

.about-mini-points b {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(11, 94, 215, .1);
  color: var(--primary);
  font-size: 13px
}

.about-mission-card {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: start;
  margin: 10px 0 28px
}

.about-mission-card h2 {
  margin: 4px 0 10px
}

.about-check-grid p {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(239, 246, 255, .96), rgba(240, 253, 244, .92));
  color: var(--muted);
  line-height: 1.5
}

.about-check-grid strong {
  color: var(--text)
}

.about-section-head {
  margin-top: 8px
}

.about-faq-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 28px
}

.about-faq-list details {
  border: 1px solid rgba(11, 94, 215, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
  overflow: hidden
}

.about-faq-list summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 18px 20px;
  color: var(--text);
  font-weight: 900;
  list-style: none
}

.about-faq-list summary span, .about-feature-card span {
  display: inline-flex;
  background: linear-gradient(135deg, var(--primary), #007d82)
}

.about-faq-list summary::-webkit-details-marker {
  display: none
}

.about-faq-list summary::after {
  content: "+";
  margin-left: auto;
  color: var(--primary);
  font-size: 24px;
  line-height: 1
}

.about-faq-list details[open] summary::after {
  content: "-"
}

.about-faq-list summary span {
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #fff;
  font-size: 14px
}

.about-faq-list p {
  margin: 0;
  padding: 0 20px 18px 70px;
  color: var(--muted);
  line-height: 1.65
}

.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 26px
}

.about-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(11, 94, 215, .12);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .92));
  box-shadow: var(--shadow)
}

.about-feature-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 108px;
  height: 108px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .12)
}

.about-feature-card span {
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: 14px;
  color: #fff;
  font-weight: 900
}

.about-feature-card h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 19px
}

.about-feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55
}

.about-faq details {
  padding: 14px 0;
  border-top: 1px solid rgba(228, 232, 244, .95)
}

.about-faq summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--text)
}

.site-footer {
  width: min(1160px, calc(100% - 32px));
  margin: 34px auto 0;
  padding: 24px 0 36px;
  border-top: 1px solid rgba(228, 232, 244, .9);
  color: var(--muted)
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(160px, .8fr));
  gap: 22px;
  align-items: start
}

.footer-brand h2, .footer-links h3 {
  margin: 0 0 10px;
  color: var(--text)
}

.footer-brand p {
  margin: 0 0 12px;
  line-height: 1.55
}

.footer-links {
  display: grid;
  gap: 9px
}

.footer-links a {
  color: var(--muted);
  font-weight: 800
}

.footer-links a:focus-visible, .footer-links a:hover {
  color: var(--primary)
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px
}

.footer-handle, .footer-socials a {
  display: inline-flex;
  font-weight: 900
}

.footer-socials a {
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .12)
}

.footer-handle {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(11, 94, 215, .08);
  color: var(--primary)
}

.copyright {
  margin-top: 22px
}

.empty {
  padding: 34px;
  text-align: center
}

.empty h1 {
  margin: 0 0 12px;
  color: crimson;
  font-size: 32px
}

.empty strong {
  color: var(--success);
  font-weight: 900;
}

.quiz-reward-quote {
  position: relative;
  max-width: 850px;
  margin: 40px auto;
  padding: 30px 50px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 86, 179, .1);
  border-left: 6px solid #0056b3;
  overflow: hidden;
  transition: .3s ease-in-out
}

.quiz-reward-quote::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(0, 151, 167, .05) 0, transparent 70%);
  border-radius: 50%
}

.quiz-reward-quote blockquote {
  margin: 0;
  padding: 0;
  border: none
}

.quiz-reward-quote p {
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(90deg, #0056b3 0, #0097a7 100%);
  -webkit-text-fill-color: transparent;
  font-family: Poppins, sans-serif
}

.quiz-reward-quote::before {
  content: '“';
  position: absolute;
  top: -10px;
  left: 10px;
  font-size: 80px;
  color: rgba(0, 86, 179, .07);
  font-family: serif
}

.quiz-reward-quote:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 151, 167, .15);
  border-left-width: 10px
}

@media (max-width:900px) {
  .about-mission-card, .hero, .two-col {
    grid-template-columns: 1fr
  }

  .about-check-grid, .about-feature-grid, .chapter-grid, .chapter-quiz-links, .explanation-steps, .footer-grid, .grid, .level-map, .metric-grid, .result-metrics, .seo-link-grid, .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))
  }

  .quiz-status {
    grid-template-columns: 1fr 1fr
  }

  .quiz-control-panel, .sidebar-card {
    position: static
  }

  .quiz-palette {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr))
  }

  .leaderboard-hero {
    grid-template-columns: 1fr
  }

  .leaderboard-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .leaderboard-podium {
    grid-template-columns: 1fr
  }

  .podium-card, .podium-card.rank-1 {
    min-height: 190px;
    transform: none
  }
}

@media (max-width:720px) {
  .related-question-grid {
    grid-template-columns: 1fr
  }

  .topic-pagination {
    gap: 6px
  }

  .topic-pagination .btn {
    min-width: 38px;
    min-height: 38px;
    padding: 8px 11px
  }

  .site-header {
    position: sticky;
    padding: 10px 14px
  }

  .brand-logo {
    width: 128px;
    height: 45px
  }

  .brand-icon {
    width: 44px;
    height: 44px
  }

  .brand-copy strong {
    font-size: 16px
  }

  .menu-toggle {
    display: grid
  }

  .top-nav {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 40;
    width: min(86vw, 340px);
    max-width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    background: linear-gradient(180deg, #fff, #f3f9fb);
    border: 1px solid rgba(219, 231, 241, .9);
    border-radius: 22px;
    box-shadow: -24px 0 50px rgba(19, 32, 51, .2);
    transform: translateX(calc(100% + 24px));
    transition: transform .22s;
    will-change: transform;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain
  }

  .top-nav.is-open {
    transform: translateX(0)
  }

  .top-nav .nav-btn, .top-nav .nav-class, .top-nav .nav-user, .top-nav a {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: 14px;
    justify-content: flex-start;
    text-align: left
  }

  .top-nav .nav-control {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    border-radius: 14px
  }

  .top-nav .language-control select {
    flex: 1;
    text-align: right
  }

  .top-nav a {
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255);
    border: 1px solid rgba(219, 231, 241, .85)
  }

  .top-nav a:hover {
    background: #273d9e
  }

  html[data-theme=dark] .top-nav {
    background: linear-gradient(180deg, #07111f, #0f1b2d);
    border-color: rgba(148, 163, 184, .2)
  }

  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(219, 231, 241, .9)
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: block;
    background: rgba(19, 32, 51, .44);
    backdrop-filter: blur(3px)
  }

  .nav-backdrop[hidden] {
    display: none
  }

  body.menu-open {
    overflow: hidden
  }

  .breadcrumb-bar {
    top: 67px
  }
}

@media (max-width:560px) {
  .class-modal {
    place-items: start center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom))
  }

  .class-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px;
    border-radius: 20px
  }

  .class-dialog .eyebrow {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 12px
  }

  .class-dialog h2 {
    margin: 10px 0 6px;
    font-size: clamp(24px, 8vw, 31px);
    line-height: 1.16
  }

  .class-dialog .muted {
    margin: 0;
    font-size: 14px;
    line-height: 1.45
  }

  .stream-field {
    margin-top: 12px;
    gap: 6px;
    font-size: 13px
  }

  .stream-field select {
    min-height: 46px;
    padding: 0 12px;
    border-radius: 13px
  }

  .class-grid {
    gap: 9px;
    margin-top: 12px
  }

  .class-grid button {
    min-height: 82px;
    padding: 12px;
    border-radius: 16px
  }

  .class-grid button::before {
    width: 86px;
    height: 86px
  }

  .class-grid button::after {
    right: 10px;
    bottom: 9px;
    width: 27px;
    height: 27px;
    border-radius: 9px
  }

  .class-grid strong {
    font-size: 19px;
    margin-bottom: 4px
  }

  .class-grid span {
    font-size: 12px
  }

  .class-message, .quiz-lifeline-btn b {
    font-size: 13px
  }

  .class-message {
    min-height: 16px;
    margin: 10px 0 0
  }

  .about-check-grid, .about-feature-grid, .chapter-grid, .chapter-quiz-links, .class-grid, .explanation-steps, .footer-grid, .grid, .hero-stats, .level-map, .metric-grid, .options, .quiz-status, .related-topic-grid, .result-metrics, .seo-link-grid, .store-grid {
    grid-template-columns: 1fr
  }

  .level-links {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
  }

  .metric-grid .stat {
    min-height: 78px;
    padding: 12px
  }

  .metric-grid .stat strong {
    font-size: 15px
  }

  .about-faq-list p {
    padding-left: 20px
  }

  .quiz-palette {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 5px;
    padding: 8px
  }

  .difficulty-tabs, .quiz-lifeline-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .quiz-lifeline-btn {
    min-height: 46px;
    padding: 8px;
    border-radius: 14px
  }

  .quiz-lifeline-btn span {
    width: 28px;
    height: 28px;
    border-radius: 10px
  }

  .quiz-lifeline-btn small {
    font-size: 9px
  }

  .quiz-palette button {
    min-height: 29px;
    border-radius: 9px;
    font-size: 11px
  }

  .leaderboard-hero {
    padding: 22px;
    border-radius: 24px
  }

  .leaderboard-hero-stats {
    grid-template-columns: 1fr
  }

  .leaderboard-tabs a {
    flex: 1 1 120px
  }

  .leaderboard-row {
    grid-template-columns: 54px 42px minmax(0, 1fr);
    gap: 9px
  }

  .rank-score, .rank-xp {
    grid-column: span 1;
    padding: 8px
  }

  .rank-score {
    grid-column: 2 / 3
  }

  .rank-xp {
    grid-column: 3 / 4
  }

  .rank-avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px
  }

  .question-actions, .quiz-bottom-nav, .quiz-live-stats, .quiz-progress-head, .result-actions {
    align-items: stretch
  }

  .question-action-btn, .question-action-link, .quiz-bottom-nav .btn, .quiz-live-stats>*, .quiz-progress-head>*, .result-actions .btn {
    width: 100%;
    justify-content: center
  }

  .question-card {
    padding: 5px
  }

  .question-hi {
    font-size: 22px;
    line-height: 1.55
  }

  .options button, .question-en {
    font-size: 16px
  }

  .options button {
    min-height: 58px;
    padding: 12px
  }

  .options button>span {
    font-size: clamp(13px, 4vw, 16px);
    line-height: 1.35
  }

  .quiz-bottom-nav {
    bottom: 8px
  }

  .level-card {
    min-height: 90px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 12px
  }

  .level-badge {
    width: 44px;
    height: 44px
  }

  .otp-box, .search-box, .site-footer {
    flex-direction: column
  }

  .global-search-strip {
    padding: 9px 12px
  }

  .global-search-form {
    min-height: 46px;
    gap: 7px;
    padding-left: 10px
  }

  .global-search-icon {
    width: 28px;
    height: 28px;
    font-size: 12px
  }

  .global-search-form button {
    padding: 8px 12px
  }

  .topic-list-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px
  }

  .topic-list-index {
    width: 38px;
    height: 38px;
    border-radius: 12px
  }

  .topic-list-count {
    grid-column: 2;
    justify-self: start;
    padding: 6px 10px
  }

  .topic-nav-panel {
    align-items: stretch;
    flex-direction: column
  }

  .topic-nav-actions {
    justify-content: flex-start
  }

  .related-topic-head {
    align-items: flex-start;
    flex-direction: column
  }

  .related-topic-heading {
    align-items: flex-start
  }

  .related-topic-grid a {
    min-height: 84px;
    padding: 12px
  }

  .phone-row {
    width: 100%
  }
}

.site-header {
  box-shadow: 0 8px 28px rgba(11, 63, 152, .06)
}

.top-nav {
  align-items: center;
  gap: 5px
}

.site-footer :is(a, p, span, h2, h3, strong, b), .site-header :is(a, button, select, span, b), main :is(p, li, a, span, label, button, input, select, textarea, small) {
  font-weight: 400 !important;
  letter-spacing: 0
}

.top-nav a {
  border-bottom: 0;
  padding: 10px;
  color: black;
  letter-spacing: 0;
  transition: color .18s, background .18s, box-shadow .18s
}

.top-nav a:hover {
  color: #fff;
  background: var(--success);
  box-shadow: inset 0 0 0 1px rgba(11, 63, 152, .08)
}

.answer-label, .answer-value, .explanation-steps h3, .explanation-steps p, .global-search-form button, .language-control select, .nav-btn, .nav-class, .nav-control, .nav-user, .options button, .options button strong, .options button>span, .question-action-btn, .question-action-link, main .badge, main .btn, main .level-links a, main .meta-chip, main .qnum, main .quiz-context-badge, main .quiz-live-stats span, main .quiz-palette button, main .topic-list-copy strong, main .topic-list-count, main h1:not(.question-hi), main h2:not(.question-hi), main h3 {
  font-weight: 500 !important;
  letter-spacing: 0
}

.nav-btn {
  background: linear-gradient(135deg, var(--primary), #075985);
  box-shadow: 0 9px 20px rgba(11, 63, 152, .18)
}

.nav-class {
  background: #fffaf0;
  border-color: rgba(217, 164, 65, .26)
}

.language-control span, .theme-toggle b {
  font-weight: 500 !important
}

.question-en, .question-en a {
  font-weight: 700 !important;
  letter-spacing: 0
}

.question-en a {
  border-bottom: 1px solid rgba(0, 0, 152, .5)
}

.options button strong {
  font-weight: 600 !important
}

.answer-value {
  color: #123868
}

@media (max-width:980px) {
  .top-nav .nav-btn, .top-nav .nav-class, .top-nav .nav-user, .top-nav a {
    font-weight: 450 !important;
    border-radius: 12px
  }
}

/* Compact branded footer with a tap-friendly app install call to action. */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding: 30px 30px 18px;
  border: 1px solid rgba(11, 63, 152, .12);
  border-radius: 24px 24px 0 0;
  background: linear-gradient(135deg, #fff 0%, #f2f8ff 58%, #edfbfb 100%);
  box-shadow: 0 -4px 30px rgba(11, 63, 152, .06)
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #0b4bb5, #04a6b5, #d7a238)
}

.footer-grid {
  position: relative;
  gap: 24px
}

.footer-brand-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px
}

.footer-brand-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  object-fit: contain;
  padding: 5px;
  box-shadow: 0 9px 20px rgba(11, 63, 152, .17)
}

.footer-brand h2 {
  margin: 0 0 3px;
  font-size: 22px;
  line-height: 1.18;
  color: #0f2342;
  font-weight: 600 !important
}

.footer-brand-kicker {
  display: inline-flex;
  color: #087d87;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500 !important
}

.footer-brand>p:not(.footer-handle) {
  max-width: 300px;
  color: #53637a
}

.footer-links h3 {
  position: relative;
  padding-bottom: 10px;
  margin: 0 0 4px;
  font-size: 15px;
  color: #0f2342;
  font-weight: 600 !important
}

.footer-links h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  height: 2px;
  border-radius: 99px;
  background: #09a4ac
}

.footer-links a:not(.play-store-badge) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  color: #53637a;
  line-height: 1.35
}

.footer-links a:not(.play-store-badge):hover,
.footer-links a:not(.play-store-badge):focus-visible {
  color: #0b4bb5
}

.footer-socials a {
  font-size: 17px;
  transition: transform .16s ease, box-shadow .16s ease
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 13px 26px rgba(15, 23, 42, .18)
}

.footer-apps {
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(11, 63, 152, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .66)
}

.footer-app-copy {
  margin: 0;
  color: #53637a;
  font-size: 13px;
  line-height: 1.45
}

.play-store-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: -7px 0 -6px;
  border-radius: 10px
}

.play-store-badge img {
  display: block;
  width: 172px;
  max-width: 100%;
  height: auto
}

.play-store-badge:focus-visible {
  outline: 3px solid rgba(11, 94, 215, .25);
  outline-offset: 2px
}

.footer-app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.footer-app-actions a {
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(11, 94, 215, .07);
  font-size: 13px
}

.copyright {
  margin: 25px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(11, 63, 152, .09);
  text-align: center;
  font-size: 13px;
  color: #61728a
}

html[data-theme=dark] .site-footer {
  background: linear-gradient(135deg, rgba(15, 27, 45, .98), rgba(8, 36, 44, .97));
  border-color: rgba(32, 213, 210, .18);
  box-shadow: 0 -6px 32px rgba(0, 0, 0, .18)
}

html[data-theme=dark] .footer-brand h2,
html[data-theme=dark] .footer-links h3 {
  color: #edf5ff
}

html[data-theme=dark] .footer-brand>p:not(.footer-handle),
html[data-theme=dark] .footer-app-copy,
html[data-theme=dark] .footer-links a:not(.play-store-badge),
html[data-theme=dark] .copyright {
  color: #a6b7cb
}

html[data-theme=dark] .footer-apps {
  background: rgba(7, 17, 31, .5);
  border-color: rgba(32, 213, 210, .2)
}

html[data-theme=dark] .footer-app-actions a {
  background: rgba(32, 213, 210, .1)
}

@media (max-width:720px) {
  .site-footer {
    width: calc(100% - 20px);
    margin-top: 28px;
    padding: 20px 14px 14px;
    border-radius: 20px 20px 0 0
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px
  }

  .footer-brand,
  .footer-apps {
    grid-column: 1 / -1
  }

  .footer-brand-heading {
    margin-bottom: 10px
  }

  .footer-brand-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px
  }

  .footer-brand h2 {
    font-size: 20px
  }

  .footer-brand>p:not(.footer-handle) {
    max-width: none;
    font-size: 14px;
    margin-bottom: 9px
  }

  .footer-socials {
    gap: 7px;
    margin-top: 10px
  }

  .footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 16px
  }

  .footer-links {
    gap: 7px;
    min-width: 0
  }

  .footer-links a:not(.play-store-badge) {
    overflow-wrap: anywhere;
    font-size: 13px
  }

  .footer-apps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 13px
  }

  .footer-apps h3,
  .footer-app-copy,
  .footer-app-actions {
    grid-column: 1
  }

  .play-store-badge {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0
  }

  .play-store-badge img {
    width: min(136px, 38vw)
  }

  .footer-app-actions {
    gap: 6px
  }

  .footer-app-actions a {
    padding: 5px 7px;
    font-size: 12px
  }

  .copyright {
    margin-top: 20px;
    padding-top: 12px;
    line-height: 1.45
  }
}

@media (max-width:430px) {
  .footer-apps {
    grid-template-columns: 1fr
  }

  .play-store-badge {
    grid-column: 1;
    grid-row: auto;
    margin-top: -6px
  }

  .play-store-badge img {
    width: 152px
  }
}

.question-feedback-panel {
  margin: 20px 0 28px;
  padding: clamp(18px, 3vw, 26px);
  overflow: hidden;
  border: 1px solid #b8d7ef;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(11, 94, 215, .1), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f0f8ff 54%, #edfbf9 100%);
  box-shadow: 0 22px 54px rgba(15, 45, 78, .12)
}

.question-feedback-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px
}

.question-feedback-head h2 {
  margin: 0 0 5px;
  color: #10243d;
  font-size: clamp(20px, 2.2vw, 24px)
}

.question-feedback-head p {
  margin: 0;
  color: #536982;
  font-size: 15px;
  line-height: 1.5
}

.question-feedback-icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 21px;
  background: linear-gradient(135deg, #0b5ed7, #08a7ad);
  box-shadow: 0 10px 24px rgba(11, 94, 215, .18)
}

.question-feedback-form {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px
}

.question-feedback-form .feedback-field {
  display: grid;
  gap: 11px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid #c9deef;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 28px rgba(21, 52, 81, .07);
  color: #34465d;
  font-size: 14px;
  font-weight: 500
}

.feedback-field-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #102b4b;
  font-weight: 700
}

.feedback-field-title i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 9px;
  color: #0b5ed7;
  background: #ecf4ff
}

.feedback-field-title em {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eff4fa;
  color: #61748c;
  font-size: 11px;
  font-style: normal;
  font-weight: 600
}

.question-feedback-form small {
  color: #687e96;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45
}

.question-feedback-form select,
.question-feedback-form textarea {
  width: 100%;
  min-height: 50px;
  border: 2px solid #adc9df;
  border-radius: 14px;
  padding: 14px 15px;
  color: #17283f;
  background: #fff;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 14px rgba(15, 45, 78, .04);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease
}

.question-feedback-form textarea {
  min-height: 112px
}

.question-feedback-form textarea::placeholder {
  color: #73869e;
  opacity: 1
}

.question-feedback-form select:focus,
.question-feedback-form textarea:focus {
  outline: none;
  border-color: #0b5ed7;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 94, 215, .12)
}

.feedback-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 3px;
  padding: 16px;
  border: 1px solid #bee6dc;
  border-radius: 18px;
  background: linear-gradient(135deg, #eaf5ff, #eafff7);
  box-shadow: 0 12px 30px rgba(5, 167, 125, .08)
}

.feedback-form-actions p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #506982;
  font-size: 13px
}

.feedback-form-actions p i {
  color: #05a77d
}

.question-feedback-form .btn {
  flex: 0 0 auto;
  gap: 9px;
  min-height: 48px;
  padding-inline: 20px
}

.question-feedback-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid #dbe6f0;
  background: #f7fafc;
  color: #516179;
  font-size: 14px
}

.question-feedback-status strong {
  color: #10243d
}

.question-feedback-status p {
  flex-basis: 100%;
  margin: 0;
  color: #34465d
}

.question-feedback-status.status-resolved {
  border-color: #a7dfce;
  background: #eafff4
}

.question-feedback-status.status-pending {
  border-color: #f8d894;
  background: #fffaf0
}

.feedback-login-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px dashed #c8daea;
  border-radius: 14px;
  padding: 15px;
  background: #fff
}

.feedback-login-prompt p {
  margin: 0;
  color: #4c6079
}

html[data-theme=dark] .question-feedback-panel {
  border-color: #294359;
  background: linear-gradient(135deg, #111f30, #102d35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25)
}

html[data-theme=dark] .question-feedback-head h2,
html[data-theme=dark] .question-feedback-status strong,
html[data-theme=dark] .feedback-field-title {
  color: #ecf4ff
}

html[data-theme=dark] .question-feedback-form label,
html[data-theme=dark] .question-feedback-head p,
html[data-theme=dark] .question-feedback-form small,
html[data-theme=dark] .feedback-login-prompt p {
  color: #b8c9db
}

html[data-theme=dark] .question-feedback-form .feedback-field,
html[data-theme=dark] .question-feedback-form select,
html[data-theme=dark] .question-feedback-form textarea,
html[data-theme=dark] .feedback-login-prompt {
  color: #e9f3ff;
  border-color: #34506a;
  background: #102032
}

html[data-theme=dark] .feedback-field-title i {
  background: #183653
}

html[data-theme=dark] .feedback-field-title em {
  color: #b8c9db;
  background: #18334b
}

html[data-theme=dark] .feedback-form-actions {
  background: #10283b
}

html[data-theme=dark] .feedback-form-actions p {
  color: #b8c9db
}

.floating-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  pointer-events: none
}

.floating-action {
  width: 50px;
  height: 50px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 18px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .22);
  transition: transform .2s ease, box-shadow .2s ease
}

.floating-action:hover,
.floating-action:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(15, 23, 42, .28);
  outline: none
}

.floating-action i {
  font-size: 22px
}

.floating-action-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e)
}

.floating-action-top {
  background: linear-gradient(135deg, #0b5ed7, #05a7c8)
}

.floating-action[hidden] {
  display: none
}

.quiz-login-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--muted)
}

.mini-login-btn {
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px
}

@media (max-width: 900px) {
  .question-feedback-form {
    grid-template-columns: 1fr
  }

  .profile-data-form {
    grid-template-columns: 1fr
  }

  .profile-form-grid,
  .consent-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 560px) {
  .gdpr-consent-banner {
    flex-direction: column;
    align-items: stretch;
    left: 10px;
    right: 10px;
    bottom: 10px
  }

  .gdpr-consent-actions {
    min-width: 0
  }

  .gdpr-consent-actions .btn {
    flex: 1
  }

  .question-feedback-panel {
    padding: 16px
  }

  .profile-data-panel {
    padding: 16px
  }

  .profile-form-section {
    padding: 13px
  }

  .premium-theme-grid {
    grid-template-columns: 1fr
  }

  .profile-save-bar {
    align-items: stretch;
    flex-direction: column
  }

  .profile-save-bar .btn {
    justify-content: center;
    width: 100%
  }

  .question-feedback-head {
    gap: 12px
  }

  .feedback-form-actions {
    align-items: stretch;
    flex-direction: column
  }

  .question-feedback-form .btn {
    width: 100%
  }

  .feedback-login-prompt {
    align-items: stretch;
    flex-direction: column
  }

  .feedback-login-prompt .btn {
    width: 100%;
    justify-content: center
  }

  .floating-actions {
    right: 12px;
    bottom: 76px
  }

  .floating-action {
    width: 46px;
    height: 46px;
    border-radius: 16px
  }
}

/* Compact premium scale: keeps the visual upgrade without oversized desktop cards. */
.hero {
  grid-template-columns: minmax(0, 1.75fr) minmax(250px, .82fr);
  gap: clamp(16px, 2.4vw, 24px);
  padding: clamp(22px, 3.4vw, 36px)
}

.hero h1 {
  max-width: 760px;
  line-height: 1.07
}

.hero h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.12
}

.hero p,
.section-lead {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.55
}

.hero-panel {
  padding: clamp(16px, 2.4vw, 22px)
}

.hero-panel::before {
  font-size: 44px;
  right: 14px;
  top: 10px
}

.hero-stats {
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 8px
}

.stat {
  min-width: 0;
  padding: 11px 10px;
  border-radius: 16px
}

.stat strong {
  font-size: clamp(18px, 2vw, 22px);
  padding-bottom: 4px;
  white-space: nowrap
}

.stat span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap
}

.section-title h2 {
  font-size: clamp(22px, 2.8vw, 30px)
}

.grid>.card:not(.subject-card) {
  min-height: 150px;
  padding: 18px
}

.grid>.card:not(.subject-card) h3 {
  display: -webkit-box;
  margin: 24px 0 8px;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(20px, 2.15vw, 28px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
}

.grid>.card:not(.subject-card) p {
  font-size: 13px;
  line-height: 1.35
}

.subject-card {
  min-height: 168px;
  padding: 18px
}

.subject-card h2 {
  display: -webkit-box;
  margin: 9px 0 8px;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 2.08;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
}

.subject-card p,
.subject-card-cta {
  font-size: 13px
}

.icon,
.subject-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  font-size: 13px
}

@media (max-width: 1100px) {
  .exam-feature-strip,
  .exam-taxonomy-grid,
  .exam-landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  section.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    border-radius: 24px
  }

   section.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid>.card:not(.subject-card) {
    min-height: 132px
  }
}

@media (max-width: 430px) {
  .exam-feature-strip,
  .exam-taxonomy-grid,
  .exam-landing-grid {
    grid-template-columns: 1fr
  }

  section.grid {
    grid-template-columns: 1fr
  }
}