/* ==========================================================================
   CSS Variables (Theme)
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #7c3aed;
  --color-primary-light: #8b5cf6;
  --color-primary-dark: #6d28d9;
  --color-primary-bg: rgba(124, 58, 237, 0.1);
  
  --color-accent: #14b8a6;
  --color-accent-light: #2dd4bf;
  --color-accent-bg: rgba(20, 184, 166, 0.2);
  
  --color-background: #faf9fc;
  --color-background-alt: #f3f1f8;
  --color-card: #ffffff;
  
  --color-foreground: #1a1625;
  --color-foreground-muted: #64748b;
  --color-foreground-light: #94a3b8;
  
  --color-border: #e5e2ed;
  --color-border-light: #f1eff5;
  
  /* Status Colors */
  --color-success: #22c55e;
  --color-success-bg: #dcfce7;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-error: #ef4444;
  --color-error-bg: #fee2e2;
  
  /* Feature Colors */
  --color-blue: #3b82f6;
  --color-blue-bg: rgba(59, 130, 246, 0.1);
  --color-emerald: #10b981;
  --color-emerald-bg: rgba(16, 185, 129, 0.1);
  --color-amber: #f59e0b;
  --color-amber-bg: rgba(245, 158, 11, 0.1);
  --color-purple: #8b5cf6;
  --color-purple-bg: rgba(139, 92, 246, 0.1);
  --color-rose: #f43f5e;
  --color-rose-bg: rgba(244, 63, 94, 0.1);
  --color-cyan: #06b6d4;
  --color-cyan-bg: rgba(6, 182, 212, 0.1);
  --color-indigo: #6366f1;
  --color-indigo-bg: rgba(99, 102, 241, 0.1);
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  
  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-primary: 0 20px 40px -10px rgba(124, 58, 237, 0.2);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-index */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal: 40;
  --z-tooltip: 50;
}

.seed-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.96)),
    var(--color-surface, #ffffff);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.seed-loader--hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.seed-loader__panel {
  width: min(100%, 420px);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(15, 23, 42, 0.14));
}

.seed-loader__panel h1 {
  margin: 0;
  color: var(--color-text, #0f172a);
  font-size: 1.65rem;
  line-height: 1.2;
}

.seed-loader__panel p {
  margin: 0;
  color: var(--color-text-muted, #64748b);
  font-size: 0.98rem;
  line-height: 1.55;
}

.seed-loader__mark {
  width: 52px;
  height: 52px;
  border: 4px solid rgba(14, 165, 233, 0.18);
  border-top-color: var(--color-primary, #0ea5e9);
  border-radius: 50%;
  animation: seed-loader-spin 0.9s linear infinite;
}

@keyframes seed-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-foreground);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

/* ==========================================================================
   Container Layouts
   ========================================================================== */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.container--narrow {
  max-width: 48rem;
}

.container--wide {
  max-width: 80rem;
}

.container--full {
  max-width: 100%;
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

/* ==========================================================================
   Button Component
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  white-space: nowrap;
}

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

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

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-primary);
}

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

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

.btn--secondary:hover {
  background-color: var(--color-background);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
}

.btn--outline:hover {
  background-color: var(--color-background-alt);
  border-color: var(--color-foreground-muted);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-foreground-muted);
}

.btn--ghost:hover {
  background-color: var(--color-background-alt);
  color: var(--color-foreground);
}

.btn--ghost-light {
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn--ghost-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn--lg {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
}

.btn-small {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-xs);
}

.btn--full {
  width: 100%;
}

.btn__icon {
  flex-shrink: 0;
}

.btn__icon--left {
  margin-right: var(--spacing-1);
}

/* ==========================================================================
   Backend Auth Pages
   ========================================================================== */
.auth-page,
.dashboard-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.16), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.14), transparent 34rem),
    var(--color-background);
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
}

.auth-page__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.86fr);
  width: min(72rem, 100%);
  min-height: 36rem;
  overflow: hidden;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-2xl);
}

.auth-page__brand-panel,
.auth-page__form-panel {
  position: relative;
  padding: var(--spacing-8);
}

.auth-page__brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-8);
  overflow: hidden;
  color: white;
  background:
    linear-gradient(135deg, rgba(26, 22, 37, 0.92), rgba(109, 40, 217, 0.82)),
    linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.auth-page__brand-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 2rem 2rem;
  mask-image: linear-gradient(180deg, black, transparent 85%);
  pointer-events: none;
}

.auth-page__logo {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  width: fit-content;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.auth-page__logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-primary);
}

.auth-page__brand-copy {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}

.auth-page__title {
  margin-top: var(--spacing-5);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: var(--line-height-tight);
  letter-spacing: 0;
}

.auth-page__description {
  margin-top: var(--spacing-5);
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.auth-page__graphic {
  position: relative;
  z-index: 1;
  min-height: 14rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.auth-page__image {
  width: min(20rem, 82%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}

.auth-page__graphic-card {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-foreground);
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px);
}

.auth-page__graphic-card--top {
  top: 1.25rem;
  left: 0;
}

.auth-page__graphic-card--bottom {
  right: 0;
  bottom: 1.25rem;
}

.auth-page__graphic-dot {
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--color-success);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 0.3rem rgba(34, 197, 94, 0.14);
}

.auth-page__form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-card);
}

.auth-card {
  width: min(100%, 26rem);
}

.auth-card__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-1);
  padding: var(--spacing-1);
  margin-bottom: var(--spacing-6);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.auth-card__tab {
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-foreground-muted);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-lg);
  transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-card__tab--active {
  color: var(--color-primary);
  background-color: white;
  box-shadow: var(--shadow-sm);
}

.auth-form {
  display: grid;
  gap: var(--spacing-4);
}

.auth-form--hidden {
  display: none;
}

.auth-form__title {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.auth-form__subtitle {
  margin-top: var(--spacing-2);
  color: var(--color-foreground-muted);
}

.auth-form__message {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-lg);
}

.auth-form__message--error {
  color: #991b1b;
  background-color: var(--color-error-bg);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.auth-form__message--success {
  color: #166534;
  background-color: var(--color-success-bg);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.auth-form__note {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.auth-field {
  display: grid;
  gap: var(--spacing-2);
}

.auth-field__label,
.auth-check__label {
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.auth-field__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--spacing-4);
  color: var(--color-foreground);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-field__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

.auth-field .select2-container {
  width: 100% !important;
}

.auth-field .select2-container--default .select2-selection--multiple {
  min-height: 3rem;
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-foreground);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-field
  .select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

.auth-field
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  margin-top: var(--spacing-1);
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.auth-field
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: var(--color-primary);
  border-right-color: rgba(124, 58, 237, 0.18);
}

.auth-field__input.select2-fallback {
  min-height: 8rem;
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  width: fit-content;
  cursor: pointer;
}

.auth-check__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-check__box {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: white;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-check__input:checked + .auth-check__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 3px white;
}

.auth-form__submit {
  min-height: 3rem;
  margin-top: var(--spacing-2);
}

body[data-page="backend-parent-login"] .auth-page__image {
  aspect-ratio: 16 / 10;
}

body[data-page="backend-parent-login"] .auth-card--parent {
  width: min(100%, 24rem);
}

.home-login-page {
  min-height: calc(100vh - 11rem);
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 30rem),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.12), transparent 32rem),
    var(--color-background);
}

.home-login {
  width: 100%;
  padding: var(--spacing-10) 0;
}

.home-login__container {
  width: 100%;
}

.home-login__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-6);
  align-items: start;
}

.home-login__column {
  min-width: 0;
  padding: var(--spacing-8);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.home-login__column .auth-card {
  width: 100%;
}

.dashboard-page {
  padding: var(--spacing-6) 0;
}

.dashboard-page__shell {
  min-height: calc(100vh - var(--spacing-12));
  display: flex;
  flex-direction: column;
}

.dashboard-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-4) 0;
}

.dashboard-page__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 48rem;
  margin: var(--spacing-8) auto;
  padding: var(--spacing-12);
  background-color: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xl);
}

.dashboard-page__title {
  margin-top: var(--spacing-5);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: var(--line-height-tight);
}

.dashboard-page__description {
  margin-top: var(--spacing-4);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.backend-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: rgba(250, 249, 252, 0.92);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(16px);
}

.backend-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
  min-height: 4.75rem;
}

.backend-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--spacing-2);
}

.backend-header__link {
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.backend-header__link:hover,
.backend-header__link--active {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

.backend-header__user {
  flex: 0 1 auto;
}

.staff-layout-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100vh - 4.75rem);
  background: var(--color-background);
}

.staff-layout-shell .staff-sidebar {
  position: sticky;
  top: 4.75rem;
  align-self: start;
  min-height: calc(100vh - 4.75rem);
  border-right: 1px solid var(--color-border);
}

.staff-layout-content {
  min-width: 0;
}

.staff-layout-shell .backend-page,
.staff-layout-shell .completed-assessment-page,
.staff-layout-shell .child-dashboard-shell {
  min-height: auto;
}

.backend-page {
  min-height: calc(100vh - 9rem);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 30rem),
    var(--color-background);
}

.backend-hero {
  padding: var(--spacing-20) 0 var(--spacing-10);
}

.backend-hero--compact {
  padding-top: var(--spacing-16);
}

.backend-hero__title {
  max-width: 48rem;
  margin-top: var(--spacing-5);
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  line-height: var(--line-height-tight);
  letter-spacing: 0;
  color: var(--color-foreground);
}

.backend-hero__description {
  max-width: 44rem;
  margin-top: var(--spacing-4);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.backend-section {
  padding: 0 0 var(--spacing-20);
}

body[data-page="admin-dashboard"] .backend-section,
body[data-page="admin-slps-list"] .backend-section,
body[data-page="admin-slp-details"] .backend-section {
  padding-top: var(--spacing-8);
}

.backend-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-6);
}

.backend-action-card {
  display: grid;
  align-content: start;
  gap: var(--spacing-3);
  min-height: 12rem;
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.backend-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: var(--shadow-xl);
}

.backend-action-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  min-width: 0;
}

.backend-action-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  width: auto;
  height: 3.5rem;
  padding: 0 var(--spacing-3);
  color: white;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-xl);
}

.backend-action-card__title {
  min-width: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-foreground);
}

.backend-action-card__text {
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.backend-form-card,
.child-profile-card,
.backend-empty-state {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.backend-form-card {
  display: grid;
  gap: var(--spacing-6);
  padding: var(--spacing-8);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-foreground);
  line-height: var(--line-height-relaxed);
}

.alert--warning {
  border-color: #f5c451;
  background-color: #fff7db;
  color: #5f4100;
}

.alert__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  color: #b77900;
}

.alert__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.backend-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-5);
}

.backend-form-grid__full {
  grid-column: 1 / -1;
}

.patient-form-tabs {
  display: grid;
  gap: var(--spacing-5);
}

.patient-form-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.patient-form-tabs__tab {
  min-height: 2.75rem;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-foreground-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  cursor: pointer;
}

.patient-form-tabs__tab:hover,
.patient-form-tabs__tab:focus-visible {
  color: var(--color-foreground);
  border-color: var(--color-border);
  outline: none;
}

.patient-form-tabs__tab.is-active {
  background-color: var(--color-card);
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.patient-form-tabs__panels {
  min-width: 0;
}

.patient-form-tabs__panel {
  margin: 0;
}

@media (max-width: 820px) {
  .patient-form-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .patient-form-tabs__tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.backend-textarea {
  min-height: 7rem;
  padding-top: var(--spacing-3);
  resize: vertical;
}

.backend-field-note {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
}

.backend-form-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

.backend-form-card__message {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-lg);
}

.backend-form-card__message--success {
  color: #166534;
  background-color: var(--color-success-bg);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.backend-form-card__message--error {
  color: #991b1b;
  background-color: var(--color-error-bg);
  border: 1px solid rgba(239, 68, 68, 0.2);
  white-space: pre-line;
}

.auth-field__input.has-error,
.auth-field.has-error .auth-field__input,
.auth-field.has-error .select2-selection,
.radio-group.has-error,
.checkbox-group.has-error,
.speech-sample-container.has-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.medical-report-inputs {
  display: grid;
  gap: var(--spacing-3);
}

.medical-report-add-button {
  width: fit-content;
  min-width: 7rem;
  padding-inline: var(--spacing-4);
  align-self: flex-start;
}

.password-copy-status {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--spacing-3);
  color: var(--color-success);
  background-color: var(--color-success-bg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.password-copy-status[hidden] {
  display: none;
}

.slp-profile-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.uploaded-file-list {
  display: grid;
  gap: var(--spacing-2);
}

.uploaded-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.uploaded-file-item__link {
  min-width: 0;
  overflow-wrap: anywhere;
}

.uploaded-file-item__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: var(--color-error);
  background-color: transparent;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.uploaded-file-item__delete:hover,
.uploaded-file-item__delete:focus-visible {
  background-color: var(--color-error-bg);
  outline: none;
}

.slp-profile-password-field,
.slp-profile-social-field {
  position: relative;
  display: block;
}

.slp-profile-image-preview {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: 4.5rem;
  padding: var(--spacing-3);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.slp-profile-image-preview img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.slp-profile-password-field .auth-field__input {
  padding-right: 3rem;
}

.patient-password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.25rem auto 2.25rem;
  align-items: center;
  gap: var(--spacing-1);
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--spacing-1) 0 var(--spacing-3);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.patient-password-control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

.patient-password-control .auth-field__input {
  min-width: 0;
  min-height: calc(3rem - 2px);
  height: calc(3rem - 2px);
  padding: 0 var(--spacing-2) 0 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.patient-password-control .auth-field__input:focus {
  border-color: transparent;
  box-shadow: none;
}

.patient-password-control .slp-profile-icon-button {
  position: static;
  transform: none;
}

.patient-password-control__generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 var(--spacing-3);
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.patient-password-control__generate:hover,
.patient-password-control__generate:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

.patient-password-control .password-copy-status {
  position: absolute;
  top: calc(100% + var(--spacing-1));
  right: 0;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}

.slp-profile-icon-button {
  position: absolute;
  top: 50%;
  right: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-foreground-muted);
  border-radius: var(--radius-lg);
  transform: translateY(-50%);
}

.slp-profile-icon-button:hover,
.slp-profile-icon-button:focus-visible,
.slp-profile-icon-button.is-active {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  outline: none;
}

.slp-profile-icon-button svg,
.slp-profile-social-field__icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 560px) {
  .patient-password-control {
    grid-template-columns: minmax(0, 1fr) 2.25rem 2.25rem;
    row-gap: var(--spacing-1);
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }

  .patient-password-control__generate {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 2rem;
  }
}

.slp-profile-social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-5);
}

.slp-profile-social-field .auth-field__input {
  padding-left: 3rem;
}

.slp-profile-social-field__icon {
  position: absolute;
  top: 50%;
  left: var(--spacing-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-lg);
  transform: translateY(-50%);
  pointer-events: none;
}

.children-list {
  display: grid;
  gap: var(--spacing-6);
}

.backend-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.backend-section__header h1 {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.backend-section__header p {
  margin-top: var(--spacing-2);
  color: var(--color-foreground-muted);
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-5);
}

.dashboard-stat-card {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.dashboard-stat-card__label {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dashboard-stat-card strong {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
  padding: var(--spacing-6);
}

.admin-detail-section {
  padding: 0 var(--spacing-6) var(--spacing-6);
}

.admin-detail-section h3 {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-xl);
}

.admin-detail-empty {
  padding: var(--spacing-4);
  color: var(--color-foreground-muted);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.admin-document-list {
  display: grid;
  gap: var(--spacing-3);
}

.admin-document-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--spacing-3);
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.admin-document-list__item strong,
.admin-document-list__item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.auth-form__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-3);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

