/*
 * Vocab Design System
 * Custom CSS layered on Bootstrap 5.3
 *
 * This file implements design tokens and component overrides from the UI spec.
 * Bootstrap handles layout/grid; this provides branding, colors, and polish.
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1.1 PRIMARY COLORS
     -------------------------------------------------------------------------- */
  --vocab-brand-green: #2ECC71;
  --vocab-brand-green-hover: #27AE60;
  --vocab-brand-green-active: #1E8449;
  --vocab-dark: #2C3E50;
  --vocab-white: #FFFFFF;

  /* --------------------------------------------------------------------------
     1.2 SECONDARY COLORS (Grayscale)
     -------------------------------------------------------------------------- */
  --vocab-black: #1A1A1A;
  --vocab-near-black: #2C3E50;
  --vocab-charcoal: #34495E;
  --vocab-gray: #7F8C8D;
  --vocab-medium-gray: #95A5A6;
  --vocab-light-gray: #BDC3C7;
  --vocab-very-light-gray: #ECF0F1;
  --vocab-off-white: #F5F6F7;

  /* --------------------------------------------------------------------------
     1.3 SEMANTIC COLORS
     -------------------------------------------------------------------------- */
  --vocab-success: #27AE60;
  --vocab-error: #E74C3C;
  --vocab-error-hover: #C0392B;
  --vocab-warning: #F39C12;
  --vocab-info: #3498DB;

  /* --------------------------------------------------------------------------
     1.4 CEFR LEVEL COLORS
     Muted pastel palette matching definition grid
     -------------------------------------------------------------------------- */
  --vocab-level-A1: #e8f5e9;
  --vocab-level-A2: #c8e6c9;
  --vocab-level-B1: #fff8e1;
  --vocab-level-B2: #ffe0b2;
  --vocab-level-C1: #f3e5f5;
  --vocab-level-C2: #e1bee7;

  /* Chinese levels - blue family */
  --vocab-level-ZH1: #E3F2FD;
  --vocab-level-ZH2: #BBDEFB;
  --vocab-level-ZH3: #90CAF9;

  /* Default for unknown levels */
  --vocab-level-default: #F5F5F5;

  /* --------------------------------------------------------------------------
     1.5 TYPOGRAPHY
     -------------------------------------------------------------------------- */
  --vocab-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --vocab-font-size-h1: 36px;
  --vocab-font-size-h2: 28px;
  --vocab-font-size-h3: 20px;
  --vocab-font-size-h4: 16px;
  --vocab-font-size-body-large: 16px;
  --vocab-font-size-body: 14px;
  --vocab-font-size-body-small: 12px;
  --vocab-font-size-label: 12px;
  --vocab-font-size-caption: 11px;

  /* Font weights */
  --vocab-font-weight-regular: 400;
  --vocab-font-weight-semibold: 600;
  --vocab-font-weight-bold: 700;

  /* Line heights */
  --vocab-line-height-heading: 1.2;
  --vocab-line-height-body: 1.6;
  --vocab-line-height-tight: 1.4;

  /* --------------------------------------------------------------------------
     1.6 SPACING SCALE (Base: 8px)
     -------------------------------------------------------------------------- */
  --vocab-space-xs: 4px;
  --vocab-space-sm: 8px;
  --vocab-space-md: 16px;
  --vocab-space-lg: 24px;
  --vocab-space-xl: 32px;
  --vocab-space-xxl: 48px;

  /* --------------------------------------------------------------------------
     1.7 SHADOWS
     -------------------------------------------------------------------------- */
  --vocab-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08);
  --vocab-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* --------------------------------------------------------------------------
     1.8 TRANSITIONS
     -------------------------------------------------------------------------- */
  --vocab-transition: 200ms ease-in-out;

  /* --------------------------------------------------------------------------
     1.9 BORDERS
     -------------------------------------------------------------------------- */
  --vocab-border-radius-sm: 4px;
  --vocab-border-radius: 6px;
  --vocab-border-radius-lg: 8px;
  --vocab-border-radius-pill: 20px;
}

/* ==========================================================================
   2. BUTTON COMPONENT OVERRIDES
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 PRIMARY BUTTON (.btn-primary)
   Overrides Bootstrap blue with brand green
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--vocab-brand-green);
  --bs-btn-border-color: var(--vocab-brand-green);
  --bs-btn-hover-bg: var(--vocab-brand-green-hover);
  --bs-btn-hover-border-color: var(--vocab-brand-green-hover);
  --bs-btn-active-bg: var(--vocab-brand-green-active);
  --bs-btn-active-border-color: var(--vocab-brand-green-active);
  --bs-btn-disabled-bg: var(--vocab-light-gray);
  --bs-btn-disabled-border-color: var(--vocab-light-gray);

  font-weight: var(--vocab-font-weight-semibold);
  font-size: var(--vocab-font-size-body);
  padding: 12px 16px;
  border-radius: var(--vocab-border-radius);
  min-height: 44px;
  transition: background-color var(--vocab-transition),
              border-color var(--vocab-transition),
              box-shadow var(--vocab-transition);
}

.btn-primary:hover {
  box-shadow: var(--vocab-shadow-subtle);
}

.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
  outline: none;
}

/* --------------------------------------------------------------------------
   2.2 SECONDARY BUTTON (.btn-secondary)
   Outlined style with subtle background
   -------------------------------------------------------------------------- */
