@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* OKLCH Color Tokens - Light Mode */
        --background: oklch(0.98 0 0);           /* Off-white background */
        --foreground: oklch(0.18 0 0);           /* Dark text */
        --card: oklch(0.99 0 0);                 /* Card/container background */
        --card-foreground: oklch(0.18 0 0);      /* Text on cards */
        --primary: oklch(0.55 0.22 260);         /* Purple - primary brand color */
        --primary-foreground: oklch(1 0 0);      /* White text on primary */
        --secondary: oklch(0.95 0 0);            /* Light gray background */
        --secondary-foreground: oklch(0.55 0.22 260); /* Purple text */
        --muted: oklch(0.93 0 0);                /* Disabled/inactive states */
        --muted-foreground: oklch(0.52 0 0);     /* Gray text */
        --accent: oklch(0.68 0.18 20);           /* Orange - for CTAs & highlights */
        --accent-foreground: oklch(1 0 0);       /* White text on accent */
        --destructive: oklch(0.577 0.245 27.325); /* Red - for dangerous actions */
        --destructive-foreground: oklch(1 0 0);  /* White text on destructive */
        --border: oklch(0.91 0 0);               /* Light borders */
        --input: oklch(0.96 0 0);                /* Input field background */
        --ring: oklch(0.55 0.22 260);            /* Focus ring (primary) */
        
        /* Chart Colors */
        --chart-1: oklch(0.55 0.22 260);  /* Purple */
        --chart-2: oklch(0.65 0.15 50);   /* Yellow */
        --chart-3: oklch(0.7 0.12 150);   /* Green */
        --chart-4: oklch(0.6 0.18 300);   /* Magenta */
        --chart-5: oklch(0.75 0.1 200);   /* Cyan */
        
        /* Sidebar Colors */
        --sidebar: oklch(0.985 0 0);                      /* Light sidebar background */
        --sidebar-foreground: oklch(0.145 0 0);           /* Sidebar text */
        --sidebar-primary: oklch(0.205 0 0);              /* Sidebar active item */
        --sidebar-primary-foreground: oklch(0.985 0 0);   /* Text on active sidebar item */
        --sidebar-accent: oklch(0.97 0 0);                /* Sidebar hover state */
        --sidebar-border: oklch(0.922 0 0);               /* Sidebar dividers */
        
        /* Border Radius Tokens */
        --radius: 0.625rem; /* 10px - Standard radius */
    }
    
    .dark {
        /* OKLCH Color Tokens - Dark Mode */
        --background: oklch(0.08 0 0);           /* Near-black background */
        --foreground: oklch(0.96 0 0);           /* Near-white text */
        --card: oklch(0.12 0 0);                 /* Dark card background */
        --card-foreground: oklch(0.96 0 0);      /* Light text on dark cards */
        --primary: oklch(0.7 0.22 260);          /* Lighter purple for contrast */
        --primary-foreground: oklch(0.08 0 0);   /* Dark text on primary */
        --secondary: oklch(0.15 0 0);            /* Dark gray background */
        --secondary-foreground: oklch(0.7 0.22 260); /* Light purple text */
        --muted: oklch(0.28 0 0);                /* Dark muted state */
        --muted-foreground: oklch(0.52 0 0);     /* Muted text */
        --accent: oklch(0.68 0.18 20);           /* Orange - same for dark */
        --accent-foreground: oklch(0.08 0 0);    /* Dark text on accent */
        --destructive: oklch(0.577 0.245 27.325); /* Red - same for dark */
        --destructive-foreground: oklch(1 0 0);  /* White text on destructive */
        --border: oklch(0.25 0 0);               /* Dark borders */
        --input: oklch(0.15 0 0);                /* Dark input background */
        --ring: oklch(0.7 0.22 260);             /* Lighter focus ring */
        
        /* Sidebar Colors - Dark Mode */
        --sidebar: oklch(0.1 0 0);                        /* Dark sidebar background */
        --sidebar-foreground: oklch(0.9 0 0);             /* Light sidebar text */
        --sidebar-primary: oklch(0.7 0.22 260);           /* Primary sidebar active */
        --sidebar-primary-foreground: oklch(0.08 0 0);    /* Dark text on active */
        --sidebar-accent: oklch(0.2 0 0);                 /* Dark sidebar hover */
        --sidebar-border: oklch(0.25 0 0);                /* Dark sidebar dividers */
    }

    html {
        @apply h-full;
    }
    
    body {
        @apply h-full font-sans antialiased bg-background text-foreground;
    }
}

@layer components {
    /* Typography */
    .heading-1 {
        @apply text-3xl font-bold text-foreground;
    }
    
    .heading-2 {
        @apply text-2xl font-semibold text-foreground;
    }
    
    .heading-3 {
        @apply text-xl font-semibold text-foreground;
    }
    
    .heading-4 {
        @apply text-lg font-semibold text-foreground;
    }
    
    .text-primary-content {
        @apply text-foreground;
    }
    
    .text-secondary-content {
        @apply text-muted-foreground;
    }
    
    .text-muted-content {
        @apply text-muted-foreground;
    }

    /* Layout Components */
    .page-container {
        @apply min-h-screen bg-background;
    }
    
    .page-header {
        @apply bg-card border-b border-border px-6 py-4;
    }
    
    .page-content {
        @apply p-6 space-y-6;
    }
    
    .section-spacing {
        @apply space-y-6;
    }

    /* Card Components */
    .card {
        @apply bg-card text-card-foreground rounded-lg shadow-sm border border-border transition-all duration-200;
    }
    
    .card-hover {
        @apply card hover:shadow-md;
    }
    
    .card-padding {
        @apply p-6;
    }
    
    .stat-card {
        @apply card card-padding hover:shadow-md transition-shadow;
    }
    
    .stat-card-icon {
        @apply w-10 h-10 rounded-lg flex items-center justify-center;
    }
    
    .stat-card-icon-primary {
        @apply stat-card-icon text-primary;
        background-color: oklch(0.55 0.22 260 / 0.1); /* Primary with 10% opacity */
    }
    
    .stat-card-icon-success {
        @apply stat-card-icon bg-success-100 text-success-600;
    }
    
    .stat-card-icon-warning {
        @apply stat-card-icon bg-warning-100 text-warning-600;
    }
    
    .stat-card-icon-danger {
        @apply stat-card-icon text-destructive;
        background-color: oklch(0.577 0.245 27.325 / 0.1); /* Destructive with 10% opacity */
    }
    
    .stat-card-icon-info {
        @apply stat-card-icon bg-info-100 text-info-600;
    }
    
    .stat-card-icon-accent {
        @apply stat-card-icon text-accent;
        background-color: oklch(0.68 0.18 20 / 0.1); /* Accent with 10% opacity */
    }

    /* Button Components */
    .btn-base {
        @apply inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring;
    }
    
    .btn-primary {
        @apply btn-base bg-primary text-primary-foreground shadow-sm;
    }
    
    .btn-primary:hover {
        background-color: oklch(0.50 0.22 260); /* Darker primary for hover */
    }
    
    .btn-secondary {
        @apply btn-base bg-secondary text-secondary-foreground border border-border shadow-sm;
    }
    
    .btn-secondary:hover {
        background-color: oklch(0.92 0 0); /* Darker secondary for hover */
    }
    
    .btn-success {
        @apply btn-base text-white bg-success-600 hover:bg-success-700 focus:ring-success-500 shadow-sm;
    }
    
    .btn-warning {
        @apply btn-base text-white bg-warning-600 hover:bg-warning-700 focus:ring-warning-500 shadow-sm;
    }
    
    .btn-danger {
        @apply btn-base bg-destructive text-destructive-foreground shadow-sm;
    }
    
    .btn-danger:hover {
        background-color: oklch(0.52 0.245 27.325); /* Darker destructive for hover */
    }
    
    .btn-info {
        @apply btn-base text-white bg-info-600 hover:bg-info-700 focus:ring-info-500 shadow-sm;
    }
    
    .btn-ghost {
        @apply btn-base text-foreground hover:bg-accent hover:text-accent-foreground;
    }
    
    .btn-link {
        @apply text-primary font-medium transition-colors duration-200;
    }
    
    .btn-link:hover {
        color: oklch(0.50 0.22 260); /* Darker primary for hover */
    }
    
    .btn-accent {
        @apply btn-base bg-accent text-accent-foreground shadow-sm;
    }
    
    .btn-accent:hover {
        background-color: oklch(0.63 0.18 20); /* Darker accent for hover */
    }

    /* Form Components */
    .form-container {
        @apply card card-padding;
    }
    
    .form-spacing {
        @apply space-y-6;
    }
    
    .form-field {
        @apply space-y-2;
    }
    
    .form-label {
        @apply block text-sm font-medium text-foreground;
    }
    
    .form-input {
        @apply block w-full px-3 py-2 bg-input border border-border rounded-lg shadow-sm placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors duration-200;
    }
    
    .form-select {
        @apply form-input;
    }
    
    .form-textarea {
        @apply form-input resize-y;
    }
    
    .form-error {
        @apply text-sm text-destructive;
    }
    
    .form-help {
        @apply text-sm text-muted-foreground;
    }

    /* Table Components */
    .table-container {
        @apply card overflow-hidden;
    }
    
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table-header {
        @apply bg-gray-50;
    }
    
    .table-header-cell {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table-body {
        @apply bg-white divide-y divide-gray-200;
    }
    
    .table-row {
        @apply hover:bg-gray-50 transition-colors duration-150;
    }
    
    .table-cell {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
    }
    
    .table-cell-secondary {
        @apply table-cell text-gray-600;
    }

    /* Badge Components */
    .badge-base {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    .badge-primary {
        @apply badge-base text-primary;
        background-color: oklch(0.55 0.22 260 / 0.1); /* Primary with 10% opacity */
    }
    
    .badge-secondary {
        @apply badge-base bg-secondary text-secondary-foreground;
    }
    
    .badge-success {
        @apply badge-base bg-success-100 text-success-800;
    }
    
    .badge-warning {
        @apply badge-base bg-warning-100 text-warning-800;
    }
    
    .badge-danger {
        @apply badge-base text-destructive;
        background-color: oklch(0.577 0.245 27.325 / 0.1); /* Destructive with 10% opacity */
    }
    
    .badge-info {
        @apply badge-base bg-info-100 text-info-800;
    }
    
    .badge-muted {
        @apply badge-base bg-muted text-muted-foreground;
    }
    
    .badge-accent {
        @apply badge-base text-accent;
        background-color: oklch(0.68 0.18 20 / 0.1); /* Accent with 10% opacity */
    }

    /* Navigation Components */
    .nav-container {
        @apply bg-white border-r border-gray-200 w-64 h-screen overflow-y-auto;
    }
    
    .nav-content {
        @apply p-6 flex flex-col h-full;
    }
    
    .nav-brand {
        @apply flex items-center space-x-3 mb-6;
    }
    
    .nav-brand-icon {
        @apply p-2 bg-primary-100 rounded-lg;
    }
    
    .nav-brand-text {
        @apply text-xl font-semibold text-gray-900;
    }
    
    .nav-menu {
        @apply space-y-2;
    }
    
    /* Modern Sidebar Navigation */
    .sidebar-group {
        @apply px-3 mb-4;
    }
    
    .sidebar-group-label {
        @apply text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 px-2;
    }
    
    .sidebar-menu {
        @apply space-y-1;
    }
    
    .sidebar-menu-item {
        @apply relative;
    }
    
    .sidebar-menu-button {
        @apply w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-all duration-200;
    }
    
    .sidebar-menu-button-active {
        @apply sidebar-menu-button bg-gray-100 text-gray-900 shadow-sm;
    }
    
    .sidebar-menu-icon {
        @apply w-5 h-5 flex-shrink-0;
    }
    
    .sidebar-menu-badge {
        @apply ml-auto inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600;
    }
    
    .sidebar-menu-badge-soon {
        @apply sidebar-menu-badge bg-blue-100 text-blue-600;
    }
    
    /* Legacy nav-item support */
    .nav-item {
        @apply sidebar-menu-button;
    }
    
    .nav-item-active {
        @apply sidebar-menu-button-active;
    }
    
    .nav-bar-item {
        @apply sidebar-menu-button;
    }
    
    .nav-footer {
        @apply mt-auto pt-6 border-t border-gray-200;
    }

    /* Grid Components */
    .stats-grid {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
    }
    
    .content-grid {
        @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
    }
    
    .card-grid {
        @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6;
    }

    /* Empty State Components */
    .empty-state {
        @apply text-center py-12;
    }
    
    .empty-state-icon {
        @apply w-12 h-12 text-gray-400 mx-auto mb-4;
    }
    
    .empty-state-title {
        @apply text-lg font-semibold text-gray-900 mb-2;
    }
    
    .empty-state-description {
        @apply text-gray-600 mb-4;
    }

    /* Utility Classes */
    .focus-ring {
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    }
    
    .transition-base {
        @apply transition-all duration-200;
    }
    
    .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    
    .animate-slide-up {
        animation: slideUp 0.3s ease-out;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.2s ease-out;
    }

    .animate-fade-out {
        animation: fadeOut 0.3s ease-in-out forwards;
    }

    .animate-scale-out {
        animation: scaleOut 0.3s ease-in-out forwards;
    }

    .animate-bounce-subtle {
        animation: bounceSubtle 0.6s ease-in-out;
    }

    /* Modal Backdrop Utility */
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .modal-backdrop-dark {
        background-color: rgba(0, 0, 0, 0.6);
    }
    
    .modal-backdrop-light {
        background-color: rgba(0, 0, 0, 0.3);
    }

    /* Cash Payment Specific Styles */
    .cash-only-invoice {
        position: relative;
    }

    .cash-only-invoice::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, 
            oklch(0.68 0.18 20) 0%, 
            oklch(0.68 0.18 20) 25%, 
            transparent 25%, 
            transparent 50%, 
            oklch(0.68 0.18 20) 50%, 
            oklch(0.68 0.18 20) 75%, 
            transparent 75%);
        background-size: 8px 8px;
        border-radius: inherit;
        z-index: -1;
        opacity: 0.3;
    }

    .cash-available-invoice {
        border-left: 3px solid oklch(0.68 0.18 20);
    }

    .cash-payment-overdue {
        animation: pulse-warning 2s infinite;
    }

    @keyframes pulse-warning {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }

    /* Legacy Support (for gradual migration) */
    .card-hover-legacy {
        @apply transform transition-all duration-300 hover:scale-[1.02] hover:shadow-soft;
    }
    
    .form-input-legacy {
        @apply shadow-sm border-gray-300 rounded-lg w-full py-2.5 px-4 text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500;
    }
}