.auth-form__links a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.backend-table-card {
  overflow: hidden;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.backend-table-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.backend-table-card__header h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.backend-table-card__header p {
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

.backend-table-wrap {
  overflow-x: auto;
  padding: var(--spacing-5);
}

.children-table,
[data-table="backend"] {
  width: 100%;
  min-width: 58rem;
  border-collapse: collapse;
}

.child-dashboard-data-table {
  width: 100% !important;
  min-width: 58rem;
}

.children-table th,
.children-table td,
[data-table="backend"] th,
[data-table="backend"] td {
  padding: var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.children-table th,
[data-table="backend"] th {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--color-background);
}

.children-table td,
[data-table="backend"] td {
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
}

.children-table tbody tr:hover,
[data-table="backend"] tbody tr:hover {
  background-color: rgba(124, 58, 237, 0.04);
}

.children-table__child {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
}

.children-table__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: cover;
  background-color: var(--color-primary-bg);
  border: 2px solid white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.children-table__avatar--initials {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.children-table__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* Child Dashboard Workspace */
.child-dashboard-shell {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  min-height: calc(100vh - 4.75rem);
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 32rem),
    var(--color-background);
  transition: grid-template-columns var(--transition-slow);
}

.child-dashboard-shell.is-sidebar-collapsed {
  grid-template-columns: 5.25rem minmax(0, 1fr);
}

.child-dashboard-sidebar {
  position: sticky;
  top: 4.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  height: calc(100vh - 4.75rem);
  padding: var(--spacing-5);
  background-color: rgba(255, 255, 255, 0.92);
  border-right: 1px solid var(--color-border);
  transition: width var(--transition-slow), padding var(--transition-slow);
  overflow: hidden;
}

.child-dashboard-sidebar.is-collapsed {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.child-dashboard-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: 3rem;
}

.child-dashboard-sidebar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  background : var(--color-primary-bg); 
  
}

.child-dashboard-sidebar__avatar {
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  /* border: 2px solid var(--color-primary); */
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.child-dashboard-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.child-dashboard-sidebar__identity,
.child-dashboard-nav__text {
  opacity: 1;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}

.child-dashboard-sidebar__identity span {
  display: block;
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
}

.child-dashboard-sidebar.is-collapsed .child-dashboard-sidebar__identity,
.child-dashboard-sidebar.is-collapsed .child-dashboard-nav__text {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.child-dashboard-nav {
  display: grid;
  gap: var(--spacing-2);
}

.child-dashboard-nav__item,
.child-dashboard-sidebar__collapse {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: 2.75rem;
  padding: 0 var(--spacing-3);
  color: var(--color-foreground-muted);
  border-radius: var(--radius-lg);
  text-align: left;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.child-dashboard-nav__item:hover,
.child-dashboard-sidebar__collapse:hover,
.child-dashboard-nav__item.is-active {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

.child-dashboard-nav__item.is-active {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.child-dashboard-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
}

.child-dashboard-nav__icon svg,
.child-dashboard-icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.child-dashboard-sidebar__collapse {
  margin-top: auto;
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

.child-dashboard-sidebar.is-collapsed .child-dashboard-sidebar__collapse svg {
  transform: rotate(180deg);
}

.child-dashboard-main {
  min-width: 0;
  padding: var(--spacing-6);
}

.child-dashboard-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.child-dashboard-topbar[hidden] {
  display: none !important;
}

.child-dashboard-topbar h1 {
  margin-top: var(--spacing-4);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.child-dashboard-topbar p,
.child-dashboard-section__header p,
.child-dashboard-panel__header p {
  margin-top: var(--spacing-2);
  color: var(--color-foreground-muted);
}

.child-dashboard-section {
  display: none;
  gap: var(--spacing-6);
}

.child-dashboard-section.is-active {
  display: grid;
}

.child-dashboard-section__header,
.child-dashboard-panel__header,
.child-dashboard-hero,
.child-dashboard-hero__profile,
.child-dashboard-assessment-card__top,
.child-dashboard-report-output__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.child-dashboard-kicker {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.child-dashboard-hero,
.child-dashboard-panel,
.child-dashboard-summary-card,
.child-dashboard-assessment-card,
.child-dashboard-video-card,
.child-dashboard-danger-panel,
.child-dashboard-report-output__paper {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.child-dashboard-hero {
  align-items: center;
  padding: var(--spacing-6);
}

.child-dashboard-hero__profile {
  align-items: center;
}

.child-dashboard-hero__photo {
  width: 6.25rem;
  height: 6.25rem;
  object-fit: cover;
  background-color: var(--color-primary-bg);
  border: 4px solid white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
}

.child-dashboard-photo-fallback.child-dashboard-hero__photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.child-dashboard-hero h2 {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.child-dashboard-hero p:not(.child-dashboard-kicker) {
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
}

.child-dashboard-hero__actions,
.child-dashboard-report-builder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.child-dashboard-hero__slp {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-width: min(100%, 20rem);
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.child-dashboard-hero__slp-photo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  overflow: hidden;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
}

.child-dashboard-hero__slp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.child-dashboard-hero__slp h3 {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

.child-dashboard-hero__slp p:not(.child-dashboard-kicker) {
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

.patient-dashboard-insight {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.patient-dashboard-feedback {
  margin: 0;
  padding: var(--spacing-4);
  color: var(--color-foreground);
  background-color: var(--color-background-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  line-height: var(--line-height-relaxed);
}

.patient-dashboard-insight__lead {
  color: var(--color-foreground);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.patient-dashboard-insight__meta {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.child-dashboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.child-dashboard-summary-card,
.child-dashboard-panel,
.child-dashboard-assessment-card,
.child-dashboard-video-card,
.child-dashboard-danger-panel {
  padding: var(--spacing-5);
}

.child-dashboard-summary-card__label {
  display: block;
  /* color: var(--color-foreground-muted); */
  color : #000000;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.child-dashboard-summary-card strong {
  display: block;
  margin-top: var(--spacing-3);
  /* color: var(--color-foreground); */
  font-size: var(--font-size-4xl);
  line-height: 1;
}

.child-dashboard-summary-card p,
.child-dashboard-video-card p,
.child-dashboard-danger-panel p,
.child-dashboard-report-output__note {
  margin-top: var(--spacing-2);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.child-dashboard-grid {
  display: grid;
  gap: var(--spacing-6);
}

.child-dashboard-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.child-dashboard-progress-list {
  display: grid;
  gap: var(--spacing-4);
  margin-top: var(--spacing-5);
}

.child-dashboard-progress-row {
  display: grid;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-3);
}

.child-dashboard-progress-row > span {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

.child-dashboard-progress-track {
  height: 0.55rem;
  overflow: hidden;
  background-color: var(--color-border-light);
  border-radius: var(--radius-full);
}

.child-dashboard-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: inherit;
}

.child-dashboard-video-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
}

.child-dashboard-video-strip__item {
  display: grid;
  gap: var(--spacing-2);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.child-dashboard-video-strip video,
.child-dashboard-video-card video {
  width: 100%;
  background-color: var(--color-foreground);
  border-radius: var(--radius-lg);
}

.child-dashboard-video-strip video {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.child-dashboard-practice-browser {
  display: grid;
  gap: var(--spacing-5);
  padding: var(--spacing-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.child-dashboard-practice-compact[hidden],
.child-dashboard-practice-step[hidden],
.child-dashboard-practice-items[hidden] {
  display: none;
}

.child-dashboard-practice-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  animation: childPracticeFadeIn var(--transition-slow);
}

.child-dashboard-practice-compact__path {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.child-dashboard-practice-compact__path button {
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--color-primary);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.child-dashboard-practice-compact__path span {
  color: var(--color-foreground-light);
  font-weight: var(--font-weight-bold);
}

.child-dashboard-assessment-session {
  align-items: center;
}

.child-dashboard-assessment-session__meta {
  min-width: 0;
}

.child-dashboard-assessment-session__meta strong {
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--color-foreground);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.child-dashboard-assessment-video {
  display: grid;
  min-width: 0;
  overflow: hidden;
  background-color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
}

.child-dashboard-assessment-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.child-dashboard-assessment-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

.child-dashboard-assessment-modal-card.is-video-active
  .child-dashboard-assessment-modal-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
}

.child-dashboard-assessment-modal-content {
  display: grid;
  gap: var(--spacing-4);
  min-width: 0;
}

.child-dashboard-practice-chooser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-5);
  max-height: 80rem;
  overflow: hidden;
  animation: childPracticeFadeIn var(--transition-slow);
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height var(--transition-slow),
    opacity var(--transition-slow),
    transform var(--transition-slow),
    visibility var(--transition-slow);
  visibility: visible;
}

.child-dashboard-practice-chooser.is-collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.75rem);
  visibility: hidden;
}

.child-dashboard-practice-chooser.is-tool-selected {
  grid-template-columns: minmax(0, 1fr);
}

.child-dashboard-practice-step {
  display: grid;
  align-content: start;
  gap: var(--spacing-4);
}

.child-dashboard-practice-step--categories {
  min-width: 0;
}

.child-dashboard-practice-chooser.is-tool-selected
  .child-dashboard-practice-step--categories {
  grid-column: 1 / -1;
}

.child-dashboard-practice-step__header,
.child-dashboard-practice-items__header > div {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.child-dashboard-practice-step__header h3,
.child-dashboard-practice-items__header h3 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.child-dashboard-practice-step__header p,
.child-dashboard-practice-items__header p {
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

.child-dashboard-practice-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.child-dashboard-practice-back {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.child-dashboard-tool-grid,
.child-dashboard-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--spacing-4);
}

.child-dashboard-browser-card,
.child-dashboard-item-card {
  display: grid;
  gap: var(--spacing-3);
  min-width: 0;
  overflow: hidden;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.child-dashboard-browser-card {
  padding: var(--spacing-3);
}

.child-dashboard-browser-card:hover,
.child-dashboard-browser-card.is-selected,
.child-dashboard-item-card:hover {
  border-color: rgba(124, 58, 237, 0.38);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.child-dashboard-browser-card.is-selected {
  background-color: var(--color-primary-bg);
}

.child-dashboard-browser-card img,
.child-dashboard-item-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.child-dashboard-browser-card span,
.child-dashboard-item-card strong {
  color: var(--color-foreground);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.child-dashboard-browser-card p {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.child-dashboard-practice-items {
  display: grid;
  gap: var(--spacing-4);
  animation: childPracticeFadeUp var(--transition-slow);
}

.child-dashboard-practice-items.is-dimmed {
  opacity: 0.45;
}

.child-dashboard-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.child-dashboard-item-card {
  padding: var(--spacing-3);
}

.child-dashboard-item-card.is-locked {
  opacity: 0.62;
}

.child-dashboard-item-card.attempted {
  border-color: rgba(16, 185, 129, 0.45);
  background-color: rgba(16, 185, 129, 0.06);
}

.child-dashboard-item-card--text-only {
  align-content: center;
  min-height: 9rem;
  padding: var(--spacing-4);
}

.child-dashboard-item-card__image-button {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.child-dashboard-item-card__image-button:disabled,
.child-dashboard-item-card__play:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.child-dashboard-item-card__image-button img {
  display: block;
}

.child-dashboard-item-card__image-button.attempted::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.06),
    rgba(16, 185, 129, 0.34)
  );
  pointer-events: none;
}

.child-dashboard-item-card__attempted-overlay,
.child-dashboard-item-card__attempted-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
}

.child-dashboard-item-card__attempted-overlay {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  z-index: 1;
  min-height: 1.75rem;
  padding: 0 var(--spacing-3);
  border-radius: var(--radius-full);
}

.child-dashboard-item-card__attempted-badge {
  justify-self: center;
  min-height: 1.75rem;
  padding: 0 var(--spacing-3);
  border-radius: var(--radius-full);
}

.child-dashboard-item-card strong {
  display: block;
  padding: 0 var(--spacing-1) var(--spacing-1);
  text-align: center;
}

.child-dashboard-item-card--text-only strong {
  padding: 0;
  line-height: var(--line-height-relaxed);
}

.child-dashboard-item-card__play {
  justify-self: center;
  min-width: 5.5rem;
  padding: var(--spacing-2) var(--spacing-4);
  color: white;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.child-dashboard-item-card__play:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.child-dashboard-item-card__play.attempted {
  background-color: var(--color-success);
}

.child-dashboard-item-card__play:disabled:hover {
  background-color: var(--color-primary);
  transform: none;
}

.child-dashboard-practice-empty {
  grid-column: 1 / -1;
  padding: var(--spacing-6);
  background-color: var(--color-background-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
}

.child-dashboard-practice-empty h3 {
  margin-top: var(--spacing-3);
}

.child-dashboard-practice-empty p {
  margin-top: var(--spacing-2);
  color: var(--color-foreground-muted);
}

@keyframes childPracticeFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes childPracticeFadeUp {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.child-dashboard-lightbox[hidden] {
  display: none;
}

.child-dashboard-dialog[hidden] {
  display: none;
}

.child-dashboard-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--spacing-5);
}

.child-dashboard-dialog {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 1);
  display: grid;
  place-items: center;
  padding: var(--spacing-5);
}

.child-dashboard-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 22, 37, 0.78);
  backdrop-filter: blur(10px);
}

.child-dashboard-dialog__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 22, 37, 0.68);
  backdrop-filter: blur(8px);
}

.child-dashboard-dialog__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-5);
  width: min(30rem, 100%);
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}

.child-dashboard-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.child-dashboard-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-primary);
}

.child-dashboard-dialog[data-variant="danger"] .child-dashboard-dialog__icon {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 18px 36px rgba(239, 68, 68, 0.24);
}

.child-dashboard-dialog[data-variant="success"] .child-dashboard-dialog__icon {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  box-shadow: 0 18px 36px rgba(16, 185, 129, 0.22);
}

.child-dashboard-dialog__title {
  color: var(--color-foreground);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.child-dashboard-dialog__message {
  margin-top: var(--spacing-2);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.child-dashboard-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
}

.child-dashboard-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-4);
  width: min(68rem, 100%);
  max-height: calc(100vh - var(--spacing-10));
}

.child-dashboard-lightbox--assessment .child-dashboard-lightbox__dialog {
  width: min(90rem, 100%);
}

.child-dashboard-lightbox--text-assessment .child-dashboard-lightbox__dialog {
  width: min(48rem, 100%);
}

.child-dashboard-lightbox__content {
  display: grid;
  min-width: 0;
}

.child-dashboard-lightbox--assessment .child-dashboard-lightbox__content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--spacing-5);
  max-height: calc(100vh - var(--spacing-10));
  overflow-y: auto;
  padding-right: var(--spacing-1);
}

.child-dashboard-lightbox--text-assessment .child-dashboard-lightbox__content {
  grid-template-columns: minmax(0, 1fr);
}

.child-dashboard-lightbox--text-assessment .child-dashboard-lightbox__figure {
  display: none;
}

.child-dashboard-lightbox__figure {
  display: grid;
  justify-items: center;
  gap: var(--spacing-3);
  min-width: 0;
}

.child-dashboard-lightbox--assessment .child-dashboard-lightbox__figure {
  align-content: stretch;
}

.child-dashboard-lightbox__figure img {
  display: block;
  width: min(100%, 56rem);
  max-height: calc(100vh - 10rem);
  object-fit: contain;
  background-color: var(--color-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}

.child-dashboard-lightbox--assessment .child-dashboard-lightbox__figure img {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 8rem);
}

.child-dashboard-lightbox__figure figcaption {
  color: white;
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.child-dashboard-lightbox__assessment[hidden] {
  display: none;
}

.child-dashboard-lightbox__assessment {
  min-width: 0;
}

.child-dashboard-assessment-modal-card {
  height: 100%;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  background-color: var(--color-card);
  box-shadow: var(--shadow-2xl);
}

.child-dashboard-assessment-modal-card .az-phoneme-result {
  margin-top: var(--spacing-4);
}

.child-dashboard-lightbox__play {
  min-width: 6rem;
  padding: var(--spacing-2) var(--spacing-5);
  color: white;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-lg);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.child-dashboard-lightbox__play:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.child-dashboard-lightbox__close,
.child-dashboard-lightbox__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.child-dashboard-lightbox__close:hover,
.child-dashboard-lightbox__nav:hover {
  background-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.child-dashboard-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.child-dashboard-lightbox__nav {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
}

.child-dashboard-lightbox__nav span {
  font-size: 2.5rem;
  line-height: 1;
}

body.child-dashboard-lightbox-open,
body.child-dashboard-dialog-open {
  overflow: hidden;
}

.child-dashboard-assessment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-5);
}

.child-dashboard-assessment-card {
  display: grid;
  gap: var(--spacing-5);
}

.child-dashboard-assessment-card h3 {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xl);
}

.child-dashboard-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.child-dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-3);
}

.child-dashboard-metric {
  display: grid;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.child-dashboard-metric span {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.child-dashboard-metric strong {
  width: fit-content;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.child-dashboard-phoneme-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.child-dashboard-completed-list {
  display: grid;
  gap: var(--spacing-5);
}

.child-dashboard-completed-empty,
.child-dashboard-completed-card {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.child-dashboard-completed-empty {
  display: grid;
  gap: var(--spacing-3);
  justify-items: start;
}

.child-dashboard-completed-card {
  display: grid;
  gap: var(--spacing-5);
}

.child-dashboard-completed-card__header,
.child-dashboard-completed-attempt__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.child-dashboard-completed-card__header h3 {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-2xl);
}

.child-dashboard-completed-card__header p,
.child-dashboard-completed-attempt p,
.child-dashboard-completed-video p {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

.child-dashboard-completed-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-3);
}

.child-dashboard-completed-stat,
.child-dashboard-completed-metric {
  display: grid;
  gap: var(--spacing-2);
  min-width: 0;
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.child-dashboard-completed-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-full);
}

.child-dashboard-completed-stat__icon svg,
.child-dashboard-completed-metric__icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.child-dashboard-completed-stat__label,
.child-dashboard-completed-metric__label {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.child-dashboard-completed-stat strong {
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
}

.child-dashboard-completed-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.child-dashboard-completed-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.child-dashboard-completed-legend strong {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--radius-full);
}

.child-dashboard-completed-attempts {
  display: grid;
  gap: var(--spacing-4);
}

.child-dashboard-completed-attempt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.child-dashboard-completed-attempt__body {
  display: grid;
  gap: var(--spacing-3);
  min-width: 0;
}

.child-dashboard-completed-attempt h4 {
  font-size: var(--font-size-xl);
}

.child-dashboard-completed-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2);
}

.child-dashboard-completed-metric {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.child-dashboard-completed-metric--overall {
  grid-column: 1 / -1;
  background-color: var(--color-primary-bg);
  border-color: rgba(124, 58, 237, 0.28);
}

.child-dashboard-completed-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--color-primary);
  background-color: var(--color-card);
  border-radius: var(--radius-full);
}

.child-dashboard-completed-metric strong {
  width: fit-content;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.child-dashboard-completed-phonemes {
  display: grid;
  gap: var(--spacing-2);
}

.child-dashboard-completed-phonemes .analysis-modal__phonemes {
  justify-content: flex-start;
}

.child-dashboard-completed-soda-notice {
  display: grid;
  gap: var(--spacing-2);
  width: fit-content;
}

.child-dashboard-completed-soda-notice div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.child-dashboard-completed-video {
  display: grid;
  gap: var(--spacing-2);
  align-content: start;
  min-width: 0;
}

.child-dashboard-completed-video video,
.child-dashboard-completed-video__empty {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-foreground);
  border-radius: var(--radius-lg);
}

.child-dashboard-completed-video video {
  display: block;
  object-fit: cover;
}

.child-dashboard-completed-video__empty {
  display: grid;
  place-items: center;
  padding: var(--spacing-4);
  color: white;
  text-align: center;
}

/*
.child-dashboard-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-5);
}*/

.child-dashboard-video-card {
  display: grid;
  gap: var(--spacing-4);
  min-width: 0;
}

.child-dashboard-video-card video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-foreground);
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.child-dashboard-video-card h3 {
  overflow-wrap: anywhere;
  font-size: var(--font-size-xl);
}

.child-dashboard-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-lg);
}

.child-dashboard-report-builder {
  display: grid;
  gap: var(--spacing-4);
}

.child-dashboard-report-output {
  display: block;
}

.child-dashboard-report-output__paper {
  display: grid;
  gap: var(--spacing-5);
  padding: var(--spacing-6);
}

.child-dashboard-report-output__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.child-dashboard-danger-panel {
  background-color: var(--color-error-bg);
  border-color: rgba(239, 68, 68, 0.28);
  box-shadow: none;
}

.child-dashboard-danger-panel h3 {
  color: #991b1b;
}

.child-dashboard-danger-panel__button {
  margin-top: var(--spacing-5);
  background-color: var(--color-error);
}

.child-dashboard-danger-panel__button:hover {
  background-color: #dc2626;
}

.completed-assessment-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08), transparent 38%),
    linear-gradient(225deg, rgba(20, 184, 166, 0.12), transparent 42%),
    var(--color-background);
}

.completed-assessment-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.completed-assessment-bg span {
  position: absolute;
  display: block;
  width: 8rem;
  height: 5rem;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.48);
  box-shadow: var(--shadow-sm);
  animation: completedAssessmentFloat 12s ease-in-out infinite;
}

.completed-assessment-bg span::before,
.completed-assessment-bg span::after {
  position: absolute;
  content: "";
  left: 1rem;
  right: 1rem;
  height: 0.35rem;
  background-color: rgba(124, 58, 237, 0.16);
  border-radius: var(--radius-full);
}

.completed-assessment-bg span::before {
  top: 1.25rem;
}

.completed-assessment-bg span::after {
  top: 2.4rem;
  right: 2.4rem;
}

.completed-assessment-bg span:nth-child(1) {
  top: 9rem;
  left: 6%;
}

.completed-assessment-bg span:nth-child(2) {
  top: 18rem;
  right: 8%;
  animation-delay: -4s;
}

.completed-assessment-bg span:nth-child(3) {
  bottom: 9rem;
  left: 18%;
  animation-delay: -7s;
}

.completed-assessment-hero,
.completed-assessment-section {
  position: relative;
  z-index: 1;
}

.completed-assessment-hero {
  padding: var(--spacing-10) 0 var(--spacing-6);
}

.completed-assessment-hero__content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-6);
  padding: var(--spacing-6);
  background-color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
}

.completed-assessment-hero h1 {
  margin-top: var(--spacing-3);
  color: var(--color-foreground);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
}

.completed-assessment-hero p {
  max-width: 48rem;
  margin-top: var(--spacing-3);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.completed-assessment-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-3);
}

.completed-assessment-section {
  padding-bottom: var(--spacing-10);
}

.completed-assessment-shell {
  display: grid;
  gap: var(--spacing-5);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.completed-assessment-shell.is-deleted {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
}

.completed-assessment-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-5);
  align-items: center;
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.completed-assessment-overview__main h2 {
  margin-top: var(--spacing-3);
  overflow-wrap: anywhere;
  color: var(--color-foreground);
  font-size: var(--font-size-2xl);
}

.completed-assessment-overview__main p,
.completed-assessment-family-note p,
.completed-assessment-attempt p,
.completed-assessment-video-status {
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.completed-assessment-overview__score {
  display: grid;
  place-items: center;
  min-width: 8rem;
  min-height: 8rem;
  padding: var(--spacing-4);
  border-radius: var(--radius-xl);
}

.completed-assessment-overview__score span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.completed-assessment-overview__score strong {
  font-size: var(--font-size-5xl);
  line-height: 1;
}

.completed-assessment-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.completed-assessment-summary-card {
  display: grid;
  gap: var(--spacing-2);
  min-width: 0;
  padding: var(--spacing-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.completed-assessment-summary-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-full);
}

.completed-assessment-summary-card__icon svg,
.completed-assessment-video-empty svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.completed-assessment-summary-card span:not(.completed-assessment-summary-card__icon) {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.completed-assessment-summary-card strong {
  overflow-wrap: anywhere;
  color: var(--color-foreground);
  font-size: var(--font-size-lg);
}

.completed-assessment-family-note {
  padding: var(--spacing-6);
  color: var(--color-foreground);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.1), transparent),
    var(--color-card);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.completed-assessment-family-note h2 {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-2xl);
}

.completed-assessment-family-note p:last-child {
  max-width: 58rem;
  margin-top: var(--spacing-2);
}

.completed-assessment-attempts {
  display: grid;
  gap: var(--spacing-5);
}

.completed-assessment-attempt {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: var(--spacing-5);
  align-items: start;
  padding: var(--spacing-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  animation: completedAssessmentRise 0.5s ease both;
  animation-delay: calc(var(--attempt-index, 0) * 70ms);
}

.completed-assessment-attempt__content {
  display: grid;
  gap: var(--spacing-4);
  min-width: 0;
}

.completed-assessment-attempt__actions {
  display: flex;
  justify-content: flex-end;
}

.completed-assessment-attempt__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.completed-assessment-attempt h2 {
  overflow-wrap: anywhere;
  color: var(--color-foreground);
  font-size: var(--font-size-2xl);
  text-transform: capitalize;
}

.completed-assessment-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-2);
}

