/**
 * EC-IELTS DESIGN SYSTEM
 *
 * Unified design system with centralized tokens in /static/css/tokens/
 * This file serves as the main stylesheet and component definitions.
 *
 * Token Hierarchy:
 * 1. /tokens/base.css - Core design tokens (colors, spacing, typography, effects)
 * 2. /tokens/light-theme.css - Light mode refinements
 * 3. /tokens/dark-theme.css - Dark mode refinements
 * 4. /tokens/legacy-compat.css - Backward compatibility layer for existing code
 * 5. design.css (this file) - Component styles and utilities
 *
 * Multi-Tenant Branding:
 * - Tenant-specific colors flow through context processor
 * - Brand tokens override base accent color
 * - Theme system applies after branding
 */

@import url("./tokens/base.css?v=22f");
@import url("./tokens/light-theme.css?v=22f");
@import url("./tokens/dark-theme.css?v=22f");
@import url("./tokens/legacy-compat.css?v=22f");

/* ============================================================================
   CENTRALIZED COMPONENT SYSTEM
   ============================================================================
   These files contain reusable component styles for all UI elements.
   Each component is designed to work with the token system and all themes.
*/
@import url("./components/buttons.css");
@import url("./components/forms.css");
@import url("./components/cards.css");
@import url("./components/modals.css");
@import url("./components/badges.css");
@import url("./components/dropdowns.css");
@import url("./components/loaders.css");
@import url("./components/toggles.css");
@import url("./components/empty-states.css");
@import url("./components/utilities.css");
@import url("./components/question-player.css");
@import url("./components/pagination.css");

/* ============================================================================
   GLOBAL ACCESSIBILITY BASELINE
   ============================================================================
   Keyboard users get a visible ring on every interactive element, even when
   a component stylesheet forgot its own :focus-visible rule. Colour-independent
   (outline + offset) so it also reads on heat-coloured surfaces.
*/
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[label]:focus-visible {
  outline: 2px solid var(--brand-accent, var(--accent, #2563eb));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* Respect users who ask for less motion (confetti, pulses, carousels). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Admin-specific styles */
@import url("./admin/question-form.css");
@import url("./admin/question-view.css");
@import url("./admin/ielts-question-forms.css");
@import url("./admin/admin-lists.css");
@import url("./admin/admin-pages.css");

/* Core page-specific styles */
@import url("./core/dashboard.css");
@import url("./core/drill-practice.css");
@import url("./core/student-pages.css");
@import url("./core/drills.css");

/* Games module styles removed */\n\n/* Accounts module styles */
@import url("./accounts.css");

/* Landing pages styles */
@import url("./landing-pages.css");

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* System preference: Respect OS dark mode when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-base);
  /* AI-NOTE: Kill the UA-default 8px body margin — it shrank every page's
     usable width by 16px (visible as asymmetric gutters: content hugging
     8px on the left while the right edge sat 23px short on a 360px phone)
     and compounded with container padding to squeeze the dashboard hero. */
  margin: 0;
  /* Body-level overflow-wrap safety net so a stray long URL,
     tenant slug, or unbroken email never pushes the page wider than the
     viewport on phones. Word-level breaks still read naturally for
     normal prose because the default `normal` keeps short words
     intact; the `break-word` only kicks in for > 100% width tokens. */
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
/* Visually-hidden heading used for SEO h1s that should not
   visually compete with a larger h2 underneath (e.g. the contact
   page). The element remains in the document so crawlers and
   screen readers can see it, but it takes zero space and doesn't
   break the visual hierarchy. */
.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;
}
svg {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}
svg use {
  fill: currentColor;
  stroke: currentColor;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-base);
}
.heading-font {
  font-family: var(--font-family-base);
}
.supporting-font {
  font-family: var(--font-family-base);
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.space-between {
  justify-content: space-between;
}
main.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--border-subtle) transparent; /* Firefox */
}

main.container::-webkit-scrollbar {
  width: 4px;
}

main.container::-webkit-scrollbar-track {
  background: transparent;
}

main.container::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 100px;
  transition: background 200ms ease;
}

main.container::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

main.container::-webkit-scrollbar-corner {
  background: transparent;
}

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  /* AI-NOTE: Pad for iPhone notch + Android gesture bar without hard-coding
     env() values inline at every ruleset. CSS-only token, available
     everywhere. --sat = safe-area-inset-top; --sab = bottom. */
  padding-top: max(var(--space-6), env(safe-area-inset-top));
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

/* On phones the horizontal container padding eats too much room — 32px
   gutters (space-6) on a 360px viewport leaves < 300px for content.
   Tighten to space-3 (12px) + a touch of safe-area breathing room. */
@media (max-width: 720px) {
  .container,
  .app-shell.has-sidebar > .container,
  body[data-portal="student"] .app-shell.has-sidebar > .container,
  body[data-portal="admin"] .app-shell.has-sidebar > .container,
  body[data-portal="partner"] .app-shell.has-sidebar > .container,
  body[data-portal="provider"] .app-shell.has-sidebar > .container,
  body[data-portal="teacher"] .app-shell.has-sidebar > .container {
    padding-left: max(var(--space-3, 12px), env(safe-area-inset-left));
    padding-right: max(var(--space-3, 12px), env(safe-area-inset-right));
    padding-top: max(var(--space-4, 16px), env(safe-area-inset-top));
  }
}

/* Override container when inside app-shell with sidebar - push content right */
.app-shell.has-sidebar > .container {
  margin: 0 auto;
  max-width: var(--content-max-width);
}

/* Ensure section content stays within container bounds */
.app-shell.has-sidebar > .container > section {
  max-width: 100%;
  box-sizing: border-box;
}
.topbar {
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
}
html[data-theme="dark"] .topbar {
  background: color-mix(in oklab, var(--surface) 82%, transparent);
}
.topbar-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  padding: 0 var(--space-4);
  height: 100%;
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  gap: var(--space-4);
}
.topbar.has-sidebar .topbar-shell {
  width: 100%;
  margin: 0;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.nav-toggle svg {
  color: inherit;
  fill: currentColor;
}
.nav-toggle:hover {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.brand-mark {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 0;
}
.brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-strong) 100%
  );
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 700;
}
.brand-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.workspace-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg);
}
.workspace-pill:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.nav {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  white-space: nowrap;
}
.nav-item {
  color: var(--color-text);
  text-decoration: none;
  padding: 0 var(--space-3);
  min-height: 44px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--dur-base) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-subtle);
  background: var(--bg);
}
.nav-item svg {
  color: inherit;
  fill: currentColor;
}

/* Navbar icon and label for mixed content items */
.nav-item .nav-icon {
  font-size: 18px;
  vertical-align: middle;
  line-height: 1;
}

.nav-item .nav-label {
  line-height: 1.2;
}
.nav-item:hover {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.nav-item.button {
  background: var(--accent-button);
  color: white;
  padding: 0 var(--space-4);
  min-height: 44px;
  border-radius: 999px;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.nav-item.button:hover {
  background: var(--accent-strong);
  box-shadow: var(--shadow-md);
}
.ielts-listening-mcq {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .ielts-listening-mcq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }
}
.ielts-listening-mcq__media {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: var(--space-2);
}
.ielts-listening-mcq__audio {
  width: 100%;
}
.ielts-listening-mcq__hint {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.ielts-listening-mcq__content {
  display: grid;
  gap: var(--space-3);
}
.ielts-listening-mcq__meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.ielts-listening-mcq__prompt {
  font-size: 1.1rem;
  font-weight: 600;
}
.ielts-listening-mcq__instruction {
  color: var(--color-text-muted);
  font-weight: 500;
}
.ielts-listening-mcq__options {
  display: grid;
  gap: var(--space-2);
}
.ielts-listening-mcq__option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-height: 44px;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}
.ielts-listening-mcq__option:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}
.ielts-listening-mcq__option input {
  margin-top: 2px;
}
.ielts-listening-mcq__option-body {
  display: grid;
  gap: 2px;
}
.ielts-listening-mcq__option-label {
  font-weight: 700;
}
.ielts-listening-mcq__option-text {
  color: var(--text);
}
.pte-listening-mcq {
  display: grid;
  gap: var(--space-4);
}
.pte-listening-mcq__intro,
.pte-listening-mcq__player,
.pte-listening-mcq__content {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: var(--space-3);
}
.pte-listening-mcq__title {
  font-size: 1.2rem;
  font-weight: 700;
}
.pte-listening-mcq__prompt,
.pte-listening-mcq__question {
  font-size: 1.05rem;
  font-weight: 600;
}
.pte-listening-mcq__note {
  color: var(--color-text-muted);
}
.pte-listening-mcq__player-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.pte-listening-mcq__timer {
  color: var(--color-text-muted);
  font-weight: 600;
}
.pte-listening-mcq__progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.pte-listening-mcq__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-strong) 100%
  );
  transition: width var(--dur-base) var(--ease);
}
.pte-listening-mcq__meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.pte-listening-mcq__options {
  display: grid;
  gap: var(--space-2);
}
.pte-listening-mcq__option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-height: 44px;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}
.pte-listening-mcq__option:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}
.pte-listening-mcq__option input {
  margin-top: 2px;
}
.pte-listening-mcq__option-body {
  display: grid;
  gap: 2px;
}
.pte-listening-mcq__option-label {
  font-weight: 700;
}
.pte-listening-mcq__option-text {
  color: var(--text);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-strong) 100%
  );
  color: var(--text-on-accent);
  text-decoration: none;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  border: none;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.checkbox-group {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  gap: var(--space-2);
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.button.secondary {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border-subtle);
  box-shadow: none;
}
button.nav-item {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: 999px;
}
button.nav-item:hover {
  background: var(--surface);
  border-color: var(--border);
}
.nav-dropdown {
  position: relative;
}
.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
}
.nav-dropdown[open] > summary {
  background: var(--bg);
}
html[data-theme="dark"] .nav-dropdown[open] > summary {
  background: var(--bg);
}
.nav-dropdown .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 285px;
  padding: var(--space-2);
  z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    visibility var(--dur-base) var(--ease);
}
.nav-dropdown[open] .menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown .menu .menu-item {
  display: flex;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  min-height: 44px;
  padding: 8px var(--space-3);
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: normal;
  line-height: 1.3;
  font-weight: 500;
  transition:
    background var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}
.nav-dropdown .menu .menu-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  fill: currentColor;
  flex-shrink: 0;
}
.nav-dropdown .menu .menu-item:hover {
  background: color-mix(in oklab, var(--bg) 90%, transparent);
}
.nav-dropdown .menu .menu-item:hover svg {
  color: var(--color-text);
}