.btn-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--vocab-light-gray);
  --bs-btn-color: var(--vocab-dark);
  --bs-btn-hover-bg: var(--vocab-very-light-gray);
  --bs-btn-hover-border-color: var(--vocab-light-gray);
  --bs-btn-hover-color: var(--vocab-dark);
  --bs-btn-active-bg: var(--vocab-light-gray);
  --bs-btn-active-border-color: var(--vocab-light-gray);
  --bs-btn-active-color: var(--vocab-dark);

  font-weight: var(--vocab-font-weight-semibold);
  font-size: var(--vocab-font-size-body);
  padding: 12px 16px;
  border-radius: var(--vocab-border-radius);
  min-height: 44px;
  transition: background-color var(--vocab-transition),
              border-color var(--vocab-transition);
}

/* --------------------------------------------------------------------------
   2.3 OUTLINE PRIMARY BUTTON (.btn-outline-primary)
   Brand green outline variant
   -------------------------------------------------------------------------- */
.btn-outline-primary {
  --bs-btn-color: var(--vocab-brand-green);
  --bs-btn-border-color: var(--vocab-brand-green);
  --bs-btn-hover-bg: var(--vocab-brand-green);
  --bs-btn-hover-border-color: var(--vocab-brand-green);
  --bs-btn-hover-color: var(--vocab-white);
  --bs-btn-active-bg: var(--vocab-brand-green-hover);
  --bs-btn-active-border-color: var(--vocab-brand-green-hover);

  font-weight: var(--vocab-font-weight-semibold);
  font-size: var(--vocab-font-size-body);
  padding: 12px 16px;
  border-radius: var(--vocab-border-radius);
  min-height: 44px;
  transition: background-color var(--vocab-transition),
              border-color var(--vocab-transition),
              color var(--vocab-transition);
}

/* --------------------------------------------------------------------------
   2.4 DESTRUCTIVE BUTTON (.btn-danger)
   Error red for delete/destructive actions
   -------------------------------------------------------------------------- */
.btn-danger {
  --bs-btn-bg: var(--vocab-error);
  --bs-btn-border-color: var(--vocab-error);
  --bs-btn-hover-bg: var(--vocab-error-hover);
  --bs-btn-hover-border-color: var(--vocab-error-hover);
  --bs-btn-active-bg: #A93226;
  --bs-btn-active-border-color: #A93226;
  --bs-btn-disabled-bg: var(--vocab-light-gray);
  --bs-btn-disabled-border-color: var(--vocab-light-gray);

  font-weight: var(--vocab-font-weight-semibold);
  font-size: var(--vocab-font-size-body);
  padding: 12px 16px;
  border-radius: var(--vocab-border-radius);
  min-height: 44px;
  transition: background-color var(--vocab-transition),
              border-color var(--vocab-transition),
              box-shadow var(--vocab-transition);
}

/* --------------------------------------------------------------------------
   2.5 SUCCESS BUTTON (.btn-success)
   Override Bootstrap success to match our semantic color
   -------------------------------------------------------------------------- */
.btn-success {
  --bs-btn-bg: var(--vocab-success);
  --bs-btn-border-color: var(--vocab-success);
  --bs-btn-hover-bg: #1E8449;
  --bs-btn-hover-border-color: #1E8449;

  font-weight: var(--vocab-font-weight-semibold);
  font-size: var(--vocab-font-size-body);
  padding: 12px 16px;
  border-radius: var(--vocab-border-radius);
  min-height: 44px;
}

/* ==========================================================================
   3. CARD COMPONENT STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 VOCAB CARD (.vocab-card)
   Custom card with hover effects per spec
   -------------------------------------------------------------------------- */
.vocab-card {
  background: var(--vocab-white);
  border: 1px solid var(--vocab-very-light-gray);
  border-radius: var(--vocab-border-radius-lg);
  padding: var(--vocab-space-lg);
  box-shadow: var(--vocab-shadow-subtle);
  transition: box-shadow var(--vocab-transition),
              transform var(--vocab-transition);
}

.vocab-card:hover {
  box-shadow: var(--vocab-shadow-elevated);
  transform: scale(1.02);
}

.vocab-card-title {
  font-size: var(--vocab-font-size-h3);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-dark);
  margin-bottom: var(--vocab-space-sm);
}

.vocab-card-meta {
  font-size: var(--vocab-font-size-body-small);
  color: var(--vocab-medium-gray);
}

/* --------------------------------------------------------------------------
   3.2 BOOTSTRAP CARD ENHANCEMENTS (.card)
   Enhanced default Bootstrap cards with vocab styling
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--vocab-very-light-gray);
  border-radius: var(--vocab-border-radius-lg);
  box-shadow: var(--vocab-shadow-subtle);
  transition: box-shadow var(--vocab-transition),
              transform var(--vocab-transition);
}

.card:hover {
  box-shadow: var(--vocab-shadow-elevated);
}

.card-title {
  font-size: var(--vocab-font-size-h3);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-dark);
}

/* ==========================================================================
   4. CEFR LEVEL BADGE/PILL STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 LEVEL BADGE (.vocab-level-badge)
   Pill-shaped badges for CEFR level tags
   -------------------------------------------------------------------------- */
.vocab-level-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--vocab-border-radius-pill);
  font-size: var(--vocab-font-size-caption);
  font-weight: var(--vocab-font-weight-semibold);
  line-height: 1;
}