/* Cash Payment Validation Animations */
@layer utilities {
  .animate-shake {
    animation: shake 0.5s ease-in-out;
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
  
  .animate-pulse-error {
    animation: pulse-error 1s ease-in-out infinite;
  }
  
  @keyframes pulse-error {
    0%, 100% { 
      background-color: rgb(254 242 242); /* bg-red-50 */
      border-color: rgb(239 68 68); /* border-red-500 */
    }
    50% { 
      background-color: rgb(254 226 226); /* bg-red-100 */
      border-color: rgb(220 38 38); /* border-red-600 */
    }
  }

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

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

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes scaleIn {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes scaleOut {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes bounceSubtle {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  .field-message {
    transition: all 0.2s ease-in-out;
  }
  
  .field-message.entering {
    opacity: 0;
    transform: translateY(-10px);
  }
  
  .field-message.entered {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced form validation styles */
@layer components {
  .form-field-error {
    @apply border-destructive focus:ring-destructive bg-destructive/5;
  }
  
  .form-field-success {
    @apply border-green-500 focus:ring-green-500 bg-green-50;
  }
  
  .form-field-warning {
    @apply border-yellow-500 focus:ring-yellow-500 bg-yellow-50;
  }
  
  .validation-message {
    @apply text-xs mt-1 font-medium flex items-center gap-1;
  }
  
  .validation-message.error {
    @apply text-destructive;
  }
  
  .validation-message.success {
    @apply text-green-600;
  }
  
  .validation-message.warning {
    @apply text-yellow-600;
  }
}

/* ============================================================
   DESERT LABS DESIGN SYSTEM v2
   Editorial Precision — Dark Sidebar · Warm Content · Serif Numbers
   ============================================================ */

@layer base {
  :root {
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Clean slate surfaces — near-white, no tint, no clashing */
    --ev-surface:        oklch(0.976 0.002 260);
    --ev-surface-card:   oklch(1 0 0);
    --ev-surface-subtle: oklch(0.966 0.003 260);
    --ev-border:         oklch(0.912 0.004 258);
    --ev-border-light:   oklch(0.938 0.003 258);

    /* Convenience aliases — resolve broken references in views */
    --ev-text-muted:     oklch(0.52 0.010 258);
    --ev-text-secondary: oklch(0.46 0.018 258);

    /* Sidebar text ink */
    --ev-ink:            oklch(0.215 0.040 258);
    --ev-ink-border:     oklch(0.265 0.038 258);
    --ev-ink-fg:         oklch(0.680 0.018 258);
    --ev-ink-fg-muted:   oklch(0.440 0.020 258);
    --ev-ink-fg-bright:  oklch(0.955 0.003 240);
    --ev-ink-hover:      oklch(0.265 0.038 258);

    /* Deep vivid indigo — saturated, dark, unmistakably distinct from generic SaaS violet */
    --ev-primary:        oklch(0.46 0.28 270);
    --ev-primary-hover:  oklch(0.41 0.28 270);
    --ev-primary-tint:   oklch(0.46 0.28 270 / 0.09);
    --ev-primary-border: oklch(0.46 0.28 270 / 0.22);

    /* Semantic status colors */
    --ev-success:  oklch(0.52 0.18 155);
    --ev-warning:  oklch(0.62 0.20 42);
    --ev-danger:   oklch(0.56 0.22 27);

    /* Indigo-tinted shadows — depth that harmonizes with the primary */
    --ev-shadow-card:   0 1px 3px oklch(0.20 0.012 260 / 0.09), 0 1px 2px oklch(0.20 0.012 260 / 0.05);
    --ev-shadow-hover:  0 8px 24px oklch(0.46 0.28 270 / 0.15), 0 2px 8px oklch(0.20 0.012 260 / 0.06);

    /* Stat card accent — single indigo */
    --ev-accent-1: var(--ev-primary);
    --ev-accent-2: var(--ev-primary);
    --ev-accent-3: var(--ev-primary);
    --ev-accent-4: var(--ev-primary);
  }

  body {
    font-family: var(--font-ui);
  }
}

@layer components {
  /* ── Dark Sidebar Shell ──────────────────────────────────────── */

  /* ── Light Sidebar ───────────────────────────────────────── */

  .ev-sidebar {
    width: 15rem;
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    height: 100vh;
    background: white;
    border-right: 1px solid var(--ev-border);
  }

  @media (min-width: 768px) {
    .ev-sidebar { display: flex; }
  }

  /* ── Turbo Native: hide web chrome when inside iOS/Android shell ── */
  .turbo-native .ev-sidebar {
    display: none !important;
  }

/* ── Mobile bottom navigation ── */
.ev-mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

@media (min-width: 768px) {
  .ev-mobile-nav {
    display: none;
  }
}

.turbo-native .ev-mobile-nav {
  display: none;
}

.ev-mobile-nav-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: var(--ev-surface-card);
  border-top: 1px solid var(--ev-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ev-mobile-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  flex: 1;
  padding: 0.5rem 0 0.375rem;
  color: var(--ev-ink-muted);
  font-size: 0.625rem;
  font-weight: 500;
  font-family: var(--font-body);
  text-decoration: none;
  transition: color 150ms;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.ev-mobile-nav-tab:active {
  color: var(--ev-primary);
}

.ev-mobile-nav-tab--active {
  color: var(--ev-primary);
}

.ev-mobile-nav-tab svg {
  width: 1.375rem;
  height: 1.375rem;
}

.ev-mobile-nav-badge {
  position: absolute;
  top: 0.25rem;
  left: 50%;
  margin-left: 0.375rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: #ef4444;
  color: white;
  font-size: 0.5625rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* More sheet */
.ev-mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 49;
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}

.ev-mobile-nav-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

.ev-mobile-nav-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 51;
  background: var(--ev-surface-card);
  border-radius: 0.75rem 0.75rem 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ev-mobile-nav-sheet--open {
  transform: translateY(0);
}

.ev-mobile-nav-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
}

.ev-mobile-nav-sheet-handle::after {
  content: "";
  width: 2rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--ev-border);
}

.ev-mobile-nav-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1.25rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ev-ink);
}

.ev-mobile-nav-sheet-close {
  color: var(--ev-primary);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  -webkit-tap-highlight-color: transparent;
}

.ev-mobile-nav-more-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--ev-ink-fg);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  text-decoration: none;
  border-bottom: 1px solid var(--ev-border-light);
  -webkit-tap-highlight-color: transparent;
}

.ev-mobile-nav-more-item:last-child {
  border-bottom: none;
}

.ev-mobile-nav-more-item:active {
  background: var(--ev-primary-tint);
}

.ev-mobile-nav-more-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ev-ink-muted);
  flex-shrink: 0;
}

/* Mobile content bottom padding — prevents content hiding behind nav */
@media (max-width: 767px) {
  .ev-page {
    padding-bottom: 4.5rem;
  }
}