.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--border-subtle);
  margin: 0 var(--space-2);
}
.nav-item.icon-only {
  position: relative;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--bg);
  border-color: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-item.icon-only .material-icons-outlined {
  font-size: 20px;
}
.nav-item.icon-only svg {
  color: inherit;
  fill: currentColor;
}
@media (max-width: 768px) {
  .topbar {
    /* AI-NOTE: Slightly shorter on phones so it doesn't crowd the
       viewport on 360px wide screens. Was 64px (Android-recommended),
       56px matches Material Design and Apple HIG min tap-target when
       the avatar is the only interactive element in the bar. */
    height: 56px;
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
  .topbar-shell {
    padding: 0 var(--space-3);
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
    gap: var(--space-2);
  }
  .brand-text {
    font-size: 14px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* AI-NOTE: At 360px the shell runs out of width and flex-shrink squeezes
     the toggle down to a ~21px sliver (it sat UNDER the brand icon, so the
     brand intercepted its taps and the drawer became hard to open/close).
     Pin the two primary controls to their full tap size and let the
     plan badge (a nice-to-have chip) absorb any squeeze instead. */
  .topbar-brand {
    /* The brand CONTAINER also must not shrink: with flex-shrink:1 it
       collapsed to ~37px while its (now unshrinkable) children kept their
       size, so they overflowed the box and the right-aligned actions
       cluster slid left ON TOP of the brand icon and ✓ chip. */
    flex-shrink: 0;
  }
  .topbar-brand .nav-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .brand-mark { min-height: 36px; flex-shrink: 0; }
  .brand-icon { width: 28px; height: 28px; font-size: 14px; }
  .workspace-pill {
    display: none;
  }
  .nav {
    gap: 4px;
  }
  .nav-item {
    padding: 0 var(--space-2);
    font-size: 12px;
    min-height: 36px;
  }

  .nav-item--timezone,
  .device-nav-item,
  .nav-item.icon-only.device-nav-item,
  .nav-divider--status {
    display: none;
  }

  /* Hide secondary topbar icons on phones so the brand + sidebar-toggle +
     avatar fit comfortably. The hamburger still toggles the sidebar (which
     surfaces the same links), and the avatar menu exposes feedback +
     notifications + timezone. */
  .topbar-actions .nav-item[aria-label="Feedback"],
  .topbar-actions .nav-divider,
  .topbar-actions details.nav-item-wrapper[aria-label],
  .topbar-actions details.nav-item-wrapper {
    display: none;
  }
  .topbar-actions .nav-dropdown {
    display: block;
  }
  /* AI-NOTE: Trim the plan badge so it doesn't crowd the brand + sidebar
     toggle. Original was 80px max-width; this drops to a single
     ellipsised word + icon. Long plan names live on the Plans page. */
  .nav-plan-badge {
    padding: 3px 8px;
    font-size: 11px;
  }
  .nav-plan-badge__label { max-width: 70px; }
  .nav-plan-badge__icon { width: 14px; height: 14px; font-size: 9px; }
  /* Sidebar toggle: ensure it's at least 44px tap target */
  .nav-toggle { width: 44px; height: 44px; }
}

/* Mid-width phones / small tablets (≤820px):
   The brand area is too wide for the remaining space when it keeps the
   exam-family pill (`PTE Academic`, ~135 px) next to a 44 px toggle +
   164 px brand-mark — at ~768 px the brand area pushes to ~370 px,
   leaving < 400 px for the actions cluster, so the ✓ plan chip and the
   timezone chip glom together. With both pills on screen, the topbar
   always overflows. Hide the family pill here — the active family is
   already in the page header pill on Question Bank / Manual Practice
   and reachable via the avatar menu's exam switcher. Brand area now
   collapses to toggle + brand-mark. */
@media (max-width: 820px) {
  .topbar .plan-selector { display: none; }
}

/* Very narrow phones (360px and below): the topbar runs out of room with
   toggle + brand + plan chip + avatar all visible. Drop the plan chip's
   text and keep just the ✓ icon (the full plan name stays on the Plans
   page and in the chip's title tooltip). */
@media (max-width: 380px) {
  .nav-plan-badge__label { display: none; }
  .nav-plan-badge { padding: 4px 6px; }
}

/* Phones (<=720px): the timezone chip + speaker/mic device links + plan
   badge chain is too wide for the topbar once the brand area is back to
   just the toggle + brand-mark. With toggle (44) + brand-mark (~165) +
   the actions cluster (~430 px including the plan-badge label),
   we're crowding out the right edge and the avatar/user-menu ends up
   overlapping the secondary actions. Hide the timezone chip,
   the speaker/mic readiness links, and the plan-badge label so the
   topbar settles to: [toggle] [logo + name] [plan-badge icon only] [notifications] [avatar].
   The full plan name is on the Plans page; timezone is via the avatar
   menu; device readiness is reachable through the feedback menu. */
@media (max-width: 720px) {
  .nav-item--timezone,
  .device-nav-item {
    display: none !important;
  }
  .nav-plan-badge__label {
    display: none;
  }
  .nav-plan-badge {
    padding: 4px 6px;
  }
  .nav-plan-badge__icon {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
}

.card h2 {
  color: var(--text);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  width: 100%;
  box-sizing: border-box;
}
.grid.two {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  width: 100%;
  box-sizing: border-box;
}
.grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.grid.four {
  grid-template-columns: repeat(4, 1fr);
}
.grid.gap-2 {
  gap: var(--space-2);
}
.grid.gap-3 {
  gap: var(--space-3);
}
.grid.gap-4 {
  gap: var(--space-4);
}
.grid.gap-6 {
  gap: var(--space-6);
}

/* Stack multi-column grids on small viewports.
   The default 280px minimum per column makes these
   2/3/4-up grids overflow on phone widths. */
@media (max-width: 720px) {
  .grid.two,
  .grid.three,
  .grid.four {
    grid-template-columns: 1fr;
  }
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.list-item {
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Courses Grid Layout */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Responsive Grid */
@media (max-width: 1024px) {
  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 640px) {
  .courses-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Course Cards */
.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--primary);
}

.course-body {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-footer {
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.card.span2 {
  grid-column: span 2;
}
.card h2 {
  color: var(--text);
  margin: 0 0 var(--space-3);
  padding-bottom: 6px;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--accent-button);
  color: white;
  text-decoration: none;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  transition: all var(--dur-smooth) var(--ease-smooth);
  font-weight: 500;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.button:active {
  transform: translateY(0);
}
.button.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}
.button.secondary:hover {
  background: var(--bg);
  border-color: var(--border);
}
.button.danger {
  background: var(--danger);
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.3);
}
.button.danger:hover {
  background: #dc2626;
}
.button.ghost {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  border: none;
  padding: 0 var(--space-3);
}
.button.ghost:hover {
  background: var(--bg);
  color: var(--text);
}
.button.sm {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: 13px;
}
.button.lg {
  min-height: 52px;
  padding: 0 var(--space-5);
  font-size: 15px;
}
.link {
  color: #334155;
  text-decoration: none;
}
html[data-theme="dark"] .link {
  color: var(--accent);
}
.auth .form p {
  margin-bottom: var(--space-3);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text);
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: 0 var(--space-3);
  outline: none;
  font-family: var(--font-family);
  font-size: 14px;
  transition: all var(--dur-base) var(--ease);
}
input[type="checkbox"]:hover {
  background-color: none;
  box-shadow: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.1);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
input[type="checkbox"] {
  width: auto;
  height: 18px;
  width: 18px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--accent);
}
input[type="radio"] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  accent-color: var(--accent);
}
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  appearance: none;
}
textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
button {
  border: none;
  cursor: pointer;
}
@media (max-width: 640px) {
  .container {
    padding: var(--space-4) var(--space-3);
  }
}

