/* ============================================
   SendHEP Design System
   Based on PRD v4 - "Clinical Utilitarian"
   ============================================ */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* Primary (Brand & Action) */
  --color-primary: #2563EB;      /* blue-600 */
  --color-primary-hover: #1D4ED8; /* blue-700 */
  --color-primary-surface: #EFF6FF; /* blue-50 */
  
  /* Neutrals (Structure & Text) */
  --color-canvas: #F8FAFC;       /* slate-50 - App background */
  --color-surface: #FFFFFF;       /* white - Cards, modals */
  --color-text-primary: #0F172A;  /* slate-900 - Headings */
  --color-text-secondary: #64748B; /* slate-500 - Metadata */
  --color-text-muted: #94A3B8;    /* slate-400 - Disabled */
  --color-border: #E2E8F0;        /* slate-200 - Dividers */
  --color-border-strong: #CBD5E1; /* slate-300 - Input borders */
  
  /* Semantic (Feedback) */
  --color-success: #059669;       /* emerald-600 */
  --color-success-surface: #ECFDF5; /* emerald-50 */
  --color-error: #DC2626;         /* red-600 */
  --color-error-surface: #FEF2F2; /* red-50 */
  --color-warning: #D97706;       /* amber-600 */
  --color-warning-surface: #FFFBEB; /* amber-50 */
  
  /* Typography */
  --font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-size-h1: 1.5rem;    /* 24px */
  --font-size-h2: 1.25rem;   /* 20px */
  --font-size-h3: 1.0625rem; /* 17px */
  --font-size-body: 1rem;    /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-caption: 0.75rem; /* 12px */
  
  --line-height-h1: 1.2;
  --line-height-h2: 1.3;
  --line-height-h3: 1.4;
  --line-height-body: 1.5;
  --line-height-small: 1.4;
  
  /* Spacing (8pt grid) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px - tight */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px - default/page padding */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px - section */
  --space-8: 2rem;     /* 32px - loose */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  
  /* Layout */
  --header-height: 56px;
  --bottom-nav-height: 60px;
  --sidebar-width: 240px;
  --max-content-width: 1280px;
  --max-form-width: 480px;
  
  /* Radius */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  
  /* Touch target */
  --touch-target: 44px;
}

/* ============================================
   Base Styles
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Typography
   ============================================ */
h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: 600;
  line-height: var(--line-height-h1);
  color: var(--color-text-primary);
  margin: 0;
}

h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: var(--line-height-h2);
  color: var(--color-text-primary);
  margin: 0;
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
  line-height: var(--line-height-h3);
  color: var(--color-text-primary);
  margin: 0;
}

.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.text-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.text-caption {
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: var(--line-height-small);
}

.text-secondary {
  color: var(--color-text-secondary);
}

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

.text-primary {
  color: var(--color-primary);
}

.text-error {
  color: var(--color-error);
}

.text-success {
  color: var(--color-success);
}

/* ============================================
   App Layout
   ============================================ */
.app-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Mobile: bottom nav */
.app-main {
  flex: 1;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* Desktop: sidebar layout */
@media (min-width: 1024px) {
  .app-container {
    flex-direction: row;
  }
  
  .app-main {
    flex: 1;
    padding-bottom: 0;
    margin-left: var(--sidebar-width);
  }
  
  .bottom-nav {
    display: none;
  }
  
  .desktop-sidebar {
    display: flex;
  }
}

/* Content container with max-width */
.content-container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .content-container {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .content-container {
    padding: var(--space-8);
  }
}

/* Form container (narrower) */
.form-container {
  width: 100%;
  max-width: var(--max-form-width);
  margin: 0 auto;
  padding: var(--space-4);
}

/* ============================================
   Desktop Sidebar Navigation
   ============================================ */
.desktop-sidebar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  flex-direction: column;
  z-index: 40;
}

.sidebar-header {
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-primary);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sidebar-nav-item:hover {
  background: var(--color-canvas);
  color: var(--color-text-primary);
}

.sidebar-nav-item.active {
  background: var(--color-primary-surface);
  color: var(--color-primary);
}

.sidebar-nav-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ============================================
   Bottom Navigation (Mobile)
   ============================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  z-index: 40;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: var(--bottom-nav-height);
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-caption);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
  min-width: var(--touch-target);
}

.nav-item:active {
  background: var(--color-canvas);
}

