/**
 * 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");
@import url("./tokens/light-theme.css");
@import url("./tokens/dark-theme.css");
@import url("./tokens/legacy-compat.css");

/* ============================================================================
   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);
  /* 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-heading);
}
.heading-font {
  font-family: var(--font-heading);
}
.supporting-font {
  font-family: var(--font-supporting);
}
.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;
}
.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;
}
.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; }
}

/* 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 (<=480px): the exam-family badge ("IELTS Academic", ~150px) is the
   single biggest space hog in the topbar — with toggle + brand + plan chip +
   avatar it left the row crammed and overlapping. Its information is fully
   duplicated by the ✓ plan chip (links to Plans) and the exam switcher in
   the drawer, so remove it from the phone topbar entirely. The multi-exam
   <select> variant is hidden with it; switching stays available on the
   Plans page and drawer at these widths. */
@media (max-width: 480px) {
  .topbar .plan-selector { display: none; }
}

.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(99, 102, 241, 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;
}

.sidebar-section-collapsed .sidebar-group-toggle {
  transform: rotate(-90deg);
}

.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;
}

.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: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}

.sidebar-link:hover .sidebar-icon {
  color: #4f46e5;
}

.sidebar-link.active {
  background: #e0e7ff;
  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: #818cf8;
  border-color: rgba(79, 70, 229, 0.3);
}

html[data-theme="dark"] .sidebar-link.active {
  background: rgba(79, 70, 229, 0.25);
  color: #a5b4fc;
  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: 22px;
    border-top-right-radius: 22px;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom)) 14px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
    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: 36px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--border-subtle, #e5e7eb);
  }

  .mobile-drawer__grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mobile-drawer__grid .sidebar-group {
    padding: 6px 4px;
  }

  .mobile-drawer__grid .sidebar-group-title {
    padding: 6px 10px;
  }

  .mobile-drawer__grid .sidebar-link {
    padding: 12px 14px;
    border-radius: 12px;
    min-height: 44px;
    color: var(--text);
    text-decoration: none;
  }

  .mobile-drawer__grid .sidebar-link .label {
    font-size: 14px;
    /* 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 {
    min-width: 0;
  }

  .mobile-drawer__grid .sidebar-link[aria-current="page"],
  .mobile-drawer__grid .sidebar-link.is-active {
    background: color-mix(in srgb, var(--accent, #ff3159) 10%, transparent);
    color: var(--accent, #ff3159);
  }

  .mobile-drawer__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--heat-red, #ef4444) 8%, transparent);
    color: var(--heat-red, #ef4444);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    min-height: 44px;
  }

  /* 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: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.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, #eef2ff);
  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, #4f46e5);
  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(99, 102, 241, 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,
[class*="card"],
[class*="form"],
[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, #6366f1);
  text-decoration: underline;
  transition: color var(--transition-fast, 0.15s);
}

.audio-download-link:hover {
  color: var(--color-accent-strong, #4f46e5);
  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;
}

.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  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;
}

.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);
}
/* 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;
}

.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);
}
.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);
}

.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;
}