.completed-assessment-metric {
  display: grid;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.completed-assessment-metric span {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.completed-assessment-metric strong {
  width: fit-content;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.completed-assessment-phonemes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}

.completed-assessment-phoneme {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.completed-assessment-raw {
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.completed-assessment-raw summary {
  cursor: pointer;
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

.completed-assessment-raw pre {
  max-height: 22rem;
  margin-top: var(--spacing-3);
  overflow: auto;
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
}

.completed-assessment-attempt__video {
  min-width: 0;
}

.completed-assessment-video-wrap {
  display: grid;
  gap: var(--spacing-2);
}

.completed-assessment-video-wrap video,
.completed-assessment-video-empty {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.completed-assessment-video-wrap video {
  display: block;
  object-fit: cover;
}

.completed-assessment-video-empty {
  display: grid;
  place-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  color: white;
  text-align: center;
}

.completed-assessment-video-empty span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
}

body[data-page="patient-assessment-details"] .completed-assessment-overview {
  grid-template-columns: 1fr;
}

body[data-page="patient-assessment-details"] .completed-assessment-attempts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="patient-assessment-details"] .attempt-container {
  min-width: 0;
}

body[data-page="patient-assessment-details"] .patient-assessment-recording-card {
  height: 100%;
  grid-template-columns: 1fr;
  align-content: start;
}

body[data-page="patient-assessment-details"]
  .patient-assessment-recording-card
  .completed-assessment-attempt__content {
  gap: var(--spacing-3);
}

body[data-page="patient-assessment-details"]
  .patient-assessment-recording-card
  h2 {
  font-size: var(--font-size-xl);
}

body[data-page="patient-assessment-details"]
  .patient-assessment-recording-card
  .completed-assessment-video-wrap
  video,
body[data-page="patient-assessment-details"]
  .patient-assessment-recording-card
  .completed-assessment-video-empty {
  aspect-ratio: 4 / 3;
}

body[data-page="patient-assessment-details"] .completed-assessment-remarks {
  margin-top: var(--spacing-6);
}

.completed-assessment-remarks {
  padding: var(--spacing-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.completed-assessment-remarks__textarea {
  min-height: 10rem;
  resize: vertical;
}

.completed-assessment-remarks__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-4);
}

.completed-assessment-print-shell {
  display: none;
}

.completed-assessment-print-report {
  display: grid;
  gap: var(--spacing-5);
  color: var(--color-foreground);
  background: white;
}

.completed-assessment-print-report__header,
.completed-assessment-print-report__signature {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-5);
}

.completed-assessment-print-report__header {
  padding-bottom: var(--spacing-5);
  border-bottom: 2px solid var(--color-border);
}

.completed-assessment-print-report__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.completed-assessment-print-report__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  color: white;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.completed-assessment-print-report__brand p,
.completed-assessment-print-report__meta span,
.completed-assessment-report-field span,
.completed-assessment-report-paragraph span,
.completed-assessment-print-report__signature span {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.completed-assessment-print-report__brand h1 {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.completed-assessment-print-report__meta {
  display: grid;
  gap: var(--spacing-1);
  text-align: right;
}

.completed-assessment-print-report__section {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.completed-assessment-print-report__section h2 {
  font-size: var(--font-size-xl);
}

.completed-assessment-print-report__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-3);
}

.completed-assessment-report-field,
.completed-assessment-report-paragraph {
  display: grid;
  gap: var(--spacing-1);
  min-width: 0;
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.completed-assessment-report-field strong,
.completed-assessment-report-paragraph p {
  overflow-wrap: anywhere;
}

.completed-assessment-print-report__stack,
.completed-assessment-print-report__attempts {
  display: grid;
  gap: var(--spacing-3);
}

.completed-assessment-print-report__attempt {
  display: grid;
  gap: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border-light);
}

.completed-assessment-print-report__attempt h3 {
  font-size: var(--font-size-lg);
}

.completed-assessment-print-report__remarks {
  min-height: 5rem;
  padding: var(--spacing-4);
  color: var(--color-foreground-muted);
  white-space: pre-wrap;
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.completed-assessment-print-report__signature {
  padding-top: var(--spacing-8);
}

.completed-assessment-print-report__signature div {
  display: grid;
  gap: var(--spacing-2);
  min-width: 14rem;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-foreground);
}

.completed-assessment-empty {
  display: grid;
  gap: var(--spacing-3);
  justify-items: start;
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.completed-assessment-empty h1,
.completed-assessment-empty h2 {
  color: var(--color-foreground);
}

.completed-assessment-empty p {
  max-width: 42rem;
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.completed-assessment-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5);
  padding: var(--spacing-5);
  background-color: var(--color-error-bg);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.completed-assessment-danger h2 {
  margin-top: var(--spacing-2);
  color: #991b1b;
  font-size: var(--font-size-2xl);
}

.completed-assessment-danger p:last-child {
  margin-top: var(--spacing-2);
  color: #7f1d1d;
  line-height: var(--line-height-relaxed);
}

.completed-assessment-danger__button {
  flex: 0 0 auto;
  background-color: var(--color-error);
}

.completed-assessment-danger__button:hover {
  background-color: #dc2626;
}

@keyframes completedAssessmentFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }

  50% {
    transform: translate3d(0, -1.25rem, 0) rotate(3deg);
  }
}

@keyframes completedAssessmentRise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .child-dashboard-summary-grid,
  .child-dashboard-report-output__grid,
  .completed-assessment-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-dashboard-completed-attempt,
  .completed-assessment-attempt {
    grid-template-columns: 1fr;
  }

  .child-dashboard-completed-stats,
  .child-dashboard-completed-metrics,
  .completed-assessment-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-dashboard-completed-metric--overall {
    grid-column: 1 / -1;
  }

  .child-dashboard-assessment-list,
  .child-dashboard-grid--two {
    grid-template-columns: 1fr;
  }

  .child-dashboard-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="patient-assessment-details"] .completed-assessment-attempts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-dashboard-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .child-dashboard-practice-chooser {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .child-dashboard-shell {
    grid-template-columns: 1fr;
  }

  .child-dashboard-sidebar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: auto;
    padding: var(--spacing-3);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .child-dashboard-sidebar__brand,
  .child-dashboard-sidebar__collapse {
    display: none;
  }

  .child-dashboard-nav {
    display: flex;
    gap: var(--spacing-2);
    overflow-x: auto;
  }

  .child-dashboard-nav__item {
    flex: 0 0 auto;
  }

  .child-dashboard-main {
    padding: var(--spacing-4);
  }

  .child-dashboard-video-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="patient-assessment-details"] .completed-assessment-attempts {
    grid-template-columns: 1fr;
  }

  .child-dashboard-topbar,
  .child-dashboard-hero,
  .child-dashboard-section__header,
  .child-dashboard-report-output__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .child-dashboard-metric-grid,
  .child-dashboard-summary-grid,
  .child-dashboard-completed-stats,
  .child-dashboard-completed-metrics,
  .child-dashboard-report-output__grid {
    grid-template-columns: 1fr;
  }

  .child-dashboard-tool-grid,
  .child-dashboard-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .child-dashboard-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .child-dashboard-topbar h1 {
    font-size: var(--font-size-3xl);
  }

  .child-dashboard-hero__profile,
  .child-dashboard-assessment-card__top,
  .completed-assessment-hero__content,
  .completed-assessment-attempt__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .completed-assessment-hero {
    padding-top: var(--spacing-6);
  }

  .completed-assessment-hero__content,
  .completed-assessment-overview,
  .completed-assessment-family-note,
  .completed-assessment-attempt,
  .completed-assessment-danger {
    padding: var(--spacing-4);
  }

  .completed-assessment-hero h1 {
    font-size: var(--font-size-4xl);
  }

  .completed-assessment-hero__actions,
  .completed-assessment-hero__actions .btn {
    width: 100%;
  }

  .completed-assessment-overview {
    grid-template-columns: 1fr;
  }

  .completed-assessment-overview__score {
    width: 100%;
    min-height: 6.5rem;
  }

  .completed-assessment-summary-grid,
  .completed-assessment-metric-grid {
    grid-template-columns: 1fr;
  }

  .completed-assessment-danger {
    align-items: stretch;
    flex-direction: column;
  }

  .completed-assessment-danger__button {
    width: 100%;
  }

  .child-dashboard-video-strip {
    grid-template-columns: 1fr;
  }

  .child-dashboard-progress-row {
    grid-template-columns: 1fr;
  }

  .child-dashboard-practice-browser {
    padding: var(--spacing-4);
  }

  .child-dashboard-practice-compact {
    align-items: flex-start;
    flex-direction: column;
  }

  .child-dashboard-practice-step__header {
    flex-wrap: wrap;
  }

  .child-dashboard-practice-step__header > div {
    flex: 1 1 calc(100% - 3rem);
    min-width: 0;
  }

  .child-dashboard-practice-back {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .child-dashboard-tool-grid,
  .child-dashboard-category-grid {
    grid-template-columns: 1fr;
  }

  .child-dashboard-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-dashboard-lightbox {
    padding: var(--spacing-3);
  }

  .child-dashboard-lightbox__dialog {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }

  .child-dashboard-dialog {
    padding: var(--spacing-3);
  }

  .child-dashboard-dialog__panel {
    padding: var(--spacing-5);
  }

  .child-dashboard-dialog__header {
    flex-direction: column;
  }

  .child-dashboard-dialog__actions {
    flex-direction: column-reverse;
  }

  .child-dashboard-dialog__actions .btn {
    width: 100%;
  }

  .child-dashboard-lightbox--assessment .child-dashboard-lightbox__content {
    grid-template-columns: 1fr;
  }

  .child-dashboard-lightbox--assessment .child-dashboard-lightbox__figure img {
    height: auto;
    max-height: 34vh;
  }

  .child-dashboard-assessment-modal-card {
    height: auto;
    max-height: none;
  }

  .child-dashboard-assessment-modal-card.is-video-active
    .child-dashboard-assessment-modal-grid {
    grid-template-columns: 1fr;
  }

  .child-dashboard-lightbox__figure img {
    max-height: calc(100vh - 8rem);
  }

  .child-dashboard-lightbox--assessment .child-dashboard-lightbox__figure img {
    max-height: 32vh;
  }

  .child-dashboard-assessment-modal-card {
    max-height: none;
  }

  .child-dashboard-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .child-dashboard-lightbox__nav:hover {
    transform: translateY(-50%);
  }

  .child-dashboard-lightbox__nav--prev {
    left: 0;
  }

  .child-dashboard-lightbox__nav--next {
    right: 0;
  }
}

@media print {
  body[data-page="slp-assessment-details"],
  body[data-page="patient-assessment-details"] {
    background: white;
  }

  body[data-page="slp-assessment-details"] .backend-header,
  body[data-page="patient-assessment-details"] .backend-header,
  body[data-page="slp-assessment-details"] .completed-assessment-bg,
  body[data-page="patient-assessment-details"] .completed-assessment-bg,
  body[data-page="slp-assessment-details"] .completed-assessment-hero,
  body[data-page="patient-assessment-details"] .completed-assessment-hero,
  body[data-page="slp-assessment-details"] .completed-assessment-overview,
  body[data-page="patient-assessment-details"] .completed-assessment-overview,
  body[data-page="slp-assessment-details"] .completed-assessment-summary-grid,
  body[data-page="patient-assessment-details"] .completed-assessment-summary-grid,
  body[data-page="slp-assessment-details"] .completed-assessment-family-note,
  body[data-page="patient-assessment-details"] .completed-assessment-family-note,
  body[data-page="slp-assessment-details"] .completed-assessment-attempts,
  body[data-page="patient-assessment-details"] .completed-assessment-attempts,
  body[data-page="slp-assessment-details"] .completed-assessment-remarks,
  body[data-page="patient-assessment-details"] .completed-assessment-remarks,
  body[data-page="slp-assessment-details"] .completed-assessment-danger,
  body[data-page="patient-assessment-details"] .completed-assessment-danger,
  body[data-page="slp-assessment-details"] .child-dashboard-dialog,
  body[data-page="patient-assessment-details"] .child-dashboard-dialog {
    display: none !important;
  }

  body[data-page="slp-assessment-details"] .completed-assessment-page,
  body[data-page="patient-assessment-details"] .completed-assessment-page,
  body[data-page="slp-assessment-details"] .completed-assessment-section,
  body[data-page="patient-assessment-details"] .completed-assessment-section,
  body[data-page="slp-assessment-details"] .completed-assessment-shell,
  body[data-page="patient-assessment-details"] .completed-assessment-shell {
    display: block;
    min-height: auto;
    padding: 0;
    overflow: visible;
    background: white;
  }

  body[data-page="slp-assessment-details"] .container,
  body[data-page="patient-assessment-details"] .container,
  body[data-page="slp-assessment-details"] .container--wide,
  body[data-page="patient-assessment-details"] .container--wide {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  body[data-page="slp-assessment-details"] .completed-assessment-print-shell,
  body[data-page="patient-assessment-details"] .completed-assessment-print-shell {
    display: block !important;
  }

  body[data-page="slp-assessment-details"] .completed-assessment-print-report,
  body[data-page="patient-assessment-details"] .completed-assessment-print-report {
    gap: 1rem;
    padding: 0;
    color: #111827;
  }

  body[data-page="slp-assessment-details"] .completed-assessment-print-report__section,
  body[data-page="patient-assessment-details"] .completed-assessment-print-report__section,
  body[data-page="slp-assessment-details"] .completed-assessment-report-field,
  body[data-page="patient-assessment-details"] .completed-assessment-report-field,
  body[data-page="slp-assessment-details"] .completed-assessment-report-paragraph,
  body[data-page="patient-assessment-details"] .completed-assessment-report-paragraph,
  body[data-page="slp-assessment-details"] .completed-assessment-print-report__remarks,
  body[data-page="patient-assessment-details"] .completed-assessment-print-report__remarks {
    break-inside: avoid;
  }

  body[data-page="slp-assessment-details"] .completed-assessment-print-report__grid,
  body[data-page="patient-assessment-details"] .completed-assessment-print-report__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="slp-patient-dashboard"] {
    background: white;
  }

  body[data-page="slp-patient-dashboard"] .child-dash-print-hidden,
  body[data-page="slp-patient-dashboard"] .child-dashboard-sidebar,
  body[data-page="slp-patient-dashboard"] .child-dashboard-topbar,
  body[data-page="slp-patient-dashboard"] .child-dashboard-section:not([data-dashboard-section="reports"]),
  body[data-page="slp-patient-dashboard"] .child-dashboard-report-builder,
  body[data-page="slp-patient-dashboard"] .child-dashboard-section__header {
    display: none !important;
  }

  body[data-page="slp-patient-dashboard"] .child-dashboard-shell,
  body[data-page="slp-patient-dashboard"] .child-dashboard-main {
    display: block;
    min-height: auto;
    padding: 0;
    background: white;
  }

  body[data-page="slp-patient-dashboard"] .child-dashboard-section {
    display: block;
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
  }

  body[data-page="slp-patient-dashboard"] .child-dashboard-report-output__paper {
    border: 0;
    box-shadow: none;
  }
}

.backend-link-button {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}

.backend-link-button:hover {
  color: var(--color-primary-dark);
}

.backend-link-button--danger {
  color: var(--color-error);
}

.child-profile-card {
  display: grid;
  gap: var(--spacing-6);
  padding: var(--spacing-6);
}

.child-profile-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.child-profile-card__photo,
.child-profile-card__avatar {
  flex: 0 0 auto;
  width: 10.75rem;
  height: 10.75rem;
  border-radius: var(--radius-xl);
}

.child-profile-card__photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  background-color: var(--color-primary-bg);
  border: 3px solid white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

.child-profile-card__photo.child-dashboard-photo-fallback {
  color: var(--color-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
}

.child-profile-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.child-profile-card__name {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.child-profile-card__meta {
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

.child-profile-card__grid,
.child-profile-card__activity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.child-profile-card__field {
  display: grid;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.child-profile-card__field span,
.child-profile-card__activity h3 {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.child-profile-card__field strong {
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: pre-wrap;
}

.child-profile-card__activity > div {
  padding: var(--spacing-5);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-xl);
}

.child-profile-card__activity ul {
  display: grid;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.child-profile-card__activity li {
  position: relative;
  padding-left: var(--spacing-5);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
}

.child-profile-card__activity li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  content: "";
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.backend-empty-state {
  display: grid;
  justify-items: start;
  gap: var(--spacing-4);
  padding: var(--spacing-10);
}

.backend-empty-state h2 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.backend-empty-state p {
  color: var(--color-foreground-muted);
}

.no-records-found {
  grid-column: 1 / -1;
  text-align: left;
  color: var(--color-foreground);
  padding: var(--spacing-8);
  background-color: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
  border-radius: var(--radius-lg);
}

.no-records-found h2 {
  margin: 0 0 var(--spacing-2);
  color: inherit;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.no-records-found p {
  margin: 0;
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.backend-footer {
  padding: var(--spacing-6) 0;
  color: var(--color-foreground-muted);
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
}

.backend-footer__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  font-size: var(--font-size-sm);
}

.backend-footer a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 820px) {
  .backend-header__container,
  .backend-footer__container {
    align-items: flex-start;
    flex-direction: column;
  }

  .backend-header__container {
    align-items: center;
    flex-direction: row;
    min-height: 4rem;
  }

  .backend-header__nav,
  .backend-header__container > .btn,
  .backend-header__container > .backend-header__user {
    display: none;
  }

  .staff-layout-shell {
    display: block;
  }

  .staff-layout-shell .staff-sidebar {
    display: none;
  }

  .backend-action-grid,
  .backend-form-grid,
  .slp-profile-social-grid,
  .child-profile-card__grid,
  .child-profile-card__activity {
    grid-template-columns: 1fr;
  }

  .backend-table-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .backend-action-card {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .backend-hero {
    padding: var(--spacing-12) 0 var(--spacing-8);
  }

  .backend-form-card,
  .child-profile-card,
  .backend-empty-state,
  .backend-action-card {
    padding: var(--spacing-5);
  }

  .child-profile-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .auth-page {
    padding: var(--spacing-4);
  }

  .home-login__grid {
    grid-template-columns: 1fr;
  }

  .auth-page__shell {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: var(--radius-2xl);
  }

  .auth-page__brand-panel,
  .auth-page__form-panel {
    padding: var(--spacing-8);
  }

  .auth-page__graphic {
    min-height: 13rem;
  }

  .auth-page__image {
    width: min(18rem, 82%);
  }
}

@media (max-width: 560px) {
  .auth-page {
    padding: 0;
  }

  .home-login {
    padding: var(--spacing-5) 0;
  }

  .home-login__column {
    padding: var(--spacing-5);
    border-radius: var(--radius-xl);
  }

  .auth-page__shell {
    min-height: 100vh;
    border: none;
    border-radius: 0;
  }

  .auth-page__brand-panel,
  .auth-page__form-panel,
  .dashboard-page__card {
    padding: var(--spacing-6);
  }

  .auth-page__graphic-card {
    position: static;
    margin: var(--spacing-2);
  }

  .auth-page__graphic {
    flex-wrap: wrap;
    align-items: center;
  }

  .dashboard-page__header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Badge Component
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.badge--primary {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.badge--success {
  color: #166534;
  background-color: var(--color-success-bg);
  border: 1px solid rgba(34, 197, 94, 0.24);
}

.badge--warning {
  color: #92400e;
  background-color: #fef3c7;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.badge__icon {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: rgba(250, 249, 252, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-light);
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.header__logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-lg);
}

.header__logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.header__nav {
  display: none;
  align-items: center;
  gap: var(--spacing-6);
}

.header__nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground-muted);
  transition: color var(--transition-fast);
}

.header__nav-link:hover {
  color: var(--color-foreground);
}

.header__actions {
  display: none;
  align-items: center;
  gap: var(--spacing-3);
}

.header__user {
  display: inline-flex;
  align-items: center;
  max-width: 14rem;
  gap: var(--spacing-2);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  min-width: 0;
}

.header__user--mobile {
  width: 100%;
  max-width: none;
  padding: var(--spacing-2) 0;
}

.header__user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  color: white;
  background: var(--color-primary);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  overflow: hidden;
}

.header__user-avatar--image {
  background-position: center;
  background-size: cover;
}

.header__user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__profile {
  position: relative;
}

.header__profile-toggle {
  display: inline-flex;
  align-items: center;
  max-width: 16rem;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-foreground);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.header__profile-toggle:hover,
.header__profile-toggle:focus-visible,
.header__profile--open .header__profile-toggle {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.header__profile-caret {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--color-foreground-muted);
}

.header__profile-caret svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header__profile-menu {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  display: grid;
  min-width: 12rem;
  padding: var(--spacing-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.header__profile--open .header__profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header__profile-menu-link {
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--color-foreground);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.header__profile-menu-link:hover,
.header__profile-menu-link:focus-visible {
  color: var(--color-primary);
  background: var(--color-primary-bg);
}

.header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-foreground-muted);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-fast);
}

.header__menu-toggle:hover {
  background-color: var(--color-background-alt);
}

.header__menu-icon--close {
  display: none;
}

.header--menu-open .header__menu-icon--open {
  display: none;
}

.header--menu-open .header__menu-icon--close {
  display: block;
}

.header__mobile-menu {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--spacing-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-background);
  pointer-events: none;
  transition:
    max-height var(--transition-normal),
    padding var(--transition-normal),
    opacity var(--transition-normal),
    transform var(--transition-normal),
    visibility var(--transition-normal);
}

.header--menu-open .header__mobile-menu {
  max-height: min(32rem, calc(100vh - 4rem));
  overflow-y: auto;
  padding: var(--spacing-4);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.header__mobile-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.header__mobile-group + .header__mobile-group {
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-1);
  border-top: 1px solid var(--color-border);
}

.header__mobile-menu--staff .header__mobile-group--staff .header__mobile-link {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

.header__mobile-menu--staff .header__mobile-group--public .header__mobile-link {
  font-size: var(--font-size-xs);
}

.header__mobile-link {
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground-muted);
  transition: color var(--transition-fast);
}

.header__mobile-link:hover {
  color: var(--color-foreground);
}

.header__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .header__nav {
    display: flex;
  }
  
  .header__actions {
    display: flex;
  }
  
  .header__menu-toggle {
    display: none;
  }

  .header__mobile-menu {
    display: none;
  }
}

@media (max-width: 820px) {
  .backend-header .header__menu-toggle {
    display: flex;
  }

  .backend-header .header__mobile-menu {
    display: block;
  }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  position: relative;
  padding: var(--spacing-20) 0 var(--spacing-16);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__bg-gradient {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(80px);
}

.hero__bg-gradient--primary {
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background-color: var(--color-primary-bg);
}

.hero__bg-gradient--accent {
  bottom: -50px;
  right: -100px;
  width: 300px;
  height: 250px;
  background-color: var(--color-accent-bg);
}

.hero__grid {
  display: grid;
  gap: var(--spacing-12);
  align-items: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__title {
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-foreground);
  text-wrap: balance;
}

.hero__title-highlight {
  color: var(--color-primary);
}

.hero__description {
  margin-bottom: var(--spacing-8);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
  text-wrap: pretty;
  max-width: 36rem;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 100%;
  margin-bottom: var(--spacing-8);
}

.hero__social-proof {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
}

.hero__avatars {
  display: flex;
}

.hero__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background);
  margin-left: -0.5rem;
  object-fit: cover;
}

.hero__avatar:first-child {
  margin-left: 0;
}

.hero__social-text {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.hero__social-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.hero__visual {
  position: relative;
}

.hero__app-preview {
  position: relative;
}

/* App Preview Card */
.app-preview {
  position: relative;
  z-index: 1;
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl), var(--shadow-primary);
}

.app-preview__header {
  display: flex;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.app-preview__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
}

.app-preview__dot--red {
  background-color: #f87171;
}

.app-preview__dot--yellow {
  background-color: #fbbf24;
}

.app-preview__dot--green {
  background-color: #4ade80;
}

.app-preview__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.app-preview__session {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.app-preview__session-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: var(--radius-full);
}

.app-preview__session-info {
  flex: 1;
}

.app-preview__session-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.app-preview__session-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.app-preview__session-badge {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-accent);
  color: white;
  border-radius: var(--radius-full);
}

.app-preview__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

.app-preview__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.app-preview__card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.app-preview__card-emoji {
  font-size: var(--font-size-2xl);
}

.app-preview__card-word {
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
}

.app-preview__recording {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-lg);
}

.app-preview__recording-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
}

.app-preview__recording-info {
  flex: 1;
}

.app-preview__recording-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-1);
}