.nav-item.active {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-item svg {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-1);
}

/* ============================================
   Header
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-content {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--space-4);
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.header-back,
.header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.header-back:hover,
.header-action:hover {
  background: var(--color-canvas);
  color: var(--color-text-primary);
}

.header-action {
  color: var(--color-primary);
  font-weight: 600;
}

.header-title {
  flex: 1;
  font-size: var(--font-size-h3);
  font-weight: 600;
  text-align: center;
  margin: 0 var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-back + .header-title {
  margin-left: calc(-1 * var(--touch-target));
}

/* ============================================
   Buttons (PRD Component Library)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-6);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Primary: bg-blue-600 text-white rounded-lg font-semibold h-12 w-full shadow-sm active:bg-blue-700 */
.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(1px);
}

/* Secondary: bg-white border border-slate-300 text-slate-700 rounded-lg font-medium h-12 w-full active:bg-slate-50 */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  font-weight: 500;
}

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

.btn-secondary:active:not(:disabled) {
  background: var(--color-canvas);
}

/* Ghost: text-slate-500 font-medium px-4 py-2 active:text-slate-800 */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 500;
  height: auto;
  padding: var(--space-2) var(--space-4);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--color-text-primary);
  background: var(--color-canvas);
}

/* Danger */
.btn-danger {
  background: var(--color-error);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #B91C1C;
}

/* Size variants */
.btn-sm {
  height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-small);
}

.btn-lg {
  height: 56px;
  padding: 0 var(--space-8);
  font-size: 1.125rem;
}

.btn-block {
  width: 100%;
}

/* Icon-only button */
.btn-icon {
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border-radius: var(--radius-md);
}

/* ============================================
   Cards (PRD Component Library)
   ============================================ */
/* bg-white border border-slate-200 rounded-xl shadow-sm active:bg-slate-50 */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.card-interactive {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.card-interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.card-interactive:active {
  background: var(--color-canvas);
}

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

@media (min-width: 768px) {
  .card-body {
    padding: var(--space-6);
  }
}

/* ============================================
   Form Elements (PRD Component Library)
   ============================================ */
/* h-12 px-4 bg-white border border-slate-300 rounded-lg text-base focus:border-blue-500 focus:ring-2 focus:ring-blue-100 */
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-surface);
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:disabled {
  background: var(--color-canvas);
  cursor: not-allowed;
}

.textarea {
  height: auto;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--color-text-primary);
}

.form-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.form-error {
  margin-top: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-error);
}

/* ============================================
   Search Bar
   ============================================ */
.search-bar {
  position: relative;
}

.search-bar .input {
  padding-left: 44px;
}

.search-bar-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ============================================
   Filter Chips
   ============================================ */
.filter-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: var(--color-border-strong);
}

.filter-chip.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ============================================
   Tab Bar
   ============================================ */