.inquiries-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.inquiries-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.inquiries-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.inquiries-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.inquiries-stat-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.inquiries-stat-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 600;
}
.inquiries-stat-card .value {
  font-size: 1.4rem;
  font-weight: 700;
}
.inquiries-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.inquiries-filters input,
.inquiries-filters select {
  min-width: 200px;
}
.inquiries-table-wrapper {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
  width: 100%;
  margin-top: var(--space-3);
}
.inquiries-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.inquiries-table thead th {
  background: var(--bg);
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--border-subtle);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.inquiries-table tbody td {
  padding: 12px 10px;
  border-top: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.inquiries-table tbody tr:hover td {
  background: var(--bg);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
}
.status-chip.new {
  background: #e0f2fe;
  color: #075985;
  border-color: #bae6fd;
}
.status-chip.nurturing {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.status-chip.converted {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.status-chip.lost {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.status-chip.inactive {
  background: #e5e7eb;
  color: #374151;
  border-color: #d1d5db;
}
.inquiry-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.inquiry-status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface);
  margin-top: var(--space-4);
}
.status-path {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.status-button {
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.status-button.active {
  background: var(--accent-contrast);
  border-color: var(--accent);
  color: var(--text);
}
.inquiry-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.notes-item {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-3);
}
.key-info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.key-info-list p {
  margin: 0;
  padding: var(--space-2);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
}

@media (max-width: 960px) {
  .inquiries-stats {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  .inquiry-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Form field errors */
.error-text {
  color: var(--danger);
  font-size: 14px;
  margin-top: 4px;
  padding: 6px 10px;
  background-color: rgba(252, 74, 70, 0.1);
  border-left: 3px solid var(--danger);
  border-radius: 2px;
  display: block;
}
html[data-theme="dark"] .error-text {
  background-color: rgba(252, 74, 70, 0.15);
}

/* Landing hero */
.hero {
  padding: var(--space-8) 0 var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(
    135deg,
    var(--accent-contrast) 0%,
    rgba(238, 242, 255, 0.5) 100%
  );
}
html[data-theme="dark"] .hero {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.7) 0%,
    rgba(11, 15, 23, 0.6) 100%
  );
}
.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hero-title {
  font-size: 48px;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-subtitle {
  color: var(--muted);
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hero-meta {
  display: flex;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 14px;
}
.hero-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-stat-value {
  font-weight: 600;
  color: var(--text);
}
.hero-stat-label {
  color: var(--muted);
}

.features {
  margin-top: var(--space-6);
}

/* Testimonials & FAQ */
.testimonial {
  background: var(--surface);
  padding: var(--space-2);
  border-left: 3px solid var(--accent);
}
.faq p {
  margin: 6px 0;
}

/* Grid helpers (responsive override handled by the
   @media (max-width: 720px) block near the grid helpers section) */

/* App shell with optional left sidebar */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.app-shell.has-sidebar {
  display: block;
  height: calc(100vh - 72px);
  position: relative;
}
.app-shell.has-sidebar {
  --content-max-width: 1360px;
}

/* Position checkbox and overlay outside flow */
.app-shell.has-sidebar > .sidebar-toggle-checkbox,
.app-shell.has-sidebar > .sidebar-overlay {
  position: absolute;
}

/* Desktop sidebar layout (screens 769px and wider) */
@media (min-width: 769px) {
  /* Fixed sidebar - always stays in place */
  .app-shell.has-sidebar > .sidebar {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    width: var(--sidebar-width) !important;
    height: calc(100vh - 72px) !important;
    z-index: 100 !important;
    transform: none !important;
  }

  /* Main content area - push right for sidebar, fill remaining space */
  .app-shell.has-sidebar > .container {
    margin-left: var(--sidebar-width) !important;
    margin-right: 0 !important;
    width: calc(100% - var(--sidebar-width)) !important;
    max-width: none !important;
    height: calc(100vh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Center content inside the container with max-width */
  .app-shell.has-sidebar > .container > * {
    /* max-width: var(--content-max-width); */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }

  body.sidebar-collapsed .app-shell.has-sidebar > .sidebar {
    width: var(--sidebar-collapsed-width) !important;
  }

  body.sidebar-collapsed .app-shell.has-sidebar > .container {
    margin-left: var(--sidebar-collapsed-width) !important;
    margin-right: 0 !important;
    width: calc(100% - var(--sidebar-collapsed-width)) !important;
    max-width: none !important;
  }
}

/* All non-student portals with sidebar - consistent styling */
body[data-portal="admin"] .app-shell.has-sidebar > .container,
body[data-portal="partner"] .app-shell.has-sidebar > .container,
body[data-portal="provider"] .app-shell.has-sidebar > .container,
body[data-portal="teacher"] .app-shell.has-sidebar > .container {
  padding: var(--space-6);
}

/* Student portal sidebar content — tighter horizontal gutters than other
   portals so the dashboard reclaims the wasted space between the sidebar
   and the cards. Scoped to >720px: the shared mobile rule above (which
   already tightens .container padding on phones) must win untouched below
   that breakpoint, so this is gated to not clobber it. */
@media (min-width: 721px) {
  body[data-portal="student"] .app-shell.has-sidebar > .container {
    padding: var(--space-6) var(--space-4);
  }
}

main.container {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  height: 100%;
  max-height: 100vh;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: visible;
  z-index: 100;
}
html[data-theme="dark"] .sidebar {
  background: rgba(15, 23, 42, 0.98);
}
.sidebar-toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sidebar-overlay {
  display: none;
}
@media (max-width: 768px) {
  .sidebar-toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 1000;
    pointer-events: none;
    transition: background 0.3s ease;
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar-overlay {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--surface);
  }
  html[data-theme="dark"] .sidebar {
    background: rgba(15, 23, 42, 0.98);
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar {
    transform: translateX(0);
  }
  html:has(.sidebar-toggle-checkbox:checked) {
    overflow: hidden;
  }
  html:has(.sidebar-toggle-checkbox:checked) body {
    overflow: hidden;
  }
  .app-shell.has-sidebar {
    grid-template-columns: 1fr;
  }
}

.sidebar::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar {
  width: 3px;
}

.sidebar::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 100px;
  transition: background 200ms ease;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

.sidebar::-webkit-scrollbar-corner,
.sidebar-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
.sidebar,
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sidebar-head-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Mobile drawer close (X) — hidden on desktop where the sidebar is always
   visible; on phones it sits at the drawer's top-right so the drawer can be
   dismissed without hunting for the (now covered) topbar toggle. */
.sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  flex: 0 0 40px;
}
.sidebar-close svg {
  display: block;
  fill: currentColor;
}
.sidebar-close:hover {
  background: var(--surface);
  border-color: var(--border);
}
@media (max-width: 768px) {
  .sidebar-close {
    display: inline-flex;
  }
  /* The brand link + label + close share the drawer head row; drop the
     'Menu' label on the narrowest screens so nothing crowds the X. */
  .sidebar-head .sidebar-head-label {
    margin-left: auto;
  }
}

.sidebar-brand-mobile {
  display: none;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
}
.sidebar-brand-mobile .brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
}
.sidebar-brand-mobile .brand-text {
  font-weight: 700;
  font-size: 16px;
}

@media (max-width: 768px) {
  .sidebar-brand-mobile {
    display: flex;
  }
}

.sidebar-toggle {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--color-text-muted);
  border-radius: var(--radius-lg);
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  font-size: 20px;
  cursor: pointer;
  transition: all var(--dur-smooth) var(--ease-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle:hover {
  background: var(--bg);
  color: var(--color-text);
  border-color: var(--border);
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidebar-group {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-group-title {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.sidebar-group-label {
  flex: 1;
}

.sidebar-group-toggle {
  font-size: 16px;
  color: var(--color-text-muted);
  transition:
    transform 120ms var(--ease-smooth),
    color 120ms var(--ease-smooth);
}
.sidebar-group-toggle svg {
  color: inherit;
  fill: currentColor;
}

.sidebar-section-collapsed {
  gap: 0;
  padding-bottom: var(--space-2);
}

.sidebar-section-collapsed .sidebar-link {
  display: none;
}

/* AI-NOTE (2026-09-25): convention flipped. The chevron icon is
   keyboard_arrow_down (a v shape). Convention:
     - OPEN: v  (↓)   "tap to collapse"
     - CLOSED: ^ (rotated 180° → ▲)  "tap to expand"
   Original -90deg put the arrow pointing left, which read as "go back"
   in the drawer's vertical column and confused the affordance. */
.sidebar-section-collapsed .sidebar-group-toggle {
  transform: rotate(180deg);
}

.sidebar-group.is-active {
  box-shadow: var(--shadow-xs);
}

.sidebar-group.is-active .sidebar-group-label {
  color: var(--color-text);
}

.sidebar-group.is-active .sidebar-group-toggle {
  color: var(--color-text);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  padding: 0 var(--space-3);
  min-height: 44px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--dur-smooth) var(--ease-smooth);
  border: 1px solid transparent;
  background: transparent;
}

/* Audit-trail accent (2026-09-25): used by the Impersonation Log link
   so the entry stands out as an audit affordance, not just another
   settings option. A muted left border (instead of a heavy block
   tint) keeps the sidebar visually calm while still flagging the link. */
.sidebar-link--accent {
  border-left: 3px solid var(--color-warning, #f5b041);
  padding-left: calc(var(--space-3) - 2px);
}
.sidebar-link--accent .sidebar-icon {
  color: var(--color-warning, #f5b041);
}
.sidebar-link--accent:hover .sidebar-icon,
.sidebar-link--accent.active .sidebar-icon {
  color: var(--color-warning, #f5b041);
}

.sidebar-link .sidebar-icon {
  font-size: 20px;
  color: var(--color-text-muted);
  transition: color var(--dur-smooth) var(--ease-smooth);
}
.sidebar-link .sidebar-icon {
  fill: currentColor;
}
html[data-theme="dark"] .sidebar-link .sidebar-icon {
  color: var(--color-text);
}

.sidebar-link .label {
  flex: 1;
}

.sidebar-link:hover {
  background: var(--color-accent-contrast);
  color: var(--color-accent-strong);
  border-color: var(--color-blank-primary-bg);
}

.sidebar-link:hover .sidebar-icon {
  color: var(--color-accent-strong);
}

.sidebar-link.active {
  background: var(--color-blank-primary-bg);
  color: #4338ca;
  font-weight: 600;
}

.sidebar-link.active .sidebar-icon {
  color: #4338ca;
}

html[data-theme="dark"] .sidebar-link:hover {
  background: rgba(79, 70, 229, 0.2);
  color: #7c86e8;
  border-color: rgba(79, 70, 229, 0.3);
}

html[data-theme="dark"] .sidebar-link.active {
  background: rgba(79, 70, 229, 0.25);
  color: #aab4f2;
  border-color: rgba(79, 70, 229, 0.4);
}

.sidebar-link.muted {
  color: var(--color-text-muted);
}

.sidebar-link.muted:hover {
  color: var(--color-text);
}

.sidebar-link.muted .sidebar-icon {
  color: var(--color-text-muted);
}

.sidebar-link.danger {
  color: var(--danger);
}

.sidebar-link.danger .sidebar-icon {
  color: var(--danger);
}

.sidebar-link.danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sidebar-utility svg {
  color: var(--color-text);
  fill: currentColor;
}

.sidebar-utility {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.sidebar-utility:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

.sidebar-utility.danger {
  color: var(--danger);
}

.sidebar-utility.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.24);
}

.sidebar-logout {
  margin: 0;
}

.sidebar-dropdown {
  position: relative;
  width: 100%;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.sidebar-user-card:hover {
  border-color: var(--color-accent);
  background: var(--color-bg);
}

.sidebar-user-card::-webkit-details-marker {
  display: none;
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--color-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sidebar-avatar .profile-avatar-initials {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
}

.sidebar-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-user-email {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-dropdown summary {
  list-style: none;
}

.sidebar-dropdown[open] > summary {
  background: var(--bg);
  color: var(--color-text);
  border-color: var(--border);
}

.sidebar-dropdown .menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 285px;
  padding: 6px;
  z-index: 40;
  max-height: 60vh;
  overflow: auto;
}

.sidebar-dropdown .menu .menu-item {
  display: flex;
  width: 100%;
  text-align: left;
  font-weight: 500;
  gap: var(--space-4);
  justify-content: flex-start;
  min-height: 44px;
  padding: 6px var(--space-3);
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: normal;
  line-height: 1.3;
}

.sidebar-dropdown .menu .menu-item.logout,
.nav-dropdown .menu .menu-item.logout {
  color: var(--danger);
}
.sidebar-dropdown .menu .menu-item.logout svg,
.nav-dropdown .menu .menu-item.logout svg {
  color: var(--danger);
  fill: currentColor;
}
.sidebar-dropdown .menu .menu-item.logout:hover,
.nav-dropdown .menu .menu-item.logout:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}
.sidebar-dropdown .menu .menu-item.logout:hover svg,
.nav-dropdown .menu .menu-item.logout:hover svg {
  color: var(--danger);
}

.sidebar-dropdown .menu .menu-item:hover {
  background: var(--bg);
}

.sidebar-dropdown .menu form {
  margin: 0;
}

body.sidebar-collapsed .app-shell.has-sidebar {
  grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

body.sidebar-collapsed .sidebar-head-label,
body.sidebar-collapsed .sidebar-group-title,
body.sidebar-collapsed .sidebar-link .label {
  display: none;
}

body.sidebar-collapsed .app-shell.has-sidebar .sidebar {
  padding: var(--space-4) var(--space-3);
  gap: var(--space-3);
}

body.sidebar-collapsed .sidebar-head {
  justify-content: center;
}

body.sidebar-collapsed .sidebar-toggle {
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-height: 36px;
  min-width: 36px;
}

body.sidebar-collapsed .sidebar-toggle .material-icons-outlined {
  transform: rotate(180deg);
  transition: transform var(--dur-smooth) var(--ease-smooth);
}

body.sidebar-collapsed .sidebar-group {
  padding: var(--space-2);
  align-items: center;
}

body.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 0;
  min-height: 44px;
  width: 44px;
}

body.sidebar-collapsed .sidebar-dropdown {
  width: 44px;
}

body.sidebar-collapsed .sidebar-user-card {
  justify-content: center;
  padding: var(--space-2);
  border: none;
  background: transparent;
}

body.sidebar-collapsed .sidebar-user-info {
  display: none;
}

body.sidebar-collapsed .sidebar-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
}

/* Responsive: hide sidebar on small screens */
@media (max-width: 768px) {
  .topbar {
    height: 56px;
  }
  .topbar .container {
    padding: 0 var(--space-3);
    column-gap: var(--space-2);
  }
  .topbar-center {
    display: none;
  }
  .topbar .logo {
    font-size: 16px;
  }
  .topbar-brand .brand-text {
    display: none;
  }
  .nav {
    gap: var(--space-1);
  }
  .nav-item {
    padding: 0 var(--space-2);
    min-height: 40px;
    font-size: 13px;
  }
  .nav-item.icon-only {
    width: 40px;
    height: 40px;
  }
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-shell.has-sidebar {
    display: flex;
    flex-direction: column;
  }
  body.sidebar-collapsed .app-shell.has-sidebar {
    display: flex;
    flex-direction: column;
  }
  .app-shell.has-sidebar > .container {
    grid-column: 1 / -1;
    width: 100%;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--surface);
  }
  html[data-theme="dark"] .sidebar {
    background: rgba(15, 23, 42, 0.98);
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar {
    transform: translateX(0);
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 1000;
    pointer-events: none;
    transition: background 0.3s ease;
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar-overlay {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
  }
  html:has(.sidebar-toggle-checkbox:checked) {
    overflow: hidden;
  }
  html:has(.sidebar-toggle-checkbox:checked) body {
    overflow: hidden;
  }
  .app-shell .container {
    max-width: var(--content-max-width);
    margin: 0 auto;
  }

  /* Mobile Bottom Navigation */
  #mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border-subtle);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    gap: 4px;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* Honor iOS safe-area + Android gesture bar without adding extra spacer
       wrappers — the existing main.container padding-bottom: 96px already
       accounts for this strip's height on student pages. */
  }

  #mobile-bottom-nav a,
  #mobile-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    padding: 6px 4px;
    min-height: 48px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-base, 150ms) ease, color var(--dur-base, 150ms) ease;
    /* Tap highlight flash off so the whole bar doesn't flash blue on Android */
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav__icon {
    font-size: 20px;
    line-height: 1;
  }

  .mobile-bottom-nav__label {
    line-height: 1.1;
    font-size: 10px;
    letter-spacing: 0.01em;
  }

  #mobile-bottom-nav a:active,
  #mobile-bottom-nav button:active {
    background: var(--bg);
  }

  /* Highlight the active route — mirrors the desktop sidebar's
     .sidebar-link[aria-current="page"] treatment so users get the same
     "where am I" cue on either surface. */
  #mobile-bottom-nav a[aria-current="page"],
  #mobile-bottom-nav button[aria-current="page"] {
    color: var(--accent, var(--brand-accent, #ff3159));
  }
  #mobile-bottom-nav a[aria-current="page"] .mobile-bottom-nav__icon,
  #mobile-bottom-nav button[aria-current="page"] .mobile-bottom-nav__icon {
    background: color-mix(in srgb, var(--accent, #ff3159) 12%, transparent);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
  }

  /* "More" toggle button is open = swap icon to X via aria-expanded */
  #mobile-drawer-toggle[aria-expanded="true"] .mobile-bottom-nav__icon {
    color: var(--accent, var(--brand-accent, #ff3159));
  }

  /* Mobile drawer — bottom sheet style. Pin to the bottom of the screen
     so a thumb can reach every link without scrolling the page first. */
  #mobile-drawer {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 200ms;
  }

  #mobile-drawer[data-open="true"] {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  #mobile-drawer-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 200ms ease;
    cursor: pointer;
    /* AI-NOTE: The scrim is the LAST child of #mobile-drawer while the sheet
       (.mobile-drawer__scroll) comes first — with both z-index:auto the scrim
       painted on top and swallowed every tap: the drawer looked "greyed out
       and unclickable" even though it rendered fine. Pin the sheet above the
       scrim explicitly so links are tappable. */
    z-index: 1;
  }
  html[data-theme="dark"] #mobile-drawer-scrim {
    background: rgba(7, 11, 20, 0.7);
  }
  #mobile-drawer[data-open="true"] #mobile-drawer-scrim {
    opacity: 1;
  }

  .mobile-drawer__scroll {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--surface);
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
    padding: var(--space-3) var(--space-4) calc(20px + env(safe-area-inset-bottom)) var(--space-4);
    box-shadow: 0 -16px 40px rgba(15, 23, 42, 0.18);
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
    -webkit-overflow-scrolling: touch;
    /* Keep the sheet tappable above the scrim (see #mobile-drawer-scrim). */
    z-index: 2;
  }
  #mobile-drawer[data-open="true"] .mobile-drawer__scroll {
    transform: translateY(0);
  }

  .mobile-drawer__scroll::before {
    /* iOS-style grabber — purely decorative, signals "drag down to close" */
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: var(--radius-full);
    background: var(--color-border-subtle);
  }

  /* New dedicated handle element — when present in markup it replaces the
     ::before pseudo-grabber with a slightly wider pill, and provides a
     stable target for future JS drag-to-dismiss. */
  .mobile-drawer__handle {
    display: block;
    width: 48px;
    height: 4px;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-border-subtle);
  }
  /* Hide the ::before pseudo-grabber when the explicit handle element is
     rendered, otherwise the drawer would show two stacked grabbers. */
  .mobile-drawer__scroll:has(> .mobile-drawer__handle)::before {
    display: none;
  }
  .mobile-drawer__handle + .mobile-drawer__profile {
    /* Slight visual nudge when both handle and profile are present */
    margin-top: -4px;
  }

  /* ===== Drawer profile header ===== */
  .mobile-drawer__profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 6px var(--space-2) var(--space-4) var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
  }

  .mobile-drawer__avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-accent-subtle);
    display: grid;
    place-items: center;
    border: 2px solid var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .mobile-drawer__avatar-img,
  .mobile-drawer__avatar-img.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    display: grid;
    place-items: center;
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    letter-spacing: 0.01em;
  }
  .mobile-drawer__avatar-img img,
  .mobile-drawer__avatar-img.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mobile-drawer__avatar-img .profile-avatar-initials,
  .mobile-drawer__avatar-img.profile-avatar .profile-avatar-initials {
    line-height: 1;
    color: var(--color-text-on-accent);
    font-weight: var(--font-weight-semibold);
  }

  .mobile-drawer__profile-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-drawer__greeting {
    margin: 0;
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
  }

  .mobile-drawer__name {
    margin: 0;
    font-size: 15px;
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-drawer__email {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-drawer__settings {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background var(--dur-base) var(--ease-smooth),
      color var(--dur-base) var(--ease-smooth),
      border-color var(--dur-base) var(--ease-smooth);
  }
  .mobile-drawer__settings:hover,
  .mobile-drawer__settings:active {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    border-color: var(--color-accent-subtle);
  }
  .mobile-drawer__settings .material-icons-outlined {
    font-size: 20px;
    line-height: 1;
  }

  /* ===== Drawer grid (sections) ===== */
  .mobile-drawer__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .mobile-drawer__grid .sidebar-group {
    padding: var(--space-2);
    gap: 2px;
  }

  .mobile-drawer__grid .sidebar-group-title {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
  }

  /* Make the drawer title text breathe: lighter tracking, larger label */
  .mobile-drawer__grid .sidebar-group-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-semibold);
  }

  .mobile-drawer__grid .sidebar-link {
    padding: 12px var(--space-3);
    border-radius: var(--radius-md);
    min-height: 48px;
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    transition:
      background var(--dur-base) var(--ease-smooth),
      color var(--dur-base) var(--ease-smooth),
      border-color var(--dur-base) var(--ease-smooth);
  }
  .mobile-drawer__grid .sidebar-link:hover,
  .mobile-drawer__grid .sidebar-link:active {
    background: var(--color-bg);
    border-color: var(--border-subtle);
  }

  .mobile-drawer__grid .sidebar-link .label {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    /* Single-line labels: at 320-360px the drawer grid previously wrapped
       'Mock Tests' onto two ragged lines. Let the label take the remaining
       row width and ellipsize instead — full names still fit at 390px+. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .mobile-drawer__grid .sidebar-link .sidebar-icon {
    color: var(--color-text-muted);
    transition: color var(--dur-base) var(--ease-smooth);
  }

  .mobile-drawer__grid .sidebar-link {
    min-width: 0;
  }

  .mobile-drawer__grid .sidebar-link[aria-current="page"],
  .mobile-drawer__grid .sidebar-link.is-active {
    background: var(--color-accent-subtle);
    color: var(--color-accent-strong);
    border-color: transparent;
    font-weight: var(--font-weight-semibold);
  }
  .mobile-drawer__grid .sidebar-link[aria-current="page"] .sidebar-icon,
  .mobile-drawer__grid .sidebar-link.is-active .sidebar-icon {
    color: var(--color-accent-strong);
  }
  html[data-theme="dark"] .mobile-drawer__grid .sidebar-link[aria-current="page"],
  html[data-theme="dark"] .mobile-drawer__grid .sidebar-link.is-active {
    color: var(--color-blank-primary-text);
  }
  html[data-theme="dark"] .mobile-drawer__grid .sidebar-link[aria-current="page"] .sidebar-icon,
  html[data-theme="dark"] .mobile-drawer__grid .sidebar-link.is-active .sidebar-icon {
    color: var(--color-blank-primary-text);
  }

  /* ===== Logout button ===== */
  .mobile-drawer__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: 12px var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg-subtle);
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    text-decoration: none;
    min-height: 48px;
    border: 1px solid transparent;
    transition:
      background var(--dur-base) var(--ease-smooth),
      border-color var(--dur-base) var(--ease-smooth);
  }
  .mobile-drawer__logout:hover,
  .mobile-drawer__logout:active {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-bg);
  }
  .mobile-drawer__logout .material-icons-outlined {
    font-size: 18px;
    line-height: 1;
  }

  /* Prevent the page from scrolling under the drawer */
  body[data-drawer-open="true"] {
    overflow: hidden;
  }
}