.app-preview__recording-bar {
  height: 0.5rem;
  background-color: var(--color-background-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.app-preview__recording-progress {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.app-preview__recording-score {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* Floating Cards */
.hero__floating {
  position: absolute;
  z-index: 2;
}

.hero__floating--top {
  top: -1rem;
  right: -1rem;
}

.hero__floating--bottom {
  bottom: -1rem;
  left: -1rem;
}

.floating-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.hero__floating--bottom .floating-card {
  animation-delay: 1.5s;
}

.floating-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
}

.floating-card__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.floating-card__icon--report {
  font-size: var(--font-size-lg);
}

.floating-card__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.floating-card__content {
  display: flex;
  flex-direction: column;
}

.floating-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.floating-card__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

@media (min-width: 640px) {
  .hero__cta {
    flex-direction: row;
    width: auto;
  }
}

@media (min-width: 768px) {
  .hero {
    padding: var(--spacing-28) 0;
  }
  
  .hero__title {
    font-size: var(--font-size-5xl);
  }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
  }
  
  .hero__title {
    font-size: var(--font-size-6xl);
  }
}

/* ==========================================================================
   Section Base Styles
   ========================================================================== */
.section {
  padding: var(--spacing-20) 0;
}

.section--alt {
  background-color: var(--color-background-alt);
}

.section__header {
  max-width: 42rem;
  margin: 0 auto var(--spacing-16);
  text-align: center;
}

.section__title {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-foreground);
  text-wrap: balance;
}

.section__description {
  font-size: var(--font-size-lg);
  color: var(--color-foreground-muted);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .section {
    padding: var(--spacing-28) 0;
  }
  
  .section__title {
    font-size: var(--font-size-4xl);
  }
}

/* ==========================================================================
   CSS Background Patterns & Animations
   ========================================================================== */
.section--pattern {
  position: relative;
  background-color: var(--color-background-alt);
}

.section--pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, var(--color-primary-bg) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, var(--color-accent-bg) 2px, transparent 2px);
  background-size: 60px 60px;
  opacity: 0.5;
  animation: patternMove 20s linear infinite;
}

@keyframes patternMove {
  0% {
    background-position: 0 0, 30px 30px;
  }
  100% {
    background-position: 60px 60px, 90px 90px;
  }
}

.section--pattern-alt {
  position: relative;
  overflow: hidden;
}

.section--pattern-alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 0%, transparent 45%, var(--color-primary-bg) 45%, var(--color-primary-bg) 55%, transparent 55%, transparent 100%);
  background-size: 100px 100%;
  opacity: 0.3;
  animation: stripeMove 15s linear infinite;
}

@keyframes stripeMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50px);
  }
}

/* ==========================================================================
   SLP Problem Section
   ========================================================================== */
.section--slp-problem {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--color-background) 0%, var(--color-background-alt) 100%);
}

.section--slp-problem::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  opacity: 0.65;
  animation: slpProblemPattern 18s linear infinite;
  pointer-events: none;
}

@keyframes slpProblemPattern {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 44px 44px, 44px 44px;
  }
}

.slp-problem {
  position: relative;
  z-index: 1;
}

.slp-problem__grid {
  display: grid;
  gap: var(--spacing-8);
  align-items: center;
  margin-bottom: var(--spacing-12);
}

.slp-problem__visual {
  position: relative;
  min-height: 28rem;
}

.slp-problem__image-placeholder {
  min-height: 28rem;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 30% 20%, rgba(20, 184, 166, 0.18), transparent 32%),
    radial-gradient(circle at 75% 25%, rgba(124, 58, 237, 0.14), transparent 30%),
    linear-gradient(135deg, var(--color-card) 0%, var(--color-background-alt) 100%);
  box-shadow: var(--shadow-xl);
}

.slp-problem__testimonial {
  position: absolute;
  left: var(--spacing-4);
  bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  max-width: calc(100% - var(--spacing-8));
  padding: var(--spacing-3) var(--spacing-4);
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}

.slp-problem__testimonial-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-success);
  background-color: var(--color-success-bg);
  border-radius: var(--radius-full);
}

.slp-problem__testimonial-quote {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.slp-problem__testimonial-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.slp-problem__list {
  display: grid;
  gap: var(--spacing-3);
}

.slp-problem__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background-color: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.slp-problem__item:hover {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.slp-problem__warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border-radius: var(--radius-lg);
}

.slp-problem__item-title {
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.slp-problem__item-description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
}

.slp-problem__comparisons {
  display: grid;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-12);
}

.slp-comparison-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3);
  align-items: center;
  padding: var(--spacing-3);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
    var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.slp-comparison-card:hover {
  border-color: rgba(20, 184, 166, 0.35);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.slp-comparison-card__before,
.slp-comparison-card__after {
  min-width: 0;
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
}

.slp-comparison-card__before {
  background:
    linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(244, 63, 94, 0.03));
  border: 1px solid rgba(244, 63, 94, 0.14);
}

.slp-comparison-card__after {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.11), rgba(20, 184, 166, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.slp-comparison-card__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
  background-color: white;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transform: rotate(90deg);
}

.slp-comparison-card .comparison__label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  background-color: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-full);
}

.slp-comparison-card .comparison__text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-foreground-muted);
  text-wrap: pretty;
}

.slp-comparison-card__before .comparison__label {
  color: var(--color-rose);
}

.slp-comparison-card__after .comparison__label {
  color: var(--color-emerald);
}

.slp-comparison-card__after .comparison__text {
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
}

.slp-problem__closing {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.slp-problem__closing p {
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .slp-comparison-card {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }

  .slp-comparison-card__connector {
    transform: none;
  }
}

@media (min-width: 768px) {
  .slp-problem__comparisons {
    gap: var(--spacing-4);
  }
}

@media (min-width: 1024px) {
  .slp-problem__grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--spacing-12);
  }

}

/* ==========================================================================
   Confidence Journey Section
   ========================================================================== */
.section--confidence-journey {
  position: relative;
  overflow: hidden;
  background-color: var(--color-card);
}

.section--confidence-journey::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  pointer-events: none;
}

.confidence-journey {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-12);
  align-items: center;
}

.confidence-journey__content {
  max-width: 42rem;
}

.confidence-journey__title {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  color: var(--color-foreground);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

.confidence-journey__description {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
}

.confidence-journey__steps {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
}

.confidence-journey__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(14px);
  animation: confidenceStepIn 0.6s ease forwards;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.confidence-journey__step:nth-child(2) {
  animation-delay: 90ms;
}

.confidence-journey__step:nth-child(3) {
  animation-delay: 180ms;
}

.confidence-journey__step:nth-child(4) {
  animation-delay: 270ms;
}

.confidence-journey__step:hover,
.confidence-journey__step:focus,
.confidence-journey__step:focus-within {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(124, 58, 237, 0.08);
  outline: none;
  transform: translateY(-2px);
}

.confidence-journey__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-lg);
}

.confidence-journey__step-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confidence-journey__step h3 {
  margin-bottom: var(--spacing-1);
  color: var(--color-foreground);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.confidence-journey__step p {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.confidence-journey__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
}

.confidence-journey__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28rem;
}

.confidence-journey__orbit {
  --orbit-size: min(86vw, 30rem);
  --orbit-radius: calc(var(--orbit-size) * 0.38);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--orbit-size);
  height: var(--orbit-size);
}

.confidence-journey__ring,
.confidence-journey__pulse {
  position: absolute;
  inset: 10%;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.confidence-journey__ring {
  border: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(20, 184, 166, 0.12),
    0 24px 70px rgba(124, 58, 237, 0.12);
}

.confidence-journey__ring::before,
.confidence-journey__ring::after {
  position: absolute;
  inset: 14%;
  content: "";
  border: 1px dashed rgba(20, 184, 166, 0.28);
  border-radius: inherit;
}

.confidence-journey__ring::after {
  inset: 31%;
  border-color: rgba(124, 58, 237, 0.18);
}

.confidence-journey__pulse {
  border: 1px solid rgba(20, 184, 166, 0.24);
  animation: confidencePulse 4.8s ease-out infinite;
}

.confidence-journey__orbit-track {
  position: absolute;
  inset: 0;
  animation: confidenceOrbit 22s linear infinite;
}

.confidence-journey__portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: var(--spacing-2);
  width: 6rem;
  margin: 0;
  transform: rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--angle))) translate(-50%, -50%);
}

.confidence-journey__portrait span {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0.35rem;
  background-color: var(--color-card);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  animation: confidenceCounterOrbit 22s linear infinite;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.confidence-journey__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.confidence-journey__portrait figcaption {
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-foreground);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  animation: confidenceCounterOrbit 22s linear infinite;
}

.confidence-journey__portrait--choose span {
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.22);
}

.confidence-journey__portrait--practice span {
  box-shadow: 0 14px 32px rgba(20, 184, 166, 0.22);
}

.confidence-journey__portrait--record span {
  box-shadow: 0 14px 32px rgba(59, 130, 246, 0.2);
}

.confidence-journey__portrait--celebrate span {
  box-shadow: 0 14px 32px rgba(245, 158, 11, 0.2);
}

.confidence-journey__center {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(72%, 18rem);
  padding: var(--spacing-6);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)),
    var(--color-card);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.confidence-journey__center-kicker {
  margin-bottom: var(--spacing-2);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.confidence-journey__center h3 {
  color: var(--color-foreground);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

.confidence-journey__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-5);
}

.confidence-journey__chips span {
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-full);
}

.confidence-journey:hover .confidence-journey__orbit-track,
.confidence-journey:focus-within .confidence-journey__orbit-track,
.confidence-journey:hover .confidence-journey__portrait span,
.confidence-journey:focus-within .confidence-journey__portrait span,
.confidence-journey:hover .confidence-journey__portrait figcaption,
.confidence-journey:focus-within .confidence-journey__portrait figcaption {
  animation-play-state: paused;
}

.confidence-journey:has([data-confidence-step="choose"]:hover) .confidence-journey__portrait--choose span,
.confidence-journey:has([data-confidence-step="choose"]:focus) .confidence-journey__portrait--choose span,
.confidence-journey:has([data-confidence-step="practice"]:hover) .confidence-journey__portrait--practice span,
.confidence-journey:has([data-confidence-step="practice"]:focus) .confidence-journey__portrait--practice span,
.confidence-journey:has([data-confidence-step="record"]:hover) .confidence-journey__portrait--record span,
.confidence-journey:has([data-confidence-step="record"]:focus) .confidence-journey__portrait--record span,
.confidence-journey:has([data-confidence-step="celebrate"]:hover) .confidence-journey__portrait--celebrate span,
.confidence-journey:has([data-confidence-step="celebrate"]:focus) .confidence-journey__portrait--celebrate span,
.confidence-journey:has([data-confidence-step]:hover) .confidence-journey__center,
.confidence-journey:has([data-confidence-step]:focus) .confidence-journey__center {
  border-color: rgba(124, 58, 237, 0.34);
  box-shadow: var(--shadow-2xl), 0 0 0 1px rgba(20, 184, 166, 0.12);
  transform: scale(1.03);
}

@keyframes confidenceOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes confidenceCounterOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes confidencePulse {
  0% {
    opacity: 0.72;
    transform: scale(0.76);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes confidenceStepIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 640px) {
  .confidence-journey__actions {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .confidence-journey__title {
    font-size: var(--font-size-4xl);
  }

  .confidence-journey__visual {
    min-height: 34rem;
  }
}

@media (min-width: 1024px) {
  .confidence-journey {
    grid-template-columns: minmax(0, 0.96fr) minmax(28rem, 1.04fr);
    gap: var(--spacing-16);
  }

  .confidence-journey__orbit {
    --orbit-size: min(40vw, 34rem);
  }
}

@media (max-width: 520px) {
  .confidence-journey__orbit {
    --orbit-size: min(90vw, 23rem);
    --orbit-radius: calc(var(--orbit-size) * 0.36);
  }

  .confidence-journey__portrait {
    width: 4.8rem;
  }

  .confidence-journey__portrait span {
    width: 3.35rem;
    height: 3.35rem;
  }

  .confidence-journey__center {
    width: 68%;
    padding: var(--spacing-4);
  }

  .confidence-journey__center h3 {
    font-size: var(--font-size-base);
  }

  .confidence-journey__chips span {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confidence-journey__orbit-track,
  .confidence-journey__portrait span,
  .confidence-journey__portrait figcaption,
  .confidence-journey__pulse,
  .confidence-journey__step {
    animation: none;
  }

  .confidence-journey__step {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   How It Works Section - Steps
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--spacing-6);
}

.steps__item {
  position: relative;
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  transition: all var(--transition-base);
}

.steps__item:hover {
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary-bg);
}

.steps__item:hover .steps__icon-wrapper {
  background-color: var(--color-primary);
  color: white;
}

.steps__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--spacing-4);
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.steps__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.steps__number {
  position: absolute;
  top: var(--spacing-6);
  right: var(--spacing-6);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-border);
  transition: color var(--transition-base);
}

.steps__item:hover .steps__number {
  color: var(--color-primary-bg);
}

.steps__title {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.steps__description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Features Section
   ========================================================================== */
.features {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-6);
}

.feature {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  transition: box-shadow var(--transition-base);
}

.feature:hover {
  box-shadow: var(--shadow-lg);
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius-xl);
}

.feature__icon--blue {
  background-color: var(--color-blue-bg);
  color: var(--color-blue);
}

.feature__icon--emerald {
  background-color: var(--color-emerald-bg);
  color: var(--color-emerald);
}

.feature__icon--amber {
  background-color: var(--color-amber-bg);
  color: var(--color-amber);
}

.feature__icon--purple {
  background-color: var(--color-purple-bg);
  color: var(--color-purple);
}

.feature__icon--rose {
  background-color: var(--color-rose-bg);
  color: var(--color-rose);
}

.feature__icon--cyan {
  background-color: var(--color-cyan-bg);
  color: var(--color-cyan);
}

.feature__title {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.feature__description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
}

@media (min-width: 768px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Activities Section
   ========================================================================== */
.activities {
  display: grid;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-16);
}

.activity {
  position: relative;
  padding: var(--spacing-6);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-base);
}

.activity:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.activity--blue {
  background: linear-gradient(135deg, var(--color-blue-bg) 0%, var(--color-cyan-bg) 100%);
}

.activity--purple {
  background: linear-gradient(135deg, var(--color-purple-bg) 0%, var(--color-rose-bg) 100%);
}

.activity--amber {
  background: linear-gradient(135deg, var(--color-amber-bg) 0%, rgba(249, 115, 22, 0.1) 100%);
}

.activity--emerald {
  background: linear-gradient(135deg, var(--color-emerald-bg) 0%, var(--color-accent-bg) 100%);
}

.activity--rose {
  background: linear-gradient(135deg, var(--color-rose-bg) 0%, rgba(239, 68, 68, 0.1) 100%);
}

.activity--indigo {
  background: linear-gradient(135deg, var(--color-indigo-bg) 0%, var(--color-purple-bg) 100%);
}

.activity__emoji {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--spacing-4);
}

.activity__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin-bottom: var(--spacing-1);
}

