/* =========================================================================
   IELTSSS — Liquid Glass visual layer
   Loaded after css/style.css. It does not change layout or behaviour:
   only colour, surface, blur, border and shadow treatment.
   ========================================================================= */

:root {
  --lg-blur: 22px;
  --lg-blur-sm: 14px;
  --lg-surface: rgba(255, 255, 255, 0.62);
  --lg-surface-soft: rgba(255, 255, 255, 0.46);
  --lg-surface-strong: rgba(255, 255, 255, 0.82);
  --lg-nav: rgba(250, 251, 253, 0.55);
  --lg-input: rgba(255, 255, 255, 0.58);
  --lg-sheen: rgba(255, 255, 255, 0.9);
  --lg-border: rgba(255, 255, 255, 0.7);
  --lg-hairline: rgba(24, 31, 42, 0.08);
  --lg-shadow:
    0 24px 60px -36px rgba(16, 24, 40, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
  --lg-shadow-hover:
    0 34px 80px -40px rgba(16, 24, 40, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
  --lg-aurora-opacity: 0.62;
  --lg-glow-blue: rgba(19, 94, 242, 0.22);
  --lg-glow-violet: rgba(124, 92, 252, 0.18);
  --lg-glow-red: rgba(255, 75, 60, 0.14);
  --lg-glow-green: rgba(18, 161, 95, 0.12);
}

[data-theme="dark"] {
  --lg-surface: rgba(15, 23, 38, 0.62);
  --lg-surface-soft: rgba(15, 23, 38, 0.44);
  --lg-surface-strong: rgba(17, 28, 48, 0.78);
  --lg-nav: rgba(7, 11, 20, 0.58);
  --lg-input: rgba(13, 21, 36, 0.6);
  --lg-sheen: rgba(255, 255, 255, 0.1);
  --lg-border: rgba(255, 255, 255, 0.11);
  --lg-hairline: rgba(255, 255, 255, 0.07);
  --lg-shadow:
    0 26px 70px -34px rgba(0, 0, 0, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --lg-shadow-hover:
    0 38px 90px -38px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --lg-aurora-opacity: 0.7;
  --lg-glow-blue: rgba(59, 130, 246, 0.28);
  --lg-glow-violet: rgba(139, 92, 246, 0.24);
  --lg-glow-red: rgba(255, 107, 94, 0.18);
  --lg-glow-green: rgba(70, 211, 154, 0.16);
}

/* -------------------------------------------------------------------------
   Animated aurora canvas
   ------------------------------------------------------------------------- */
html {
  background-color: var(--bg);
}

html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

html::before {
  opacity: var(--lg-aurora-opacity);
  background:
    radial-gradient(58vmax 58vmax at 12% 4%, var(--lg-glow-blue), transparent 62%),
    radial-gradient(48vmax 48vmax at 88% 12%, var(--lg-glow-violet), transparent 64%),
    radial-gradient(46vmax 46vmax at 78% 88%, var(--lg-glow-red), transparent 66%),
    radial-gradient(42vmax 42vmax at 8% 86%, var(--lg-glow-green), transparent 66%);
  filter: blur(34px) saturate(145%);
  animation: lgAuroraA 32s ease-in-out infinite alternate;
}

html::after {
  opacity: calc(var(--lg-aurora-opacity) * 0.6);
  background:
    radial-gradient(40vmax 30vmax at 50% -6%, rgba(255, 255, 255, 0.7), transparent 68%),
    radial-gradient(36vmax 36vmax at 30% 110%, var(--lg-glow-violet), transparent 70%);
  filter: blur(60px) saturate(125%);
  animation: lgAuroraB 44s ease-in-out infinite alternate;
}

[data-theme="dark"] html::after {
  background:
    radial-gradient(44vmax 32vmax at 50% -8%, rgba(59, 130, 246, 0.28), transparent 68%),
    radial-gradient(38vmax 38vmax at 28% 108%, rgba(139, 92, 246, 0.24), transparent 70%);
}

@keyframes lgAuroraA {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.03); }
}

@keyframes lgAuroraB {
  0% { transform: translate3d(1%, 2%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1); }
}

body,
[data-theme="dark"] body {
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}

/* Page wrappers become windows onto the aurora */
.test-page,
.vocab-page,
.ai-page,
.legal-page,
.auth-page,
.cdi-page,
.plan-page {
  background: transparent !important;
}

[data-theme="dark"] .test-page,
[data-theme="dark"] .vocab-page,
[data-theme="dark"] .ai-page,
[data-theme="dark"] .legal-page,
[data-theme="dark"] .auth-page,
[data-theme="dark"] .cdi-page,
[data-theme="dark"] .plan-page {
  background: transparent !important;
}

/* Soft tinted bands keep a hint of glass instead of an opaque wall */
.section--tint {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(244, 248, 255, 0.3) 42%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

[data-theme="dark"] .section--tint {
  background: linear-gradient(
    180deg,
    rgba(18, 28, 48, 0.5) 0%,
    rgba(13, 23, 42, 0.38) 42%,
    rgba(7, 11, 20, 0) 100%
  ) !important;
}

/* -------------------------------------------------------------------------
   Shared glass surface
   ------------------------------------------------------------------------- */
.panel,
.feature,
.tool-card,
.price,
.plan-preview,
.plan-form-card,
.question-card,
.passage-card,
.review-card,
.result-hero,
.auth-card,
.ai-card,
.ai-result,
.ai-hero__card,
.vocab-progress-card,
.free-test-card,
.legal-nav,
.mock-paywall,
.cdi-passage,
.cdi-questions,
.cdi-submit-card,
.continue-card,
.skill-card,
.skill-panel,
.cambridge-stat,
.hero-app,
.float-card,
.cue-card {
  background-color: var(--lg-surface);
  background-image: linear-gradient(
    148deg,
    var(--lg-sheen) 0%,
    transparent 46%,
    transparent 78%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border-color: var(--lg-hairline);
  box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(155%);
  backdrop-filter: blur(var(--lg-blur)) saturate(155%);
}

.feature:hover,
.tool-card:hover,
.free-test-card:hover,
.skill-card:hover,
.continue-card:hover {
  border-color: var(--lg-border);
  box-shadow: var(--lg-shadow-hover);
}

/* Keep the decorative coloured glow inside feature cards */
.feature::after {
  opacity: 0.42;
  filter: blur(2px);
}

/* Glass mini-panels that sit inside large surfaces */
.vocab-ai,
.auth-session,
.timer,
.test-skill,
.cdi-passage__tabs,
.cdi-palette__btn,
.topbar-search,
.free-search,
.free-tabs,
.free-page,
.seg,
.icon-btn,
.theme-toggle,
.modal__close,
.q-option,
.tfng label {
  background-color: var(--lg-surface-soft);
  border-color: var(--lg-hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(140%);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(140%);
}

[data-theme="dark"] .vocab-ai,
[data-theme="dark"] .auth-session,
[data-theme="dark"] .timer,
[data-theme="dark"] .test-skill,
[data-theme="dark"] .cdi-passage__tabs,
[data-theme="dark"] .cdi-palette__btn,
[data-theme="dark"] .topbar-search,
[data-theme="dark"] .free-search,
[data-theme="dark"] .free-tabs,
[data-theme="dark"] .free-page,
[data-theme="dark"] .seg,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .modal__close,
[data-theme="dark"] .q-option,
[data-theme="dark"] .tfng label {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vocab-ai {
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.24) 64%,
    transparent 100%
  );
  border-color: var(--lg-border);
}

[data-theme="dark"] .vocab-ai {
  background-image: linear-gradient(
    120deg,
    rgba(59, 130, 246, 0.18) 0%,
    rgba(15, 23, 38, 0.3) 64%,
    transparent 100%
  );
}

/* -------------------------------------------------------------------------
   Navigation shells
   ------------------------------------------------------------------------- */
.site-header,
.site-header.is-scrolled,
.topbar,
.test-top,
.plan-top,
.legal-top,
.cdi-top,
.ai-page .legal-top {
  background: var(--lg-nav) !important;
  border-bottom-color: var(--lg-hairline);
  box-shadow: 0 18px 50px -42px rgba(16, 24, 40, 0.5);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur)) saturate(170%);
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header.is-scrolled,
[data-theme="dark"] .topbar,
[data-theme="dark"] .test-top,
[data-theme="dark"] .plan-top,
[data-theme="dark"] .legal-top,
[data-theme="dark"] .cdi-top,
[data-theme="dark"] .ai-page .legal-top {
  background: var(--lg-nav) !important;
  box-shadow: 0 20px 54px -40px rgba(0, 0, 0, 0.95);
}

.sidebar {
  background: var(--lg-nav) !important;
  border-right-color: var(--lg-hairline);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(165%);
  backdrop-filter: blur(var(--lg-blur)) saturate(165%);
}

[data-theme="dark"] .sidebar {
  background: var(--lg-nav) !important;
}

.side-link {
  border: 1px solid transparent;
  transition: background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s;
}

.side-link:hover {
  background: var(--lg-surface-soft);
  border-color: var(--lg-hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.side-link.is-active {
  background: linear-gradient(
    135deg,
    rgba(19, 94, 242, 0.16),
    rgba(124, 92, 252, 0.1)
  );
  border-color: rgba(19, 94, 242, 0.22);
  color: var(--blue-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .side-link.is-active {
  border-color: rgba(111, 158, 255, 0.28);
  color: var(--blue-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.main-nav a:hover,
.lang-pill:hover {
  background: var(--lg-surface-soft);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 16px 34px -20px rgba(16, 24, 40, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

.btn:hover {
  box-shadow:
    0 20px 40px -20px rgba(16, 24, 40, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.btn--primary {
  --btn-bg: linear-gradient(135deg, #ff7a6c 0%, #f84636 52%, #dc2f20 100%);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 18px 40px -18px rgba(232, 56, 43, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn--primary:hover {
  --btn-bg: linear-gradient(135deg, #ff8a7d 0%, #ff5443 52%, #e6392a 100%);
}

.btn--blue {
  --btn-bg: linear-gradient(135deg, #4a86ff 0%, #1d63f5 55%, #0b47c4 100%);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 18px 40px -18px rgba(19, 94, 242, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn--blue:hover {
  --btn-bg: linear-gradient(135deg, #5f95ff 0%, #2a6ef8 55%, #0f4fd8 100%);
}

.btn--ghost {
  --btn-bg: var(--lg-surface-soft);
  --btn-fg: var(--ink);
  border-color: var(--lg-border);
  box-shadow:
    0 14px 30px -22px rgba(16, 24, 40, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn--ghost:hover {
  --btn-bg: var(--lg-surface);
  border-color: var(--lg-border);
}

[data-theme="dark"] .btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-fg: var(--ink);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 16px 34px -22px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn--white {
  --btn-bg: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .btn--white {
  --btn-bg: rgba(233, 240, 255, 0.94);
  --btn-fg: #08111f;
}

.btn--soft {
  border-color: rgba(19, 94, 242, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------------------------
   Form fields
   ------------------------------------------------------------------------- */
.field input,
.field textarea,
.field select,
.q-input,
.topbar-search input,
.free-search input {
  background: var(--lg-input) !important;
  border-color: var(--lg-hairline) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm));
  backdrop-filter: blur(var(--lg-blur-sm));
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select,
[data-theme="dark"] .q-input,
[data-theme="dark"] .topbar-search input,
[data-theme="dark"] .free-search input {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.q-input:focus {
  border-color: var(--blue) !important;
  box-shadow:
    0 0 0 4px rgba(19, 94, 242, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Answer states keep their meaning */
.q-option:has(input:checked),
.tfng label:has(input:checked) {
  border-color: var(--blue);
  background: rgba(19, 94, 242, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .q-option:has(input:checked),
[data-theme="dark"] .tfng label:has(input:checked) {
  background: rgba(91, 141, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------
   Accent panels keep their brand gradient, with a glass gloss on top
   ------------------------------------------------------------------------- */
.price--pro,
.auth-aside,
.stats-band,
.cta-banner,
.goal-card,
.exam-mini,
.flash-face--back {
  background-image:
    linear-gradient(148deg, rgba(255, 255, 255, 0.24) 0%, transparent 44%),
    linear-gradient(145deg, #1b6bff 0%, #0b3fae 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 34px 70px -40px rgba(11, 71, 196, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(150%);
  backdrop-filter: blur(var(--lg-blur)) saturate(150%);
}

.price--pro::before,
.auth-aside::before,
.stats-band::before,
.cta-banner::before {
  opacity: 0.7;
}

/* Coloured icon chips get a faint top light */
.feature__icon,
.tool-card .feature__icon,
.ai-card__icon,
.continue-card__icon,
.skill-card__icon,
.mock-paywall__icon,
.review-status,
.plan-row__icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .feature__icon,
[data-theme="dark"] .tool-card .feature__icon,
[data-theme="dark"] .ai-card__icon,
[data-theme="dark"] .continue-card__icon,
[data-theme="dark"] .skill-card__icon,
[data-theme="dark"] .mock-paywall__icon,
[data-theme="dark"] .review-status,
[data-theme="dark"] .plan-row__icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Badges: a glassy highlight without changing size */
.badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------------
   Reading test & CDI specifics
   ------------------------------------------------------------------------- */
.passage-card,
.cdi-passage {
  scrollbar-color: var(--lg-border) transparent;
}

.cdi-passage__scroll {
  scrollbar-color: var(--lg-border) transparent;
}

.cdi-passage__tab.is-active,
.free-tab.is-active,
.free-page.is-active {
  box-shadow:
    0 10px 24px -16px rgba(16, 24, 40, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.cdi-palette__btn.is-answered {
  background-color: var(--green-100);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cdi-palette__btn.is-current {
  outline: 2px solid var(--blue-500, var(--blue));
  outline-offset: 1px;
}

.cdi-palette__btn.is-other-passage {
  opacity: 0.42;
}

.cdi-question.is-current {
  box-shadow:
    0 0 0 2px rgba(19, 94, 242, 0.35),
    var(--lg-shadow);
}

.question-card.is-answered {
  border-color: rgba(19, 94, 242, 0.32);
}

.question-card.is-missing {
  border-color: rgba(232, 56, 43, 0.42);
  box-shadow: 0 0 0 3px rgba(232, 56, 43, 0.1), var(--lg-shadow);
}

[data-theme="dark"] .question-card.is-answered {
  border-color: rgba(111, 158, 255, 0.4);
}

[data-theme="dark"] .question-card.is-missing {
  border-color: rgba(255, 122, 112, 0.45);
}

.result-hero {
  background-image:
    linear-gradient(148deg, var(--lg-sheen) 0%, transparent 42%),
    radial-gradient(
      48% 90% at 100% 0%,
      rgba(19, 94, 242, 0.12),
      transparent 72%
    );
}

[data-theme="dark"] .result-hero {
  background-image:
    linear-gradient(148deg, var(--lg-sheen) 0%, transparent 42%),
    radial-gradient(
      50% 96% at 100% 0%,
      rgba(91, 141, 255, 0.16),
      transparent 72%
    );
}

.review-answer--ok,
.review-answer--bad,
.review-answer--neutral {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Test head pill row */
.test-skill.is-active {
  background: linear-gradient(135deg, #3f7bff, #135ef2);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 12px 26px -16px rgba(19, 94, 242, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.timer {
  border: 1px solid var(--lg-hairline);
}

.timer.is-low {
  background: var(--red-100);
  box-shadow: 0 0 0 1px rgba(255, 75, 60, 0.18) inset;
}

/* -------------------------------------------------------------------------
   Free-test directory
   ------------------------------------------------------------------------- */
.free-tabs {
  border: 1px solid var(--lg-hairline);
}

.free-tab.is-active {
  background: linear-gradient(135deg, #2f6bff, #0b47c4);
  color: #fff;
}

.free-test-card__free {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.free-page {
  border: 1px solid var(--lg-hairline);
}

.free-page:hover:not(:disabled) {
  border-color: var(--lg-border);
  box-shadow: var(--lg-shadow);
}

.free-page.is-active {
  background: linear-gradient(135deg, #2f6bff, #0b47c4);
  border-color: transparent;
  color: #fff;
}

/* -------------------------------------------------------------------------
   Pricing, plan and login
   ------------------------------------------------------------------------- */
.price:not(.price--pro) {
  background-image:
    linear-gradient(148deg, var(--lg-sheen) 0%, transparent 44%),
    radial-gradient(60% 80% at 100% 0%, rgba(19, 94, 242, 0.06), transparent 70%);
}

.plan-form-card,
.legal-nav {
  background-image: linear-gradient(
    148deg,
    var(--lg-sheen) 0%,
    transparent 50%
  );
}

.auth-aside {
  background-image:
    linear-gradient(150deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    radial-gradient(60% 60% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(145deg, #1667ff 0%, #0b3fae 100%);
}

.auth-demo-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .auth-demo-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

/* -------------------------------------------------------------------------
   Dialogs and overlays
   ------------------------------------------------------------------------- */
dialog.modal {
  background-color: var(--lg-surface-strong);
  background-image: linear-gradient(
    148deg,
    var(--lg-sheen) 0%,
    transparent 48%
  );
  border: 1px solid var(--lg-border);
  box-shadow:
    0 50px 120px -40px rgba(16, 24, 40, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
}

dialog.modal::backdrop {
  background: rgba(16, 24, 40, 0.38);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}

[data-theme="dark"] dialog.modal {
  box-shadow:
    0 50px 120px -30px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] dialog.modal::backdrop {
  background: rgba(3, 6, 12, 0.6);
}

/* Toasts and the cookie banner float on the same glass */
.toast {
  border: 1px solid var(--lg-border);
  box-shadow:
    0 24px 50px -24px rgba(16, 24, 40, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

[data-theme="dark"] .toast {
  border-color: rgba(255, 255, 255, 0.14);
}

/* -------------------------------------------------------------------------
   Accessibility & fallbacks
   ------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  :root {
    --lg-surface: rgba(255, 255, 255, 0.94);
    --lg-surface-soft: rgba(255, 255, 255, 0.88);
    --lg-surface-strong: rgba(255, 255, 255, 0.97);
    --lg-nav: rgba(250, 251, 253, 0.97);
    --lg-input: rgba(255, 255, 255, 0.94);
  }

  [data-theme="dark"] {
    --lg-surface: rgba(15, 23, 38, 0.96);
    --lg-surface-soft: rgba(15, 23, 38, 0.9);
    --lg-surface-strong: rgba(17, 28, 48, 0.98);
    --lg-nav: rgba(7, 11, 20, 0.98);
    --lg-input: rgba(13, 21, 36, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after {
    animation: none;
  }

  .feature,
  .tool-card,
  .free-test-card,
  .skill-card,
  .continue-card,
  .btn {
    transition: none;
  }
}

/* Light screens: a little less blur keeps text crisp */
@media (max-width: 700px) {
  :root {
    --lg-blur: 16px;
    --lg-blur-sm: 10px;
  }

  html::before {
    filter: blur(26px) saturate(135%);
  }
}

/* CDI player: single-passage mode and checkbox questions */
.cdi-passage__tabs[hidden],
.cdi-qnav [hidden] {
  display: none;
}
.cdi-para--plain {
  grid-template-columns: minmax(0, 1fr);
}
.cdi-para--plain p {
  padding-left: 0;
}
.q-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
a.tool-card {
  color: inherit;
  text-decoration: none;
}
a.tool-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}