/* Hide mobile bottom nav on laptop/desktop (screens >= 769px) */
@media (min-width: 769px) {
  #mobile-bottom-nav,
  #mobile-drawer {
    display: none !important;
  }
}

/* Pills (used for credentials) */
.pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  background: #f9fafb;
}
.pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tables */
.table-wrapper {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.table tbody td {
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--text);
}
.table tbody tr:hover td {
  background: var(--bg);
}
.table.compact thead th,
.table.compact tbody td {
  padding: 10px 12px;
}
.table thead th:first-child,
.table tbody td:first-child {
  padding-left: 20px;
}
.table thead th:last-child,
.table tbody td:last-child {
  padding-right: 20px;
}
.table a:not(.button):not(.action-btn):not(.table-action-btn) {
  /* color: var(--accent); */
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-base) var(--ease);
}


/* Table data cell classes for booking table */
.table-td-coach {
  font-weight: 600;
  font-size: 12px;
}
.table-td-date {
  font-size: 12px;
}
.table-td-date-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.table-td-date-main {
  font-size: 12px;
}
.table-td-date-time {
  font-size: 10px;
  color: var(--muted);
}
.table-td-timezone {
  font-size: 12px;
}
.table-td-actions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.table-td-action-button {
  padding: 4px 10px;
  font-size: 11px;
}
.table-td-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--muted);
  font-size: 12px;
}

/* Additional table data cell classes for admin tables */
.table-td-student {
  font-size: 12px;
}
.table-td-datetime {
  font-size: 12px;
}
.table-td-status {
  font-size: 12px;
}

/* Table data cell classes for catalog manage page */
.table-td-id {
  font-size: 12px;
  font-family: monospace;
}
.table-td-order {
  font-size: 12px;
  font-family: monospace;
}
.table-td-qtype {
  font-size: 12px;
  font-weight: 600;
  max-width: 180px;
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-td-family {
  font-size: 12px;
}
.table-td-test {
  font-size: 12px;
}
.table-td-section {
  font-size: 12px;
}
.table-td-prompt {
  font-size: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-td-skills {
  font-size: 12px;
  max-width: 250px;
  white-space: normal;
}
.table-td-options {
  font-size: 12px;
  font-family: monospace;
  text-align: center;
}
.table-td-answer {
  font-size: 12px;
  text-align: center;
}
.table-td-checkbox {
  width: 36px;
}

/* Icon buttons */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0 6px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.icon-button:hover {
  background: var(--bg);
}
html[data-theme="dark"] .icon-button:hover {
  background: var(--bg);
}
.icon-button.danger {
  color: var(--danger);
}
.icon-button.success {
  color: var(--accent);
}


/* Print styles */
@media print {
  .topbar {
    display: none !important;
  }
  .container {
    max-width: 100%;
    padding: 0;
  }
  .card {
    box-shadow: none;
    border: 1px solid var(--border-subtle);
  }
  .actions {
    display: none;
  }
}
/* Modal - Styles moved to components/modals.css */

.confirm-dialog {
  text-align: center;
  max-width: 400px;
}

.confirm-dialog-icon {
  margin-bottom: var(--space-4);
}

.confirm-dialog-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-2) 0;
}

.confirm-dialog-subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.5;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.confirm-dialog-field {
  margin-bottom: var(--space-4);
}