.activity__description {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

@media (min-width: 640px) {
  .activities {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .activities {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sound Modules */
.sound-modules {
  padding: var(--spacing-8);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.sound-modules__header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.sound-modules__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin-bottom: var(--spacing-2);
}

.sound-modules__subtitle {
  color: var(--color-foreground-muted);
}

.sound-modules__grid {
  display: grid;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

.sound-module {
  padding: var(--spacing-5);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.sound-module__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.sound-module__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
}

.sound-module__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.sound-module__count {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.sound-module__words {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.sound-module__word {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.sound-modules__cta {
  text-align: center;
}

@media (min-width: 768px) {
  .sound-modules__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   For SLPs Section
   ========================================================================== */
.for-slps {
  display: grid;
  gap: var(--spacing-12);
  align-items: start;
}

.for-slps__title {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-foreground);
  text-wrap: balance;
}

.for-slps__description {
  margin-bottom: var(--spacing-8);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
  text-wrap: pretty;
}

.benefits {
  display: grid;
  gap: var(--spacing-3);
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: var(--radius-full);
}

.benefit__text {
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
}

.for-slps__image-card {
  overflow: hidden;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  margin-top: var(--spacing-10);
}

.for-slps__image {
  width: 100%;
  min-height: 24rem;
  object-fit: cover;
}

/* Comparison */
.comparison__title {
  text-align: center;
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.comparison__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.comparison__item {
  display: grid;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background-color: var(--color-card);
}

.comparison__before,
.comparison__after {
  padding: var(--spacing-4);
}

.comparison__before {
  background-color: rgba(244, 63, 94, 0.05);
  border-bottom: 1px solid var(--color-border);
}

.comparison__after {
  background-color: rgba(16, 185, 129, 0.05);
}

.comparison__label {
  display: block;
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison__before .comparison__label {
  color: var(--color-rose);
}

.comparison__after .comparison__label {
  color: var(--color-emerald);
}

.comparison__text {
  font-size: var(--font-size-sm);
}

.comparison__before .comparison__text {
  color: var(--color-foreground-muted);
}

.comparison__after .comparison__text {
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
}

/* Quote */
.quote {
 
  padding: var(--spacing-8);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.quote__content {
  text-align: center;
}

.quote__text {
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  color: var(--color-foreground);
}

.quote__subtext {
  color: var(--color-foreground-muted);
}

@media (min-width: 640px) {
  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .comparison__item {
    grid-template-columns: 1fr 1fr;
  }
  
  .comparison__before {
    border-bottom: none;
    border-right: 1px solid var(--color-border);
  }
  
  .quote {
    padding: var(--spacing-12);
  }
  
  .quote__text {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 1024px) {
  .for-slps {
    grid-template-columns: 1fr 1fr;
  }
  
  .for-slps__title {
    font-size: var(--font-size-4xl);
  }
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */
.testimonials {
  display: grid;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

.testimonial {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.testimonial__stars {
  display: flex;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-4);
}

.testimonial__star {
  width: 1rem;
  height: 1rem;
  color: #fbbf24;
}

.testimonial__content {
  margin-bottom: var(--spacing-6);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.testimonial__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
}

.testimonial__role {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.testimonials__trustpilot {
  text-align: center;
}

.trustpilot-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-foreground-muted);
  transition: all var(--transition-base);
}

.trustpilot-link:hover {
  background-color: var(--color-background-alt);
  color: var(--color-foreground);
  border-color: var(--color-primary);
}

.trustpilot-link__icon {
  color: #00b67a;
}

.trustpilot-link__arrow {
  transition: transform var(--transition-fast);
}

.trustpilot-link:hover .trustpilot-link__arrow {
  transform: translate(2px, -2px);
}

@media (min-width: 768px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */
.pricing {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-6);
}

.pricing__card {
  position: relative;
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.pricing__card--popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xl), var(--shadow-primary);
}

.pricing__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--spacing-1) var(--spacing-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing__header {
  margin-bottom: var(--spacing-6);
}

.pricing__name {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.pricing__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-1);
}

.pricing__amount {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.pricing__period {
  color: var(--color-foreground-muted);
}

.pricing__description {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.pricing__features {
  margin-bottom: var(--spacing-8);
}

.pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.pricing__check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .pricing {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .pricing__card {
    padding: var(--spacing-8);
  }
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta {
  position: relative;
  padding: var(--spacing-8);
  background-color: var(--color-primary);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  text-align: center;
}

.cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta__bg-circle {
  position: absolute;
  width: 15rem;
  height: 15rem;
  background-color: white;
  border-radius: var(--radius-full);
  opacity: 0.1;
  filter: blur(60px);
}

.cta__bg-circle--left {
  top: -5rem;
  left: -5rem;
}

.cta__bg-circle--right {
  bottom: -5rem;
  right: -5rem;
}

.cta__content {
  position: relative;
}

.cta__title {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: white;
  text-wrap: balance;
}

.cta__description {
  margin: 0 auto var(--spacing-8);
  max-width: 36rem;
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.8);
  text-wrap: pretty;
}

.cta__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.cta__note {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 640px) {
  .cta__actions {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .cta {
    padding: var(--spacing-16);
  }
  
  .cta__title {
    font-size: var(--font-size-4xl);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background-color: var(--color-card);
  border-top: 1px solid var(--color-border);
}

.footer__container {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.footer__grid {
  display: grid;
  gap: var(--spacing-8);
}

.footer__brand {
  max-width: 20rem;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.footer__logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-lg);
}

.footer__logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.footer__tagline {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.footer__social {
  display: flex;
  gap: var(--spacing-4);
}

.footer__social-link {
  color: var(--color-foreground-muted);
  transition: color var(--transition-fast);
}

.footer__social-link:hover {
  color: var(--color-foreground);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-8);
}

.footer__heading {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.footer__link {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-foreground);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding-top: var(--spacing-8);
  margin-top: var(--spacing-12);
  border-top: 1px solid var(--color-border);
}

.footer__copyright,
.footer__love {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

@media (min-width: 640px) {
  .footer__links {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .footer__container {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
  
  .footer__bottom {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr 4fr;
  }
}

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

.btn--hidden {
  display: none;
}

.hidden {
  display: none!important;
}

/* ==========================================================================
   Chips
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.chip--soft {
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
}

.chip--muted {
  background-color: var(--color-background-alt);
  color: var(--color-foreground-muted);
}

.chip-muted {
  background-color: var(--color-background-alt);
  color: var(--color-foreground-muted);
}

.chip-soft {
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
}

.chip--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.chip-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.chip--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.chip-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.chip-warn {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.chip--danger {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.chip-danger {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.chip--hidden {
  display: none;
}

.note-star-rating-field[hidden] {
  display: none;
}

.note-star-rating {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.note-star-rating__star {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--color-border);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.note-star-rating__star:hover,
.note-star-rating__star.is-hovered,
.note-star-rating__star.is-active {
  color: #f5b301;
  transform: translateY(-1px);
}

.note-star-rating__star:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.notes-star-display {
  display: inline-flex;
  gap: 2px;
  min-width: 72px;
  color: var(--color-border);
  font-size: 16px;
  line-height: 1;
}

.notes-star-display--empty {
  color: var(--color-foreground-muted);
}

.notes-star-display__star.is-active {
  color: #f5b301;
}

.exercise-upload-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin: var(--spacing-4) 0;
}

.exercise-upload-progress[hidden] {
  display: none;
}

.exercise-upload-progress__bar {
  flex: 1 1 auto;
  height: 12px;
  overflow: hidden;
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.exercise-upload-progress__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
  transition: width 0.2s ease;
}

.content-ai-image-tools {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-top: var(--spacing-3);
}

.content-ai-image-tools__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  background: var(--color-primary-bg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.content-ai-image-preview {
  position: relative;
  width: 112px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background-alt);
}

.content-ai-image-preview[hidden] {
  display: none;
}

.content-ai-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-ai-image-preview__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-card);
  background: rgba(26, 22, 37, 0.72);
  cursor: pointer;
  font-weight: var(--font-weight-bold);
}

.exercise-edit-dialog__panel {
  width: min(720px, calc(100vw - 32px));
}

.backend-link-button--danger {
  color: var(--color-error);
}

.exercise-list-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.exercise-list-toolbar .auth-field {
  width: min(24rem, 100%);
}

.exercise-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-5);
}

.exercise-video-grid .backend-empty-state {
  grid-column: 1 / -1;
}

.exercise-video-card {
  overflow: hidden;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.exercise-video-card video,
.exercise-video-card__missing {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111827;
}

.exercise-video-card__missing {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  color: white;
  text-align: center;
}

.exercise-video-card__body {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
}

.exercise-video-card__body h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .exercise-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .exercise-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .exercise-list-toolbar .auth-field,
  .exercise-list-toolbar .btn {
    width: 100%;
  }

  .exercise-video-grid {
    grid-template-columns: 1fr;
  }
}

.patient-notes-drawer-trigger {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 92;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  min-width: 48px;
  max-height: min(18rem, calc(100vh - 32px));
  padding: 14px 10px;
  color: white;
  background: var(--color-primary);
  border: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.patient-notes-drawer-trigger:hover,
.patient-notes-drawer-trigger:focus-visible {
  background: var(--color-primary-dark);
  transform: translateY(-50%) translateX(-4px);
}

.patient-notes-drawer-trigger__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.patient-notes-drawer-trigger__icon svg {
  width: 100%;
  height: 100%;
}

.patient-notes-drawer-trigger__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}

.patient-notes-drawer {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
  visibility: hidden;
}

.patient-notes-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.patient-notes-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  border: 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.patient-notes-drawer.is-open .patient-notes-drawer__backdrop {
  opacity: 1;
}

.patient-notes-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(520px, 100vw);
  height: 100%;
  background: var(--color-card);
  border-left: 1px solid var(--color-border);
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.2);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}

.patient-notes-drawer.is-open .patient-notes-drawer__panel {
  transform: translateX(0);
}

.patient-notes-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.patient-notes-drawer__header h2 {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.patient-notes-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--color-foreground);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.patient-notes-drawer__close:hover,
.patient-notes-drawer__close:focus-visible {
  color: white;
  background: var(--color-primary);
}

.patient-notes-drawer__content {
  display: grid;
  gap: var(--spacing-6);
  overflow-y: auto;
  padding: var(--spacing-6);
}

.patient-notes-drawer__section {
  display: grid;
  gap: var(--spacing-3);
}

.patient-notes-drawer__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.patient-notes-drawer__section-header h3 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

.patient-notes-drawer__section-header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.patient-notes-drawer__list {
  display: grid;
  gap: var(--spacing-3);
}

.patient-notes-drawer-card {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.patient-notes-drawer-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.patient-notes-drawer-card__meta time {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  text-align: right;
}

.patient-notes-drawer-card__rating .notes-star-display {
  min-width: 0;
  font-size: 18px;
}

.patient-notes-drawer-card p {
  margin: 0;
  color: var(--color-foreground);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.patient-notes-drawer__empty {
  margin: 0;
  padding: var(--spacing-4);
  color: var(--color-foreground-muted);
  background: var(--color-background-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

body.patient-notes-drawer-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .patient-notes-drawer-trigger {
    top: auto;
    right: var(--spacing-4);
    bottom: var(--spacing-4);
    flex-direction: row;
    border-radius: var(--radius-full);
    transform: none;
  }

  .patient-notes-drawer-trigger:hover,
  .patient-notes-drawer-trigger:focus-visible {
    transform: translateY(-2px);
  }

  .patient-notes-drawer-trigger__text {
    max-width: 10rem;
    text-orientation: initial;
    writing-mode: horizontal-tb;
    white-space: normal;
  }

  .patient-notes-drawer__panel {
    width: 100vw;
  }

  .patient-notes-drawer__header,
  .patient-notes-drawer__content {
    padding: var(--spacing-5);
  }

  .patient-notes-drawer-card__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .patient-notes-drawer-card__meta time {
    text-align: left;
  }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-sm);
}

.breadcrumbs__link {
  color: var(--color-foreground-muted);
  transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
  color: var(--color-primary);
}

.breadcrumbs__separator {
  color: var(--color-foreground-light);
}

.breadcrumbs__current {
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Practice Hero Section
   ========================================================================== */
.practice-hero {
  padding: var(--spacing-12) 0 var(--spacing-16);
  background-color: var(--color-background);
}

.practice-hero__grid {
  display: grid;
  gap: var(--spacing-8);
}

.practice-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.practice-hero__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  line-height: var(--line-height-tight);
}

.practice-hero__description {
  font-size: var(--font-size-lg);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
  max-width: 36rem;
}

.practice-hero__note {
  padding: var(--spacing-4);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  border-left: 3px solid var(--color-accent);
}

.practice-hero__sidebar {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.practice-hero__sidebar-title {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

@media (min-width: 768px) {
  .practice-hero__title {
    font-size: var(--font-size-5xl);
  }
}

@media (min-width: 1024px) {
  .practice-hero__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ==========================================================================
   Metrics Grid & Cards
   ========================================================================== */
.metrics-grid {
  display: grid;
  gap: var(--spacing-3);
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-3);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.metric-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.metric-card__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

/* ==========================================================================
   Practice Cards Grid
   ========================================================================== */
.practice-cards-grid {
  display: grid;
  gap: var(--spacing-6);
}

.practice-card {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.practice-card__title {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.practice-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.practice-card__list li {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
}

.practice-card__list--numbered {
  list-style-type: decimal;
  padding-left: var(--spacing-5);
}

.practice-card__list--numbered li {
  padding-left: var(--spacing-2);
}

@media (min-width: 768px) {
  .practice-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Practice Support Grid (Demo + Audio)
   ========================================================================== */
.practice-support-grid {
  display: grid;
  gap: var(--spacing-6);
}

.demo-card {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.demo-card__video-wrap {
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-foreground);
}

.demo-card__video {
  width: 100%;
  display: block;
}

.demo-card__title {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.demo-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.sound-player {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.sound-player__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.sound-player__target {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.sound-player__hint {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.sound-player__btn {
  align-self: flex-start;
}

@media (min-width: 768px) {
  .practice-support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Practice Module
   ========================================================================== */
.practice-module-section {
  background: linear-gradient(180deg, var(--color-background) 0%, var(--color-background-alt) 100%);
}

.practice-module {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.practice-module__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.practice-module__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.practice-module__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

@media (min-width: 768px) {
  .practice-module {
    padding: var(--spacing-8);
  }

  .practice-module__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* Practice Tabs */
.practice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-2);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.practice-tabs__tab {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground-muted);
  background-color: transparent;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.practice-tabs__tab:hover {
  color: var(--color-foreground);
}

.practice-tabs__tab--active {
  background-color: var(--color-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Practice Layout */
.practice-layout {
  display: grid;
  gap: var(--spacing-6);
}

.practice-layout__panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.practice-layout__interaction {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-xl);
}

@media (min-width: 1024px) {
  .practice-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* Benchmark Card */
.benchmark-card {
  padding: var(--spacing-4);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-lg);
  text-align: center;
}

.benchmark-card__label {
  display: block;
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.benchmark-card__target {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.benchmark-card__progress {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

/* Stage Summary */
.stage-summary {
  padding: var(--spacing-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.stage-summary__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.stage-summary__eyebrow {
  display: block;
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stage-summary__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.stage-summary__helper {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

/* Practice Prompt */
.practice-prompt {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.practice-prompt__label {
  display: block;
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.practice-prompt__text {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.practice-instruction {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

/* Practice Visuals */
.practice-visuals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-8) 0;
}

.practice-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl), var(--shadow-primary);
  transition: all var(--transition-base);
}

.practice-start-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-2xl), 0 0 40px var(--color-primary-bg);
}

.practice-start-btn__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Practice Mouth Animation */
.practice-mouth {
  position: relative;
  width: 5rem;
  height: 3rem;
}

.practice-mouth__lip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 0.5rem;
  background-color: var(--color-rose);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.practice-mouth__lip--top {
  top: 0;
}

.practice-mouth__lip--bottom {
  bottom: 0;
}

.practice-mouth__burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  opacity: 0;
}

/* Practice Wave Animation */
.practice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  height: 2rem;
}

.practice-wave span {
  width: 4px;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: wave 1s ease-in-out infinite;
}

.practice-wave span:nth-child(1) { animation-delay: 0s; }
.practice-wave span:nth-child(2) { animation-delay: 0.1s; }
.practice-wave span:nth-child(3) { animation-delay: 0.2s; }
.practice-wave span:nth-child(4) { animation-delay: 0.3s; }
.practice-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.practice-wave--hidden {
  display: none;
}

/* Practice Loader */
.practice-loader {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.practice-loader span {
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: loader 1.2s ease-in-out infinite;
}

.practice-loader span:nth-child(1) { animation-delay: 0s; }
.practice-loader span:nth-child(2) { animation-delay: 0.2s; }
.practice-loader span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loader {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.practice-loader--hidden {
  display: none;
}

/* Feedback Panel */
.feedback-panel {
  padding: var(--spacing-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.feedback-panel--hidden {
  display: none;
}

.feedback-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
}

.feedback-panel__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin-bottom: var(--spacing-1);
}

.feedback-panel__replay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.feedback-panel__replay:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

.feedback-panel__replay--hidden {
  display: none;
}

.feedback-panel__text {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.feedback-panel__encouragement {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.feedback-panel__type {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

/* Practice Actions */
.practice-actions {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

/* ==========================================================================
   Challenge Card
   ========================================================================== */
.challenge-card {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.challenge-card__header {
  display: grid;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.challenge-card__title {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.challenge-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.challenge-card__helper {
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

@media (min-width: 768px) {
  .challenge-card {
    padding: var(--spacing-8);
  }

  .challenge-card__header {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* Challenge Levels */
.challenge-levels {
  display: grid;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.challenge-level {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  text-align: left;
  transition: all var(--transition-base);
}

.challenge-level:hover:not(.challenge-level--locked) {
  border-color: var(--color-primary);
  background-color: var(--color-card);
}

.challenge-level--active {
  border-color: var(--color-primary);
  background-color: var(--color-card);
  box-shadow: var(--shadow-md);
}

.challenge-level--locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.challenge-level__top {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.challenge-level__note {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.challenge-level__status {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
}

.challenge-level--locked .challenge-level__status {
  color: var(--color-foreground-muted);
}

@media (min-width: 640px) {
  .challenge-levels {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Challenge Layout */
.challenge-layout {
  display: grid;
  gap: var(--spacing-6);
}

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

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

@media (min-width: 1024px) {
  .challenge-layout {
    grid-template-columns: 2fr 1fr;
  }
}

/* Challenge Arena */
.challenge-arena-wrap {
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-xl);
}

.challenge-arena-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-4);
}

.challenge-arena-head__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  margin-bottom: var(--spacing-1);
}

.challenge-arena-head__target {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.challenge-badges {
  display: flex;
  gap: var(--spacing-2);
}

.challenge-arena {
  position: relative;
  height: 8rem;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.challenge-arena__lane {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-border);
  transform: translateY(-50%);
}

.challenge-arena__track {
  position: absolute;
  top: 50%;
  left: var(--spacing-4);
  right: var(--spacing-4);
  transform: translateY(-50%);
}

.challenge-bubble {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
  color: white;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: left 0.5s ease;
}

.challenge-pin {
  position: absolute;
  top: 50%;
  right: var(--spacing-4);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.challenge-pin__head {
  width: 1rem;
  height: 1rem;
  background-color: var(--color-rose);
  border-radius: var(--radius-full);
}

.challenge-pin__shaft {
  width: 2px;
  height: 1.5rem;
  background-color: var(--color-foreground-muted);
}

.challenge-spark {
  position: absolute;
  top: 50%;
  right: var(--spacing-6);
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: radial-gradient(circle, var(--color-warning) 0%, transparent 70%);
  border-radius: var(--radius-full);
  animation: spark 0.5s ease-out;
}

.challenge-spark--hidden {
  display: none;
}

@keyframes spark {
  0% {
    transform: translateY(-50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(2);
    opacity: 0;
  }
}

/* Challenge Distance */
.challenge-distance {
  margin-top: var(--spacing-4);
}

/* Progress Bar */
.progress-bar__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.progress-bar {
  height: 0.5rem;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Challenge Controls */
.challenge-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

/* Challenge Listening */
.challenge-listening {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-lg);
}

.challenge-listening--hidden {
  display: none;
}

/* Challenge Feedback */
.challenge-feedback {
  background-color: var(--color-background-alt);
}

/* Challenge Stats */
.challenge-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}

/* Challenge Progress Card */
.challenge-progress-card {
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.challenge-progress-card__note {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

/* Challenge Complete */
.challenge-complete {
  padding: var(--spacing-6);
  background-color: var(--color-success-bg);
  border-radius: var(--radius-xl);
  text-align: center;
}

.challenge-complete--hidden {
  display: none;
}

.challenge-complete__title {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
}

.challenge-complete__text {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

/* Challenge Celebration */
.challenge-celebration {
  padding: var(--spacing-8);
  background: linear-gradient(135deg, var(--color-primary-bg) 0%, var(--color-accent-bg) 100%);
  border-radius: var(--radius-2xl);
  text-align: center;
}

.challenge-celebration--hidden {
  display: none;
}

.challenge-confetti {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.challenge-confetti span {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  animation: confetti 1s ease-out forwards;
}

.challenge-confetti span:nth-child(1) { background-color: var(--color-primary); animation-delay: 0s; }
.challenge-confetti span:nth-child(2) { background-color: var(--color-accent); animation-delay: 0.1s; }
.challenge-confetti span:nth-child(3) { background-color: var(--color-warning); animation-delay: 0.2s; }
.challenge-confetti span:nth-child(4) { background-color: var(--color-rose); animation-delay: 0.3s; }
.challenge-confetti span:nth-child(5) { background-color: var(--color-blue); animation-delay: 0.4s; }
.challenge-confetti span:nth-child(6) { background-color: var(--color-emerald); animation-delay: 0.5s; }

@keyframes confetti {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-2rem) rotate(360deg);
    opacity: 0;
  }
}

.challenge-celebration__title {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.challenge-celebration__text {
  margin-bottom: var(--spacing-6);
  color: var(--color-foreground-muted);
}

.challenge-celebration__summary {
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

/* ==========================================================================
   Tip Banner
   ========================================================================== */
.tip-banner {
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  text-align: center;
}

.tip-banner__title {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.tip-banner__text {
  font-size: var(--font-size-base);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Recording Modal
   ========================================================================== */
.recording-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.recording-modal-backdrop--hidden {
  display: none;
}

.recording-modal {
  width: 100%;
  max-width: 24rem;
  padding: var(--spacing-6);
  background-color: var(--color-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}

.recording-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.recording-modal__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.recording-modal__dot {
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--color-error);
  border-radius: var(--radius-full);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.recording-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.recording-modal__close:hover {
  color: var(--color-foreground);
  background-color: var(--color-border);
}

.recording-modal__preview {
  margin-bottom: var(--spacing-4);
  background-color: var(--color-foreground);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.recording-modal__preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recording-modal__stop {
  background-color: var(--color-error);
}

.recording-modal__stop:hover {
  background-color: #dc2626;
}

/* ==========================================================================
   Analysis Modal
   ========================================================================== */
.analysis-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  background-color: rgba(26, 22, 37, 0.62);
  backdrop-filter: blur(5px);
}

.analysis-modal-backdrop--hidden {
  display: none;
}

.analysis-modal {
  width: min(100%, 42rem);
  max-height: min(88vh, 44rem);
  overflow: hidden;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}

.analysis-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}

.analysis-modal__title {
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.analysis-modal__word {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.analysis-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
}

.analysis-modal__body {
  display: grid;
  gap: var(--spacing-5);
  max-height: calc(min(88vh, 44rem) - 5.5rem);
  overflow-y: auto;
  padding: var(--spacing-5);
}

.analysis-modal__heard,
.analysis-modal__error {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.analysis-modal__heard {
  background-color: var(--color-background-alt);
  color: var(--color-foreground-muted);
}

.analysis-modal__error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.analysis-modal__score-row {
  display: grid;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-xl);
}

.analysis-modal__big-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.analysis-modal__big-label,
.analysis-modal__section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analysis-modal__pills,
.analysis-modal__phonemes,
.analysis-modal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.analysis-modal__pill,
.analysis-modal__phoneme-chip,
.analysis-modal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.analysis-modal__pill {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
}

.analysis-modal__pill-value,
.analysis-modal__phoneme-score {
  font-weight: var(--font-weight-bold);
}

.analysis-modal__phoneme-section,
.analysis-modal__video-section {
  display: grid;
  gap: var(--spacing-3);
}

.analysis-modal__video {
  width: 100%;
  border-radius: var(--radius-xl);
  background-color: var(--color-foreground);
}

.analysis-modal-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.analysis-modal-link svg {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   Platform Intro Modal
   ========================================================================== */
.platform-intro-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  background-color: rgba(26, 22, 37, 0.72);
  backdrop-filter: blur(10px);
}

.platform-intro-modal--hidden {
  display: none;
}

.platform-intro-modal__panel {
  width: min(56rem, 100%);
  max-height: calc(100vh - var(--spacing-8));
  overflow-y: auto;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}

.platform-intro-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
}

.platform-intro-modal__eyebrow {
  margin-bottom: var(--spacing-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.platform-intro-modal__title {
  color: var(--color-foreground);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.platform-intro-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.platform-intro-modal__close:hover {
  color: var(--color-foreground);
  background-color: var(--color-border-light);
}

.platform-intro-modal__video-wrap {
  margin: 0 var(--spacing-5);
  overflow: hidden;
  background-color: var(--color-foreground);
  border-radius: var(--radius-lg);
}

.platform-intro-modal__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-foreground);
}

.platform-intro-modal__description {
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

body.platform-intro-modal-open {
  overflow: hidden;
}

.demo-card__video-placeholder {
  display: flex;
  min-height: 16rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(20, 184, 166, 0.1)),
    var(--color-background-alt);
}

.demo-card__video-placeholder p {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
}

/* ==========================================================================
   Assessment & Results Pages
   ========================================================================== */
.assessment-hero,
.results-hero {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-8) 0 var(--spacing-16);
  background: linear-gradient(135deg, #ffffff 0%, var(--color-background) 52%, var(--color-background-alt) 100%);
}

.assessment-hero__grid,
.results-hero__grid {
  display: grid;
  gap: var(--spacing-8);
  align-items: center;
}

.assessment-hero__content,
.results-hero__grid > div {
  max-width: 44rem;
}

.assessment-hero__title,
.results-hero__title {
  margin-top: var(--spacing-5);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.assessment-hero__text,
.results-hero__text {
  margin-top: var(--spacing-5);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-foreground-muted);
}

.assessment-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
}

.assessment-session-card,
.results-score-card,
.assessment-panel,
.results-summary-card,
.sound-profile-card,
.results-plan,
.results-note-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.assessment-session-card,
.results-score-card {
  padding: var(--spacing-6);
  border-radius: var(--radius-2xl);
}

.assessment-session-card__top,
.sound-profile-card__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-5);
}

.assessment-session-card h2,
.assessment-panel h2,
.results-plan h2,
.results-note-card h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  color: var(--color-foreground);
}

.assessment-session-card p,
.assessment-panel p,
.results-note-card p {
  margin-top: var(--spacing-4);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.assessment-focus-list {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
}

.assessment-focus-list span {
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.assessment-word-grid,
.sound-profile-grid,
.results-summary-grid,
.assessment-tools-grid,
.results-plan-grid {
  display: grid;
  gap: var(--spacing-5);
}

.assessment-word-card {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}

.assessment-word-card--p {
  border-top: 4px solid var(--color-primary);
}

.assessment-word-card--s {
  border-top: 4px solid var(--color-accent);
}

.assessment-word-card--k {
  border-top: 4px solid var(--color-blue);
}

.assessment-word-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.assessment-word-card h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.assessment-word-card p {
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.assessment-word-card__status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.assessment-word-card__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  height: 1.75rem;
}

.child-dashboard-item-card > .assessment-word-card__wave {
  justify-self: center;
  align-self: center;
  width: 100%;
  margin: var(--spacing-1) 0;
}

.child-dashboard-item-card__audio-loader {
  justify-self: center;
  align-self: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: var(--spacing-1) 0;
  border: 3px solid var(--color-primary-bg);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

.assessment-word-card__wave span {
  width: 4px;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: wave 1s ease-in-out infinite;
}

.assessment-word-card__wave span:nth-child(1) { animation-delay: 0s; }
.assessment-word-card__wave span:nth-child(2) { animation-delay: 0.1s; }
.assessment-word-card__wave span:nth-child(3) { animation-delay: 0.2s; }
.assessment-word-card__wave span:nth-child(4) { animation-delay: 0.3s; }
.assessment-word-card__wave span:nth-child(5) { animation-delay: 0.4s; }

.assessment-word-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: auto;
}

.assessment-word-card__replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.assessment-word-card__feedback {
  min-height: 2.5rem;
  font-size: var(--font-size-sm);
}

.recording-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--spacing-1);
  background-color: var(--color-warning);
  border-radius: var(--radius-full);
  animation: pulse 1s ease-in-out infinite;
}

.assessment-panel,
.results-plan,
.results-note-card {
  padding: var(--spacing-6);
  border-radius: var(--radius-2xl);
}

.assessment-scale {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
}

.assessment-scale div {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-xl);
}

.assessment-scale strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: white;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.assessment-panel--media {
  display: grid;
  gap: var(--spacing-5);
  align-items: center;
}

.assessment-panel--media img {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  background-color: var(--color-background-alt);
}

.assessment-panel .btn {
  margin-top: var(--spacing-6);
}

.results-score-card {
  position: relative;
  min-height: 18rem;
}

.results-score-card__label,
.results-summary-card span {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
}

.results-score-card strong {
  display: block;
  margin-top: var(--spacing-3);
  font-size: var(--font-size-6xl);
  line-height: 1;
  color: var(--color-primary);
}

.results-score-card p {
  max-width: 18rem;
  margin-top: var(--spacing-4);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.results-ring {
  position: absolute;
  right: var(--spacing-6);
  bottom: var(--spacing-6);
  width: 6rem;
  height: 6rem;
  padding: 0.65rem;
  background: conic-gradient(var(--color-primary) 0 67%, var(--color-border-light) 67% 100%);
  border-radius: var(--radius-full);
}

.results-ring span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-card);
  border-radius: var(--radius-full);
}

.results-summary-card {
  padding: var(--spacing-5);
  border-radius: var(--radius-xl);
}

.results-summary-card strong {
  display: block;
  margin-top: var(--spacing-3);
  font-size: var(--font-size-4xl);
  line-height: 1;
  color: var(--color-foreground);
}

.results-summary-card p {
  margin-top: var(--spacing-3);
  color: var(--color-foreground-muted);
}

.sound-profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  border-radius: var(--radius-2xl);
}

.sound-profile-card--priority {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 20px 40px -18px rgba(245, 158, 11, 0.55);
}

.sound-profile-card h3 {
  font-size: var(--font-size-xl);
  color: var(--color-foreground);
}

.sound-profile-card p {
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.results-bar {
  height: 0.7rem;
  overflow: hidden;
  background-color: var(--color-border-light);
  border-radius: var(--radius-full);
}

.results-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: inherit;
}

.sound-profile-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.results-plan ol {
  display: grid;
  gap: var(--spacing-4);
  margin-top: var(--spacing-6);
  list-style: none;
  counter-reset: plan-step;
}

.results-plan li {
  position: relative;
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 3.75rem;
  background-color: var(--color-background-alt);
  border-radius: var(--radius-xl);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.results-plan li::before {
  counter-increment: plan-step;
  content: counter(plan-step);
  position: absolute;
  left: var(--spacing-4);
  top: var(--spacing-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: white;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
}

.results-plan strong {
  display: block;
  margin-bottom: var(--spacing-1);
  color: var(--color-foreground);
}

.results-note-card {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(20, 184, 166, 0.09)),
    var(--color-card);
}

.results-note-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
}

/* Dynamic Page Interactions */
.assessment-live-row,
.assessment-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.assessment-recording {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
}

.assessment-recording--hidden {
  display: none;
}

.assessment-status-text {
  margin-top: 0;
  font-size: var(--font-size-sm);
}

.stage-progress-card,
.practice-stage-card,
.progress-strip-card {
  padding: var(--spacing-5);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

.stage-progress-card strong,
.practice-stage-card strong,
.progress-strip-card strong {
  color: var(--color-foreground);
}

.streak-dots,
.review-dots,
.history-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.streak-dot,
.review-dot,
.history-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-foreground-muted);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
}

.streak-dot.is-correct,
.review-dot.is-correct,
.history-chip.is-correct {
  color: white;
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.review-dot.is-missed,
.history-chip.is-missed {
  color: white;
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.progress-meter {
  height: 0.6rem;
  margin-top: var(--spacing-4);
  overflow: hidden;
  background-color: var(--color-border-light);
  border-radius: var(--radius-full);
}

.progress-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: inherit;
}

.syllable-grid,
.word-status-grid,
.sentence-status-grid {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.syllable-card,
.word-status-card,
.sentence-status-card {
  display: grid;
  gap: var(--spacing-2);
  min-height: 6rem;
  padding: var(--spacing-4);
  text-align: left;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.syllable-card:hover,
.word-status-card:hover,
.sentence-status-card:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.syllable-card.is-current,
.word-status-card.is-active,
.sentence-status-card.is-active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.syllable-card.is-complete,
.word-status-card.is-correct,
.sentence-status-card.is-correct {
  border-color: rgba(34, 197, 94, 0.35);
  background-color: var(--color-success-bg);
}

.word-status-card.is-incorrect,
.sentence-status-card.is-incorrect {
  border-color: rgba(239, 68, 68, 0.28);
  background-color: var(--color-error-bg);
}

.syllable-card > span:first-child,
.word-status-card strong,
.sentence-status-card strong {
  font-size: var(--font-size-xl);
  color: var(--color-foreground);
}

.sentence-status-card > span:not(.chip) {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.prompt-audio-mini {
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1) var(--spacing-3);
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.az-see-analysis-link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--spacing-3);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.az-overlay {
  position: fixed;
  inset: var(--spacing-4);
  z-index: var(--z-modal);
  display: none;
  max-width: 42rem;
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: var(--spacing-6);
  overflow: auto;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}

.az-overlay.is-open {
  display: block;
}

.az-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
}

.az-overlay-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.az-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-md);
}

.az-overlay-heard,
.az-overlay-phoneme-section {
  margin-top: var(--spacing-4);
  color: var(--color-foreground-muted);
}

.az-overlay-score-row {
  display: grid;
  gap: var(--spacing-2);
  padding: var(--spacing-5);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-xl);
}

.az-overlay-big-score {
  font-size: var(--font-size-5xl);
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

.az-overlay-big-label,
.az-overlay-section-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
}

.az-overlay-phonemes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.az-overlay-phoneme-chip {
  display: inline-flex;
  gap: var(--spacing-2);
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.notification {
  position: fixed;
  right: var(--spacing-6);
  bottom: var(--spacing-6);
  z-index: var(--z-tooltip);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--spacing-4) var(--spacing-5);
  color: white;
  background-color: var(--color-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.notification--success {
  background-color: var(--color-success);
}

.notification--error {
  background-color: var(--color-error);
}

.notification--info {
  background-color: var(--color-primary);
}

.notification__message {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.notification__close {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-size-xl);
}

@media (min-width: 640px) {
  .syllable-grid,
  .word-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .results-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .assessment-hero__title,
  .results-hero__title {
    font-size: var(--font-size-5xl);
  }

  .assessment-word-grid,
  .sound-profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .assessment-panel--media {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

@media (min-width: 1024px) {
  .assessment-hero__grid,
  .results-hero__grid,
  .results-plan-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.75fr);
  }

  .assessment-word-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .assessment-tools-grid {
    grid-template-columns: 0.9fr 1.2fr 0.9fr;
  }

  .results-summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .sound-profile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mandatory{
  color:red;
}

.child-dashboard-item-card--info-text .info-text-body ol {
  margin: 0.5rem 0;
   list-style: auto;
}
.child-dashboard-item-card--info-text .info-text-body li {
  margin: 1rem;
  padding-left: 0px;
  line-height: 1.4;
}
.child-dashboard-item-card--info-text .info-text-body strong {
  color: #1e293b;
  font-weight: 600;
  text-align: left;
}
.child-dashboard-item-card--info-text .info-text-body .articulation-guide-point{
margin: 0.5rem 0;
}

/* ==========================================================================
   Articulation Assessment Section (Add/Edit Child)
   ========================================================================== */

/* Fieldset grouping */
.backend-form-fieldset {
  margin-top: var(--spacing-6);
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.backend-form-fieldset:first-of-type {
  margin-top: 0;
}

.backend-form-fieldset:hover {
  box-shadow: var(--shadow-md);
}

.backend-form-legend {
  display: inline-block;
  width: auto;
  margin-bottom: var(--spacing-5);
  padding: 0 var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background-color: var(--color-card);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Ensure textareas in articulation section have proper spacing */
.backend-form-grid textarea[name="oral_mechanism"],
.backend-form-grid textarea[name="error_description"],
.backend-form-grid textarea[name="previous_therapy_details"],
.backend-form-grid textarea[name="assessment_notes"] {
  min-height: 5rem;
}

/* Multiple select fields (target_sounds, error_types, phonological_processes)
   These use Select2, so we style the Select2 container and its choices */
.auth-field .select2-container--default .select2-selection--multiple {
  min-height: 3rem;
  padding: var(--spacing-1) var(--spacing-2);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.auth-field .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

.auth-field .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: var(--spacing-1);
  padding: 0 var(--spacing-2);
  background-color: var(--color-primary-bg);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

.auth-field .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: var(--spacing-2);
  color: var(--color-primary);
  border-right: 1px solid rgba(124, 58, 237, 0.2);
}

/* Small note styling for the articulation assessment fields */
.backend-field-note--inline {
  display: inline-block;
  margin-left: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

/* Responsive: On smaller screens, reduce fieldset padding */
@media (max-width: 820px) {
  .backend-form-fieldset {
    padding: var(--spacing-4);
  }

  .backend-form-legend {
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-base);
  }
}

@media (max-width: 560px) {
  .backend-form-fieldset {
    padding: var(--spacing-3);
  }
}


/* ==========================================================================
   Textarea styling for child form (articulation assessment)
   ========================================================================== */
[data-child-form] textarea {
  min-height: 5rem;
  padding: var(--spacing-3);
  line-height: var(--line-height-relaxed);
  resize: vertical;
  font-family: inherit;
  font-size: var(--font-size-sm);
}

/* Slightly taller for main description fields */
[data-child-form] textarea[name="oral_mechanism"],
[data-child-form] textarea[name="error_description"],
[data-child-form] textarea[name="assessment_notes"] {
  min-height: 6rem;
}

/* For shorter note fields */
[data-child-form] textarea[name="motor_development"],
[data-child-form] textarea[name="sensory_development"],
[data-child-form] textarea[name="speech_language_development"],
[data-child-form] textarea[name="ddk"],
[data-child-form] textarea[name="speech_skills"],
[data-child-form] textarea[name="articulatory_skills"],
[data-child-form] textarea[name="analysis"],
[data-child-form] textarea[name="position_specificity"],
[data-child-form] textarea[name="consistency_of_error"],
[data-child-form] textarea[name="evident_phonemes"],
[data-child-form] textarea[name="previous_therapy_details"] {
  min-height: 4rem;
}

/* Ensure text inside textarea doesn't stick to top-left */
[data-child-form] textarea {
  vertical-align: top;
  text-align: left;
}


/* ==========================================================================
   Articulation Assessment Form – New Sections Styling
   ========================================================================== */

/* Subsection grouping */
.assessment-subsection {
  margin-bottom: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border-light);
}

.assessment-subsection:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Subsection title */
.subsection-title {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--spacing-3);
}

/* Radio groups and checkbox groups */
.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-top: var(--spacing-1);
}

.radio-group label,
.checkbox-group label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-primary);
}

/* Horizontal radio group (e.g., intelligibility score) */
.radio-group--horizontal {
  flex-direction: row;
  gap: var(--spacing-3);
  align-items: center;
}

.assessment-tabs {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: var(--spacing-4);
  margin-top: var(--spacing-4);
}

.assessment-tabs__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  align-self: start;
}

.assessment-tabs__tab {
  min-height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-foreground-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  cursor: pointer;
}

.assessment-tabs__tab:hover,
.assessment-tabs__tab:focus-visible {
  color: var(--color-foreground);
  border-color: var(--color-border);
  outline: none;
}

.assessment-tabs__tab.is-active {
  background-color: var(--color-card);
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.assessment-tabs__panels {
  min-width: 0;
}

.assessment-tabs__panel {
  margin-top: 0;
}

.assessment-tabs__panel .backend-form-grid {
  align-items: stretch;
  gap: var(--spacing-4);
}

.assessment-tabs__panel .auth-field {
  min-height: 100%;
  padding: var(--spacing-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.assessment-tabs__panel .auth-field__label {
  min-height: 1.25rem;
}

.assessment-tabs__panel .radio-group,
.assessment-tabs__panel .checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.assessment-tabs__panel .radio-group--horizontal {
  display: flex;
}

.assessment-tabs__panel .radio-group label,
.assessment-tabs__panel .checkbox-group label {
  min-height: 2.25rem;
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.assessment-tabs__panel select,
.assessment-tabs__panel textarea,
.assessment-tabs__panel .auth-field__input {
  margin-top: var(--spacing-2);
}

.assessment-tabs__panel .auth-field .radio-group,
.assessment-tabs__panel .auth-field .checkbox-group {
  margin-top: var(--spacing-3);
}

/* Stimulability table – grid layout */
.stimulability-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stimulability-table .table-row {
  display: contents;
}

.stimulability-table .table-cell {
  padding: var(--spacing-3);
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
}

.stimulability-table .header .table-cell {
  background-color: var(--color-background-alt);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  border-bottom: 1px solid var(--color-border);
}

.stimulability-table select {
  width: 100%;
  padding: var(--spacing-2);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
}

/* Cleft options container (initially hidden) */
.cleft-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2);
  min-width: 0;
  min-height: 100%;
  padding: var(--spacing-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.assessment-tabs__panel .cleft-options .auth-field {
  min-height: 2.25rem;
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--color-card);
  border-radius: var(--radius-md);
}

.cleft-options .auth-field {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-2);
}

.cleft-options .auth-field__label {
  min-height: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.cleft-options input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-primary);
}

/* Full‑width fields in the grid */
.backend-form-grid .auth-field:has(select[name="soft_palate_movement"]),
.backend-form-grid .auth-field:has(select[name="blowing_grade"]) {
  margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .stimulability-table {
    display: block;
  }
  .stimulability-table .table-row {
    display: block;
    border-bottom: 1px solid var(--color-border);
  }
  .stimulability-table .table-cell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    align-items: center;
    border-bottom: none;
  }
  .stimulability-table .header .table-cell {
    display: none;
  }
  .stimulability-table .table-cell::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-foreground-muted);
  }
}

@media (max-width: 560px) {
  .radio-group,
  .checkbox-group {
    flex-direction: column;
    gap: var(--spacing-2);
  }
  .assessment-tabs__panel .radio-group,
  .assessment-tabs__panel .checkbox-group {
    grid-template-columns: 1fr;
  }
  .radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cleft-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .assessment-tabs {
    display: block;
  }

  .assessment-tabs__list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .assessment-tabs__tab {
    text-align: center;
  }

  .assessment-tabs__panels {
    margin-top: var(--spacing-4);
  }
}

/* ==========================================================================
   Child Dashboard - Articulation Section Styles
   ========================================================================== */

/* Main articulation section container */
.child-profile-card__articulation-section {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border-light);
}

/* Section title group (optional, used for heading) */
.child-profile-card__subsection-title-group {
  margin-bottom: var(--spacing-4);
}

.child-profile-card__section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--spacing-4);
  margin: 0;
}

/* Each subsection (Psychosocial, Lips, Tongue, etc.) */
.child-profile-card__subsection {
  margin-bottom: var(--spacing-6);
}

.child-profile-card__subsection:last-child {
  margin-bottom: 0;
}

.child-profile-card__subsection-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border-light);
}

/* Content container inside subsection */
.child-profile-card__subsection-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

/* Individual articulation field values (text, multi-line) */
.articulation-text-value {
  display: block;
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--color-background);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

/* For fields that span full width */
.child-profile-card__field--full {
  grid-column: 1 / -1 !important;
}

/* Adjustments for mobile */
@media (max-width: 820px) {
  .child-profile-card__subsection-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }
}

/* Ensure consistency with existing child-profile-card__field */
.child-profile-card__articulation-section .child-profile-card__field {
  background-color: transparent;
  padding: 0;
  border: none;
  display: block;
}

.child-profile-card__articulation-section .child-profile-card__field span {
  display: block;
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-muted);
}

.child-profile-card__articulation-section .child-profile-card__field strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  display: block;
  margin-top: var(--spacing-1);
}

/* For text fields (long content) inside articulation */
.child-profile-card__field--full .articulation-text-value {
  margin-top: var(--spacing-1);
}


/* ========== Therapy Plan – Weekly Planner ========== */
.therapy-week-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.therapy-week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border-light);
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.therapy-week-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-foreground);
}

.therapy-week-actions {
  margin-top: var(--spacing-4);
  display: flex;
  justify-content: flex-start;
}

.therapy-days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.therapy-day-card {
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.therapy-day-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.therapy-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border-light);
}

.therapy-day-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  min-height: 3rem;
  max-height: 6rem;
  overflow-y: auto;
  padding: var(--spacing-1) 0;
}

.therapy-day-tools .chip {
  font-size: var(--font-size-xs);
  padding: var(--spacing-1) var(--spacing-2);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

.therapy-empty-days {
  padding: var(--spacing-4);
  text-align: center;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

/* ========== Therapy Plan Modal ========== */
.therapy-tool-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.therapy-tool-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.therapy-tool-modal__container {
  position: relative;
  background: #ffffff;
  border-radius: 1.5rem;
  width: 90%;
  max-width: 650px;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 10001;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.therapy-tool-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 1.5rem 1.5rem 0 0;
}

.therapy-tool-modal__header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.therapy-tool-modal__close {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  transition: color 0.2s;
}

.therapy-tool-modal__close:hover {
  color: #ef4444;
}

.therapy-tool-modal__body {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.tool-selector-step {
  margin-bottom: 1.5rem;
}

.tool-category-buttons,
.subcategory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.tool-selector-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.selected-tools-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.selected-tools-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.selected-tools-tags .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #e9d5ff;
  color: #7c3aed;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
}

.therapy-tool-loader {
  display: grid;
  justify-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  color: var(--color-foreground-muted);
  text-align: center;
}

.therapy-tool-loader .assessment-word-card__wave {
  display: flex;
}

.remove-tool-tag {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  margin-left: 0.25rem;
  color: #64748b;
  padding: 0 0.25rem;
  line-height: 1;
}

.remove-tool-tag:hover {
  color: #ef4444;
}

.therapy-tool-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 0 0 1.5rem 1.5rem;
}

.therapy-tool-modal__footer .btn {
  min-width: 100px;
}

/* Therapy Plan - Tool instructions badge */
.tool-instructions-badge {
  display: inline-block;
  margin-left: 4px;
  cursor: help;
  font-size: 0.8rem;
}
.subcategory-add-area {
  background-color: var(--color-background-alt);
  padding: 8px;
  border-radius: var(--radius-lg);
  margin-top: 5px;
}
.subcategory-add-area .btn-small {
  padding: 4px 12px;
  font-size: 0.8rem;
}
.therapy-day-tools .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Therapy Plan - Notes sections for parent view */
.therapy-plan-notes-section {
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-6);
}

.therapy-plan-notes-section:last-child {
  margin-bottom: 0;
}

.therapy-plan-notes-section h4 {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.therapy-plan-notes-content {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
}

/* Make articulation fields look like basic profile fields */
.child-profile-card__articulation-content .child-profile-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.child-profile-card__articulation-content .child-profile-card__field {
  display: grid;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.child-profile-card__articulation-content .child-profile-card__field span {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.child-profile-card__articulation-content .child-profile-card__field strong {
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: pre-wrap;
}

/* Responsive: single column on small screens */
@media (max-width: 820px) {
  .child-profile-card__articulation-content .child-profile-card__grid {
    grid-template-columns: 1fr;
  }
}

/* Style all select elements on child form pages */
[data-child-form] select,
.backend-form-grid select,
.auth-field select {
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--spacing-4);
  color: var(--color-foreground);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
}

[data-child-form] select:focus,
.backend-form-grid select:focus,
.auth-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

.child-dashboard-browser-card .category-text-card {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  background-color: var(--color-background-alt);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
  text-align: center;
  padding: var(--spacing-2);
}


/* Interactive activities container */
.interactive-question {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  text-align: center;
}
.options-grid {
  display: grid;
  gap: 10px;
}
.opt-btn {
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.opt-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-background);
}
.opt-btn.correct {
  background: #EAF3DE;
  border-color: #639922;
  color: #3B6D11;
}
.opt-btn.wrong {
  background: #FCEBEB;
  border-color: #E24B4A;
  color: #A32D2D;
}
.next-btn {
  margin-top: 1rem;
  padding: 8px 20px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.shape-display {
  text-align: center;
  margin: 1rem 0;
}


/* 1. Consistent height and padding for all input types and selects on child form */
[data-child-form] input[type="text"],
[data-child-form] input[type="email"],
[data-child-form] input[type="tel"],
[data-child-form] input[type="number"],
[data-child-form] input[type="date"],
[data-child-form] select {
  min-height: 3rem;
  padding: 0 var(--spacing-4);
  line-height: 3rem; /* vertically center text */
  box-sizing: border-box;
}

body[data-page="slp-patient-add"] [data-child-form] input[name="contact_number"],
body[data-page="slp-patient-edit"] [data-child-form] input[name="contact_number"] {
  height: 3rem;
  min-height: 3rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 3rem;
}

body[data-page="slp-patient-add"] [data-child-form] select[name="gender"],
body[data-page="slp-patient-edit"] [data-child-form] select[name="gender"] {
  height: 3rem;
  min-height: 3rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 3rem;
}

/* Ensure textarea top padding matches (bottom padding already ok) */
[data-child-form] textarea {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

/* 2. Calendar icon inside the Date of Birth input */
.auth-field:has(#date_of_birth) {
  position: relative;
}

.ui-datepicker-trigger {
  position: absolute;
  right: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 2;
}

.ui-datepicker-trigger:hover {
  opacity: 1;
}

/* Prevent the default button background from showing */
.ui-datepicker-trigger:focus {
  outline: none;
}

/* Ensure the date input has space for the icon */
#date_of_birth {
  padding-right: 2.5rem;
}

/* 3. The conditional parent/guardian field is already hidden by inline style; ensure it stays hidden initially */
#parent-guardian-group {
  display: none;
}

/* ==========================================================================
   CHILD DASHBOARD – PRACTICE TOOLS FULL WIDTH & SCROLL FIX
   ========================================================================== */

/* 1. Force the practice chooser to always use a single column.
     This makes Step 1 full width when Step 2 is hidden,
     and both steps stack vertically when Step 2 appears. */
.child-dashboard-practice-chooser {
    grid-template-columns: 1fr !important;
}

/* 2. Add scroll‑y to each step panel when its content exceeds a reasonable height.
     Adjust the max‑height value based on your layout (here ~ viewport minus header/nav). */
.child-dashboard-practice-step {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}

/* 3. Optional: add spacing between stacked steps for better visual separation */
.child-dashboard-practice-step + .child-dashboard-practice-step {
    margin-top: var(--spacing-5);
}

/* 4. Ensure the tool and category grids also scroll gracefully inside their containers */
.child-dashboard-tool-grid,
.child-dashboard-category-grid {
    overflow-y: auto;
    max-height: inherit; /* inherits from parent step */
    padding-right: var(--spacing-2); /* avoid scrollbar overlap */
}

/* 5. Keep the back button and header properly positioned inside the scrollable area */
.child-dashboard-practice-step__header {
    position: sticky;
    top: 0;
    background-color: var(--color-card);
    z-index: 1;
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border-light);
}

/* 6. Small screens: adjust max-height to prevent overflow off screen */
@media (max-width: 820px) {
    .child-dashboard-practice-step {
        max-height: calc(100vh - 200px);
    }
}

@media (max-width: 560px) {
    .child-dashboard-practice-step {
        max-height: calc(100vh - 180px);
    }
}

/* ==========================================================================
   FIX: TOOL CARD SIZE & VISIBILITY OF DESCRIPTION TEXT
   ========================================================================== */

/* 1. Ensure the tool grid uses flexible but reasonable column widths */
.child-dashboard-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-4);
}

/* 2. Make each browser card (tool card) have enough height
      and prevent content from being cut off */
.child-dashboard-browser-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 240px;        /* adjust as needed */
    padding: var(--spacing-4);
}

/* 3. Ensure the image area respects proportions and doesn't shrink too much */
.child-dashboard-browser-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background-color: var(--color-background-alt);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-2);
}

/* 4. Make the title (label) clearly visible */
.child-dashboard-browser-card span,
.child-dashboard-browser-card strong {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-foreground);
    margin: var(--spacing-1) 0;
    word-break: break-word;
}

/* 5. Ensure the description paragraph is fully visible */
.child-dashboard-browser-card p {
    display: block;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-foreground-muted);
    margin: var(--spacing-2) 0 0;
    word-break: break-word;
    overflow: visible;
    white-space: normal;
}

/* 6. If the card uses a button element, remove any default button constraints */
button.child-dashboard-browser-card {
    width: 100%;
    text-align: left;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    cursor: pointer;
}

/* 7. For the step panels: ensure enough vertical space for scrolling
      without compressing the cards */
.child-dashboard-practice-step {
    max-height: calc(100vh - 280px);    /* increase if needed */
    overflow-y: auto;
    padding-right: var(--spacing-1);
}

/* 8. For smaller screens, adjust the min card width */
@media (max-width: 640px) {
    .child-dashboard-tool-grid {
        grid-template-columns: 1fr;   /* single column on narrow screens */
    }
    .child-dashboard-browser-card {
        min-height: auto;
    }
}


/* Force full width for all memory game containers */
/* Full width for Interactive Exercises and Memory Games step 3 containers */
.child-dashboard-item-grid[data-category="interactive-games"],
.child-dashboard-item-grid[data-category="memory-games"] {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   SLP PATIENT DASHBOARD RESPONSIVE FIXES
   ========================================================================== */

.video-week-group {
  margin-bottom: var(--spacing-8);
}

.video-week-group > h3 {
  margin-bottom: var(--spacing-4);
  color: var(--color-foreground);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.video-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--spacing-5);
  align-items: stretch;
}

.video-grid-container .child-dashboard-video-card {
  width: 100%;
  min-width: 0;
}

.video-grid-container .child-dashboard-video-card video {
  display: block;
  min-height: 10rem;
  object-fit: contain;
}

.video-grid-container .child-dashboard-video-card .btn {
  width: 100%;
  min-height: 2.75rem;
  white-space: normal;
}

.child-dashboard-practice-browser.is-compact
  .child-dashboard-practice-chooser.is-collapsed {
  display: none;
}

@media (max-width: 820px) {
  .child-dashboard-practice-browser {
    padding: var(--spacing-4);
  }

  .child-dashboard-practice-browser.is-compact {
    gap: var(--spacing-3);
  }

  .child-dashboard-practice-browser.is-compact
    .child-dashboard-practice-items {
    gap: var(--spacing-3);
  }

  .child-dashboard-practice-chooser,
  .child-dashboard-practice-chooser.is-tool-selected {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-5);
    max-height: none;
    overflow: visible;
  }

  .child-dashboard-practice-step {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0;
  }

  .child-dashboard-practice-step__header {
    position: static;
    align-items: flex-start;
    background: transparent;
  }

  .child-dashboard-tool-grid,
  .child-dashboard-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0;
  }

  .child-dashboard-browser-card {
    min-height: 0;
    padding: var(--spacing-4);
  }

  .child-dashboard-browser-card img,
  .child-dashboard-browser-card .category-text-card {
    min-height: 8.5rem;
  }

  .child-dashboard-practice-items__header {
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  .video-filter-form {
    align-items: stretch !important;
    flex-direction: column;
  }

  .video-filter-form > div {
    width: 100%;
    min-width: 0 !important;
  }

  .video-filter-form .btn {
    width: 100%;
    margin-left: 0 !important;
  }

  .video-filter-form .btn + .btn {
    margin-top: var(--spacing-2);
  }

  .video-grid-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .video-day-header {
    padding-left: var(--spacing-3) !important;
  }

  .child-dashboard-video-card {
    padding: var(--spacing-4);
  }

  .video-grid-container .child-dashboard-video-card video {
    min-height: 12rem;
  }

  .child-dashboard-tool-grid,
  .child-dashboard-category-grid {
    grid-template-columns: 1fr !important;
  }

  .child-dashboard-browser-card {
    gap: var(--spacing-3);
  }

  .child-dashboard-browser-card span,
  .child-dashboard-browser-card strong {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
  }

  .child-dashboard-browser-card p {
    font-size: var(--font-size-sm);
  }

  .child-dashboard-practice-browser.is-compact
    .child-dashboard-practice-compact {
    padding: var(--spacing-3);
  }

  .child-dashboard-practice-browser.is-compact
    .child-dashboard-practice-items__header > div {
    gap: var(--spacing-2);
  }

  .child-dashboard-practice-browser.is-compact
    .child-dashboard-item-grid {
    gap: var(--spacing-3);
  }

  .child-dashboard-practice-browser.is-compact
    .child-dashboard-item-card--text-only {
    min-height: 6.75rem;
    padding: var(--spacing-3);
  }
}




/* Word Spinner adjustments */
.word-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spinner-canvas-wrapper {
  position: relative;
  display: inline-block;
  margin: 20px auto;
}
.spinner-arrow {
  position: absolute;
  top: -15px;
  right: -15px;
  transform: rotate(90deg);
  z-index: 5;
}
@media (max-width: 560px) {
  .spinner-arrow {
    top: -10px;
    right: -10px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #ff5722;
  }
  #spinner-canvas {
    max-width: 300px;
  }
}


.spinner-canvas-wrapper {
  position: relative;
  display: inline-block;
  margin: 20px auto;
}
.spinner-arrow {
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-right: 25px solid #ff5722;   /* changed from border-left */
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  z-index: 10;
}
@media (max-width: 560px) {
  .spinner-arrow {
    right: -10px;
    border-right: 18px solid #ff5722;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
}


/* ==========================================================================
   Appointments Module Styles
   ========================================================================== */

/* Appointments Container */
.appointments-container {
  display: grid;
  gap: var(--spacing-6);
}

/* Calendar Header */
/* Calendar Header */
.appointments-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  padding: var(--spacing-6);
  border-radius: var(--radius-2xl);
}

.appointments-header__title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
}

.appointments-header__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.appointments-header__subtitle {
  font-size: var(--font-size-sm);
  opacity: 0.85;
  margin: 0;
}

.appointments-header__datepicker {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex: 1;
  flex-wrap: wrap;
}

.appointments-header__datepicker label {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  white-space: nowrap;
}

.appointments-header__datepicker input[type="date"] {
  padding: var(--spacing-2) var(--spacing-3);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  background: white;
  cursor: pointer;
  max-width: 180px;
  min-width: 140px;
}

/* Responsive: stack on mobile */
@media (max-width: 560px) {
  .appointments-header {
    padding: var(--spacing-4);
  }
  
  .appointments-header__title-group {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2);
  }
  
  .appointments-header__datepicker {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .appointments-header__datepicker input[type="date"] {
    max-width: 100%;
    width: 100%;
  }
}

/* Timeslot Grid */
.timeslot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.timeslot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  min-height: 3.5rem;
}

.timeslot-item__time {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
}

.timeslot-item__status {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.timeslot-item--available {
  border-color: var(--color-primary);
  cursor: pointer;
}

.timeslot-item--available:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.timeslot-item--booked {
  background: var(--color-background-alt);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.7;
}

.timeslot-item--past {
  opacity: 0.5;
  cursor: default;
  border-color: var(--color-border-light);
}

.timeslot-item__booked-for {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.timeslot-item__booked-for strong {
  color: var(--color-foreground);
}

/* Empty State */
.timeslot-empty {
  grid-column: 1 / -1;
  padding: var(--spacing-8);
  text-align: center;
  background: var(--color-background-alt);
  border-radius: var(--radius-xl);
  border: 1px dashed var(--color-border);
}

.timeslot-empty p {
  color: var(--color-foreground-muted);
  margin: 0;
}

/* Slot Popover */
.slot-popover {
  position: fixed;
  z-index: var(--z-dropdown);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--spacing-5);
  min-width: 320px;
  max-width: 400px;
  animation: popoverFadeIn 0.2s ease;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.slot-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.slot-popover__close {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xl);
  line-height: 1;
  padding: var(--spacing-1);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.slot-popover__close:hover {
  color: var(--color-foreground);
  background: var(--color-background-alt);
}

.slot-popover__body {
  display: grid;
  gap: var(--spacing-3);
}

.slot-popover__details {
  display: grid;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
}

.slot-popover__details strong {
  color: var(--color-foreground);
}

.slot-popover__more-slots {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.slot-popover__more-slots:hover {
  color: var(--color-primary-dark);
}

.slot-popover__more-slots-toggle {
  display: none;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border-light);
}

.slot-popover__more-slots-toggle--expanded {
  display: grid;
}

.slot-popover__slot-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.slot-popover__slot-input label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
}

.slot-popover__slot-input input[type="number"] {
  width: 60px;
  padding: var(--spacing-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.slot-popover__slot-input input[type="number"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
  outline: none;
}

.slot-popover__slot-input input[type="number"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slot-popover__slot-range {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  padding: var(--spacing-2) 0;
}

.slot-popover__slot-range strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.slot-popover__actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--spacing-2);
}

/* Appointments List */
.appointments-list-section {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.appointments-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.appointments-list-header h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-foreground);
}

.appointments-list-header__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.appointments-list-header__controls select {
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  background: var(--color-card);
  cursor: pointer;
  color: var(--color-foreground);
  min-height: 2.5rem;
}

.appointments-list-header__controls select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
  outline: none;
}

/* Appointment Status Badges */
.appointment-status {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.appointment-status--scheduled {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.appointment-status--completed {
  color: var(--color-primary);
  background: var(--color-primary-bg);
}

.appointment-status--cancelled {
  color: var(--color-error);
  background: var(--color-error-bg);
}

/* Appointment Table Row */
.appointment-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.8fr auto;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

.appointment-row:hover {
  background: var(--color-background-alt);
}

.appointment-row:last-child {
  border-bottom: none;
}

.appointment-row__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
}

.appointment-row__time {
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
}

.appointment-row__status {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.appointment-row__actions select {
  padding: var(--spacing-1) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  background: var(--color-card);
  cursor: pointer;
  color: var(--color-foreground);
  min-height: 2rem;
  transition: border-color var(--transition-fast);
}

.appointment-row__actions select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
  outline: none;
}

/* Pagination */
.appointments-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-6);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.appointments-pagination__info {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

.appointments-pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.appointments-pagination__controls button {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 2.5rem;
  text-align: center;
}

.appointments-pagination__controls button:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
}

.appointments-pagination__controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.appointments-pagination__controls button.appointments-pagination__page--active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* Responsive */
@media (max-width: 820px) {
  .appointments-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  
  .appointments-header__datepicker {
    justify-content: center;
  }
  
  .timeslot-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  
  .appointment-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
  }
  
  .appointment-row__status {
    grid-column: 1 / 2;
  }
  
  .appointment-row__actions {
    grid-column: 2 / 3;
  }
  
  .appointment-row__date,
  .appointment-row__time {
    grid-column: 1 / -1;
  }
  
  .slot-popover {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-2xl);
  }
}

@media (max-width: 560px) {
  .appointments-header {
    padding: var(--spacing-4);
  }
  
  .appointments-header__title {
    font-size: var(--font-size-lg);
  }
  
  .timeslot-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
  }
  
  .timeslot-item {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
    min-height: 2.8rem;
  }
  
  .appointments-list-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .appointments-list-header__controls {
    flex-direction: column;
  }
  
  .appointments-list-header__controls select {
    width: 100%;
  }
  
  .appointment-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
  }
  
  .appointment-row__date {
    grid-column: 1 / -1;
  }
  
  .appointment-row__time {
    grid-column: 1 / -1;
  }
  
  .appointment-row__status {
    grid-column: 1 / 2;
  }
  
  .appointment-row__actions {
    grid-column: 2 / 3;
  }
  
  .appointments-pagination {
    flex-direction: column;
    text-align: center;
  }
  
  .slot-popover {
    min-width: 95%;
    padding: var(--spacing-4);
  }
}


/* Practice Page Specific */
.practice-item {
  padding: var(--spacing-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  transition: box-shadow var(--transition-base);
  text-align: center;
}
.practice-item:hover {
  box-shadow: var(--shadow-lg);
}
.practice-item .btn {
  font-size: var(--font-size-xs);
  padding: var(--spacing-1) var(--spacing-3);
}
#finish-exam-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.practice-page{
  text-decoration: underline;
  display: inline-flex; align-items: center; gap: 4px;
}


/* Video Recordings - Week/Day Grouping */
.video-week-group {
  margin-bottom: 32px;
}

.video-week-group h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: 16px;
}

.video-day-header {
  grid-column: 1 / -1;
  margin-top: 8px;
  margin-bottom: 4px;
  padding-left: 16px;
  border-left: 3px solid var(--color-primary);
}

.video-day-header h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.video-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.video-grid-container {
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--spacing-5);
}

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


/* ==========================================================================
   Practice Page - FIXED Large Lightbox
   Add this at END of style.css
   ========================================================================== */

/* Make overall popup much wider */
body[data-page="practice"] .child-dashboard-lightbox__dialog,
body[data-page="patient-practice"] .child-dashboard-lightbox__dialog {
  position: relative;
  width: 98vw !important;
  max-width: 1680px !important;
  max-height: 95vh;
  margin: 0 auto;
  display: block;
}

/* Main content area */
body[data-page="practice"] .child-dashboard-lightbox__content,
body[data-page="patient-practice"] .child-dashboard-lightbox__content {
  width: 100%;
  max-height: 95vh;
}

/* Large card */
body[data-page="practice"] .child-dashboard-assessment-modal-card,
body[data-page="patient-practice"] .child-dashboard-assessment-modal-card {
  width: 100%;
  max-height: 95vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 0;
  position: relative;
}

/* Bigger internal layout */
body[data-page="practice"]
  .child-dashboard-assessment-modal-card.is-video-active
  .child-dashboard-assessment-modal-grid,
body[data-page="patient-practice"]
  .child-dashboard-assessment-modal-card.is-video-active
  .child-dashboard-assessment-modal-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.55fr);
  gap: 2rem;
  align-items: stretch;
  padding: 2rem;
}

/* Video area */
body[data-page="practice"] .child-dashboard-assessment-video,
body[data-page="patient-practice"] .child-dashboard-assessment-video {
  min-height: 680px;
  max-height: 82vh;
  border-radius: 20px;
  overflow: hidden;
}

body[data-page="practice"] .child-dashboard-assessment-video video,
body[data-page="patient-practice"] .child-dashboard-assessment-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content side */
body[data-page="practice"] .child-dashboard-assessment-modal-content,
body[data-page="patient-practice"] .child-dashboard-assessment-modal-content {
  padding: 1rem 0;
  gap: 1.5rem;
}

/* Bigger heading */
body[data-page="practice"] .child-dashboard-assessment-modal-content h3,
body[data-page="patient-practice"] .child-dashboard-assessment-modal-content h3 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.2;
}

/* Better text readability */
body[data-page="practice"] [data-ref="assessment-lightbox-helper"],
body[data-page="practice"] .assessment-word-card__feedback,
body[data-page="patient-practice"] [data-ref="assessment-lightbox-helper"],
body[data-page="patient-practice"] .assessment-word-card__feedback {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Bigger buttons */
body[data-page="practice"] .assessment-word-card__actions .btn,
body[data-page="practice"] .assessment-word-card__replay-btn,
body[data-page="patient-practice"] .assessment-word-card__actions .btn,
body[data-page="patient-practice"] .assessment-word-card__replay-btn {
  min-height: 56px;
  padding: 0 1.5rem;
  font-size: 1rem;
}

body[data-page="patient-practice"] .child-dashboard-assessment-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.55fr);
  gap: 2rem;
  align-items: start;
  padding: 0 !important;
}

body[data-page="patient-practice"] .child-dashboard-assessment-video {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  position: relative;
}

body[data-page="patient-practice"] .practice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-5);
}

body[data-page="patient-practice"] .child-dashboard-assessment-video video {
  display: block;
}

body[data-page="patient-practice"] .assessment-word-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="patient-practice"] .assessment-word-card__wave {
  justify-content: flex-start;
  align-self: flex-start;
}

body[data-page="patient-practice"] .record-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: var(--color-border) !important;
  color: var(--color-foreground-muted) !important;
  pointer-events: none;
}

body[data-page="patient-practice"] .record-btn:not(:disabled) {
  opacity: 1 !important;
  cursor: pointer !important;
}

body[data-page="patient-practice"] #practice-speak-btn.is-recording,
body[data-page="patient-practice"] #practice-speak-btn.btn-secondary {
  color: white !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

body[data-page="patient-practice"] #practice-speak-btn.is-recording:hover,
body[data-page="patient-practice"] #practice-speak-btn.is-recording:focus,
body[data-page="patient-practice"] #practice-speak-btn.btn-secondary:hover,
body[data-page="patient-practice"] #practice-speak-btn.btn-secondary:focus {
  color: white !important;
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

body[data-page="patient-practice"] #practice-speak-btn.is-recording:disabled,
body[data-page="patient-practice"] #practice-speak-btn.btn-secondary:disabled {
  color: white !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  opacity: 0.72;
}

body[data-page="patient-practice"] .practice-page-error {
  grid-column: 1 / -1;
}

body[data-page="patient-practice"] .practice-video-loader {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  color: white;
  text-align: center;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.94),
    rgba(26, 22, 37, 0.96)
  );
}

body[data-page="patient-practice"] .practice-video-loader[hidden] {
  display: none;
}

body[data-page="patient-practice"] .practice-video-loader .assessment-word-card__wave {
  align-self: center;
}

body[data-page="patient-practice"] .practice-video-loader .assessment-word-card__wave span {
  background: white;
}

body[data-page="patient-practice"] .practice-video-loader strong {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

body[data-page="patient-practice"] .assessment-word-card__wave.active span {
  animation: waveAnim 0.8s ease-in-out infinite;
}

body[data-page="patient-practice"] .assessment-word-card__wave span:nth-child(1) {
  animation-delay: 0s;
}

body[data-page="patient-practice"] .assessment-word-card__wave span:nth-child(2) {
  animation-delay: 0.1s;
}

body[data-page="patient-practice"] .assessment-word-card__wave span:nth-child(3) {
  animation-delay: 0.2s;
}

body[data-page="patient-practice"] .assessment-word-card__wave span:nth-child(4) {
  animation-delay: 0.3s;
}

body[data-page="patient-practice"] .assessment-word-card__wave span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes waveAnim {
  0%,
  100% {
    transform: scaleY(0.5);
  }

  50% {
    transform: scaleY(1.2);
  }
}

/* ==========================================================
   FIX NAVIGATION BUTTON POSITION
   ========================================================== */

body[data-page="practice"] .child-dashboard-lightbox__nav,
body[data-page="patient-practice"] .child-dashboard-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 68px;
  height: 68px;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

/* Prevent jump on hover */
body[data-page="practice"] .child-dashboard-lightbox__nav:hover,
body[data-page="patient-practice"] .child-dashboard-lightbox__nav:hover {
  transform: translateY(-50%) scale(1.05);
}

/* Left button */
body[data-page="practice"] .child-dashboard-lightbox__nav--prev,
body[data-page="patient-practice"] .child-dashboard-lightbox__nav--prev {
  left: -34px;
}

/* Right button */
body[data-page="practice"] .child-dashboard-lightbox__nav--next,
body[data-page="patient-practice"] .child-dashboard-lightbox__nav--next {
  right: -34px;
}

/* Arrow size */
body[data-page="practice"] .child-dashboard-lightbox__nav span,
body[data-page="patient-practice"] .child-dashboard-lightbox__nav span {
  font-size: 3rem;
  line-height: 1;
}

/* Close button */
body[data-page="practice"] .child-dashboard-lightbox__close,
body[data-page="patient-practice"] .child-dashboard-lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;

  width: 60px;
  height: 60px;

  z-index: 30;

  border-radius: 999px;

  font-size: 2rem;

  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {
  body[data-page="practice"] .child-dashboard-lightbox__dialog {
    width: 98vw !important;
  }

  body[data-page="practice"] .child-dashboard-assessment-video,
  body[data-page="patient-practice"] .child-dashboard-assessment-video {
    min-height: 420px;
  }

  body[data-page="patient-practice"] .practice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="practice"]
    .child-dashboard-assessment-modal-card.is-video-active
    .child-dashboard-assessment-modal-grid,
  body[data-page="patient-practice"]
    .child-dashboard-assessment-modal-card.is-video-active
    .child-dashboard-assessment-modal-grid,
  body[data-page="patient-practice"] .child-dashboard-assessment-modal-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {
  body[data-page="practice"] .child-dashboard-lightbox,
  body[data-page="patient-practice"] .child-dashboard-lightbox {
    padding: 0.5rem;
  }

  body[data-page="practice"] .child-dashboard-lightbox__dialog,
  body[data-page="patient-practice"] .child-dashboard-lightbox__dialog {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  body[data-page="practice"]
    .child-dashboard-assessment-modal-card.is-video-active
    .child-dashboard-assessment-modal-grid,
  body[data-page="patient-practice"]
    .child-dashboard-assessment-modal-card.is-video-active
    .child-dashboard-assessment-modal-grid,
  body[data-page="patient-practice"] .child-dashboard-assessment-modal-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  body[data-page="practice"] .child-dashboard-assessment-modal-card,
  body[data-page="patient-practice"] .child-dashboard-assessment-modal-card {
    min-height: auto;
    max-height: 96vh;
  }

  body[data-page="practice"] .child-dashboard-assessment-video,
  body[data-page="patient-practice"] .child-dashboard-assessment-video {
    min-height: 260px;
    max-height: 42vh;
  }

  body[data-page="patient-practice"] .practice-grid {
    grid-template-columns: 1fr;
  }

  /* Keep nav vertically centered */
  body[data-page="practice"] .child-dashboard-lightbox__nav,
  body[data-page="patient-practice"] .child-dashboard-lightbox__nav {
    width: 54px;
    height: 54px;
  }

  body[data-page="practice"] .child-dashboard-lightbox__nav--prev,
  body[data-page="patient-practice"] .child-dashboard-lightbox__nav--prev {
    left: 8px;
  }

  body[data-page="practice"] .child-dashboard-lightbox__nav--next,
  body[data-page="patient-practice"] .child-dashboard-lightbox__nav--next {
    right: 8px;
  }

  body[data-page="practice"] .child-dashboard-lightbox__nav span,
  body[data-page="patient-practice"] .child-dashboard-lightbox__nav span {
    font-size: 2.2rem;
  }

  body[data-page="practice"] .child-dashboard-lightbox__close,
  body[data-page="patient-practice"] .child-dashboard-lightbox__close {
    top: 10px;
    right: 10px;
    width: 52px;
    height: 52px;
  }
}

/* Disabled fields – visual differentiation */
.auth-field__input:disabled,
.auth-field__input[disabled] {
  background-color: #f0f0f0 !important;   /* Light gray background */
  color: #6c757d !important;              /* Muted text color */
  cursor: not-allowed !important;         /* "Not allowed" cursor */
  opacity: 0.7;                           /* Slight fade */
  border-color: #d1d5db !important;       /* Softer border */
}

/* Error state for inputs */
.incorrect-value {
  border-color: #dc3545 !important;      /* Red border */
  background-color: #fff0f0 !important;  /* Light red background */
}


/* ==========================================================================
   Speech Recording Modal – Branded
   ========================================================================== */

.speech-recording-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  background: rgba(26, 22, 37, 0.72);
  backdrop-filter: blur(8px);
}

.speech-recording-modal {
  width: min(100%, 640px);
  max-height: min(90vh, 700px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.speech-recording-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-5) var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.speech-recording-modal__header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.speech-recording-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-2xl);
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.speech-recording-modal__close:hover {
  background-color: var(--color-border);
  color: var(--color-foreground);
}

.speech-recording-modal__body {
  padding: var(--spacing-6);
  overflow-y: auto;
  flex: 1;
}

.speech-recording-modal__instruction {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.speech-recording-modal__video {
  width: 100%;
  background: #111;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--spacing-4);
}

.speech-recording-modal__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin: var(--spacing-4) 0;
}

.speech-recording-modal__controls .btn {
  flex: 1 1 auto;
  min-width: 120px;
}

.speech-recording-modal__status {
  margin: 0;
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  min-height: 1.5rem;
}

/* ==========================================================================
   Speech Sample Container (on the form)
   ========================================================================== */

.speech-sample-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.speech-sample-preview {
  max-width: 400px;
  width: 100%;
  background: #111;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.speech-sample-placeholder {
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

.speech-sample-remove {
  align-self: flex-start;
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */

@media (max-width: 640px) {
  .speech-recording-modal {
    width: 100%;
    max-height: 95vh;
    border-radius: var(--radius-xl);
  }

  .speech-recording-modal__header {
    padding: var(--spacing-4);
  }

  .speech-recording-modal__body {
    padding: var(--spacing-4);
  }

  .speech-recording-modal__controls .btn {
    flex: 1 1 100%;
  }

  .speech-sample-preview {
    max-width: 100%;
  }
}

.speech-sample-container .btn {
  width: auto !important; /* ensures buttons don't stretch */
}

/* Force hidden elements to be hidden */
[hidden] {
  display: none !important;
}

.child-profile-card__speech-sample-section {
  margin: var(--spacing-6) 0;
  padding: var(--spacing-4);
  background: var(--color-background-alt);
  border-radius: var(--radius-xl);
}

.speech-sample-profile h3 {
  margin-top: 0;
  font-size: var(--font-size-lg);
}

.speech-sample-profile video {
  max-width: 100%;
  border-radius: var(--radius-lg);
}


/* ==========================================================================
   Appointment Popover Modal – Grid layout, clear columns
   ========================================================================== */
.slot-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  width: 1100px;                    /* fixed width on large screens */
  max-width: 96vw;                  /* fits on smaller desktops */
  max-height: 90vh;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  animation: slotPopoverIn 0.2s ease;
}

/* For screens narrower than 1200px, use viewport width */
@media (max-width: 1200px) {
  .slot-popover {
    width: 96vw;
  }
}

@keyframes slotPopoverIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.slot-popover__inner {
  display: grid;
  grid-template-columns: 300px 1fr;   /* left fixed, right flexible */
  gap: var(--spacing-8);
  padding: var(--spacing-6);
  max-height: calc(90vh - 3rem);
  overflow-y: auto;
  overflow-x: hidden;
  align-items: start;                /* align content to the top */
}

/* Left column */
.slot-popover__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Right column */
.slot-popover__right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;                     /* prevent overflow */
}

.slot-popover__details {
  display: grid;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.slot-popover__details div {
  padding: var(--spacing-1) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.slot-popover__details div:last-child {
  border-bottom: none;
}

.slot-popover__notes label,
.slot-popover__url label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

.slot-popover__notes textarea,
.slot-popover__url input {
  width: 100%;
  box-sizing: border-box;
}

.slot-popover__notes .backend-field-note,
.slot-popover__url .backend-field-note {
  display: block;
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.slot-popover__actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
  margin-top: var(--spacing-2);
}

.slot-popover__close {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background-alt);
  border-radius: var(--radius-full);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xl);
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  z-index: 2;
}

.slot-popover__close:hover {
  background: var(--color-border);
  color: var(--color-foreground);
}

.slot-popover__close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slot-popover__loader {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
}

.slot-popover__loader .seed-loader__mark {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.slot-popover__loader span {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
}

/* ============================================================
   MOBILE & TABLET: Single column, left hidden
   ============================================================ */
@media (max-width: 820px) {
  .slot-popover {
    width: 96%;
    max-height: 96vh;
  }

  .slot-popover__inner {
    grid-template-columns: 1fr;      /* single column */
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }

  .slot-popover__left {
    display: none;                   /* hide details on small screens */
  }

  .slot-popover__right {
    width: 100%;
  }

  .slot-popover__close {
    top: var(--spacing-2);
    right: var(--spacing-2);
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--font-size-lg);
  }

  .slot-popover__actions {
    flex-direction: column;
  }

  .slot-popover__actions .btn {
    width: 100%;
    justify-content: center;
  }
}


section.child-dashboard-section table tr td a { text-decoration: underline!important; color:blue!important;}


/* ==========================================================================
   SLP Dashboard — Extra Styles
   Add these to the bottom of assets/css/style.css
   ========================================================================== */

/* ---- Page Layout ---- */
.slp-dashboard {
  padding: var(--spacing-8) 0 var(--spacing-20);
}

.slp-dash-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.slp-dash-greeting {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-foreground);
  margin: 0;
}

.slp-dash-date {
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

/* Quick nav links (replacing the big action cards) */
.slp-dash-quick-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-shrink: 0;
}

.slp-dash-quick-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.slp-dash-quick-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ---- Summary Stat Cards ---- */
.slp-dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.slp-dash-stat-card {
  display: grid;
  align-content: start;
  gap: var(--spacing-2);
  padding: var(--spacing-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

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

.slp-dash-stat-card--urgent {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), var(--color-card));
}

.slp-dash-stat-card--warn {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), var(--color-card));
}

