@media screen {
  :root {
    --ra10-bg-1: #f6fbff;
    --ra10-bg-2: #eefbf2;
    --ra10-bg-3: #fff9ed;
    --ra10-surface: #ffffff;
    --ra10-surface-soft: #f8fbff;
    --ra10-line: #d3e2ee;
    --ra10-line-strong: #b6cadd;
    --ra10-ink: #193044;
    --ra10-ink-soft: #5c6f80;
    --ra10-accent: #4fbf2a;
    --ra10-accent-2: #20a8e8;
    --ra10-accent-dark: #2f7e1f;
    --ra10-shadow-sm: 0 4px 0 rgba(32, 56, 77, 0.14), 0 10px 22px rgba(17, 24, 39, 0.08);
    --ra10-shadow-md: 0 6px 0 rgba(32, 56, 77, 0.18), 0 16px 32px rgba(17, 24, 39, 0.13);
    --ra10-radius-sm: 10px;
    --ra10-radius-md: 18px;
    --ra10-radius-lg: 28px;
  }

  [data-theme="dark"] {
    --ra10-bg-1: #0e1a1e;
    --ra10-bg-2: #11241b;
    --ra10-bg-3: #1f1a12;
    --ra10-surface: #152329;
    --ra10-surface-soft: #1a2b32;
    --ra10-line: #2c4656;
    --ra10-line-strong: #3f6075;
    --ra10-ink: #dff5ff;
    --ra10-ink-soft: #93b3c3;
    --ra10-accent: #59d642;
    --ra10-accent-2: #39bbff;
    --ra10-accent-dark: #1ea95f;
    --ra10-shadow-sm: 0 4px 0 rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.28);
    --ra10-shadow-md: 0 6px 0 rgba(0, 0, 0, 0.42), 0 18px 36px rgba(0, 0, 0, 0.35);
  }

  html {
    scroll-behavior: smooth;
  }

  body.ra10-refresh-enabled {
    color: var(--ra10-ink);
    background:
      radial-gradient(circle at 6% 0%, rgba(31, 159, 85, 0.12), transparent 28%),
      radial-gradient(circle at 94% 7%, rgba(31, 111, 235, 0.16), transparent 30%),
      linear-gradient(145deg, var(--ra10-bg-1), var(--ra10-bg-2) 44%, var(--ra10-bg-3));
    background-attachment: fixed;
  }

  body.ra10-refresh-enabled::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(25, 48, 68, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 48, 68, 0.03) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
    z-index: 0;
  }

  body.ra10-refresh-enabled > :not(.mobile-top-nav):not(.mobile-bottom-nav):not(.mobile-sheet-backdrop):not(.mobile-subject-sheet):not(.mobile-you-sheet):not(.auth-overlay):not(.nav-user-dropdown):not(.nav):not(.navbar):not(.topbar):not(.viewer-topbar):not(.brief-modal):not(.ed-fullscreen-overlay):not(.mobile-tool-notice-overlay):not(.exam-modal-overlay):not(.rai-layer):not(.rm-zoom-ov):not(#ra10-help-fab):not(.ra10-a11y-overlay):not(.skip-link):not(.rxp-overlay):not(.rxp-widget):not(.rxp-toast):not(.lbx-pe):not(.u1-progress-sidebar):not(.u1-sidebar-toggle):not(.u2-progress-sidebar):not(.u2-sidebar-toggle) {
    position: relative;
    z-index: 1;
  }

  body.ra10-refresh-enabled > .brief-modal,
  body.ra10-refresh-enabled > .ed-fullscreen-overlay {
    position: fixed !important;
  }

  body.ra10-refresh-enabled .mobile-top-nav,
  body.ra10-refresh-enabled .mobile-bottom-nav,
  body.ra10-refresh-enabled .mobile-sheet-backdrop,
  body.ra10-refresh-enabled .mobile-subject-sheet,
  body.ra10-refresh-enabled .mobile-you-sheet,
  body.ra10-refresh-enabled .auth-overlay,
  body.ra10-refresh-enabled .nav-user-dropdown,
  body.ra10-refresh-enabled .exam-modal-overlay,
  body.ra10-refresh-enabled .rai-layer,
  body.ra10-refresh-enabled #ra10-help-fab {
    position: fixed !important;
  }

  body.ra10-refresh-enabled > .u1-progress-sidebar,
  body.ra10-refresh-enabled > .u1-sidebar-toggle,
  body.ra10-refresh-enabled > .u2-progress-sidebar,
  body.ra10-refresh-enabled > .u2-sidebar-toggle {
    position: fixed !important;
  }

  body.ra10-refresh-enabled > .u1-progress-sidebar:not(.hidden),
  body.ra10-refresh-enabled > .u2-progress-sidebar:not(.hidden) {
    pointer-events: auto !important;
  }

  @media (min-width: 1101px) {
    body.ra10-refresh-enabled > .u1-progress-sidebar,
    body.ra10-refresh-enabled > .u2-progress-sidebar {
      top: 110px !important;
    }
  }

  body.ra10-refresh-enabled .u1-progress-sidebar .u1-sb-close,
  body.ra10-refresh-enabled .u2-progress-sidebar .u2-sb-close {
    position: relative !important;
    z-index: 2;
    display: inline-flex !important;
    width: auto !important;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 8px !important;
    margin: 0;
    cursor: pointer;
    pointer-events: auto !important;
    font-size: 16px;
    line-height: 1;
  }

  body.ra10-refresh-enabled .kpi-emoji,
  body.ra10-refresh-enabled [class*="emoji"],
  body.ra10-refresh-enabled .you-hero-streak,
  body.ra10-refresh-enabled .you-xp-pill,
  body.ra10-refresh-enabled .u1-sb-chip,
  body.ra10-refresh-enabled .u2-sb-chip,
  body.ra10-refresh-enabled .u1-sidebar-toggle,
  body.ra10-refresh-enabled .u2-sidebar-toggle {
    font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Plus Jakarta Sans", sans-serif;
  }

  body.ra10-refresh-enabled h1,
  body.ra10-refresh-enabled h2,
  body.ra10-refresh-enabled h3,
  body.ra10-refresh-enabled h4,
  body.ra10-refresh-enabled h5,
  body.ra10-refresh-enabled h6,
  body.ra10-refresh-enabled .hero h2,
  body.ra10-refresh-enabled .hero h1,
  body.ra10-refresh-enabled .cover-title,
  body.ra10-refresh-enabled .section-head h2 {
    font-family: "Sora", "Avenir Next", "Segoe UI", sans-serif;
    letter-spacing: -0.015em;
    line-height: 1.08;
  }

  body.ra10-refresh-enabled h1,
  body.ra10-refresh-enabled .hero h1,
  body.ra10-refresh-enabled .cover-title {
    font-size: clamp(1.8rem, 4.3vw, 3.1rem);
  }

  body.ra10-refresh-enabled h2,
  body.ra10-refresh-enabled .hero h2,
  body.ra10-refresh-enabled .section-head h2 {
    font-size: clamp(1.35rem, 3.3vw, 2.35rem);
  }

  body.ra10-refresh-enabled,
  body.ra10-refresh-enabled p,
  body.ra10-refresh-enabled li,
  body.ra10-refresh-enabled button,
  body.ra10-refresh-enabled input,
  body.ra10-refresh-enabled select,
  body.ra10-refresh-enabled textarea {
    font-family: "Plus Jakarta Sans", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", sans-serif;
  }

  .ra10-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    z-index: 30000;
    background: linear-gradient(90deg, var(--ra10-accent), var(--ra10-accent-2));
    box-shadow: 0 2px 10px rgba(31, 111, 235, 0.45);
  }

  body.ra10-refresh-enabled .navbar,
  body.ra10-refresh-enabled .topbar,
  body.ra10-refresh-enabled .nav,
  body.ra10-refresh-enabled .viewer-topbar {
    border: 2px solid color-mix(in srgb, var(--ra10-line-strong) 78%, #ffffff 22%);
    border-radius: 18px;
    background: color-mix(in srgb, var(--ra10-surface) 92%, #ffffff 8%) !important;
    box-shadow: var(--ra10-shadow-sm);
    backdrop-filter: blur(10px);
  }

  body.ra10-refresh-enabled .nav,
  body.ra10-refresh-enabled .navbar,
  body.ra10-refresh-enabled .topbar {
    margin: 10px 12px 0;
  }

  @media (max-width: 840px) {
    body.ra10-refresh-enabled .nav,
    body.ra10-refresh-enabled .navbar,
    body.ra10-refresh-enabled .topbar {
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
  }

  body.ra10-refresh-enabled .card,
  body.ra10-refresh-enabled .aim-card,
  body.ra10-refresh-enabled .tool-card,
  body.ra10-refresh-enabled .question-card,
  body.ra10-refresh-enabled .qrow,
  body.ra10-refresh-enabled .stat,
  body.ra10-refresh-enabled .stat-card,
  body.ra10-refresh-enabled .practice-header,
  body.ra10-refresh-enabled .quiz-header,
  body.ra10-refresh-enabled .filters,
  body.ra10-refresh-enabled .flash-card,
  body.ra10-refresh-enabled .mock-controls,
  body.ra10-refresh-enabled .mock-paper,
  body.ra10-refresh-enabled .paper-section,
  body.ra10-refresh-enabled .table-wrap,
  body.ra10-refresh-enabled .modal,
  body.ra10-refresh-enabled .gate-card,
  body.ra10-refresh-enabled .auth-modal,
  body.ra10-refresh-enabled .container,
  body.ra10-refresh-enabled .mermaid {
    background: color-mix(in srgb, var(--ra10-surface) 94%, transparent);
    border: 2px solid var(--ra10-line) !important;
    border-radius: var(--ra10-radius-md);
    box-shadow: var(--ra10-shadow-sm);
  }

  body.ra10-refresh-enabled .page {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Predicted/mock paper A4 sheets must keep their white paper background */
  body.ra10-refresh-enabled.paper-viewer .page {
    background: #fff !important;
    border: 1px solid #d8dce8 !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 48px rgba(26, 26, 46, 0.14) !important;
  }
  @media print {
    body.ra10-refresh-enabled.paper-viewer .page {
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
  }

  body.ra10-refresh-enabled p,
  body.ra10-refresh-enabled li {
    line-height: 1.68;
  }

  body.ra10-refresh-enabled .hero p,
  body.ra10-refresh-enabled .card p,
  body.ra10-refresh-enabled .aim-card p,
  body.ra10-refresh-enabled .tool-card p,
  body.ra10-refresh-enabled .question-card p {
    margin-top: 4px;
  }

  body.ra10-refresh-enabled .hero,
  body.ra10-refresh-enabled .dashboard-hero {
    border-radius: var(--ra10-radius-lg);
    border: 2px solid var(--ra10-line) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ra10-surface) 86%, #ffffff), color-mix(in srgb, var(--ra10-surface-soft) 86%, #d8f7e6));
    box-shadow: var(--ra10-shadow-md);
  }

  body.ra10-refresh-enabled .tab,
  body.ra10-refresh-enabled .tab-btn,
  body.ra10-refresh-enabled .viewer-nav-btn,
  body.ra10-refresh-enabled .btn,
  body.ra10-refresh-enabled .viewer-btn,
  body.ra10-refresh-enabled .print-btn,
  body.ra10-refresh-enabled .auth-submit-btn {
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--ra10-line-strong) 80%, #ffffff 20%);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
  }

  body.ra10-refresh-enabled .tab,
  body.ra10-refresh-enabled .tab-btn,
  body.ra10-refresh-enabled .viewer-nav-btn,
  body.ra10-refresh-enabled .btn,
  body.ra10-refresh-enabled .viewer-btn,
  body.ra10-refresh-enabled .print-btn,
  body.ra10-refresh-enabled .auth-submit-btn {
    min-height: 40px;
    padding: 8px 14px;
    line-height: 1.2;
  }

  body.ra10-refresh-enabled .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--ra10-line-strong) 70%, #ffffff 30%);
    background: color-mix(in srgb, var(--ra10-surface) 92%, #e9f7ff 8%);
    box-shadow: var(--ra10-shadow-sm);
    width: max-content;
    max-width: 100%;
  }

  body.ra10-refresh-enabled .tabs .tab {
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--ra10-line-strong) 70%, #ffffff 30%);
    background: color-mix(in srgb, var(--ra10-surface) 92%, transparent);
    color: var(--ra10-ink-soft);
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  body.ra10-refresh-enabled .tabs .tab.active {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--ra10-accent-dark) 70%, transparent);
    background: linear-gradient(120deg, var(--ra10-accent), var(--ra10-accent-2));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--ra10-accent-dark) 70%, transparent), 0 10px 16px rgba(21, 46, 77, 0.18);
  }

  body.ra10-refresh-enabled .dashboard-grid .card,
  body.ra10-refresh-enabled .dashboard-grid article,
  body.ra10-refresh-enabled .dashboard-grid .feature-card,
  body.ra10-refresh-enabled .dashboard-grid .tool-card {
    border-radius: 18px;
    border: 2px solid var(--ra10-line);
    box-shadow: var(--ra10-shadow-sm);
  }

  body.ra10-refresh-enabled .quiz-controls select,
  body.ra10-refresh-enabled .practice-controls select,
  body.ra10-refresh-enabled .flash-controls select {
    border: 2px solid var(--ra10-line);
    border-radius: 12px;
    min-height: 40px;
    background: color-mix(in srgb, var(--ra10-surface) 88%, #f2fff6);
  }

  body.ra10-refresh-enabled .quiz-option {
    border-width: 2px;
    border-radius: 14px;
    box-shadow: 0 2px 0 rgba(32, 56, 77, 0.08);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
  }

  body.ra10-refresh-enabled .quiz-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(32, 56, 77, 0.12);
  }

  body.ra10-refresh-enabled .tab:hover,
  body.ra10-refresh-enabled .tab-btn:hover,
  body.ra10-refresh-enabled .nav-link:hover,
  body.ra10-refresh-enabled .viewer-nav-btn:hover,
  body.ra10-refresh-enabled .btn:hover,
  body.ra10-refresh-enabled .viewer-btn:hover,
  body.ra10-refresh-enabled .print-btn:hover,
  body.ra10-refresh-enabled .auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--ra10-shadow-sm);
  }

  body.ra10-refresh-enabled .tab:active,
  body.ra10-refresh-enabled .tab-btn:active,
  body.ra10-refresh-enabled .nav-link:active,
  body.ra10-refresh-enabled .viewer-nav-btn:active,
  body.ra10-refresh-enabled .btn:active,
  body.ra10-refresh-enabled .viewer-btn:active,
  body.ra10-refresh-enabled .print-btn:active,
  body.ra10-refresh-enabled .auth-submit-btn:active {
    transform: translateY(1px);
  }

  body.ra10-refresh-enabled .tab.active,
  body.ra10-refresh-enabled .tab-btn.active,
  body.ra10-refresh-enabled .nav-link.active,
  body.ra10-refresh-enabled .viewer-nav-btn.active,
  body.ra10-refresh-enabled .btn.primary,
  body.ra10-refresh-enabled .btn-p:not([class*="btn-accent-"]),
  body.ra10-refresh-enabled .viewer-btn-primary,
  body.ra10-refresh-enabled .auth-submit-btn,
  body.ra10-refresh-enabled .nav-auth-btn {
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--ra10-accent-dark) 70%, transparent) !important;
    background: linear-gradient(120deg, var(--ra10-accent), var(--ra10-accent-2)) !important;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--ra10-accent-dark) 70%, transparent), 0 10px 16px rgba(21, 46, 77, 0.18);
  }

  body.ra10-refresh-enabled .btn.btn-accent-sun,
  body.ra10-refresh-enabled .btn.btn-accent-ocean,
  body.ra10-refresh-enabled .btn.btn-accent-plum,
  body.ra10-refresh-enabled .btn.btn-accent-it,
  body.ra10-refresh-enabled .btn.btn-accent-business,
  body.ra10-refresh-enabled .btn.btn-accent-sport,
  body.ra10-refresh-enabled .btn.btn-accent-l2 {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow: 0 4px 0 rgba(18, 33, 52, 0.35), 0 10px 16px rgba(21, 46, 77, 0.22);
  }

  body.ra10-refresh-enabled .btn.btn-accent-sun { background: linear-gradient(120deg, #f97316, #ef4444) !important; }
  body.ra10-refresh-enabled .btn.btn-accent-ocean { background: linear-gradient(120deg, #0284c7, #2563eb) !important; }
  body.ra10-refresh-enabled .btn.btn-accent-plum { background: linear-gradient(120deg, #7c3aed, #db2777) !important; }
  body.ra10-refresh-enabled .btn.btn-accent-it { background: linear-gradient(120deg, #16a34a, #0f766e) !important; }
  body.ra10-refresh-enabled .btn.btn-accent-business { background: linear-gradient(120deg, #2563eb, #1e3a8a) !important; }
  body.ra10-refresh-enabled .btn.btn-accent-sport { background: linear-gradient(120deg, #7c3aed, #c026d3) !important; }
  body.ra10-refresh-enabled .btn.btn-accent-l2 { background: linear-gradient(120deg, #ea580c, #c2410c) !important; }

  body.ra10-refresh-enabled .tab:not(.active),
  body.ra10-refresh-enabled .tab-btn:not(.active),
  body.ra10-refresh-enabled .nav-link:not(.active),
  body.ra10-refresh-enabled .btn:not(.primary):not(.btn-p):not(.viewer-btn-primary) {
    background: color-mix(in srgb, var(--ra10-surface) 88%, transparent);
    color: var(--ra10-ink-soft);
    border-color: color-mix(in srgb, var(--ra10-line-strong) 70%, #ffffff 30%);
  }

  body.ra10-refresh-enabled input,
  body.ra10-refresh-enabled select,
  body.ra10-refresh-enabled textarea,
  body.ra10-refresh-enabled .field-input,
  body.ra10-refresh-enabled .auth-input,
  body.ra10-refresh-enabled .school-input {
    border-radius: var(--ra10-radius-sm);
    border: 1px solid var(--ra10-line);
    background: color-mix(in srgb, var(--ra10-surface) 88%, #f2fff6);
    color: var(--ra10-ink);
  }

  body.ra10-refresh-enabled input:focus,
  body.ra10-refresh-enabled select:focus,
  body.ra10-refresh-enabled textarea:focus,
  body.ra10-refresh-enabled .field-input:focus,
  body.ra10-refresh-enabled .auth-input:focus,
  body.ra10-refresh-enabled .school-input:focus {
    outline: none;
    border-color: var(--ra10-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ra10-accent) 25%, transparent);
  }

  body.ra10-refresh-enabled .ra10-float-chip {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 25000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 14px;
    color: #ffffff;
    background: linear-gradient(120deg, var(--ra10-accent-2), var(--ra10-accent));
    box-shadow: 0 10px 22px rgba(12, 20, 33, 0.25);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(14px);
    animation: ra10-chip-in 420ms ease 500ms forwards;
  }

  @keyframes ra10-chip-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body.ra10-refresh-enabled .ra10-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 300ms ease, transform 300ms ease;
  }

  body.ra10-refresh-enabled .ra10-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 768px) {
    body.ra10-refresh-enabled .ra10-float-chip {
      display: none !important;
    }
  }

  @media print {
    .ra10-scroll-progress,
    .ra10-float-chip {
      display: none !important;
    }
  }
}

/* ============================================================
   Unified navigation shell
   The main site and embedded subject pages use different markup, but
   share one visual language and interaction model.
   ============================================================ */

/* Nav icon baseline — every inline `.nu` SVG in a nav/link gets an explicit
   box size at ALL viewport widths. Without this, an SVG with only a viewBox
   collapses to the browser default (huge), which is what makes the desktop
   navbar icons blow up on smaller/squarer displays. */
.nav-link svg.nu,
.nav-link svg,
.site-unit-link svg.nu,
.site-unit-link svg,
.unit-avatar-btn svg,
.nav-user-btn svg,
.nav [class*="toggle"] svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  vertical-align: middle;
  stroke-width: 2;
}

@media screen and (min-width: 841px) {
  body.ra10-refresh-enabled .nav-inner {
    width: 100%;
    max-width: none;
    padding-inline: 16px;
  }

  body.ra10-refresh-enabled .nav-logo { order: 1; }
  body.ra10-refresh-enabled .nav-links { order: 2; }
  body.ra10-refresh-enabled .nav-actions { order: 3; }

  body.ra10-refresh-enabled .nav,
  body.ra10-refresh-enabled .topbar {
    position: sticky;
    top: 10px;
    z-index: 10000;
    isolation: isolate;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--ra10-line-strong) 72%, #ffffff 28%);
    border-radius: 24px;
    background:
      linear-gradient(110deg, rgba(255,255,255,.72), rgba(255,255,255,.28) 42%, rgba(255,255,255,.62)),
      color-mix(in srgb, var(--ra10-surface) 84%, transparent) !important;
    box-shadow: 0 10px 0 rgba(32,56,77,.10), 0 18px 38px rgba(17,24,39,.13), inset 0 1px rgba(255,255,255,.9);
    backdrop-filter: blur(22px) saturate(145%);
  }

  body.ra10-refresh-enabled .nav::before,
  body.ra10-refresh-enabled .topbar::before {
    content: "";
    position: absolute;
    inset: -20% 40% -20% -20%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 49%, transparent 63%);
    transform: rotate(-8deg);
    animation: ra10-nav-liquid-shine 9s ease-in-out infinite;
  }

  body.ra10-refresh-enabled .nav {
    margin: 10px 12px 0;
  }

  body.ra10-refresh-enabled .nav-inner {
    gap: 10px;
    height: 68px;
  }
  body.ra10-refresh-enabled .nav-links {
    min-width: 0;
    flex: 1 1 auto;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  body.ra10-refresh-enabled .nav-links::-webkit-scrollbar { display: none; }
  body.ra10-refresh-enabled .nav-links .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body.ra10-refresh-enabled .nav-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  body.ra10-refresh-enabled .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "brand site credit actions"
      "tabs tabs tabs tabs";
    align-items: center;
    gap: 8px 12px;
    min-height: 68px;
    margin: 10px 12px 0;
    padding: 10px 14px;
  }

  body.ra10-refresh-enabled .topbar .unit-brand {
    grid-area: brand;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body.ra10-refresh-enabled .topbar .site-unit-nav {
    grid-area: site;
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.ra10-refresh-enabled .topbar .site-unit-nav::-webkit-scrollbar,
  body.ra10-refresh-enabled .topbar .tabs::-webkit-scrollbar { display: none; }
  body.ra10-refresh-enabled .topbar .tabs {
    grid-area: tabs;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: 100% !important;
    max-width: none !important;
    flex-wrap: wrap !important;
    justify-content: center;
    overflow: visible;
    scrollbar-width: none;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--ra10-line-strong) 62%, #fff 38%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ra10-surface) 64%, transparent);
  }
  body.ra10-refresh-enabled .topbar .tabs .tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body.ra10-refresh-enabled .topbar #unit1-credit-chip {
    grid-area: credit;
    flex: 0 0 auto;
    width: max-content !important;
    min-width: 0 !important;
    margin-left: auto !important;
    white-space: nowrap;
  }
  body.ra10-refresh-enabled .topbar > div:last-child {
    grid-area: actions;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 8px;
    order: 5;
  }

  body.ra10-refresh-enabled .nav-link,
  body.ra10-refresh-enabled .site-unit-link,
  body.ra10-refresh-enabled .unit-avatar-btn,
  body.ra10-refresh-enabled .theme-toggle,
  body.ra10-refresh-enabled .news-toggle {
    border: 1px solid color-mix(in srgb, var(--ra10-line-strong) 62%, #fff 38%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ra10-surface) 54%, transparent);
    font-size: 14px;
    font-weight: 500;
  }
  body.ra10-refresh-enabled .nav-link:hover,
  body.ra10-refresh-enabled .site-unit-link:hover { background: color-mix(in srgb, var(--ra10-surface) 85%, transparent); color: var(--ra10-ink); }
  body.ra10-refresh-enabled .nav-link.active,
  body.ra10-refresh-enabled .site-unit-link.active {
    color: var(--ra10-ink);
    background: color-mix(in srgb, var(--ra10-surface) 90%, transparent);
  }
  /* Site nav links render as flex pills with inline SVG icons */
  body.ra10-refresh-enabled .nav-link,
  body.ra10-refresh-enabled .site-unit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
  }
  body.ra10-refresh-enabled .site-unit-link svg.nu,
  body.ra10-refresh-enabled .nav-link svg.nu {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    opacity: .9;
  }
  /* Unit tabs get their own grouped, accent-topped look on the second row */
  body.ra10-refresh-enabled .topbar .tab {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--ra10-ink-soft);
    font-weight: 700;
    padding: 8px 16px;
  }
  body.ra10-refresh-enabled .topbar .tab:hover { background: color-mix(in srgb, var(--ra10-surface) 80%, transparent); color: var(--ra10-ink); }
  body.ra10-refresh-enabled .topbar .tab.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(120deg, var(--ra10-accent), var(--ra10-accent-2));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--ra10-accent-dark) 72%, transparent), 0 8px 18px rgba(31,111,235,.20);
  }

  /* Hover tooltips clarify what each action does */
  body.ra10-refresh-enabled .topbar .tab {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  body.ra10-refresh-enabled .topbar .tab::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--ra10-surface);
    color: var(--ra10-ink);
    border: 1px solid var(--ra10-line-strong);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    z-index: 30;
    transition: opacity 140ms ease, transform 140ms ease;
  }
  body.ra10-refresh-enabled .topbar .tab:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* Dark-mode navbar: remove the light white-glass overlay and use a dark glass surface */
  [data-theme="dark"] body.ra10-refresh-enabled .nav,
  [data-theme="dark"] body.ra10-refresh-enabled .topbar {
    background:
      linear-gradient(110deg, rgba(20,28,34,.72), rgba(20,28,34,.28) 42%, rgba(20,28,34,.62)),
      color-mix(in srgb, var(--ra10-surface) 84%, transparent) !important;
    box-shadow: 0 10px 0 rgba(0,0,0,.25), 0 18px 38px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06);
  }
  [data-theme="dark"] body.ra10-refresh-enabled .nav::before,
  [data-theme="dark"] body.ra10-refresh-enabled .topbar::before {
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 49%, transparent 63%);
  }
  [data-theme="dark"] body.ra10-refresh-enabled .nav-link,
  [data-theme="dark"] body.ra10-refresh-enabled .site-unit-link,
  [data-theme="dark"] body.ra10-refresh-enabled .unit-avatar-btn,
  [data-theme="dark"] body.ra10-refresh-enabled .theme-toggle,
  [data-theme="dark"] body.ra10-refresh-enabled .news-toggle {
    background: color-mix(in srgb, var(--ra10-surface) 40%, transparent);
    border-color: color-mix(in srgb, var(--ra10-line-strong) 60%, transparent);
    color: var(--ra10-ink-soft);
  }
  [data-theme="dark"] body.ra10-refresh-enabled .nav-link:hover,
  [data-theme="dark"] body.ra10-refresh-enabled .site-unit-link:hover,
  [data-theme="dark"] body.ra10-refresh-enabled .unit-avatar-btn:hover,
  [data-theme="dark"] body.ra10-refresh-enabled .theme-toggle:hover,
  [data-theme="dark"] body.ra10-refresh-enabled .news-toggle:hover {
    color: var(--ra10-ink);
    background: color-mix(in srgb, var(--ra10-surface) 70%, transparent);
  }
  [data-theme="dark"] body.ra10-refresh-enabled .topbar .tabs { background: color-mix(in srgb, var(--ra10-surface) 30%, transparent); border-color: color-mix(in srgb, var(--ra10-line-strong) 45%, transparent); }
  [data-theme="dark"] body.ra10-refresh-enabled .topbar .tab { color: var(--ra10-ink-soft); }
  [data-theme="dark"] body.ra10-refresh-enabled .topbar .tab:hover { color: var(--ra10-ink); background: color-mix(in srgb, var(--ra10-surface) 55%, transparent); }
}

@keyframes ra10-nav-liquid-shine {
  0%, 58%, 100% { transform: translateX(-18%) rotate(-8deg); opacity: 0; }
  68%, 82% { transform: translateX(48%) rotate(-8deg); opacity: 1; }
}

@media screen and (max-width: 840px) {
  body.ra10-refresh-enabled .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "tabs tabs" !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 7px 8px !important;
    padding: 9px 10px 10px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  body.ra10-refresh-enabled .topbar .unit-brand {
    grid-area: brand;
    min-width: 0;
  }
  body.ra10-refresh-enabled .topbar .site-unit-nav {
    display: none !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 2px 0 !important;
  }
  body.ra10-refresh-enabled .topbar .site-unit-nav .site-unit-link {
    display: none !important;
  }
  body.ra10-refresh-enabled .topbar .site-unit-nav .site-community-link {
    display: none !important;
  }
  body.ra10-refresh-enabled .topbar .tabs {
    grid-area: tabs;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    justify-content: center;
    padding: 4px !important;
  }
  body.ra10-refresh-enabled .topbar #unit1-credit-chip {
    display: none !important;
  }
  body.ra10-refresh-enabled .topbar > div:last-child {
    grid-area: actions;
    display: flex !important;
    min-width: max-content;
    gap: 5px !important;
  }
  body.ra10-refresh-enabled .topbar .unit-avatar-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }
  body.ra10-refresh-enabled .topbar .site-unit-link,
  body.ra10-refresh-enabled .topbar .tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body.ra10-refresh-enabled .nav {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.ra10-refresh-enabled .topbar {
    gap: 6px;
    padding: 8px 10px;
    border-radius: 0;
    margin: 0;
    border-left: 0;
    border-right: 0;
  }
  body.ra10-refresh-enabled .topbar .tabs {
    width: 100% !important;
    min-width: 100%;
    overflow: visible;
    flex-wrap: wrap !important;
    justify-content: center;
  }

  body.ra10-refresh-enabled .nav-inner {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 58px;
    padding: 8px 10px;
    gap: 7px;
  }
  body.ra10-refresh-enabled .nav-logo-text { display: none; }
  body.ra10-refresh-enabled .nav-logo img { width: 32px; height: 32px; }
  body.ra10-refresh-enabled .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    gap: 4px;
  }
  body.ra10-refresh-enabled .nav-links .nav-link {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 10px;
    white-space: nowrap;
  }
  body.ra10-refresh-enabled .nav-actions {
    gap: 4px;
  }
  body.ra10-refresh-enabled .nav-actions .nav-credit-chip,
  body.ra10-refresh-enabled .nav-actions .nav-user-wrap,
  body.ra10-refresh-enabled .nav-actions .nav-upgrade-btn {
    display: none !important;
  }
  body.ra10-refresh-enabled .nav-actions .nav-auth-btn {
    min-height: 36px;
    padding: 7px 10px;
    white-space: nowrap;
  }
  body.ra10-refresh-enabled .nav-actions .theme-toggle,
  body.ra10-refresh-enabled .nav-actions .news-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
}