.confirm-dialog-field .profile-edit-input {
  text-align: center;
}

/* Question Detail Page Professional Styles */
.question-detail-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.question-detail-header {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-strong) 100%
  );
  padding: var(--space-4) var(--space-3);
  color: var(--text-on-accent);
}

.question-detail-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.question-detail-subtitle {
  font-size: 0.875rem;
  opacity: 0.9;
  margin: 0;
}

.question-detail-form {
  padding: var(--space-4) var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-input,
.form-textarea {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background: var(--surface);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.form-message {
  min-height: 20px;
  margin-top: var(--space-2);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-strong) 100%
  );
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  color: white;
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
}

.charlie-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--accent-contrast, var(--color-accent-contrast));
  border: 1px solid var(--border-subtle);
  font-size: 20px;
  line-height: 1;
}

.btn-success {
  background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
  color: white;
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 178, 172, 0.3);
}

.btn-icon {
  font-size: 1rem;
}

/* Section Styles */
.skills-section,
.options-section,
.answer-section {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid #e2e8f0;
}

.skills-section:last-child,
.options-section:last-child,
.answer-section:last-child {
  border-bottom: none;
}

.section-header {
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  justify-content: center;
}

.section-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* Skills Grid */
.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #f59e0b;
}

/* Options Grid */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.add-option-form {
  background: var(--bg);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.option-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.existing-options {
  background: var(--surface);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.options-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 var(--space-2) 0;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.option-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.option-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-strong) 100%
  );
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
}

.option-text {
  font-size: 0.875rem;
  color: var(--text);
  flex: 1;
}

/* Answer Form */
.answer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-help {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: var(--space-1);
}

/* Empty States */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: #9ca3af;
}

.empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

.empty-text {
  font-size: 0.875rem;
  margin: 0;
}

section.page-add-question .card,
section.page-add-question + section .card {
  max-width: 100% !important;
  width: 100% !important;
  padding: var(--space-5) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

section.page-add-question + section .card > form.grid.three {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

section.page-add-question + section .card > form.grid.two {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Make filter form use auto-fit grid like catalog manager for full width - override inline styles */
section:has(> .card > form.grid.three) .card > form.grid.three[style*="gap"] {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: var(--space-5) !important;
  margin-bottom: var(--space-4) !important;
}

/* Make post form use auto-fit grid like catalog manager - override inline styles */
section:has(> .card > form.grid.three) .card > form.grid.two[style*="gap"] {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: var(--space-5) !important;
}

/* Prevent forms from shrinking */
section:has(> .card > form.grid.three) .card > form.grid.three,
section:has(> .card > form.grid.three) .card > form.grid.two {
  width: 100% !important;
  min-width: 100% !important;
}

/* Responsive Design for Question Detail */
@media (max-width: 1024px) {
  .form-row,
  .options-grid {
    grid-template-columns: 1fr;
  }

  .question-detail-header {
    padding: var(--space-3) var(--space-2);
  }

  .question-detail-form,
  .skills-section,
  .options-section,
  .answer-section {
    padding: var(--space-3) var(--space-2);
  }
}

/* AI-NOTE: Student Dashboard - Modern Design */
/* AI-NOTE: Complete redesign with full-width stats, 2-column grid, better visual hierarchy */

.dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-6);
  align-items: stretch;
}

.dashboard-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dashboard-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}

.dashboard-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dashboard-hero-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
}

.hero-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero-plan-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.dashboard-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.dashboard-main .span-2 {
  grid-column: 1 / -1;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-4);
}

.snapshot-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg);
}

.snapshot-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.snapshot-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

.snapshot-note {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--text);
}

.snapshot-note.muted {
  color: var(--muted);
}

.section-score-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.section-score {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  font-size: 14px;
}

.section-score-value {
  font-weight: 700;
  color: var(--accent);
}

.section-score-date {
  font-size: 12px;
  color: var(--muted);
}

.support-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.support-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.support-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.support-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.support-divider {
  height: 1px;
  background: var(--border-subtle);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.resource-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg);
}

.resource-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.analytics-section {
  margin-top: var(--space-6);
}

.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.analytics-header h2 {
  margin: 0 0 var(--space-1);
}

.analytics-tabs {
  margin-top: var(--space-4);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tabs input {
  display: none;
}

.tabs label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.tabs input:checked + label {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.tab-panels {
  width: 100%;
  margin-top: var(--space-4);
}

.tab-panel {
  display: none;
  width: 100%;
}

#analytics-overview:checked ~ .tab-panels .panel-overview,
#analytics-skills:checked ~ .tab-panels .panel-skills,
#analytics-types:checked ~ .tab-panels .panel-types,
#analytics-pacing:checked ~ .tab-panels .panel-pacing,
#analytics-tags:checked ~ .tab-panels .panel-tags {
  display: grid;
  gap: var(--space-4);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  min-height: 88px;
}

.hero-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.hero-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.dashboard .btn-primary,
.dashboard .btn-secondary {
  min-height: 44px;
}

.dashboard .card,
.dashboard .btn-primary,
.dashboard .btn-secondary,
.dashboard .link-arrow {
  transition: all var(--dur-base) var(--ease);
}

.dashboard .card-title .material-icons-outlined {
  color: var(--muted);
}

.dashboard .result-score {
  color: var(--text);
}

.dashboard .link-arrow {
  color: var(--text);
}

.dashboard .link-arrow:hover {
  color: var(--muted);
}

/* Dashboard Header - Title and Plan Selector */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.dashboard-title h1 {
  margin: 0 0 var(--space-2);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dashboard-title p {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
  font-weight: 400;
}

.plan-selector {
  display: flex;
  align-items: center;
}

.plan-selector select {
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-smooth) var(--ease-smooth);
}

.dashboard-hero .plan-selector select {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 1024px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .dashboard-main {
    grid-template-columns: 1fr;
  }

  .resources-grid {
    grid-template-columns: 1fr;
  }

  .snapshot-grid {
    grid-template-columns: 1fr;
  }
}

/* V3.5b: hover/focus styles now use brand tokens (see .plan-selector select:hover below) */

.plan-selector .badge {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 14px;
  /* V3.5b: colour now uses brand tokens (see .plan-selector .badge below) */
}

/* V3.5b: Plan selector — keep the simple original, just add colour.
   The .plan-selector select gets the tenant's brand-accent for border
   and text. The .badge gets brand-accent background too. Functional
   dropdown, tenant-aware colours. */
.plan-selector select {
  border-color: var(--brand-accent, var(--accent));
  color: var(--brand-accent, var(--accent));
  font-weight: 700;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.plan-selector select:hover,
.plan-selector select:focus {
  border-color: var(--accent-strong, var(--color-accent-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, var(--accent)) 16%, transparent);
  outline: none;
}

.plan-selector .badge {
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 12%, white);
  color: var(--brand-accent, var(--accent));
  font-weight: 700;
}

/* Stats Row - Full-width stat cards */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.stat-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  font-size: 24px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Dashboard Grid - 2-column layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* On larger screens, create 3-column first row */
@media (min-width: 1025px) {
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "todays booking target"
      "social live courses"
      "progress results results";
  }

  .dashboard-grid .todays-plan-card {
    grid-area: todays;
  }

  .dashboard-grid .booking-card {
    grid-area: booking;
  }

  .dashboard-grid .target-card {
    grid-area: target;
  }

  .dashboard-grid .similar-students-card {
    grid-area: social;
  }

  .dashboard-grid .live-class-card {
    grid-area: live;
  }

  .dashboard-grid .top-courses-card {
    grid-area: courses;
  }

  .dashboard-grid .progress-card {
    grid-area: progress;
  }

  .dashboard-grid .results-card {
    grid-area: results;
  }

  .dashboard-grid .next-level-card {
    grid-column: 1 / -1;
  }
}

/* Card Base Styles */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.dashboard .card {
  padding: 0;
  overflow: hidden;
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.dashboard .card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.dashboard .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
}

.dashboard .card-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dashboard .card-title .material-icons-outlined {
  font-size: 22px;
  color: var(--accent);
}

.dashboard .card-title h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.dashboard .card-badge {
  display: flex;
  align-items: center;
}

.dashboard .card-badge .badge {
  padding: var(--space-1) var(--space-2);
  font-size: 12px;
  font-weight: 500;
}

.dashboard .card-body {
  padding: var(--space-6);
}

.dashboard-grid .todays-plan-card > .card-body,
.dashboard-grid .booking-card > .card-body,
.dashboard-grid .target-card > .card-body,
.dashboard-grid .similar-students-card > .card-body,
.dashboard-grid .live-class-card > .card-body,
.dashboard-grid .top-courses-card > .card-body {
  padding: calc(var(--space-6) / 2);
}

.link-arrow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-smooth) var(--ease-smooth);
}

.link-arrow:hover {
  color: var(--accent-dark);
}

/* Today's Plan Card */
.todays-plan-card {
  grid-column: auto;
}

.weak-section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.weak-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.weak-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.weak-tag {
  padding: var(--space-1) var(--space-2);
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
}

/* Weekly Plan Card */
.weekly-plan-card {
  grid-column: span 2;
}

.weekly-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--radius);
}

.weekly-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.weekly-icon {
  font-size: 24px;
}

.weekly-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.weekly-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

/* Booking Card */
.booking-card {
  grid-column: auto;
}

.booking-text {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Urgency Badge for Booking Card */
.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--error-bg);
  color: var(--error);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
}

/* Next Level Card */
.next-level-card {
  grid-column: auto;
  border-left: 4px solid var(--brand-accent);
}

.next-level-text {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

/* Similar Students Card */
.similar-students-card {
  background: var(--neutral-bg);
}

.similar-students-text {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

/* Milestone Toast */
.milestone-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  background: var(--brand-accent);
  color: white;
  border-radius: var(--radius-md);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.milestone-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 520px;
}

.milestone-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.milestone-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.milestone-text strong {
  font-size: 15px;
  font-weight: 700;
}

.milestone-text p {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}

.milestone-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.15s ease;
}

.milestone-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.milestone-content .charlie-face {
  font-size: 20px;
}

.confetti {
  position: fixed;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  animation: ecConfettiFall 2.2s ease-in forwards;
  z-index: 1500;
  pointer-events: none;
}

@keyframes ecConfettiFall {
  to {
    transform: translateY(105vh) rotate(720deg);
    opacity: 0;
  }
}

.next-action-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-2) 0 var(--space-4);
}

.next-action-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
}

.next-action-text {
  flex: 1;
  font-size: 14px;
  color: var(--text);
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary,
.btn-small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-smooth) var(--ease-smooth);
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(47, 111, 237, 0.25);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
  background: var(--border-subtle);
  border-color: var(--border);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-small {
  padding: var(--space-1) var(--space-3);
  font-size: 13px;
  background: var(--accent);
  color: white;
}

.btn-small:hover {
  background: var(--accent-dark);
}

.btn-small .material-icons-outlined {
  font-size: 16px;
}

/* Progress Card */
.progress-card {
  grid-column: auto;
}

/* Results Card */
.results-card {
  grid-column: auto;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg);
  border-radius: var(--radius);
  transition: background var(--dur-smooth) var(--ease-smooth);
}

.result-item:hover {
  background: var(--border-subtle);
}

.result-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.result-label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.result-score {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent);
}

.result-sparkline {
  flex-shrink: 0;
  width: 60px;
  height: 24px;
  display: block;
}

.result-date {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
}

.empty-state .material-icons-outlined {
  font-size: 48px;
  color: var(--border);
}

.empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.weak-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Progress Summary - Sparkline and Last Results cards */
.progress-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.progress-summary .card {
  margin: 0;
}

.progress-summary .card p {
  margin: var(--space-1) 0;
  font-size: 14px;
  color: var(--text);
}

.progress-summary .card strong {
  color: var(--accent);
}

.skills-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.radar-chart canvas {
  width: 100%;
  height: 220px;
}

.skills-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.heatmap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.type-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: var(--space-3);
}
.type-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg);
  min-height: 110px;
}
.type-card.acc-low {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}
.type-card.acc-mid {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.35);
}
.type-card.acc-high {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}
.type-card .type-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.type-card .type-acc {
  font-size: 13px;
  font-weight: 600;
}
.type-card.acc-low .type-acc {
  color: #ef4444;
}
.type-card.acc-mid .type-acc {
  color: #f59e0b;
}
.type-card.acc-high .type-acc {
  color: #10b981;
}
.type-card .type-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.type-card .type-meta .micro-pill {
  background: transparent;
  border-color: var(--border-subtle);
}
.type-card .type-actions {
  display: flex;
  align-items: center;
}
.type-card .type-actions .link-arrow {
  font-size: 13px;
}

@media (max-width: 1280px) {
  .type-heatmap-grid {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }
}
@media (max-width: 960px) {
  .type-heatmap-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
@media (max-width: 640px) {
  .type-heatmap-grid {
    grid-template-columns: 1fr;
  }
}

.heatmap-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.heatmap-item.acc-low .heatmap-value {
  color: #ef4444;
}
.heatmap-item.acc-mid .heatmap-value {
  color: #f59e0b;
}
.heatmap-item.acc-high .heatmap-value {
  color: #10b981;
}

.heatmap-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.heatmap-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.heatcells {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.heatcell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--border-subtle);
}

.heatcell.on {
  background: var(--accent);
}
.heatmap-item.acc-low .heatcell.on {
  background: #ef4444;
}
.heatmap-item.acc-mid .heatcell.on {
  background: #f59e0b;
}
.heatmap-item.acc-high .heatcell.on {
  background: #10b981;
}

.heatmap-item .link-arrow {
  margin-left: auto;
}

.heatmap-legend {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.legend-label {
  font-size: 12px;
  color: var(--muted);
}

.pacing-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.pacing-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.pacing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.pacing-item.pace-fast {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.07);
}
.pacing-item.pace-medium {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.07);
}
.pacing-item.pace-slow {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.07);
}

.trends-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

/* Activity Heatmap */
.activity-heatmap {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  gap: 3px;
  margin-bottom: var(--space-3);
}

.act-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  cursor: default;
}

.act-empty {
  background: #e2e8f0;
}
.act-low {
  background: #bbf7d0;
}
.act-mid {
  background: #34d399;
}
.act-high {
  background: #059669;
}

.activity-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: var(--space-2);
}

.act-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.act-legend-item .act-cell {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.trend-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.trend-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trend-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.trend-accuracy {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.trend-meta {
  display: flex;
  gap: var(--space-2);
}

.micro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.target-set {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.target-bands {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.band-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.band-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
}

.band-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.band-value.target {
  color: var(--accent);
}

.band-value.positive {
  color: #10b981;
}

.band-value.warning {
  color: #f59e0b;
}

.band-value.negative {
  color: #ef4444;
}

.band-value.high {
  color: #10b981;
}

.band-value.medium {
  color: #f59e0b;
}

.band-value.low {
  color: #9ca3af;
}

.target-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.due-today-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.due-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.due-count {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.target-change summary {
  list-style: none;
}
.target-change[open] summary .material-icons-outlined {
  transform: rotate(180deg);
}
/* Insight Hook - Top recommendation pill with collapsible details */
.insight-hook {
  margin-top: var(--space-2);
}

.insight-pill {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(
    135deg,
    var(--accent-contrast) 0%,
    rgba(238, 242, 255, 0.5) 100%
  );
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-smooth) var(--ease-smooth);
  user-select: none;
}

.insight-pill:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.insight-pill:active {
  transform: translateY(0);
}

.insight-pill .material-icons-outlined {
  font-size: 24px;
  color: var(--accent);
}

/* Responsive override: collapse dashboard grid to single column on mobile */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.insight-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insight-text strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.insight-text .muted {
  font-size: 0.875rem;
  color: var(--muted);
}

.insight-pill .expand-icon {
  transition: transform var(--dur-smooth) var(--ease-smooth);
  color: var(--muted);
}

.insight-pill.expanded .expand-icon {
  transform: rotate(180deg);
}

.insight-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-smooth) var(--ease-smooth);
}

.insight-pill.expanded + .insight-details {
  max-height: 1000px;
  margin-top: var(--space-4);
}

/* Insights Section - Collapsible detailed analytics */
.insights-section {
  margin-top: var(--space-3);
}

.insights-section summary {
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  padding: var(--space-4);
  list-style: none;
  user-select: none;
  transition: color var(--dur-smooth) var(--ease-smooth);
  letter-spacing: -0.01em;
}

.insights-section summary:hover {
  color: var(--accent);
}

.insights-section summary::-webkit-details-marker {
  display: none;
}

.insights-content {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Pacing Card */
.pacing-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pacing-summary .pacing-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pacing-summary .pacing-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.pacing-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.pacing-legend .legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pacing-legend .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.pacing-legend .legend-label {
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 500;
}

/* Responsive Dashboard */
@media (max-width: 768px) {
  .top-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-strip-right {
    width: 100%;
    justify-content: space-between;
  }

  .quick-stats {
    width: 100%;
  }

  .stat-pill {
    flex: 1;
    justify-content: center;
  }

  .dashboard-grid,
  .primary-cta,
  .progress-summary {
    grid-template-columns: 1fr;
  }
  .skills-layout {
    grid-template-columns: 1fr;
  }
  .radar-chart canvas {
    height: 180px;
  }
  .stats-row {
    grid-template-columns: 1fr;
  }
  .pacing-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .pacing-legend {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .app-shell.has-sidebar {
    display: flex;
    flex-direction: column;
  }
  body.sidebar-collapsed .app-shell.has-sidebar {
    display: flex;
    flex-direction: column;
  }
  .app-shell.has-sidebar > .container {
    grid-column: 1 / -1;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
  }
  body.sidebar-collapsed .app-shell.has-sidebar > .container {
    grid-column: 1 / -1;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
  }

  .app-shell.has-sidebar .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--surface);
  }
  html[data-theme="dark"] .app-shell.has-sidebar .sidebar {
    background: rgba(15, 23, 42, 0.98);
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar {
    transform: translateX(0);
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 1000;
    pointer-events: none;
    transition: background 0.3s ease;
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar-overlay {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
  }
  html:has(.sidebar-toggle-checkbox:checked) {
    overflow: hidden;
  }
  html:has(.sidebar-toggle-checkbox:checked) body {
    overflow: hidden;
  }

  body[data-portal="student"] main.container {
    padding-bottom: 96px;
  }

  .sp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sp-actions .button {
    width: 100%;
  }

  #attempt-history-fragment .actions,
  #student-questions-filters .actions {
    flex-direction: column;
    align-items: stretch;
  }

  #attempt-history-fragment .actions .button,
  #student-questions-filters .actions .button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .app-shell.has-sidebar {
    display: flex;
    flex-direction: column;
  }
  body.sidebar-collapsed .app-shell.has-sidebar {
    display: flex;
    flex-direction: column;
  }
  .app-shell.has-sidebar > .container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
  }
  body.sidebar-collapsed .app-shell.has-sidebar > .container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
  }
  .app-shell.has-sidebar .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: var(--surface);
  }
  html[data-theme="dark"] .app-shell.has-sidebar .sidebar {
    background: rgba(15, 23, 42, 0.98);
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar {
    transform: translateX(0);
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 1000;
    pointer-events: none;
    transition: background 0.3s ease;
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar-overlay {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
  }
  html:has(.sidebar-toggle-checkbox:checked) {
    overflow: hidden;
  }
  html:has(.sidebar-toggle-checkbox:checked) body {
    overflow: hidden;
  }
}

/* Shadcn Sonner Toast Styles */
.sonner-toaster {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; /* Allow clicking through the container area */
  align-items: center;
}

.sonner-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  min-width: 320px;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
  opacity: 0;
  /* Enter animation: slide down and fade in */
  /* Exit animation: fade out after 4s delay */
  animation:
    sonner-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    sonner-exit 0.5s ease 4s forwards;
}

.sonner-toast:hover {
  /* Pause exit animation on hover */
  animation-play-state: paused;
}

@keyframes sonner-enter {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sonner-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.sonner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.sonner-icon .material-icons-outlined {
  font-size: 20px;
}

.sonner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sonner-message {
  font-size: 0.875rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  word-break: break-word;
  word-wrap: break-word;
}

/* Toast content wrapper */
.sonner-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Toast container */
.sonner-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  word-break: break-word;
}

.sonner-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  margin-top: 2px;
}

.sonner-close:hover {
  opacity: 1;
  color: var(--text);
}

.sonner-close .material-icons-outlined {
  font-size: 18px;
}

@media (max-width: 640px) {
  .sonner-toaster {
    top: 16px;
    bottom: auto;
    right: 16px;
    left: 16px;
    transform: none;
    align-items: center;
  }

  .sonner-toast {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================================
   GLOBAL BORDER-RADIUS NORMALIZATION
   ============================================================================
   Override hardcoded border-radius values in templates to use curved aesthetic.
   This ensures consistent slightly-curved corners across all UI elements.
*/

/* All buttons and button-like elements - very subtle curve (8px) */
button,
.btn,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[role="button"] {
  border-radius: var(--radius-md, 8px) !important;
}

/* All form elements and cards - very subtle curve (8px) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select,
.card,
.section-card,
.modal,
.modal-content,
.dropdown,
.popover,
/* Public marketing/landing cards keep their editorial radius —
   exempted from the app-wide 8px card curve (see landing-pages.css). */
html:not(.landing-page-root) [class*="card"],
html:not(.landing-page-root) [class*="form"],
html:not(.landing-page-root) [class*="modal"] {
  border-radius: var(--radius-md, 8px) !important;
}

/* Override hardcoded 8px border-radius → keep at 8px (--radius-md) */
[style*="border-radius: 8px"] {
  border-radius: var(--radius-md, 8px) !important;
}

/* Override hardcoded 6px border-radius → 8px for better consistency */
[style*="border-radius: 6px"] {
  border-radius: var(--radius-md, 8px) !important;
}

/* Inline button styles with old radius values */
.btn[style*="border-radius: 8px"],
button[style*="border-radius: 8px"],
[class*="btn"][style*="border-radius: 8px"] {
  border-radius: var(--radius-md, 8px) !important;
}

/* ============================================
   QUESTION FORMS & PLAYERS - Design System
   ============================================
   Safe, non-breaking utility classes for question forms and player templates
   These classes provide design system alignment without requiring template changes
   Preserve all form logic and question structure - only modernize styling
 */

/* Field Group Container - Flex column with proper spacing */
.field-group-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 12px);
}

/* Full-width field group wrapper */
.field-group-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 24px);
}

/* Help text with consistent styling */
.help-text-form {
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text-muted, #6b7280);
  margin-top: var(--space-sm, 6px);
  line-height: 1.5;
}

/* Audio current/display wrapper */
.audio-info-box {
  margin-top: var(--space-md, 16px);
  display: grid;
  gap: var(--space-sm, 6px);
}