.slp-dash-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-1);
}

.slp-dash-stat-icon--purple { background-color: var(--color-primary-bg); color: var(--color-primary); }
.slp-dash-stat-icon--rose   { background-color: var(--color-error-bg); color: var(--color-error); }
.slp-dash-stat-icon--amber  { background-color: var(--color-warning-bg); color: var(--color-warning); }
.slp-dash-stat-icon--teal   { background-color: var(--color-accent-bg); color: var(--color-accent); }

.slp-dash-stat-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-muted);
}

.slp-dash-stat-value {
  display: block;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-foreground);
  margin-top: var(--spacing-1);
}

.slp-dash-stat-sub {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

/* ---- Section Cards ---- */
.slp-dash-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.slp-dash-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border-light);
}

.slp-dash-card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0;
}

.slp-dash-card-sub {
  margin-top: var(--spacing-1);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
}

/* ---- Two-column layout ---- */
.slp-dash-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

/* ---- Avatars ---- */
.slp-dash-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: white;
}

.slp-dash-avatar--purple { background-color: var(--color-primary); }
.slp-dash-avatar--teal   { background-color: var(--color-accent); }
.slp-dash-avatar--amber  { background: #d97706; }
.slp-dash-avatar--rose   { background: #e11d48; }
.slp-dash-avatar--indigo { background: #4f46e5; }
.slp-dash-avatar--gray   { background: var(--color-foreground-muted); }

/* ---- Pending Video Review List ---- */
.slp-dash-review-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.slp-dash-review-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  color: var(--color-foreground);
  transition: background-color var(--transition-fast);
  text-decoration: none;
}

.slp-dash-review-item:hover {
  background-color: var(--color-background-alt);
}

.slp-dash-review-body {
  flex: 1;
  min-width: 0;
}

.slp-dash-review-body strong {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slp-dash-review-meta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  margin-top: 2px;
}

.slp-dash-review-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-1);
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.slp-dash-review-badge {
  display: inline-flex;
  padding: 2px 8px;
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

/* ---- No Activity / Alert List ---- */
.slp-dash-alert-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.slp-dash-alert-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.slp-dash-alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slp-dash-alert-body strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.slp-dash-alert-body span {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
}

.slp-dash-alert-plan {
  font-size: var(--font-size-xs);
  color: var(--color-warning) !important;
  font-weight: var(--font-weight-medium);
}

/* ---- Sub-cards (info notices inside cards) ---- */
.slp-dash-subcard {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.slp-dash-subcard--warn {
  background-color: var(--color-warning-bg);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.slp-dash-subcard--info {
  background-color: var(--color-primary-bg);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.slp-dash-subcard-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin-bottom: var(--spacing-3);
}

.slp-dash-subcard--warn .slp-dash-subcard-header { color: #92400e; }
.slp-dash-subcard--info .slp-dash-subcard-header { color: var(--color-primary-dark); }

.slp-dash-subcard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.slp-dash-subcard-list li {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
}

.slp-dash-subcard-list li a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}

/* ---- Appointments ---- */
.slp-dash-appt-section {
  margin-bottom: var(--spacing-6);
}

.slp-dash-appt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
}

.slp-dash-appt-group-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-3);
}

.slp-dash-appt-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.slp-dash-appt-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--transition-fast);
}

