:root {
  --green: #08ad65;
  --green-dark: #078a50;
  --green-soft: #e7f8f0;
  --navy: #101638;
  --muted: #7886a6;
  --line: #e4e9f2;
  --danger: #d14343;
  --shadow: 0 10px 30px rgba(16, 22, 56, 0.06);
  --font: Inter, "Noto Serif Malayalam", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--navy);
  background: #eef3f2;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--green); }

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

.stage {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}
.net-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.net-banner[hidden] { display: none !important; }
.net-banner.is-offline { background: #d92d20; }
.net-banner.is-slow { background: #f5b400; color: #1c1403; }
.net-banner.is-online { background: #078a50; }
.net-banner svg { width: 18px; height: 18px; flex: none; }
body.has-net-banner { padding-top: 40px; }
body.has-net-banner .screen {
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
}

.screen {
  width: min(100%, 430px);
  height: 100dvh;
  max-height: 100dvh;
  background:
    radial-gradient(90% 42% at 50% -8%, #e7f8f1 0%, rgba(255, 255, 255, 0) 70%),
    #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  padding:
    calc(18px + max(env(safe-area-inset-top, 0px), var(--pwa-safe-top, 0px)))
    22px
    calc(16px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  overflow: auto;
}

@media (min-width: 800px) {
  .stage { align-items: center; padding: 24px 0; }
  .screen {
    height: min(844px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(16, 22, 56, 0.1);
  }
}

.icon { display: block; }

.splash { justify-content: center; overflow: hidden; }

.splash-center {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: -12vh;
}

.splash-logo {
  margin: 0;
  opacity: 0.16;
  animation: logo-in 1.5s ease forwards;
}

.splash-logo img { width: min(240px, 72vw); height: auto; margin: 0 auto; }

.tagline {
  margin: 14px 0 0;
  color: #128a62;
  letter-spacing: 0.08em;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  animation: logo-in 0.9s ease 0.55s forwards;
}

.waves { position: absolute; inset: auto 0 0; height: 46%; pointer-events: none; }

.wave {
  position: absolute;
  left: -30%;
  width: 160%;
  border-radius: 50%;
  bottom: -28%;
  animation: rise 2.5s cubic-bezier(.22, .8, .24, 1) forwards;
}

.wave-1 { height: 125%; background: #e5f8ef; animation-delay: 0s; }
.wave-2 { height: 92%; background: #8edfba; opacity: 0.95; animation-delay: 0.12s; }
.wave-3 { height: 62%; background: #08ad65; opacity: 0.9; animation-delay: 0.22s; }

.splash-progress {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: calc(36px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  z-index: 3;
}

.splash-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  animation: fill 2.8s ease forwards;
}

@keyframes logo-in { to { opacity: 1; } }
@keyframes rise { from { transform: translateY(78%); } to { transform: translateY(0); } }
@keyframes fill { to { width: 72%; } }

@media (prefers-reduced-motion: reduce) {
  .splash-logo, .tagline, .wave, .splash-progress span { animation: none; opacity: 1; transform: none; }
  .splash-progress span { width: 100%; }
}

.onboard { padding-top: calc(8px + max(env(safe-area-inset-top, 0px), var(--pwa-safe-top, 0px))); }

.skip {
  align-self: flex-end;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 2px 0;
  z-index: 2;
}

.deck { flex: 1; overflow: hidden; min-height: 0; }
.track { display: flex; height: 100%; transition: transform 0.45s cubic-bezier(.22, .8, .3, 1); }
.slide { min-width: 100%; height: 100%; display: flex; flex-direction: column; }

.hero {
  flex: 1;
  min-height: 240px;
  display: grid;
  place-items: center;
  position: relative;
}

.hero-art, .step-art img, .success-art img { width: 168px; height: auto; position: relative; z-index: 1; }

.target { width: min(230px, 70%); height: auto; position: relative; z-index: 1; }

.blob {
  position: absolute;
  border-radius: 50%;
  background: #e7f7ef;
  z-index: 0;
}
.blob-a { width: 210px; height: 210px; }
.blob-b { width: 64px; height: 64px; background: #f4f1c8; right: 18%; top: 18%; }
.blob-c { width: 48px; height: 48px; background: #e7f3d4; left: 14%; bottom: 18%; }

.dot {
  position: absolute;
  border-radius: 50%;
  background: #b7ebcf;
  z-index: 0;
}
.dot-1 { width: 14px; height: 14px; left: 18%; top: 22%; background: #d7f5c8; }
.dot-2 { width: 10px; height: 10px; right: 16%; bottom: 24%; background: #ffe08a; }
.dot-3 { width: 12px; height: 12px; right: 20%; top: 16%; background: #c9f0dc; }
.dot-4 { width: 18px; height: 18px; left: 12%; bottom: 20%; background: #d9f6e6; }
.dot-5 { width: 16px; height: 16px; right: 14%; bottom: 18%; background: #b6ecc8; }

.chip {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--green);
  box-shadow: var(--shadow);
}
.chip-left { left: 12%; top: 22%; background: #e9f9f0; }
.chip-right { right: 12%; top: 34%; background: #fff4d6; color: #e0a106; }
.chip .icon { width: 22px; height: 22px; }

.copy { text-align: center; padding: 0 8px 12px; }
.copy h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.copy p {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.pager {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  padding-top: 8px;
}
.dots { display: flex; justify-content: center; gap: 8px; }
.dot-btn {
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  border-radius: 99px;
  background: #d5deea;
}
.dot-btn.on { width: 22px; background: var(--green); }
.next-btn {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(8, 173, 101, 0.28);
}
.next-btn:hover { background: var(--green-dark); }

.back {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--navy);
  display: grid;
  place-items: center;
  text-decoration: none;
  padding: 0;
  border-radius: 12px;
}
.back .icon { width: 22px; height: 22px; }

.screen.auth,
.screen.signup {
  min-height: 0;
  overflow: hidden;
}
.auth { gap: 12px; }
.auth-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.brand-logo { width: 210px; height: auto; margin: 28px auto 18px; }
.auth h1, .signup h1, .success h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.auth h1, .lede { text-align: center; }
.signup h1, .signup .lede { text-align: left; }
.lede {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.eyebrow {
  margin: 0;
  text-align: center;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 13px;
}

.login-form, .signup-form { margin-top: 18px; }
.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.btn-row .btn, .btn-row .btn-ghost { margin-top: 0; }
.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f3f6f5;
  padding: 4px;
  border-radius: 14px;
  margin: 22px 0 16px;
}
.segment label {
  position: relative;
  text-align: center;
  padding: 10px 8px;
  border-radius: 11px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}
.segment input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segment label:has(input:checked) {
  background: #fff;
  color: var(--green);
  box-shadow: 0 1px 3px rgba(16, 22, 56, 0.08);
}
.login-form [data-login-email] { display: none; }
.login-form:has(input[value="email"]:checked) [data-login-phone] { display: none; }
.login-form:has(input[value="email"]:checked) [data-login-email] { display: block; }

.label {
  display: block;
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field-head .label { margin-bottom: 8px; }
.text-link {
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 0 12px;
  background: #fff;
}
.field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(8, 173, 101, 0.12);
}
.field.invalid { border-color: var(--danger); }
.field input, .field select {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  flex: 1;
  height: 48px;
  font-size: 16px;
}
.field select {
  flex: 0 0 auto;
  width: auto;
  max-width: 92px;
  font-weight: 600;
}
.phone-field select { max-width: 7.4rem; width: 7.4rem; }
.wa-icon { width: 18px; height: 18px; color: var(--green); flex: none; }
.dob-field { gap: 2px; }
.dob-field .field-icon { margin-right: 8px; }
.dob-field .dob-part {
  flex: 0 0 auto;
  width: 2.6ch;
  text-align: center;
  padding: 0;
}
.dob-field .dob-year { width: 5ch; }
.dob-sep { color: var(--navy); font-weight: 700; user-select: none; }
.field input[type="hidden"] { display: none; }
.about-step h1, .subject-step h1, .subject-step .lede, .subject-step .field-error,
.district-step h1, .district-step .lede, .district-step .field-error { text-align: center; }
.about-step .lede, .about-step .label, .about-step .question, .about-step .field-error { text-align: left; }
.field-icon { color: #98a2b8; flex: none; }
.ghost-icon {
  border: 0;
  background: transparent;
  color: #98a2b8;
  padding: 4px;
  display: grid;
  place-items: center;
}
.ghost-icon .eye-off { display: none; }
.ghost-icon.is-visible .eye-on { display: none; }
.ghost-icon.is-visible .eye-off { display: block; }
.ghost-icon .icon { width: 20px; height: 20px; }

.hint { margin: 8px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.field-error { min-height: 0; margin: 6px 2px 0; color: var(--danger); font-size: 13px; line-height: 1.35; }
.field-error:empty { display: none; }
.banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff1f1;
  color: var(--danger);
  font-size: 14px;
}

.question { margin: 18px 0 10px; font-weight: 700; font-size: 15px; }

.choice-row, .ability-row, .yesno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.choice, .ability, .yesno label {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
  padding: 12px 8px 14px;
  font-weight: 600;
}
.choice input, .ability input, .yesno input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.choice img {
  width: 92px;
  height: 104px;
  object-fit: contain;
  margin: 0 auto 8px;
}
.choice span, .ability span, .yesno span { display: block; font-size: 14px; }
.choice:has(input:checked),
.ability:has(input:checked),
.yesno label:has(input:checked) {
  border-color: var(--green);
  background: #f4fbf7;
  box-shadow: 0 0 0 1px var(--green);
}
.choice .tick,
.ability .tick {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  place-items: center;
}
.choice .tick .icon,
.ability .tick .icon { width: 14px; height: 14px; stroke-width: 3; }
.choice:has(input:checked) .tick,
.ability:has(input:checked) .tick { display: grid; }

.ability, .yesno label {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}
.ability-icon { color: var(--green); }
.ability span, .yesno span { display: inline; }

.wa-extra { display: none; margin-top: 4px; }
.signup-form:has(input[name="whatsapp_same"][value="no"]:checked) .wa-extra { display: block; }

.rules-card {
  margin-top: 16px;
  background: #f4fbf7;
  border-radius: 16px;
  padding: 14px 14px 12px;
}
.rules-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
}
.rules li { position: relative; }
.rules li::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #d5deea;
  flex: none;
}
.rule-icon { display: none; width: 16px; height: 16px; flex: none; }
.rules li.met { color: var(--green); }
.rules li.met::before { display: none; }
.rules li.met .rule-icon { display: block; color: var(--green); }

.topbar {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.bars { display: flex; gap: 6px; }
.bars span {
  height: 6px;
  flex: 1;
  border-radius: 99px;
  background: #e6eef2;
}
.bars span.on { background: var(--green); }
.step-count { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

.signup { padding-bottom: 0; }
.signup-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.step-art {
  height: 132px;
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 4px;
}
.step-art .blob-a { width: 120px; height: 120px; }
.step-art img { width: 112px; }
.signup-form .art-female { display: none; }
.signup-form:has(input[name="gender"][value="female"]:checked) .art-male { display: none; }
.signup-form:has(input[name="gender"][value="female"]:checked) .art-female { display: block; }
.district[hidden] { display: none !important; }
.art-badge {
  position: absolute;
  right: 22%;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 2;
}
.art-badge .icon { width: 18px; height: 18px; }

.js .step { display: none; }
.js .step.is-active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}

.dock {
  position: relative;
  flex: none;
  z-index: 2;
  margin-top: auto;
  padding: 12px 0 calc(8px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
}

.btn {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(8, 173, 101, 0.22);
}
.btn:hover { background: var(--green-dark); }
.btn:disabled { opacity: 0.7; cursor: progress; }
.btn .icon { width: 18px; height: 18px; }
.btn-ghost {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid #e1e6f0;
  box-shadow: none;
  margin-top: 4px;
}
.btn-ghost:hover { background: #f7faf8; }

.or-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  margin: 16px 0 12px;
}
.or-line::before, .or-line::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.legal {
  flex: none;
  margin: 8px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.success { text-align: center; }
.success-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.success-art {
  position: relative;
  height: 230px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.success-art img { width: 180px; }
.success-check {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  z-index: 2;
}
.success-check .icon { width: 26px; height: 26px; stroke-width: 2.5; }
.welcome-line { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.welcome-name {
  margin: 2px 0 12px;
  color: var(--green);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.success .lede { max-width: 36ch; margin-left: auto; margin-right: auto; }

button, a, label, .notice-card {
  -webkit-tap-highlight-color: transparent;
}
button, a {
  touch-action: manipulation;
}
button:focus, a:focus, label:focus, .notice-card:focus {
  outline: none;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .notice-card:focus-visible {
  outline: 3px solid rgba(8, 173, 101, 0.4);
  outline-offset: 2px;
}
.field input:focus-visible, .field select:focus-visible { outline: none; }

@media (max-width: 380px) {
  .copy h1, .auth h1, .signup h1 { font-size: 24px; }
  .choice img { width: 76px; height: 84px; }
  .choice, .ability { padding: 10px 8px; }
  .ability span, .choice span { font-size: 13px; }
  .screen.auth, .screen.signup { padding-left: 16px; padding-right: 16px; }
  .btn-row { gap: 8px; }
  .field-head { gap: 8px; }
  .brand-logo { width: min(180px, 70%); }
  .phone-field { gap: 4px; padding-right: 8px; }
  .phone-field select { width: 5.8rem; max-width: 5.8rem; }
}

@media (max-height: 740px) {
  .screen.auth .brand-logo { width: min(168px, 62%); margin: 8px auto 8px; }
  .screen.auth { gap: 8px; }
  .screen.auth .login-form { margin-top: 10px; }
  .signup .step-art { height: auto; max-height: 92px; margin-bottom: 0; }
  .signup .step-art .blob-a { width: 84px; height: 84px; }
  .signup .step-art img { width: auto; max-width: 84px; max-height: 84px; object-fit: contain; }
  .signup .choice img { width: 68px; height: 76px; object-fit: contain; }
  .signup h1, .auth h1 { font-size: 24px; }
}

@media (max-height: 600px) {
  .signup .step-art { display: none; }
  .signup .choice img { width: 60px; height: 64px; }
  .signup .choice { padding: 8px 6px 10px; }
  .screen.auth .brand-logo { width: min(132px, 52%); margin: 4px auto 6px; }
  .screen.auth h1, .signup h1 { font-size: 22px; }
  .legal { margin-top: 4px; }
}

.screen.app {
  overflow: hidden;
  padding-bottom: 0;
}
.app-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding-bottom: 18px;
}
.home-logo { width: 132px; height: auto; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-link { color: var(--navy); display: grid; place-items: center; width: 40px; height: 40px; text-decoration: none; }
.greet { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.greet-name { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.home-lede { text-align: left; margin-top: 6px; }
.search-form { margin: 16px 0; }
.promo {
  position: relative;
  display: block;
  margin-top: 18px;
  min-height: 168px;
  padding: 18px 120px 58px 18px;
  border-radius: 24px;
  background:
    radial-gradient(70px 70px at 78% 18%, rgba(142, 214, 176, 0.55), transparent 70%),
    radial-gradient(46px 46px at 62% 78%, rgba(8, 173, 101, 0.16), transparent 70%),
    linear-gradient(180deg, #e8f8ef 0%, #f4fbf7 100%);
  text-decoration: none;
  color: var(--navy);
  overflow: hidden;
}
.promo-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.promo-blob-a { width: 72px; height: 72px; right: 108px; top: -26px; background: rgba(186, 230, 206, 0.7); }
.promo-blob-b { width: 28px; height: 28px; right: 78px; bottom: 28px; background: rgba(8, 173, 101, 0.22); }
.promo-kicker, .promo-title { position: relative; z-index: 1; }
.promo-kicker { margin: 0; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.promo-title { margin: 10px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.promo img { position: absolute; right: -6px; bottom: 0; width: 132px; height: auto; object-fit: contain; object-position: right bottom; }
.promo-go {
  position: absolute;
  left: 18px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 1;
}
.promo-go .icon { width: 18px; height: 18px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 10px; }
.section-head h2 { margin: 0; font-size: 18px; }
.section-head a, .section-head button { color: var(--green); font-size: 13px; font-weight: 600; text-decoration: none; border: 0; background: transparent; font-family: inherit; padding: 0; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quick-grid a, .quick-grid button {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  text-decoration: none;
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 0;
}
.quick-grid .icon { width: 22px; height: 22px; padding: 10px; box-sizing: content-box; background: #f4f7f8; border-radius: 16px; color: var(--navy); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f4f7f8;
  color: var(--navy);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.chip-link .icon { width: 16px; height: 16px; }
.chip-link.on { background: var(--green); color: #fff; }
.course-list { display: grid; gap: 12px; margin-top: 12px; }
.course-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #eef2f6;
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.course-main { flex: 1; min-width: 0; }
.course-main h3, .delivery, .course-meta, .price, .progress-label { margin: 0; }
.delivery { color: var(--green); font-size: 12px; font-weight: 700; }
.course-main h3 { margin-top: 4px; font-size: 16px; }
.course-meta, .progress-label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.price { margin-top: 8px; font-weight: 700; }
.round-go {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #e7f8f0;
  color: var(--green);
  display: grid;
  place-items: center;
  flex: none;
}
.progress-track { height: 6px; border-radius: 99px; background: #e6eef2; margin-top: 8px; overflow: hidden; }
.progress-track span { display: block; height: 100%; background: var(--green); }
.tabbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 999px;
  margin: 4px 0 calc(8px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  padding: 8px 12px;
  box-shadow: 0 10px 28px rgba(16, 22, 56, 0.1);
}
.tabbar a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
}
.tab-icon {
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  flex: none;
}
.tabbar .tab-icon.home {
  -webkit-mask: url("nav/home.png") center / contain no-repeat;
  mask: url("nav/home.png") center / contain no-repeat;
}
.tabbar .tab-icon.library {
  -webkit-mask: url("nav/library.png") center / contain no-repeat;
  mask: url("nav/library.png") center / contain no-repeat;
}
.tabbar .tab-icon.courses {
  -webkit-mask: url("nav/courses.png") center / contain no-repeat;
  mask: url("nav/courses.png") center / contain no-repeat;
}
.tabbar .tab-icon.profile {
  -webkit-mask: url("nav/profile.png") center / contain no-repeat;
  mask: url("nav/profile.png") center / contain no-repeat;
}
.tabbar .tab-label { display: none; }
.tabbar .icon { width: 22px; height: 22px; }
.tabbar a.on {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
}
.tabbar a.on .tab-label { display: inline; white-space: nowrap; }
.tabbar a.on .icon path,
.tabbar a.on .icon polygon { fill: currentColor; }
.profile-card, .menu-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
}
.profile-card {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #eef2f6;
  border-radius: 18px;
}
.profile-card img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: #e7f8f0; }
.profile-card strong, .profile-card small { display: block; }
.profile-card small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.profile-card span { flex: 1; }
.menu-list { display: grid; margin-top: 8px; }
.menu-list a { padding: 14px 4px; border-bottom: 1px solid #f2f4f8; font-weight: 600; }
.menu-list a span { flex: 1; }
.menu-list .icon, .profile-card > .icon { width: 20px; height: 20px; color: #667085; }
.district-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: center; }
.district {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f3fbf7;
  border: 1.5px solid #e5f6ee;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.district span, .subject-pill span { min-width: 0; overflow-wrap: anywhere; }
.district input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.district .pin-icon { width: 16px; height: 16px; color: var(--green); }
.district:has(input:checked) { background: var(--green); color: #fff; border-color: var(--green); }
.district:has(input:checked) .pin-icon { color: #fff; }
.course-step .district-grid {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.course-step .district {
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.course-step .district span { min-width: 0; overflow-wrap: anywhere; }
.course-step .district .course-icon { width: 16px; height: 16px; color: var(--green); flex: none; }
.course-step .district:has(input:checked) .course-icon { color: #fff; }
.course-step .course-other {
  width: auto;
  max-width: max-content;
  align-self: center;
  justify-content: center;
}
.subject-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: center; }
.subject-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f3fbf7;
  border: 1.5px solid #e5f6ee;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
  line-height: 1.3;
}
.subject-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.subject-pill .subject-icon { width: 16px; height: 16px; color: var(--green); }
.subject-pill .tick {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  place-items: center;
}
.subject-pill .tick .icon { width: 12px; height: 12px; }
.subject-pill:has(input:checked) { background: var(--green); color: #fff; border-color: var(--green); }
.subject-pill:has(input:checked) .subject-icon { color: #fff; }
.subject-pill:has(input:checked) .tick { display: grid; }
.icon-search { display: flex; align-items: center; gap: 4px; }
.icon-search input {
  width: 120px;
  border: 0;
  background: #f4f7f8;
  border-radius: 999px;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
}
.icon-search button { border: 0; background: transparent; color: var(--navy); display: grid; place-items: center; }
.app h1 { margin-top: 8px; }

.install-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
}
.install-prompt p { margin: 0; flex: 1; font-size: 14px; line-height: 1.4; }
.install-action { width: auto; height: 40px; padding: 0 16px; flex: none; }
.install-dismiss {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px;
  flex: none;
}

.home-screen {
  padding-left: 18px;
  padding-right: 18px;
  background:
    radial-gradient(160px 160px at 96% 4%, rgba(176, 228, 202, 0.95), transparent 70%),
    radial-gradient(240px 220px at 112% 16%, rgba(214, 244, 228, 0.98), transparent 68%),
    radial-gradient(110px 110px at 68% 12%, rgba(8, 173, 101, 0.14), transparent 70%),
    #fff;
}
.home-screen .brand-lockup { display: grid; gap: 0; }
.home-screen .home-logo { width: 150px; height: auto; }
.home-screen .brand-tag {
  margin: -2px 0 0;
  padding-left: 40px;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.home-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.round-tool {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eef2f6;
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.06);
  color: var(--navy);
  display: grid;
  place-items: center;
  text-decoration: none;
}
.round-tool .icon { width: 20px; height: 20px; }
.bell-asset { width: 22px; height: 22px; object-fit: contain; display: block; }
.coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #eef2f6;
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.06);
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
}
.coin-pill b { font-size: 14px; }
.coin-pill .gold-coin, .coin-pill svg { width: 22px; height: 22px; }
img.gold-coin { display: block; object-fit: contain; background: transparent; flex: none; }
.bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef3b3b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
.home-screen .greet { margin: 18px 0 0; color: #8b95ad; font-size: 16px; font-weight: 500; }
.home-screen .greet-name { margin: 2px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.home-screen .home-lede { margin-top: 8px; max-width: 28ch; color: #8b95ad; font-size: 15px; line-height: 1.45; }
.home-screen .section-head { align-items: center; margin: 22px 0 12px; }
.home-screen .section-head h2 { font-size: 20px; letter-spacing: -0.02em; }
.home-screen .section-head a, .home-screen .section-head button { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; cursor: pointer; }
.home-screen .section-head .icon { width: 16px; height: 16px; }
.home-screen .quick-grid { gap: 6px; }
.home-screen .quick-grid a, .home-screen .quick-grid button {
  border-radius: 18px;
  padding: 8px 2px 8px;
  min-height: 96px;
  align-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 8px 18px rgba(16, 40, 32, 0.05);
}
.home-screen .quick-grid .icon { width: 26px; height: 26px; padding: 0; background: transparent; border-radius: 0; }
.home-screen .quick-grid .quick-art,
.quick-sheet-grid .quick-art { display: grid; place-items: center; width: 52px; height: 52px; max-width: 100%; }
.home-screen .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-screen .quick-grid .quick-art { width: 48px; height: 48px; background: transparent; }
.home-screen .quick-grid a.qa-tone-lilac,
.quick-sheet-grid a.qa-tone-lilac,
.home-screen .quick-grid a.qa-tone-sky,
.quick-sheet-grid a.qa-tone-sky,
.home-screen .quick-grid a.qa-tone-mint,
.quick-sheet-grid a.qa-tone-mint,
.home-screen .quick-grid a.qa-tone-aqua,
.quick-sheet-grid a.qa-tone-aqua,
.home-screen .quick-grid a.qa-tone-sand,
.quick-sheet-grid a.qa-tone-sand,
.home-screen .quick-grid a.qa-tone-peach,
.quick-sheet-grid a.qa-tone-peach { background: #e7f8ef; }
.qa-png {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
}
.home-screen .quick-grid .qa-icon,
.quick-sheet-grid .qa-icon { width: 52px; height: 52px; max-width: 100%; }
.home-screen .quick-grid .icon-3d { width: 40px; height: 40px; }
.home-screen .quick-grid a,
.home-screen .quick-grid button { background: #e7f8ef; }
.home-screen .quick-grid .gift-art { width: 34px; height: 34px; object-fit: contain; }
.qa-library {
  display: block;
  width: 40px;
  height: 40px;
  background: var(--green);
  -webkit-mask: url("nav/library.png") center / contain no-repeat;
  mask: url("nav/library.png") center / contain no-repeat;
}
.qa-my-exam { display: grid; place-items: center; width: 40px; height: 40px; color: var(--green); }
.qa-my-exam .icon { width: 32px; height: 32px; padding: 0; background: transparent; border-radius: 0; }
.home-screen .quick-grid a,
.quick-sheet-grid a { min-width: 0; }
.home-screen .quick-grid a > span:last-child,
.quick-sheet-grid a > span:last-child {
  min-width: 0;
  max-width: 100%;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.home-screen .quick-grid a > span:last-child {
  white-space: normal;
  overflow-wrap: normal;
  letter-spacing: -0.03em;
}
.qa-icon { display: block; width: 40px; height: 40px; color: var(--green); }
.qa-icon svg,
.qa-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qa-icon[data-qa="reward"] { position: relative; }
.qa-icon[data-qa="reward"]::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.tabbar .qa-icon { width: 22px; height: 22px; color: inherit; }
.account-well .qa-icon,
.exam-hub-mark .qa-icon { width: 22px; height: 22px; }
.account-well .qa-icon:has(img),
.exam-hub-mark .qa-icon:has(img) { width: 34px; height: 34px; }
.course-thumb .qa-icon { width: 62px; height: 62px; }
.classes-book .qa-icon { width: 38px; height: 38px; }
.rewards-balance .qa-icon { width: 48px; height: 48px; flex: none; }
.qa-exam,
.qa-goal,
.qa-wallet,
.qa-flap,
.qa-support,
.qa-media,
.qa-wave,
.qa-reward,
.qa-bar {
  transform-box: fill-box;
  transform-origin: center;
}
.qa-bar { transform-origin: center bottom; }
.qa-flap { transform-origin: center bottom; }
.qa-icon[data-qa="exam"].is-qa-play img,
.qa-icon[data-qa="goals"].is-qa-play img,
.qa-icon[data-qa="payments"].is-qa-play img,
.qa-icon[data-qa="classes"].is-qa-play img { animation: qa-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa-icon[data-qa="progress"].is-qa-play .qa-bar { animation: qa-grow 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.qa-icon[data-qa="progress"].is-qa-play .qa-bar:nth-child(2) { animation-delay: 50ms; }
.qa-icon[data-qa="progress"].is-qa-play .qa-bar:nth-child(3) { animation-delay: 100ms; }
.qa-icon[data-qa="reward"].is-qa-play .qa-reward { animation: qa-gift 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa-icon[data-qa="reward"].is-qa-play::after { animation: qa-spark 420ms ease; }
.qa-icon[data-qa="support"].is-qa-play .qa-support { animation: qa-bounce 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa-icon[data-qa="media"].is-qa-play .qa-wave { animation: qa-slide 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes qa-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes qa-rise {
  0% { transform: translateY(0); }
  45% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@keyframes qa-grow {
  0% { transform: scaleY(0.45); }
  100% { transform: scaleY(1); }
}
@keyframes qa-flap {
  0% { transform: translateY(0); }
  45% { transform: translateY(-2.5px); }
  100% { transform: translateY(0); }
}
@keyframes qa-gift {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-3px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes qa-spark {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}
@keyframes qa-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  70% { transform: translateY(-1px); }
}
@keyframes qa-slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .qa-icon.is-qa-play,
  .qa-icon.is-qa-play *,
  .qa-icon.is-qa-play::after { animation: none !important; }
}
.home-screen .subject-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.home-screen .subject-pills .subject-pill { text-decoration: none; border: 0; padding: 8px 11px; font-size: 13px; }
.home-screen .subject-pills .subject-pill .icon { width: 16px; height: 16px; }
.home-screen .subject-pills .mint { background: #e7f6ee; }
.home-screen .subject-pills .mint .icon { color: #12a36a; }
.home-screen .subject-pills .lilac { background: #f3eefe; }
.home-screen .subject-pills .lilac .icon { color: #8b5cf6; }
.home-screen .subject-pills .peach { background: #fbf3e4; }
.home-screen .subject-pills .peach .icon { color: #e09a3e; }
.home-screen .subject-pills .sky { background: #e7f1fb; }
.home-screen .subject-pills .sky .icon { color: #4c8dff; }
.home-screen .subject-pills .rose { background: #fde8f1; }
.home-screen .subject-pills .rose .icon { color: #e2559c; }
.home-screen .subject-pills .foam { background: #e5f8ef; }
.home-screen .subject-pills .foam .icon { color: #12a36a; }

@media (max-width: 360px) {
  .tabbar { margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; }
  .tabbar a { width: 36px; }
  .tabbar a.on { padding: 0 12px; font-size: 13px; gap: 6px; }
  .home-screen .quick-grid { gap: 4px; }
  .home-screen .quick-grid a, .home-screen .quick-grid button { font-size: 9px; min-height: 88px; padding: 6px 1px 6px; }
  .home-screen .quick-grid .quick-art { width: 42px; height: 42px; }
  .home-screen .promo { padding-right: 120px; }
  .home-screen .promo img { width: 118px; }
}

.courses-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 6px;
}
.courses-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.courses-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.courses-screen .round-tool { width: 40px; height: 40px; }
.course-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0 8px 0 14px;
  height: 48px;
  border-radius: 16px;
  background: #f4f7f8;
  border: 1px solid #eef2f6;
}
.course-search .icon { width: 18px; height: 18px; color: #98a2b8; flex: none; }
.course-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  height: 46px;
  font-size: 13px;
  outline: none;
}
.filter-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--navy);
  display: grid;
  place-items: center;
  text-decoration: none;
  flex: none;
}
.courses-screen .filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  scrollbar-width: none;
}
.courses-screen .filter-row::-webkit-scrollbar { display: none; }
.courses-screen .filter-row a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3f5f8;
  color: var(--navy);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.courses-screen .filter-row a.on { background: var(--green); color: #fff; }
.courses-screen .filter-row .count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 0 0 1px #e4efe8;
}
.courses-screen .filter-row a.on .count-badge { color: var(--green); box-shadow: none; }
.courses-screen .filter-row .icon { width: 14px; height: 14px; }
.courses-screen .section-head { align-items: center; }
.courses-screen .section-head a { display: inline-flex; align-items: center; gap: 2px; }
.courses-screen .section-head .icon { width: 16px; height: 16px; }
.section-note { margin: -4px 0 0; color: var(--muted); font-size: 13px; }
.course-thumb {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: none;
}
.course-thumb .icon { width: 28px; height: 28px; }
.course-thumb.is-photo {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 16px;
  background: #f4f7fb;
}
.tone-mint { background: #e7f8ef; color: #08ad65; }
.tone-lilac { background: #eef0fb; color: #5b4b8a; }
.tone-peach { background: #fbf3e4; color: #e09a3e; }
.tone-sky { background: #e7f1fb; color: #3b6cb3; }
.tone-rose { background: #fde8f1; color: #e2559c; }
.tone-foam { background: #e5f8ef; color: #12a36a; }
.offer-card, .owned-card {
  border: 1px solid #eef2f6;
  border-radius: 22px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 22, 56, 0.05);
}
.offer-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: start; }
.offer-card > form { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.offer-card > form .fav-btn { pointer-events: auto; }
.owned-main { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: start; }
.courses-screen .offer-card,
.courses-screen .owned-card { min-height: 132px; }
.courses-screen .offer-copy h3 { padding-right: 28px; }
.offer-copy { min-width: 0; }
.offer-copy h3, .detail-hero h1 { margin: 0; font-size: 16px; letter-spacing: -0.02em; line-height: 1.25; }
.detail-hero h1 { font-size: 20px; }
.offer-copy .summary { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; color: #667085; font-size: 12px; font-weight: 600; }
.meta-row span { display: inline-flex; align-items: center; gap: 4px; }
.meta-row .icon { width: 14px; height: 14px; }
.offer-side { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 10px; }
.price-stack { display: grid; gap: 1px; }
.price-old { margin: 0; color: #98a2b8; text-decoration: line-through; font-size: 12px; font-weight: 600; }
.price-now { margin: 0; color: var(--green); font-size: 16px; font-weight: 800; }
.detail-btn {
  border: 1.5px solid #b7ebc9;
  background: #fff;
  color: var(--green);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.owned-card .progress-row, .courses-screen .progress-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.owned-card .progress-track, .courses-screen .progress-row .progress-track { flex: 1; margin-top: 0; }
.owned-card .progress-row strong, .courses-screen .progress-row strong { color: var(--green); font-size: 13px; }
.continue-btn {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.continue-btn .icon { width: 16px; height: 16px; }
.detail-hero { margin-top: 8px; }
.overview-frame { width: 100%; aspect-ratio: 16 / 9; margin-top: 12px; border: 0; border-radius: 16px; background: #101638; }
.courses-screen .outline h2 { margin: 16px 0 6px; font-size: 16px; }
.courses-screen .outline p { margin: 0 0 6px; color: #3d4a63; }
.learn-screen {
  background:
    radial-gradient(160px 160px at 96% 4%, rgba(176, 228, 202, 0.95), transparent 70%),
    radial-gradient(240px 220px at 112% 16%, rgba(214, 244, 228, 0.9), transparent 68%),
    #fff;
}
.learn-screen .brand-lockup { display: grid; gap: 0; }
.learn-screen .home-logo { width: 148px; }
.learn-screen .brand-tag {
  margin: -2px 0 0;
  padding-left: 40px;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}
.learn-screen [hidden] { display: none !important; }
.learn-screen .learn-title { margin: 4px 0 0; font-size: 28px; line-height: 1.25; letter-spacing: -0.03em; }
.learn-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.learn-picks {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.learn-picks::-webkit-scrollbar { display: none; }
.learn-pick {
  flex: 0 0 168px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.04);
  color: var(--navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learn-pick.is-on { border-color: var(--green); background: #f3fbf7; }
.learn-pick img, .learn-pick-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}
.learn-pick-icon { display: grid; place-items: center; }
.learn-pick-icon .icon { width: 18px; height: 18px; }
.learn-pick-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.learn-pick-copy strong { font-size: 13px; line-height: 1.25; }
.learn-pick .progress-track { margin: 0; }
.learn-pick small { color: var(--green); font-size: 12px; font-weight: 700; }
.learn-dots { display: flex; justify-content: center; gap: 6px; min-height: 8px; margin: 8px 0 2px; }
.learn-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: #d5e0ea; }
.learn-dots button.is-on { width: 16px; background: var(--green); }
.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #d9f3e6;
  border-radius: 22px;
  background: linear-gradient(180deg, #e9f9f1 0%, #f7fdf9 100%);
  box-shadow: 0 8px 20px rgba(8, 173, 101, 0.06);
  overflow: hidden;
}
.learn-badge {
  display: inline-flex;
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}
.learn-lock-note { margin: 6px 0 0; color: #b54708; font-size: 13px; font-weight: 700; }
.learn-upgrade { display: inline-flex; margin-top: 12px; }
.learn-sheet-status { color: #b54708; font-size: 12px; font-weight: 700; }
.learn-hero h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -0.03em; line-height: 1.15; }
.learn-meta { margin: 6px 0 0; color: #98a2b3; font-size: 13px; font-weight: 600; }
.learn-hero-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.learn-hero-progress .progress-track { flex: 1; margin: 0; }
.learn-hero-progress strong { color: var(--green); font-size: 13px; }
.learn-hero-art { width: 108px; height: 132px; object-fit: contain; object-position: bottom; }
.learn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.learn-stats.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.learn-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  text-align: center;
}
.learn-stats .icon { width: 18px; height: 18px; color: var(--green); }
.learn-stats small { color: #98a2b3; font-size: 11px; font-weight: 600; }
.learn-stats b { font-size: 13px; font-weight: 800; }
.learn-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.learn-actions button,
.learn-actions a {
  --tone: var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 132px;
  padding: 16px 6px 14px;
  border: 0;
  border-radius: 22px;
  background: #e7f8ef;
  box-shadow: 0 8px 18px rgba(16, 40, 32, 0.05);
  color: var(--navy);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.learn-actions > :nth-child(2),
.learn-actions > :nth-child(3) { --tone: var(--green); background: #e7f8ef; }
.learn-actions .icon { width: 22px; height: 22px; color: var(--tone); }
.learn-action-art { width: 76px; height: 76px; max-width: 100%; display: grid; place-items: center; }
.learn-action-art svg { filter: drop-shadow(0 6px 6px rgba(16, 22, 56, 0.12)); }
.learn-actions .learn-action-art .qa-icon { width: 76px; height: 76px; }
.learn-actions .learn-action-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: normal;
}
.classes-book .qa-icon img {
  mix-blend-mode: darken;
  object-fit: contain;
  background: transparent;
}
.learn-actions .learn-action-art .icon { width: 56px; height: 56px; color: inherit; }
.learn-actions b { margin-top: 6px; font-size: 13px; font-weight: 800; }
@media (max-width: 360px) {
  .learn-actions { gap: 6px; }
  .learn-actions a { min-height: 112px; padding: 12px 2px 10px; }
  .learn-action-art,
  .learn-actions .learn-action-art .qa-icon { width: 62px; height: 62px; }
  .learn-actions b { font-size: 12px; }
}
.daily-goals { margin-top: 12px; }
.daily-goal-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.daily-goal-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 118px;
  padding: 10px 3px 8px;
  border-radius: 16px;
  background: #e7f8ef;
  box-shadow: 0 6px 14px rgba(16, 40, 32, 0.05);
  color: var(--navy);
  text-align: center;
  text-decoration: none;
}
.daily-goal-row a:nth-child(2) { background: #f3eefe; }
.daily-goal-row a:nth-child(3) { background: #eef4ff; }
.daily-goal-row a:nth-child(4) { background: #fff6e8; }
.daily-goal-row img {
  width: 44px;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
}
.daily-goal-row b {
  max-width: 100%;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
@media (max-width: 360px) {
  .daily-goal-row { gap: 4px; }
  .daily-goal-row a { min-height: 104px; padding: 8px 2px; border-radius: 14px; }
  .daily-goal-row img { width: 36px; height: 36px; }
  .daily-goal-row b { font-size: 15px; }
}
.learn-actions small { color: #98a2b3; font-size: 10px; font-weight: 600; line-height: 1.2; }
.learn-action-go {
  width: 22px;
  height: 22px;
  margin-top: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tone);
}
.learn-action-go .icon { width: 12px; height: 12px; transform: rotate(90deg); }
.learn-actions button.is-on { box-shadow: inset 0 0 0 1.5px var(--tone); }
.learn-split { display: grid; gap: 10px; margin-top: 10px; }
.learn-card {
  padding: 14px;
  border: 1px solid #eef2f6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 22, 56, 0.04);
}
.learn-card h3, .learn-section { margin: 0; font-size: 16px; }
.learn-card > p, .learn-note { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.learn-streak { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.learn-streak-ring {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p, 0) * 1%), #e7f3ec 0);
}
.learn-streak-ring > b {
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
}
.learn-streak > span b, .learn-streak small { display: block; }
.learn-streak small { color: #98a2b3; font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.35; }
.learn-details {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.learn-details .icon { width: 14px; height: 14px; }
.learn-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 16px; min-width: 0; }
.learn-week span { display: grid; justify-items: center; gap: 6px; min-width: 0; color: #98a2b3; font-size: 11px; font-weight: 700; }
.learn-week i {
  width: min(28px, 100%);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: #eef2f6;
  display: grid;
  place-items: center;
}
.learn-week .is-today { color: var(--green); }
.learn-week .is-today i { position: relative; box-shadow: inset 0 0 0 2px var(--green); background: #fff; }
.learn-week .is-today i::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  transform: translateX(-50%);
}
.learn-week .is-done i,
.learn-week .is-today.is-done i {
  background: transparent;
  box-shadow: none;
}
.learn-week .is-done .icon-3d { width: 30px; height: 30px; }
.activity-card .learn-card-head { align-items: flex-start; }
.activity-card .learn-card-head p { margin: 2px 0 0; }
.activity-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.activity-link .icon { width: 14px; height: 14px; }
.activity-layout { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; min-width: 0; }
.activity-streak {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#12b76a calc(var(--p, 0) * 1%), #e7f3ec 0);
}
.activity-streak > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #fff;
  color: #f97316;
  text-align: center;
}
.activity-streak svg { width: 18px; height: 18px; }
.activity-streak b { font-size: 18px; line-height: 1; color: var(--navy); }
.activity-streak small { color: #98a2b3; font-size: 10px; font-weight: 700; }
.activity-card .learn-week { margin-top: 0; }
.activity-card .learn-week i { color: #98a2b3; background: #f2f4f7; }
.activity-card .learn-week svg,
.activity-card .learn-week .icon { width: 16px; height: 16px; }
.activity-card .learn-week .is-active i { color: #12b76a; background: #e7f8ef; }
.activity-card .learn-week .is-done i { color: #b54708; background: #fff6e8; }
.activity-card .learn-week .is-missed i { color: #d92d20; background: #fef3f2; }
.activity-card .learn-week .is-idle i { color: #98a2b3; background: #f2f4f7; }
.activity-card .learn-week .is-today i { box-shadow: inset 0 0 0 2px var(--green); }
.activity-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}
.activity-note,
.activity-stats span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: #f6fbf8;
}
.activity-note svg { width: 22px; height: 22px; flex: none; color: #f97316; }
.activity-note b,
.activity-stats b { display: block; font-size: 13px; }
.activity-note small,
.activity-stats small { display: block; margin-top: 2px; color: #667085; font-size: 11px; font-weight: 600; line-height: 1.35; }
.activity-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.activity-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border-radius: 16px;
  background: #fff8e8;
}
.activity-stat + .activity-stat { background: #eef8f3; }
.activity-stat svg,
.activity-stat .icon { width: 18px; height: 18px; flex: none; }
.activity-stat svg { color: #f97316; }
.activity-stat .icon { color: var(--green); }
.activity-stat > span { display: block; min-width: 0; padding: 0; background: transparent; }
.activity-stat small,
.activity-stat b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-pair { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; width: 100%; min-width: 0; }
.progress-card { min-width: 0; width: 100%; }
.progress-card h3 { font-size: 15px; }
.progress-body { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; }
.progress-ring {
  width: 64px;
  height: 64px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#12b76a calc(var(--p, 0) * 1%), #e7f3ec 0);
}
.progress-ring.exam { background: conic-gradient(#2e90fa calc(var(--p, 0) * 1%), #eef4ff 0); }
.progress-ring strong {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-size: 13px;
}
.progress-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 0; }
.progress-body li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; }
.progress-body li span { flex: 1; min-width: 0; color: #475467; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-body li b { flex: none; white-space: nowrap; }
.progress-body .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #98a2b3; }
.progress-body .dot.green { background: #12b76a; }
.progress-body .dot.blue { background: #2e90fa; }
.subject-analysis { margin-top: 10px; }
.subject-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(108px, 1fr);
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.subject-row::-webkit-scrollbar { display: none; }
.subject-mini {
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: #f8fafc;
}
.subject-mini-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: var(--green);
}
.subject-mini-icon .icon { width: 16px; height: 16px; }
.subject-mini b { display: block; margin-top: 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subject-mini strong { display: block; margin-top: 2px; font-size: 12px; }
.subject-mini-bar { display: block; height: 4px; margin-top: 8px; border-radius: 99px; background: #e6eef2; overflow: hidden; }
.subject-mini-bar i { display: block; height: 100%; border-radius: inherit; background: #98a2b3; }
.subject-mini.tone-green { background: #e7f8ef; }
.subject-mini.tone-green .subject-mini-bar i,
.subject-mini.tone-green strong { color: #078a50; background: #12b76a; }
.subject-mini.tone-green strong { background: transparent; }
.subject-mini.tone-blue { background: #eef4ff; }
.subject-mini.tone-blue .subject-mini-bar i { background: #2e90fa; }
.subject-mini.tone-blue strong { color: #175cd3; }
.subject-mini.tone-yellow { background: #fff8e8; }
.subject-mini.tone-yellow .subject-mini-bar i { background: #f5b400; }
.subject-mini.tone-yellow strong { color: #b54708; }
.subject-mini.tone-red { background: #fef3f2; }
.subject-mini.tone-red .subject-mini-bar i { background: #f04438; }
.subject-mini.tone-red strong { color: #b42318; }
.subject-mini.tone-grey strong { color: #667085; }
@media (max-width: 360px) {
  .activity-layout { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
  .activity-streak { width: 68px; height: 68px; }
  .activity-streak > span { width: 52px; height: 52px; }
  .activity-streak b { font-size: 16px; }
  .activity-card .learn-week { gap: 2px; }
  .activity-card .learn-week span { font-size: 9px; gap: 4px; }
}
.learn-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.learn-card-head > div { min-width: 0; }
.learn-card-head b { color: var(--green); }
.learn-today { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.learn-today li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: 13px; }
.learn-today span { display: inline-flex; align-items: center; gap: 6px; }
.learn-today .icon { width: 14px; height: 14px; }
.learn-today .progress-track { grid-column: 1 / -1; margin: 0; }
.learn-progress-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.learn-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), #e6eef2 0);
  display: grid;
  place-items: center;
  flex: none;
}
.learn-ring strong {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.learn-level-kicker { margin: 0; color: var(--green); font-size: 13px; font-weight: 700; }
.learn-progress h4 { margin: 2px 0 0; font-size: 16px; }
.learn-progress p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.learn-levels, .learn-subjects { display: flex; gap: 8px; margin-top: 12px; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.learn-levels::-webkit-scrollbar, .learn-subjects::-webkit-scrollbar { display: none; }
.learn-level, .learn-subject {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learn-level { width: 168px; padding: 10px; }
.learn-level.is-on { border-color: var(--green); background: #f3fbf7; }
.learn-level-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #e7f8ef;
  color: var(--green);
  flex: none;
}
.learn-level-icon .icon { width: 16px; height: 16px; }
.learn-level:nth-child(2) .learn-level-icon { background: #f3eefe; color: #7a5af8; }
.learn-level:nth-child(3) .learn-level-icon { background: #e7f2ff; color: #2e90fa; }
.learn-level:nth-child(4) .learn-level-icon { background: #fff6df; color: #f79009; }
.learn-level b, .learn-level small, .learn-level em { display: block; }
.learn-level small { color: var(--muted); font-size: 11px; margin: 2px 0; }
.learn-level .progress-track { margin: 0; }
.learn-level em { margin-top: 4px; color: var(--green); font-size: 12px; font-style: normal; font-weight: 700; }
.learn-section { margin-top: 12px; }
.learn-subject { padding: 8px 12px; border-radius: 14px; }
.learn-subject .icon { width: 16px; height: 16px; color: var(--green); }
.learn-subject.is-on { border-color: var(--green); background: #f3fbf7; }
.learn-subject small { color: var(--green); font-weight: 700; }
.learn-list-head { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.learn-list-head h3 { margin: 0; font-size: 16px; }
.learn-list-head a { display: inline-flex; align-items: center; gap: 2px; color: var(--green); font-size: 13px; font-weight: 700; text-decoration: none; }
.learn-list-head .icon { width: 16px; height: 16px; }
.learn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
}
.learn-row > span:nth-child(2) { min-width: 0; flex: 1; }
.learn-row b, .learn-row small { display: block; }
.learn-row small, .learn-state { color: var(--muted); font-size: 12px; }
.learn-row-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e7f8ef;
  color: var(--green);
  flex: none;
}
.learn-row-icon.exam { background: #f3eefe; color: #7a5af8; }
.learn-row-icon.module { background: #e7f2ff; color: #2e90fa; }
.learn-row-icon .icon { width: 18px; height: 18px; }
.learn-state { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; font-weight: 700; }
.learn-state .icon { width: 14px; height: 14px; }
.learn-state.is-completed { color: var(--green); }
.learn-state i { width: 14px; height: 14px; border: 1.5px solid #c5d0dc; border-radius: 50%; }
.learn-row > .icon { width: 16px; height: 16px; color: var(--muted); flex: none; }
.learn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learn-cap {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.08);
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
}
.learn-cap .icon { width: 22px; height: 22px; }
.learn-hero { position: relative; display: block; }
.learn-hero-copy { position: relative; z-index: 1; padding-right: 0; }
.learn-hero .learn-stats { position: relative; z-index: 1; }
.learn-hero-art {
  position: absolute;
  right: 4px;
  top: 8px;
  width: 104px;
  height: 120px;
  object-fit: contain;
  object-position: bottom;
}
.learn-hero-art.is-photo { width: 84px; height: 84px; top: 16px; border-radius: 18px; object-fit: cover; }
.learn-screen .learn-split { grid-template-columns: 1fr; }
@media (max-width: 380px) {
  .learn-hero { grid-template-columns: 1fr; }
  .learn-hero-art { width: 88px; height: 88px; justify-self: end; }
}
@media (min-width: 800px) {
  .learn-split { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
  .learn-pick { flex-basis: 220px; }
}
.learn-screen .app-body {
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-x: none;
  padding-bottom: 20px;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
}
.learn-screen .learn-picks,
.learn-screen .subject-row,
.learn-screen .learn-levels,
.learn-screen .learn-subjects,
.learn-screen .learn-sheet-list {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
}
.learn-screen .app-body::-webkit-scrollbar,
.learn-screen .learn-picks::-webkit-scrollbar,
.learn-screen .subject-row::-webkit-scrollbar,
.learn-screen .learn-levels::-webkit-scrollbar,
.learn-screen .learn-subjects::-webkit-scrollbar,
.learn-screen .learn-sheet-list::-webkit-scrollbar,
.learn-screen .app-body::-webkit-scrollbar-thumb,
.learn-screen .app-body::-webkit-scrollbar-track,
.learn-screen .app-body::-webkit-scrollbar-corner {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
  border: 0;
}
.learn-screen .learn-course,
.learn-screen .learn-card,
.learn-screen .learn-hero,
.learn-screen .activity-card,
.learn-screen .progress-pair,
.learn-screen .subject-analysis,
.learn-screen .day-board,
.learn-empty {
  min-width: 0;
  max-width: 100%;
}
.learn-empty { margin-top: 16px; flex: 0 0 auto; }
.learn-head,
.learn-split,
.subject-analysis {
  scroll-margin-top: 12px;
}
.learn-sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  background: rgba(16, 22, 56, 0.46);
}
.learn-sheet {
  width: 100%;
  max-height: min(78%, 560px);
  display: flex;
  flex-direction: column;
  padding: 8px 16px calc(18px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  border-radius: 28px 28px 0 0;
  background: #fff;
  box-shadow: 0 -12px 40px rgba(16, 22, 56, 0.16);
  animation: learn-sheet-in 0.22s ease;
}
@keyframes learn-sheet-in {
  from { transform: translateY(24px); }
  to { transform: none; }
}
.learn-sheet-handle {
  width: 42px;
  height: 4px;
  margin: 4px auto 10px;
  border-radius: 99px;
  background: #d9e2ea;
}
.learn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learn-sheet-head h2 { margin: 0; font-size: 20px; }
.learn-sheet-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.learn-sheet-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  margin-top: 12px;
  scrollbar-width: none;
}
.learn-sheet-list::-webkit-scrollbar { display: none; }
.learn-sheet-list form { margin: 0 0 10px; }
.my-courses-label {
  margin: 2px 2px 8px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.learn-sheet-row { position: relative; margin: 0 0 10px; }
.learn-sheet-list .learn-sheet-row > form { margin: 0; }
.learn-sheet-row .sheet-fav {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 42px;
  margin: 0;
  transform: translateY(-50%);
}
.learn-sheet-row .sheet-fav .fav-btn {
  position: static;
  width: 32px;
  height: 32px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(16, 22, 56, 0.08);
}
.learn-sheet-row .learn-sheet-course { padding-right: 84px; }
.learn-sheet-course {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1.5px solid #e6eee9;
  border-radius: 18px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learn-sheet-course.is-on,
.learn-sheet-course:has(input:checked) { border-color: var(--green); background: #e7f8ef; }
.learn-sheet-course img,
.learn-sheet-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
}
.learn-sheet-icon { display: grid; place-items: center; }
.learn-sheet-copy { min-width: 0; flex: 1; display: grid; gap: 6px; }
.learn-sheet-copy strong { font-size: 15px; line-height: 1.25; }
.learn-sheet-progress { display: flex; align-items: center; gap: 8px; }
.learn-sheet-progress .progress-track { flex: 1; margin: 0; }
.learn-sheet-progress b { color: var(--green); font-size: 13px; }
.learn-sheet-course.is-on .learn-sheet-progress .progress-track span { background: var(--green); }
.learn-sheet-mark {
  width: 22px;
  height: 22px;
  border: 1.5px solid #d0d5dd;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: #fff;
}
.learn-sheet-course.is-on .learn-sheet-mark,
.learn-sheet-course:has(input:checked) .learn-sheet-mark { border-color: var(--green); background: var(--green); }
.learn-sheet-course.is-on .learn-sheet-mark::after,
.learn-sheet-course:has(input:checked) .learn-sheet-mark::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.detail-screen {
  background:
    radial-gradient(120% 38% at 50% -8%, #e5f8ef 0%, rgba(255, 255, 255, 0) 64%),
    #fff;
}
.detail-screen [hidden] { display: none !important; }
.detail-screen .app-body { overflow-x: hidden; padding-bottom: 16px; }
.detail-top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin: 0 0 8px;
  padding-bottom: 8px;
  background: linear-gradient(#f4fbf8 72%, rgba(244, 251, 248, 0));
}
.detail-top h1 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.detail-check {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.detail-banner {
  position: relative;
  min-height: 196px;
  margin-top: 4px;
  padding: 16px 16px 18px;
  overflow: hidden;
  border: 1px solid #e7f4ec;
  border-radius: 22px;
  background:
    radial-gradient(90px 90px at 92% 18%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(70px 70px at 74% 88%, rgba(8, 173, 101, 0.12), transparent 70%),
    linear-gradient(160deg, #e7f8ef 0%, #f7fcf9 58%, #fff 100%);
}
.detail-banner-logo { position: relative; z-index: 1; width: 112px; height: auto; }
.detail-banner.has-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f3fbf7 0%, rgba(243, 251, 247, 0.72) 46%, rgba(243, 251, 247, 0) 68%);
  pointer-events: none;
}
.detail-banner-title {
  position: relative;
  z-index: 1;
  max-width: 68%;
  margin: 14px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.detail-banner.has-art .detail-banner-title,
.detail-banner.has-art .detail-pill { max-width: 56%; }
.detail-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  max-width: 68%;
  margin-top: 10px;
  padding: 6px 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-banner-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  height: 100%;
  object-fit: cover;
}
.detail-banner-fallback {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
}
.detail-banner-fallback .icon { width: 34px; height: 34px; }
.detail-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.16);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.detail-play .icon { width: 22px; height: 22px; }
.detail-player { display: none; position: absolute; inset: 0; z-index: 2; background: #101638; }
.detail-banner .detail-check:checked ~ .detail-player { display: block; }
.detail-banner .detail-check:checked ~ .detail-play { display: none; }
.detail-player iframe { width: 100%; height: 100%; border: 0; }
.detail-check:focus-visible ~ .detail-play,
.detail-check:focus-visible ~ .detail-more,
.detail-check:focus-visible ~ .detail-see {
  outline: 3px solid rgba(8, 173, 101, 0.4);
  outline-offset: 2px;
}
.detail-title { margin: 16px 0 0; font-size: 22px; letter-spacing: -0.03em; }
.detail-summary { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.detail-category { margin: 8px 0 0; color: #667085; font-size: 12px; font-weight: 700; }
.detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}
.detail-stats span { display: inline-flex; align-items: center; gap: 4px; }
.detail-stats .icon { width: 14px; height: 14px; }
.detail-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.detail-prices { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.detail-now { color: var(--green); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.detail-was { color: #98a2b8; font-size: 16px; font-weight: 600; text-decoration: line-through; }
.detail-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #e7f8ef;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}
.detail-duration .icon { width: 14px; height: 14px; color: var(--green); }
.detail-validity { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.detail-progress { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.detail-progress .progress-track { flex: 1; margin-top: 0; }
.detail-progress strong { color: var(--green); font-size: 13px; }
.detail-quick {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.detail-quick a {
  flex: 1 1 72px;
  max-width: 160px;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.detail-quick-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}
.detail-quick-icon .icon { width: 22px; height: 22px; }
.detail-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #eef2f6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 22, 56, 0.05);
}
.detail-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.detail-card-head h2, .detail-outline h2 { margin: 0; font-size: 16px; }
.detail-see {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
.detail-see .icon { width: 14px; height: 14px; }
.detail-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.detail-chips::-webkit-scrollbar { display: none; }
.detail-check:checked + .detail-chips { flex-wrap: wrap; overflow: visible; }
.detail-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f4f6f8;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}
.detail-chip .icon { width: 14px; height: 14px; }
.detail-chip.is-main { background: #e7f8ef; color: var(--green); }
.detail-features { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.detail-features::-webkit-scrollbar { display: none; }
.detail-feature {
  flex: 0 0 132px;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 12px;
  border-radius: 18px;
  color: var(--navy);
}
.detail-feature-icon .icon { width: 22px; height: 22px; }
.detail-feature strong { font-size: 20px; letter-spacing: -0.03em; }
.detail-feature span:last-child { color: #3d4a63; font-size: 12px; font-weight: 600; line-height: 1.3; }
.detail-feature.is-mint { background: #e7f8ef; }
.detail-feature.is-mint .detail-feature-icon { color: #08ad65; }
.detail-feature.is-lilac { background: #f3eefe; }
.detail-feature.is-lilac .detail-feature-icon { color: #7a5af8; }
.detail-feature.is-sky { background: #e7f2ff; }
.detail-feature.is-sky .detail-feature-icon { color: #2e90fa; }
.detail-feature.is-peach { background: #fff4e5; }
.detail-feature.is-peach .detail-feature-icon { color: #f79009; }
.detail-outline h2 { margin: 12px 0 6px; font-size: 14px; }
.detail-outline h2:first-child { margin-top: 0; }
.detail-outline p { margin: 0 0 8px; color: #3d4a63; font-size: 13px; line-height: 1.4; }
.detail-about-copy { margin: 0; color: #3d4a63; font-size: 14px; line-height: 1.5; }
.detail-about-copy.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-about .detail-check:checked ~ .detail-about-copy {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.detail-more { display: inline-flex; margin-top: 8px; color: var(--green); font-size: 14px; font-weight: 700; cursor: pointer; }
.detail-more .when-open { display: none; }
.detail-about .detail-check:checked ~ .detail-more .when-closed { display: none; }
.detail-about .detail-check:checked ~ .detail-more .when-open { display: inline; }
.detail-actions {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 10px 0 8px;
  background: #fff;
  border-top: 1px solid #eef2f6;
  box-shadow: 0 -8px 20px rgba(16, 22, 56, 0.04);
}
.detail-actions form { flex: 1; min-width: 0; }
.detail-enroll, .detail-buy {
  width: 100%;
  height: 48px;
  padding: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}
.detail-enroll { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
.detail-buy {
  flex: 1;
  border: 0;
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 173, 101, 0.22);
}
.detail-buy:hover { background: var(--green-dark); }
@media (min-width: 800px) {
  .detail-screen.screen { width: min(760px, calc(100% - 48px)); }
  .detail-quick a { font-size: 12px; }
  .detail-banner { min-height: 220px; }
}
@media (min-width: 900px) {
  .detail-screen.screen {
    width: min(1080px, calc(100% - 48px));
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
  }
  .detail-banner-title { font-size: 40px; }
}
.learn-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
  overflow: visible;
  scroll-snap-type: none;
}
.learn-screen .learn-dots { display: none; }
.learn-course-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e6eee9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.05);
}
.learn-course-card:has(.is-on) { border-color: var(--green); background: #f3fbf7; }
.learn-course-open {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learn-course-open img,
.learn-course-thumb {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
}
.learn-course-thumb { display: grid; place-items: center; }
.learn-course-thumb .icon { width: 28px; height: 28px; }
.learn-course-copy { min-width: 0; display: grid; gap: 4px; align-content: start; }
.learn-course-copy strong { font-size: 16px; line-height: 1.25; }
.learn-course-summary, .learn-course-meta { color: var(--muted); font-size: 13px; line-height: 1.35; }
.learn-course-meta { font-weight: 600; }
.learn-course-progress { display: flex; align-items: center; gap: 8px; }
.learn-course-progress .progress-track { flex: 1; margin: 0; }
.learn-course-progress b { color: var(--green); font-size: 13px; }
.learn-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.learn-facts span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4f7f8;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}
.learn-facts b { color: var(--navy); }
.learn-continue {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.learn-continue .icon { width: 16px; height: 16px; }
.learn-fact {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 92px;
  padding: 10px 4px;
  border-radius: 18px;
  background: #f4f7f8;
  text-align: center;
}
.learn-fact .icon { width: 22px; height: 22px; color: #667085; }
.learn-fact b { font-size: 12px; }
.learn-fact small { color: var(--muted); font-size: 12px; font-weight: 700; }
.missing-screen { justify-content: center; text-align: center; overflow: auto; }
.missing-logo { width: 168px; height: auto; margin: 0 auto; }
.missing-art { width: min(220px, 70%); height: auto; margin: 12px auto 0; object-fit: contain; }
.missing-screen h1 { margin: 12px 0 0; font-size: 28px; letter-spacing: -0.03em; }
.missing-screen p { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }
.missing-screen .btn-row { grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .missing-screen .btn-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 800px) {
  .learn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.receipt-screen {
  background:
    radial-gradient(90% 36% at 50% -8%, #e5f8ef 0%, rgba(243, 251, 247, 0) 72%),
    #f3fbf7;
}
.receipt-screen .app-body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.receipt-screen .app-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.receipt-screen .back {
  width: 42px;
  height: 42px;
  margin: 2px 0 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.08);
}
.receipt-screen h1 {
  margin: 2px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: left;
}
.receipt-screen .lede { margin-top: 4px; text-align: left; color: #7d8cab; }
.pay-list { display: grid; gap: 14px; margin-top: 16px; }
.pay-tile {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr);
  gap: 8px;
  padding: 8px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 22, 56, 0.06);
}
.pay-tile-side {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  padding: 14px 12px 28px;
  border-radius: 18px;
  color: #fff;
}
.pay-tile-side.is-manual,
.pay-tile-side.is-pending {
  background: linear-gradient(165deg, #3dce95 0%, #12b981 46%, #14b8c7 100%);
}
.pay-tile-side.is-online {
  background: linear-gradient(165deg, #60a5fa 0%, #3b82f6 48%, #6366f1 100%);
}
.pay-tile-side.is-failed {
  background: linear-gradient(165deg, #fb7185 0%, #f43f5e 52%, #e11d48 100%);
}
.pay-tile-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.pay-tile-mark .icon { width: 18px; height: 18px; }
.pay-tile-side h2 { margin: 12px 0 0; font-size: 14px; letter-spacing: -0.02em; line-height: 1.2; }
.pay-tile-method { margin: 2px 0 0; font-size: 11px; font-weight: 600; opacity: 0.88; }
.pay-tile-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
}
.pay-tile-status-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.pay-tile-side.is-pending .pay-tile-status-icon { background: #f5b942; color: #fff; }
.pay-tile-status-icon .icon { width: 12px; height: 12px; }
.pay-tile-amount {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pay-tile-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 28px; }
.pay-tile-main { min-width: 0; display: flex; flex-direction: column; padding: 4px 4px 2px 0; }
.pay-tile-course { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pay-tile-course > span:last-child { min-width: 0; }
.pay-tile-course strong { overflow-wrap: anywhere; }
.pay-tile-course-icon,
.ticket-course-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
}
.pay-tile-course-icon .icon,
.ticket-course-icon .icon { width: 18px; height: 18px; }
.pay-tile-course-icon img,
.ticket-course-icon img { width: 100%; height: 100%; object-fit: cover; }
.pay-tile-course strong,
.ticket-course strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.pay-tile-course small,
.ticket-course small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.pay-tile-when {
  display: grid;
  gap: 1px;
  margin: 8px 0 0;
}
.pay-tile-when span {
  color: #98a2b3;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pay-tile-when strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pay-tile-meta { display: grid; gap: 5px; margin: 6px 0 0; }
.pay-tile-meta div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pay-tile-meta dt {
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  margin: 0;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 600;
}
.pay-tile-meta dt .icon { width: 12px; height: 12px; }
.pay-tile-meta dd {
  margin: 0;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}
.pay-tile-view {
  margin-top: auto;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.pay-tile-view .icon { width: 14px; height: 14px; }
.pay-tile-view .icon:last-child { margin-left: auto; }
@media (max-width: 340px) {
  .pay-tile { grid-template-columns: 1fr; }
  .pay-tile-main { padding-right: 4px; }
}

.ticket-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px 14px;
  background: rgba(16, 22, 56, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ticket-sheet {
  width: min(100%, 360px);
  max-height: calc(100% - 8px);
  overflow: auto;
  scrollbar-width: none;
  filter: drop-shadow(0 18px 40px rgba(16, 22, 56, 0.2));
}
.ticket-sheet::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ticket-top,
.ticket-bottom { background: #fff; padding: 8px 18px 16px; }
.ticket-top { border-radius: 28px 28px 0 0; position: relative; padding-top: 10px; }
.ticket-bottom {
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(120% 70% at 50% 120%, #e7f8ef 0%, rgba(255, 255, 255, 0) 58%),
    #fff;
}
.ticket-handle {
  display: block;
  width: 42px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 99px;
  background: #e4e9f2;
}
.ticket-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #98a2b3;
  font-size: 22px;
  line-height: 1;
}
.ticket-badge {
  width: 64px;
  height: 64px;
  margin: 6px auto 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.ticket-modal[data-status="pending"] .ticket-badge { background: #f5a524; }
.ticket-modal[data-status="failed"] .ticket-badge { background: #e2556a; }
.ticket-badge .icon { width: 30px; height: 30px; }
.ticket-modal[data-status="paid"] .mark-pending,
.ticket-modal[data-status="paid"] .mark-failed,
.ticket-modal[data-status="pending"] .mark-paid,
.ticket-modal[data-status="pending"] .mark-failed,
.ticket-modal[data-status="failed"] .mark-paid,
.ticket-modal[data-status="failed"] .mark-pending { display: none; }
.ticket-top h2 {
  margin: 12px 0 0;
  text-align: center;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.ticket-amount {
  margin: 6px 0 0;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ticket-rule { border: 0; border-top: 1px dashed #d5deea; margin: 16px 0; }
.ticket-seam {
  height: 24px;
  margin: -1px 0;
  background:
    radial-gradient(circle at 0 50%, transparent 11px, #fff 11.5px) left center / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11px, #fff 11.5px) right center / 51% 100% no-repeat;
  position: relative;
}
.ticket-seam::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  border-top: 1px dashed #d5deea;
}
.ticket-course { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ticket-rows { display: grid; gap: 10px; margin: 0; }
.ticket-rows div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticket-rows .ticket-date {
  display: grid;
  gap: 1px;
  justify-items: start;
}
.ticket-rows .ticket-date dt {
  font-size: 10px;
  font-weight: 600;
  color: #98a2b3;
}
.ticket-rows .ticket-date dd {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.ticket-rows dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.ticket-rows dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; word-break: break-word; }
.ticket-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green);
  font-size: 12px;
}
.ticket-modal[data-status="pending"] .ticket-pill { background: #fff6df; color: #b54708; }
.ticket-modal[data-status="failed"] .ticket-pill { background: #fff1f1; color: var(--danger); }
.ticket-pill .icon { width: 14px; height: 14px; }
.ticket-done { margin-top: 18px; position: relative; z-index: 1; }
.ticket-modal.is-console { position: fixed; z-index: 80; }
.ticket-loading,
.ticket-error {
  margin: 28px 0 12px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.ticket-error p { margin: 0 0 12px; }
.ticket-retry,
.receipt-retry {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.receipt-screen [data-receipt-status] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.receipt-screen [data-receipt-results] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.receipt-screen [data-receipt-results]:empty { display: none; }
.receipt-state {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px 12px;
  text-align: center;
}
.receipt-state p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.receipt-state h2 { margin: 0; font-size: 20px; letter-spacing: -0.03em; }
.receipt-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #d7f3e6;
  border-top-color: var(--green);
  animation: receipt-spin 0.8s linear infinite;
}
@keyframes receipt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .receipt-spinner { animation: none; border-top-color: #d7f3e6; }
}
.receipt-empty {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 320px;
  padding: 8px 8px 20px;
  text-align: center;
}
.receipt-empty::before,
.receipt-empty::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #e7f7ef;
  pointer-events: none;
}
.receipt-empty::before { width: 180px; height: 180px; left: -78px; bottom: 8px; }
.receipt-empty::after { width: 210px; height: 210px; right: -96px; bottom: -20px; }
.receipt-art {
  position: relative;
  z-index: 1;
  width: 220px;
  height: 230px;
  margin: 0 auto 6px;
}
.receipt-blob {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 28px;
  bottom: 36px;
  border-radius: 48% 52% 46% 54% / 42% 40% 60% 58%;
  background: #dff6ea;
}
.receipt-sheet {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 132px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 16px rgba(16, 22, 56, 0.06));
}
.receipt-dash,
.receipt-dot { position: absolute; z-index: 1; }
.receipt-dash {
  width: 22px;
  height: 6px;
  border-radius: 99px;
  background: #3dce95;
}
.receipt-dash-a { left: 18px; top: 58px; transform: rotate(-32deg); }
.receipt-dash-b { right: 16px; top: 46px; width: 18px; transform: rotate(28deg); }
.receipt-dot { border-radius: 50%; background: #b7ead3; }
.receipt-dot-a { left: 26px; top: 118px; width: 12px; height: 12px; background: #8edfbe; }
.receipt-dot-b { right: 34px; top: 22px; width: 8px; height: 8px; }
.receipt-empty h2,
.receipt-empty p { position: relative; z-index: 1; }
.receipt-empty h2 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.receipt-empty p {
  max-width: 280px;
  margin: 8px 0 0;
  color: #7d8cab;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
@media (max-width: 360px) {
  .receipt-art { width: 190px; height: 200px; }
  .receipt-empty h2 { font-size: 22px; }
}

.account-screen {
  background:
    radial-gradient(90% 36% at 50% -8%, #e5f8ef 0%, rgba(243, 251, 247, 0) 72%),
    #f3fbf7;
}
.account-screen.is-profile {
  background: #fff;
}
.account-screen .app-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.account-screen .app-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.account-screen .back {
  width: 42px;
  height: 42px;
  margin: 2px 0 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.08);
}
.account-screen h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: left;
}
.account-screen .lede { margin-top: 4px; text-align: left; color: #7d8cab; }
.account-screen .req { color: var(--danger); }
.account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.account-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  margin-top: 2px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(8, 173, 101, 0.22);
}
.account-pill .icon { width: 16px; height: 16px; }
.account-pill:disabled, .account-submit:disabled { opacity: 0.7; cursor: progress; }
.account-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 22, 56, 0.06);
  text-decoration: none;
  color: var(--navy);
}
.account-person img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #e7f8ef;
  flex: none;
}
.account-person > span { flex: 1; min-width: 0; }
.account-person strong { display: block; font-size: 16px; }
.account-person small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 500; }
.account-person > .icon { width: 18px; height: 18px; color: #98a2b3; flex: none; }
.account-badge {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.account-menu, .support-list, .settings-list, .exam-list { display: grid; gap: 12px; margin-top: 16px; }
.account-menu a, .support-card, .settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 22, 56, 0.05);
  text-decoration: none;
  color: var(--navy);
  text-align: left;
  font: inherit;
  width: 100%;
  cursor: pointer;
}
.account-well, .support-mark, .exam-mark {
  display: grid;
  place-items: center;
  flex: none;
}
.account-well {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e7f8ef;
  color: var(--green);
}
.account-well .icon, .support-mark .icon, .exam-mark .icon { width: 20px; height: 20px; }
.account-well-art img { width: 34px; height: 34px; object-fit: contain; }
.account-menu a > span:nth-child(2),
.settings-row > span:nth-child(2),
.support-card > div { flex: 1; min-width: 0; }
.account-menu strong, .settings-row strong, .support-card h2 {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.account-menu small, .settings-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
.account-menu > a > .icon, .settings-row > .icon { width: 18px; height: 18px; color: #98a2b3; flex: none; }
.support-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.support-mark.is-green, .exam-mark.is-mint { background: #e7f8ef; color: var(--green); }
.support-mark.is-blue { background: #e8f1ff; color: #3b82f6; }
.support-mark.is-amber, .exam-mark.is-peach { background: #fff4e8; color: #e07a2f; }
.support-mark.is-rose { background: #fff1f0; color: #ef6b4a; }
.support-mark.is-red { background: #ffecec; color: var(--danger); }
.exam-mark.is-lilac { background: #f3eeff; color: #7c5cbf; }
.support-card a {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.support-form { display: grid; gap: 8px; margin-top: 16px; }
.support-form label { font-weight: 700; }
.support-form textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
}
.support-form .form-error { margin: 0; color: var(--danger); font-size: 13px; font-weight: 700; }
.account-section { margin: 22px 0 0; font-size: 16px; font-weight: 800; }
.settings-row.is-danger strong, .settings-row.is-danger small { color: var(--danger); }
.account-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.account-avatar { position: relative; width: 72px; height: 72px; flex: none; cursor: pointer; }
.account-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #e7f8ef;
}
.account-camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.account-camera .icon { width: 14px; height: 14px; }
.account-photo-copy { cursor: pointer; }
.account-photo-copy strong { display: block; font-size: 14px; }
.account-photo-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.account-field { margin-top: 14px; }
.account-field > label, .account-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
}
.account-field > input,
.account-field > select,
.account-phone input,
.account-phone select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid #e6edf5;
  border-radius: 14px;
  background-color: #fff;
  font-size: 15px;
}
.account-screen select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23101638' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.account-phone { display: flex; gap: 8px; }
.account-phone select { width: 118px; flex: none; }
.account-phone input { flex: 1; min-width: 0; width: auto; }
.account-field > input:focus,
.account-field > select:focus,
.account-phone input:focus,
.account-phone select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(8, 173, 101, 0.15);
}
.account-screen.is-edit {
  overflow-x: hidden;
}
.account-screen.is-edit .app-body {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
}
.account-screen.is-edit form,
.account-screen.is-edit .account-head,
.account-screen.is-edit .account-head > div,
.account-screen.is-edit .account-field,
.account-screen.is-edit .account-choice,
.account-screen.is-edit .account-phone,
.account-screen.is-edit .account-subjects {
  min-width: 0;
  max-width: 100%;
}
.account-screen.is-edit .account-head > div { flex: 1; }
.account-screen.is-edit .account-head h1,
.account-screen.is-edit .account-head .lede { overflow-wrap: anywhere; }
.account-screen.is-edit .account-field > input,
.account-screen.is-edit .account-field > select {
  max-width: 100%;
  min-width: 0;
}
.account-screen.is-edit .account-phone select {
  width: 92px;
  max-width: 34%;
  flex: 0 1 92px;
  min-width: 0;
  padding-left: 8px;
  padding-right: 26px;
}
.account-screen.is-edit .account-choice-btn {
  flex: 1 1 0;
  min-width: 0;
}
.account-screen.is-edit .account-choice-btn span {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.2;
}
.account-choice { display: flex; gap: 10px; }
.account-choice-btn {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 8px;
  border: 1.5px solid #e6edf5;
  border-radius: 14px;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.account-choice-btn input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}
.account-choice-btn .icon { width: 18px; height: 18px; }
.account-choice-btn:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.account-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1.5px solid #e6edf5;
  border-radius: 16px;
  background: #fff;
}
.account-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f4f7fb;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.account-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.account-chip:has(input:checked) { background: #e7f8ef; color: var(--green); }
.account-chip:has(input:checked)::after { content: "×"; font-weight: 700; }
.account-submit {
  width: 100%;
  height: 52px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(8, 173, 101, 0.22);
}
.exam-card, .detail-card {
  position: relative;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 22, 56, 0.06);
}
.exam-card-top { display: flex; gap: 12px; }
.exam-card-top > div { min-width: 0; padding-right: 76px; }
.exam-mark { width: 42px; height: 42px; border-radius: 14px; }
.exam-card h2, .detail-title h2 { margin: 0; font-size: 16px; }
.exam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-top: 10px;
}
.exam-grid p, .detail-row p { margin: 0; }
.exam-grid span, .detail-row p span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.exam-grid strong, .detail-row p strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.exam-card-actions, .exam-tools { display: flex; gap: 6px; }
.exam-card-actions { position: absolute; top: 12px; right: 12px; }
.exam-card-actions a,
.exam-card-actions button,
.exam-tools a,
.exam-tools button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #e7f8ef;
  color: var(--green);
  display: grid;
  place-items: center;
  text-decoration: none;
}
.exam-card-actions .icon, .exam-tools .icon { width: 16px; height: 16px; }
.exam-card-actions button, .exam-tools button { background: #ffecec; color: var(--danger); }
.exam-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #e9f8ef;
  color: var(--green);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.exam-view .icon { width: 18px; height: 18px; }
.detail-card { margin-top: 16px; padding: 6px 14px; }
.detail-title, .detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.detail-title + .detail-row, .detail-row + .detail-row { border-top: 1px solid #f2f5f8; }
.account-empty { margin-top: 36px; text-align: center; }
.account-empty h2 { margin: 0; font-size: 20px; font-weight: 800; }
.account-empty p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.account-toasts {
  position: absolute;
  z-index: 50;
  left: 16px;
  right: 16px;
  bottom: 92px;
  display: grid;
  gap: 8px;
}
.account-toast {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(16, 22, 56, 0.16);
}
.account-toast.is-success { background: var(--green); }
.account-toast.is-error { background: var(--danger); }
.account-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(16, 22, 56, 0.42);
}
.account-modal-card {
  width: min(100%, 340px);
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 22, 56, 0.16);
}
.account-modal-card h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.account-modal-card p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.account-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.account-modal-actions form { flex: 1; display: flex; }
.account-modal-actions button {
  flex: 1;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
}
.account-modal-actions button[data-confirm-close] { background: #f4f7f8; color: var(--navy); }
.account-modal-actions .is-danger { background: var(--danger); color: #fff; }
.account-done {
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.account-done h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.account-done .btn { margin-top: 18px; }

.courses-screen {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.courses-screen .courses-owned-head { justify-content: flex-end; }
.overview-screen {
  font-family: Inter, "Noto Serif Malayalam", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(90% 32% at 50% -6%, #e7f8f1 0%, rgba(255, 255, 255, 0) 70%),
    #fff;
}
.overview-screen .app-body {
  overflow-x: hidden;
  padding-bottom: 18px;
  scrollbar-width: none;
}
.overview-screen .app-body::-webkit-scrollbar { display: none; }
.overview-banner {
  position: relative;
  overflow: hidden;
  min-height: 214px;
  border-radius: 22px;
  background:
    linear-gradient(120deg, #0c6b45 0%, #14915c 42%, #d6a21a 100%);
}
.overview-banner.has-photo { background: #103528; }
.overview-banner-img,
.overview-banner-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.overview-banner-img { object-fit: cover; }
.overview-banner-fallback {
  display: grid;
  place-items: center;
  color: #fff;
}
.overview-banner-fallback .icon { width: 42px; height: 42px; }
.overview-toolbar {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
}
.overview-screen .back,
.overview-icon-btn {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  display: grid;
  place-items: center;
  font: inherit;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.12);
  cursor: pointer;
}
.overview-screen .back .icon,
.overview-icon-btn .icon { width: 18px; height: 18px; }
.overview-banner-copy {
  position: relative;
  z-index: 1;
  max-width: 62%;
  margin: 54px 16px 0;
  color: #fff;
  font-family: Inter, "Noto Serif Malayalam", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}
.overview-summary {
  margin: 14px 0 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.overview-banner:not(.has-photo) .overview-banner-copy { color: #fff; }
.overview-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.overview-play-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(16, 22, 56, 0.16);
}
.overview-play-btn .icon { width: 22px; height: 22px; margin-left: 2px; }
.overview-time {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16, 22, 56, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.overview-time .icon { width: 12px; height: 12px; }
.overview-player { display: none; position: absolute; inset: 0; z-index: 3; background: #000; }
.overview-banner.is-started .overview-player { display: block; }
.overview-banner.is-started .overview-play,
.overview-banner.is-started .overview-time,
.overview-banner.is-started .overview-banner-copy { display: none; }
.course-player-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.course-player-shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.course-player-shield:focus { outline: none; }
.course-player-bar {
  position: absolute;
  z-index: 3;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  height: auto;
  margin: 0;
  transform: none;
  padding: 8px 8px calc(6px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  border-radius: 0;
  background: linear-gradient(180deg, rgba(16, 22, 56, 0) 0%, rgba(16, 22, 56, 0.72) 38%, rgba(16, 22, 56, 0.88) 100%);
  color: #fff;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease;
}
.course-player-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.course-player-time {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.course-player.is-idle .course-player-bar {
  opacity: 0;
  pointer-events: none;
}
.course-player-bar button {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.course-player-bar button .icon { width: 16px; height: 16px; }
.course-player-bar button:hover { background: rgba(255, 255, 255, 0.14); }
.course-player-bar .course-player-skip,
.course-player-bar .course-player-speed {
  width: auto;
  min-width: 34px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.course-player-bar .course-player-speed { min-width: 36px; font-size: 12px; }
.course-player-seek {
  width: 100%;
  height: 16px;
  margin: 0 0 2px;
  accent-color: var(--green);
  cursor: pointer;
}
.course-player-quality { position: relative; flex: none; }
.course-player-bar button.course-player-quality-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-width: 52px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.course-player-quality-btn .icon { width: 13px; height: 13px; }
.course-player-quality-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 4;
  display: grid;
  min-width: 92px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(16, 22, 56, 0.94);
  box-shadow: 0 10px 24px rgba(16, 22, 56, 0.28);
}
.course-player-bar .course-player-quality-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
.course-player-quality-menu button.is-on { color: #b6f3d4; background: rgba(8, 173, 101, 0.18); }
.overview-unavailable {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.overview-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.overview-title-row h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: left;
}
.overview-title-row .overview-short {
  margin: 6px 0 0;
  color: #667085;
  font-family: "Anek Malayalam", Inter, "Noto Serif Malayalam", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.overview-title-row .overview-validity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: #3d4a63;
  font-size: 13px;
  font-weight: 700;
}
.overview-title-row .overview-validity .icon { width: 15px; height: 15px; flex: none; color: var(--green); }
.overview-subject { margin: 14px 0 0; color: var(--green); font-size: 12px; font-weight: 600; line-height: 1.4; }
.overview-share {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #e9f8ef;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.overview-share .icon { width: 16px; height: 16px; }
.overview-screen .app-body > .overview-share {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 22px;
}
.overview-price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.overview-price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.overview-price strong { font-size: 28px; letter-spacing: -0.03em; }
.overview-price s { color: #98a2b3; font-size: 16px; font-weight: 600; }
.overview-price em {
  padding: 3px 7px;
  border-radius: 8px;
  background: #e9f8ef;
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.overview-countdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
}
.overview-offer-note { color: var(--green); }
.overview-countdown b { color: var(--danger); font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.overview-rating { text-align: right; }
.overview-rating strong { font-size: 18px; }
.overview-stars { color: #f5b942; }
.overview-stars .icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.overview-rating small { display: block; color: #98a2b3; font-size: 11px; font-weight: 600; }
.overview-actions { display: flex; gap: 10px; margin-top: 16px; }
.overview-actions form { flex: 1; min-width: 0; display: flex; }
.overview-buy, .overview-enquiry {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.overview-buy {
  background: var(--green);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(8, 173, 101, 0.22);
}
.overview-buy .icon { width: 18px; height: 18px; }
.overview-enquiry {
  background: #e9f8ef;
  color: var(--navy);
  text-align: left;
  justify-content: flex-start;
}
.overview-enquiry .icon { width: 18px; height: 18px; color: var(--green); flex: none; }
.overview-enquiry strong, .overview-enquiry small { display: block; }
.overview-enquiry strong { font-size: 14px; }
.overview-enquiry small { color: #667085; font-size: 11px; font-weight: 600; }
.overview-note { margin: 8px 0 0; color: var(--danger); font-size: 13px; font-weight: 600; }
.overview-block { margin-top: 22px; }
.overview-block h2 { margin: 0; font-size: 18px; font-weight: 800; }
.overview-includes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.overview-includes article {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px 6px;
  border-radius: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.overview-includes span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
}
.overview-includes .icon { width: 18px; height: 18px; }
.overview-includes .is-mint { background: #e9f8ef; color: #128a56; }
.overview-includes .is-lilac { background: #f3eeff; color: #7c5cbf; }
.overview-includes .is-sky { background: #e8f1ff; color: #3b82f6; }
.overview-includes .is-rose { background: #ffecec; color: #ef6b6b; }
.overview-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.overview-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}
.overview-features .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--green); flex: none; }
.overview-features span {
  font-family: "Anek Malayalam", Inter, "Noto Serif Malayalam", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.overview-about { margin-top: 22px; }
.overview-more {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.overview-about-copy {
  margin-top: 10px;
  color: #3d4a63;
  font-family: "Anek Malayalam", Inter, "Noto Serif Malayalam", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}
.overview-about-copy p,
.overview-about-copy div { margin: 0 0 8px; }
.overview-about-copy h2,
.overview-about-copy h3 { margin: 10px 0 4px; color: var(--navy); line-height: 1.35; }
.overview-about-copy h2 { font-size: 16px; font-weight: 700; }
.overview-about-copy h3 { font-size: 14px; font-weight: 700; }
.overview-about-copy ul,
.overview-about-copy ol { margin: 8px 0; padding-left: 1.25em; }
.overview-about-copy li { margin: 2px 0; }
.overview-about-copy a { color: var(--green); font-weight: 700; }
.overview-about-copy b,
.overview-about-copy strong { font-weight: 700; }
.overview-about-copy i,
.overview-about-copy em { font-style: italic; }
.overview-about-copy u { text-decoration: underline; }
.overview-about-copy s,
.overview-about-copy strike,
.overview-about-copy del { text-decoration: line-through; }
.overview-about-copy.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overview-about .when-open { display: none; }
.overview-about .detail-check:checked ~ .overview-about-copy {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.overview-about .detail-check:checked ~ .overview-more .when-closed { display: none; }
.overview-about .detail-check:checked ~ .overview-more .when-open { display: inline; }
.overview-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: #667085; font-size: 12px; font-weight: 700; }
.overview-subject-cards { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 10px; overflow-x: auto; }
.overview-subject-cards article {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: max-content;
  padding: 8px 10px;
  border-radius: 14px;
  background: #f7fbf9;
}
.overview-subject-cards .icon { width: 16px; height: 16px; color: var(--green); flex: none; }
.overview-subject-cards strong { font-size: 13px; line-height: 1.35; white-space: nowrap; }
.overview-sheet {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 0;
  bottom: 78px;
}
.overview-scrim { position: absolute; inset: 0; border: 0; background: rgba(16, 22, 56, 0.28); }
.overview-sheet-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  padding: 10px 16px 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 22, 56, 0.16);
  text-align: center;
}
.overview-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 10px;
  border: 0;
  border-radius: 99px;
  background: #e4e9f2;
  display: block;
}
.overview-lock {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e9f8ef;
  color: var(--green);
  display: grid;
  place-items: center;
}
.overview-lock .icon { width: 18px; height: 18px; }
.overview-sheet-card h2 { margin: 10px 0 0; font-size: 18px; }
.overview-sheet-card p { margin: 4px 0 0; color: #667085; font-size: 13px; }
.overview-auth-actions { display: flex; gap: 10px; margin-top: 14px; }
.overview-auth-actions a {
  flex: 1;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.overview-auth-actions .is-line { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
.learn-course:not([data-mode="class"]) [data-learn-days] { display: none !important; }
.learn-course:not([data-mode="test"]):not([data-mode="material"]) [data-learn-levels],
.learn-course:not([data-mode="test"]):not([data-mode="material"]) [data-learn-level] { display: none !important; }
.day-board { display: grid; gap: 10px; margin-top: 16px; }
.day-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.day-board-head h3 { margin: 0; font-size: 20px; letter-spacing: -0.03em; }
.day-board-head span { color: var(--green); font-size: 13px; font-weight: 700; }
.day-card {
  --ring: #f04464;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 12px;
  border: 1px solid #eef2f6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.04);
  color: inherit;
  text-decoration: none;
}
.day-card.is-done { --ring: #08ad65; background: #f4fbf7; }
.day-card.is-progress { --ring: #f5b400; background: #fff8ee; }
.day-card.is-idle { --ring: #f04464; }
.day-num, .day-subject-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
}
.day-num.tone-1, .day-subject-icon.tone-1, .day-tab.tone-1 { background: #e7f8ef; color: #078a50; }
.day-num.tone-2, .day-subject-icon.tone-2, .day-tab.tone-2 { background: #fff4d6; color: #b54708; }
.day-num.tone-3, .day-subject-icon.tone-3, .day-tab.tone-3 { background: #fde8ee; color: #e11d48; }
.day-num.tone-4, .day-subject-icon.tone-4, .day-tab.tone-4 { background: #f3eefe; color: #7a5af8; }
.day-num.tone-5, .day-subject-icon.tone-5, .day-tab.tone-5 { background: #e7f2ff; color: #2e90fa; }
.day-num.tone-6, .day-subject-icon.tone-6, .day-tab.tone-6 { background: #e7f8f4; color: #0e9384; }
.day-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.day-copy small { color: var(--muted); font-size: 12px; font-weight: 700; }
.day-copy b { font-size: 15px; letter-spacing: -0.02em; line-height: 1.25; }
.day-meta, .day-meta span { display: flex; align-items: center; gap: 6px; color: #667085; font-size: 12px; font-weight: 600; }
.day-meta { flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.day-meta .icon { width: 14px; height: 14px; color: #98a2b3; }
.day-meta span:last-child .icon { color: #f5b400; }
.day-ring {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), #e7edf2 0);
}
.day-ring span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ring);
  font-size: 11px;
  font-weight: 800;
}
.day-card > .icon { width: 16px; height: 16px; flex: none; color: #98a2b3; }
.day-screen [hidden] { display: none !important; }
.day-top { display: flex; align-items: center; gap: 8px; }
.day-top h1 { flex: 1; }
.day-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: #fff6df;
  color: #b54708;
  font-size: 14px;
  font-weight: 800;
}
.day-coins .icon { width: 16px; height: 16px; color: #f5b400; }
.day-back {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  text-decoration: none;
}
.day-back .icon { width: 20px; height: 20px; }
.day-top h1 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.day-tabs {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.day-tab .icon { width: 16px; height: 16px; }
.day-tab.is-on { background: var(--green); color: #fff; }
.day-now { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.day-now h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.day-now span { color: #667085; font-size: 13px; font-weight: 700; white-space: nowrap; }
.day-stage {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #101638;
}
.day-stage .overview-player {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: #000;
}
.day-stage .course-player-bar {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  transform: none;
}
.day-no-video {
  margin: 0;
  padding: 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.day-class-title { margin: 12px 0 0; font-size: 16px; letter-spacing: -0.02em; }
.day-class-title button,
.day-class-title a {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.day-open-video {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.day-open-video .icon { width: 18px; height: 18px; }
.day-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.day-tool {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 6px;
  border: 0;
  border-radius: 16px;
  background: #f4f7fb;
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.day-tool .icon { width: 18px; height: 18px; }
.day-tool.tone-1 { background: #e7f8ef; color: #078a50; }
.day-tool.tone-2 { background: #f3eefe; color: #7a5af8; }
.day-tool.tone-3 { background: #f4f0ff; color: #9b8afb; }
.day-tool-panel {
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #f7faf8;
}
.day-tool-panel p { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.day-tool-panel p:last-child { margin-bottom: 0; }
.day-nav { display: flex; gap: 10px; margin-top: 12px; }
.day-nav-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border-radius: 14px;
  background: #f4f7fb;
  color: #98a2b3;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.day-nav-btn .icon { width: 16px; height: 16px; }
.day-nav-btn.is-next { background: var(--green); color: #fff; }
.day-nav-btn.is-disabled { opacity: 0.55; }
.day-subjects { margin-top: 18px; padding: 14px; border: 1px solid #eef2f6; border-radius: 20px; }
.day-subjects h3 { margin: 0 0 12px; font-size: 16px; }
.day-subjects ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: relative; }
.day-screen .app-body {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.day-screen .app-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.day-subjects details { min-width: 0; }
.day-subjects summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 8px;
  border-radius: 16px;
  list-style: none;
  cursor: pointer;
}
.day-subjects summary::-webkit-details-marker { display: none; }
.day-subjects summary::marker { content: none; }
.day-subjects li.is-on summary { background: #f4fbf7; }
.day-fold { display: grid; color: #98a2b3; flex: none; transition: transform 0.15s ease; }
.day-fold .icon { width: 16px; height: 16px; }
.day-subjects details[open] .day-fold { transform: rotate(-90deg); }
.day-class-list { display: grid; gap: 6px; padding: 0 4px 8px 44px; }
.day-class {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.day-class.is-on { background: #f7fbf8; }
.day-class img,
.day-class-thumb {
  width: 64px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: #101638;
}
.day-class-thumb { display: grid; place-items: center; color: #fff; }
.day-class-thumb .icon { width: 14px; height: 14px; }
.day-class-copy { min-width: 0; flex: 1; }
.day-class-copy b,
.day-class-copy small { display: block; }
.day-class-copy b { font-size: 13px; line-height: 1.3; }
.day-class-copy small { color: #667085; font-size: 12px; font-weight: 600; }
.day-class > .icon { width: 16px; height: 16px; color: #98a2b3; flex: none; }
.day-subject-copy { min-width: 0; flex: 1; }
.day-subject-copy b, .day-subject-copy small { display: block; }
.day-subject-copy small { color: #667085; font-size: 12px; }
.day-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.day-status-icons { display: inline-flex; }
.day-status .icon { width: 12px; height: 12px; color: currentColor; }
.day-status .is-check,
.day-status .is-ring { display: none; }
.day-status.is-completed .is-play,
.day-status.is-completed .is-ring { display: none; }
.day-status.is-completed .is-check { display: block; }
.day-class .day-status.is-not-started .is-play { display: none; }
.day-class .day-status.is-not-started .is-ring { display: block; }
.day-status-ring {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.day-status.is-completed { background: #e7f8ef; color: #078a50; }
.day-status.is-in-progress { background: #fff4d6; color: #b54708; }
.day-status.is-not-started { background: #fde8ee; color: #e11d48; }
.day-subjects .icon { width: 16px; height: 16px; color: #98a2b3; flex: none; }
.day-subjects .day-status .icon { width: 12px; height: 12px; color: currentColor; }
.day-exam { margin-top: 14px; }
.day-exam-card, .day-finished {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
}
.day-exam-card { background: #fff8e8; }
.day-exam-head { display: flex; align-items: center; gap: 12px; }
.day-finished { background: #eefbf4; justify-items: center; text-align: center; }
.day-exam-mark, .day-finished-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
}
.day-exam-mark { color: #b54708; }
.day-finished-mark { color: var(--green); }
.day-exam h3, .day-finished h3 { margin: 0; font-size: 18px; }
.day-exam p, .day-finished p { margin: 0; color: #667085; font-size: 13px; }
.day-exam-btn, .day-next-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-top: 6px;
  border: 0;
  border-radius: 14px;
  background: #f5b400;
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.day-next-day { background: var(--green); }
.day-exam-btn .icon, .day-next-day .icon { width: 16px; height: 16px; }
.day-bank { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.day-bank p { margin: 0 0 6px; color: var(--aq-navy, #101838); font-weight: 700; }
.day-choice { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; color: #344054; font-size: 14px; font-weight: 600; }
.day-choice input { margin-top: 3px; accent-color: #08ad65; }
.course-player:fullscreen,
.course-player:-webkit-full-screen,
.course-player.is-fullscreen,
.course-player.is-fullscreen-fallback {
  display: block !important;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: #000;
  z-index: 10000;
  overflow: hidden;
}
.course-player:fullscreen .course-player-frame,
.course-player:-webkit-full-screen .course-player-frame,
.course-player.is-fullscreen .course-player-frame,
.course-player.is-fullscreen-fallback .course-player-frame,
.course-player:fullscreen .course-player-shield,
.course-player:-webkit-full-screen .course-player-shield,
.course-player.is-fullscreen .course-player-shield,
.course-player.is-fullscreen-fallback .course-player-shield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.course-player:fullscreen .course-player-bar,
.course-player:-webkit-full-screen .course-player-bar,
.course-player.is-fullscreen .course-player-bar,
.course-player.is-fullscreen-fallback .course-player-bar {
  top: auto;
  bottom: 0;
  transform: none;
}
html.is-player-fallback,
html.is-player-fallback body { overflow: hidden; }
html.is-player-fallback .stage,
html.is-player-fallback .screen,
html.is-player-fallback .app-body,
html.is-player-fallback .day-stage,
html.is-player-fallback .overview-banner { overflow: visible !important; }
html.is-player-fallback .course-player.is-fullscreen-fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  z-index: 10000;
}
@media (max-width: 380px) {
  .course-player-bar { padding-left: 4px; padding-right: 4px; }
  .course-player-bar button { width: 28px; height: 28px; }
  .course-player-time { font-size: 11px; }
  .course-player-bar .course-player-skip,
  .course-player-bar .course-player-speed { min-width: 28px; padding: 0 4px; font-size: 10px; }
}
@media (max-width: 360px) {
  .overview-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-title-row h1, .overview-price strong { font-size: 24px; }
  .overview-share { padding: 0 8px; }
}

.classes-screen {
  padding-top: calc(10px + max(env(safe-area-inset-top, 0px), var(--pwa-safe-top, 0px)));
  padding-left: 16px;
  padding-right: 16px;
  background:
    radial-gradient(90% 28% at 50% -4%, #e5fbf1 0%, rgba(255, 255, 255, 0) 72%),
    #f7fbf9;
}
.classes-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; }
.classes-back {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: var(--navy);
  text-decoration: none;
}
.classes-bell {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.06);
}
.classes-bell .icon { width: 18px; height: 18px; }
.classes-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.classes-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #e6edf5;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
}
.classes-search input:focus {
  outline: none;
  border-color: var(--green);
}
.classes-search button {
  flex: none;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.classes-back .icon { width: 22px; height: 22px; transform: rotate(180deg); }
.classes-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: #fef6e4;
  color: #e39b12;
  font-size: 15px;
  font-weight: 800;
}
.classes-coins .gold-coin { width: 22px; height: 22px; }
.classes-menu { position: relative; }
.classes-menu summary {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  list-style: none;
  cursor: pointer;
}
.classes-menu summary::-webkit-details-marker { display: none; }
.classes-menu summary .icon { width: 18px; height: 18px; transform: rotate(90deg); }
.classes-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(16, 22, 56, 0.12);
}
.classes-menu-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.classes-menu-panel a:hover { background: #f4fbf7; }
.classes-screen .app-body { padding-bottom: 6px; }
.classes-banner {
  position: relative;
  min-height: 124px;
  margin-top: 6px;
  padding: 14px 14px 12px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(90px 70px at 78% 18%, rgba(255, 255, 255, 0.95), transparent 72%),
    linear-gradient(180deg, #e7fbf6 0%, #f4fffb 70%);
}
.classes-banner-copy { position: relative; z-index: 1; max-width: 58%; }
.classes-banner-copy > p:first-child {
  margin: 0;
  color: #5e7093;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.classes-banner-copy h2 {
  margin: 4px 0 0;
  color: #101638;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.classes-banner-lead {
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.classes-dots { display: flex; align-items: center; gap: 5px; margin-top: 12px; }
.classes-dots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #d0d5dd;
}
.classes-dots i:first-child { width: 16px; background: #12b76a; }
.classes-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.classes-course {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 22, 56, 0.05);
}
.classes-book {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #d9f8ea;
  color: #12b76a;
}
.classes-book .icon { width: 26px; height: 26px; }
.classes-course-copy { min-width: 0; flex: 1; }
.classes-course-copy h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.classes-course-copy p {
  margin: 2px 0 0;
  overflow: hidden;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.classes-points {
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  flex: none;
  padding: 8px 10px 8px 8px;
  border-radius: 16px;
  background: #fef6e4;
}
.classes-points .gold-coin { grid-row: 1 / span 2; width: 28px; height: 28px; }
.classes-points small { color: #98a2b3; font-size: 10px; font-weight: 600; line-height: 1.1; }
.classes-points b { color: #101638; font-size: 16px; font-weight: 800; line-height: 1.1; }
.classes-about {
  margin: 10px 2px 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.classes-about strong { color: #101638; font-weight: 800; }
.classes-days-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 8px;
}
.classes-days-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.03em; }
.classes-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 8px 0 12px;
  border: 1.5px solid #12b76a;
  border-radius: 999px;
  background: #fff;
  color: #12b76a;
  font-size: 13px;
  font-weight: 700;
}
.classes-all .icon { width: 14px; height: 14px; }
.classes-days { display: grid; gap: 6px; }
.classes-screen .day-num {
  width: 34px;
  height: 34px;
  color: #fff;
  box-shadow: 0 4px 8px rgba(16, 22, 56, 0.08);
}
.classes-screen .day-num.tone-1 { background: #14c48a; color: #fff; }
.classes-screen .day-num.tone-2 { background: #ffb41c; color: #fff; }
.classes-screen .day-num.tone-3 { background: #ff5d6c; color: #fff; }
.classes-screen .day-num.tone-4 { background: #8a79fc; color: #fff; }
.classes-screen .day-num.tone-5 { background: #3fb6fd; color: #fff; }
.classes-screen .day-num.tone-6 { background: #36d0ca; color: #fff; }
.classes-screen .day-card,
.classes-screen .day-card.tone-card-1,
.classes-screen .day-card.tone-card-2,
.classes-screen .day-card.tone-card-3,
.classes-screen .day-card.tone-card-4,
.classes-screen .day-card.tone-card-5,
.classes-screen .day-card.tone-card-6 {
  min-height: 0;
  gap: 8px;
  padding: 8px;
  background: #e7f8ef;
  border: 1px solid #b7e4cc;
  box-shadow: none;
}
.classes-screen .day-copy {
  background: #fff;
  border: 1px solid #e4efe8;
  border-radius: 14px;
  padding: 8px 10px;
}
.classes-screen .day-card.is-low { --ring: #ff5d6c; }
.classes-screen .day-card.is-zero { --ring: #e6eaf0; }
.classes-screen .day-card.is-zero .day-ring span { color: #667085; }
.classes-screen .day-card.is-done { --ring: #14c48a; }
.classes-screen .day-card.is-progress { --ring: #ffb41c; }
.classes-screen .day-copy { gap: 0; }
.classes-screen .day-copy b { font-size: 14px; font-weight: 800; }
.classes-screen .day-copy small { color: #98a2b3; font-size: 12px; font-weight: 600; }
.classes-screen .day-meta { margin-top: 2px; gap: 6px; }
.classes-screen .day-meta .icon { width: 14px; height: 14px; color: #c5ccd6; }
.classes-screen .day-meta .gold-coin { width: 14px; height: 14px; }
.classes-sep { width: 1px; height: 12px; background: #e4e7ec; }
.classes-screen .day-ring { width: 46px; height: 46px; }
.classes-screen .day-ring span { width: 36px; height: 36px; font-size: 11px; }
.modules-screen h1 { margin-bottom: 0; }
.module-topics {
  display: flex;
  gap: 8px;
  margin: 16px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.module-topics::-webkit-scrollbar { display: none; }
.module-topic {
  flex: none;
  max-width: 180px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #d7f0e4;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.module-topic.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.module-card {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e6eee9;
  border-radius: 18px;
  background: #fff;
}
.module-card h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.02em; }
.module-class {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #f2f4f7;
  color: inherit;
  text-decoration: none;
}
.module-class b, .module-class small { display: block; }
.module-class b { font-size: 14px; }
.module-class small { color: var(--muted); font-size: 12px; font-weight: 600; }
.module-class > span:nth-child(2) { min-width: 0; flex: 1; }
.module-class > .icon { width: 16px; height: 16px; color: #98a2b3; flex: none; }
.module-class-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: #e7f8ef;
  color: var(--green);
}
.module-class-icon .icon { width: 16px; height: 16px; }
.notice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notice-head h1 { margin: 0; }
.notice-head form { margin: 0; }
.notice-read-all {
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.notice-list { display: grid; gap: 10px; margin-top: 16px; }
.notice-card,
.notice-sheet-copy,
#notice-title {
  font-family: "Noto Serif Malayalam", Inter, sans-serif;
}
.notice-screen .notice-head,
.notice-screen .notice-card,
.notice-screen .notice-body,
.notice-screen .notice-more,
.notice-screen .notice-mark,
.notice-screen .notice-when,
.notice-screen .lede {
  font-family: "AQLORA Anek", Inter, "Anek Malayalam", "Noto Serif Malayalam", sans-serif;
}
.notice-screen .notice-card h2,
.notice-screen .notice-body,
.notice-screen .lede {
  letter-spacing: normal;
  overflow-wrap: break-word;
}
.notice-screen .notice-body { line-height: 1.6; }
.notice-card {
  padding: 14px;
  border: 1px solid #e6eee9;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
}
.account-course-list { max-width: 100%; overflow: visible; }
.notice-card.is-unread { border-color: #b7e4cc; background: #f7fdf9; }
.notice-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.notice-card h2 { margin: 0; font-size: 16px; letter-spacing: -0.02em; }
.notice-card.is-unread h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--green);
  vertical-align: middle;
}
.notice-bell {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--green);
  -webkit-mask: url("../brand/bell.png") center / contain no-repeat;
  mask: url("../brand/bell.png") center / contain no-repeat;
}
.notice-card-head .notice-bell { margin-top: 2px; }
.notice-mark {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-weight: 800;
  padding: 0;
}
.notice-body {
  margin: 8px 0 0;
  color: #344054;
  line-height: 1.45;
}
.notice-body p,
.notice-sheet-copy p { margin: 0 0 8px; }
.notice-body p:last-child,
.notice-sheet-copy p:last-child { margin-bottom: 0; }
.notice-body a,
.notice-sheet-copy a { color: var(--green); font-weight: 700; }
.notice-body img,
.notice-sheet-copy img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
.notice-body b,
.notice-body strong,
.notice-sheet-copy b,
.notice-sheet-copy strong { font-weight: 700; }
.notice-body i,
.notice-body em,
.notice-sheet-copy i,
.notice-sheet-copy em { font-style: italic; }
.notice-body u,
.notice-sheet-copy u { text-decoration: underline; }
.notice-body s,
.notice-body strike,
.notice-sheet-copy s,
.notice-sheet-copy strike { text-decoration: line-through; }
.notice-body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notice-more, .notice-event {
  margin-top: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--green);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.notice-event { display: inline-flex; }
.notice-when { display: flex; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.notice-tag {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
}
.notice-sheet-copy {
  margin: 8px 0 0;
  color: #475467;
  font-size: 15px;
  line-height: 1.5;
}
.notice-actions { display: grid; gap: 10px; margin-top: 16px; }
.notice-actions .btn { height: 48px; box-shadow: none; }
.notice-later {
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid #d0d5dd;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.card-validity { display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 700; }
.card-validity .icon { width: 14px; height: 14px; flex: none; }
.overview-validity-line,
.overview-students {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.overview-students { margin-top: 6px; color: var(--navy); }
.overview-validity-line .icon,
.overview-students .icon { width: 14px; height: 14px; flex: none; }
.class-index {
  display: inline-grid;
  place-items: center;
  min-width: 1.1em;
  margin-right: 6px;
  color: var(--green);
  font-style: normal;
  font-weight: 800;
}
.home-banner {
  display: block;
  margin-top: 16px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #d9f3e6;
  background: #fff;
}
.home-banner img {
  position: static;
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
}
@font-face {
  font-family: "AQLORA Anek";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v18/6qLUKZActRTs_mZAJUZWWkhke0nYa_vC8_Azq3-gP1S7bb9_Xjg.woff2") format("woff2");
  unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0B83, U+0D00-0D7F, U+1CDA, U+1CF2, U+200C-200D, U+20B9, U+25CC, U+A830-A832;
}
@font-face {
  font-family: "Anek Malayalam";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v18/6qLUKZActRTs_mZAJUZWWkhke0nYa_vC8_Azq3-gP1S7bb9_Xjg.woff2") format("woff2");
  unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0B83, U+0D00-0D7F, U+1CDA, U+1CF2, U+200C-200D, U+20B9, U+25CC, U+A830-A832;
}
.news-scroller {
  height: 40px;
  margin-top: 16px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--green);
  color: #fff;
  font-family: "AQLORA Anek", Inter, "Noto Serif Malayalam", "Anek Malayalam", sans-serif;
}
.news-scroller-track {
  display: flex;
  width: max-content;
  animation: news-marquee 28s linear infinite;
}
.news-scroller-line {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 40px;
  margin: 0;
  padding-right: 28px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  line-height: 40px;
}
.news-scroller-line span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
}
.news-scroller-line span + span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}
@keyframes news-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .news-scroller { height: auto; }
  .news-scroller-track { animation: none; width: auto; }
  .news-scroller-line[aria-hidden="true"] { display: none; }
  .news-scroller-line {
    height: auto;
    white-space: normal;
    flex-wrap: wrap;
    padding: 10px 12px;
    line-height: 1.45;
  }
}
.home-exam {
  margin-top: 16px;
  font-family: "AQLORA Anek", Inter, "Noto Serif Malayalam", "Anek Malayalam", sans-serif;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.home-exam .glass-card {
  position: relative;
  min-width: 0;
  padding: 16px 14px 14px;
  border: 1px solid #d7f3e4;
  border-radius: 30px;
  background:
    radial-gradient(70% 48% at 100% 0%, rgba(183, 240, 207, 0.55), transparent 62%),
    radial-gradient(55% 40% at 0% 100%, rgba(232, 248, 239, 0.9), transparent 70%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 40px rgba(16, 40, 32, 0.08);
  backdrop-filter: blur(12px);
}
.home-exam .glass-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.home-exam .glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 44px);
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5a67 0%, #ff2f45 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.home-exam .glass-badge svg { flex: none; }
.home-exam .glass-cue {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(16, 22, 56, 0.08);
  display: grid;
  place-items: center;
  color: #98a2b3;
  flex: none;
}
.home-exam .glass-cue .icon { width: 16px; height: 16px; }
.home-exam .glass-cue.is-back .icon { transform: rotate(180deg); }
.home-exam .glass-title {
  margin: 14px 0 0;
  color: var(--navy);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.home-exam .glass-sub { margin: 4px 0 0; color: #667085; font-size: 16px; font-weight: 600; }
.home-exam .count-boxes { margin-top: 10px; gap: 8px; }
.home-exam .count-boxes span {
  gap: 1px;
  align-content: center;
  padding: 8px 2px 6px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--green);
  box-shadow: none;
}
.home-exam .count-boxes b { color: #fff; font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.home-exam .count-boxes small { color: #fff; font-size: 11px; font-weight: 700; line-height: 1.1; }
.home-exam .glass-closed {
  margin: 14px 0 0;
  padding: 18px 12px;
  border-radius: 22px;
  background: rgba(236, 252, 244, 0.82);
  color: var(--navy);
  text-align: center;
  font-weight: 800;
}
.home-exam .glass-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e7f6ee;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}
.home-exam .glass-cal {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #e7f8ef;
  color: var(--green);
  display: grid;
  place-items: center;
  flex: none;
}
.home-exam .glass-cal .icon { width: 16px; height: 16px; }
.home-exam .glass-strip-rule { width: 1px; align-self: stretch; background: #e4e7ec; }
.home-exam .glass-strip p { margin: 0; color: #344054; font-size: 13px; font-weight: 600; line-height: 1.35; }
.home-exam .glass-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.home-exam .glass-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #eef6f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
}
.home-exam .glass-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.home-exam .glass-ico .icon { width: 18px; height: 18px; }
.home-exam .glass-ico.is-mint { background: #e7f8ef; color: #078a50; }
.home-exam .glass-ico.is-sky { background: #e7f1fb; color: #3b82f6; }
.home-exam .glass-ico.is-lilac { background: #f3eefe; color: #7c5cbf; }
.home-exam .glass-ico.is-rose { background: #fdecef; color: #e2556a; }
.home-exam .glass-label,
.home-exam .glass-date { font-family: "Noto Serif Malayalam", Inter, sans-serif; }
.home-exam .glass-label { color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.45; }
.home-exam .glass-date { color: #067647; font-size: 12px; font-weight: 700; text-align: right; line-height: 1.4; }
.home-exam .glass-empty, .home-exam .glass-empty-card .glass-sub { margin: 0; }
.exam-flip { perspective: 1400px; }
.exam-flip-inner { display: grid; transform-style: preserve-3d; }
.exam-face {
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform 0.7s ease;
  cursor: pointer;
}
.home-exam .exam-face:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.exam-back {
  transform: rotateY(180deg);
  pointer-events: none;
}
.exam-flip.is-flipped .exam-front { transform: rotateY(-180deg); pointer-events: none; }
.exam-flip.is-flipped .exam-back { transform: rotateY(0deg); pointer-events: auto; }
.exam-back-copy {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.home-exam .exam-back-copy p { margin: 0 0 0.75em; }
.home-exam .exam-back-copy p:last-child { margin-bottom: 0; }
.home-exam .exam-back-copy b,
.home-exam .exam-back-copy strong { font-weight: 800; }
.home-exam .exam-back-copy ul,
.home-exam .exam-back-copy ol { margin: 0.35em 0 0.35em 1.2em; padding: 0; }
.home-exam .exam-back-copy li { margin: 0.15em 0; }
.home-exam .exam-back-copy a { color: var(--green-dark); }
.home-exam .exam-back-copy img { display: block; max-width: 100%; height: auto; margin: 0.4em 0; border-radius: 12px; }
@media (max-width: 390px) {
  .home-exam .glass-title { font-size: 24px; }
  .home-exam .glass-sub { font-size: 14px; }
  .home-exam .count-boxes { gap: 6px; }
  .home-exam .count-boxes span { padding: 6px 2px 5px; }
  .home-exam .count-boxes b { font-size: 22px; font-weight: 800; line-height: 1; }
  .home-exam .count-boxes small { font-size: 10px; }
  .home-exam .glass-row { grid-template-columns: 36px minmax(0, 1fr); }
  .home-exam .glass-date { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .exam-face { transition: none; }
}
.home-exam-note { margin: 8px 0 0; color: var(--green); font-size: 13px; font-weight: 700; }
.home-exam-options { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.home-exam-options a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #d9f3e6;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.home-exam-options a.is-on { border-color: var(--green); background: var(--green); color: #fff; }
@keyframes bell-shake {
  0%, 62%, 100% { transform: rotate(0); }
  68% { transform: rotate(14deg); }
  74% { transform: rotate(-12deg); }
  80% { transform: rotate(8deg); }
  86% { transform: rotate(-4deg); }
  92% { transform: rotate(2deg); }
}
.round-tool.has-unread .icon,
.round-tool.has-unread .bell-asset,
.classes-bell.has-unread .icon,
.classes-bell.has-unread .bell-asset {
  transform-origin: 50% 0;
  animation: bell-shake 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .round-tool.has-unread .icon,
  .round-tool.has-unread .bell-asset,
  .classes-bell.has-unread .icon,
  .classes-bell.has-unread .bell-asset { animation: none; }
}
.offer-card, .owned-card { position: relative; }
.fav-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 22, 56, 0.08);
  display: grid;
  place-items: center;
}
.fav-btn img { width: 18px; height: 18px; object-fit: contain; opacity: 0.45; filter: invert(22%) sepia(90%) saturate(4800%) hue-rotate(342deg) brightness(95%) contrast(96%); }
.fav-btn.is-on img { opacity: 1; }
.lora-home {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #d9f3e6;
  border-radius: 22px;
  background: #fff;
}
.lora-home img { width: 88px; height: 110px; object-fit: contain; }
.lora-home h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.lora-home p { margin: 6px 0 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.lora-home fieldset { margin: 0 0 10px; padding: 0; border: 0; }
.lora-home legend { margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.lora-home label { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 6px 0; font-size: 13px; font-weight: 600; }
.lora-home-courses { max-height: 148px; overflow: auto; }
.lora-home-courses label { display: flex; }
.rewards-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e4efe8;
}
.rewards-balance img { width: 48px; height: 48px; object-fit: contain; }
.rewards-balance p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.rewards-balance strong { display: block; font-size: 28px; letter-spacing: -0.03em; }
.rewards-balance .gold-coin { width: 36px; height: 36px; margin-left: auto; }
.paper-list { display: grid; gap: 10px; margin-top: 16px; }
.paper-list h2 { margin: 0; font-size: 16px; }
.classes-bell .bell-asset { width: 22px; height: 22px; }

.learn-course .learn-exams { display: none; }
.learn-course[data-mode="test"] .learn-exams { display: block; }
.learn-course[data-mode="test"] .day-board,
.learn-course[data-mode="test"] .learn-split,
.learn-course[data-mode="test"] .learn-levels,
.learn-course[data-mode="test"] [data-learn-level] { display: none; }
.exam-tabs { display: flex; gap: 8px; margin: 16px 0 12px; padding: 4px; border-radius: 14px; background: #eef8f3; }
.exam-tabs button {
  flex: 1;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 8px;
  cursor: pointer;
}
.exam-tabs button.is-on { background: #fff; color: var(--green); box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08); }
.exam-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  text-decoration: none;
  color: inherit;
}
.exam-card-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e7f8ef;
  color: var(--green);
}
.exam-card-mark .icon { width: 20px; height: 20px; }
.exam-card b, .exam-card small { display: block; }
.exam-card b { font-size: 15px; }
.exam-card small { color: #98a2b3; font-size: 12px; font-weight: 600; }
.exam-card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0; color: #667085; font-size: 12px; font-weight: 700; }
.exam-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.exam-card-meta .icon { width: 14px; height: 14px; }
.exam-card > .icon { margin-left: auto; width: 16px; height: 16px; color: #98a2b3; }
.lora-card {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f3fbf7, #fff);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
}
.lora-card img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.lora-card b { display: block; }
.lora-card p { margin: 4px 0 8px; color: #667085; font-size: 13px; }
.lora-card button, .lora-card .btn { border: 0; border-radius: 999px; background: var(--green); color: #fff; font: inherit; font-weight: 800; padding: 8px 14px; text-decoration: none; }
.lora-sleep { margin-top: 8px; }
.lora-day { margin-bottom: 12px; }
.lora-dock { position: relative; z-index: 20; }
.lora-launcher {
  position: fixed;
  right: 16px;
  bottom: 118px;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.16);
  padding: 4px;
  cursor: pointer;
}
.lora-launcher img { width: 100%; height: 100%; object-fit: contain; }
.lora-panel {
  position: fixed;
  right: 16px;
  bottom: 190px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 190px));
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.18);
  overflow: hidden;
}
.lora-panel header { display: flex; gap: 10px; align-items: center; padding: 12px; background: #eef8f3; }
.lora-panel header img { width: 52px; height: 52px; object-fit: contain; }
.lora-panel header p { margin: 0; color: #667085; font-size: 12px; }
.lora-panel header button { margin-left: auto; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.lora-log { display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: auto; }
.lora-bubble { margin: 0; padding: 10px 12px; border-radius: 14px; background: #f4fbf7; color: #344054; font-size: 14px; }
.lora-bubble.is-mine { align-self: flex-end; background: #e7f8ef; }
.lora-panel form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eef2f6; }
.lora-panel input { flex: 1; border: 1px solid #e4e7ec; border-radius: 12px; padding: 10px 12px; font: inherit; }
.lora-panel form button { border: 0; border-radius: 12px; background: var(--green); color: #fff; font: inherit; font-weight: 800; padding: 0 14px; }
.paper-screen .paper-top { display: flex; align-items: center; gap: 10px; }
.paper-screen .paper-top h1 { flex: 1; margin: 0; font-size: 18px; }
.paper-heart { color: var(--green); font-weight: 800; text-decoration: none; }
.paper-timer { margin: 0; padding: 6px 10px; border-radius: 999px; background: #e7f8ef; color: #067647; font-weight: 800; }
.paper-intro, .paper-score {
  margin-top: 12px;
  padding: 18px 16px 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f3fbf7, #fff 42%);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
  text-align: center;
}
.paper-intro img, .paper-score img { width: min(220px, 70%); height: auto; object-fit: contain; }
.paper-intro > img { width: 104px; height: 104px; max-width: 104px; }
.paper-kicker { margin: 0; color: var(--green); font-weight: 800; }
.paper-intro h2, .paper-score h2 { margin: 6px 0; }
.paper-facts { display: flex; justify-content: center; gap: 16px; color: #667085; font-weight: 700; }
.paper-facts span { display: inline-flex; align-items: center; gap: 6px; }
.paper-intro h3, .paper-copy { text-align: left; }
.paper-copy { white-space: pre-wrap; color: #475467; }
.paper-start { display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; text-decoration: none; }
.exam-choice-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}
.exam-choice-row > * { flex: 1 1 0; min-width: 0; margin: 0; }
.exam-choice-row .btn {
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 15px;
}
.paper-progress { margin: 8px 0 6px; color: #667085; font-size: 12px; font-weight: 700; }
.paper-questions { list-style: none; margin: 0 0 12px; padding: 0; }
.paper-questions li { padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05); }
.paper-choice { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 12px; border-radius: 14px; background: #f8fafc; }
.paper-choice:has(input:checked) { background: #e7f8ef; }
.paper-choice input { margin-top: 4px; }
.paper-palette {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
}
.paper-palette button, .paper-nav .btn { border: 0; font: inherit; font-weight: 800; }
.paper-nav .btn { border-radius: 12px; }
.paper-palette button {
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
}
.paper-palette button.is-on { background: var(--green); color: #fff; }
.paper-palette button.is-done { box-shadow: inset 0 0 0 2px var(--green); }
.paper-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.paper-nav .btn { flex: 1; width: auto; min-width: 120px; height: 48px; box-shadow: none; }
.paper-screen .btn-line { background: #fff; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.quiz-screen {
  background:
    radial-gradient(90% 36% at 50% -10%, #dff6ea 0%, rgba(255, 255, 255, 0) 68%),
    #f3fbf7;
}
.quiz-screen .app-body { padding-bottom: 12px; }
.quiz-screen > .quiz-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  padding-bottom: 4px;
}
.quiz-screen > .quiz-react {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(94px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}
.quiz-screen > .tabbar { position: relative; z-index: 6; }
.quiz-head { display: grid; gap: 8px; }
.quiz-top { display: flex; align-items: center; gap: 8px; }
.quiz-titles { flex: 1; min-width: 0; }
.quiz-titles strong,
.quiz-titles small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-titles strong { font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; }
.quiz-titles small { margin-top: 2px; color: #98a2b3; font-size: 11px; font-weight: 700; }
.quiz-coins,
.quiz-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 36px;
  margin: 0;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: #e7f8ef;
  font-weight: 800;
}
.quiz-coins { color: #101828; }
.quiz-coins .gold-coin { width: 22px; height: 22px; }
.quiz-coins b { font-size: 14px; }
.quiz-meta { display: flex; align-items: center; gap: 10px; }
.quiz-book {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: #e7f8ef;
  color: var(--green);
}
.quiz-book .icon { width: 18px; height: 18px; }
.quiz-progress { flex: 1; min-width: 0; }
.quiz-progress p { margin: 0 0 6px; font-size: 13px; font-weight: 800; }
.quiz-track { display: block; height: 4px; border-radius: 99px; background: #d9f3e6; overflow: hidden; }
.quiz-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width 240ms ease; }
.quiz-timer { color: #067647; font-size: 14px; }
.quiz-timer .icon { width: 16px; height: 16px; }
.paper-questions.quiz-list { margin: 8px 0 0; }
.quiz-list > [hidden] { display: none; }
.paper-questions li.quiz-card {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}
.quiz-prompt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  margin: 0 0 8px;
  overflow: hidden;
  font-family: "Anek Malayalam", Inter, "Noto Sans Arabic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: break-word;
}
.quiz-card.is-expanded .quiz-prompt {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.quiz-more {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.quiz-options { display: grid; gap: 8px; }
.quiz-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #e7edf2;
  font-family: "Anek Malayalam", Inter, "Noto Sans Arabic", sans-serif;
}
.quiz-card.is-locked .quiz-choice { pointer-events: none; }
.quiz-choice input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-letter {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #f2f4f7;
  color: #344054;
  font-weight: 800;
}
.quiz-copy { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.4; overflow-wrap: break-word; }
.quiz-mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #d0d5dd;
  background: transparent center / 12px no-repeat;
}
.quiz-choice.is-right { background: var(--green); color: #fff; box-shadow: none; }
.quiz-choice.is-right .quiz-letter { background: #fff; color: var(--green); }
.quiz-choice.is-right .quiz-mark {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%2308ad65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: none;
}
.quiz-choice.is-reveal { background: #e7f8ef; color: #067647; box-shadow: inset 0 0 0 1.5px #12b76a; }
.quiz-choice.is-reveal .quiz-letter { background: var(--green); color: #fff; }
.quiz-choice.is-reveal .quiz-mark {
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: none;
}
.quiz-choice.is-wrong { background: #fff1f3; color: #b42318; box-shadow: inset 0 0 0 1.5px #f04438; }
.quiz-choice.is-wrong .quiz-letter { background: #f04438; color: #fff; }
.quiz-choice.is-wrong .quiz-mark {
  background-color: #f04438;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow: none;
}
.quiz-mascot-pop {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 76px;
  height: 76px;
  margin-left: -38px;
  pointer-events: none;
  z-index: 2;
}
.quiz-mascot-pop[hidden] { display: none; }
.quiz-mascot-pop img { width: 76px; height: 76px; object-fit: contain; }
.quiz-mascot-pop span {
  position: absolute;
  right: -2px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f04438;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.quiz-mascot-pop.is-on { animation: quiz-mascot 3s ease forwards; }
.quiz-mascot-happy { left: 12px; margin-left: 0; width: 72px; height: 72px; }
.quiz-mascot-happy img { width: 72px; height: 72px; }
.quiz-mascot-happy.is-on { animation: quiz-happy 1.6s ease forwards; }
.quiz-coin-burst {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 92px;
  height: 130px;
  margin-left: -46px;
  pointer-events: none;
  z-index: 3;
}
.quiz-coin-burst .gold-coin,
.quiz-coin-burst b { position: absolute; animation: quiz-coin-rise 1.5s ease-out forwards; }
.quiz-coin-burst .gold-coin { left: 22px; bottom: 8px; width: 42px; height: 42px; }
.quiz-coin-burst b { left: 52px; bottom: 36px; color: #b54708; font-size: 16px; }
.quiz-coin-burst i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #f5b400;
  animation: quiz-spark 1.5s ease-out forwards;
}
.quiz-coin-burst i:nth-child(1) { left: 8px; bottom: 28px; }
.quiz-coin-burst i:nth-child(2) { left: 40px; bottom: 48px; background: #86e0b4; }
.quiz-coin-burst i:nth-child(3) { left: 68px; bottom: 20px; }
@keyframes quiz-coin-rise {
  0% { transform: translateY(16px) scale(0.6); opacity: 0; }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  100% { transform: translateY(-108px) scale(0.86); opacity: 0; }
}
@keyframes quiz-spark {
  0% { transform: translateY(8px) scale(0.4); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translateY(-96px) rotate(18deg); opacity: 0; }
}
@keyframes quiz-mascot {
  0% { opacity: 0; transform: scale(0.72); }
  14% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.94); }
}
@keyframes quiz-happy {
  0% { opacity: 0; transform: translateY(10px) scale(0.72); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  68% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.94); }
}
.score-moods,
.review-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.score-moods { margin-top: 14px; }
.score-mood {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 92px;
  padding: 8px 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--green);
  color: var(--green-dark, #078a50);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.paper-score .score-mood img {
  width: 48px;
  height: 48px;
  max-width: 48px;
  object-fit: contain;
}
.score-mood span { max-width: 100%; }
.review-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 16px 0 8px;
  scroll-margin-bottom: 12px;
}
.review-actions > * { flex: 1 1 0; min-width: 0; }
.review-actions form { min-width: 0; margin: 0; }
.review-actions .btn,
.review-actions .paper-start {
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 8px;
  font-size: 15px;
  white-space: nowrap;
}
.review-actions > :only-child { grid-column: 1 / -1; }
.paper-screen .app-body { overflow-x: hidden; }
.paper-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.paper-stats span { padding: 12px 8px; border-radius: 16px; background: #fff; }
.paper-stats b { display: block; font-size: 20px; }
.paper-stats small { color: #667085; }
.paper-score-line { font-weight: 800; }
.paper-actions { display: grid; gap: 8px; margin-top: 12px; }
.paper-actions .paper-start { margin-top: 0; }
.paper-review { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; scroll-margin-top: 12px; }
.paper-review li {
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  overflow-wrap: break-word;
  font-family: "Anek Malayalam", Inter, "Noto Sans Arabic", sans-serif;
}
.paper-review-num { margin-right: 6px; color: #667085; font-size: 12px; }
.paper-review .paper-choice > span { flex: 1; }
.paper-review .paper-choice.is-correct { background: #e7f8ef; box-shadow: inset 0 0 0 1.5px #12b76a; }
.paper-review .paper-choice.is-selected { background: #fef3f2; box-shadow: inset 0 0 0 1.5px #f04438; }
.paper-review .paper-choice small { margin-left: auto; color: #067647; font-size: 12px; font-weight: 800; }
.paper-review .paper-choice.is-selected small { color: #b42318; }
@media (min-width: 800px) {
  .paper-screen .app-body { max-width: 720px; }
  .learn-exams { max-width: 720px; }
  .exam-hub .app-body { max-width: 720px; }
}
.home-screen .app-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.home-screen .app-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.count-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.count-boxes span {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 4px;
  border-radius: 16px;
  background: #f4f7fb;
}
.count-boxes b { font-size: 22px; letter-spacing: -0.03em; }
.count-boxes small { color: #667085; font-size: 11px; font-weight: 700; }
.my-courses-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: #e7f8ef;
  color: var(--green);
  font: inherit;
  font-weight: 800;
}
.my-courses-btn .icon { width: 22px; height: 22px; color: var(--green); }
a.exam-offer { color: inherit; text-decoration: none; }
.courses-screen a.exam-offer .offer-copy h3 { padding-right: 0; }
.learn-sheet-list > a.learn-sheet-course { margin-bottom: 10px; text-decoration: none; }
.learn-card .btn { margin-top: 14px; }
.my-courses-btn .tab-icon {
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("nav/courses.png") center / contain no-repeat;
  mask: url("nav/courses.png") center / contain no-repeat;
}
.learn-sheet-course input { position: absolute; }
.account-screen.is-profile .app-body { padding-bottom: 24px; }
.account-screen.is-profile .account-person { margin-top: 14px; }
.account-screen.is-profile .account-menu { gap: 10px; margin-top: 12px; }
.profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.profile-head > div { min-width: 0; }
.profile-head h1 { margin: 0; }
.profile-settings {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #e7f8ef;
  color: var(--green);
  display: grid;
  place-items: center;
  text-decoration: none;
  flex: none;
}
.profile-settings .icon { width: 22px; height: 22px; }
.profile-interests {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  min-width: 0;
}
.profile-interests > h2,
.profile-interests > p,
.profile-interests > .btn,
.profile-subject-courses {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}
.profile-interests h2 { margin: 0; font-size: 16px; }
.profile-interests > p { margin: 0; }
.profile-interests > .btn { margin-top: 6px; }
.profile-subject-courses { display: grid; gap: 8px; margin: 0 0 4px; }
.profile-subject-courses label { display: flex; gap: 8px; align-items: flex-start; min-width: 0; font-weight: 600; }
.profile-subject-courses label span { min-width: 0; overflow-wrap: anywhere; }
.account-chip { max-width: 100%; }
.account-chip span { min-width: 0; overflow-wrap: anywhere; }
.quick-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick-sheet-grid a {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 88px;
  padding: 12px 6px;
  border-radius: 18px;
  background: #e7f8ef;
  color: var(--navy);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.exam-hub { background: #eef8f3; }
.exam-hub-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 28px;
  background: linear-gradient(180deg, #7ddea8 0%, #b7f0cf 100%);
  color: #fff;
}
.exam-hub-hero h1 { margin: 0; flex: 1; text-align: center; font-size: 22px; }
.exam-hub-back { color: #fff; display: grid; place-items: center; width: 36px; height: 36px; }
.exam-hub-back .icon { width: 22px; height: 22px; }
.exam-hub-body {
  margin-top: -16px;
  border-radius: 24px 24px 0 0;
  background: #f7faf8;
  padding-top: 16px;
}
.exam-hub-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: 46px;
  border-radius: 16px;
  background: #fff;
}
.exam-hub-search input { flex: 1; border: 0; background: transparent; font: inherit; outline: none; }
.exam-hub-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.exam-hub-tabs a {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  font-weight: 800;
}
.exam-hub-tabs a.is-on { background: var(--green); color: #fff; }
.exam-hub-list { display: grid; gap: 10px; }
.exam-hub-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.04);
}
.exam-hub-card b { display: block; }
.exam-hub-card small { color: #667085; }
.exam-hub-card em { margin-left: auto; color: var(--green); font-style: normal; font-weight: 800; }
.exam-hub-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e7f8ef;
  color: var(--green);
  display: grid;
  place-items: center;
  flex: none;
}
.exam-hub-mark .icon { width: 20px; height: 20px; }
.scratch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.reward-section { margin-top: 18px; }
.reward-section h2 { margin: 0 0 10px; font-size: 18px; }
.scratch-card {
  position: relative;
  min-height: 150px;
  border-radius: 18px;
  overflow: hidden;
  background: #eef6ff;
}
.scratch-prize { padding: 14px; }
.scratch-prize b { display: block; }
.scratch-prize p { margin: 6px 0; color: #475467; font-size: 13px; }
.scratch-prize button, .scratch-prize span { color: var(--green); border: 0; background: transparent; font: inherit; font-weight: 800; padding: 0; cursor: pointer; }
.scratch-cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.scratch-card.is-used .scratch-prize span { color: #667085; }
.lora-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lora-choices button {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font: inherit;
  font-weight: 800;
  padding: 6px 10px;
}
.learn-sheet-list .tab-icon.courses {
  width: 22px;
  height: 22px;
  background: var(--green);
  -webkit-mask: url("nav/courses.png") center / contain no-repeat;
  mask: url("nav/courses.png") center / contain no-repeat;
}

.rewards-screen { background: linear-gradient(180deg, #f3fbf7 0%, #fff 220px); }
.rewards-screen .app-body { padding-bottom: 28px; overflow-x: hidden; }
.rewards-hero { display: flex; align-items: flex-end; gap: 4px; }
.rewards-hero-copy { flex: 1; min-width: 0; }
.rewards-hero h1 { margin: 2px 0 10px; font-size: 32px; letter-spacing: -0.04em; }
.rewards-lora { width: 132px; height: auto; flex: none; margin: 0 -6px -4px 0; }
.rewards-screen .rewards-balance { margin-top: 0; padding: 12px 14px; border-radius: 18px; box-shadow: 0 8px 24px rgba(16, 22, 56, 0.04); }
.rewards-screen .rewards-balance img { width: 46px; height: 46px; }
.rewards-screen .rewards-balance strong { font-size: 26px; }
.reward-lead { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.reward-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reward-section-head h2 { margin: 0; }
.reward-section-head span { display: inline-flex; align-items: center; gap: 2px; color: var(--green); font-size: 13px; font-weight: 800; }
.reward-section-head .icon { width: 14px; height: 14px; }
.scratch-promo {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 118px;
  margin: 0;
  padding: 16px 118px 16px 16px;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(80px 60px at 82% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(180deg, #e7f8ee 0%, #f4fbf7 100%);
  box-shadow: 0 10px 24px rgba(8, 173, 101, 0.08);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.scratch-promo b { display: block; color: var(--green); font-size: 22px; letter-spacing: -0.03em; }
.scratch-promo small { display: block; margin-top: 4px; color: #5f6b7a; font-size: 13px; font-weight: 600; }
.scratch-promo img { position: absolute; right: -6px; bottom: -8px; width: 132px; height: auto; pointer-events: none; }
.reward-list { display: grid; gap: 10px; }
.reward-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e7eef0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.04);
}
.reward-row-icon { width: 44px; height: 44px; flex: none; }
.reward-row-icon img { width: 44px; height: 44px; object-fit: contain; }
.reward-row-copy { flex: 1; min-width: 0; }
.reward-row-copy b, .reward-row-copy small { display: block; }
.reward-row-copy b { font-size: 15px; }
.reward-row-copy small { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.reward-row-coins { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.reward-row-coins img { width: 22px; height: 22px; }
.reward-row-go { color: #98a2b3; }
.reward-row-go .icon { width: 16px; height: 16px; }
.reward-row em { color: #667085; font-style: normal; font-size: 13px; font-weight: 800; }
.reward-row button {
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.reward-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px 14px 20px;
  background: rgba(28, 36, 43, 0.62);
}
.reward-modal[hidden] { display: none; }
.reward-sheet {
  position: relative;
  width: min(100%, 360px);
  max-height: 100%;
  overflow: auto;
  padding: 18px 16px 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fbfff8 0%, #fff 42%);
  box-shadow: 0 24px 60px rgba(16, 22, 56, 0.28);
  text-align: center;
}
.reward-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #eef2f6;
  color: #344054;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.reward-peek { width: min(230px, 78%); height: auto; margin: 4px auto 0; }
.reward-sheet h2 { margin: 8px 0 4px; font-size: 26px; letter-spacing: -0.03em; }
.reward-sub { margin: 0 0 12px; color: #667085; font-size: 14px; font-weight: 600; }
.scratch-surface {
  position: relative;
  height: 168px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff8e6;
  box-shadow: inset 0 0 0 1px rgba(212, 148, 32, 0.25);
}
.scratch-reveal { position: absolute; inset: 0; display: grid; place-items: center; }
.scratch-reveal img { width: 72px; height: 72px; }
.scratch-surface canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.scratch-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff4e5;
  color: #c2410c;
  font-size: 13px;
  font-weight: 700;
}
.scratch-hint img { width: 22px; height: 22px; object-fit: contain; }
.reward-win-art { width: min(280px, 100%); height: auto; margin-top: 8px; }
.reward-win.is-on .reward-win-art { animation: reward-pop 0.55s ease; }
.reward-amount { margin: 4px 0 14px; color: var(--green); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.exam-coin-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: #fff8e6;
}
.exam-coin-reward img { width: 36px; height: 36px; }
.exam-coin-reward p { margin: 0; font-size: 14px; font-weight: 700; }
.exam-coin-reward b { color: #b54708; }
.exam-coin-reward.is-fresh { animation: reward-pop 0.6s ease; }
@keyframes reward-pop {
  0% { transform: scale(0.9); opacity: 0.4; }
  70% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.exam-exit {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px 16px calc(18px + max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom, 0px)));
  background: rgba(28, 36, 43, 0.62);
}
.exam-exit[hidden] { display: none; }
.exam-exit-sheet {
  width: min(100%, 360px);
  max-height: calc(100% - 12px);
  overflow: auto;
  padding: 22px 16px 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 22, 56, 0.28);
  text-align: center;
}
.exam-exit-sheet h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.exam-exit-sheet p { margin: 8px 0 16px; color: #475467; font-size: 14px; font-weight: 600; line-height: 1.45; }
.exam-exit-actions { display: flex; flex-wrap: nowrap; gap: 10px; }
.exam-exit-actions > * { flex: 1 1 0; min-width: 0; }
.exam-exit-actions .btn {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 8px;
  font-size: 15px;
  white-space: nowrap;
}
.quiz-coins .gold-coin,
.quiz-coin-burst .gold-coin { object-fit: contain; display: block; }
.quiz-react {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 96px;
  margin-top: 8px;
  overflow: hidden;
  pointer-events: none;
}
.quiz-react .quiz-react-sad,
.quiz-react .quiz-react-happy { display: none; width: 72px; height: 72px; object-fit: contain; }
.quiz-react.is-sad .quiz-react-sad { display: block; animation: quiz-sad 2.2s ease forwards; }
.quiz-react.is-happy .quiz-react-happy { display: block; animation: quiz-dance 1.5s ease; }
.quiz-react .quiz-coin-burst { bottom: 0; height: 76px; }
.quiz-react .quiz-coin-burst .gold-coin,
.quiz-react .quiz-coin-burst b { animation-name: quiz-coin-rise-local; }
.quiz-react .quiz-coin-burst i { animation-name: quiz-spark-local; }
@keyframes quiz-sad {
  0% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  100% { transform: translateY(6px); }
}
@keyframes quiz-dance {
  0% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-8px) rotate(-6deg); }
  40% { transform: translateY(0) rotate(5deg); }
  60% { transform: translateY(-6px) rotate(-4deg); }
  80% { transform: translateY(0) rotate(3deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes quiz-coin-rise-local {
  0% { transform: translateY(8px) scale(0.7); opacity: 0; }
  22% { opacity: 1; transform: translateY(0) scale(1); }
  100% { transform: translateY(-24px) scale(0.92); opacity: 0; }
}
@keyframes quiz-spark-local {
  0% { transform: translateY(4px) scale(0.4); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translateY(-28px) rotate(16deg); opacity: 0; }
}
.paper-score.scoreboard { padding-top: 8px; }
.score-celebrate {
  position: relative;
  height: 188px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.paper-score .score-celebrate .score-jump {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 148px;
  height: 148px;
  max-width: 148px;
  margin: 0 0 0 -74px;
  object-fit: contain;
  animation: score-jump 1.7s ease-in-out infinite;
}
.paper-score .score-celebrate .score-coin {
  position: absolute;
  width: 34px;
  height: 34px;
  max-width: 34px;
  object-fit: contain;
  animation: score-float 2.4s ease-in-out infinite;
}
.score-coin-a { left: 14%; top: 28px; }
.paper-score .score-celebrate .score-coin-b { right: 16%; top: 18px; width: 42px; height: 42px; max-width: 42px; animation-delay: -0.6s; }
.paper-score .score-celebrate .score-coin-c { right: 8%; bottom: 36px; width: 28px; height: 28px; max-width: 28px; animation-delay: -1.1s; }
.score-ribbon {
  position: absolute;
  width: 12px;
  height: 64px;
  border-radius: 8px;
  transform-origin: top center;
}
.score-ribbon-a { left: 10%; top: -8px; background: linear-gradient(#7ee0ad, #08ad65); animation: score-sway-a 2.6s ease-in-out infinite; }
.score-ribbon-b { left: 22%; top: -16px; height: 48px; background: linear-gradient(#ffe08a, #f5b400); animation: score-sway-b 2.6s ease-in-out infinite; }
.score-ribbon-c { right: 18%; top: -6px; background: linear-gradient(#b6f0d2, #12b76a); animation: score-sway-c 2.6s ease-in-out infinite; }
.score-ribbon-d { right: 6%; top: 8px; height: 42px; background: linear-gradient(#ffd36a, #e39b12); animation: score-sway-d 2.6s ease-in-out infinite; }
.score-bit,
.score-spark {
  position: absolute;
  top: -8px;
  opacity: 0;
  animation: score-fall 2.8s ease-in infinite;
}
.score-bit { width: 8px; height: 12px; border-radius: 2px; }
.score-spark {
  width: 8px;
  height: 8px;
  background: #f5b400;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.bit-1 { left: 12%; background: #08ad65; animation-delay: 0.1s; }
.bit-2 { left: 28%; background: #f5b400; animation-delay: 0.6s; }
.bit-3 { left: 46%; height: 8px; background: #7ee0ad; animation-delay: 0.2s; }
.bit-4 { left: 62%; background: #ffd36a; animation-delay: 1s; }
.bit-5 { left: 76%; background: #12b76a; animation-delay: 0.4s; }
.bit-6 { left: 88%; background: #fff; box-shadow: inset 0 0 0 1px #d9f3e6; animation-delay: 1.3s; }
.spark-1 { left: 18%; animation-delay: 0.3s; }
.spark-2 { left: 40%; animation-delay: 0.9s; }
.spark-3 { left: 70%; animation-delay: 0.15s; }
.spark-4 { left: 84%; animation-delay: 1.1s; }
.score-title { margin: 2px 0 0; color: var(--green); font-size: 28px; letter-spacing: -0.03em; }
.score-name {
  margin: 2px 0 0;
  color: #101828;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.score-sub { margin: 2px 0 0; color: #667085; font-size: 15px; font-weight: 700; }
.score-total {
  margin: 14px 0 0;
  padding: 14px 12px 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f4fbf7, #fff);
  box-shadow: inset 0 0 0 1px #e6f6ee;
}
.score-total p { margin: 0; color: #667085; font-size: 13px; font-weight: 700; }
.score-total strong {
  display: block;
  margin-top: 2px;
  color: #101828;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.score-total span { color: #98a2b3; font-size: 28px; font-weight: 700; }
.paper-score .exam-coin-reward img { width: 36px; height: 36px; max-width: 36px; }
.score-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}
.score-actions > * {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 8px;
  font-size: 15px;
  white-space: nowrap;
}
.review-fold {
  margin-top: 12px;
  border-radius: 22px;
  background: #f7fbf8;
  box-shadow: inset 0 0 0 1px #e7f3ec;
  scroll-margin-top: 12px;
}
.review-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.review-book {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: #e7f8ef;
  color: var(--green);
}
.review-book .icon { width: 18px; height: 18px; }
.review-copy { flex: 1; min-width: 0; }
.review-copy strong,
.review-copy small { display: block; }
.review-copy strong { font-size: 15px; }
.review-copy small { margin-top: 2px; color: #667085; font-size: 12px; font-weight: 600; line-height: 1.35; }
.review-chevron { flex: none; color: #98a2b3; transform: rotate(90deg); transition: transform 180ms ease; }
.review-chevron .icon { width: 18px; height: 18px; }
.review-fold.is-open .review-chevron { transform: rotate(-90deg); }
.review-panel { padding: 0 12px 12px; }
.review-panel .paper-review { margin-top: 0; }
.review-panel .learn-note { margin: 0; text-align: left; }
@keyframes score-jump {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-12px); }
  62% { transform: translateY(-2px); }
  78% { transform: translateY(-8px); }
}
@keyframes score-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes score-sway-a {
  0%, 100% { transform: rotate(-24deg); }
  50% { transform: rotate(-14deg); }
}
@keyframes score-sway-b {
  0%, 100% { transform: rotate(16deg); }
  50% { transform: rotate(24deg); }
}
@keyframes score-sway-c {
  0%, 100% { transform: rotate(22deg); }
  50% { transform: rotate(12deg); }
}
@keyframes score-sway-d {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(-6deg); }
}
@keyframes score-fall {
  0% { transform: translateY(-12px) rotate(0); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translateY(180px) rotate(140deg); opacity: 0; }
}
@media (max-width: 360px) {
  .score-title { font-size: 24px; }
  .score-name { font-size: 20px; }
  .score-total strong { font-size: 34px; }
  .score-total span { font-size: 24px; }
  .score-actions > * { font-size: 13px; padding: 0 6px; }
  .quiz-react .quiz-react-sad,
  .quiz-react .quiz-react-happy { width: 60px; height: 60px; }
  .quiz-react { min-height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .score-jump,
  .score-coin,
  .score-ribbon,
  .score-bit,
  .score-spark,
  .quiz-react.is-sad .quiz-react-sad,
  .quiz-react.is-happy .quiz-react-happy { animation: none; }
  .score-ribbon-a { transform: rotate(-24deg); }
  .score-ribbon-b { transform: rotate(16deg); }
  .score-ribbon-c { transform: rotate(22deg); }
  .score-ribbon-d { transform: rotate(-14deg); }
  .score-bit, .score-spark { opacity: 0.7; top: 24px; }
}
.paper-intro { padding: 12px 14px 14px; }
.paper-intro > img.intro-lora {
  width: 88px;
  height: 88px;
  max-width: 88px;
  margin: 0 auto;
}
.paper-intro .exam-logo {
  width: 64px;
  height: 64px;
  max-width: 64px;
  margin: 8px auto 0;
  border-radius: 16px;
  object-fit: cover;
}
.paper-intro h2 { margin: 4px 0; font-size: 22px; }
.paper-intro h3 { margin: 10px 0 4px; font-size: 15px; }
.paper-facts { margin: 8px 0; }
.paper-copy { margin: 0; font-size: 14px; line-height: 1.45; }
.quiz-screen .quiz-list {
  width: min(100%, 400px);
  margin-right: auto;
  margin-left: auto;
}
.quiz-screen .paper-questions li.quiz-card {
  border: 1px solid rgba(255, 255, 255, 0.85);
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(183, 240, 207, 0.42), transparent 60%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px rgba(16, 40, 32, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 14px 14px;
}
.quiz-coin-fly {
  position: fixed;
  z-index: 70;
  width: 84px;
  height: 84px;
  object-fit: contain;
  pointer-events: none;
  animation: quiz-coin-fly 920ms cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}
.quiz-coin-plus {
  position: fixed;
  z-index: 70;
  color: #b54708;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  animation: quiz-coin-plus 900ms ease forwards;
}
.quiz-coins.is-hit .gold-coin { animation: qa-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes quiz-coin-fly {
  0% { opacity: 0; transform: translate(0, 12px) scale(0.4); }
  18% { opacity: 1; transform: translate(calc(var(--fly-x) * 0.06), calc(var(--fly-y) * 0.04)) scale(1); }
  70% { opacity: 1; transform: translate(calc(var(--fly-x) * 0.62), calc(var(--fly-y) * 0.62)) scale(1); }
  100% { opacity: 0.95; transform: translate(var(--fly-x), var(--fly-y)) scale(0.26); }
}
@keyframes quiz-coin-plus {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-28px); }
}
.quiz-react { min-height: 168px; }
.quiz-react .quiz-react-sad,
.quiz-react .quiz-react-happy { width: 144px; height: 144px; }
.exam-hub-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
}
.scoreboard.is-perfect .score-celebrate { height: 214px; }
.scoreboard.is-perfect .score-celebrate .score-jump {
  width: 176px;
  height: 176px;
  max-width: 176px;
  margin-left: -88px;
}
.scoreboard.is-happy .score-celebrate .score-jump { animation-name: score-bob; }
.scoreboard.is-steady .score-celebrate,
.scoreboard.is-low .score-celebrate,
.scoreboard.is-zero .score-celebrate { height: 172px; }
.scoreboard.is-steady .score-celebrate .score-jump { animation: none; }
.scoreboard.is-low .score-celebrate .score-jump,
.scoreboard.is-zero .score-celebrate .score-jump { animation: score-sad 1.2s ease forwards; }
@keyframes score-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes score-sad {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@media (max-width: 360px), (max-height: 700px) {
  .quiz-react { min-height: 140px; }
  .quiz-react .quiz-react-sad,
  .quiz-react .quiz-react-happy { width: 120px; height: 120px; }
}
.quiz-screen > .quiz-react .quiz-react-sad,
.quiz-screen > .quiz-react .quiz-react-happy {
  width: 112px;
  height: 112px;
  background: transparent;
}
@media (max-width: 360px), (max-height: 740px) {
  .quiz-screen > .quiz-react .quiz-react-sad,
  .quiz-screen > .quiz-react .quiz-react-happy { width: 92px; height: 92px; }
}
@media (max-height: 620px) {
  .quiz-screen > .quiz-react .quiz-react-sad,
  .quiz-screen > .quiz-react .quiz-react-happy { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .scoreboard.is-perfect .score-celebrate .score-jump,
  .scoreboard.is-great .score-celebrate .score-jump,
  .scoreboard.is-happy .score-celebrate .score-jump,
  .scoreboard.is-steady .score-celebrate .score-jump,
  .scoreboard.is-low .score-celebrate .score-jump,
  .scoreboard.is-zero .score-celebrate .score-jump,
  .paper-score .score-celebrate .score-coin,
  .paper-score .score-celebrate .score-ribbon,
  .paper-score .score-celebrate .score-bit,
  .paper-score .score-celebrate .score-spark,
  .quiz-coin-fly,
  .quiz-coin-plus,
  .quiz-coins.is-hit .gold-coin { animation: none; }
}

.exam-brief {
  background:
    radial-gradient(90% 32% at 50% -10%, #dff6ea 0%, rgba(255, 255, 255, 0) 70%),
    #f7fbf8;
}
.exam-brief .app-body {
  overflow-x: clip;
  overflow-y: auto;
  max-width: 100%;
}
.exam-brief .exam-brief-top { min-width: 0; }
.exam-brief .exam-brief-top h1 {
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exam-hero,
.exam-card,
.exam-brief-actions { min-width: 0; max-width: 100%; }
.exam-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px 10px 4px;
  border-radius: 28px;
  background:
    radial-gradient(70% 80% at 0% 100%, rgba(183, 240, 207, 0.75), transparent 62%),
    radial-gradient(60% 70% at 100% 0%, rgba(255, 255, 255, 0.7), transparent 58%),
    linear-gradient(180deg, #f4fbf7, #e7f8ef);
  box-shadow: 0 10px 28px rgba(16, 40, 32, 0.06);
}
.exam-hero-lora {
  position: relative;
  width: 42%;
  max-width: 168px;
  flex: none;
  min-height: 148px;
}
.exam-hero-lora img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.exam-hero-lora p {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  margin: 0;
  padding: 6px 8px;
  border: 2px solid #12b76a;
  border-radius: 12px;
  background: #fff;
  color: #078a50;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 6px 14px rgba(16, 40, 32, 0.08);
}
.exam-hero-copy { flex: 1; min-width: 0; }
.exam-hero-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.exam-brief-logo {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
}
.exam-badge {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #d9f8ea;
  color: #078a50;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.exam-hero h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.exam-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.exam-pills > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(16, 40, 32, 0.04);
}
.exam-pills i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  background: #e7f8ef;
  color: var(--green);
}
.exam-pills .icon { width: 15px; height: 15px; }
.exam-pills b { display: block; font-size: 14px; line-height: 1.1; }
.exam-pills small { display: block; color: #667085; font-size: 11px; font-weight: 700; }
.exam-card {
  margin-top: 10px;
  padding: 14px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.05);
}
.exam-rules header { display: flex; align-items: center; gap: 10px; }
.exam-rules header img {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.exam-rules h3 { margin: 0; font-size: 18px; }
.exam-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exam-rules li { display: flex; align-items: flex-start; gap: 8px; color: #344054; font-size: 14px; font-weight: 600; line-height: 1.4; }
.exam-rules li i {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  border-radius: 50%;
  background: var(--green) center / 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2 6.4 11.1 12.5 4.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.exam-rules p { margin: 10px 0 0; color: #475467; font-size: 14px; font-weight: 600; }
.exam-latest { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.exam-latest-copy { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.exam-latest-copy > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: #e7f8ef;
  color: var(--green);
}
.exam-latest-copy .icon { width: 18px; height: 18px; }
.exam-latest-copy p { margin: 0; color: #667085; font-size: 13px; font-weight: 700; }
.exam-latest-copy strong { display: block; margin-top: 2px; font-size: 28px; letter-spacing: -0.04em; line-height: 1; }
.exam-latest-copy strong span { color: #98a2b3; font-size: 18px; }
.exam-latest-copy small { display: block; margin-top: 6px; color: #667085; font-size: 12px; font-weight: 600; line-height: 1.35; }
.exam-cheer {
  width: 108px;
  flex: none;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 18px;
  background: #fff8e8;
  text-align: center;
}
.exam-cheer svg { width: 42px; height: 42px; }
.exam-cheer span { color: #b54708; font-size: 11px; font-weight: 800; line-height: 1.25; }
.exam-brief .learn-note { margin-top: 10px; }
.exam-brief .paper-start { margin-top: 12px; }
.exam-brief-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.exam-brief-actions > * { flex: 1 1 0; min-width: 0; margin: 0; }
.exam-again,
.exam-review {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 8px 10px;
  border-radius: 18px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.exam-again {
  border: 1.5px solid var(--green);
  background: #fff;
  color: var(--green);
}
.exam-review {
  border: 0;
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 173, 101, 0.22);
}
.exam-again > span:first-child,
.exam-review > span:first-child {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
}
.exam-again svg,
.exam-review .icon { width: 22px; height: 22px; }
.exam-again b,
.exam-review b { display: block; font-size: 15px; line-height: 1.1; }
.exam-again small,
.exam-review small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.25; }
.exam-again small { color: #667085; }
.exam-review small { color: rgba(255, 255, 255, 0.9); }
.exam-again small,
.exam-review small { overflow-wrap: anywhere; }

/* Phones: the tab bar is an in-flow footer of a 100dvh column. Browser chrome
   makes that column taller than the visible viewport, so the window scrolls
   and the bar moves with the page. Fix the shell to the visual viewport
   below the desktop phone-frame breakpoint. The bar stays in flow at the
   bottom of that shell, so it does not cover the scrolling content. */
@media (max-width: 799px) {
  html:has(main.screen.app),
  body:has(main.screen.app) {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body:has(main.screen.app) .stage {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  main.screen.app {
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: max(0px, calc((100% - 430px) / 2));
    width: min(100%, 430px);
    height: auto;
    max-height: none;
    margin: 0;
    overflow: hidden;
  }
  body.has-net-banner main.screen.app {
    top: 40px;
  }
  main.screen.app > .app-body {
    scroll-padding-bottom: 12px;
  }
}

@media (max-width: 360px) {
  .exam-hero { padding-right: 8px; }
  .exam-hero h2 { font-size: 17px; }
  .exam-hero-lora { width: 38%; }
  .exam-latest-copy strong { font-size: 24px; }
  .exam-cheer { width: 92px; }
  .exam-again b,
  .exam-review b { font-size: 14px; }
}

.board-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
  min-width: 0;
}
.board-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d9f3e6;
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.board-switch a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-switch svg { width: 18px; height: 18px; flex: none; color: var(--green); }
.board-switch img { width: 22px; height: 22px; flex: none; object-fit: contain; }
.board-switch a.is-on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.board-switch a.is-on svg { color: #fff; }
.board-switch a.is-on img.board-trophy { filter: brightness(0) invert(1); }

.learn-screen .learn-course > *,
.learn-screen .activity-layout,
.learn-screen .activity-summary,
.learn-screen .activity-stats,
.learn-screen .activity-stat,
.learn-screen .board-switch,
.learn-screen .progress-pair,
.learn-screen .progress-card,
.learn-screen .progress-body,
.learn-screen .learn-actions {
  min-width: 0;
  max-width: 100%;
}
.learn-actions small { color: #b54708; font-size: 11px; font-weight: 800; }
.progress-ring.tone-green { background: conic-gradient(#12b76a calc(var(--p, 0) * 1%), #e7f3ec 0); }
.progress-ring.tone-yellow { background: conic-gradient(#f5a524 calc(var(--p, 0) * 1%), #fff6e8 0); }
.progress-ring.tone-red { background: conic-gradient(#e24b4b calc(var(--p, 0) * 1%), #fdecec 0); }
.progress-ring.tone-grey { background: conic-gradient(#d0d5dd calc(var(--p, 0) * 1%), #f2f4f7 0); }
.metric-icon { width: 16px; height: 16px; flex: none; display: grid; color: #98a2b3; }
.metric-icon .icon { width: 16px; height: 16px; }
.progress-body li.tone-green .metric-icon { color: #128a52; }
.progress-body li.tone-yellow .metric-icon { color: #b54708; }
.progress-body li.tone-red .metric-icon { color: #d92d20; }
.home-screen .quick-grid a,
.quick-sheet-grid a,
.learn-actions > a,
.learn-actions > button { background: #e7f8ef; }
.learn-sheet-list form { margin: 0 0 10px; }
.learn-sheet .btn { margin-top: 14px; }
.picked-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.picked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.subject-add {
  margin-top: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green-dark);
  font: inherit;
  font-weight: 800;
}
.subject-add.is-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
}
.subject-add.is-icon .icon { width: 18px; height: 18px; }
.subject-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 240px;
  margin-top: 8px;
  padding: 8px;
  overflow: auto;
  border: 1px solid #e6edf5;
  border-radius: 14px;
  background: #fff;
}
.account-screen.is-exam { background: #fff; }
.account-screen.is-exam .app-body,
.account-screen.is-exam .exam-list,
.account-screen.is-exam .exam-card,
.account-screen.is-exam .exam-card-top,
.account-screen.is-exam .exam-card-top > div,
.account-screen.is-exam .exam-grid { min-width: 0; max-width: 100%; }
.account-screen.is-exam .exam-card-top { align-items: flex-start; }
.account-screen.is-exam .exam-card-top > div { padding-right: 0; }
.account-screen.is-exam .exam-grid { grid-template-columns: minmax(0, 1fr); }
.account-screen.is-exam .exam-card-actions { position: static; margin-top: 12px; justify-content: flex-end; }
.account-screen.is-exam .exam-card h2,
.account-screen.is-exam .exam-grid strong { overflow-wrap: anywhere; }
.board-top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.board-top .board-switch { flex: 1; margin: 0; }
.board-screen .app-body { overflow-x: clip; overflow-y: auto; min-width: 0; }
.board-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 999px;
  background: #f2f6f4;
}
.board-filters a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.board-filters a.is-on { background: var(--green); color: #fff; }
.board-you { margin-top: 16px; }
.board-you-label { margin: 0 0 8px; color: #667085; font-size: 13px; font-weight: 800; }
.board-podium {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  margin-top: 22px;
  min-width: 0;
}
.board-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #f5c542;
  border-radius: 1px;
  transform: rotate(45deg);
  pointer-events: none;
}
.board-spark.s1 { top: 8px; left: 18%; width: 5px; height: 5px; opacity: 0.85; }
.board-spark.s2 { top: 0; left: 46%; }
.board-spark.s3 { top: 10px; right: 22%; width: 5px; height: 5px; }
.board-spark.s4 { top: 28px; right: 8%; width: 4px; height: 4px; opacity: 0.7; }
.board-person { min-width: 0; text-align: center; }
.board-person.is-empty { min-height: 1px; }
.board-card {
  position: relative;
  padding: 8px 4px 14px;
  border-radius: 22px 22px 12px 12px;
  background: linear-gradient(#f4fbf7, #fff);
}
.board-person.is-1 .board-card { background: linear-gradient(#fff6d8, #fffdf4); padding-top: 6px; }
.board-person.is-3 .board-card { background: linear-gradient(#fff1e4, #fffaf6); }
.board-crown { display: block; height: 18px; margin-bottom: 2px; color: #c5ced9; }
.board-person.is-1 .board-crown { height: 28px; margin-bottom: 0; color: #f5b400; }
.board-person.is-3 .board-crown { color: #e2a15a; }
.board-crown svg { width: 18px; height: 18px; margin: 0 auto; }
.board-person.is-1 .board-crown svg { width: 28px; height: 28px; }
.board-medal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}
.board-wreath {
  position: absolute;
  top: 8px;
  left: 0;
  width: 22px;
  color: #d7b15a;
}
.board-wreath.is-right { left: auto; right: 0; transform: scaleX(-1); }
.board-wreath svg { display: block; width: 22px; height: 36px; }
.board-avatar {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #e7f8ef;
  box-shadow: 0 0 0 2px #b7e4c7;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 800;
}
.board-person.is-1 .board-avatar {
  width: 64px;
  height: 64px;
  background: #fff8e4;
  box-shadow: 0 0 0 2px #f5b400;
  color: #b54708;
  font-size: 18px;
}
.board-person.is-3 .board-avatar { background: #fff1e4; box-shadow: 0 0 0 2px #f0c09a; color: #b54708; }
.board-row.tone-sky .board-avatar { background: #eef4ff; color: #2e90fa; box-shadow: none; }
.board-row.tone-sand .board-avatar { background: #fff6e8; color: #b54708; box-shadow: none; }
.board-row.tone-peach .board-avatar { background: #fbf3e4; color: #b54708; box-shadow: none; }
.board-row.tone-mint .board-avatar { background: #e7f8ef; color: var(--green-dark); box-shadow: none; }
.board-person strong,
.board-row strong {
  display: block;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.board-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 2px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.board-points img { width: 16px; height: 16px; object-fit: contain; }
.board-stand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
  border-radius: 16px 16px 12px 12px;
  color: #fff;
  line-height: 1;
}
.board-stand b { font-size: 32px; font-weight: 800; }
.board-person.is-1 .board-stand {
  min-height: 92px;
  background: linear-gradient(#22c57e, var(--green));
  box-shadow: 0 10px 18px rgba(8, 173, 101, 0.22);
}
.board-person.is-1 .board-stand b { font-size: 40px; }
.board-person.is-2 .board-stand { min-height: 72px; background: linear-gradient(#d5dde6, #b7c3d0); }
.board-person.is-3 .board-stand { min-height: 56px; background: linear-gradient(#f0c4a4, #e0a574); }
.board-stand-leaf { width: 16px; color: rgba(255, 255, 255, 0.82); }
.board-stand-leaf svg { display: block; width: 16px; height: 26px; }
.board-stand-leaf.is-right { transform: scaleX(-1); }
.board-list { display: grid; gap: 10px; margin-top: 18px; min-width: 0; }
.board-row {
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.05);
}
.board-row .board-avatar { width: 40px; height: 40px; margin: 0; border-width: 0; font-size: 13px; }
.board-row strong { margin-top: 0; }
.board-row .board-points { margin-top: 0; }
.board-rank { color: var(--green); font-size: 18px; text-align: center; }
.board-row.is-mine { background: #e7f8ef; }
.board-person.is-mine .board-card { box-shadow: inset 0 0 0 2px var(--green); }
@media (max-width: 360px) {
  .board-switch a { gap: 6px; padding: 8px 6px; font-size: 13px; }
  .board-filters a { padding: 8px 6px; font-size: 13px; }
  .board-stand b { font-size: 26px; }
  .board-person.is-1 .board-stand b { font-size: 34px; }
  .board-person strong { font-size: 12px; }
  .board-wreath { width: 16px; }
  .board-wreath svg { width: 16px; height: 28px; }
}

.goal-screen { background: #f3fbf7; }
.goal-screen .app-body { overflow-x: clip; overflow-y: auto; min-width: 0; }
.goal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.goal-logo { width: 118px; height: auto; flex: none; }
.goal-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff8e8;
  color: #101828;
  font-size: 13px;
  font-weight: 800;
}
.goal-points img { width: 18px; height: 18px; object-fit: contain; }
.goal-points b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.goal-hero h1 { margin: 0; font-size: 32px; letter-spacing: -0.04em; line-height: 1.05; }
.goal-hero p { margin: 6px 0 0; color: #667085; font-size: 15px; font-weight: 600; }
.goal-hero img { width: 128px; height: 112px; object-fit: contain; }
.goal-progress {
  margin-top: 8px;
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 22, 56, 0.05);
}
.goal-progress-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.goal-progress-icon {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e7f8ef;
  color: var(--green);
}
.goal-progress-icon svg { width: 22px; height: 22px; }
.goal-progress-icon img { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; }
.goal-progress-head b { display: block; font-size: 15px; }
.goal-progress-head small { display: block; margin-top: 2px; color: #667085; font-size: 13px; font-weight: 600; }
.goal-progress-head strong {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f8ef;
  color: var(--green);
  font-size: 12px;
}
.goal-bar { display: block; height: 8px; margin-top: 12px; border-radius: 99px; background: #e7edf2; overflow: hidden; }
.goal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.goal-progress p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}
.goal-progress p svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.goal-progress p b { color: var(--green); }
.goal-screen h2 { margin: 18px 0 10px; font-size: 20px; letter-spacing: -0.03em; }
.goal-list { display: grid; gap: 10px; min-width: 0; }
.goal-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.04);
}
.goal-art {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #e7f8ef;
  color: var(--green);
}
.goal-art svg { width: 30px; height: 30px; }
.goal-copy { min-width: 0; }
.goal-copy b,
.goal-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-copy b { font-size: 14px; }
.goal-copy small { margin-top: 2px; color: #667085; font-size: 12px; font-weight: 600; }
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7f8ef;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.goal-chip img { width: 14px; height: 14px; object-fit: contain; }
.goal-box {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid #d0d5dd;
  border-radius: 7px;
  background: #fff;
  color: #fff;
}
button.goal-box { cursor: pointer; }
.goal-box.is-on { border-color: var(--green); background: var(--green); }
.goal-box svg { width: 14px; height: 14px; }
.goal-card form { margin: 0; }
.goal-reward {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 22, 56, 0.04);
}
.goal-reward img { width: 92px; height: 78px; object-fit: contain; }
.goal-reward b { display: block; color: var(--green-dark); font-size: 16px; }
.goal-reward small { display: block; margin-top: 2px; color: #667085; font-size: 13px; font-weight: 600; }
.goal-claim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: #d7efe4;
  color: #6fbf9a;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}
.goal-claim svg { width: 16px; height: 16px; flex: none; }
.goal-claim.is-ready { background: var(--green); color: #fff; cursor: pointer; }
.goal-claim:disabled { cursor: default; }
@media (max-width: 360px) {
  .goal-logo { width: 96px; }
  .goal-hero h1 { font-size: 26px; }
  .goal-hero img { width: 96px; height: 88px; }
  .goal-card { grid-template-columns: 42px minmax(0, 1fr) 26px; }
  .goal-chip { grid-column: 2; justify-self: start; }
}

/* Installed app (display-mode: standalone). Browser tabs do not get
   .pwa-standalone, so these rules do not change the mobile or desktop site.
   100dvh stays taller than the Android window once the status and gesture
   bars overlay the page, and it does not shrink for the keyboard. Pin the
   phone shell to the visual viewport instead. */
@media (max-width: 799px) {
  html.pwa-standalone:has(main.screen),
  html.pwa-standalone:has(main.screen) body {
    height: 100%;
    background: #fff;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.pwa-standalone:has(main.screen) body .stage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  html.pwa-standalone main.screen {
    position: fixed;
    z-index: 1;
    top: var(--vv-offset, 0px);
    bottom: auto;
    left: max(
      max(env(safe-area-inset-left, 0px), var(--pwa-safe-left, 0px)),
      calc((100% - 430px) / 2)
    );
    width: min(
      430px,
      calc(100% - max(env(safe-area-inset-left, 0px), var(--pwa-safe-left, 0px)) - max(env(safe-area-inset-right, 0px), var(--pwa-safe-right, 0px)))
    );
    height: var(--vv-height, 100%);
    max-height: none;
    margin: 0;
    overflow-x: hidden;
  }
  html.pwa-standalone body.has-net-banner main.screen {
    top: calc(var(--vv-offset, 0px) + 40px);
    height: calc(var(--vv-height, 100%) - 40px);
  }
  html.pwa-standalone .auth-scroll,
  html.pwa-standalone .app-body,
  html.pwa-standalone .step.is-active,
  html.pwa-standalone body.console-login .login-stage {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding-bottom: 24px;
  }
  html.pwa-standalone.kb-open main.screen.auth,
  html.pwa-standalone.kb-open main.screen.onboard,
  html.pwa-standalone.kb-open main.screen.success,
  html.pwa-standalone.kb-open main.screen.splash,
  html.pwa-standalone.kb-open main.screen.account-done,
  html.pwa-standalone.kb-open main.screen.missing-screen {
    padding-bottom: 12px;
  }
  html.pwa-standalone.kb-open .dock,
  html.pwa-standalone.kb-open .tabbar {
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  html.pwa-standalone .lora-launcher {
    bottom: calc(118px + var(--pwa-safe-bottom, 0px));
  }
  html.pwa-standalone .lora-panel {
    bottom: calc(190px + var(--pwa-safe-bottom, 0px));
  }
  html.pwa-standalone.kb-open .lora-launcher {
    bottom: calc(var(--vv-bottom, 0px) + 16px);
  }
  html.pwa-standalone.kb-open .lora-panel {
    bottom: calc(var(--vv-bottom, 0px) + 88px);
    max-height: calc(var(--vv-height, 100%) - 120px);
  }
}

@media (min-width: 800px) {
  html.pwa-standalone .stage {
    min-height: var(--vv-height, 100dvh);
  }
  html.pwa-standalone .screen {
    height: min(844px, calc(var(--vv-height, 100dvh) - 48px));
    max-height: calc(var(--vv-height, 100dvh) - 48px);
  }
  html.pwa-standalone body.has-net-banner .screen {
    height: min(844px, calc(var(--vv-height, 100dvh) - 88px));
    max-height: calc(var(--vv-height, 100dvh) - 88px);
  }
}