/* Audio label - small uppercase */
.audio-label-small {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b7280);
}

/* Audio player styling */
.audio-player-form {
  width: 100%;
  border-radius: var(--radius-md, 8px);
}

/* Audio download link */
.audio-download-link {
  font-size: 12px;
  color: var(--color-accent, var(--color-accent));
  text-decoration: underline;
  transition: color var(--transition-fast, 0.15s);
}

.audio-download-link:hover {
  color: var(--color-accent-strong, var(--color-accent-strong));
  text-decoration: none;
}

/* MCQ/Options Grid Container */
.options-grid-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 12px);
}

/* Single option row - checkbox/radio + input */
.option-row-flex {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
}

/* Option radio/checkbox sizing */
.option-input-radio,
.option-input-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Option text input - flex 1 for growth */
.option-text-input {
  flex: 1;
  width: 100%;
}

/* Two-column grid for metadata fields */
.field-group-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md, 12px);
}

/* Three-column responsive grid */
.field-group-grid-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md, 12px);
}

/* Table editor container */
.table-editor-box {
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-md, 12px);
  overflow-x: auto;
  background: var(--color-surface, #ffffff);
}

/* Table editor table styling */
.table-editor-form {
  width: 100%;
  border-collapse: collapse;
}

/* Button bar for table row operations */
.table-button-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 10px);
  margin-bottom: var(--space-md, 10px);
}

/* Responsive adjustments for question forms */
@media (max-width: 768px) {
  .field-group-grid-2col {
    grid-template-columns: 1fr;
  }
  .field-group-grid-3col {
    grid-template-columns: 1fr 1fr;
  }
  .option-row-flex {
    gap: var(--space-sm, 8px);
  }
}

@media (max-width: 480px) {
  .field-group-grid-3col {
    grid-template-columns: 1fr;
  }
  .table-editor-box {
    padding: var(--space-sm, 8px);
    font-size: 13px;
  }
}

/* ============================================================================
   CHECKOUT AND SUBSCRIPTION MODULE
   ============================================================================ */

.subscription-page {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.subscription-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.subscription-header .material-icons-outlined {
  font-size: 48px;
  color: var(--color-accent);
  background: var(--color-accent-contrast);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
}

.subscription-header h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.subscription-header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.subscription-card {
  border: none;
  background: transparent;
  box-shadow: none;
  gap: var(--space-6);
}

.subscription-card .card-header {
  padding: 0;
  border: none;
  background: transparent;
}

.subscription-card .card-title h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-6);
  padding: 0;
}

.family-card-title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
}

.variant-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.variant-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  transition: all var(--duration-base) var(--easing-smooth);
}

.variant-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.variant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.variant-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

/* Badge styles moved to components/badges.css
.badge {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
*/

.variant-note,
.price-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.price-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg);
  color: var(--color-text);
  transition: all var(--duration-fast) var(--easing-smooth);
  cursor: pointer;
  text-align: left;
}

.price-button:hover {
  background: var(--color-accent-contrast);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.price-button-title {
  font-weight: var(--font-weight-medium);
}

.price-button-amount {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

/* ============================================================================
   SUBSCRIPTION PLAN CARDS — card-style grid used on the student
   /checkout/subscription/ page.
   ============================================================================ */

.subscription-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.subscription-header__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-contrast);
  color: var(--color-accent);
}

.subscription-header__body {
  flex: 1;
}

.subscription-header__body h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.subscription-header__body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.subscription-header__actions {
  flex-shrink: 0;
}

.family-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.family-section__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Keep checkout catalog cards in fixed-size columns. A single product must not
   expand to consume the full row. */
.subscription-page .plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1200px) {
  .subscription-page .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .subscription-page .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .subscription-page .plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--easing-smooth),
              box-shadow var(--duration-base) var(--easing-smooth);
}

.plan-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.plan-card--default {
  border-color: var(--color-accent);
  box-shadow: 0 6px 24px -8px var(--color-accent);
}

.plan-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: linear-gradient(135deg, #f59f00, #f76707);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(247, 103, 7, 0.4);
  white-space: nowrap;
}

.plan-card__badge svg {
  fill: #fff;
}

.plan-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 4px;
  row-gap: 8px;
  margin-top: var(--space-3);
  color: var(--color-text);
}

.plan-card__currency {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

.plan-card__amount {
  flex: 0 0 auto;
  font-size: 44px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text);
}

.plan-card__suffix {
  flex: 0 0 auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

/* Auto-discount preview: the pre-discount amount struck through next
   to the effective amount, plus a small savings pill underneath. */
.plan-card__amount--was {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.plan-card__promo {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-success, #059669) 14%, transparent);
  color: var(--color-success, #059669);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.plan-card__default-price {
  display: inline-flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 5px 8px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.plan-card__default-price span {
  font-weight: var(--font-weight-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.plan-card__default-price strong {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.plan-card__duration {
  margin-top: var(--space-2);
  display: inline-block;
  padding: 4px 14px;
  background: #e7f5ff;
  color: #1971c2;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.plan-card__name {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-card__divider {
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  margin: var(--space-3) 0 var(--space-4);
  border-radius: 2px;
}

.plan-card__features {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  /* Push the CTA (and its note) to the bottom of the card when this card's
     content is shorter than its row-mates. The <li>s keep their natural
     height; empty space accumulates below them inside the list, the
     button sits at the bottom of the card. */
  flex: 1 1 auto;
}

.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  /* Match the card title color (--color-text) so the feature list
     reads with the same contrast as the product name, not muted grey. */
  color: var(--color-text);
  line-height: 1.4;
}

.plan-card__check {
  flex-shrink: 0;
  color: var(--color-accent);
  fill: var(--color-accent);
  margin-top: 2px;
}

.plan-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 20px;
  background: #ff6b6b;
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(255, 107, 107, 0.6);
  transition: background var(--duration-fast) var(--easing-smooth),
              transform var(--duration-fast) var(--easing-smooth);
}

.plan-card__cta:hover {
  background: #fa5252;
  transform: translateY(-1px);
}

.plan-card__cta--active {
  background: var(--color-success, #51cf66);
  cursor: default;
  box-shadow: none;
}

.plan-card__cta--active:hover {
  background: var(--color-success, #51cf66);
  transform: none;
}

.plan-card__cta--unavailable,
.plan-card__cta--unavailable:hover {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Pending-order CTA (2026-09-16): routes the buyer back to their one
   live unfulfilled order (resume checkout or view under-review order)
   instead of allowing a duplicate purchase. */
.plan-card__cta--pending {
  background: var(--color-accent, #ff6b6b);
  color: #fff;
  text-decoration: none;
}

.plan-card__cta--pending:hover {
  background: var(--color-accent, #ff6b6b);
  filter: brightness(0.95);
}

.plan-card__form {
  width: 100%;
  margin: 0;
}

/* Credit-pack forms (coaching_credits / mock_test_credits): the
   inline stepper + Buy button are centered horizontally inside the
   card instead of stretching full-width. Added 2026-09-18 alongside
   the qty-stepper rollout. */
.plan-card__form--centered {
  justify-content: center;
}

/* Quantity stepper (shared utility — 2026-09-18).
   Inline on credit-pack cards (coaching_credits, mock_test_credits)
   inside a .plan-card__form. The form GETs the checkout start URL
   with ?qty=N; the JS in static/js/qty-stepper.js handles the +/- buttons
   and clamps to the input's min/max. */
.qty-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qty-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: var(--color-surface);
}

.qty-step__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  border-left: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
}

.qty-step__btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.qty-step__input {
  width: 42px;
  height: 30px;
  text-align: center;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  -moz-appearance: textfield;
}

.qty-step__input::-webkit-outer-spin-button,
.qty-step__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.plan-card__note {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.4;
}

.plan-card__status {
  display: block;
  text-align: center;
  margin-bottom: var(--space-3, 12px);
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.plan-card__status--current {
  color: #237a35;
}

.plan-card__status--current svg {
  fill: #237a35;
  vertical-align: -2px;
  margin-right: 3px;
}

.plan-card__status--owned {
  color: var(--color-text-muted, #868e96);
}

.plan-card__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 6px;
}

.plan-card__title-row .plan-card__name {
  margin: var(--space-4) 0 0;
}


.plan-card--empty {
  border-style: dashed;
  opacity: 0.85;
}

.empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-xl);
}

@media (max-width: 768px) {
  .subscription-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .subscription-actions {
    margin-left: 0 !important;
    margin-top: var(--space-4);
    width: 100%;
  }

  .subscription-actions .button {
    width: 100%;
  }

  .family-grid {
    grid-template-columns: 1fr;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .subscription-header__actions {
    width: 100%;
  }
}

/* Checkout Payment Page Styles */
.checkout-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.checkout-header h1 {
  margin: 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.checkout-steps {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
}

.checkout-step {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.checkout-step.active {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1024px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
}

.checkout-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.checkout-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: 100px;
}

.summary-card .price-total {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

/* Admin checkout — three-section layout (Review / Payment / Confirm) */
/* The section <div>s are direct children, but the three section cards are
   wrapped in a <form> for submission. Use a sibling-gap technique via
   descendant selectors so the spacing works regardless of wrapper. */
.checkout-admin-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* Admin branch of the checkout page: the breadcrumb + page header now
   live OUTSIDE the container (matching admin_order_new.html), so the
   container's customer gutters — wide horizontal padding and the big
   top inset — are reset here. Only vertical rhythm remains, tuned so
   the steps row sits close under the page header and the first card
   follows the steps without a big gap. */
.checkout-container--admin {
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: var(--space-3);
}
.checkout-container--admin .checkout-steps {
  margin-bottom: 0;
  padding-bottom: var(--space-2);
}
.checkout-container--admin .checkout-admin-sections {
  gap: var(--space-4);
}
.checkout-container--admin .checkout-admin-sections .card {
  margin-bottom: var(--space-4);
}
.admin-context-bar__email {
  color: var(--color-text-muted, var(--muted));
  font-weight: 400;
}
/* Every .card inside .checkout-admin-sections gets a bottom margin; the
   :last-child rule resets it. This catches both direct children
   (.admin-context-bar, .admin-error-card) and cards nested in <form>. */
.checkout-admin-sections .card {
  margin-bottom: var(--space-5);
}
.checkout-admin-sections .card:last-child {
  margin-bottom: 0;
}

.admin-context-bar {
  border-left: 4px solid var(--color-accent, var(--accent));
}
.admin-context-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-context-bar__label {
  font-weight: 600;
  font-size: 0.95rem;
}
.admin-context-bar__value {
  font-size: 0.9rem;
  color: var(--color-text-muted, var(--muted));
}

.admin-error-card {
  border-left: 4px solid var(--color-danger);
}
.admin-error-card__inner {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-danger);
  font-weight: 500;
}
/* Info-blue variant of the error card for the admin-order guard banner:
   ownership/pending warnings + informational notes (country mismatch,
   pass queueing). Not an error — the order can still proceed (warnings
   gate on the override_ack checkbox). Uses the standard info accent so
   it reads "heads up, check this" rather than a warning. Tinted body
   (not just a left border) makes the prompt visible at a glance. */
/* Selector `.card.admin-warn-card` (matches the actual markup
   `class="card admin-warn-card"`) so specificity beats the global
   `.card` background — same reason admin-error-card works fine. */
.admin-warn-card,
.card.admin-warn-card {
  border-left: 4px solid var(--color-info, #2563eb);
  /* Soft info-blue wash using the system var(--color-accent-contrast) token; falls back to
     a 12% opacity of the info accent so the banner is recognizable
     even when the design tokens are unstyled. */
  background: var(--color-bg-info, var(--color-accent-contrast));
}
.admin-warn-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--color-info, #2563eb);
}
.admin-warn-card__list,
.admin-warn-card__notes {
  margin: var(--space-2) 0 0 0;
  padding: 0;
  list-style: none;
}
.admin-warn-card__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: 0.9rem;
  line-height: 1.5;
}
.admin-warn-card__list li + li {
  margin-top: var(--space-1);
}
.admin-warn-card__list li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-info, #2563eb);
}
.admin-warn-card__notes li {
  position: relative;
  padding-left: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted, var(--muted));
}
.admin-warn-card__notes li + li {
  margin-top: var(--space-1);
}
.admin-warn-card__notes li::before {
  content: "i";
  position: absolute;
  left: 0;
  top: 0;
  font-style: italic;
  font-weight: 600;
  color: var(--color-text-muted, var(--muted));
}

.checkout-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.checkout-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.checkout-section__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-accent, var(--accent));
  color: var(--color-text-on-accent, var(--text-on-accent));
  font-weight: 700;
  font-size: 0.875rem;
}
.checkout-section__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}
.checkout-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.review-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 2px solid var(--color-border-subtle);
}
.review-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-totals__row--coupon {
  color: var(--color-accent);
  font-weight: 500;
  padding: var(--space-1);
  background: var(--color-accent-contrast);
  border-radius: var(--radius);
}
.review-totals__row--total {
  font-weight: 600;
  padding-top: var(--space-1);
}
.review-totals__row--total .price-total {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent);
}
/* ── Admin manual-order credits panel (2026-09-28) ──
   Lets a tenant admin apply the student's credit pool toward a manual
   order before the cash leg. Sits in the Review section under the
   totals; the payment amount input then bounds to the remainder. */
.admin-credits-panel {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.admin-credits-panel--empty {
  background: var(--color-warning-bg-subtle);
  border-color: var(--color-warning);
}
.admin-credits-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--color-text);
}
.admin-credits-panel__title {
  font-weight: 600;
}
.admin-credits-panel__balance {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.admin-credits-panel__sep {
  color: var(--color-border-subtle);
}
.admin-credits-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.admin-credits-panel__form input {
  max-width: 200px;
}
.review-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.coupon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}
/* Admin payment-section required marker (2026-09-22): same signal the
   Create Order form uses (`.form-required`), scoped to this page's
   payment section so it can be toggled per payment source by the page
   JS. Danger-red reads instantly as "fill this in". */