.turbo-native .ev-page {
  padding-bottom: 0;
}

  /* Section labels — ultra-minimal */
  .ev-sidebar .sidebar-group-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: oklch(0.62 0.010 258);
    margin-bottom: 0.25rem;
    padding-left: 0.875rem;
  }

  /* Nav items — dark text on white; use !important to override Tailwind @apply hover utilities */
  .ev-sidebar .sidebar-menu-button {
    color: oklch(0.32 0.020 258) !important;
    background-color: transparent !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
  }

  .ev-sidebar .sidebar-menu-button:hover {
    color: oklch(0.15 0.030 265) !important;
    background-color: oklch(0.962 0.005 260) !important;
  }

  /* Active: primary tint + left border */
  .ev-sidebar .sidebar-menu-button-active {
    color: var(--ev-primary) !important;
    background-color: var(--ev-primary-tint) !important;
    border-left: 2px solid var(--ev-primary) !important;
    padding-left: calc(0.75rem - 2px) !important;
    font-weight: 600 !important;
  }

  .ev-sidebar .sidebar-menu-icon {
    opacity: 0.45;
    color: oklch(0.32 0.020 258);
  }

  .ev-sidebar .sidebar-menu-button:hover .sidebar-menu-icon {
    opacity: 0.75;
  }

  .ev-sidebar .sidebar-menu-button-active .sidebar-menu-icon {
    opacity: 1;
    color: var(--ev-primary);
  }

  /* Brand + footer borders match content area */
  .ev-sidebar-brand-border {
    border-bottom: 1px solid var(--ev-border-light);
  }

  /* Product switcher (CRM ↔ AI Agent) */
  .ev-product-switcher {
    display: flex;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--ev-border-light);
    background: oklch(0.975 0.003 260);
  }

  .ev-product-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-display);
    color: oklch(0.48 0.010 258);
    text-decoration: none;
    transition: all 0.15s ease;
  }

  .ev-product-pill:hover {
    background: oklch(0.945 0.008 260);
    color: oklch(0.30 0.020 265);
  }

  .ev-product-pill-active {
    background: white;
    color: var(--ev-primary);
    box-shadow: 0 1px 2px oklch(0.20 0.020 265 / 0.08);
  }

  .ev-product-pill-active:hover {
    background: white;
    color: var(--ev-primary);
  }

  .ev-sidebar-footer-border {
    border-top: 1px solid var(--ev-border-light);
  }

  /* User profile card at bottom */
  .ev-sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
  }

  .ev-sidebar-user-card:hover {
    background-color: oklch(0.962 0.005 260);
  }

  .ev-sidebar-user-avatar {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--ev-primary-tint);
    color: var(--ev-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--ev-primary-border);
    font-family: var(--font-display);
  }

  .ev-sidebar-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.18 0.025 265);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }

  .ev-sidebar-user-email {
    font-size: 0.6875rem;
    color: oklch(0.52 0.010 258);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }

  .ev-sidebar-signout-link {
    display: block;
    padding: 0 1rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(0.55 0.010 258);
    transition: color 0.15s ease;
    text-decoration: none;
  }

  .ev-sidebar-signout-link:hover {
    color: oklch(0.50 0.20 27);
  }

  /* Mobile sidebar wrapper — fixed overlay below md */
  .ev-sidebar-mobile-wrapper {
    display: contents;
  }

  @media (max-width: 767px) {
    .ev-sidebar-mobile-wrapper {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 60;
      height: 100vh;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
    }

    .ev-sidebar-mobile-wrapper .ev-sidebar {
      display: flex;
    }

    .ev-sidebar-mobile-wrapper.ev-sidebar--open {
      transform: translateX(0);
    }
  }

  /* Hide sidebar in native shell */
  .turbo-native .ev-sidebar-mobile-wrapper {
    display: none;
  }

  /* ── Page Shell ──────────────────────────────────────────────── */

  .ev-page {
    background-color: var(--ev-surface);
    background-image: radial-gradient(circle, oklch(0.46 0.28 270 / 0.035) 1px, transparent 1px);
    background-size: 22px 22px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.375rem 1.5rem 1.5rem;
  }

  @media (max-width: 639px) {
    .ev-page {
      padding: 1rem;
    }
  }

  /* Page title row — used on index/show pages for title + primary action */
  .ev-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.375rem;
    flex-wrap: wrap;
  }

  @media (max-width: 639px) {
    .ev-page-header {
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .ev-page-title {
      font-size: 1.25rem;
    }

    .ev-page-subtitle {
      font-size: 0.75rem;
    }
  }

  .ev-page-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: oklch(0.12 0.04 265);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .ev-page-subtitle {
    font-size: 0.875rem;
    color: oklch(0.52 0.010 258);
    margin-top: 0.125rem;
  }

  /* Divider between page sections */
  .ev-section-gap {
    margin-bottom: 1.125rem;
  }

  /* Search / filter bar */
  .ev-filter-bar {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    padding: 1rem 1.375rem;
    box-shadow: var(--ev-shadow-card);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.125rem;
  }

  /* Mobile filter layout — stack search + toggle above, selects below */
  @media (max-width: 639px) {
    .ev-filter-bar {
      flex-direction: column;
      align-items: stretch;
    }

    .ev-filter-bar-search {
      width: 100%;
    }

    .ev-filter-bar-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .ev-filter-bar-filters {
      display: none;
      flex-direction: column;
      gap: 0.625rem;
      width: 100%;
    }

    .ev-filter-bar-filters--open {
      display: flex;
    }

    .ev-filter-bar-filters .ev-input {
      width: 100%;
    }
  }

  @media (min-width: 640px) {
    .ev-filter-bar-toggle {
      display: none;
    }

    .ev-filter-bar-filters {
      display: contents;
    }
  }

  /* Form input — used in search bars, filter selects */
  .ev-input {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 0.5rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    font-family: var(--font-ui);
    color: oklch(0.18 0.025 265);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
  }

  .ev-input:focus {
    border-color: var(--ev-primary);
    box-shadow: 0 0 0 3px var(--ev-primary-tint);
  }

  .ev-input::placeholder {
    color: oklch(0.65 0.008 258);
  }

  /* Inline card action button — "+ New Invoice" etc. in card headers */
  .ev-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ev-primary);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    transition: background-color 0.15s ease;
    white-space: nowrap;
  }

  .ev-card-action:hover {
    background-color: oklch(0.46 0.28 270 / 0.13);
    border-color: oklch(0.46 0.28 270 / 0.34);
  }

  /* ── Stat Cards ──────────────────────────────────────────────── */

  .ev-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }

  @media (min-width: 640px) {
    .ev-stats-grid { gap: 1rem; }
  }

  @media (min-width: 1024px) {
    .ev-stats-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .ev-stat-card {
    background: var(--ev-surface-card);
    border-radius: 0.875rem;
    border: 1px solid var(--ev-border);
    border-top: 2px solid var(--ev-border);
    padding: 1.375rem 1.5rem 1.25rem;
    box-shadow: var(--ev-shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, border-top-color 0.2s ease;
    opacity: 0;
    animation: ev-fade-up 0.45s ease forwards;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ev-stat-card:hover {
    box-shadow: var(--ev-shadow-hover);
    border-color: var(--ev-primary-border);
    border-top-color: var(--ev-primary);
    transform: translateY(-2px);
  }

  .ev-stat-card:nth-child(1) { animation-delay: 0.05s; }
  .ev-stat-card:nth-child(2) { animation-delay: 0.10s; }
  .ev-stat-card:nth-child(3) { animation-delay: 0.15s; }
  .ev-stat-card:nth-child(4) { animation-delay: 0.20s; }

  /* Icon row — tighter, more purposeful */
  .ev-stat-icon-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
  }

  .ev-stat-icon {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.4375rem;
    background: linear-gradient(135deg,
      oklch(0.46 0.28 270 / 0.13) 0%,
      oklch(0.46 0.28 270 / 0.05) 100%
    );
    border: 1px solid var(--ev-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ev-primary);
    flex-shrink: 0;
  }

  .ev-stat-icon svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }

  /* Label: proper case, legible, no shouting */
  .ev-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: oklch(0.46 0.018 258);
    display: block;
  }

  .ev-stat-number {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1;
    color: oklch(0.12 0.04 265);
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
  }

  /* Divider removed — kills the visual split */
  .ev-stat-divider { display: none; }

  .ev-stat-sub {
    font-size: 0.75rem;
    color: oklch(0.56 0.010 258);
    line-height: 1.4;
  }

  .ev-stat-body { flex: 1; }
  .ev-stat-footer { margin-top: auto; padding-top: 0.25rem; }

  /* Compact stat cards on mobile */
  @media (max-width: 639px) {
    .ev-stat-card {
      padding: 0.875rem 1rem 0.75rem;
      border-radius: 0.625rem;
    }

    .ev-stat-icon-row {
      margin-bottom: 0.5rem;
    }

    .ev-stat-icon {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 0.375rem;
    }

    .ev-stat-icon svg {
      width: 0.75rem;
      height: 0.75rem;
    }

    .ev-stat-label {
      font-size: 0.6875rem;
    }

    .ev-stat-number {
      font-size: 1.5rem;
      margin-bottom: 0.25rem;
    }

    .ev-stat-sub {
      font-size: 0.6875rem;
    }
  }

  /* ── Content Cards ───────────────────────────────────────────── */

  .ev-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
    flex: 1;
    min-height: 0;
  }

  @media (min-width: 1024px) {
    .ev-content-grid { grid-template-columns: 3fr 2fr; }
  }

  /* Wrapper that stretches to fill page height */
  .ev-content-zone {
    flex: 1;
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
  }

  .ev-card {
    background: var(--ev-surface-card);
    border-radius: 0.75rem;
    border: 1px solid var(--ev-border);
    box-shadow: var(--ev-shadow-card);
    overflow: hidden;
    opacity: 0;
    animation: ev-fade-up 0.45s ease forwards;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    transition: box-shadow 0.2s ease;
  }

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

  .ev-card-body {
    flex: 1;
    overflow-y: auto;
  }

  .ev-card:nth-child(1) { animation-delay: 0.28s; }
  .ev-card:nth-child(2) { animation-delay: 0.34s; }

  .ev-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
  }

  @media (max-width: 639px) {
    .ev-card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  }

  /* Section headers: proper case, readable weight — not all-caps metadata */
  .ev-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: oklch(0.18 0.025 265);
    font-family: var(--font-display);
  }

  .ev-card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.50 0.26 270);
    transition: color 0.15s ease;
    letter-spacing: 0.01em;
  }

  .ev-card-link:hover {
    color: oklch(0.43 0.28 270);
  }

  /* ── List Rows ───────────────────────────────────────────────── */

  .ev-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
    border-left: 3px solid transparent;
    transition: background-color 0.12s ease;
  }

  .ev-list-row:last-child {
    border-bottom: none;
  }

  .ev-list-row:hover {
    background-color: var(--ev-surface-subtle);
  }

  /* Responsive list rows — stack on mobile */
  @media (max-width: 639px) {
    .ev-list-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
      padding: 0.875rem 1rem;
    }

    .ev-list-row .flex-shrink-0,
    .ev-list-row-end {
      flex-shrink: 1;
      flex-wrap: wrap;
      gap: 0.5rem;
      width: 100%;
    }

    .ev-list-row .flex-1 {
      margin-right: 0;
      width: 100%;
    }
  }

  /* Invoice row status left indicators (semantic) */
  .ev-list-row-paid    { border-left-color: var(--ev-success); }
  .ev-list-row-sent    { border-left-color: var(--ev-primary); }
  .ev-list-row-overdue { border-left-color: var(--ev-danger); }
  .ev-list-row-draft   { border-left-color: oklch(0.82 0.005 240); }

  .ev-list-primary {
    font-size: 0.875rem;
    font-weight: 500;
    color: oklch(0.18 0 0);
    transition: color 0.12s ease;
  }

  .ev-list-primary a:hover {
    color: oklch(0.46 0.28 270);
  }

  .ev-list-secondary {
    font-size: 0.75rem;
    color: oklch(0.52 0 0);
    margin-top: 0.125rem;
  }

  .ev-list-amount {
    font-size: 0.9375rem;
    font-weight: 600;
    color: oklch(0.18 0 0);
    font-variant-numeric: tabular-nums;
  }

  /* ── Avatar ──────────────────────────────────────────────────── */

  .ev-avatar {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: var(--ev-primary-tint);
    color: var(--ev-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid var(--ev-primary-border);
    font-family: var(--font-display);
  }

  /* ── Status Badges ───────────────────────────────────────────── */

  .ev-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
  }

  .ev-badge-paid {
    background: oklch(0.56 0.18 162 / 0.10);
    color: oklch(0.32 0.16 162);
    border-color: oklch(0.56 0.18 162 / 0.28);
  }
  .ev-badge-overdue {
    background: oklch(0.58 0.22 27 / 0.10);
    color: oklch(0.40 0.20 27);
    border-color: oklch(0.58 0.22 27 / 0.28);
  }
  .ev-badge-sent {
    background: var(--ev-primary-tint);
    color: oklch(0.38 0.26 270);
    border-color: var(--ev-primary-border);
  }
  .ev-badge-draft {
    background: oklch(0.935 0.006 240);
    color: oklch(0.40 0.015 258);
    border-color: oklch(0.86 0.008 240);
  }
  .ev-badge-completed {
    background: oklch(0.56 0.18 250 / 0.10);
    color: oklch(0.38 0.16 250);
    border-color: oklch(0.56 0.18 250 / 0.28);
  }
  .ev-badge-no-show {
    background: oklch(0.58 0.22 27 / 0.10);
    color: oklch(0.40 0.20 27);
    border-color: oklch(0.58 0.22 27 / 0.28);
  }

  /* ── Buttons ─────────────────────────────────────────────────── */

  .ev-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s ease;
    cursor: pointer;
  }

  .ev-btn-primary {
    background: linear-gradient(135deg, oklch(0.48 0.28 270) 0%, oklch(0.44 0.30 274) 100%);
    color: white;
    box-shadow: 0 1px 4px oklch(0.46 0.28 270 / 0.35), 0 0 0 1px oklch(0.65 0.20 270 / 0.18) inset;
  }

  .ev-btn-primary:hover {
    background: linear-gradient(135deg, oklch(0.43 0.28 270) 0%, oklch(0.39 0.30 274) 100%);
    box-shadow: 0 4px 16px oklch(0.46 0.28 270 / 0.45), 0 0 0 1px oklch(0.65 0.20 270 / 0.18) inset;
    transform: translateY(-1px);
  }

  .ev-btn-ghost {
    background: transparent;
    color: oklch(0.30 0 0);
    border: 1px solid var(--ev-border);
  }

  .ev-btn-ghost:hover {
    background: var(--ev-surface-subtle);
    border-color: oklch(0.80 0 0);
  }

  /* Mobile touch targets — ensure minimum 44px tap area */
  @media (max-width: 639px) {
    .ev-btn {
      min-height: 2.75rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .ev-btn-sm {
      min-height: 2.5rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .ev-input, select.ev-input, textarea.ev-input {
      min-height: 2.75rem;
      font-size: 1rem; /* prevent iOS zoom on focus */
      width: 100%;
    }
  }

  /* Override inline grid columns on mobile */
  @media (max-width: 639px) {
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns:repeat(4"] {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-cols-12 {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  }

  /* Form groups stack on mobile */
  @media (max-width: 639px) {
    .ev-form-group {
      flex-direction: column;
    }

    .ev-form-group > * {
      width: 100%;
    }
  }

  /* Settings page: sidebar + content on md+ */
  @media (min-width: 768px) {
    #settings-layout {
      grid-template-columns: 14rem 1fr;
    }
  }

  /* ── Detail / Show Page Layout ──────────────────────────────── */

  /* Two-column layout for show pages: main content + sidebar */
  .ev-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
  }

  @media (min-width: 1024px) {
    .ev-detail-grid { grid-template-columns: 2fr 1fr; }
  }

  /* Key-value pair row inside a card (for detail panels) */
  .ev-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.625rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
    gap: 1rem;
  }

  .ev-detail-row:last-child { border-bottom: none; }

  .ev-detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(0.52 0.010 258);
    flex-shrink: 0;
  }

  .ev-detail-value {
    font-size: 0.875rem;
    font-weight: 400;
    color: oklch(0.18 0.025 265);
    text-align: right;
  }

  /* ── Form Layout ─────────────────────────────────────────────── */

  /* Card used to wrap forms (new/edit pages) */
  .ev-form-card {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    box-shadow: var(--ev-shadow-card);
    padding: 1.75rem 2rem;
  }

  .ev-form-group {
    margin-bottom: 1.25rem;
  }

  .ev-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(0.28 0.028 265);
    margin-bottom: 0.375rem;
  }

  .ev-label-hint {
    font-size: 0.75rem;
    color: oklch(0.55 0.008 258);
    margin-top: 0.25rem;
  }

  /* ── Empty States ────────────────────────────────────────────── */

  .ev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: oklch(0.55 0 0);
  }

  .ev-empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.3;
    margin-bottom: 1rem;
  }

  .ev-empty-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: oklch(0.25 0 0);
    margin-bottom: 0.375rem;
  }

  .ev-empty-desc {
    font-size: 0.8125rem;
    color: oklch(0.55 0 0);
    margin-bottom: 1.25rem;
  }

  /* ── Notice / Callout ────────────────────────────────────────── */

  .ev-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .ev-notice-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
  }

  .ev-notice-info {
    background: var(--ev-primary-tint);
    border-color: var(--ev-primary-border);
    color: oklch(0.38 0.26 270);
  }

  .ev-notice-info .ev-notice-icon { color: var(--ev-primary); }

  .ev-notice-warning {
    background: oklch(0.62 0.20 42 / 0.08);
    border-color: oklch(0.62 0.20 42 / 0.28);
    color: oklch(0.35 0.16 42);
  }

  .ev-notice-warning .ev-notice-icon { color: var(--ev-warning); }

  .ev-notice-success {
    background: oklch(0.52 0.18 155 / 0.08);
    border-color: oklch(0.52 0.18 155 / 0.28);
    color: oklch(0.30 0.14 155);
  }

  .ev-notice-success .ev-notice-icon { color: var(--ev-success); }

  .ev-notice-danger {
    background: oklch(0.56 0.22 27 / 0.08);
    border-color: oklch(0.56 0.22 27 / 0.28);
    color: oklch(0.36 0.18 27);
  }

  .ev-notice-danger .ev-notice-icon { color: var(--ev-danger); }

  /* ── Progress Bar ─────────────────────────────────────────────── */

  .ev-progress {
    width: 7rem;
    height: 0.375rem;
    background: var(--ev-border-light);
    border-radius: 9999px;
    overflow: hidden;
  }

  .ev-progress-fill {
    height: 100%;
    background: var(--ev-primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
  }

  .ev-progress-fill-success { background: var(--ev-success); }
  .ev-progress-fill-danger  { background: var(--ev-danger); }

  /* ── Card Table ───────────────────────────────────────────────── */

  .ev-table {
    width: 100%;
    border-collapse: collapse;
  }

  .ev-table-head { border-bottom: 1px solid var(--ev-border); }

  .ev-table-th {
    padding: 0.625rem 1.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
    text-align: left;
    white-space: nowrap;
  }

  .ev-table-th:last-child { text-align: right; }

  .ev-table-row {
    border-bottom: 1px solid var(--ev-border-light);
    transition: background-color 0.12s ease;
  }

  .ev-table-row:last-child { border-bottom: none; }
  .ev-table-row:hover { background-color: var(--ev-surface-subtle); }

  .ev-table-td {
    padding: 0.75rem 1.375rem;
    font-size: 0.875rem;
    color: oklch(0.18 0.025 265);
  }

  .ev-table-td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .ev-table-td-muted {
    color: var(--ev-ink-fg-muted);
    font-size: 0.8125rem;
  }

  .ev-table-footer {
    border-top: 2px solid var(--ev-border);
    background: var(--ev-surface-subtle);
  }

  .ev-table-footer .ev-table-td { font-weight: 600; }

  /* ── Dropdown Action Menu ─────────────────────────────────────── */

  .ev-dropdown {
    position: relative;
    display: inline-block;
  }

  .ev-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    color: var(--ev-ink-fg);
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    cursor: pointer;
    background: transparent;
  }

  .ev-dropdown-trigger:hover {
    background: var(--ev-surface-subtle);
    border-color: var(--ev-border);
  }

  .ev-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    min-width: 10rem;
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.625rem;
    box-shadow: var(--ev-shadow-hover);
    z-index: 50;
    padding: 0.25rem;
    display: none;
  }

  .ev-dropdown-menu.is-open { display: block; }

  .ev-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(0.22 0.025 265);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.1s ease;
  }

  .ev-dropdown-item:hover { background: var(--ev-surface-subtle); }

  .ev-dropdown-item-danger { color: var(--ev-danger); }
  .ev-dropdown-item-danger:hover { background: oklch(0.56 0.22 27 / 0.08); }

  .ev-dropdown-divider {
    height: 1px;
    background: var(--ev-border-light);
    margin: 0.25rem 0;
  }

  /* ── Pagy Pagination ──────────────────────────────────────────── */

  .ev-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.375rem;
    border-top: 1px solid var(--ev-border-light);
    gap: 0.25rem;
  }

  .ev-pagination nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .ev-pagination a,
  .ev-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.12s ease;
  }

  .ev-pagination a {
    color: oklch(0.28 0.028 265);
    border: 1px solid var(--ev-border);
  }

  .ev-pagination a:hover {
    background: var(--ev-surface-subtle);
    border-color: var(--ev-primary-border);
  }

  .ev-pagination span.current {
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    color: var(--ev-primary);
    font-weight: 600;
  }

  .ev-pagination span.prev,
  .ev-pagination span.next,
  .ev-pagination span.gap {
    color: var(--ev-ink-fg-muted);
    border: 1px solid transparent;
  }

  /* ── Portal Page Shell ────────────────────────────────────────── */

  .ev-portal-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
  }

  .ev-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.375rem;
    flex-wrap: wrap;
  }

  @media (max-width: 639px) {
    .ev-portal-header {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .ev-portal-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: oklch(0.12 0.04 265);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .ev-portal-subtitle {
    font-size: 0.875rem;
    color: var(--ev-ink-fg-muted);
    margin-top: 0.125rem;
  }

  /* ── Portal Welcome Hero ──────────────────────────────────────── */

  .ev-portal-welcome {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      oklch(0.46 0.28 270 / 0.10) 0%,
      oklch(0.46 0.28 270 / 0.05) 55%,
      oklch(0.46 0.28 270 / 0.02) 100%
    );
    border: 1px solid var(--ev-primary-border);
    border-left: 4px solid var(--ev-primary);
    border-radius: 1rem;
    padding: 1.625rem 2rem;
    margin-bottom: 1.375rem;
  }

  /* decorative orb top-right */
  .ev-portal-welcome::before {
    content: '';
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(0.46 0.28 270 / 0.15) 0%, transparent 65%);
    pointer-events: none;
  }

  /* decorative orb bottom-left */
  .ev-portal-welcome::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    left: 30%;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(0.46 0.28 270 / 0.07) 0%, transparent 65%);
    pointer-events: none;
  }

  .ev-portal-welcome-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: oklch(0.14 0.06 265);
    margin-bottom: 0.375rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
    position: relative; /* above ::before orbs */
  }

  .ev-portal-welcome-sub {
    font-size: 0.875rem;
    color: oklch(0.46 0.018 258);
    line-height: 1.5;
    position: relative;
  }

  @media (max-width: 639px) {
    .ev-portal-welcome {
      padding: 1.25rem 1rem;
    }

    .ev-portal-welcome-title {
      font-size: 1.25rem;
    }
  }

  /* ── Portal Stats Grid ────────────────────────────────────────── */

  .ev-portal-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }

  @media (min-width: 640px) { .ev-portal-stats { gap: 1rem; } }
  @media (min-width: 1024px) { .ev-portal-stats { grid-template-columns: repeat(3, 1fr); } }

  /* ── Portal Stat Card ─────────────────────────────────────────── */

  .ev-portal-stat-card {
    background: var(--ev-surface-card);
    border-radius: 0.875rem;
    border: 1px solid var(--ev-border);
    border-left: 4px solid var(--ev-primary);
    padding: 1.375rem 1.5rem 1.25rem;
    box-shadow: var(--ev-shadow-card);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
  }

  .ev-portal-stat-card:hover {
    box-shadow: var(--ev-shadow-hover);
    border-color: var(--ev-border);
    border-left-color: var(--ev-primary-hover);
    transform: translateY(-2px);
  }

  @media (max-width: 639px) {
    .ev-portal-stat-card {
      padding: 0.875rem 1rem 0.75rem;
      border-radius: 0.625rem;
      border-left-width: 3px;
    }
  }

  /* ── Sticky Cart Summary ──────────────────────────────────────── */

  .ev-sticky-summary {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    box-shadow: var(--ev-shadow-card);
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }

  /* ── Breadcrumb ───────────────────────────────────────────────── */

  .ev-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    margin-bottom: 1.125rem;
  }

  .ev-breadcrumb-item {
    color: var(--ev-ink-fg-muted);
    text-decoration: none;
    transition: color 0.12s ease;
  }

  .ev-breadcrumb-item:hover { color: var(--ev-primary); }

  .ev-breadcrumb-sep {
    color: var(--ev-border);
    user-select: none;
  }

  .ev-breadcrumb-current {
    color: oklch(0.28 0.028 265);
    font-weight: 500;
  }

  /* ── Form Section Divider ─────────────────────────────────────── */

  .ev-form-section {
    padding-top: 1.5rem;
    margin-top: 0.25rem;
    margin-bottom: 1.25rem;
    border-top: 1px solid var(--ev-border-light);
  }

  .ev-form-section:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  .ev-form-section-title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: oklch(0.22 0.030 265);
    letter-spacing: -0.01em;
  }

  .ev-form-section-desc {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    margin-top: 0.25rem;
  }

  /* ── Helper Hint Text ────────────────────────────────────────── */

  .ev-hint {
    font-size: 0.75rem;
    color: oklch(0.55 0.008 258);
    margin-top: 0.3rem;
    line-height: 1.45;
  }

  /* ── Toggle Switch ──────────────────────────────────────────── */

  .ev-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 2.5rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: oklch(0.85 0.005 260);
    border: 1px solid oklch(0.80 0.008 260);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
  }

  .ev-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px oklch(0.15 0.02 260 / 0.15);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ev-toggle:checked {
    background: var(--ev-primary);
    border-color: var(--ev-primary);
  }

  .ev-toggle:checked::before {
    transform: translateX(1.125rem);
  }

  .ev-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ev-primary-tint);
  }

  /* ── Toggle Row ─────────────────────────────────────────────── */

  .ev-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ev-border-light);
    border-radius: 0.625rem;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .ev-toggle-row:hover {
    border-color: var(--ev-border);
    background: oklch(0.993 0.001 260);
  }

  .ev-toggle-row-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ev-ink);
    margin: 0;
  }

  .ev-toggle-row-desc {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    margin: 0.125rem 0 0;
    line-height: 1.45;
  }

  /* ── Refund Timeline Bar ────────────────────────────────────── */

  .ev-refund-bar {
    display: flex;
    height: 3.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid oklch(0.88 0.006 260);
  }

  .ev-refund-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
  }

  .ev-refund-seg + .ev-refund-seg {
    border-left: 1px solid oklch(1 0 0 / 0.35);
  }

  .ev-refund-seg-label {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
  }

  .ev-refund-seg-sub {
    font-size: 0.625rem;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 0.1875rem;
    line-height: 1;
    white-space: nowrap;
  }

  .ev-refund-seg--full {
    background: oklch(0.93 0.06 155);
    color: oklch(0.32 0.12 155);
  }

  .ev-refund-seg--partial {
    background: oklch(0.94 0.07 75);
    color: oklch(0.38 0.12 55);
  }

  .ev-refund-seg--none {
    background: oklch(0.94 0.05 20);
    color: oklch(0.42 0.12 20);
  }

  .ev-refund-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    color: var(--ev-ink-fg-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0 0.125rem;
  }

  .ev-refund-legend-start::before,
  .ev-refund-legend-end::after {
    display: inline;
    font-size: 0.75rem;
  }

  .ev-refund-legend-start::before { content: '\2190 '; }
  .ev-refund-legend-end::after    { content: ' \2192'; }

  /* ── Refund Tier Badges (compact) ───────────────────────────── */

  .ev-refund-tier-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  .ev-refund-tier-badge--full {
    background: oklch(0.93 0.06 155 / 0.6);
    border-color: oklch(0.82 0.08 155);
    color: oklch(0.32 0.12 155);
  }

  .ev-refund-tier-badge--partial {
    background: oklch(0.94 0.07 75 / 0.6);
    border-color: oklch(0.85 0.08 75);
    color: oklch(0.38 0.12 55);
  }

  .ev-refund-tier-badge--none {
    background: oklch(0.94 0.05 20 / 0.5);
    border-color: oklch(0.86 0.06 20);
    color: oklch(0.42 0.12 20);
  }

  /* ── Permission Indicator ──────────────────────────────────── */

  .ev-perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-perm-row:last-child {
    border-bottom: none;
  }

  .ev-perm-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ev-ink);
  }

  .ev-perm-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .ev-perm-icon--on  { color: oklch(0.52 0.18 155); }
  .ev-perm-icon--off { color: var(--ev-ink-fg-muted); opacity: 0.5; }

  .ev-perm-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
  }

  .ev-perm-meta {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
  }

  /* ── Settings Tabs ─────────────────────────────────────────── */

  .ev-settings-tab,
  .ev-settings-tab--active {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    cursor: pointer;
  }

  .ev-settings-tab {
    color: var(--ev-ink-fg);
  }

  .ev-settings-tab:hover {
    background: var(--ev-surface-subtle);
    color: var(--ev-ink);
  }

  .ev-settings-tab--active {
    color: var(--ev-primary);
    background: var(--ev-primary-tint);
    font-weight: 600;
  }

  /* ── Collapsible Sync Table ─────────────────────────────────── */

  .ev-sync-section {
    border: 1px solid var(--ev-border);
    border-radius: 0.625rem;
    background: var(--ev-surface-card);
    overflow: hidden;
  }

  .ev-sync-section + .ev-sync-section {
    margin-top: 0.75rem;
  }

  .ev-sync-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.12s;
  }

  .ev-sync-summary::-webkit-details-marker { display: none; }

  .ev-sync-summary:hover {
    background: var(--ev-surface-subtle);
  }

  .ev-sync-summary-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
  }

  .ev-sync-summary-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ev-ink);
    letter-spacing: -0.01em;
  }

  .ev-sync-summary-count {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    font-weight: 500;
  }

  .ev-sync-summary-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
  }

  .ev-sync-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--ev-ink-fg-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  details[open] > .ev-sync-summary .ev-sync-chevron {
    transform: rotate(90deg);
  }

  .ev-sync-table-wrap {
    max-height: 22rem;
    overflow-y: auto;
    border-top: 1px solid var(--ev-border-light);
  }

  .ev-sync-table {
    width: 100%;
    border-collapse: collapse;
  }

  .ev-sync-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ev-surface-subtle);
  }

  .ev-sync-table th {
    padding: 0.5rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ev-ink-fg-muted);
    text-align: left;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-sync-table td {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--ev-ink);
    border-bottom: 1px solid var(--ev-border-light);
    vertical-align: middle;
  }

  .ev-sync-table tr:last-child td {
    border-bottom: none;
  }

  .ev-sync-table tbody tr:hover {
    background: oklch(0.993 0.001 260);
  }

  /* ── Tab Bar ──────────────────────────────────────────────────── */

  .ev-tab-bar {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border-bottom: 1px solid var(--ev-border-light);
    margin-bottom: 1.125rem;
  }

  .ev-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ev-ink-fg);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
  }

  .ev-tab:hover {
    color: oklch(0.22 0.025 265);
    border-bottom-color: var(--ev-border);
  }

  .ev-tab-active {
    color: var(--ev-primary);
    border-bottom-color: var(--ev-primary);
    font-weight: 600;
  }

  /* ── Checkout Page ───────────────────────────────────────────── */

  /* Step indicator */
  .ev-checkout-steps {
    display: flex;
    align-items: center;
  }

  .ev-checkout-step {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(0.60 0 0);
  }

  .ev-checkout-step-num {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    background: oklch(0.92 0 0);
    color: oklch(0.52 0 0);
    border: 1.5px solid oklch(0.84 0 0);
  }

  .ev-checkout-step-done {
    color: oklch(0.36 0.12 162);
  }

  .ev-checkout-step-done .ev-checkout-step-num {
    background: oklch(0.56 0.18 162 / 0.14);
    color: oklch(0.30 0.16 162);
    border-color: oklch(0.56 0.18 162 / 0.30);
  }

  .ev-checkout-step-active {
    color: oklch(0.26 0.028 265);
    font-weight: 600;
  }

  .ev-checkout-step-active .ev-checkout-step-num {
    background: var(--ev-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 0 0 3px oklch(0.46 0.28 270 / 0.18);
  }

  .ev-checkout-step-future {
    color: oklch(0.70 0 0);
  }

  .ev-checkout-step-connector {
    width: 2rem;
    height: 1.5px;
    background: var(--ev-border);
    margin: 0 0.375rem;
  }

  /* Item rows */
  .ev-checkout-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.375rem;
    border-top: 1px solid var(--ev-border-light);
    transition: background-color 0.1s ease;
  }

  .ev-checkout-item:first-child {
    border-top: none;
  }

  .ev-checkout-item:hover {
    background: var(--ev-surface-subtle);
  }

  .ev-checkout-item-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ev-primary);
  }

  /* Totals section */
  .ev-checkout-totals {
    padding: 1rem 1.375rem;
    border-top: 1px solid var(--ev-border);
    background: var(--ev-surface-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ev-checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ev-checkout-total-final {
    padding-top: 0.5rem;
    border-top: 1px solid var(--ev-border);
    margin-top: 0.125rem;
  }

  .ev-checkout-total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: oklch(0.12 0.04 265);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  /* Confirm panel card */
  .ev-checkout-confirm-card {
    background: var(--ev-surface-card);
    border-radius: 0.75rem;
    border: 1px solid var(--ev-border);
    box-shadow: var(--ev-shadow-card);
    overflow: hidden;
    opacity: 0;
    animation: ev-fade-up 0.45s ease 0.34s forwards;
    position: sticky;
    top: 1.5rem;
  }

  .ev-checkout-confirm-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
    background: linear-gradient(
      135deg,
      oklch(0.46 0.28 270 / 0.04) 0%,
      oklch(0.46 0.28 270 / 0.01) 100%
    );
  }

  .ev-checkout-confirm-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ev-primary);
    flex-shrink: 0;
  }

  /* Total callout inside confirm card */
  .ev-checkout-confirm-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    background: oklch(0.46 0.28 270 / 0.04);
    border: 1px solid oklch(0.46 0.28 270 / 0.12);
    border-radius: 0.5rem;
    margin-bottom: 1.125rem;
  }

  /* CTA submit button */
  .ev-checkout-cta {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* Trust badges */
  .ev-checkout-trust {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ev-border-light);
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
  }

  .ev-checkout-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: oklch(0.50 0 0);
  }

  .ev-checkout-trust-item svg {
    color: oklch(0.48 0.16 162);
    flex-shrink: 0;
  }

  /* ── Payment Success State (payment_status=success redirect) ─── */

  .ev-pay-success-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, oklch(0.975 0.020 145) 0%, oklch(0.992 0.007 155) 55%, oklch(0.997 0 0) 100%);
    border: 1px solid oklch(0.875 0.055 145);
    border-radius: 1rem;
    padding: 2.75rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    box-shadow: 0 4px 32px oklch(0.52 0.18 155 / 0.10), 0 1px 4px oklch(0.20 0.012 260 / 0.05);
    animation: ev-pay-scale 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    margin-bottom: 1.25rem;
  }

  .ev-pay-success-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(0.52 0.18 155 / 0.07) 0%, transparent 70%);
    pointer-events: none;
  }

  .ev-pay-success-hero::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(0.52 0.18 155 / 0.05) 0%, transparent 70%);
    pointer-events: none;
  }

  @keyframes ev-pay-scale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes ev-pay-check-circle {
    0%   { stroke-dashoffset: 166; opacity: 0; }
    20%  { opacity: 1; }
    100% { stroke-dashoffset: 0; }
  }

  @keyframes ev-pay-check-path {
    0%   { stroke-dashoffset: 48; }
    100% { stroke-dashoffset: 0; }
  }

  @keyframes ev-pay-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .ev-pay-check-wrap {
    width: 5rem;
    height: 5rem;
    animation: ev-pay-fade-up 0.4s 0.05s ease-out both;
  }

  .ev-pay-check-svg .ev-pay-circle {
    stroke: oklch(0.46 0.18 155);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-linecap: round;
    fill: none;
    animation: ev-pay-check-circle 0.55s 0.1s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }

  .ev-pay-check-svg .ev-pay-path {
    stroke: oklch(0.46 0.18 155);
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    fill: none;
    animation: ev-pay-check-path 0.3s 0.55s ease-out forwards;
  }

  .ev-pay-success-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: oklch(0.38 0.12 145);
    animation: ev-pay-fade-up 0.4s 0.15s ease-out both;
  }

  .ev-pay-success-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ev-ink);
    animation: ev-pay-fade-up 0.4s 0.2s ease-out both;
  }

  .ev-pay-success-service {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ev-ink);
    animation: ev-pay-fade-up 0.4s 0.25s ease-out both;
  }

  .ev-pay-success-meta {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    animation: ev-pay-fade-up 0.4s 0.28s ease-out both;
  }

  .ev-pay-divider {
    width: 3rem;
    height: 1px;
    background: oklch(0.82 0.04 145);
    margin: 0.375rem 0;
    animation: ev-pay-fade-up 0.4s 0.3s ease-out both;
  }

  .ev-pay-success-actions {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.25rem;
    animation: ev-pay-fade-up 0.4s 0.34s ease-out both;
  }

  /* Compact summary card below the hero */
  .ev-pay-summary-card {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.875rem;
    overflow: hidden;
    margin-bottom: 1.125rem;
    animation: ev-pay-fade-up 0.4s 0.38s ease-out both;
  }

  .ev-pay-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-pay-summary-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ev-ink);
    letter-spacing: 0.01em;
  }

  /* Compact line items (success view) */
  .ev-pay-items-list {
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ev-pay-item-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
  }

  .ev-pay-item-name {
    color: var(--ev-ink);
    font-weight: 500;
    flex: 1;
    min-width: 0;
  }

  .ev-pay-item-qty {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    white-space: nowrap;
  }

  .ev-pay-item-amount {
    color: var(--ev-ink);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
  }

  /* Total row in compact summary */
  .ev-pay-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ev-border);
    background: var(--ev-surface-subtle);
  }

  .ev-pay-total-label {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    font-weight: 500;
  }

  .ev-pay-total-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ev-ink);
  }

  /* Payment detail pill row */
  .ev-pay-detail-strip {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ev-border-light);
    flex-wrap: wrap;
  }

  .ev-pay-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
  }

  .ev-pay-detail-chip svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: oklch(0.48 0.18 155);
  }

  /* Next steps card */
  .ev-pay-next-card {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.875rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.125rem;
    animation: ev-pay-fade-up 0.4s 0.42s ease-out both;
  }

  .ev-pay-next-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
    margin-bottom: 0.875rem;
  }

  .ev-pay-next-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .ev-pay-next-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .ev-pay-next-num {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--ev-primary-tint, oklch(0.97 0.03 270));
    border: 1px solid var(--ev-primary-border, oklch(0.88 0.08 270));
    color: var(--ev-primary);
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
  }

  .ev-pay-next-text {
    font-size: 0.875rem;
    color: var(--ev-ink-fg-muted);
    line-height: 1.5;
  }

  .ev-pay-next-text strong {
    color: var(--ev-ink);
    font-weight: 500;
  }

  /* ── Checkout Calendar ───────────────────────────────────────── */

  /* Wrapper to constrain & center the grid */
  .ev-cal-wrap {
    display: flex;
    justify-content: center;
  }

  .ev-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 36px);
    gap: 2px;
    justify-content: center;
  }

  .ev-cal-header {
    width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
  }

  .ev-cal-day {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 500;
    position: relative;
    transition: background 0.12s, color 0.12s;
    cursor: default;
    user-select: none;
  }

  .ev-cal-day--available {
    color: var(--ev-ink);
    font-weight: 600;
    cursor: pointer;
  }
  .ev-cal-day--available:hover {
    background: oklch(0.46 0.28 270 / 0.10);
    color: var(--ev-primary);
  }

  .ev-cal-day--selected {
    background: oklch(0.20 0.04 265) !important;
    color: #fff !important;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px oklch(0.20 0.04 265 / 0.30);
  }

  .ev-cal-day--disabled {
    color: var(--ev-ink-fg-muted);
    opacity: 0.28;
    cursor: default;
  }

  /* Dot under today's date */
  .ev-cal-day--today:not(.ev-cal-day--selected)::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ev-primary);
  }

  /* Available date with a subtle dot indicator */
  .ev-cal-day--available:not(.ev-cal-day--selected)::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: oklch(0.46 0.28 270 / 0.45);
  }

  .ev-cal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 0;
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
  }

  .ev-cal-spinner {
    animation: ev-cal-spin 0.9s linear infinite;
    flex-shrink: 0;
  }

  .ev-cal-empty {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    text-align: center;
    padding: 1rem 0 0.25rem;
  }

  .ev-cal-prompt {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
  }

  /* ── Time Slot Chip Grid ─────────────────────────────────────── */

  .ev-slots-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
    margin-bottom: 0.75rem;
  }

  .ev-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 0.5rem;
  }

  .ev-slot-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.375rem;
    border: 1.5px solid var(--ev-border);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ev-ink);
    cursor: pointer;
    transition: all 0.12s;
    text-align: center;
    background: var(--ev-surface-card);
    line-height: 1;
  }

  .ev-slot-chip:hover {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
    background: oklch(0.46 0.28 270 / 0.06);
  }

  .ev-slot-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .ev-slot-chip--selected,
  .ev-slot-chip:has(input:checked) {
    background: oklch(0.20 0.04 265);
    border-color: oklch(0.20 0.04 265);
    color: #fff;
    box-shadow: 0 2px 8px oklch(0.20 0.04 265 / 0.25);
  }

  /* ── Checkout Slot Hint ──────────────────────────────────────── */

  .ev-checkout-slot-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: oklch(0.52 0.18 30);
    background: oklch(0.98 0.02 50);
    border: 1px solid oklch(0.88 0.06 50);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
  }

  .ev-checkout-slot-hint--pulse {
    animation: ev-hint-pulse 0.6s ease;
  }

  @keyframes ev-hint-pulse {
    0%   { transform: scale(1);    box-shadow: none; }
    30%  { transform: scale(1.02); box-shadow: 0 0 0 3px oklch(0.88 0.12 30 / 0.4); }
    100% { transform: scale(1);    box-shadow: none; }
  }

  /* ── Booking Section ─────────────────────────────────────────── */

  .ev-booking-section {
    border-top: 1px solid var(--ev-border-light);
    background: oklch(0.975 0.008 265);
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .ev-booking-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ev-primary);
    margin-bottom: 1.125rem;
  }

  .ev-booking-section-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ev-primary);
    flex-shrink: 0;
  }

  .ev-booking-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
  }

  .ev-booking-month-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--ev-border);
    background: var(--ev-surface-card);
    color: var(--ev-ink-fg-muted);
    cursor: pointer;
    transition: all 0.12s;
    flex-shrink: 0;
  }

  .ev-booking-month-btn:hover {
    border-color: var(--ev-ink);
    color: var(--ev-ink);
    background: var(--ev-surface);
  }

  .ev-booking-month-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ev-ink);
    letter-spacing: -0.02em;
  }

  .ev-booking-slots-divider {
    margin: 1.25rem 0 1rem;
    height: 1px;
    background: var(--ev-border-light);
  }

  .ev-booking-section--nudge {
    animation: ev-booking-nudge 0.7s ease;
  }

  @keyframes ev-booking-nudge {
    0%   { outline: 2px solid transparent; }
    20%  { outline: 2px solid oklch(0.55 0.22 260 / 0.6); background: oklch(0.96 0.02 265); }
    80%  { outline: 2px solid oklch(0.55 0.22 260 / 0.3); }
    100% { outline: 2px solid transparent; background: oklch(0.975 0.008 265); }
  }

  @keyframes ev-cal-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ── Animations ──────────────────────────────────────────────── */

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

  /* ── Appointments Calendar ───────────────────────────────────── */

  :root {
    --appt-confirmed-color: oklch(0.42 0.18 155);
    --appt-confirmed-bg:    oklch(0.93 0.07 155);
    --appt-pending-color:   oklch(0.48 0.16 60);
    --appt-pending-bg:      oklch(0.94 0.08 75);
    --appt-cancelled-color: oklch(0.48 0 0);
    --appt-cancelled-bg:    oklch(0.92 0 0);
  }

  .ev-appt-page-icon {
    width: 2rem; height: 2rem; border-radius: 0.5rem;
    background: var(--ev-primary-tint); border: 1px solid var(--ev-primary-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--ev-primary); flex-shrink: 0;
  }

  /* Controls bar */
  .ev-appt-controls {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem;
  }

  /* View switcher */
  .ev-appt-view-switcher {
    display: flex; align-items: center; gap: 0.1875rem;
    background: var(--ev-surface); border: 1px solid var(--ev-border);
    border-radius: 0.5rem; padding: 0.1875rem;
  }
  .ev-appt-view-tab {
    padding: 0.3125rem 0.75rem; border-radius: 0.375rem;
    font-size: 0.8125rem; font-weight: 500; color: var(--ev-ink-fg-muted);
    text-decoration: none; transition: all 0.12s;
  }
  .ev-appt-view-tab:hover { color: var(--ev-ink); background: var(--ev-surface-card); }
  .ev-appt-view-tab--active {
    background: var(--ev-surface-card); color: var(--ev-ink); font-weight: 600;
    box-shadow: 0 1px 3px oklch(0.15 0.02 260 / 0.10);
  }

  /* Date nav */
  .ev-appt-date-nav { display: flex; align-items: center; gap: 0.5rem; }
  .ev-appt-nav-btn {
    width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--ev-border); background: var(--ev-surface-card);
    color: var(--ev-ink-fg-muted); text-decoration: none; transition: all 0.12s;
  }
  .ev-appt-nav-btn:hover { border-color: var(--ev-ink); color: var(--ev-ink); }
  .ev-appt-period-label {
    font-size: 0.9375rem; font-weight: 700; color: var(--ev-ink);
    min-width: 13rem; text-align: center; letter-spacing: -0.01em;
  }
  .ev-appt-today-btn { font-size: 0.8125rem; padding: 0.375rem 0.75rem; }

  /* Filters */
  .ev-appt-filters { display: flex; align-items: center; gap: 0.5rem; }
  .ev-appt-filter-select { font-size: 0.8125rem; padding: 0.375rem 0.625rem; min-width: 9rem; }

  /* Mobile: stack controls vertically */
  @media (max-width: 639px) {
    .ev-appt-controls {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }

    .ev-appt-view-switcher {
      order: -1;
      align-self: flex-start;
    }

    .ev-appt-date-nav {
      justify-content: space-between;
    }

    .ev-appt-filters {
      flex-wrap: wrap;
      gap: 0.375rem;
    }

    .ev-appt-filter-select {
      flex: 1;
      min-width: 0;
      font-size: 1rem;
    }
  }

  /* ── Mobile Calendar ─────────────────────────────────────────── */

  /* Mini month grid */
  .ev-mobile-month-grid {
    padding: 0.5rem 1rem 0.75rem;
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .ev-mobile-month-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--ev-ink-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.375rem;
  }

  .ev-mobile-month-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
  }

  .ev-mobile-month-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0;
    text-decoration: none;
    color: var(--ev-ink);
  }

  .ev-mobile-month-day--other {
    color: var(--ev-ink-fg-muted);
    opacity: 0.4;
  }

  .ev-mobile-month-day-num {
    font-size: 0.8125rem;
    font-weight: 500;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .ev-mobile-month-day--today .ev-mobile-month-day-num {
    background: var(--ev-primary);
    color: white;
    font-weight: 700;
  }

  .ev-mobile-month-day--selected .ev-mobile-month-day-num {
    border: 2px solid var(--ev-primary);
  }

  .ev-mobile-month-day--today.ev-mobile-month-day--selected .ev-mobile-month-day-num {
    border: none;
    box-shadow: 0 0 0 2px var(--ev-primary-tint);
  }

  .ev-mobile-month-dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--ev-primary);
  }

  /* Week day strip */
  .ev-mobile-week-strip {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .ev-mobile-week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.375rem;
    text-decoration: none;
    color: var(--ev-ink);
    border-radius: 0.5rem;
  }

  .ev-mobile-week-day-name {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
  }

  .ev-mobile-week-day-num {
    font-size: 0.875rem;
    font-weight: 500;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .ev-mobile-week-day--today .ev-mobile-week-day-num {
    background: var(--ev-primary);
    color: white;
    font-weight: 700;
  }

  .ev-mobile-week-day--today .ev-mobile-week-day-name {
    color: var(--ev-primary);
  }

  .ev-mobile-week-day--selected {
    background: var(--ev-primary-tint);
  }

  /* Agenda list (shared by all mobile views) */
  .ev-mobile-agenda {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    padding: 0.5rem 0;
    overflow: hidden;
  }

  .ev-mobile-agenda-day-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ev-primary);
  }

  .ev-mobile-agenda-today-badge {
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    background: var(--ev-primary);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
  }

  .ev-mobile-agenda-count {
    font-weight: 500;
    color: var(--ev-ink-fg-muted);
    margin-left: auto;
  }

  .ev-mobile-agenda-empty {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    text-align: center;
  }

  /* Agenda card */
  .ev-mobile-agenda-card {
    margin: 0.25rem 0.75rem;
    padding: 0.75rem;
    background: var(--ev-surface);
    border-radius: 0.5rem;
    border-left: 3px solid var(--ev-border);
    cursor: pointer;
    transition: background-color 0.12s ease;
  }

  .ev-mobile-agenda-card:active {
    background: var(--ev-surface-subtle);
  }

  .ev-mobile-agenda-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ev-mobile-agenda-card-info {
    flex: 1;
    min-width: 0;
  }

  .ev-mobile-agenda-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ev-ink);
    line-height: 1.3;
  }

  .ev-mobile-agenda-card-meta {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    margin-top: 0.125rem;
    line-height: 1.4;
  }

  .ev-mobile-agenda-card-notes {
    font-size: 0.75rem;
    color: var(--ev-ink-fg);
    font-style: italic;
    margin-top: 0.25rem;
  }

  .ev-mobile-agenda-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
  }

  .ev-mobile-agenda-confirm {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ev-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .ev-mobile-agenda-confirm:hover {
    text-decoration: underline;
  }

  /* ── Month View ──────────────────────────────────────────────── */
  .ev-appt-month-card { overflow: hidden; }
  .ev-appt-month-header-row {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--ev-border);
  }
  .ev-appt-month-dow {
    padding: 0.5rem 0; text-align: center;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ev-ink-fg-muted);
  }
  .ev-appt-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .ev-appt-month-cell {
    min-height: 6rem; padding: 0.375rem 0.5rem;
    border-right: 1px solid var(--ev-border-light);
    border-bottom: 1px solid var(--ev-border-light);
    text-decoration: none; transition: background 0.1s; display: block;
  }
  .ev-appt-month-cell:nth-child(7n) { border-right: none; }
  .ev-appt-month-cell:hover { background: var(--ev-surface-subtle); }
  .ev-appt-month-cell--today { background: oklch(0.97 0.02 265); }
  .ev-appt-month-cell--today:hover { background: oklch(0.95 0.03 265); }
  .ev-appt-month-cell--other-month { background: oklch(0.985 0 0); }
  .ev-appt-month-day-num {
    display: block; font-size: 0.8125rem; font-weight: 600;
    color: var(--ev-ink-fg-muted); margin-bottom: 0.25rem;
  }
  .ev-appt-month-cell--today .ev-appt-month-day-num { color: var(--ev-primary); font-weight: 700; }
  .ev-appt-month-cell--other-month .ev-appt-month-day-num { opacity: 0.4; }
  .ev-appt-month-pills { display: flex; flex-direction: column; gap: 2px; }
  .ev-appt-month-overflow {
    font-size: 0.6875rem; color: var(--ev-ink-fg-muted); font-weight: 500; padding: 1px 4px;
  }

  /* Appointment pills (month) */
  .ev-appt-pill {
    display: block; width: 100%; text-align: left; border: none; cursor: pointer;
    padding: 2px 5px; border-radius: 3px; font-size: 0.6875rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-left: 2.5px solid transparent; transition: opacity 0.1s; line-height: 1.4;
  }
  .ev-appt-pill:hover { opacity: 0.8; }
  .ev-appt-pill--confirmed {
    background: var(--appt-confirmed-bg); color: oklch(0.30 0.10 155);
    border-left-color: var(--appt-confirmed-color);
  }
  .ev-appt-pill--pending {
    background: var(--appt-pending-bg); color: oklch(0.35 0.10 60);
    border-left-color: var(--appt-pending-color);
  }
  .ev-appt-pill--cancelled {
    background: var(--appt-cancelled-bg); color: var(--appt-cancelled-color);
    border-left-color: var(--appt-cancelled-color); text-decoration: line-through; opacity: 0.6;
  }

  /* Live-update highlight animation */
  @keyframes booking-highlight {
    0%   { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  }
  .booking-highlighted {
    animation: booking-highlight 2s ease-out;
    border-radius: inherit;
  }

  /* ── Week View ───────────────────────────────────────────────── */
  .ev-appt-week-card { overflow: hidden; }
  .ev-appt-week-header {
    display: grid; grid-template-columns: 3.5rem repeat(7, 1fr);
    border-bottom: 2px solid var(--ev-border);
  }
  .ev-appt-time-gutter { border-right: 1px solid var(--ev-border-light); }
  .ev-appt-week-col-header {
    padding: 0.5rem 0; text-align: center; text-decoration: none;
    border-right: 1px solid var(--ev-border-light); transition: background 0.1s;
  }
  .ev-appt-week-col-header:last-child { border-right: none; }
  .ev-appt-week-col-header:hover { background: var(--ev-surface-subtle); }
  .ev-appt-week-col-header--today { background: oklch(0.97 0.02 265); }
  .ev-appt-week-dow {
    display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ev-ink-fg-muted);
  }
  .ev-appt-week-date-num {
    display: block; font-size: 1rem; font-weight: 700; color: var(--ev-ink); line-height: 1.2;
  }
  .ev-appt-week-col-header--today .ev-appt-week-date-num { color: var(--ev-primary); }

  .ev-appt-week-scroll { overflow-y: auto; max-height: calc(100vh - 240px); }
  .ev-appt-week-grid {
    display: grid; grid-template-columns: 3.5rem repeat(7, 1fr); position: relative;
  }
  .ev-appt-time-gutter-col { position: relative; border-right: 1px solid var(--ev-border-light); }
  .ev-appt-time-label {
    position: absolute; right: 0.375rem; font-size: 0.625rem;
    color: var(--ev-ink-fg-muted); transform: translateY(-50%); white-space: nowrap;
    font-weight: 500; letter-spacing: 0.02em;
  }
  .ev-appt-week-day-col {
    position: relative; border-right: 1px solid var(--ev-border-light);
  }
  .ev-appt-week-day-col:last-child { border-right: none; }
  .ev-appt-week-day-col--today { background: oklch(0.98 0.01 265); }
  .ev-appt-hour-line {
    position: absolute; left: 0; right: 0; height: 1px;
    background: var(--ev-border-light); pointer-events: none;
  }

  /* Appointment blocks (week + day) */
  .ev-appt-block {
    position: absolute; border: none; cursor: pointer; text-align: left;
    border-left: 3px solid transparent; border-radius: 5px; padding: 4px 6px;
    overflow: hidden; transition: opacity 0.1s, box-shadow 0.1s;
    box-shadow: 0 1px 3px oklch(0.15 0.03 260 / 0.08);
  }
  .ev-appt-block:hover {
    opacity: 0.92; box-shadow: 0 3px 8px oklch(0.15 0.03 260 / 0.14);
  }
  .ev-appt-block--confirmed {
    background: #dcfce7; border-left-color: #16a34a; color: #14532d;
  }
  .ev-appt-block--pending {
    background: #fef9c3; border-left-color: #ca8a04; color: #713f12;
  }
  .ev-appt-block--cancelled {
    background: #f3f4f6; border-left-color: #9ca3af; color: #6b7280; opacity: 0.6;
  }
  .ev-appt-block-time {
    display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em;
    color: inherit; opacity: 0.7;
  }
  .ev-appt-block-client {
    display: block; font-size: 0.75rem; font-weight: 700; color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ev-appt-block-service {
    display: block; font-size: 0.6875rem; color: inherit; opacity: 0.75;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ev-appt-block--confirmed { color: var(--appt-confirmed-color); }
  .ev-appt-block--pending   { color: var(--appt-pending-color); }
  .ev-appt-block--cancelled { color: var(--appt-cancelled-color); }

  /* ── Day View ────────────────────────────────────────────────── */
  .ev-appt-day-card { overflow: hidden; }
  .ev-appt-day-header {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 1rem 1.375rem; border-bottom: 1px solid var(--ev-border-light);
  }
  .ev-appt-day-title { font-size: 1rem; font-weight: 700; color: var(--ev-ink); letter-spacing: -0.01em; }
  .ev-appt-day-scroll { overflow-y: auto; max-height: calc(100vh - 240px); }
  .ev-appt-day-grid {
    display: grid; grid-template-columns: 3.5rem 1fr; position: relative;
  }
  .ev-appt-day-col { position: relative; }
  .ev-appt-day-block {
    position: absolute; border-left: 3px solid transparent; border-radius: 6px;
    padding: 8px 10px; box-shadow: 0 1px 4px oklch(0.15 0.03 260 / 0.10);
    display: flex; flex-direction: column; gap: 2px; overflow: hidden;
    transition: box-shadow 0.1s;
  }
  .ev-appt-day-block:hover { box-shadow: 0 3px 10px oklch(0.15 0.03 260 / 0.16); }
  .ev-appt-day-block.ev-appt-block--confirmed {
    background: #dcfce7; border-left-color: #16a34a; color: #14532d;
  }
  .ev-appt-day-block.ev-appt-block--pending {
    background: #fef9c3; border-left-color: #ca8a04; color: #713f12;
  }
  .ev-appt-day-block.ev-appt-block--cancelled {
    background: #f3f4f6; border-left-color: #9ca3af; color: #6b7280; opacity: 0.6;
  }
  .ev-appt-day-block-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .ev-appt-day-open-btn {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--ev-ink-fg-muted); padding: 2px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; transition: color 0.1s;
  }
  .ev-appt-day-open-btn:hover { color: var(--ev-ink); }
  .ev-appt-day-block.ev-appt-block--confirmed { color: var(--appt-confirmed-color); }
  .ev-appt-day-block.ev-appt-block--pending   { color: var(--appt-pending-color); }
  .ev-appt-day-block.ev-appt-block--cancelled { color: var(--appt-cancelled-color); }
  .ev-appt-day-client { font-size: 0.9375rem; font-weight: 700; color: inherit; }
  .ev-appt-day-service { font-size: 0.8125rem; color: inherit; opacity: 0.8; }
  .ev-appt-day-notes { font-size: 0.75rem; color: var(--ev-ink-fg-muted); font-style: italic; }
  .ev-appt-day-actions { display: flex; gap: 0.375rem; margin-top: auto; padding-top: 0.375rem; }

  /* ── Appointment Drawer ──────────────────────────────────────── */
  .ev-drawer-overlay {
    position: fixed; inset: 0; z-index: 50; pointer-events: none;
  }
  .ev-drawer-overlay.is-open { pointer-events: auto; }
  .ev-drawer-backdrop {
    position: absolute; inset: 0;
    background: oklch(0.15 0.02 260 / 0); pointer-events: none;
    transition: background 0.3s ease;
  }
  .ev-drawer-overlay.is-open .ev-drawer-backdrop {
    background: oklch(0.15 0.02 260 / 0.3); pointer-events: auto;
  }
  .ev-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 26rem; max-width: 100%;
    background: var(--ev-surface-card); border-left: 1px solid var(--ev-border);
    box-shadow: -4px 0 24px oklch(0.15 0.03 260 / 0.12);
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
  }
  .ev-drawer-overlay.is-open .ev-drawer-panel { transform: translateX(0); }

  .ev-drawer-content { display: flex; flex-direction: column; height: 100%; }
  .ev-drawer-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1.25rem 1.375rem; border-bottom: 1px solid var(--ev-border-light); flex-shrink: 0;
  }
  .ev-drawer-title { font-size: 1rem; font-weight: 700; color: var(--ev-ink); letter-spacing: -0.01em; }
  .ev-drawer-close-btn {
    width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--ev-border);
    background: var(--ev-surface); display: flex; align-items: center; justify-content: center;
    color: var(--ev-ink-fg-muted); cursor: pointer; transition: all 0.1s; flex-shrink: 0;
  }
  .ev-drawer-close-btn:hover { border-color: var(--ev-ink); color: var(--ev-ink); }
  .ev-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.375rem; }
  .ev-drawer-footer {
    padding: 1rem 1.375rem; border-top: 1px solid var(--ev-border-light);
    display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0;
  }

  /* ── Portal My Appointments ──────────────────────────────────── */
  @keyframes ev-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes ev-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .ev-portal-appt-page {
    animation: ev-fade-in 0.3s ease;
  }

  .ev-past-row { opacity: 0.65; transition: opacity 0.15s; }
  .ev-past-row:hover, .ev-past-row:focus-within { opacity: 1; }

  .ev-appt-card-ticket {
    display: flex; align-items: stretch;
    background: white; border-radius: 0.875rem;
    border: 1px solid var(--ev-border-light);
    box-shadow: 0 1px 4px oklch(0.15 0.03 260 / 0.06), 0 4px 16px -4px oklch(0.15 0.03 260 / 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    animation: ev-slide-up 0.35s ease both;
  }
  .ev-appt-card-ticket:hover {
    box-shadow: 0 2px 8px oklch(0.15 0.03 260 / 0.08), 0 8px 24px -4px oklch(0.15 0.03 260 / 0.12);
    transform: translateY(-1px);
  }

  .ev-appt-ticket-date {
    flex-shrink: 0; width: 5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.25rem 0.5rem; gap: 0.125rem;
    position: relative;
  }
  .ev-appt-ticket-date::after {
    content: '';
    position: absolute; right: 0; top: 1rem; bottom: 1rem;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--ev-border-light) 0, var(--ev-border-light) 4px, transparent 4px, transparent 8px);
  }
  .ev-appt-ticket-month {
    font-size: 0.625rem; font-weight: 800; letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .ev-appt-ticket-day {
    font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  }
  .ev-appt-ticket-weekday {
    font-size: 0.625rem; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; opacity: 0.7;
  }
  .ev-appt-ticket-body {
    flex: 1; min-width: 0; padding: 1rem 1.25rem;
    display: flex; flex-direction: column; justify-content: center; gap: 0.375rem;
  }
  .ev-appt-ticket-title {
    font-size: 1rem; font-weight: 700; color: var(--ev-ink); letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  }
  .ev-appt-ticket-meta {
    display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
    font-size: 0.8125rem; color: var(--ev-ink-fg-muted);
  }
  .ev-appt-ticket-meta-item {
    display: flex; align-items: center; gap: 0.3rem;
  }
  .ev-appt-ticket-actions {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
    justify-content: center; gap: 0.375rem; padding: 1rem 1.25rem 1rem 0.5rem;
  }

  /* Status color schemes for tickets */
  .ev-appt-ticket--confirmed .ev-appt-ticket-date {
    background: oklch(0.97 0.05 155); color: oklch(0.40 0.18 155);
  }
  .ev-appt-ticket--pending .ev-appt-ticket-date {
    background: oklch(0.97 0.06 60); color: oklch(0.50 0.16 60);
  }
  .ev-appt-ticket--cancelled .ev-appt-ticket-date {
    background: oklch(0.96 0.02 20); color: oklch(0.55 0.08 20);
  }
  .ev-appt-ticket--confirmed { border-left: 3px solid oklch(0.52 0.18 155); }
  .ev-appt-ticket--pending   { border-left: 3px solid oklch(0.60 0.16 60); }
  .ev-appt-ticket--cancelled { border-left: 3px solid oklch(0.70 0.04 20); opacity: 0.75; }

  /* Booking confirmation ticket */
  .ev-booking-confirm-wrap {
    max-width: 26rem; margin: 0 auto;
    animation: ev-slide-up 0.4s ease;
  }
  .ev-booking-confirm-card {
    background: white; border-radius: 1.25rem;
    box-shadow: 0 4px 32px -4px oklch(0.15 0.03 260 / 0.14), 0 1px 3px oklch(0.15 0.03 260 / 0.06);
    overflow: hidden;
  }
  .ev-booking-confirm-hero {
    padding: 2rem 1.5rem 1.75rem; text-align: center; position: relative;
  }
  .ev-booking-confirm-icon {
    width: 4.5rem; height: 4.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
  }
  .ev-booking-confirm-title {
    font-size: 1.375rem; font-weight: 800; color: var(--ev-ink);
    letter-spacing: -0.025em; margin: 0;
  }
  .ev-booking-confirm-ref {
    font-size: 0.75rem; color: var(--ev-ink-fg-muted);
    margin: 0.375rem 0 0; font-family: ui-monospace, monospace; letter-spacing: 0.05em;
  }
  .ev-booking-confirm-perforation {
    display: flex; align-items: center; margin: 0 -1px;
  }
  .ev-booking-confirm-notch {
    width: 1.25rem; height: 2.5rem; background: #F2F2F0; flex-shrink: 0;
  }
  .ev-booking-confirm-notch--left  { border-radius: 0 1.25rem 1.25rem 0; }
  .ev-booking-confirm-notch--right { border-radius: 1.25rem 0 0 1.25rem; }
  .ev-booking-confirm-dash {
    flex: 1; border-top: 2px dashed var(--ev-border-light);
  }
  .ev-booking-confirm-date-hero {
    padding: 1.25rem 1.5rem; text-align: center; border-bottom: 1px solid var(--ev-border-light);
  }
  .ev-booking-confirm-date-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--ev-ink-fg-muted); margin-bottom: 0.25rem;
  }
  .ev-booking-confirm-date-big {
    font-size: 1.625rem; font-weight: 900; color: var(--ev-ink);
    letter-spacing: -0.03em; line-height: 1.15;
  }
  .ev-booking-confirm-time {
    font-size: 1rem; font-weight: 600; margin-top: 0.25rem;
  }
  .ev-booking-confirm-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--ev-border-light);
  }
  .ev-booking-confirm-row:last-of-type { border-bottom: none; }
  .ev-booking-confirm-label {
    font-size: 0.8125rem; color: var(--ev-ink-fg-muted);
  }
  .ev-booking-confirm-value {
    font-size: 0.875rem; font-weight: 600; color: var(--ev-ink); text-align: right;
  }
  .ev-booking-confirm-actions {
    padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
    border-top: 1px solid var(--ev-border-light);
  }
  .ev-booking-confirm-btn-cancel {
    display: block; width: 100%; padding: 0.75rem;
    background: transparent; border: 1.5px solid var(--ev-danger); border-radius: 0.625rem;
    color: var(--ev-danger); font-size: 0.875rem; font-weight: 500;
    cursor: pointer; text-align: center; transition: background 0.15s;
  }
  .ev-booking-confirm-btn-cancel:hover { background: oklch(0.97 0.02 20); }
  .ev-booking-confirm-btn-secondary {
    display: block; padding: 0.75rem; text-align: center; text-decoration: none;
    background: var(--ev-surface); border-radius: 0.625rem;
    color: var(--ev-ink-fg-muted); font-size: 0.875rem; font-weight: 500;
    transition: background 0.15s;
  }
  .ev-booking-confirm-btn-secondary:hover { background: var(--ev-border-light); color: var(--ev-ink); }
}