.slp-dash-appt-item--today {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), var(--color-background-alt));
  border-color: rgba(124, 58, 237, 0.25);
}

.slp-dash-appt-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
  min-width: 9rem;
}

.slp-dash-appt-hour {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.slp-dash-appt-info {
  min-width: 0;
}

.slp-dash-appt-info strong {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.slp-dash-appt-info span {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  margin-top: 2px;
}

/* Google Meet button */
.slp-dash-meet-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.slp-dash-meet-btn:hover {
  background-color: var(--color-primary-dark);
}

.slp-dash-meet-btn--muted {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.slp-dash-meet-btn--muted:hover {
  background-color: var(--color-primary-bg);
}

/* ---- Progress Table ---- */
.slp-dash-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-6);
}

.slp-dash-progress-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
}

.slp-dash-progress-table th {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-muted);
  background-color: var(--color-background-alt);
  border-bottom: 1px solid var(--color-border);
}

.slp-dash-progress-table td {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.slp-dash-progress-table tbody tr:hover {
  background-color: rgba(124, 58, 237, 0.03);
}

.slp-dash-progress-table tbody tr:last-child td {
  border-bottom: none;
}

.slp-dash-progress-row--critical td {
  background-color: rgba(239, 68, 68, 0.03);
}

.slp-dash-progress-row--warn td {
  background-color: rgba(245, 158, 11, 0.03);
}

.slp-dash-patient-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
}