.vocab-level-badge.level-A1 {
  background-color: var(--vocab-level-A1);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-A2 {
  background-color: var(--vocab-level-A2);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-B1 {
  background-color: var(--vocab-level-B1);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-B2 {
  background-color: var(--vocab-level-B2);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-C1 {
  background-color: var(--vocab-level-C1);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-C2 {
  background-color: var(--vocab-level-C2);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-ZH1 {
  background-color: var(--vocab-level-ZH1);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-ZH2 {
  background-color: var(--vocab-level-ZH2);
  color: var(--vocab-dark);
}

.vocab-level-badge.level-ZH3 {
  background-color: var(--vocab-level-ZH3);
  color: var(--vocab-dark);
}

/* ==========================================================================
   5. CEFR LEVEL TABLE CELL BACKGROUNDS
   Migrated from grid.html inline styles for reuse
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 TABLE CELL LEVEL CLASSES (.level-*)
   Background colors for definition grid cells
   -------------------------------------------------------------------------- */
.level-A1 {
  background-color: var(--vocab-level-A1) !important;
}

.level-A2 {
  background-color: var(--vocab-level-A2) !important;
}

.level-B1 {
  background-color: var(--vocab-level-B1) !important;
}

.level-B2 {
  background-color: var(--vocab-level-B2) !important;
}

.level-C1 {
  background-color: var(--vocab-level-C1) !important;
}

.level-C2 {
  background-color: var(--vocab-level-C2) !important;
}

.level-ZH1 {
  background-color: var(--vocab-level-ZH1) !important;
}

.level-ZH2 {
  background-color: var(--vocab-level-ZH2) !important;
}

.level-ZH3 {
  background-color: var(--vocab-level-ZH3) !important;
}

.level-default {
  background-color: var(--vocab-level-default) !important;
}

/* ==========================================================================
   6. NAVIGATION BAR STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 NAVBAR CONTAINER (.navbar)
   Dark charcoal background per spec (#2C3E50)
   -------------------------------------------------------------------------- */
.navbar {
  background-color: var(--vocab-dark) !important;
}

/* --------------------------------------------------------------------------
   6.2 NAVBAR BRAND (.navbar-brand)
   Brand text styling with hover state
   -------------------------------------------------------------------------- */
.navbar-brand {
  font-weight: var(--vocab-font-weight-bold);
  font-size: var(--vocab-font-size-h1);
  color: var(--vocab-white) !important;
  transition: color var(--vocab-transition);
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--vocab-brand-green) !important;
}

/* --------------------------------------------------------------------------
   6.3 NAV LINKS (.nav-link)
   White text with hover/active states per spec
   -------------------------------------------------------------------------- */
.navbar-dark .nav-link {
  font-size: var(--vocab-font-size-body);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-white) !important;
  transition: color var(--vocab-transition);
  padding: var(--vocab-space-sm) var(--vocab-space-md);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
  color: var(--vocab-brand-green) !important;
}

.navbar-dark .nav-link.active {
  color: var(--vocab-brand-green) !important;
  border-bottom: 2px solid var(--vocab-brand-green);
}

/* --------------------------------------------------------------------------
   6.4 NAVBAR TEXT (.navbar-text)
   Username display styling
   -------------------------------------------------------------------------- */
.navbar-text {
  font-size: var(--vocab-font-size-body);
  color: var(--vocab-light-gray) !important;
}

/* --------------------------------------------------------------------------
   6.5 LANGUAGE SWITCHER BUTTON
   Outline button on dark navbar
   -------------------------------------------------------------------------- */
.navbar .btn-outline-light {
  font-size: var(--vocab-font-size-body-small);
  font-weight: var(--vocab-font-weight-semibold);
  border-color: var(--vocab-light-gray);
  color: var(--vocab-white);
  padding: var(--vocab-space-xs) var(--vocab-space-sm);
}

.navbar .btn-outline-light:hover,
.navbar .btn-outline-light:focus {
  background-color: var(--vocab-charcoal);
  border-color: var(--vocab-white);
  color: var(--vocab-white);
}

/* --------------------------------------------------------------------------
   6.6 NAVBAR TOGGLER (Mobile)
   Mobile menu toggle styling
   -------------------------------------------------------------------------- */
.navbar-toggler {
  border-color: var(--vocab-light-gray);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
}

/* ==========================================================================
   7. BREADCRUMB NAVIGATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 BREADCRUMB CONTAINER (.vocab-breadcrumb)
   Left-aligned, below header positioning per spec
   -------------------------------------------------------------------------- */
.vocab-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--vocab-space-sm) 0;
  margin-bottom: var(--vocab-space-md);
  font-size: var(--vocab-font-size-body-small);
  line-height: var(--vocab-line-height-tight);
}

/* --------------------------------------------------------------------------
   7.2 BREADCRUMB ITEMS (.vocab-breadcrumb-item)
   Clickable text links
   -------------------------------------------------------------------------- */
.vocab-breadcrumb-item {
  color: var(--vocab-brand-green);
  text-decoration: none;
  transition: color var(--vocab-transition);
}

.vocab-breadcrumb-item:hover,
.vocab-breadcrumb-item:focus {
  color: var(--vocab-brand-green-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7.3 BREADCRUMB SEPARATOR (.vocab-breadcrumb-separator)
   Gray separator character with padding
   -------------------------------------------------------------------------- */
.vocab-breadcrumb-separator {
  color: var(--vocab-medium-gray);
  padding: 0 var(--vocab-space-sm);
  user-select: none;
}

/* --------------------------------------------------------------------------
   7.4 CURRENT PAGE (.vocab-breadcrumb-current)
   Non-clickable current page indicator
   -------------------------------------------------------------------------- */
.vocab-breadcrumb-current {
  color: var(--vocab-charcoal);
  font-weight: var(--vocab-font-weight-semibold);
}

/* --------------------------------------------------------------------------
   7.5 RESPONSIVE BREADCRUMB
   Truncation on mobile with ellipsis
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .vocab-breadcrumb {
    font-size: var(--vocab-font-size-caption);
  }

  .vocab-breadcrumb-item,
  .vocab-breadcrumb-current {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ==========================================================================
   8. LANDING PAGE COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 HERO SECTION (.vocab-hero)
   First-time user welcome with gradient background per spec
   -------------------------------------------------------------------------- */
.vocab-hero {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, var(--vocab-white) 100%);
  border-radius: var(--vocab-border-radius-lg);
  padding: var(--vocab-space-xxl) var(--vocab-space-lg);
  text-align: center;
  margin-bottom: var(--vocab-space-xl);
}

.vocab-hero-title {
  font-size: var(--vocab-font-size-h1);
  font-weight: var(--vocab-font-weight-bold);
  color: var(--vocab-dark);
  margin-bottom: var(--vocab-space-md);
  line-height: var(--vocab-line-height-heading);
}

.vocab-hero-description {
  font-size: var(--vocab-font-size-body-large);
  color: var(--vocab-charcoal);
  max-width: 600px;
  margin: 0 auto var(--vocab-space-lg);
  line-height: var(--vocab-line-height-body);
}

.vocab-hero-cta {
  margin-top: var(--vocab-space-lg);
}

.vocab-hero-or {
  display: inline-block;
  margin: 0 var(--vocab-space-sm);
  color: var(--vocab-charcoal);
  font-size: var(--vocab-font-size-body);
}

/* --------------------------------------------------------------------------
   8.2 STAT CARDS (.vocab-stat-card)
   Stats display with number + label layout per spec
   -------------------------------------------------------------------------- */
.vocab-stats-section {
  margin-bottom: var(--vocab-space-xl);
}

.vocab-stat-card {
  background: var(--vocab-off-white);
  border: 1px solid var(--vocab-very-light-gray);
  border-radius: var(--vocab-border-radius-lg);
  padding: var(--vocab-space-lg);
  text-align: center;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vocab-stat-number {
  font-size: var(--vocab-font-size-h2);
  font-weight: var(--vocab-font-weight-bold);
  color: var(--vocab-brand-green);
  line-height: 1;
  margin-bottom: var(--vocab-space-xs);
}

.vocab-stat-label {
  font-size: var(--vocab-font-size-body);
  color: var(--vocab-medium-gray);
}

/* --------------------------------------------------------------------------
   8.3 QUICK ACTIONS BAR (.vocab-quick-actions)
   Action buttons bar per spec
   -------------------------------------------------------------------------- */
.vocab-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vocab-space-md);
  margin-bottom: var(--vocab-space-xl);
}

.vocab-quick-actions .btn {
  flex-shrink: 0;
}

/* Disabled placeholder buttons */
.vocab-quick-actions .btn:disabled,
.vocab-quick-actions .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   8.4 SECTION HEADER (.vocab-section-header)
   Section titles for list sections
   -------------------------------------------------------------------------- */
.vocab-section-header {
  font-size: var(--vocab-font-size-h2);
  font-weight: var(--vocab-font-weight-bold);
  color: var(--vocab-dark);
  margin-bottom: var(--vocab-space-lg);
}

/* --------------------------------------------------------------------------
   8.5 LIST GRID (.vocab-list-grid)
   Responsive grid for list cards per spec
   -------------------------------------------------------------------------- */
.vocab-list-grid {
  display: grid;
  gap: var(--vocab-space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .vocab-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vocab-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   8.6 LIST CARD ENHANCEMENTS (.vocab-list-card)
   List card specific styling building on vocab-card
   -------------------------------------------------------------------------- */
.vocab-list-card {
  display: flex;
  flex-direction: column;
}

.vocab-list-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--vocab-space-sm);
}

.vocab-list-card-title {
  font-size: var(--vocab-font-size-h3);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-dark);
  text-decoration: none;
  transition: color var(--vocab-transition);
}

.vocab-list-card-title:hover {
  color: var(--vocab-brand-green);
}

.vocab-list-card-meta {
  font-size: var(--vocab-font-size-body-small);
  color: var(--vocab-medium-gray);
  margin-bottom: var(--vocab-space-md);
}

.vocab-list-card-actions {
  margin-top: auto;
  padding-top: var(--vocab-space-md);
  border-top: 1px solid var(--vocab-very-light-gray);
}

/* --------------------------------------------------------------------------
   8.7 WORD COUNT BADGE
   Badge for displaying word count
   -------------------------------------------------------------------------- */
.vocab-word-count {
  display: inline-block;
  background: var(--vocab-very-light-gray);
  color: var(--vocab-charcoal);
  font-size: var(--vocab-font-size-body-small);
  font-weight: var(--vocab-font-weight-semibold);
  padding: var(--vocab-space-xs) var(--vocab-space-sm);
  border-radius: var(--vocab-border-radius-pill);
}

/* --------------------------------------------------------------------------
   8.8 RESPONSIVE ADJUSTMENTS
   Mobile-specific layout adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .vocab-hero {
    padding: var(--vocab-space-xl) var(--vocab-space-md);
  }

  .vocab-hero-title {
    font-size: var(--vocab-font-size-h2);
  }

  .vocab-quick-actions {
    flex-direction: column;
  }

  .vocab-quick-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   9. FORM INPUT STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 BASE INPUT STYLING (.form-control override)
   White background, brand green focus state per spec
   -------------------------------------------------------------------------- */
.form-control {
  background-color: var(--vocab-white);
  border: 1px solid var(--vocab-light-gray);
  border-radius: var(--vocab-border-radius-sm);
  padding: 12px;
  font-size: var(--vocab-font-size-body);
  font-family: var(--vocab-font-family);
  min-height: 44px;
  transition: border-color var(--vocab-transition),
              box-shadow var(--vocab-transition);
}

.form-control::placeholder {
  color: var(--vocab-medium-gray);
}

/* --------------------------------------------------------------------------
   9.2 FOCUS STATE
   Brand green border with subtle green glow per spec
   -------------------------------------------------------------------------- */
.form-control:focus {
  border-color: var(--vocab-brand-green);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
  outline: none;
}

/* --------------------------------------------------------------------------
   9.3 ERROR STATE (.is-invalid)
   Error red border with red glow per spec
   -------------------------------------------------------------------------- */
.form-control.is-invalid {
  border-color: var(--vocab-error);
}

.form-control.is-invalid:focus {
  border-color: var(--vocab-error);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* --------------------------------------------------------------------------
   9.4 DISABLED STATE
   Gray background with not-allowed cursor per spec
   -------------------------------------------------------------------------- */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--vocab-very-light-gray);
  color: var(--vocab-medium-gray);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   9.5 TEXTAREA VARIANT
   Same as input but with min-height for multi-line content
   -------------------------------------------------------------------------- */
textarea.form-control {
  min-height: 100px;
  line-height: var(--vocab-line-height-body);
  resize: vertical;
}

/* --------------------------------------------------------------------------
   9.6 FORM LABELS (.form-label override)
   12px semibold styling per spec
   -------------------------------------------------------------------------- */
.form-label {
  font-size: var(--vocab-font-size-label);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-dark);
  margin-bottom: var(--vocab-space-sm);
}

/* --------------------------------------------------------------------------
   9.7 REQUIRED INDICATOR
   Red asterisk for required fields
   -------------------------------------------------------------------------- */
.form-label.required::after,
.required .form-label::after {
  content: " *";
  color: var(--vocab-error);
}

/* --------------------------------------------------------------------------
   9.8 HINT TEXT (.form-text override)
   Gray helper text below inputs per spec
   -------------------------------------------------------------------------- */
.form-text {
  font-size: var(--vocab-font-size-body-small);
  color: var(--vocab-medium-gray);
  margin-top: var(--vocab-space-xs);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   9.9 ERROR MESSAGE (.invalid-feedback)
   Red error text below invalid inputs per spec
   -------------------------------------------------------------------------- */
.invalid-feedback {
  font-size: var(--vocab-font-size-body-small);
  color: var(--vocab-error);
}

/* --------------------------------------------------------------------------
   9.10 FORM GROUP SPACING
   Vertical spacing between form groups per spec
   -------------------------------------------------------------------------- */
.vocab-form-group {
  margin-bottom: var(--vocab-space-lg);
}

/* --------------------------------------------------------------------------
   9.11 SELECT STYLING (.form-select override)
   Match input styling for consistency
   -------------------------------------------------------------------------- */
.form-select {
  background-color: var(--vocab-white);
  border: 1px solid var(--vocab-light-gray);
  border-radius: var(--vocab-border-radius-sm);
  padding: 12px;
  font-size: var(--vocab-font-size-body);
  min-height: 44px;
  transition: border-color var(--vocab-transition),
              box-shadow var(--vocab-transition);
}

.form-select:focus {
  border-color: var(--vocab-brand-green);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
  outline: none;
}

.form-select:disabled {
  background-color: var(--vocab-very-light-gray);
  color: var(--vocab-medium-gray);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   9.12 CHECKBOX AND RADIO STYLING
   Brand green checked state
   -------------------------------------------------------------------------- */
.form-check-input:checked {
  background-color: var(--vocab-brand-green);
  border-color: var(--vocab-brand-green);
}

.form-check-input:focus {
  border-color: var(--vocab-brand-green);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

/* --------------------------------------------------------------------------
   9.13 CRISPY FORMS ASTERISK FIELD
   Hide asterisk span generated by django-crispy-forms
   -------------------------------------------------------------------------- */
.asteriskField {
  display: none;
}

/* --------------------------------------------------------------------------
   9.14 SHARED FORM CARD LAYOUT (.vocab-form-card)
   Centered max-width container for form cards
   -------------------------------------------------------------------------- */
.vocab-form-card {
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   10. MODAL COMPONENT STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1 MODAL BACKDROP (.modal-backdrop)
   Semi-transparent dark overlay per spec
   -------------------------------------------------------------------------- */
.modal-backdrop.show {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   10.2 MODAL DIALOG (.modal-dialog)
   Centered with responsive max-width per spec
   -------------------------------------------------------------------------- */
.modal-dialog {
  max-width: 500px;
}

@media (max-width: 576px) {
  .modal-dialog {
    max-width: 90%;
    margin: var(--vocab-space-md) auto;
  }
}

/* --------------------------------------------------------------------------
   10.3 MODAL CONTENT (.modal-content)
   Rounded corners, padding, elevated shadow per spec
   -------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--vocab-border-radius-lg);
  padding: var(--vocab-space-lg);
  box-shadow: var(--vocab-shadow-elevated);
}

/* --------------------------------------------------------------------------
   10.4 MODAL HEADER (.modal-header)
   Title styling with optional subtle border per spec
   -------------------------------------------------------------------------- */
.modal-header {
  border-bottom: 1px solid var(--vocab-very-light-gray);
  padding: 0 0 var(--vocab-space-md) 0;
  margin-bottom: var(--vocab-space-md);
}

.modal-title {
  font-size: var(--vocab-font-size-h3);
  font-weight: var(--vocab-font-weight-bold);
  color: var(--vocab-dark);
}

/* --------------------------------------------------------------------------
   10.5 CLOSE BUTTON (.btn-close)
   Positioned top-right with accessible sizing per spec
   -------------------------------------------------------------------------- */
.modal-header .btn-close {
  position: absolute;
  top: var(--vocab-space-lg);
  right: var(--vocab-space-lg);
  padding: var(--vocab-space-sm);
  opacity: 0.5;
  transition: opacity var(--vocab-transition);
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10.6 MODAL BODY (.modal-body)
   Body text styling per spec
   -------------------------------------------------------------------------- */
.modal-body {
  font-size: var(--vocab-font-size-body);
  color: var(--vocab-charcoal);
  padding: 0;
  line-height: var(--vocab-line-height-body);
}

/* --------------------------------------------------------------------------
   10.7 MODAL FOOTER (.modal-footer)
   Right-aligned buttons with proper spacing per spec
   -------------------------------------------------------------------------- */
.modal-footer {
  border-top: none;
  padding: var(--vocab-space-lg) 0 0 0;
  gap: var(--vocab-space-sm);
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   10.8 MODAL ANIMATION
   Fade in with subtle scale effect per spec
   -------------------------------------------------------------------------- */
.modal.fade .modal-dialog {
  transform: scale(0.95);
  transition: transform var(--vocab-transition);
}

.modal.show .modal-dialog {
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   10.9 DESTRUCTIVE MODAL VARIANT
   For delete confirmations - uses .btn-danger for primary action
   -------------------------------------------------------------------------- */
.modal-destructive .modal-title {
  color: var(--vocab-error);
}

.modal-destructive .modal-body {
  color: var(--vocab-charcoal);
}

/* --------------------------------------------------------------------------
   10.10 MODAL FORM INTEGRATION
   Proper spacing for forms inside modals
   -------------------------------------------------------------------------- */
.modal-body .form-control,
.modal-body .form-select {
  margin-bottom: var(--vocab-space-md);
}

.modal-body .form-control:last-child,
.modal-body .form-select:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   11. TOAST NOTIFICATION STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 TOAST CONTAINER (.vocab-toast-container)
   Fixed positioning bottom-right per spec
   -------------------------------------------------------------------------- */
.vocab-toast-container {
  position: fixed;
  bottom: var(--vocab-space-lg);
  right: var(--vocab-space-lg);
  z-index: 1050;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--vocab-space-sm);
  max-width: 360px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11.2 TOAST ITEM (.vocab-toast)
   Individual toast notification styling
   -------------------------------------------------------------------------- */
.vocab-toast {
  display: flex;
  align-items: flex-start;
  background: var(--vocab-white);
  border-radius: var(--vocab-border-radius-lg);
  box-shadow: var(--vocab-shadow-elevated);
  padding: var(--vocab-space-md);
  border-left: 4px solid var(--vocab-info);
  pointer-events: auto;
  animation: slideInRight 200ms ease-out;
}

/* --------------------------------------------------------------------------
   11.3 TOAST ICON (.vocab-toast-icon)
   Icon styling for toast notifications
   -------------------------------------------------------------------------- */
.vocab-toast-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--vocab-space-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   11.4 TOAST CONTENT (.vocab-toast-content)
   Message text styling
   -------------------------------------------------------------------------- */
.vocab-toast-content {
  flex: 1;
  font-size: var(--vocab-font-size-body);
  color: var(--vocab-dark);
  line-height: var(--vocab-line-height-tight);
}

/* --------------------------------------------------------------------------
   11.5 TOAST CLOSE BUTTON (.vocab-toast-close)
   Dismiss button styling
   -------------------------------------------------------------------------- */
.vocab-toast-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--vocab-medium-gray);
  opacity: 0.6;
  padding: 0;
  margin-left: var(--vocab-space-sm);
  line-height: 1;
  transition: opacity var(--vocab-transition);
}

.vocab-toast-close:hover,
.vocab-toast-close:focus {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   11.6 TOAST TYPE VARIANTS
   Success, error, info, warning border and icon colors
   -------------------------------------------------------------------------- */
.vocab-toast--success {
  border-left-color: var(--vocab-success);
}

.vocab-toast--success .vocab-toast-icon {
  color: var(--vocab-success);
}

.vocab-toast--error {
  border-left-color: var(--vocab-error);
}

.vocab-toast--error .vocab-toast-icon {
  color: var(--vocab-error);
}

.vocab-toast--info {
  border-left-color: var(--vocab-info);
}

.vocab-toast--info .vocab-toast-icon {
  color: var(--vocab-info);
}

.vocab-toast--warning {
  border-left-color: var(--vocab-warning);
}

.vocab-toast--warning .vocab-toast-icon {
  color: var(--vocab-warning);
}

/* --------------------------------------------------------------------------
   11.7 TOAST ANIMATIONS
   Slide in from right and fade out animations
   -------------------------------------------------------------------------- */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.vocab-toast--dismissing {
  animation: fadeOut 200ms ease-in forwards;
}

/* --------------------------------------------------------------------------
   11.8 RESPONSIVE TOAST POSITIONING
   Full-width toasts on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .vocab-toast-container {
    left: var(--vocab-space-md);
    right: var(--vocab-space-md);
    max-width: none;
  }
}

/* ==========================================================================
   12. LOADING STATE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 SPINNER (.vocab-spinner)
   Circular loading spinner with brand green color
   -------------------------------------------------------------------------- */
.vocab-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--vocab-very-light-gray);
  border-top-color: var(--vocab-brand-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.vocab-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.vocab-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 4px;
}

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

/* --------------------------------------------------------------------------
   12.2 BUTTON LOADING STATE (.btn.is-loading)
   Shows spinner in place of button text
   -------------------------------------------------------------------------- */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--vocab-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Secondary button loading state - darker spinner */
.btn-secondary.is-loading::after,
.btn-outline-primary.is-loading::after {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: var(--vocab-dark);
}

/* --------------------------------------------------------------------------
   12.3 SKELETON SCREENS (.vocab-skeleton)
   Placeholder loading animation for content
   -------------------------------------------------------------------------- */
.vocab-skeleton {
  background: linear-gradient(
    90deg,
    var(--vocab-very-light-gray) 25%,
    var(--vocab-off-white) 50%,
    var(--vocab-very-light-gray) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--vocab-border-radius-sm);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* --------------------------------------------------------------------------
   12.4 SKELETON VARIANTS
   Pre-sized skeleton placeholders for common elements
   -------------------------------------------------------------------------- */
.vocab-skeleton--text {
  height: 16px;
  width: 100%;
}

.vocab-skeleton--title {
  height: 24px;
  width: 60%;
}

.vocab-skeleton--card {
  height: 120px;
  width: 100%;
}

.vocab-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   12.5 LOADING OVERLAY (.vocab-loading-overlay)
   Semi-transparent overlay with centered spinner
   -------------------------------------------------------------------------- */
.vocab-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Container must be position: relative for overlay to work */
.vocab-loading-container {
  position: relative;
}

/* --------------------------------------------------------------------------
   12.6 PROGRESS INDICATOR (.vocab-progress)
   Indeterminate progress bar for unknown durations
   -------------------------------------------------------------------------- */
.vocab-progress {
  height: 3px;
  background: var(--vocab-very-light-gray);
  border-radius: 2px;
  overflow: hidden;
}

.vocab-progress-bar {
  height: 100%;
  background: var(--vocab-brand-green);
  width: 30%;
  animation: progressIndeterminate 1.5s ease-in-out infinite;
}

@keyframes progressIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* --------------------------------------------------------------------------
   12.7 FULL-PAGE LOADING OVERLAY (.loading-overlay)
   Full-screen overlay for guided form LLM wait with rotating phrases
   -------------------------------------------------------------------------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Above Bootstrap modals */
  opacity: 1;
  transition: opacity var(--vocab-transition);
}

.loading-overlay-hidden {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   12.8 LOADING CARD (.loading-card)
   Centered card containing spinner and phrase
   -------------------------------------------------------------------------- */
.loading-card {
  background: var(--vocab-white);
  border-radius: var(--vocab-border-radius-lg);
  padding: var(--vocab-space-xl) var(--vocab-space-xxl);
  box-shadow: var(--vocab-shadow-elevated);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vocab-space-md);
  max-width: 90vw;
  min-width: 280px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   12.9 LOADING SPINNER (.loading-spinner)
   CSS-only animated spinner
   -------------------------------------------------------------------------- */
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--vocab-very-light-gray);
  border-top-color: var(--vocab-brand-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   12.10 LOADING PHRASE (.loading-phrase)
   Styled text for rotating phrases
   -------------------------------------------------------------------------- */
.loading-phrase {
  font-size: var(--vocab-font-size-body-large);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-charcoal);
  min-height: 1.6em; /* Prevent layout shift during phrase changes */
  transition: opacity 150ms ease-in-out;
}

.loading-phrase-fading {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   12.11 LOADING PROGRESS BAR (.loading-progress-bar)
   Optional progress bar for operations with known duration
   -------------------------------------------------------------------------- */
.loading-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--vocab-very-light-gray);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--vocab-space-sm);
}

.loading-progress-bar.loading-progress-hidden {
  display: none;
}

.loading-progress-fill {
  height: 100%;
  background: var(--vocab-brand-green);
  width: 0%;
  transition: width 300ms ease-out;
}

/* --------------------------------------------------------------------------
   12.11.1 LOADING PERCENTAGE TEXT (.loading-percent)
   Percentage display below progress bar
   -------------------------------------------------------------------------- */
.loading-percent {
  font-size: var(--vocab-font-size-body-small);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-charcoal);
  margin-top: var(--vocab-space-xs);
}

.loading-percent.loading-progress-hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   12.12 LOADING OVERLAY MOBILE RESPONSIVE
   Ensure card fits small screens
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .loading-card {
    padding: var(--vocab-space-lg);
    min-width: 240px;
  }

  .loading-spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }

  .loading-phrase {
    font-size: var(--vocab-font-size-body);
  }
}

/* ==========================================================================
   13. PROCESS STEPPER COMPONENT
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 STEPPER CONTAINER (.vocab-stepper)
   Horizontal step flow with connecting lines
   -------------------------------------------------------------------------- */
.vocab-stepper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--vocab-space-lg);
  margin: var(--vocab-space-xl) 0;
}