/* ── Portal Dashboard Additions ──────────────────────────────
   Classes below support the portal dashboard view and are
   additive to the existing portal section above.
   ─────────────────────────────────────────────────────────── */

.ev-portal-content {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.ev-notice-body {
  flex: 1;
  min-width: 0;
}

.ev-notice-heading {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.ev-notice-sub {
  font-size: 0.8125rem;
  color: var(--ev-ink-fg-muted);
  margin-top: 0.125rem;
  line-height: 1.5;
}

.ev-notice-link {
  color: var(--ev-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease;
}

.ev-notice-link:hover {
  color: var(--ev-primary-hover);
}

.ev-stat-number--compact {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}

.ev-stat-number--muted {
  color: var(--ev-ink-fg-muted);
}

.ev-stat-number--danger {
  color: var(--ev-danger);
}

.ev-list-row-main {
  flex: 1;
  min-width: 0;
  margin-right: 1rem;
}

.ev-list-row-end {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.ev-btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.ev-appt-tickets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1.375rem;
}

.ev-workflow-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}

.ev-workflow-progress-wrap {
  margin-top: 0.5rem;
}

.ev-workflow-progress-wrap .ev-list-secondary {
  margin-top: 0.25rem;
}

/* ── Auth Pages ──────────────────────────────────────────────── */

.ev-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #FDFBF7;
  position: relative;
  overflow: hidden;
}

.ev-auth-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ev-auth-bg-mesa {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
}

.ev-auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.ev-auth-container.ev-auth-container--wide {
  max-width: 52rem;
}

.ev-auth-container--wide .ev-auth-card {
  padding: 2rem;
}

.ev-auth-container--wide .ev-auth-card h2 {
  text-align: left;
}

.ev-auth-container--wide .ev-auth-card .ev-auth-subtitle {
  text-align: left;
}

@media (max-width: 767px) {
  .ev-auth-container.ev-auth-container--wide {
    max-width: 26rem;
  }
  .ev-auth-container--wide .ev-auth-card h2,
  .ev-auth-container--wide .ev-auth-card .ev-auth-subtitle {
    text-align: center;
  }
}

.ev-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ev-auth-brand:hover {
  opacity: 0.85;
}

.ev-auth-logo {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 2px 8px oklch(0.46 0.28 270 / 0.15));
}