.slp-dash-cell-muted {
  color: var(--color-foreground-muted) !important;
  font-size: var(--font-size-xs) !important;
}

/* Score display */
.slp-dash-score-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.slp-dash-score {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 3rem;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.slp-dash-score--low  { background-color: var(--color-error-bg); color: var(--color-error); }
.slp-dash-score--mid  { background-color: var(--color-warning-bg); color: var(--color-warning); }
.slp-dash-score--high { background-color: var(--color-success-bg); color: var(--color-success); }

.slp-dash-score-bar {
  flex: 1;
  height: 0.45rem;
  min-width: 5rem;
  background-color: var(--color-border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.slp-dash-score-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s ease;
}

/* Trend indicators */
.slp-dash-trend {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.slp-dash-trend--up   { color: var(--color-success); }
.slp-dash-trend--down { color: var(--color-error); }
.slp-dash-trend--flat { color: var(--color-warning); }

/* Weekly task count */
.slp-dash-tasks {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-muted);
}

/* ---- Distribution Chart ---- */
.slp-dash-distribution {
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-border-light);
}

.slp-dash-dist-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
  margin-bottom: var(--spacing-6);
}

.slp-dash-dist-bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-8);
  align-items: end;
}

.slp-dash-dist-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  text-align: center;
}

.slp-dash-dist-bar-wrap {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-background-alt);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-bottom: none;
}

.slp-dash-dist-bar-fill {
  width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: height 0.5s ease;
}

.slp-dash-dist-bar-fill--low  { background-color: var(--color-error); }
.slp-dash-dist-bar-fill--mid  { background-color: var(--color-warning); }
.slp-dash-dist-bar-fill--high { background-color: var(--color-success); }

.slp-dash-dist-count {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.slp-dash-dist-label {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  font-weight: var(--font-weight-medium);
}

.slp-dash-dist-sublabel {
  margin-top: var(--spacing-1);
}

/* ---- btn--sm shorthand ---- */
.btn--sm {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  height: 2rem;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
  .slp-dash-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slp-dash-appt-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }
}

@media (max-width: 820px) {
  .slp-dash-two-col {
    grid-template-columns: 1fr;
  }
  .slp-dash-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slp-dash-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
  }
  .slp-dash-quick-links {
    justify-content: flex-start;
  }
  .slp-dash-appt-item {
    grid-template-columns: 1fr auto;
  }
  .slp-dash-appt-time {
    grid-column: 1 / -1;
    min-width: auto;
    flex-direction: row;
    align-items: center;
  }
  .slp-dash-appt-info {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .slp-dash-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
  }
  .slp-dash-stat-value {
    font-size: var(--font-size-3xl);
  }
  .slp-dash-greeting {
    font-size: var(--font-size-2xl);
  }
  .slp-dash-dist-bars {
    gap: var(--spacing-4);
  }
  .slp-dash-appt-item {
    grid-template-columns: 1fr;
  }
  .slp-dash-meet-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Chat Module Styles
   ========================================================================== */

.chat-bubble {
  margin-bottom: 16px;
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-xl);
  position: relative;
}

.chat-bubble--outgoing {
  margin-left: auto;
  background: var(--color-primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-bubble--incoming {
  margin-right: auto;
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}

.chat-bubble__sender {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 4px;
}

.chat-bubble--outgoing .chat-bubble__sender {
  color: rgba(255,255,255,0.85);
}

.chat-bubble--incoming .chat-bubble__sender {
  color: var(--color-foreground-muted);
}

.chat-bubble__text {
  word-break: break-word;
  line-height: var(--line-height-relaxed);
}

.chat-bubble__timestamp {
  font-size: var(--font-size-xs);
  margin-top: 4px;
  opacity: 0.7;
}

.chat-bubble--outgoing .chat-bubble__timestamp {
  color: rgba(255,255,255,0.75);
}

.chat-bubble--incoming .chat-bubble__timestamp {
  color: var(--color-foreground-muted);
}

/* System messages */
.chat-bubble--system {
  max-width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  padding: 8px 0;
}

.chat-bubble__system-message {
  display: inline-block;
  padding: 8px 16px;
  background: var(--color-background-alt);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  font-style: italic;
}

.chat-bubble__system-icon {
  margin-right: 8px;
}

.chat-bubble--system .chat-bubble__timestamp {
  color: var(--color-foreground-light);
  font-size: var(--font-size-xs);
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 560px) {
  .chat-bubble {
    max-width: 90%;
  }
}

.chat-bubble--system a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================================
   SLP Dashboard – Recent Chats (Teams-style)
   ========================================================================== */

.slp-dash-chat-container {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 420px;
  background: var(--color-card);
}

/* Left panel */
.slp-dash-chat-left {
  flex: 0 0 280px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  background: var(--color-background-alt);
}

.slp-dash-chat-search {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}

.slp-dash-chat-search input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  background: var(--color-card);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.slp-dash-chat-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

.slp-dash-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-2);
}

.slp-dash-chat-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: var(--spacing-1);
}

.slp-dash-chat-item:hover {
  background: var(--color-primary-bg);
}

.slp-dash-chat-item--active {
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
}

.slp-dash-chat-item__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: white;
  flex-shrink: 0;
}

.slp-dash-chat-item__info {
  flex: 1;
  min-width: 0;
}

.slp-dash-chat-item__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
}

.slp-dash-chat-item__preview {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slp-dash-chat-item__time {
  font-size: var(--font-size-xs);
  color: var(--color-foreground-light);
  flex-shrink: 0;
}

/* Right panel */
.slp-dash-chat-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-card);
}

.slp-dash-chat-thread {
  flex: 1;
  padding: var(--spacing-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

/* Reuse existing chat-bubble styles, but add a bit more spacing */
.slp-dash-chat-thread .chat-bubble {
  max-width: 80%;
}

.slp-dash-chat-thread .chat-bubble--outgoing {
  align-self: flex-end;
}

.slp-dash-chat-thread .chat-bubble--incoming {
  align-self: flex-start;
}

.slp-dash-chat-thread .chat-bubble--system {
  align-self: center;
  max-width: 100%;
}

.slp-dash-chat-footer {
  padding: var(--spacing-3);
  border-top: 1px solid var(--color-border);
  text-align: right;
}

/* Responsive */
@media (max-width: 820px) {
  .slp-dash-chat-container {
    flex-direction: column;
    min-height: auto;
  }

  .slp-dash-chat-left {
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    max-height: 280px;
  }

  .slp-dash-chat-right {
    min-height: 340px;
  }

  .slp-dash-chat-item__preview {
    max-width: 160px;
  }
}

@media (max-width: 560px) {
  .slp-dash-chat-left {
    max-height: 220px;
  }

  .slp-dash-chat-item__preview {
    max-width: 120px;
  }

  .slp-dash-chat-thread .chat-bubble {
    max-width: 95%;
  }
}

/* Search filter input */
#word-filter {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  background-color: var(--color-card);
  color: var(--color-foreground);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#word-filter:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}

/* Clear button with border */
#clear-word-filter {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

#clear-word-filter:hover {
  background: var(--color-background-alt);
  border-color: var(--color-foreground-muted);
  color: var(--color-foreground);
}

/* Appointments – More Slots button */
.slot-popover__more-slots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.slot-popover__more-slots:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}

.slot-popover__more-slots .plus-icon {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}

/* Initially hide sections that depend on having at least one patient */
.hidden-if-no-patients {
  display: none !important;
}

/* ==========================================================================
   SLP Dashboard – Empty State
   ========================================================================== */
.slp-dash-empty-card {
  max-width: 600px;
  margin: 40px auto;
  padding: 48px 32px;
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(20, 184, 166, 0.04));
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-lg);
}

.slp-dash-empty-icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--spacing-4);
}

.slp-dash-empty-card h2 {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
}

.slp-dash-empty-card p {
  max-width: 480px;
  margin: 0 auto var(--spacing-6);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.slp-dash-empty-card .btn {
  min-width: 180px;
}


/* ==========================================================================
   Password Toggle Icon
   ========================================================================== */
.auth-field {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--color-foreground-muted);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
  transition: color var(--transition-fast);
}

.password-toggle:hover {
  color: var(--color-foreground);
}

.password-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#video-filter-form{
  margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    background: var(--color-card);
    padding: 16px 20px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
}

.patient-exercise-page {
  padding-top: var(--spacing-10);
}

.patient-exercise-card {
  display: grid;
  gap: var(--spacing-6);
}

.patient-exercise-header {
  display: grid;
  gap: var(--spacing-3);
}

.patient-exercise-header h1 {
  margin: 0;
  color: var(--color-foreground);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--line-height-tight);
}

.patient-exercise-header p {
  margin: 0;
  color: var(--color-foreground-muted);
}

.patient-exercise-video {
  width: 100%;
  max-height: min(72vh, 720px);
  background: black;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 1024px) {
  .admin-summary-grid,
  .admin-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .backend-section__header {
    align-items: stretch;
    flex-direction: column;
  }

  .backend-section__header .btn {
    width: 100%;
  }

  .admin-summary-grid,
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-document-list__item {
    grid-template-columns: 1fr;
  }
}


.backend-form-card__message--success{margin-bottom:2rem;}

button[data-action="get-ai-assessment-summary"] {
    display: none !important;
}