/* Small landscape screens (e.g. phones rotated): keep the topbar tidy and
   prevent the tabs from wrapping/overflowing into a jumbled mess. */
@media screen and (max-width: 840px) and (max-height: 480px) {
  body.ra10-refresh-enabled .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "brand actions" "tabs tabs" !important;
    gap: 5px 8px !important;
    padding: 6px 8px 7px !important;
  }
  body.ra10-refresh-enabled .topbar .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.ra10-refresh-enabled .topbar .tabs::-webkit-scrollbar { display: none; }
  body.ra10-refresh-enabled .topbar .tabs .tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
  body.ra10-refresh-enabled .topbar .unit-brand span {
    font-size: 1.05rem !important;
  }
  body.ra10-refresh-enabled .topbar > div:last-child {
    gap: 4px !important;
  }
  body.ra10-refresh-enabled .topbar .unit-avatar-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}

/* Dark-mode contrast guard for embedded subject apps. */
@media screen {
  [data-theme="dark"] body,
  body[data-theme="dark"] {
    color: #e8f3ef !important;
    background-color: #0d1719 !important;
  }
  [data-theme="dark"] .card,
  [data-theme="dark"] .section-block,
  [data-theme="dark"] .feature-section,
  [data-theme="dark"] .question-card,
  [data-theme="dark"] .qrow,
  [data-theme="dark"] .filters,
  [data-theme="dark"] .practice-card,
  [data-theme="dark"] .paper,
  [data-theme="dark"] .modal,
  [data-theme="dark"] .mobile-subject-sheet {
    background-color: #172321 !important;
    color: #e8f3ef !important;
    border-color: #36504a !important;
  }
  [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
  [data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6,
  [data-theme="dark"] .question-text,[data-theme="dark"] .qtext,
  [data-theme="dark"] label,[data-theme="dark"] strong,
  [data-theme="dark"] .mobile-subject-copy strong {
    color: #f3fbf8 !important;
  }
  [data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] small,
  [data-theme="dark"] .muted,[data-theme="dark"] .lede,
  [data-theme="dark"] .scenario,[data-theme="dark"] .instruction,
  [data-theme="dark"] .additional,[data-theme="dark"] .mobile-subject-copy small {
    color: #b7cbc4 !important;
  }
  [data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,
  [data-theme="dark"] option {
    background: #101b1a !important;
    color: #edf8f4 !important;
    border-color: #45635b !important;
  }
  [data-theme="dark"] .tag.verb,[data-theme="dark"] .prog-mini-card,
  [data-theme="dark"] .prog-aim-accuracy,[data-theme="dark"] .prog-session-card,
  [data-theme="dark"] .prog-empty {
    background-color: #22332f !important;
    color: #e8f3ef !important;
  }
}

/* Mobile subject drawer: compact, searchable-looking cards with clear tap targets. */
@media screen and (max-width: 640px) {
  .mobile-subject-sheet {
    left: 8px;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 104px - env(safe-area-inset-top, 0px));
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    border-radius: 24px;
    padding: 12px;
  }
  .mobile-sheet-head { margin-bottom: 10px; }
  .mobile-sheet-copy { font-size: 12px; }
  .mobile-sheet-meta { margin-top: 8px; }
  .mobile-sheet-scroll { padding: 0 1px 8px; }
  .mobile-subject-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .mobile-subject-link {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 72px;
    padding: 10px 11px;
    gap: 10px;
    border-radius: 16px;
    text-decoration: none;
  }
  .mobile-subject-icon { width: 38px; height: 38px; border-radius: 13px; font-size: 14px; }
  .mobile-subject-meta { display: none; }
  .mobile-subject-link em { margin-top: 0; font-size: 10px; }
}