.req-star {
  color: var(--color-danger);
  font-weight: 700;
}
/* Apply Coupon: solid accent fill (was .ghost — the transparent ghost
   button didn't read as clickable next to the coupon input). Uses the
   same solid-fill recipe as the primary submit (accent-button + white
   text), no gradient, no hover lift. */
.checkout-admin-sections .coupon-row__apply,
.coupon-row .coupon-row__apply {
  background: var(--accent-button, var(--color-accent));
  color: var(--text-on-accent, #fff);
  border: none;
  box-shadow: none;
  min-height: 44px;
}
.coupon-row .coupon-row__apply:hover {
  filter: brightness(1.08);
  transform: none;
}
/* Admin checkout page header (2026-09-22): aligns the Record Payment
   page with the other admin checkout pages (breadcrumb + title row +
   back action) instead of the customer "Checkout" marketing header. */
.admin-checkout-header__sub {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted, var(--muted));
}

.confirm-recap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}
.confirm-recap__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.confirm-recap__row:last-child {
  border-bottom: none;
}
.confirm-recap__row dt {
  font-weight: 500;
  color: var(--color-text-muted, var(--muted));
  margin: 0;
}
.confirm-recap__row dd {
  margin: 0;
  font-weight: 500;
  word-break: break-word;
}
.confirm-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.order-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.order-item:last-child {
  border-bottom: none;
}

.payment-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

/* ============================================================================
   TEXT TRUNCATION UTILITIES
   ============================================================================ */

/* Single line truncation with ellipsis */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Character-based truncation - limits to specified number of characters */
.text-truncate-10 {
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.text-truncate-15 {
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.text-truncate-20 {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.text-truncate-25 {
  max-width: 25ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.text-truncate-30 {
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.text-truncate-35 {
  max-width: 35ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.text-truncate-40 {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

/* Two line truncation */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Three line truncation */
.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flexible truncation - grow to fill space but truncate if needed */
.text-truncate-flex {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   COUNTRY FLAGS (local SVG assets from flagcdn — static/flags/<code>.svg)
   ============================================================================ */
/* Inline flag image in dropdown option rows / readonly profile fields.
   Fixed height + auto width keeps each flag's true aspect ratio (flags are
   not square); the hairline border keeps light flags (Japan, Switzerland)
   legible on any background, dark mode included. */
.flag-img {
  display: inline-block;
  vertical-align: -2px;
  height: 14px;
  width: auto;
  max-width: 22px;
  margin-right: 6px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  flex-shrink: 0;
  /* SVGs carry huge intrinsic sizes (np.svg is 726x885). These attributes
     + CSS guarantee the displayed box never exceeds the row height, even
     if an outer width/height attr is missing or CSS hasn't loaded yet. */
  aspect-ratio: auto;
}

/* JS-built dropdown rows: hard-cap the flag inside the row regardless of
   what the SVG's intrinsic size says. */
.profile-timezone-option .flag-img,
.phone-code-option .flag-img,
[style*="padding:8px 12px"] .flag-img {
  height: 14px;
  max-height: 14px;
  width: auto;
  max-width: 24px;
  display: inline-block;
  vertical-align: middle;
}

html[data-theme="dark"] .flag-img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Larger variant for cards / detail headers (filter arg "lg"). */
.flag-img-lg {
  height: 20px;
  max-width: 30px;
}

/* Readonly profile rows: flag sits beside the disabled input without
   stretching the two-column grid. */
.profile-readonly-flag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.profile-readonly-flag-row .profile-edit-readonly {
  flex: 1;
  min-width: 0;
}

/* Dropdown option rows that contain a flag image: align img + text. */
.profile-timezone-option,
.phone-code-option {
  display: flex;
  align-items: center;
}

/* ── Terms document body ────────────────────────────────────────────
   Styles for rendered HTML policy content (version preview, public
   reading page, dashboard banner review panel).  The body field is
   authored as HTML; these rules give paragraphs, headings, lists and
   blockquotes sensible spacing so the rendered page mirrors the
   editor's intent. */
.terms-body p { margin: 0 0 0.8em; line-height: 1.7; }
.terms-body h1, .terms-body h2, .terms-body h3,
.terms-body h4, .terms-body h5, .terms-body h6 {
  margin: 1.4em 0 0.5em;
  font-weight: 700;
  line-height: 1.3;
}
.terms-body h1 { font-size: 1.5rem; }
.terms-body h2 { font-size: 1.25rem; }
.terms-body h3 { font-size: 1.1rem; }
.terms-body ul, .terms-body ol { margin: 0.5em 0; padding-left: 1.6em; }
.terms-body li { margin: 0.3em 0; line-height: 1.6; }
.terms-body blockquote {
  margin: 0.8em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--color-border-subtle, #d1d5db);
  background: var(--color-bg-subtle, #f9fafb);
  border-radius: 0 8px 8px 0;
  color: var(--color-text-muted);
}
.terms-body a {
  color: var(--color-accent, #4f46e5);
  text-decoration: underline;
}
.terms-body a:hover { text-decoration: none; }
.terms-body hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle, #e5e7eb);
  margin: 1.5em 0;
}
.terms-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.9em;
}
.terms-body th, .terms-body td {
  padding: 0.5em 0.75em;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  text-align: left;
}
.terms-body th { font-weight: 600; background: var(--color-bg-subtle, #f9fafb); }
.terms-body code, .terms-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}
.terms-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
html[data-theme="dark"] .terms-body code { background: rgba(255, 255, 255, 0.08); }
.terms-body pre {
  background: var(--color-bg-subtle, #f3f4f6);
  padding: 0.8em 1em;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0.8em 0;
}
.terms-body, html[data-theme="dark"] .terms-body { color: inherit; }

/* View-as-Student topbar chip (2026-09-25, v2). The full-width banner
   was dropped: the topbar now tints amber and a compact chip sits
   inline next to the avatar. The student identity is already in the
   avatar dropdown because ImpersonationMiddleware swaps request.user,
   so the chip just flags the swap. */
.topbar--impersonating {
  background: color-mix(in oklab, #f5b041 18%, var(--surface));
  border-bottom: 1px solid #e09a30;
  box-shadow: 0 2px 8px rgba(224, 154, 48, 0.18);
}
html[data-theme="dark"] .topbar--impersonating {
  background: color-mix(in oklab, #b78528 22%, var(--surface));
  border-bottom-color: #b78528;
}
.impersonation-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e09a30;
  border-radius: 999px;
  font-size: 12px;
  color: #4a3a00;
  white-space: nowrap;
  max-width: 280px;
}
html[data-theme="dark"] .impersonation-chip {
  background: rgba(0, 0, 0, 0.25);
  border-color: #b78528;
  color: #ffd089;
}
.impersonation-chip__icon {
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.impersonation-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.impersonation-chip__text strong {
  font-weight: 600;
}
.impersonation-chip__form {
  flex: 0 0 auto;
  margin: 0;
}
.impersonation-chip__exit {
  background: var(--color-danger, #b91c1c);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}
.impersonation-chip__exit:hover {
  background: #7f1414;
}

/* View-as-student trigger (2026-09-25) */
.impersonation-trigger {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  margin: 0;
}
.impersonation-trigger__reason {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  min-width: 180px;
  background: var(--bg, #fff);
  color: inherit;
}
.impersonation-trigger__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-warning, #f5b041);
  color: #4a3a00;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.impersonation-trigger__btn:hover {
  background: #e09a30;
}
html[data-theme="dark"] .impersonation-trigger__btn {
  color: #1a1a1a;
}

/* Impersonation log (2026-09-25) � mirrors the security events page
   styling so admins get a consistent audit-trail look. */
.admin-impersonation-log__header { margin-bottom: var(--space-3); }
.admin-impersonation-log__sub { color: var(--muted); margin: 4px 0 0 0; font-size: 13px; }
.admin-impersonation-log__stats {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.admin-impersonation-log__stat {
  background: var(--surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 140px;
}
.admin-impersonation-log__stat--open { border-left: 3px solid var(--color-danger, #b91c1c); }
.admin-impersonation-log__stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.admin-impersonation-log__stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}
.admin-impersonation-log__filters {
  display: flex;
  gap: var(--space-3);
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.admin-impersonation-log__filters label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
  color: var(--muted);
}
.admin-impersonation-log__filters input,
.admin-impersonation-log__filters select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: inherit;
  min-width: 160px;
}
.admin-impersonation-log__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.admin-impersonation-log__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-impersonation-log__table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--bg-subtle);
}
.admin-impersonation-log__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.admin-impersonation-log__table tr.is-open { background: color-mix(in oklab, var(--color-danger, #b91c1c) 6%, var(--surface)); }
.admin-impersonation-log__table tr.is-open td { font-weight: 500; }
.admin-impersonation-log__email { display: block; color: var(--muted); font-size: 11px; }
.admin-impersonation-log__reason {
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
}
.admin-impersonation-log__pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-impersonation-log__pill--open {
  background: var(--color-danger, #b91c1c);
  color: #fff;
}
.admin-impersonation-log__empty {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--muted);
}