/* --------------------------------------------------------------------------
   13.2 STEPPER STEP (.vocab-stepper-step)
   Individual step with number, title, and description
   -------------------------------------------------------------------------- */
.vocab-stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  max-width: 200px;
  position: relative;
}

/* Connecting line between steps */
.vocab-stepper-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(50% + 30px);
  width: calc(100% - 20px);
  height: 2px;
  background: var(--vocab-light-gray);
}

/* --------------------------------------------------------------------------
   13.3 STEP NUMBER (.vocab-stepper-number)
   Circular number indicator
   -------------------------------------------------------------------------- */
.vocab-stepper-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vocab-brand-green);
  color: var(--vocab-white);
  font-size: var(--vocab-font-size-body-large);
  font-weight: var(--vocab-font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--vocab-space-sm);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   13.4 STEP TITLE (.vocab-stepper-title)
   Short step name
   -------------------------------------------------------------------------- */
.vocab-stepper-title {
  font-size: var(--vocab-font-size-body);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-dark);
  margin-bottom: var(--vocab-space-xs);
}

/* --------------------------------------------------------------------------
   13.5 STEP DESCRIPTION (.vocab-stepper-desc)
   Explanatory text below title
   -------------------------------------------------------------------------- */
.vocab-stepper-desc {
  font-size: var(--vocab-font-size-body-small);
  color: var(--vocab-medium-gray);
  line-height: var(--vocab-line-height-body);
}