.ev-auth-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  color: #161029;
}

.ev-auth-card {
  width: 100%;
  background: white;
  border-radius: 1rem;
  border: 1px solid oklch(0.92 0.006 260);
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.04),
    0 4px 16px oklch(0 0 0 / 0.04),
    0 12px 40px oklch(0.46 0.28 270 / 0.04);
  padding: 2.25rem 2rem;
}

@media (min-width: 640px) {
  .ev-auth-card {
    padding: 2.5rem;
  }
}

.ev-auth-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #161029;
  text-align: center;
  margin: 0;
}

.ev-auth-card .ev-auth-subtitle {
  text-align: center;
  font-size: 0.9375rem;
  color: oklch(0.52 0 0);
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.ev-auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  font-size: 0.8125rem;
  color: oklch(0.58 0 0);
}

.ev-auth-divider::before,
.ev-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(0.92 0 0);
}

/* Auth form inputs */
.ev-auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ev-auth-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: oklch(0.35 0 0);
  letter-spacing: 0.01em;
}

.ev-auth-field input[type="text"],
.ev-auth-field input[type="email"],
.ev-auth-field input[type="password"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: #161029;
  background: #FDFBF7;
  border: 1.5px solid oklch(0.88 0.006 260);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ev-auth-field input:focus {
  border-color: oklch(0.55 0.22 260);
  box-shadow: 0 0 0 3px oklch(0.55 0.22 260 / 0.1);
  background: white;
}

.ev-auth-field input::placeholder {
  color: oklch(0.68 0 0);
}

.ev-auth-field .ev-auth-hint {
  font-size: 0.75rem;
  color: oklch(0.58 0 0);
  margin-top: 0.125rem;
}

/* Auth CTA button */
.ev-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: white;
  background: oklch(0.46 0.28 270);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 1px 3px oklch(0.46 0.28 270 / 0.25);
}