.tab-bar {
  display: flex;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab-item:hover {
  color: var(--color-text-primary);
}

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

/* ============================================
   Exercise Card
   ============================================ */
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .exercise-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

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

@media (min-width: 1280px) {
  .exercise-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.exercise-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.exercise-card-image {
  aspect-ratio: 1;
  background: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.exercise-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.exercise-card-body {
  padding: var(--space-3);
}

.exercise-card-title {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exercise-card-meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

/* ============================================
   Pack Card
   ============================================ */
.pack-grid {
  display: grid;
  gap: var(--space-4);
}

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

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

.pack-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.pack-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-surface);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}

.pack-card-icon svg {
  width: 24px;
  height: 24px;
}

.pack-card-content {
  flex: 1;
  min-width: 0;
}

.pack-card-title {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.pack-card-description {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pack-card-meta {
  margin-top: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ============================================
   Program Card (History)
   ============================================ */
.program-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.program-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.program-card-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.program-card-content {
  flex: 1;
  min-width: 0;
}

.program-card-title {
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-card-meta {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.program-card-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* ============================================
   Builder Exercise Item
   ============================================ */
.builder-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.builder-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.builder-item-drag {
  flex-shrink: 0;
  width: 24px;
  color: var(--color-text-muted);
  cursor: grab;
}

.builder-item-drag:active {
  cursor: grabbing;
}

.builder-item-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  overflow: hidden;
}

.builder-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.builder-item-content {
  flex: 1;
  min-width: 0;
}

.builder-item-title {
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-item-params {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.builder-item-actions {
  display: flex;
  gap: var(--space-1);
}

.builder-item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.builder-item-action:hover {
  background: var(--color-canvas);
  color: var(--color-text-primary);
}

.builder-item-action.danger:hover {
  background: var(--color-error-surface);
  color: var(--color-error);
}

/* ============================================
   Badges
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-caption);
  font-weight: 500;
  border-radius: 9999px;
}

.badge-primary {
  background: var(--color-primary-surface);
  color: var(--color-primary);
}

.badge-success {
  background: var(--color-success-surface);
  color: var(--color-success);
}

.badge-error {
  background: var(--color-error-surface);
  color: var(--color-error);
}

.badge-warning {
  background: var(--color-warning-surface);
  color: var(--color-warning);
}

.badge-neutral {
  background: var(--color-canvas);
  color: var(--color-text-secondary);
}

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

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.empty-state-title {
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.empty-state-description {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6) 0;
  max-width: 300px;
}

/* ============================================
   Offline Banner (PRD: amber-100 bg, amber-800 text)
   ============================================ */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: #FEF3C7; /* amber-100 */
  color: #92400E; /* amber-800 */
  font-size: var(--font-size-small);
  font-weight: 500;
}

.offline-banner.hidden {
  display: none;
}

.offline-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom, 0px));
  left: var(--space-4);
  right: var(--space-4);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .toast-container {
    bottom: var(--space-6);
    left: auto;
    right: var(--space-6);
    width: 360px;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-text-primary);
  color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in 0.3s ease;
}

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

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

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

.toast svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
  font-size: var(--font-size-small);
  font-weight: 500;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Modal
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.2s ease;
}

@media (min-width: 640px) {
  .modal-overlay {
    align-items: center;
  }
}

.modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  animation: slide-up 0.3s ease;
}

@media (min-width: 640px) {
  .modal {
    border-radius: var(--radius-xl);
    margin: var(--space-4);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-size: var(--font-size-h3);
  font-weight: 600;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  margin: calc(-1 * var(--space-2));
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-canvas);
}

.modal-body {
  padding: var(--space-4);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.modal-footer .btn {
  flex: 1;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ============================================
   Page Sections
   ============================================ */
.page-section {
  margin-bottom: var(--space-8);
}

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

.section-title {
  font-size: var(--font-size-h2);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.section-action {
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}

/* ============================================
   Quick Actions Grid
   ============================================ */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .quick-actions {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-action-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.quick-action-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  background: var(--color-primary-surface);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}

.quick-action-icon svg {
  width: 24px;
  height: 24px;
}

.quick-action-label {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ============================================
   Success Screen (Confirmation)
   ============================================ */
.success-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
}

.success-icon {
  width: 80px;
  height: 80px;
  margin: var(--space-8) auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success-surface);
  border-radius: 50%;
  color: var(--color-success);
}

.success-icon svg {
  width: 40px;
  height: 40px;
}

.success-title {
  font-size: var(--font-size-h1);
  font-weight: 600;
  text-align: center;
  margin: 0 0 var(--space-2) 0;
}

.success-subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 var(--space-8) 0;
}

.success-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================
   Patient View (Public)
   ============================================ */
.patient-view {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-canvas);
}

.patient-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
}

.patient-header-content {
  max-width: 640px;
  margin: 0 auto;
}

.patient-content {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
}

.patient-exercise-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.patient-exercise-image {
  aspect-ratio: 1;
  background: var(--color-canvas);
}

.patient-exercise-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.patient-exercise-body {
  padding: var(--space-4);
}

.patient-exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}

.patient-exercise-title {
  font-size: var(--font-size-h3);
  font-weight: 600;
  margin: 0;
}

.patient-exercise-number {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.patient-exercise-description {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
  line-height: var(--line-height-body);
}

.patient-params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.patient-param {
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-align: center;
}

.patient-param-label {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.patient-param-value {
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--color-text-primary);
}

.patient-disclaimer {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  line-height: var(--line-height-small);
}

.patient-footer {
  text-align: center;
  padding: var(--space-6);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ============================================
   Utility Classes
   ============================================ */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.w-full {
  width: 100%;
}

.mt-auto {
  margin-top: auto;
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.p-4 {
  padding: var(--space-4);
}

.p-6 {
  padding: var(--space-6);
}

.text-center {
  text-align: center;
}

/* Safe area padding */
.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}