/* --------------------------------------------------------------------------
   13.6 RESPONSIVE STEPPER
   Stack vertically on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vocab-stepper {
    flex-direction: column;
    align-items: center;
    gap: var(--vocab-space-lg);
  }

  .vocab-stepper-step {
    max-width: 280px;
  }

  .vocab-stepper-step:not(:last-child)::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13.7 PATHWAYS CONTAINER (.vocab-pathways)
   Side-by-side pathway options with divider
   -------------------------------------------------------------------------- */
.vocab-pathways {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--vocab-space-xl);
  margin: var(--vocab-space-xl) 0;
}

.vocab-pathway {
  flex: 1;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vocab-pathway-title {
  font-size: var(--vocab-font-size-h3);
  font-weight: var(--vocab-font-weight-semibold);
  color: var(--vocab-dark);
  margin-bottom: var(--vocab-space-md);
}

.vocab-pathway .vocab-stepper {
  margin: var(--vocab-space-md) 0;
}

.vocab-pathway .btn {
  margin-top: auto;
}

.vocab-pathway-divider {
  display: flex;
  align-items: center;
  padding: var(--vocab-space-xl) 0;
}

.vocab-pathway-divider span {
  color: var(--vocab-medium-gray);
  font-size: var(--vocab-font-size-body);
  font-weight: var(--vocab-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   13.8 PATHWAYS RESPONSIVE
   Stack pathways vertically on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .vocab-pathways {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .vocab-pathway {
    max-width: 100%;
    padding: var(--vocab-space-lg) 0;
  }

  .vocab-pathway-divider {
    width: 100%;
    padding: var(--vocab-space-md) 0;
  }

  .vocab-pathway-divider::before,
  .vocab-pathway-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vocab-light-gray);
  }

  .vocab-pathway-divider::before {
    margin-right: var(--vocab-space-md);
  }

  .vocab-pathway-divider::after {
    margin-left: var(--vocab-space-md);
  }
}

/* ==========================================================================
   14. LANDING PAGE MOBILE REORDER
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 LANDING CONTENT CONTAINER (.vocab-landing-content)
   Flex container for reordering sections on mobile
   -------------------------------------------------------------------------- */
.vocab-landing-content {
  display: flex;
  flex-direction: column;
}

/* Desktop order (default): stats → actions → lists */
.vocab-landing-content .vocab-stats-section {
  order: 1;
}

.vocab-landing-content .vocab-quick-actions {
  order: 2;
}

.vocab-landing-content .vocab-lists-section {
  order: 3;
}

/* --------------------------------------------------------------------------
   14.2 MOBILE REORDER
   Actions first, lists second, stats last
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vocab-landing-content .vocab-quick-actions {
    order: 1;
  }

  .vocab-landing-content .vocab-lists-section {
    order: 2;
  }

  .vocab-landing-content .vocab-stats-section {
    order: 3;
  }
}

/* ==========================================================================
   15. DEFINITION GRID STYLES
   Consolidated from grid.html inline styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 PULSING ANIMATION
   Title animation during definition generation
   -------------------------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulsing {
  animation: pulse 1.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   15.2 DEFINITION GRID TABLE LAYOUT (#definition-grid)
   Fixed table layout with word-wrap for long definitions
   -------------------------------------------------------------------------- */
#definition-grid {
  table-layout: fixed;
  width: 100%;
}