.ev-auth-submit:hover {
  background: oklch(0.41 0.28 270);
  box-shadow: 0 2px 8px oklch(0.46 0.28 270 / 0.3);
}

.ev-auth-submit:active {
  transform: scale(0.985);
}

/* Checkbox row */
.ev-auth-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ev-auth-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: oklch(0.46 0.28 270);
  border-radius: 0.25rem;
}

.ev-auth-checkbox label {
  font-size: 0.875rem;
  color: oklch(0.35 0 0);
}

/* Error box */
.ev-auth-errors {
  background: oklch(0.97 0.015 25);
  border: 1px solid oklch(0.90 0.04 25);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
}

.ev-auth-errors h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(0.45 0.15 25);
  margin: 0 0 0.375rem;
}

.ev-auth-errors ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.ev-auth-errors li {
  font-size: 0.8125rem;
  color: oklch(0.50 0.12 25);
  line-height: 1.5;
}

/* Footer links */
.ev-auth-footer {
  text-align: center;
}

.ev-auth-footer a {
  font-size: 0.8125rem;
  color: oklch(0.50 0.18 270);
  text-decoration: none;
  transition: color 0.15s;
}

.ev-auth-footer a:hover {
  color: oklch(0.42 0.28 270);
}

/* Product choice cards (signup) */
.ev-auth-product-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid oklch(0.90 0.006 260);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: white;
}