#definition-grid th,
#definition-grid td {
  overflow-wrap: break-word;
}

#definition-grid thead tr {
  border-bottom: 3px solid #333;
}

/* --------------------------------------------------------------------------
   15.3 CHECKBOX LABEL IN HEADERS
   Flexbox layout for level checkbox labels
   -------------------------------------------------------------------------- */
#definition-grid th label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  cursor: pointer;
}

#definition-grid th input[type="checkbox"] {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   15.4 BASE DEFINITION COLUMN STYLING
   Slightly different background to distinguish from leveled definitions
   -------------------------------------------------------------------------- */
.base-definition-cell {
  background-color: var(--vocab-off-white) !important;
}

.base-definition-header {
  background-color: var(--vocab-very-light-gray) !important;
}

/* ==========================================================================
   16. GUIDED FLOW STYLES
   Consolidated from guided.html inline styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 SUGGESTION CARD (.vocab-suggestion-card)
   Card container for word suggestions
   -------------------------------------------------------------------------- */
.vocab-suggestion-card {
  background: var(--vocab-white);
  border: 1px solid var(--vocab-very-light-gray);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: box-shadow 0.2s ease;
}

.vocab-suggestion-card:hover {
  box-shadow: var(--vocab-shadow-subtle);
}

/* --------------------------------------------------------------------------
   16.2 SUGGESTION WORD AND REASON
   Typography for suggestion content
   -------------------------------------------------------------------------- */
.vocab-suggestion-word {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--vocab-dark);
}

.vocab-suggestion-reason {
  color: var(--vocab-gray);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   16.3 TOPIC INTERPRETATION
   Styled callout for AI topic interpretation
   -------------------------------------------------------------------------- */
.topic-interpretation {
  background: var(--vocab-off-white);
  border-left: 4px solid #6366f1;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   16.4 SUGGESTIONS HEADER
   Flexbox header with count display
   -------------------------------------------------------------------------- */
.suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.suggestions-count {
  color: var(--vocab-gray);
}