.ev-auth-product-card:hover {
  border-color: oklch(0.70 0.14 270);
  background: oklch(0.46 0.28 270 / 0.02);
}

.ev-auth-product-card:has(input:checked) {
  border-color: oklch(0.46 0.28 270);
  background: oklch(0.46 0.28 270 / 0.04);
}

.ev-auth-product-card input[type="radio"] {
  accent-color: oklch(0.46 0.28 270);
}

/* Inline link within auth card */
.ev-auth-link {
  font-size: 0.8125rem;
  color: oklch(0.50 0.18 270);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.ev-auth-link:hover {
  color: oklch(0.42 0.28 270);
}

/* Auth icon circle (used on verification/confirmation) */
.ev-auth-icon-circle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: oklch(0.46 0.28 270 / 0.08);
}

.ev-auth-icon-circle svg {
  width: 1.75rem;
  height: 1.75rem;
  stroke: oklch(0.46 0.28 270);
}

/* Auth info box (used on verification) */
.ev-auth-info-box {
  background: #FDFBF7;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid oklch(0.92 0.006 260);
}

.ev-auth-info-box strong {
  font-size: 0.8125rem;
  color: oklch(0.30 0 0);
}

.ev-auth-info-box ol {
  list-style: decimal inside;
  margin: 0.375rem 0 0;
  padding: 0;
}

.ev-auth-info-box li {
  font-size: 0.8125rem;
  color: oklch(0.45 0 0);
  line-height: 1.6;
}

/* Invite-only lockout */
.ev-auth-lockout {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ev-auth-lockout h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: #161029;
  margin: 0;
}

.ev-auth-lockout p {
  font-size: 0.9375rem;
  color: oklch(0.52 0 0);
  line-height: 1.55;
  margin: 0;
}

.ev-auth-accent-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6875rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: white;
  background: oklch(0.68 0.18 20);
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 1px 3px oklch(0.68 0.18 20 / 0.25);
}

.ev-auth-accent-btn:hover {
  background: oklch(0.62 0.18 20);
}

.ev-auth-accent-btn:active {
  transform: scale(0.985);
}