/**
 * HEALIST APP COMPONENTS - Design 4 Prestige
 * ===========================================
 * Extracted inline styles from App.jsx
 * Uses tokens from healist-tokens.css
 * 
 * FILE: /frontend/public/css/healist-app-components.css
 * ADD TO index.html after healist-components.css
 */

/* ============================================
   DATA TABLES - Device Data, Reports, History
   ============================================ */

/* Table Container */
.data-table-container {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

/* Base Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* Table Header Row */
.data-table thead tr {
  background-color: var(--brand-surface-elevated);
}

/* Table Header Cells */
.data-table th {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 2px solid var(--brand-border);
  font-weight: var(--font-semibold);
  color: var(--brand-text);
  white-space: nowrap;
}

.data-table th.text-right {
  text-align: right;
}

.data-table th.text-center {
  text-align: center;
}

/* Table Body Rows */
.data-table tbody tr {
  border-bottom: 1px solid var(--brand-border);
  transition: background-color var(--transition-fast);
}

.data-table tbody tr:hover {
  background-color: var(--brand-surface-elevated);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

/* Table Body Cells */
.data-table td {
  padding: var(--space-3);
  color: var(--brand-text);
  vertical-align: middle;
}

.data-table td.text-right {
  text-align: right;
}

.data-table td.text-center {
  text-align: center;
}

/* Table with max-width constraint */
.data-table-constrained {
  max-width: 200px;
}

/* Empty State in Tables */
.data-table-empty {
  text-align: center;
  padding: var(--space-10);
  color: var(--brand-text-muted);
  font-style: italic;
}


/* ============================================
   MODAL COMPONENTS
   ============================================ */

/* Modal System — All modal layout handled by healist-modals.css
   See .modal-overlay, .modal-content, .modal-header, .modal-body, .modal-footer */

.modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--brand-text);
  margin: 0 0 var(--space-3) 0;
}

.modal-title-danger {
  color: var(--color-error);
}

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

.modal-subtitle {
  color: var(--brand-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Modal Body */
.modal-body {
  margin-bottom: var(--space-6);
}

/* Modal Footer */
.modal-footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

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

.modal-footer-spread {
  justify-content: space-between;
}


/* ============================================
   FORM ELEMENTS - Extended
   ============================================ */

/* Checkbox Label Row */
.checkbox-row {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-2) 0;
}

.checkbox-row input[type="checkbox"] {
  margin-right: var(--space-3);
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
}

.checkbox-row span {
  font-size: var(--text-base);
  color: var(--brand-text);
}

/* Checkbox disabled state */
.checkbox-row-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-row-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

/* Radio Label Row */
.radio-row {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  padding: var(--space-2) 0;
}

.radio-row input[type="radio"] {
  margin-right: var(--space-3);
  margin-top: 2px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
}

/* Checkbox/Radio Column */
.checkbox-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Form Section */
.form-section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--brand-border);
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
  margin-bottom: var(--space-4);
}

/* Input with icon */
.input-with-icon {
  position: relative;
}

.input-with-icon input {
  padding-left: 44px;
}

.input-with-icon .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-text-muted);
}

.max-w-200 {
    max-width: 200px;
}

.w-full {
    width: 100%;
}

.z-1001 { z-index: 1001; }


/* ============================================
   CARD VARIANTS
   ============================================ */

/* Info Card */
.info-card {
  padding: var(--space-4);
  background: var(--color-info-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.info-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-info);
  line-height: var(--leading-relaxed);
}

/* Warning Card */
.warning-card {
  padding: var(--space-4);
  background: var(--color-warning-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.warning-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-warning);
  line-height: var(--leading-relaxed);
}

/* Success Card */
.success-card {
  padding: var(--space-4);
  background: var(--color-success-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.success-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-success);
  line-height: var(--leading-relaxed);
}

/* Empty State Card */
.empty-state-card {
  text-align: center;
  padding: 40px 24px;
  background: var(--brand-surface-elevated);
  border-radius: 12px;
  border: 2px dashed var(--brand-border);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-text);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  color: var(--brand-text-muted);
  font-size: var(--text-sm);
}

/* Placeholder Card */
.placeholder-card {
  padding: var(--space-5);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--brand-text-muted);
}


/* ============================================
   DEVICE INTEGRATION COMPONENTS
   ============================================ */

/* Device Card — D4S Sub-Card */
.device-item {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  margin: 0 16px 12px 16px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
  transition: box-shadow 0.2s ease;
}

.device-item:hover {
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.10);
}

.device-item:last-child {
  margin-bottom: 16px;
}

/* Device Info Row */
.device-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
}

.device-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-primary-dark);
}

.device-model {
  display: block;
  font-size: var(--text-sm);
  color: var(--brand-text);
  margin-top: 2px;
}

.device-serial {
  display: block;
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
  margin-top: 2px;
}

/* Device Status */
.device-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.device-status-connected {
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: var(--font-medium);
}

.device-status-disconnected {
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: var(--font-medium);
}

.device-last-sync {
  font-size: 11px;
  color: var(--brand-text-muted);
}

/* Device Actions Row */
.device-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--brand-border);
}

/* Device Warning/Info Boxes */
.device-warning-fitbit {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--brand-secondary);
}

.device-warning-fitbit-content {
  font-size: var(--text-xs);
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.device-info-garmin {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-info);
}

.device-info-garmin-content {
  font-size: var(--text-xs);
  color: var(--brand-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.device-info-garmin-content ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
  line-height: var(--leading-relaxed);
}

.device-info-apple {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-info);
}

.device-info-apple-content {
  font-size: var(--text-xs);
  color: var(--brand-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.device-info-apple-content ol {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
  line-height: var(--leading-relaxed);
}

.device-info-note {
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--brand-text-muted);
}


/* ============================================
   SETTINGS PANELS
   ============================================ */

/* Settings Section */
.settings-section {
  margin-bottom: var(--space-6);
}

.settings-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--brand-secondary);
}

/* Settings Toggle Row */
.settings-toggle {
  margin-bottom: var(--space-5);
}

.settings-toggle label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.settings-toggle-text {
  font-weight: var(--font-medium);
  color: var(--brand-text);
}

.settings-toggle-desc {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-top: var(--space-2);
  margin-left: 30px;
}

/* Settings Slider */
.settings-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.settings-slider-row input[type="range"] {
  flex: 1;
  height: 6px;
  accent-color: var(--brand-primary);
}

.settings-slider-value {
  min-width: 60px;
  text-align: right;
  font-weight: var(--font-semibold);
  color: var(--brand-primary);
}

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

.settings-slider-label {
  font-weight: var(--font-medium);
  color: var(--brand-text);
}

.settings-slider-recommended {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

/* Settings Time Input */
.settings-time-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.settings-time-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.settings-time-label {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  min-width: 80px;
}

/* Settings Grid */
.settings-grid {
  display: grid;
  gap: var(--space-4);
}

.settings-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .settings-grid-2col {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   PROGRESS INDICATORS
   ============================================ */

/* Progress Bar Container */
.progress-container {
  margin-bottom: var(--space-5);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.progress-bar {
  height: 8px;
  background: var(--brand-surface-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-fill-gold {
  background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-secondary-light) 100%);
}

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

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

/* Circular Progress */
.progress-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-circle-text {
  position: absolute;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--brand-primary);
}


/* ============================================
   REPORT / PROVIDER COMPONENTS
   ============================================ */

/* Report Item */
.report-item {
  padding: var(--space-4);
  border-bottom: 1px solid var(--brand-border);
}

.report-item:last-child {
  border-bottom: none;
}

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

.report-title {
  font-weight: var(--font-semibold);
  color: var(--brand-text);
}

.report-date {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.report-status {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
}

.report-status-pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.report-status-viewed {
  background: var(--color-info-light);
  color: var(--color-info);
}

.report-status-responded {
  background: var(--color-success-light);
  color: var(--color-success);
}

/* Provider Card */
.provider-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.provider-info h4 {
  font-weight: var(--font-semibold);
  color: var(--brand-text);
  margin: 0 0 var(--space-1) 0;
}

.provider-info p {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin: 0;
}

.provider-actions {
  display: flex;
  gap: var(--space-2);
}


/* ============================================
   NUTRITION / MEAL COMPONENTS
   ============================================ */

/* Macro Grid */
.macro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.macro-grid-4col {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
  .macro-grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.macro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius);
}

.macro-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--brand-primary);
}

.macro-label {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Meal Time Card */
.meal-time-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.meal-time-icon {
  font-size: var(--text-xl);
}

.meal-time-label {
  font-weight: var(--font-medium);
  color: var(--brand-text);
  text-transform: capitalize;
}

.meal-time-input {
  margin-left: auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
}


/* ============================================
   TAB NAVIGATION
   ============================================ */

/* Sub-Tab Navigation */
.sub-tab-nav {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--brand-border);
}

.sub-tab-btn {
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--brand-text-muted);
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition);
}

.sub-tab-btn:hover {
  background: var(--brand-surface-elevated);
  color: var(--brand-text);
}

.sub-tab-btn.active {
  background: var(--brand-primary);
  color: white;
}

/* Purple variant (for Fitness tab) */
.sub-tab-btn-purple.active {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
}


/* ============================================
   TYPOGRAPHY UTILITIES (Extended)
   ============================================ */

/* Headings in cards/modals */
.section-heading {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
  margin: 0 0 var(--space-4) 0;
}

.section-subheading {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--brand-text);
  margin: 0 0 var(--space-3) 0;
}

/* Muted/Helper Text */
.text-helper {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  line-height: var(--leading-relaxed);
}

.text-helper-xs {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
}

.text-placeholder {
  color: var(--brand-text-muted);
  font-style: italic;
}

/* Value Display */
.value-display {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--brand-primary);
}

.value-unit {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--brand-text-muted);
  margin-left: var(--space-1);
}


/* ============================================
   LAYOUT UTILITIES (Extended)
   ============================================ */

/* Flex Row Variants */
.flex-row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-row-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-row-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-row-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Flex Column Variants */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

/* Content Grid */
.content-grid {
  display: grid;
  gap: var(--space-4);
}

.content-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

.content-grid-3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .content-grid-2col,
  .content-grid-3col {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   SPACING UTILITIES (Extended)
   ============================================ */

.mt-1 { margin-top: var(--space-1); }
.mt-3 { margin-top: var(--space-3); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

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

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }


/* ============================================
   DIVIDERS
   ============================================ */

.divider-subtle {
  border: none;
  border-top: 1px solid var(--brand-border);
  margin: var(--space-5) 0;
}

.divider-gold {
  border: none;
  border-top: 2px solid var(--brand-secondary);
  margin: var(--space-5) 0;
}

.border-t { border-top: 1px solid var(--brand-border); }
.border-b { border-bottom: 1px solid var(--brand-border); }


/* ============================================
   PUSH NOTIFICATION STATUS
   ============================================ */

.push-status-box {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
}

.push-status-box--active {
  background: var(--color-success-light);
  border: 1px solid var(--color-success);
}

.push-status-box--inactive {
  background: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
}

.push-status-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.push-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.push-status-indicator--active {
  background: var(--color-success);
}

.push-status-indicator--inactive {
  background: var(--brand-text-muted);
}

.push-status-title {
  font-weight: var(--font-medium);
}

.push-status-title--active {
  color: var(--color-success);
}

.push-status-title--inactive {
  color: var(--brand-text-muted);
}

.push-status-message {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.push-status-message--error {
  color: var(--color-error);
}

.push-status-message--info {
  color: var(--brand-text-muted);
}

.push-status-timezone {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-bottom: var(--space-3);
}

.push-btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.push-enable-btn {
  padding: var(--space-3) var(--space-5);
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition);
}

.push-enable-btn:hover {
  background: var(--brand-primary-dark);
}

.push-test-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--brand-surface);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.push-test-btn:hover {
  background: var(--brand-primary);
  color: white;
}

.push-disable-btn {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.push-disable-btn:hover {
  background: var(--color-error-light);
}


/* ============================================
   HYDRATION SETTINGS
   ============================================ */

.hydration-settings-content {
  padding: var(--space-5);
}

.hydration-alert-error {
  padding: var(--space-4);
  background: var(--color-error-light);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  color: var(--color-error);
  margin-bottom: var(--space-4);
}

.hydration-alert-success {
  padding: var(--space-4);
  background: var(--color-success-light);
  border: 1px solid var(--color-success);
  border-radius: var(--radius);
  color: var(--color-success);
  margin-bottom: var(--space-4);
}

.hydration-form-section {
  margin-bottom: var(--space-6);
}

.hydration-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.hydration-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-primary);
}

.hydration-toggle-text {
  font-weight: var(--font-medium);
  color: var(--brand-text);
}

.hydration-toggle-description {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-top: var(--space-2);
  margin-left: 32px;
}

.hydration-form-label {
  display: block;
  font-weight: var(--font-medium);
  color: var(--brand-text);
  margin-bottom: var(--space-2);
}

.hydration-goal-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hydration-goal-slider {
  flex: 1;
  height: 6px;
  accent-color: var(--brand-primary);
}

.hydration-goal-display {
  min-width: 60px;
  text-align: right;
  font-weight: var(--font-bold);
  color: var(--brand-primary);
  font-size: var(--text-lg);
}

.hydration-hint-text {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-top: var(--space-2);
}

.hydration-times-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hydration-time-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hydration-time-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: var(--text-base);
}

.hydration-time-label {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  min-width: 80px;
}

.hydration-time-remove-btn {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  cursor: pointer;
}

.hydration-time-remove-btn:hover {
  background: var(--color-error-light);
}

.hydration-add-time-btn {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--brand-primary);
  border: 1px dashed var(--brand-primary);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  margin-top: var(--space-3);
}

.hydration-add-time-btn:hover {
  background: var(--brand-surface-elevated);
}

.hydration-timezone-select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  background: var(--brand-surface);
}

.hydration-save-btn {
  width: 100%;
  padding: var(--space-4);
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  margin-top: var(--space-6);
  transition: background var(--transition);
}

.hydration-save-btn:hover {
  background: var(--brand-primary-dark);
}

.hydration-save-btn:disabled {
  background: var(--brand-text-muted);
  cursor: not-allowed;
}


/* ============================================
   MEAL SETTINGS
   ============================================ */

.meal-settings-card {
  margin-top: var(--space-6);
}

.meal-settings-content {
  padding: var(--space-5);
}

.meal-settings-toggle {
  margin-bottom: var(--space-5);
}

.meal-settings-toggle label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.meal-settings-toggle-label {
  font-weight: var(--font-medium);
  color: var(--brand-text);
}

.meal-settings-toggle-desc {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-top: var(--space-2);
  margin-left: 30px;
}

.meal-times-section {
  margin-bottom: var(--space-6);
}

.meal-times-section > label {
  display: block;
  font-weight: var(--font-medium);
  color: var(--brand-text);
  margin-bottom: var(--space-3);
}

.meal-times-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.meal-time-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius);
}

.meal-time-label {
  font-weight: var(--font-medium);
  color: var(--brand-text);
  text-transform: capitalize;
  min-width: 120px;
}

.meal-time-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  margin-left: auto;
}

.macro-slider-section {
  margin-bottom: var(--space-5);
}

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

.macro-slider-label {
  font-weight: var(--font-medium);
  color: var(--brand-text);
}

.macro-slider-recommended {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.macro-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.macro-slider-row input[type="range"] {
  flex: 1;
  height: 6px;
  accent-color: var(--brand-primary);
}

.macro-slider-value {
  min-width: 80px;
  text-align: right;
  font-weight: var(--font-bold);
  color: var(--brand-primary);
}

.meal-settings-save-btn {
  width: 100%;
  padding: var(--space-4);
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  margin-top: var(--space-4);
  transition: background var(--transition);
}

.meal-settings-save-btn:hover {
  background: var(--brand-primary-dark);
}

.meal-settings-save-btn:disabled {
  background: var(--brand-text-muted);
  cursor: not-allowed;
}


/* ============================================
   PAYMENT PLACEHOLDER
   ============================================ */

.payment-placeholder {
  padding: var(--space-5);
  text-align: center;
  color: var(--brand-text-muted);
}

.payment-placeholder p {
  margin-bottom: var(--space-3);
}

.payment-placeholder ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.payment-placeholder li {
  padding: var(--space-2) 0;
}

/* ============================================================ */
/* EXTRACTED INLINE STYLES - Auto-generated */
/* ============================================================ */

/* --- AIAssistantHub.jsx extracted styles --- */


.aih-header {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.aih-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: inherit;
}

.aih-closeButton {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.aih-closeButton:hover {
  background: rgba(255,255,255,0.3);
}

.aih-welcomeSection {
  padding: 24px 32px;
  background-color: var(--brand-surface-elevated);
  border-bottom: 1px solid var(--brand-border);
}

.aih-welcomeMessage {
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 16px;
}

.aih-toolGrid {
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.aih-toolCard {
  padding: 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  background: var(--brand-surface);
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
}

.aih-toolCard--highlight {
  border-color: var(--brand-primary);
  background-color: var(--brand-surface-elevated);
}

.aih-toolCard:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 16px rgba(30, 58, 95, 0.15);
  transform: translateY(-2px);
}

.aih-newBadge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 4px 10px;
  background-color: var(--brand-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
}

.aih-toolIcon {
  font-size: 40px;
  margin-bottom: 12px;
}

.aih-toolTitle {
  margin: 0 0 8px 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-primary-dark);
}

.aih-toolDescription {
  margin: 0;
  font-size: 14px;
  color: var(--brand-text-muted);
  line-height: 1.5;
}

.aih-startButton {
  margin-top: 16px;
  padding: 10px 16px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}

.aih-footerTip {
  padding: 20px 32px;
  background-color: var(--color-warning-light);
  border-top: 1px solid var(--color-warning-light);
  border-radius: 0 0 16px 16px;
}

.aih-tipText {
  margin: 0;
  font-size: 14px;
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* .aih-container — no longer a modal overlay, now inline page */



/* --- AuthDebugComponent.jsx extracted styles --- */


.adc-runButton {
  margin-bottom: 16px;
  padding: 8px 16px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 4px;
}

.adc-tokenSection {
  font-size: 14px;
  font-family: var(--font-mono);
}

.adc-tokenInfo {
  margin-bottom: 12px;
}

.adc-tokenDetails {
  padding-left: 16px;
}

.adc-authSection {
  margin-bottom: 12px;
}

.adc-authDetails {
  padding-left: 16px;
}

.adc-authError {
  color: var(--color-error);
}

.adc-directAuthSection {
  margin-bottom: 12px;
}

.adc-directAuthDetails {
  padding-left: 16px;
}

.adc-directAuthError {
  color: var(--color-error);
}

.adc-personalHistorySection {
  margin-bottom: 12px;
}

.adc-personalHistoryDetails {
  padding-left: 16px;
}

.adc-personalHistoryError {
  color: var(--color-error);
}

.adc-parentalHistorySection {
  margin-bottom: 12px;
}

.adc-parentalHistoryDetails {
  padding-left: 16px;
}

.adc-parentalHistoryError {
  color: var(--color-error);
}

.adc-container {
  background-color: var(--brand-surface-elevated);
  padding: 20px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  margin-bottom: 20px;
}

.adc-panelTitle {
  margin-bottom: 16px;
  color: var(--brand-text-muted);
}



/* --- ExerciseLibraryBrowser.jsx extracted styles --- */


.elb-container {
  padding: 0;
}

.elb-filterBar {
  background-color: var(--brand-surface-elevated);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.elb-filterControls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.elb-searchLabel {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-searchInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.elb-equipmentLabel {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-equipmentSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.elb-difficultyLabel {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-difficultySelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.elb-muscleLabel {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-muscleSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.elb-clearButton {
  padding: 10px 16px;
  background-color: var(--brand-text-muted);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.elb-resultsCount {
  margin-top: 12px;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.elb-filteredTag {
  margin-left: 8px;
  color: var(--brand-primary);
}

.elb-loadingContainer {
  text-align: center;
  padding: 60px 20px;
  color: var(--brand-text-muted);
}

.elb-loadingSpinner {
  font-size: 32px;
  margin-bottom: 12px;
}

.elb-noResultsContainer {
  text-align: center;
  padding: 60px 20px;
  color: var(--brand-text-muted);
}

.elb-noResultsIcon {
  font-size: 32px;
  margin-bottom: 12px;
}

.elb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.elb-exerciseCard {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.elb-exerciseCard:hover {
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.10);
  transform: translateY(-2px);
}

.elb-cardHeader {
  padding: 16px;
  border-bottom: 1px solid var(--brand-surface-elevated);
}

.elb-cardHeaderTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.elb-categoryIcon {
  font-size: 24px;
}

.elb-exerciseName {
  margin: 0 0 4px 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-primary-dark);
  line-height: 1.3;
}

.elb-equipmentCategory {
  margin: 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.elb-cardBody {
  padding: 12px 16px;
}

.elb-muscleText {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.elb-demoInfo {
  margin: 0 0 12px 0;
  font-size: 11px;
  color: var(--brand-text-placeholder);
}

.elb-watchVideoButton {
  width: 100%;
  padding: 10px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.elb-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 16px;
}

.elb-prevButton {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}

.elb-pageIndicator {
  padding: 8px 16px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.elb-nextButton {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}

.elb-videoModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.elb-videoModalContent {
  background-color: var(--brand-surface);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.elb-videoModalHeader {
  padding: 16px 20px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.elb-videoModalTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.elb-videoModalSubtitle {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.elb-videoModalCloseButton {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-text-muted);
  padding: 0 8px;
}

.elb-videoPlayerContainer {
  padding: 20px;
  background-color: var(--brand-text);
}

.elb-videoElement {
  width: 100%;
  max-height: 60vh;
  border-radius: 8px;
}

.elb-videoTipsSection {
  padding: 16px 20px;
  background-color: var(--brand-surface-elevated);
  border-top: 1px solid var(--brand-border);
}

.elb-videoTipsHeading {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}

.elb-videoTipsText {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.elb-detailModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 20px;
}

.elb-detailModalContent {
  background-color: var(--brand-surface);
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}

.elb-detailModalHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.elb-detailHeaderTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.elb-detailIcon {
  font-size: 32px;
}

.elb-detailExerciseName {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.elb-detailHeaderMeta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.elb-categoryTag {
  padding: 4px 10px;
  background-color: var(--color-info-light);
  color: var(--brand-primary);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.elb-exerciseTypeTag {
  padding: 4px 10px;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.elb-detailCloseButton {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-text-muted);
}

.elb-detailContent {
  padding: 24px;
}

.elb-musclesSection {
  margin-bottom: 20px;
}

.elb-musclesHeading {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-primaryMuscles {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.elb-secondaryMuscles {
  margin: 0;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.elb-movementSection {
  margin-bottom: 20px;
}

.elb-movementHeading {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-movementText {
  margin: 0;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.elb-instructionsSection {
  margin-bottom: 20px;
}

.elb-instructionsHeading {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-instructionsText {
  margin: 0;
  font-size: 14px;
  color: var(--brand-text-muted);
  line-height: 1.6;
}

.elb-formCuesSection {
  margin-bottom: 20px;
}

.elb-formCuesHeading {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.elb-formCuesList {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.elb-formCueItem {
  margin-bottom: 4px;
}

.elb-tipsSection {
  margin-bottom: 20px;
  padding: 12px 16px;
  background-color: var(--color-warning-light);
  border-radius: 8px;
}

.elb-tipsHeading {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-warning);
}

.elb-tipsText {
  margin: 0;
  font-size: 14px;
  color: var(--color-warning);
  line-height: 1.5;
}

.elb-caloriesSection {
  margin-bottom: 20px;
}

.elb-caloriesText {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.elb-watchInstructionalButton {
  width: 100%;
  padding: 14px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}



/* --- FitnessProgramGenerator.jsx extracted styles --- */


.fpg-loadingModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.fpg-loadingModalContent {
  background-color: var(--brand-surface);
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
}

.fpg-loadingIcon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: pulse 2s ease-in-out infinite;
}

.fpg-loadingTitle {
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--brand-text);
  font-size: 22px;
  font-weight: 700;
}

.fpg-progressBarContainer {
  width: 100%;
  height: 28px;
  background-color: var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.fpg-progressPercentage {
  font-weight: 700;
  font-size: 28px;
  color: var(--color-success);
  margin-bottom: 8px;
}

.fpg-progressMessage {
  font-size: 16px;
  color: var(--brand-text-muted);
  font-weight: 500;
  margin-bottom: 16px;
  min-height: 24px;
}

.fpg-statusDots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.fpg-statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success);
  animation: pulse 1.5s ease-in-out infinite;
}

.fpg-loadingDescription {
  color: var(--brand-text-muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.fpg-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.fpg-modalContent {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.fpg-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--brand-border);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.fpg-headerTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fpg-title {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: bold;
  color: inherit;
}

.fpg-subtitle {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.fpg-closeButton {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpg-profilePreview {
  margin: 20px 32px 0 32px;
  padding: 16px;
  background-color: var(--color-info-light);
  border-radius: 10px;
  font-size: 14px;
}

.fpg-profileLabel {
  display: block;
  margin-bottom: 8px;
}

.fpg-profileData {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--brand-text-muted);
}

.fpg-profileDescription {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpg-formContent {
  padding: 24px 32px;
}

.fpg-programNameGroup {
  margin-bottom: 24px;
}

.fpg-programNameLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
}

.fpg-programNameInput {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  font-size: 15px;
}

.fpg-primaryGoalGroup {
  margin-bottom: 24px;
}

.fpg-primaryGoalLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
}

.fpg-goalOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.fpg-goalCard {
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.fpg-goalIcon {
  font-size: 24px;
  margin-bottom: 6px;
}

.fpg-goalLabel {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.fpg-goalDescription {
  font-size: 11px;
  color: var(--brand-text-muted);
}

.fpg-equipmentGroup {
  margin-bottom: 24px;
}

.fpg-equipmentLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
}

.fpg-equipmentHelper {
  font-weight: 400;
  color: var(--brand-text-muted);
}

.fpg-equipmentOptions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.fpg-equipmentCard {
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.fpg-equipmentIcon {
  font-size: 20px;
  margin-bottom: 4px;
}

.fpg-equipmentCardLabel {
  font-weight: 500;
  font-size: 12px;
}

.fpg-equipmentDescription {
  font-size: 10px;
  color: var(--brand-text-muted);
  margin-top: 2px;
}

.fpg-configRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.fpg-durationLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.fpg-durationSelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.fpg-sessionsLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.fpg-sessionsSelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.fpg-fitnessLevelLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.fpg-fitnessLevelSelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.fpg-sessionDurationGroup {
  margin-bottom: 24px;
}

.fpg-sessionDurationLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.fpg-durationOptions {
  display: flex;
  gap: 10px;
}

.fpg-durationButton {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
}

.fpg-includeGroup {
  margin-bottom: 24px;
}

.fpg-includeLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
}

.fpg-includeOptions {
  display: flex;
  gap: 16px;
}

.fpg-strengthCheckbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 8px;
}

.fpg-cardioCheckbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 8px;
}

.fpg-flexibilityCheckbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 8px;
}

.fpg-aiOptionsGroup {
  margin-bottom: 24px;
}

.fpg-aiOptionsLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
}

.fpg-aiOptionsContent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fpg-preferVideosCheckbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 8px;
}

.fpg-preferVideosInput {
  margin-top: 2px;
}

.fpg-preferVideosText {
  font-weight: 500;
}

.fpg-preferVideosDescription {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpg-mealPlanCheckboxWrapper {
  border-radius: 8px;
  overflow: hidden;
}

.fpg-mealPlanCheckbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 16px;
}

.fpg-mealPlanInput {
  margin-top: 2px;
}

.fpg-mealPlanText {
  font-weight: 500;
}

.fpg-mealPlanDescription {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpg-mealPlanDurationGroup {
  padding: 12px 16px;
  border-top: 1px solid var(--color-success-light);
  background-color: var(--color-success-light);
}

.fpg-mealPlanDurationLabel {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-success);
}

.fpg-mealPlanDurationSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-success-light);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--brand-surface);
  cursor: pointer;
}

.fpg-mealPlanDurationTip {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: var(--color-success);
}

.fpg-secondaryGoalsGroup {
  margin-bottom: 24px;
}

.fpg-secondaryGoalsLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
}

.fpg-secondaryGoalsHelper {
  font-weight: 400;
  color: var(--brand-text-muted);
}

.fpg-secondaryGoalButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fpg-secondaryGoalButton {
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fpg-generateButton {
  width: 100%;
  padding: 16px;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fpg-generateDescription {
  margin: 12px 0 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--brand-text-muted);
}



/* --- FitnessProgramManagement.jsx extracted styles --- */


.fpm-uploadedSize {
  margin: 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpm-removeFileBtn {
  margin-top: 8px;
  padding: 4px 12px;
  background-color: var(--color-error-light);
  color: var(--color-error);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.fpm-dropIcon {
  font-size: 32px;
  margin-bottom: 8px;
}

.fpm-dropText {
  margin: 0 0 4px 0;
  color: var(--brand-text-muted);
}

.fpm-dropHint {
  margin: 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpm-advancedToggle {
  width: 100%;
  padding: 12px;
  background-color: var(--brand-surface-elevated);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fpm-advancedSection {
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  margin-bottom: 20px;
}

.fpm-secondaryGoalsGroup {
  margin-bottom: 16px;
}

.fpm-secondaryGoalsLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-secondaryGoalsGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fpm-goalChip {
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.fpm-goalChipCheckbox {
  display: none;
}

.fpm-bodyAreasLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-bodyAreasGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fpm-bodyAreaChip {
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  text-transform: capitalize;
}

.fpm-bodyAreaCheckbox {
  display: none;
}

.fpm-formActions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.fpm-cancelBtn {
  padding: 12px 24px;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.fpm-submitBtn {
  padding: 12px 24px;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.fpm-detailOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.fpm-detailModal {
  background-color: var(--brand-surface);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}

.fpm-detailHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fpm-detailTitleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.fpm-detailGoalIcon {
  font-size: 32px;
}

.fpm-detailTitle {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.fpm-detailMeta {
  margin: 0;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.fpm-detailActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fpm-printBtn {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.fpm-detailCloseBtn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-text-muted);
}

.fpm-detailBody {
  padding: 24px;
}

.fpm-descSection {
  margin-bottom: 24px;
}

.fpm-descSectionTitle {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}

.fpm-descSectionText {
  margin: 0;
  font-size: 14px;
  color: var(--brand-text-muted);
  line-height: 1.6;
}

.fpm-scheduleSection {
  margin-bottom: 24px;
}

.fpm-scheduleSectionTitle {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}

.fpm-scheduleList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fpm-dayCard {
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  overflow: hidden;
}

.fpm-dayHeader {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fpm-dayName {
  font-weight: 600;
  font-size: 15px;
}

.fpm-dayTypeBadge {
  font-size: 12px;
  color: var(--brand-text-muted);
  background-color: var(--brand-surface);
  padding: 4px 8px;
  border-radius: 4px;
}

.fpm-restDayText {
  padding: 16px;
  text-align: center;
  color: var(--brand-text-placeholder);
}

.fpm-dayContent {
  padding: 16px;
}

.fpm-warmupSection {
  margin-bottom: 12px;
}

.fpm-warmupLabel {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.fpm-warmupText {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-workoutSection {
  margin-bottom: 12px;
}

.fpm-workoutLabel {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.fpm-exerciseList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fpm-exerciseRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background-color: var(--brand-surface-elevated);
  border-radius: 6px;
  border: 1px solid var(--brand-border);
}

.fpm-exerciseInfo {
  flex: 1;
}

.fpm-exerciseName {
  font-weight: 500;
  font-size: 14px;
  color: var(--brand-text);
}

.fpm-exerciseDetail {
  margin-left: 12px;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-videoBtn {
  padding: 6px 12px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 12px;
  white-space: nowrap;
}

.fpm-cooldownLabel {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.fpm-cooldownText {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-dayFallbackText {
  padding: 16px;
  color: var(--brand-text-placeholder);
  font-style: italic;
}

.fpm-progressionNote {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: var(--color-success-light);
  border-radius: 8px;
  border-left: 4px solid var(--color-success);
}

.fpm-progressionText {
  margin: 0;
  font-size: 13px;
  color: var(--color-success);
}

.fpm-periodizationSection {
  margin-bottom: 24px;
  padding: 16px;
  background-color: var(--color-warning-light);
  border-radius: 8px;
}

.fpm-periodizationTitle {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-warning);
}

.fpm-periodizationPhase {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: var(--color-warning);
}

.fpm-periodizationFocus {
  margin: 0;
  font-size: 13px;
  color: var(--color-warning);
}

.fpm-progressTitle {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
}

.fpm-progressList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fpm-progressRow {
  padding: 12px;
  background-color: var(--brand-surface-elevated);
  border-radius: 6px;
  font-size: 13px;
}

.fpm-progressWeek {
  font-weight: 500;
}

.fpm-progressSessions {
  color: var(--brand-text-muted);
  margin-left: 12px;
}

.fpm-fileViewerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.fpm-fileViewerModal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 90vw;
  width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.fpm-fileViewerHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--brand-surface-elevated);
  border-radius: 16px 16px 0 0;
}

.fpm-fileViewerTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-text);
}

.fpm-fileViewerSize {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-fileViewerCloseBtn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpm-fileViewerBody {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background-color: var(--brand-surface-elevated);
  min-height: 60vh;
}

.fpm-fileViewerPre {
  width: 100%;
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
  padding: 20px;
  margin: 0;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background-color: var(--brand-surface);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

.fpm-fileViewerFooter {
  padding: 16px 24px;
  border-top: 1px solid var(--brand-border);
  display: flex;
  justify-content: center;
  gap: 12px;
  background-color: var(--brand-surface);
  border-radius: 0 0 16px 16px;
}

.fpm-fileViewerPrintBtn {
  padding: 10px 32px;
  background-color: var(--brand-text-muted);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.fpm-fileViewerHint {
  font-size: 13px;
  color: var(--brand-text-muted);
  font-style: italic;
  align-self: center;
}

.fpm-fileViewerDismissBtn {
  padding: 10px 32px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.fpm-videoOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: 20px;
}

.fpm-videoModal {
  background-color: var(--brand-surface);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.fpm-videoHeader {
  padding: 16px 20px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fpm-videoTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.fpm-videoMeta {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-videoCloseBtn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-text-muted);
  padding: 0 8px;
}

.fpm-videoPlayerSection {
  padding: 20px;
  background-color: var(--brand-text);
}

.fpm-videoPlayer {
  width: 100%;
  max-height: 60vh;
  border-radius: 8px;
}

.fpm-videoTipsSection {
  padding: 16px 20px;
  background-color: var(--brand-surface-elevated);
  border-top: 1px solid var(--brand-border);
}

.fpm-videoTipsTitle {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}

.fpm-videoTipsText {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.fpm-title {
  margin: 0 0 4px 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-primary-dark);
}

.fpm-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-headerActions {
  display: flex;
  gap: 10px;
}

.fpm-createBtn {
  padding: var(--space-3) var(--space-4);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fpm-aiGenerateBtn {
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}

.fpm-emptyState {
  text-align: center;
  padding: 60px 20px;
  background-color: var(--brand-surface-elevated);
  border-radius: 12px;
  border: 2px dashed var(--brand-border);
}

.fpm-emptyIcon {
  font-size: 48px;
  margin-bottom: 16px;
}

.fpm-emptyTitle {
  margin: 0 0 8px 0;
  color: var(--brand-text-muted);
}

.fpm-emptyText {
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.fpm-programList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fpm-programCard {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  padding: 16px 20px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.fpm-programCard:hover {
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.10);
  border-left-color: var(--brand-primary-light);
}

.fpm-cardLayout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fpm-cardContent {
  flex: 1;
}

.fpm-cardTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.fpm-goalIcon {
  font-size: 24px;
}

.fpm-programName {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-primary-dark);
}

.fpm-activeBadge {
  padding: 2px 8px;
  background-color: var(--color-success-light);
  color: var(--color-success);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.fpm-sourceBadge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.fpm-programMeta {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.fpm-progressBarWrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 8px;
}

.fpm-progressBarTrack {
  flex: 1;
  height: 8px;
  background-color: var(--brand-border);
  border-radius: 4px;
  overflow: hidden;
}

.fpm-progressBarFill {
  height: 100%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  border-radius: 4px;
  transition: width 0.4s ease-out;
}

.fpm-progressLabel {
  font-size: var(--font-size-xs);
  color: var(--brand-text-muted);
  white-space: nowrap;
  font-family: var(--font-body);
}

.fpm-programDescription {
  margin: 0;
  font-size: 13px;
  color: var(--brand-text-muted);
  line-height: 1.4;
}

.fpm-fileAttachment {
  margin-top: 8px;
}

.fpm-fileBtn {
  width: 100%;
  padding: var(--space-3);
  background-color: white;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-2);
}
.fpm-fileBtn:hover {
  background-color: var(--brand-surface-hover);
}

.fpm-cardActions {
  display: flex;
  gap: 8px;
}

.fpm-viewBtn {
  padding: var(--space-2) var(--space-3);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  font-weight: var(--font-medium);
}

.fpm-activateBtn {
  padding: var(--space-2) var(--space-3);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}

.fpm-editBtn {
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}

.fpm-deleteBtn {
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* FPM Mobile Responsiveness */
@media (max-width: 768px) {
  .fpm-cardLayout { flex-direction: column; }
  .fpm-cardTitleRow { flex-wrap: wrap; gap: 6px; }
  .fpm-cardActions { flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 480px) {
  .fpm-cardActions button { flex: 1 1 calc(50% - 4px); font-size: 12px; }
}

.fpm-formOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.fpm-formModal {
  background-color: var(--brand-surface);
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}

.fpm-formHeader {
  padding: 20px 24px;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
  z-index: 10;
}

.fpm-formTitle {
  margin: 0;
  font-size: 18px;
  color: white;
}

.fpm-formCloseBtn {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpm-formBody {
  padding: 24px;
}

.fpm-nameGroup {
  margin-bottom: 20px;
}

.fpm-nameLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-nameInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.fpm-descGroup {
  margin-bottom: 20px;
}

.fpm-descLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-descTextarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
}

.fpm-goalLevelGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.fpm-goalLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-goalSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.fpm-levelLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-levelSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.fpm-durationGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.fpm-durationLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-durationInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.fpm-sessionsLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-sessionsInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.fpm-startDateLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-startDateInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.fpm-distributionGroup {
  margin-bottom: 20px;
}

.fpm-distributionLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-distributionGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
}

.fpm-strengthLabel {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpm-strengthInput {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.fpm-cardioLabel {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpm-cardioInput {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.fpm-flexLabel {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpm-flexInput {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.fpm-restLabel {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.fpm-restInput {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.fpm-distributionTotal {
  margin: 8px 0 0 0;
  font-size: 12px;
  font-weight: 500;
}

.fpm-uploadGroup {
  margin-bottom: 20px;
}

.fpm-uploadLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.fpm-dropZone {
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.fpm-fileInput {
  display: none;
}

.fpm-uploadedIcon {
  font-size: 32px;
  margin-bottom: 8px;
}

.fpm-uploadedName {
  margin: 0 0 4px 0;
  font-weight: 600;
  color: var(--brand-text-muted);
}



/* --- MealPlanGenerator.jsx extracted styles --- */


.mpg-resultCard {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 800px;
  max-width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mpg-resultHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.mpg-resultTitle {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: inherit;
}

.mpg-resultBody {
  padding: 24px;
}

.mpg-resultSummary {
  padding: 16px;
  background: var(--color-success-light);
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid var(--color-success);
}

.mpg-resultPlanName {
  margin: 0 0 12px 0;
  color: var(--color-success);
}

.mpg-resultDetails {
  font-size: 14px;
  color: var(--color-success);
}

.mpg-resultDetailItem {
  margin: 4px 0;
}

.mpg-shoppingSection {
  margin-bottom: 20px;
}

.mpg-shoppingTitle {
  margin-bottom: 12px;
  color: var(--brand-text-muted);
}

.mpg-shoppingList {
  max-height: 200px;
  overflow-y: auto;
  background: var(--brand-surface-elevated);
  padding: 12px;
  border-radius: 6px;
}

.mpg-shoppingItem {
  padding: 8px;
}

.mpg-shoppingCategory {
  color: var(--brand-text-muted);
  font-size: 13px;
}

.mpg-prepTipsSection {
  margin-bottom: 20px;
}

.mpg-prepTipsTitle {
  margin-bottom: 12px;
  color: var(--brand-text-muted);
}

.mpg-prepTipsList {
  background: var(--color-warning-light);
  padding: 16px 16px 16px 36px;
  border-radius: 6px;
  margin: 0;
  color: var(--color-warning);
}

.mpg-prepTipItem {
  margin-bottom: 8px;
}

.mpg-resultInfoBox {
  padding: 12px 16px;
  background: var(--color-info-light);
  border-radius: 6px;
  font-size: 14px;
  color: var(--brand-primary);
  margin-bottom: 20px;
}

.mpg-doneBtn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.mpg-loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.mpg-loadingCard {
  background-color: var(--brand-surface);
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
}

.mpg-loadingIcon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: pulse 2s ease-in-out infinite;
}

.mpg-loadingTitle {
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--brand-text);
  font-size: 22px;
  font-weight: 700;
}

.mpg-progressBarTrack {
  width: 100%;
  height: 28px;
  background-color: var(--brand-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.mpg-progressPercent {
  font-weight: 700;
  font-size: 28px;
  color: var(--color-success);
  margin-bottom: 8px;
}

.mpg-progressMessage {
  font-size: 16px;
  color: var(--brand-text-muted);
  font-weight: 500;
  margin-bottom: 16px;
  min-height: 24px;
}

.mpg-statusDots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.mpg-statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success);
  animation: pulse 1.5s ease-in-out infinite;
}

.mpg-loadingDescription {
  color: var(--brand-text-muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.mpg-formOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  overflow-y: auto;
  padding: 20px;
}

.mpg-formCard {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 650px;
  max-width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mpg-formHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.mpg-formTitle {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: inherit;
}

.mpg-closeBtn {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.mpg-formBody {
  padding: 24px;
}

.mpg-planNameGroup {
  margin-bottom: 24px;
}

.mpg-planNameLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
}

.mpg-planNameHint {
  font-size: 13px;
  color: var(--brand-text-muted);
  font-weight: 400;
}

.mpg-planNameInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.mpg-planTypeGroup {
  margin-bottom: 24px;
}

.mpg-planTypeLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
}

.mpg-planTypeOptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mpg-planTypeOption {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
}

.mpg-planTypeRadio {
  margin-right: 12px;
  width: 18px;
  height: 18px;
}

.mpg-fitnessLinkGroup {
  margin-bottom: 24px;
}

.mpg-fitnessLinkLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
}

.mpg-fitnessLinkSelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.mpg-fitnessLinkHint {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.mpg-durationGroup {
  margin-bottom: 24px;
}

.mpg-durationLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
}

.mpg-durationOptions {
  display: flex;
  gap: 12px;
}

.mpg-durationBtn {
  flex: 1;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.mpg-mealsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.mpg-mealsLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
}

.mpg-mealsSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.mpg-snacksLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
}

.mpg-snacksSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.mpg-varietyGroup {
  margin-bottom: 24px;
}

.mpg-varietyLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--brand-text-muted);
}

.mpg-varietySlider {
  width: 100%;
  margin-bottom: 8px;
}

.mpg-varietyScale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--brand-text-muted);
}

.mpg-varietyValue {
  font-weight: 600;
  color: var(--brand-primary);
}

.mpg-infoBox {
  padding: 12px 16px;
  background: var(--color-info-light);
  border-left: 4px solid var(--color-info);
  border-radius: 4px;
  font-size: 13px;
  color: var(--brand-primary);
  margin-bottom: 24px;
}

.mpg-advancedSection {
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.mpg-advancedToggle {
  padding: 16px;
  background: var(--brand-surface-elevated);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  user-select: none;
}

.mpg-advancedArrow {
  font-size: 20px;
  transition: transform 0.3s;
}

.mpg-advancedContent {
  padding: 20px;
  border-top: 1px solid var(--brand-border);
  background: var(--brand-surface-elevated);
}

.mpg-sectionHeading {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.mpg-calorieGroup {
  margin-bottom: 16px;
}

.mpg-calorieLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-calorieInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-activityGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.mpg-activityLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-activitySelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-adjustmentLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-adjustmentInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-divider {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--brand-border);
}

.mpg-macroHeading {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.mpg-macroGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.mpg-proteinLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-proteinInput {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  text-align: center;
}

.mpg-proteinGrams {
  font-size: 12px;
  color: var(--brand-text-muted);
  text-align: center;
  margin-top: 4px;
}

.mpg-carbsLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-carbsInput {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  text-align: center;
}

.mpg-carbsGrams {
  font-size: 12px;
  color: var(--brand-text-muted);
  text-align: center;
  margin-top: 4px;
}

.mpg-fatLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-fatInput {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  text-align: center;
}

.mpg-fatGrams {
  font-size: 12px;
  color: var(--brand-text-muted);
  text-align: center;
  margin-top: 4px;
}

.mpg-macroWarning {
  padding: 8px;
  background: var(--color-error-light);
  color: var(--color-error);
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 16px;
}

.mpg-dividerMacro {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--brand-border);
}

.mpg-dietHeading {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.mpg-dietGroup {
  margin-bottom: 16px;
}

.mpg-dietLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-dietSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-cuisineGroup {
  margin-bottom: 16px;
}

.mpg-cuisineLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-cuisineChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mpg-cuisineChip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.mpg-dividerCuisine {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--brand-border);
}

.mpg-timingHeading {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.mpg-timingGroup {
  margin-bottom: 16px;
}

.mpg-timingLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-timingSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-windowGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.mpg-windowStartLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-windowStartInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-windowEndLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-windowEndInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-dividerTiming {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--brand-border);
}

.mpg-hydrationHeading {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.mpg-hydrationGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.mpg-waterLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-waterInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-batchLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-batchSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-monitorGroup {
  margin-bottom: 16px;
}

.mpg-monitorLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-monitorOption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 400;
}

.mpg-monitorCheckbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.mpg-recalLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mpg-recalInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.mpg-activeGroup {
  margin-bottom: 20px;
}

.mpg-activeLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.mpg-activeCheckbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.mpg-generateBtn {
  width: 100%;
  padding: 14px;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}

.mpg-resultOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  overflow-y: auto;
  padding: 20px;
}



/* --- MealPlanManagement.jsx extracted styles --- */


.mpm-advancedToggle {
  width: 100%;
  padding: 12px;
  background-color: var(--brand-surface-elevated);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-muted);
  cursor: pointer;
  margin-bottom: 20px;
}

.mpm-advancedSection {
  margin-bottom: 20px;
}

.mpm-mealsPerDayGroup {
  margin-bottom: 16px;
}

.mpm-mealsPerDayLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-mealsPerDayInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.mpm-snacksGroup {
  margin-bottom: 16px;
}

.mpm-snacksLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-snacksInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.mpm-waterGroup {
  margin-bottom: 16px;
}

.mpm-waterLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-waterInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.mpm-activeGroup {
  margin-bottom: 24px;
}

.mpm-activeLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--brand-text-muted);
  cursor: pointer;
}

.mpm-activeCheckbox {
  width: 18px;
  height: 18px;
}

.mpm-activeText {
  font-weight: 600;
}

.mpm-formActions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.mpm-cancelBtn {
  padding: 10px 24px;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mpm-submitBtn {
  padding: 10px 24px;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.mpm-detailOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.mpm-detailModal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mpm-detailHeader {
  padding: 24px 32px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.mpm-detailTitle {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: inherit;
}

.mpm-detailCloseBtn {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpm-detailBody {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.mpm-summaryCard {
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  margin-bottom: 24px;
}

.mpm-summaryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.mpm-statLabel {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

.mpm-statValue {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-text);
}

.mpm-statLabelProtein {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

.mpm-statValueProtein {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-primary);
}

.mpm-statLabelCarbs {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

.mpm-statValueCarbs {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-info);
}

.mpm-statLabelFat {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

.mpm-statValueFat {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-warning);
}

.mpm-dayCard {
  margin-bottom: 24px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  overflow: hidden;
}

.mpm-dayHeader {
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-bottom: 1px solid var(--brand-border);
  font-weight: 600;
  font-size: 16px;
  color: var(--brand-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mpm-mealItem {
  padding: 16px;
}

.mpm-mealType {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-info);
  margin-bottom: 8px;
}

.mpm-mealName {
  font-size: 15px;
  color: var(--brand-text);
  margin-bottom: 8px;
  font-weight: 500;
}

.mpm-mealDescription {
  font-size: 13px;
  color: var(--brand-text-muted);
  margin-bottom: 8px;
}

.mpm-mealNutrition {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 8px;
}

.mpm-viewRecipeBtn {
  margin-top: 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: var(--brand-text-light);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.15);
}

.mpm-noSchedule {
  text-align: center;
  padding: 48px 24px;
  color: var(--brand-text-muted);
  font-size: 15px;
}

.mpm-noScheduleIcon {
  font-size: 48px;
  margin: 0 0 16px 0;
}

.mpm-noScheduleText {
  margin: 0;
}

.mpm-noScheduleHint {
  margin: 8px 0 0 0;
  font-size: 13px;
}

.mpm-fileViewerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.mpm-fileViewerModal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 90vw;
  width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.mpm-fileViewerHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--brand-surface-elevated);
  border-radius: 16px 16px 0 0;
}

.mpm-fileViewerTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-text);
}

.mpm-fileViewerSize {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.mpm-fileViewerCloseBtn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpm-fileViewerBody {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background-color: var(--brand-surface-elevated);
  min-height: 60vh;
}

.mpm-fileViewerPre {
  width: 100%;
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
  padding: 20px;
  margin: 0;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background-color: var(--brand-surface);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

.mpm-fileViewerFooter {
  padding: 16px 24px;
  border-top: 1px solid var(--brand-border);
  display: flex;
  justify-content: center;
  gap: 12px;
  background-color: var(--brand-surface);
  border-radius: 0 0 16px 16px;
}

.mpm-fileViewerPrintBtn {
  padding: 10px 32px;
  background-color: var(--brand-text-muted);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mpm-fileViewerHint {
  font-size: 13px;
  color: var(--brand-text-muted);
  font-style: italic;
  align-self: center;
}

.mpm-fileViewerDismissBtn {
  padding: 10px 32px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mpm-dayRecipeOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.mpm-dayRecipeModal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mpm-dayRecipeHeader {
  padding: 24px 32px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.mpm-dayRecipeTitle {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: inherit;
}

.mpm-dayRecipeCloseBtn {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpm-dayRecipeBody {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.mpm-dayRecipeIframe {
  width: 100%;
  min-height: 600px;
  border: none;
  border-radius: 8px;
}

.mpm-dayRecipeFooter {
  padding: 16px 32px;
  border-top: 1px solid var(--brand-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.mpm-dayRecipeCloseFooterBtn {
  padding: 10px 20px;
  background-color: var(--brand-text-muted);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.mpm-makeRecipeBtn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.mpm-recipeViewerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.mpm-recipeViewerModal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 90vw;
  width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.mpm-recipeViewerHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--brand-surface-elevated);
  border-radius: 16px 16px 0 0;
}

.mpm-recipeViewerTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-text);
}

.mpm-recipeViewerSubtitle {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.mpm-recipeViewerCloseBtn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpm-recipeViewerBody {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background-color: var(--brand-surface-elevated);
}

.mpm-recipeViewerIframe {
  width: 100%;
  height: 600px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background-color: var(--brand-surface);
}

.mpm-recipeViewerFooter {
  padding: 16px 24px;
  border-top: 1px solid var(--brand-border);
  display: flex;
  justify-content: center;
  gap: 12px;
  background-color: var(--brand-surface);
  border-radius: 0 0 16px 16px;
}

.mpm-recipeViewerPrintBtn {
  padding: 10px 32px;
  background-color: var(--brand-text-muted);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mpm-recipeViewerDismissBtn {
  padding: 10px 32px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mpm-recipeViewerPrintHint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748B);
}

.mpm-container {
  background-color: var(--brand-surface);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mpm-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--brand-border);
}

.mpm-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-primary-dark);
}

.mpm-headerActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mpm-newManualBtn {
  padding: var(--space-3) var(--space-5);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(30, 58, 95, 0.3);
}

.mpm-newAiBtn {
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}

.mpm-emptyState {
  text-align: center;
  padding: 48px 24px;
  color: var(--brand-text-muted);
  font-size: 15px;
}

.mpm-emptyIcon {
  font-size: 48px;
  margin: 0 0 16px 0;
}

.mpm-emptyText {
  margin: 0;
}

.mpm-planList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mpm-planCard {
  padding: 16px 20px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.mpm-planCard:hover {
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.10);
  border-left-color: var(--brand-primary-light);
}

.mpm-planName {
  margin: 0 0 8px 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-primary-dark);
}

.mpm-editedBadge {
  margin-left: 8px;
  font-size: 12px;
  color: var(--color-warning);
}

.mpm-planMeta {
  font-size: 13px;
  color: var(--brand-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mpm-attachmentRow {
  margin-top: 8px;
}

.mpm-attachmentBtn {
  padding: 4px 12px;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mpm-planActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mpm-viewSummaryBtn {
  padding: var(--space-2) var(--space-4);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: var(--font-medium);
  cursor: pointer;
}

.mpm-viewRecipesBtn {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: var(--brand-text-light);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.15);
}

.mpm-editBtn {
  padding: var(--space-2) var(--space-4);
  background-color: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: var(--font-medium);
  cursor: pointer;
}

.mpm-deleteBtn {
  padding: var(--space-2) var(--space-4);
  background-color: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: var(--font-medium);
  cursor: pointer;
}

/* --- Phase D: Radio buttons, Renew, Active state --- */
.mpm-planCard--active {
  border-color: var(--brand-primary);
  background-color: #F0F9FF;
}
.mpm-planCardRow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mpm-planCardContent {
  flex: 1;
  min-width: 0;
}
.mpm-radioBtn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
  transition: border-color 0.2s;
}
.mpm-radioBtn:hover {
  border-color: var(--brand-primary);
}
.mpm-radioBtn--selected {
  border-color: var(--brand-primary);
}
.mpm-radioDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-primary);
}
.mpm-statusActive {
  color: var(--color-success);
  font-weight: 600;
}
.mpm-statusInactive {
  color: var(--brand-text-muted);
}
.mpm-renewBtn {
  padding: var(--space-2) var(--space-4);
  background: var(--brand-surface);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background 0.2s;
}
.mpm-renewBtn:hover {
  background: var(--brand-surface-elevated);
}

/* Renew Modal */
.mpm-renewPlanInfo {
  background: var(--brand-surface-elevated);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.mpm-renewPlanInfo strong {
  display: block;
  margin-bottom: 4px;
}
.mpm-renewPlanMeta {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
}
.mpm-renewField {
  margin-bottom: 16px;
}
.mpm-renewLabel {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 6px;
}
.mpm-renewInput {
  width: 100%;
  max-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.mpm-renewHint {
  display: block;
  font-size: 0.75rem;
  color: var(--brand-text-muted);
  margin-top: 4px;
}
.mpm-renewRecurringSection {
  margin-bottom: 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 12px 16px;
}
.mpm-renewRecurringRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  font-size: 0.85rem;
}
.mpm-renewDaysInput {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  text-align: center;
  font-size: 0.85rem;
}
.mpm-renewDaysInput:disabled {
  opacity: 0.4;
}
.mpm-toggleSwitch {
  width: 44px;
  height: 24px;
  background: var(--brand-border);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.mpm-toggleSwitch--active {
  background: var(--brand-primary);
}
.mpm-toggleDot {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}
.mpm-toggleSwitch--active .mpm-toggleDot {
  left: 22px;
}
.mpm-renewInfoBox {
  background: var(--brand-surface-elevated);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.8rem;
  margin-top: 12px;
}
.mpm-renewInfoBox strong {
  display: block;
  margin-bottom: 6px;
}
.mpm-renewInfoBox ol {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .mpm-planCardRow {
    flex-direction: column;
    gap: 8px;
  }
  .mpm-radioBtn {
    align-self: flex-start;
  }
}

.mpm-formOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.mpm-formModal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mpm-formHeader {
  padding: 24px 32px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.mpm-formTitle {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.mpm-formCloseBtn {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.mpm-formBody {
  padding: 24px 32px;
}

.mpm-aiInfoBanner {
  padding: 12px 16px;
  background: var(--color-info-light);
  border-left: 4px solid var(--color-info);
  border-radius: 4px;
  font-size: 13px;
  color: var(--brand-primary);
  margin-bottom: 20px;
}

.mpm-editedWarning {
  margin-top: 4px;
  color: var(--color-warning);
}

.mpm-aiPromptText {
  margin-top: 8px;
}

.mpm-attachedFileBar {
  padding: 12px 16px;
  background: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--brand-text-muted);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mpm-viewFileBtn {
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.mpm-uploadSection {
  margin-bottom: 24px;
}

.mpm-uploadLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-dropzone {
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.mpm-uploadedFileName {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--color-success);
}

.mpm-removeFileBtn {
  padding: 6px 12px;
  background-color: var(--color-error);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.mpm-dropzoneText {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.mpm-dropzoneOr {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: var(--brand-text-placeholder);
}

.mpm-browseFilesBtn {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.mpm-fileInputHidden {
  display: none;
}

.mpm-fileTypesHint {
  margin: 12px 0 0 0;
  font-size: 11px;
  color: var(--brand-text-placeholder);
}

.mpm-fieldGroup {
  margin-bottom: 20px;
}

.mpm-fieldLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-textInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.mpm-typeGroup {
  margin-bottom: 20px;
}

.mpm-typeLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-typeSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.mpm-caloriesGroup {
  margin-bottom: 20px;
}

.mpm-caloriesLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-caloriesInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.mpm-macrosSection {
  margin-bottom: 20px;
}

.mpm-macrosLabel {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.mpm-proteinSlider {
  margin-bottom: 12px;
}

.mpm-proteinRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mpm-proteinPercent {
  font-size: 13px;
  color: var(--brand-text-muted);
}

.mpm-proteinGrams {
  font-size: 13px;
  color: var(--brand-primary);
  font-weight: 600;
}

.mpm-proteinRange {
  width: 100%;
}

.mpm-carbsSlider {
  margin-bottom: 12px;
}

.mpm-carbsRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mpm-carbsPercent {
  font-size: 13px;
  color: var(--brand-text-muted);
}

.mpm-carbsGrams {
  font-size: 13px;
  color: var(--color-info);
  font-weight: 600;
}

.mpm-carbsRange {
  width: 100%;
}

.mpm-fatSlider {
  margin-bottom: 12px;
}

.mpm-fatRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mpm-fatPercent {
  font-size: 13px;
  color: var(--brand-text-muted);
}

.mpm-fatGrams {
  font-size: 13px;
  color: var(--color-warning);
  font-weight: 600;
}

.mpm-fatRange {
  width: 100%;
}

.mpm-macroTotal {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}



/* --- PantryDetailView.jsx extracted styles --- */

.pill-btn.pdv-deleteSelectedBtn {
  background: var(--color-error);
  color: white;
}
.pill-btn.pdv-deleteSelectedBtn[disabled] {
  background: #D1D5DB;
  color: #6B7280;
  cursor: not-allowed;
}
.pill-btn.pdv-deleteAllBtn {
  background: var(--color-error);
  color: white;
}

.pdv-itemMetaSection {
  padding: 16px 24px;
  background-color: var(--brand-surface-elevated);
  border-bottom: 1px solid var(--brand-border);
}

.pdv-descriptionText {
  margin: 0 0 8px 0;
  color: var(--brand-text-muted);
}

.pdv-locationText {
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.pdv-itemsListContainer {
  padding: 0 24px 24px 24px;
}

.pdv-listHeaderRow {
  padding: 16px 0;
  border-bottom: 2px solid var(--brand-border);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdv-itemsCountHeading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-text);
}

.pdv-selectAllLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.pdv-selectAllCheckbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.pdv-emptyStateContainer {
  text-align: center;
  padding: 48px 24px;
  color: var(--brand-text-muted);
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
}

.pdv-emptyStateMessage {
  margin: 0;
  font-size: 15px;
}

.pdv-itemCard {
  position: relative;
}

.pdv-itemCheckboxCell {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

.pdv-itemCheckbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.pdv-itemContent {
  margin-left: 32px;
}

.pdv-itemTitleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.pdv-itemNameHeading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-text);
}

.pdv-itemBrandSpan {
  font-size: 13px;
  color: var(--brand-text-muted);
  font-weight: 400;
}

.pdv-itemDetailsRow1 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--brand-text-muted);
  margin-bottom: 8px;
}

.pdv-quantitySpan {
  font-weight: 600;
}

.pdv-itemDetailsRow2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  margin-top: 12px;
}

.pdv-purchaseDateSpan {
  padding: 4px 10px;
  background-color: var(--color-info-light);
  color: var(--brand-primary);
  border-radius: 4px;
  font-weight: 500;
}

.pdv-expirationBadge {
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
}

.pdv-outOfStockBadge {
  padding: 4px 10px;
  background-color: var(--color-error-light);
  color: var(--color-error);
  border-radius: 4px;
  font-weight: 500;
}

.pdv-lowStockBadge {
  padding: 4px 10px;
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border-radius: 4px;
  font-weight: 500;
}

.pdv-frozenBadge {
  padding: 4px 10px;
  background-color: #DBEAFE;
  color: #1E40AF;
  border-radius: 4px;
  font-weight: 500;
}

.pdv-openedBadge {
  padding: 4px 10px;
  background-color: #FEF3C7;
  color: #92400E;
  border-radius: 4px;
  font-weight: 500;
}

.pdv-storageBadge {
  padding: 4px 10px;
  background-color: #EBF0F7;
  color: var(--brand-primary);
  border-radius: 4px;
  font-weight: 500;
}

.pdv-itemNotesSection {
  margin-top: 12px;
  padding: 8px 12px;
  background-color: var(--brand-surface-elevated);
  border-left: 3px solid var(--brand-border);
  font-size: 13px;
  color: var(--brand-text-muted);
  font-style: italic;
}

.pdv-viewItemBtn {
  background-color: var(--brand-primary);
}

.pdv-inventoryManagerContainer {
  margin-top: 24px;
}

.pdv-backButtonContainer {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
}

.pdv-backButton {
  min-width: 200px;
}



/* --- PantryForms.jsx extracted styles --- */

.barcode-section {
  margin-bottom: 16px;
}

/* Two-column field row for PantryForms */
.pf-fieldRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .pf-fieldRow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Barcode input with inline Lookup button */
.pf-barcodeInputGroup {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pf-barcodeInputGroup .form-input {
  flex: 1;
  min-width: 0;
}

.pf-barcodeInputGroup .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.pf-scanBarcodeBtn {
  width: 100%;
  margin-bottom: 1rem;
}

.pf-complianceChecker {
  margin-top: 16px;
  margin-bottom: 16px;
}

.pf-quantitySection {
  background: var(--brand-surface-elevated);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.pf-quantityLabel {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
}

.pf-requiredIndicator {
  color: var(--color-error);
}

.pf-quantityRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-countField {
  display: flex;
  flex-direction: column;
  width: 80px;
}

.pf-countLabel {
  font-size: 0.75rem;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

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

.pf-separator {
  color: var(--brand-text-placeholder);
  font-size: 1.25rem;
  margin-top: 16px;
}

.pf-sizeField {
  display: flex;
  flex-direction: column;
  width: 80px;
}

.pf-sizeLabel {
  font-size: 0.75rem;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

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

.pf-unitField {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pf-unitLabel {
  font-size: 0.75rem;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}

.pf-quantityPreview {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--brand-text-muted);
  padding: 8px;
  background: white;
  border-radius: 4px;
  text-align: center;
}

.pf-totalQuantity {
  color: var(--brand-primary);
}

.pf-simpleQuantity {
  color: var(--brand-primary);
}

.pf-alertSection {
  margin-bottom: 16px;
}

.pf-alertThreshold {
  max-width: 150px;
}

.pf-readOnlyWarning {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 4px;
}

.pf-forceStockoutLabel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-forceStockoutCheckbox {
  width: auto;
  margin: 0;
}

.pf-stockoutHelp {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 4px;
  margin-left: 24px;
}

.pf-shelfLifeLoading {
  font-size: 12px;
  color: var(--brand-text-muted);
  font-style: italic;
}

/* USDA FoodKeeper read-only textarea */
.pf-foodkeeperNotes {
  background-color: #EBF0F7;
  border-left: 3px solid var(--brand-primary);
  color: var(--brand-primary);
  font-size: 13px;
  line-height: 1.5;
  cursor: default;
  resize: none;
}

.pf-noDataWarning {
  margin-top: 4px;
  font-size: 12px;
  color: #D97706;
  font-style: italic;
}



/* --- ParentalHistoryView.jsx extracted styles --- */


.phv-conditionCategory {
  margin-bottom: 24px;
}

.phv-categoryName {
  background-color: var(--brand-surface-elevated);
  padding: 12px;
  margin: 0 0 12px 0;
  border-radius: 6px;
  color: var(--brand-text-muted);
  font-size: 16px;
  font-weight: 600;
}

.phv-conditionsList {
  padding-left: 16px;
}

.phv-conditionItem {
  margin-bottom: 12px;
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 6px;
  border-left: 4px solid var(--color-success);
}

.phv-conditionName {
  font-weight: 500;
  margin-bottom: 8px;
}

.phv-parentAffiliation {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.phv-fatherFlag {
  margin-left: 8px;
}

.phv-motherFlag {
  margin-left: 8px;
}

.phv-emptyState {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
}

.phv-noHistoryState {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
}

.phv-emptyStateHint {
  font-size: 14px;
  margin-top: 8px;
}

.phv-parentInfoTitle {
  margin-bottom: 16px;
  color: var(--brand-text-muted);
}

.phv-parentInfoDisplay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.phv-fatherSection {
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  border: 1px solid var(--brand-border);
}

.phv-fatherTitle {
  margin-bottom: 12px;
  color: var(--brand-text-muted);
}

.phv-fatherDeathDate {
  margin-top: 8px;
}

.phv-motherSection {
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  border: 1px solid var(--brand-border);
}

.phv-motherTitle {
  margin-bottom: 12px;
  color: var(--brand-text-muted);
}

.phv-motherDeathDate {
  margin-top: 8px;
}

.phv-conditionsTitle {
  margin-bottom: 16px;
  color: var(--brand-text-muted);
}



/* --- PersonalHistoryModal.jsx extracted styles --- */


.phm-categoryHeaderRow {
  display: grid;
  grid-column: 1 / -1;
}



/* --- PersonalHistoryView.jsx extracted styles --- */


.pshv-noHistoryState {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
}

.pshv-emptyStateHint {
  font-size: 14px;
  margin-top: 8px;
}

.pshv-conditionsTitle {
  margin-bottom: 16px;
  color: var(--brand-text-muted);
}

.pshv-conditionCategory {
  margin-bottom: 24px;
}

.pshv-categoryName {
  background-color: var(--brand-surface-elevated);
  padding: 12px;
  margin: 0 0 12px 0;
  border-radius: 6px;
  color: var(--brand-text-muted);
  font-size: 16px;
  font-weight: 600;
}

.pshv-conditionsList {
  padding-left: 16px;
}

.pshv-conditionItem {
  margin-bottom: 12px;
  padding: 12px;
  background-color: var(--brand-surface-elevated);
  border-radius: 6px;
  border-left: 4px solid var(--brand-primary);
}

.pshv-conditionName {
  font-weight: 500;
  margin-bottom: 4px;
}

.pshv-diagnosisDate {
  font-size: 14px;
  color: var(--brand-text-muted);
}

.pshv-emptyState {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
}



/* --- ProviderPortal.jsx extracted styles --- */


.pp-pageWrapper {
  min-height: 100vh;
  background-color: var(--brand-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pp-cardWrapper {
  background-color: var(--brand-surface);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  padding: 40px;
}

.pp-cardHeader {
  text-align: center;
  margin-bottom: 30px;
}

.pp-portalTitle {
  color: var(--color-info);
  margin-bottom: 10px;
}

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

.pp-errorMessage {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-light);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
  color: var(--color-error);
}

.pp-formFieldGroup {
  margin-bottom: 20px;
}

.pp-accessCodeLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.pp-passcodeInput {
  width: 100%;
  padding: 12px;
  font-size: 18px;
  letter-spacing: 2px;
  font-family: var(--font-mono);
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  text-align: center;
}

.pp-helperText {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 8px;
  text-align: center;
}

.pp-validateBtn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
}

.pp-importantNotesSection {
  margin-top: 30px;
  padding: 15px;
  background-color: var(--color-warning-light);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-warning);
}

.pp-importantPointsList {
  margin: 10px 0 0 20px;
  padding-left: 0;
}

.pp-pageWrapperForm {
  min-height: 100vh;
  background-color: var(--brand-surface-elevated);
  padding: 20px;
}

.pp-cardWrapperForm {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--brand-surface);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.pp-formHeader {
  background-color: var(--color-info-light);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.pp-patientNameHeading {
  margin: 0 0 10px 0;
  color: var(--brand-primary);
}

.pp-reportDateText {
  margin: 0;
  color: var(--color-info);
}

.pp-errorMessageForm {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-light);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
  color: var(--color-error);
}

.pp-providerSelectionField {
  margin-bottom: 25px;
}

.pp-providerSelectionLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.pp-providerSelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  font-size: 16px;
}

.pp-responseCategoryField {
  margin-bottom: 25px;
}

.pp-categoryLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.pp-categorySelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  font-size: 16px;
}

.pp-responseTextField {
  margin-bottom: 25px;
}

.pp-responseLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.pp-responseTextarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  font-size: 16px;
  font-family: var(--font-body);
  resize: vertical;
}

.pp-urgentCheckboxField {
  margin-bottom: 30px;
}

.pp-urgentCheckboxLabel {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.pp-urgentCheckbox {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.pp-urgentCheckboxText {
  font-weight: bold;
  color: var(--color-error);
}

.pp-submitBtn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
}

.pp-noteSection {
  margin-top: 30px;
  padding: 15px;
  background-color: var(--brand-surface-elevated);
  border-radius: 6px;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.pp-pageWrapperSuccess {
  min-height: 100vh;
  background-color: var(--brand-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pp-cardWrapperSuccess {
  background-color: var(--brand-surface);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  padding: 40px;
  text-align: center;
}

.pp-successIconPlaceholder {
  font-size: 64px;
  margin-bottom: 20px;
}

.pp-successHeading {
  color: var(--color-success);
  margin-bottom: 15px;
}

.pp-successMessage {
  color: var(--brand-text-muted);
  margin-bottom: 25px;
  line-height: 1.6;
}

.pp-urgentNotificationSection {
  background-color: var(--color-error-light);
  border: 2px solid var(--color-error);
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 25px;
}

.pp-urgentNotificationText {
  margin: 0;
  color: var(--color-error);
  font-weight: bold;
}

.pp-finalNoteSection {
  background-color: var(--brand-surface-elevated);
  padding: 15px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.pp-finalNoteText {
  margin: 0;
}



/* --- RecipeGenerator.jsx extracted styles --- */


.rg-modalContent {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 600px;
  max-height: 80vh;
  overflow: auto;
}

.rg-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.rg-title {
  margin: 0;
  color: white;
}

.rg-closeButton {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rg-modeSelector {
  padding: 24px;
}

.rg-modeSelectorText {
  margin-bottom: 24px;
  color: var(--brand-text-muted);
}

.rg-modeCardNew {
  padding: 20px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.rg-modeCardNewTitle {
  margin: 0 0 8px 0;
}

.rg-modeCardNewDescription {
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.rg-modeCardOptimize {
  padding: 20px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.rg-modeCardOptimizeTitle {
  margin: 0 0 8px 0;
}

.rg-modeCardOptimizeDescription {
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 14px;
}

.rg-modalNew {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.rg-modalContentNew {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 600px;
  max-height: 80vh;
  overflow: auto;
}

.rg-headerNew {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.rg-titleNew {
  margin: 0;
  color: inherit;
}

.rg-closeButtonNew {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 28px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.2s;
}

.rg-closeButtonNew:hover {
  background: rgba(255,255,255,0.3);
}

.rg-formSection {
  padding: 24px;
}

.rg-promptLabel {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.rg-promptTextarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  min-height: 80px;
  resize: vertical;
}

.rg-mealTypeLabel {
  display: block;
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: 600;
}

.rg-mealTypeOptions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.rg-mealTypeOption {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rg-mealTypeText {
  text-transform: capitalize;
}

.rg-infoBox {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  font-size: 14px;
}

.rg-infoHeading {
  margin: 0 0 12px 0;
  font-weight: 600;
}

.rg-considerationsList {
  margin: 0;
  padding-left: 20px;
}

.rg-generateButton {
  margin-top: 24px;
  width: 100%;
  padding: 12px;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
}

.rg-modalOptimize {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.rg-modalContentOptimize {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 600px;
  max-height: 80vh;
  overflow: auto;
}

.rg-headerOptimize {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.rg-titleOptimize {
  margin: 0;
  color: inherit;
}

.rg-closeButtonOptimize {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 28px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.2s;
}

.rg-closeButtonOptimize:hover {
  background: rgba(255,255,255,0.3);
}

.rg-formSectionOptimize {
  padding: 24px;
}

.rg-recipeSelectLabel {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
}

.rg-recipeSelect {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
}

.rg-recipePreview {
  margin-top: 16px;
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  font-size: 14px;
}

.rg-recipeDescription {
  margin: 8px 0 0 0;
  color: var(--brand-text-muted);
}

.rg-goalsBox {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  font-size: 14px;
}

.rg-goalsHeading {
  margin: 0 0 12px 0;
  font-weight: 600;
}

.rg-goalsList {
  margin: 0;
  padding-left: 20px;
}

.rg-optimizeButton {
  margin-top: 24px;
  width: 100%;
  padding: 12px;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
}

.rg-modalGenerated {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.rg-modalContentGenerated {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 700px;
  max-height: 90vh;
  overflow: auto;
}

.rg-headerGenerated {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rg-titleGenerated {
  margin: 0;
}

.rg-closeButtonGenerated {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.rg-recipeDisplay {
  padding: 24px;
}

.rg-recipeName {
  margin: 0 0 16px 0;
}

.rg-nutritionBox {
  padding: 16px;
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  margin-bottom: 16px;
}

.rg-nutritionGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.rg-ingredientsSection {
  margin-bottom: 16px;
}

.rg-ingredientsContent {
  margin-top: 8px;
  white-space: pre-wrap;
}

.rg-instructionsSection {
  margin-bottom: 16px;
}

.rg-instructionsContent {
  margin-top: 8px;
  white-space: pre-wrap;
}

.rg-footer {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.rg-saveButton {
  flex: 1;
  padding: 12px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.rg-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--brand-bg-light, #EBF0F7);
  border-top: 4px solid var(--brand-primary, #1E3A5F);
  border-radius: 50%;
  animation: rg-spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes rg-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rg-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}



/* --- SmartShopping.jsx extracted styles --- */


.ss-planCheckboxLabel {
  display: block;
  margin-bottom: 8px;
}

.ss-planCheckbox {
  margin-right: 8px;
}

.ss-emptyPlansMessage {
  padding: 16px;
  background-color: var(--color-warning-light);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--color-warning);
}

.ss-scanPantryBtn {
  width: 100%;
  padding: var(--space-3);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.ss-scanPantryBtn--disabled {
  background: #D1D5DB;
  cursor: not-allowed;
}

.ss-pageWrapperList {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.ss-cardWrapperList {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 700px;
  max-height: 90vh;
  overflow: auto;
}

.ss-modalHeaderList {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.ss-shoppingListTitle {
  margin: 0;
  color: white;
  font-size: var(--font-size-lg);
}

.ss-closeButtonList {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-modalBodyList {
  padding: 24px;
}

.ss-summaryBar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.ss-summaryItem {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-body);
  background-color: var(--brand-background);
  color: var(--brand-text);
}

.ss-summaryItem--have {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.ss-summaryItem--need {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

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

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

.ss-sectionHeading {
  display: block;
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--brand-border);
}

.ss-sectionHeading--have {
  color: var(--color-success);
  border-bottom-color: var(--color-success);
}

.ss-sectionHeading--need {
  color: var(--color-warning);
  border-bottom-color: var(--color-warning);
}

.ss-ingredientList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ss-ingredientItem {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--brand-border);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
}

.ss-ingredientItem:last-child {
  border-bottom: none;
}

.ss-ingredientCheck {
  color: var(--color-success);
  font-weight: 700;
  flex-shrink: 0;
}

.ss-ingredientBullet {
  color: var(--color-warning);
  font-weight: 700;
  flex-shrink: 0;
}

.ss-ingredientName {
  flex: 1;
  color: var(--brand-text);
}

.ss-ingredientQty {
  color: var(--brand-text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.ss-errorMessage {
  padding: var(--space-3);
  background-color: var(--color-error-light);
  color: var(--color-error);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

.ss-exportButtonsContainer {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ss-backBtn {
  flex: 1;
  padding: var(--space-3);
  background-color: white;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.ss-doneBtn {
  flex: 1;
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.ss-pageWrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.ss-cardWrapper {
  background-color: var(--brand-surface);
  border-radius: 12px;
  width: 600px;
  max-height: 90vh;
  overflow: auto;
}

.ss-modalHeader {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.ss-pageTitle {
  margin: 0;
  color: white;
}

.ss-closeButton {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-modalBody {
  padding: 24px;
}

.ss-promptLabel {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
}

.ss-planSelectionContainer {
  padding: 16px;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  margin-bottom: 16px;
}



/* --- TrainerPortal.jsx extracted styles --- */


.tp-pageWrapper {
  min-height: 100vh;
  background-color: var(--brand-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tp-cardWrapper {
  background-color: var(--brand-surface);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  padding: 40px;
}

.tp-cardHeader {
  text-align: center;
  margin-bottom: 30px;
}

.tp-portalTitle {
  color: var(--brand-primary);
  margin-bottom: 10px;
}

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

.tp-errorMessage {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-light);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
  color: var(--color-error);
}

.tp-formFieldGroup {
  margin-bottom: 20px;
}

.tp-accessCodeLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.tp-passcodeInput {
  width: 100%;
  padding: 12px;
  font-size: 18px;
  letter-spacing: 2px;
  font-family: var(--font-mono);
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  text-align: center;
  box-sizing: border-box;
}

.tp-helperText {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 8px;
  text-align: center;
}

.tp-validateBtn {
  width: 100%;
  padding: 14px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
}

.tp-importantNotesSection {
  margin-top: 30px;
  padding: 15px;
  background-color: var(--color-info-light);
  border-radius: 6px;
  font-size: 13px;
  color: var(--brand-primary);
}

.tp-importantPointsList {
  margin: 10px 0 0 20px;
  padding-left: 0;
}

.tp-pageWrapperForm {
  min-height: 100vh;
  background-color: var(--brand-surface-elevated);
  padding: 20px;
}

.tp-cardWrapperForm {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--brand-surface);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.tp-formHeader {
  background-color: var(--color-info-light);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.tp-clientNameHeading {
  margin: 0 0 10px 0;
  color: var(--brand-primary);
}

.tp-reportDateText {
  margin: 0;
  color: var(--brand-primary);
}

.tp-errorMessageForm {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-light);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
  color: var(--color-error);
}

.tp-trainerSelectionField {
  margin-bottom: 25px;
}

.tp-trainerSelectionLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.tp-trainerSelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  font-size: 16px;
}

.tp-responseCategoryField {
  margin-bottom: 25px;
}

.tp-categoryLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.tp-categorySelect {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  font-size: 16px;
}

.tp-responseTextField {
  margin-bottom: 25px;
}

.tp-responseLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--brand-text);
}

.tp-responseTextarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--brand-border);
  border-radius: 6px;
  font-size: 16px;
  font-family: var(--font-body);
  resize: vertical;
  box-sizing: border-box;
}

.tp-urgentCheckboxField {
  margin-bottom: 30px;
}

.tp-urgentCheckboxLabel {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.tp-urgentCheckbox {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.tp-urgentCheckboxText {
  font-weight: bold;
  color: var(--color-error);
}

.tp-submitBtn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
}

.tp-noteSection {
  margin-top: 30px;
  padding: 15px;
  background-color: var(--brand-surface-elevated);
  border-radius: 6px;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.tp-pageWrapperSuccess {
  min-height: 100vh;
  background-color: var(--brand-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tp-cardWrapperSuccess {
  background-color: var(--brand-surface);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  padding: 40px;
  text-align: center;
}

.tp-successIconPlaceholder {
  font-size: 64px;
  margin-bottom: 20px;
}

.tp-successHeading {
  color: var(--color-success);
  margin-bottom: 15px;
}

.tp-successMessage {
  color: var(--brand-text-muted);
  margin-bottom: 25px;
  line-height: 1.6;
}

.tp-urgentNotificationSection {
  background-color: var(--color-error-light);
  border: 2px solid var(--color-error);
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 25px;
}

.tp-urgentNotificationText {
  margin: 0;
  color: var(--color-error);
  font-weight: bold;
}

.tp-finalNoteSection {
  background-color: var(--brand-surface-elevated);
  padding: 15px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--brand-text-muted);
}

.tp-finalNoteText {
  margin: 0;
}



/* ==========================================================================
   TrendsAnalysis.jsx — Analytics & Reporting Dashboard
   Prefix: ta-
   Sprint 18 Phase A/E — KPI cards, trend charts, AI analysis, XAI
   Design: D4S Prestige — navy gradient header, white content
   ========================================================================== */

/* --- Page Wrapper --- */
.ta-pageWrapper {
  padding: 0;
}
.ta-pageWrapper--hub {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.ta-pageWrapper--hub .ta-cardWrapper {
  width: 1000px;
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
}

.ta-cardWrapper {
  background-color: var(--brand-surface);
}

/* --- Header --- */
.ta-modalHeader {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
}
.ta-pageWrapper--hub .ta-modalHeader {
  border-radius: 12px 12px 0 0;
}
.ta-pageTitle {
  margin: 0;
  color: white;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  flex: 1;
}
.ta-closeButton,
.ta-backButton,
.ta-homeButton {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: background 0.2s;
}
.ta-closeButton:hover,
.ta-backButton:hover,
.ta-homeButton:hover {
  background: rgba(255,255,255,0.3);
}
.ta-closeButton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  padding: 0;
}
.ta-backButton {
  margin-right: 12px;
}

/* --- Body --- */
.ta-modalBody {
  padding: 24px;
}

/* --- Date Range Selector --- */
.ta-dateRange {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ta-dateRangeBtn {
  padding: 8px 18px;
  border: 1px solid var(--brand-border);
  border-radius: 20px;
  background: var(--brand-surface);
  color: var(--brand-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.ta-dateRangeBtn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.ta-dateRangeBtn--active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* --- KPI Grid --- */
.ta-kpiGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.ta-kpiCard {
  background: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.ta-kpiValue {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-primary);
  font-family: var(--font-heading);
}
.ta-kpiLabel {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  margin-top: 4px;
  font-weight: 500;
}
.ta-kpiChange {
  font-size: 0.75rem;
  margin-top: 6px;
  font-weight: 600;
}
.ta-kpiChange--up {
  color: var(--color-success);
}
.ta-kpiChange--down {
  color: var(--color-error);
}

/* --- Main Tabs (Trends | Reports) --- */
.ta-mainTabs {
  display: flex;
  border-bottom: 3px solid var(--brand-border);
  margin-bottom: 4px;
}
.ta-mainTab {
  padding: 12px 24px;
  border: none;
  background: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--brand-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.ta-mainTab:hover {
  color: var(--brand-primary);
}
.ta-mainTab--active {
  color: var(--brand-primary);
  font-weight: 700;
  border-bottom-color: var(--brand-primary);
}

/* --- Category Sub-Tabs --- */
.ta-categoryTabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 20px;
  flex-wrap: wrap;
}
.ta-categoryTab {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 0.85rem;
  color: var(--brand-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.ta-categoryTab:hover {
  color: var(--brand-primary);
}
.ta-categoryTab--active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-accent);
  font-weight: 600;
}

/* --- Chart Area --- */
.ta-chartContainer {
  margin-bottom: 24px;
}
.ta-chartTitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 12px;
}
.ta-chartBars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding: 0 8px;
  border-bottom: 1px solid var(--brand-border);
}
.ta-chartBarCol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.ta-chartBar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
}
.ta-chartBarLabel {
  font-size: 0.7rem;
  color: var(--brand-text-muted);
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;
}
.ta-chartEmpty {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
  font-size: 0.9rem;
}

/* --- Trend Summaries --- */
.ta-summariesSection {
  margin-top: 24px;
}
.ta-summariesTitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 12px;
}
.ta-summariesGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ta-summaryCard {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
}
.ta-summaryHeader {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--brand-surface-elevated);
  border-bottom: 1px solid var(--brand-border);
}
.ta-summaryStatus {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
}
.ta-summaryStatus--improving {
  color: var(--color-success);
  background: var(--color-success-light);
}
.ta-summaryStatus--declining {
  color: var(--color-error);
  background: var(--color-error-light);
}
.ta-summaryStatus--stable {
  color: var(--color-warning);
  background: var(--color-warning-light);
}
.ta-summaryBody {
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--brand-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ta-summaryHighlight {
  display: inline;
}
.ta-summaryHighlight + .ta-summaryHighlight::before {
  content: '\2022';
  margin: 0 6px;
  color: var(--brand-border);
}

/* --- AI Analysis Section --- */
.ta-aiSection {
  text-align: center;
  margin-top: 28px;
  padding: 24px 0;
}
.ta-aiButton {
  padding: 14px 36px;
  font-size: 0.95rem;
}
.ta-aiHint {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  margin-top: 8px;
}
.ta-aiResults {
  margin-top: 24px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
}
.ta-aiResultsHeader {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--brand-surface-elevated);
  border-bottom: 1px solid var(--brand-border);
}
.ta-aiResultsHeader h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--brand-primary);
}
.ta-aiResultsActions {
  display: flex;
  gap: 8px;
}
.ta-xaiToggle {
  font-size: 0.8rem;
}
.ta-aiBlock {
  padding: 16px 20px;
  border-bottom: 1px solid var(--brand-border);
}
.ta-aiBlock:last-of-type {
  border-bottom: none;
}
.ta-aiBlockTitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin: 0 0 10px;
}
.ta-aiList {
  margin: 0;
  padding-left: 20px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--brand-text);
}
.ta-aiList--strengths li::marker {
  color: var(--color-success);
}
.ta-aiList--improvements li::marker {
  color: var(--color-warning);
}

/* --- Loading & Error States --- */
.ta-loadingContainer {
  text-align: center;
  padding: 48px 24px;
  color: var(--brand-text-muted);
}
.ta-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--brand-border);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: ta-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes ta-spin {
  to { transform: rotate(360deg); }
}
.ta-errorContainer {
  text-align: center;
  padding: 40px;
  color: var(--color-error);
}
.ta-errorContainer .btn {
  margin-top: 12px;
}

/* --- Reports Tab --- */
.ta-reportsSection {
  padding-top: 16px;
}
.ta-reportsSectionTitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-text);
  margin: 20px 0 12px;
}
.ta-reportsSectionTitle:first-child {
  margin-top: 0;
}
.ta-sendReportGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.ta-sendReportCard {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.ta-sendReportIcon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.ta-sendReportTitle {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-text);
  margin-bottom: 8px;
}
.ta-sendReportDesc {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.ta-sendReportBtn {
  width: 100%;
  font-size: 0.85rem;
}
.ta-reportsEmpty {
  text-align: center;
  padding: 40px 24px;
  color: var(--brand-text-muted);
  font-size: 0.9rem;
}
.ta-reportsList {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
}
.ta-reportsListHeader {
  display: flex;
  padding: 10px 14px;
  background: var(--brand-surface-elevated);
  border-bottom: 1px solid var(--brand-border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ta-reportsListRow {
  display: flex;
  padding: 12px 14px;
  border-bottom: 1px solid var(--brand-border);
  font-size: 0.85rem;
  align-items: center;
}
.ta-reportsListRow:last-child {
  border-bottom: none;
}
.ta-reportsCol--recipient { flex: 2; }
.ta-reportsCol--type { flex: 1; }
.ta-reportsCol--date { flex: 1; }
.ta-reportsCol--status { flex: 1; }
.ta-reportsCol--actions { flex: 1; text-align: right; }
.ta-reportTypeBadge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.ta-reportTypeBadge--provider {
  background: var(--color-info-light);
  color: var(--color-info);
}
.ta-reportTypeBadge--trainer {
  background: var(--color-success-light);
  color: var(--color-success);
}
.ta-reportStatus {
  font-size: 0.8rem;
  font-weight: 500;
}
.ta-reportStatus--sent { color: var(--color-info); }
.ta-reportStatus--responded { color: var(--color-success); }
.ta-reportStatus--pending { color: var(--color-warning); }
.ta-printHint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-right: auto;
}

/* Send Report Inline Form */
.ta-sendForm {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
}
.ta-sendFormHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.ta-sendFormHeader h4 {
  font-family: var(--font-heading);
  color: var(--brand-primary);
  margin: 0;
}
.ta-sendFormSection {
  margin-bottom: var(--space-3);
}
.ta-sendFormLabel {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.ta-sendFormEmpty {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
}
.ta-sendCheckboxGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.ta-sendCheckbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.ta-sendCheckbox input[type="checkbox"] {
  accent-color: var(--brand-primary);
}
.ta-sendProgress {
  margin: var(--space-3) 0;
}
.ta-sendProgressBar {
  height: 8px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ta-sendProgressFill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s;
}
.ta-sendProgressText {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  display: block;
}
.ta-sendFormActions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}
.ta-sendComplete {
  text-align: center;
  padding: var(--space-6);
}
.ta-sendCompleteIcon {
  font-size: 3rem;
  margin-bottom: var(--space-2);
}
.ta-sendComplete h4 {
  color: var(--brand-primary);
  font-family: var(--font-heading);
}
.ta-sendComplete p {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

@media (max-width: 768px) {
  .ta-sendReportGrid {
    grid-template-columns: 1fr;
  }
  .ta-reportsListHeader {
    display: none;
  }
  .ta-reportsListRow {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .ta-reportsCol--actions {
    text-align: left;
  }
  .ta-sendCheckboxGrid {
    grid-template-columns: 1fr;
  }
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .ta-kpiGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ta-kpiValue {
    font-size: 1.3rem;
  }
  .ta-summariesGrid {
    grid-template-columns: 1fr;
  }
  .ta-chartBars {
    height: 120px;
  }
  .ta-mainTab {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}
@media (max-width: 480px) {
  .ta-modalBody {
    padding: 16px;
  }
  .ta-kpiGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ta-kpiCard {
    padding: 12px 8px;
  }
  .ta-kpiValue {
    font-size: 1.1rem;
  }
  .ta-kpiLabel {
    font-size: 0.7rem;
  }
  .ta-dateRange {
    gap: 6px;
  }
  .ta-dateRangeBtn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .ta-categoryTabs {
    gap: 2px;
  }
  .ta-categoryTab {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
  .ta-aiResultsHeader {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}



/* ==========================================================================
   PantryItemViewModal.jsx — Semantic CSS Classes
   Prefix: pivm-
   Design: Modal — navy gradient header, white content, Design 4 Prestige
   ========================================================================== */

/* --- Overlay & Modal Shell --- */
.pivm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop, 1001);
  padding: var(--space-5);
}

.pivm-modal {
  background-color: var(--brand-surface, white);
  border-radius: var(--radius-xl);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.3));
}

/* --- Modal Header (ALWAYS navy gradient + white text) --- */
.pivm-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  color: white;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.pivm-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: white;
}

.pivm-closeButton {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.pivm-closeButton:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Content Area --- */
.pivm-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}

/* --- Sections --- */
.pivm-section {
  margin-bottom: var(--space-6);
}

.pivm-sectionTitle {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--brand-border);
}

/* --- Field Rows --- */
.pivm-fieldRow {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--brand-surface-elevated);
}

.pivm-fieldLabel {
  font-weight: 500;
  color: var(--brand-text-secondary);
  font-size: var(--text-base);
}

.pivm-fieldValue {
  color: var(--brand-text-primary);
  font-size: var(--text-base);
  text-align: right;
  max-width: 60%;
}

/* --- Badges --- */
.pivm-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-right: 6px;
  margin-bottom: 6px;
}

.pivm-badge--green {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.pivm-badge--blue {
  background-color: var(--color-info-light);
  color: var(--brand-primary);
}

.pivm-badge--yellow {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.pivm-badge--red {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

.pivm-badge--navy {
  background-color: rgba(30, 58, 95, 0.08);
  color: var(--brand-primary);
}

.pivm-badgeList {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.pivm-noneText {
  color: var(--brand-text-placeholder);
}

/* --- No Data States --- */
.pivm-noData {
  text-align: center;
  padding: 40px var(--space-5);
  color: var(--brand-text-placeholder);
}

.pivm-noDataSection {
  background-color: var(--color-warning-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.pivm-noDataWarning {
  margin: 0;
  color: var(--color-warning);
}

.pivm-noDataHint {
  margin: var(--space-2) 0 0 0;
  font-size: 13px;
  color: var(--color-warning);
}

/* --- Nutrition Grid --- */
.pivm-nutritionGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.pivm-nutritionCard {
  background-color: var(--brand-surface-elevated);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
}

.pivm-nutritionValue {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--brand-text-primary);
}

.pivm-nutritionLabel {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-top: 4px;
}

.pivm-servingInfo {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--brand-text-muted);
}

/* --- Quality Scores --- */
.pivm-scoresGrid {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

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

.pivm-scoreBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--text-2xl);
  color: white;
}

.pivm-scoreLabel {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-top: 6px;
}

/* --- Text Blocks --- */
.pivm-ingredientsText {
  font-size: 13px;
  color: var(--brand-text-muted);
  line-height: 1.6;
  margin: 0;
  background-color: var(--brand-surface-elevated);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.pivm-notesText {
  font-size: var(--text-base);
  color: var(--brand-text-muted);
  margin: 0;
  font-style: italic;
  background-color: var(--brand-surface-elevated);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-primary);
}

/* --- Product Image --- */
.pivm-productImage {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* --- Inventory Status Badges --- */
.pivm-statusBadges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pivm-statusBadge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-family: var(--font-body);
}

.pivm-statusBadge--refrigerator {
  background-color: #DBEAFE;
  color: #1E40AF;
}

.pivm-statusBadge--pantry {
  background-color: #FEF3C7;
  color: #92400E;
}

.pivm-statusBadge--freezer {
  background-color: #E0F2FE;
  color: #0369A1;
}

.pivm-statusBadge--opened {
  background-color: #FEF3C7;
  color: #92400E;
}

.pivm-statusBadge--frozen {
  background-color: #DBEAFE;
  color: #1E40AF;
}

.pivm-statusBadge--outofstock {
  background-color: #FEE2E2;
  color: #991B1B;
}

.pivm-statusBadge--lowstock {
  background-color: #FEF3C7;
  color: #92400E;
}

/* --- FoodKeeper Tips --- */
.pivm-foodkeeperTips {
  margin-top: var(--space-3);
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pivm-foodkeeperLabel {
  background-color: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pivm-foodkeeperContent {
  padding: var(--space-3);
}

.pivm-storageTip {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--brand-text-secondary);
  font-style: italic;
}

.pivm-freezeWarning {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: #DC2626;
  font-weight: 600;
}

/* --- Footer --- */
.pivm-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--brand-border);
  display: flex;
  justify-content: center;
}

.pivm-dismissButton {
  padding: var(--space-3) 48px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.pivm-dismissButton:hover {
  opacity: 0.9;
}

/* ==========================================================================
   RecipeForm — Add Recipe Modal Redesign
   Prefix: rf-
   Theme: Design 4 Prestige — mode selector, file upload, AI extraction
   ========================================================================== */

/* --- Mode Selector --- */
.rf-modeSelector {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rf-modePrompt {
  font-size: 15px;
  color: var(--brand-text-muted, #4B5563);
  margin-bottom: 4px;
}
.rf-modeCard {
  border: 2px solid var(--brand-border, #E5E7EB);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.rf-modeCard:hover {
  border-color: var(--brand-primary, #1E3A5F);
  background: var(--brand-surface-elevated, #F8FAFC);
}
.rf-modeCardTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rf-modeCardDesc {
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
  line-height: 1.5;
}
.rf-modeIcon {
  font-size: 22px;
}

/* --- Back Link --- */
.rf-backLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
  cursor: pointer;
  margin-bottom: 16px;
  background: none;
  border: none;
  font-family: var(--font-body, 'Outfit', sans-serif);
  padding: 0;
}
.rf-backLink:hover {
  color: var(--brand-primary, #1E3A5F);
}

/* --- Upload Zone --- */
.rf-uploadZone {
  border: 2px dashed var(--brand-accent, #C9A962);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #FFFCF5;
  margin-bottom: 16px;
}
.rf-uploadZone:hover {
  border-color: var(--brand-primary, #1E3A5F);
  background: var(--brand-surface-elevated, #F8FAFC);
}
.rf-uploadZone--dragging {
  border-color: var(--brand-primary, #1E3A5F);
  background: var(--brand-surface-elevated, #F8FAFC);
}
.rf-uploadIcon {
  font-size: 28px;
  margin-bottom: 8px;
}
.rf-uploadTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-primary, #1E3A5F);
}
.rf-uploadSubtitle {
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
  margin-top: 4px;
}

/* --- Uploaded File Card --- */
.rf-uploadedFile {
  border: 2px solid var(--brand-primary, #1E3A5F);
  border-radius: 12px;
  padding: 16px 20px;
  background: #EBF0F7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.rf-uploadedFileInfo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rf-uploadedFileIcon {
  font-size: 22px;
}
.rf-uploadedFileName {
  font-size: 14px;
  font-weight: 600;
}
.rf-uploadedFileSize {
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
}
.rf-uploadedFileRemove {
  background: none;
  border: none;
  color: var(--color-error, #EF4444);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-body, 'Outfit', sans-serif);
}

/* --- Extraction Banner --- */
.rf-extractionBanner {
  background: linear-gradient(135deg, #EBF0F7 0%, #F0F4FA 100%);
  border: 1px solid #C9D5E3;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rf-extractionBanner--success {
  border-color: #A3D9A5;
  background: linear-gradient(135deg, #F0FAF0 0%, #F5FBF5 100%);
}
.rf-ebIcon {
  font-size: 20px;
  flex-shrink: 0;
}
.rf-ebText {
  font-size: 13px;
  color: var(--brand-primary, #1E3A5F);
  line-height: 1.4;
}
.rf-ebText strong {
  font-weight: 600;
}

/* --- Image Checkbox --- */
.rf-imageCheckboxRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  color: var(--brand-text-muted, #4B5563);
  cursor: pointer;
}
.rf-imageCheckboxRow input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-accent, #C9A962);
}

/* --- Extract Button --- */
.rf-extractBtn {
  width: 100%;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--brand-accent, #C9A962) 0%, var(--brand-accent-light, #E8D5A3) 100%);
  color: var(--brand-primary, #1E3A5F);
  font-weight: 600;
}
.rf-extractBtn:hover {
  background: linear-gradient(135deg, #B89A55 0%, #D4C28F 100%);
}

/* --- Extraction Progress --- */
.rf-extractionProgress {
  background: #EBF0F7;
  border: 1px solid #C9D5E3;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.rf-extractionSpinner {
  width: 36px;
  height: 36px;
  border: 3px solid #E5E7EB;
  border-top-color: var(--brand-primary, #1E3A5F);
  border-radius: 50%;
  animation: rf-spin 0.8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes rf-spin {
  to { transform: rotate(360deg); }
}
.rf-extractionProgressText {
  font-size: 13px;
  color: var(--brand-primary, #1E3A5F);
  font-weight: 500;
}
.rf-extractionProgressSub {
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
  margin-top: 4px;
  font-weight: 400;
}

/* --- Extraction Error --- */
.rf-extractionError {
  background: var(--color-error-light, #FEF2F2);
  border: 1px solid var(--color-error, #EF4444);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  color: var(--color-error, #EF4444);
  font-size: 13px;
}
.rf-retryBtn {
  margin-top: 8px;
  font-size: 12px;
}

/* --- Section Divider --- */
.rf-sectionDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #9CA3AF;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rf-sectionDivider::before,
.rf-sectionDivider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--brand-border, #E5E7EB);
}

/* --- Form Section --- */
.rf-formSection {
  transition: opacity 0.2s;
}
.rf-formSection--disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* --- Nutrition Grid --- */
.rf-nutritionGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.rf-nutritionGrid .form-group {
  margin-bottom: 0;
}
.rf-nutritionGrid .form-label {
  font-size: 12px;
}

/* --- Validation Info --- */
.rf-validationInfo {
  background: #FFFCF5;
  border: 1px solid var(--brand-accent-light, #E8D5A3);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  color: #92722A;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
.rf-viIcon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ==========================================================================
   HealistScoreDisplay.jsx — Semantic CSS Classes
   Prefix: hsd-
   Design: Embedded card — white surface, score visualization, Design 4 Prestige
   ========================================================================== */

/* --- Container --- */
.hsd-container {
  background-color: var(--brand-surface, white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  max-width: 600px;
}

.hsd-container--compact {
  padding: var(--space-4);
}

/* --- Header --- */
.hsd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}

.hsd-title {
  margin: 0;
  font-size: 1.3rem;
  color: var(--brand-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hsd-container--compact .hsd-title {
  font-size: 1.1rem;
}

.hsd-refreshButton {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hsd-refreshButton:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* --- Score Circle --- */
.hsd-scoreCircle {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto var(--space-5);
}

.hsd-container--compact .hsd-scoreCircle {
  width: 120px;
  height: 120px;
}

.hsd-scoreRing {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hsd-scoreRingProgress {
  transition: stroke-dashoffset 0.5s ease;
}

.hsd-scoreValue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hsd-scoreNumber {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.hsd-container--compact .hsd-scoreNumber {
  font-size: 2rem;
}

.hsd-scoreGrade {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 4px;
}

.hsd-container--compact .hsd-scoreGrade {
  font-size: 1rem;
}

.hsd-gradeLabel {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  margin-top: 2px;
}

/* --- Component Breakdown Grid --- */
.hsd-componentsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hsd-componentCard {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
}

.hsd-componentHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.hsd-componentLabel {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  font-weight: 500;
}

.hsd-componentValue {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hsd-componentScore {
  font-size: 1.2rem;
  font-weight: 700;
}

.hsd-componentWeight {
  font-size: 0.75rem;
  color: var(--brand-text-placeholder);
  background-color: var(--brand-surface-elevated);
  padding: 2px 6px;
  border-radius: 4px;
}

/* --- Progress Bar --- */
.hsd-progressBar {
  height: 4px;
  background-color: var(--brand-border);
  border-radius: 2px;
  margin-top: var(--space-2);
  overflow: hidden;
}

.hsd-progressFill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* --- Recommendations --- */
.hsd-recommendations {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--brand-border);
}

.hsd-recommendationTitle {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--brand-text-primary);
}

.hsd-recommendationCard {
  padding: var(--space-3);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  border-left: 3px solid;
}

.hsd-recommendationArea {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.hsd-recommendationMessage {
  font-size: 0.9rem;
  color: var(--brand-text-secondary);
}

.hsd-recommendationTip {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  margin-top: 6px;
  font-style: italic;
}

/* --- State Screens --- */
.hsd-loading {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
}

.hsd-error {
  text-align: center;
  padding: 40px;
  color: var(--color-error);
}

.hsd-noData {
  text-align: center;
  padding: 40px var(--space-5);
  color: var(--brand-text-muted);
}

.hsd-noDataIcon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.hsd-noDataTitle {
  margin: 0 0 var(--space-2) 0;
}

.hsd-noDataMessage {
  margin: 0;
}

/* --- Meta Row (change indicator) --- */
.hsd-metaRow {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.hsd-changeIndicator {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
}

.hsd-changeIndicator--positive {
  color: var(--color-success, #059669);
  background-color: #D1FAE5;
}

.hsd-changeIndicator--negative {
  color: var(--color-error, #EF4444);
  background-color: #FEE2E2;
}

/* --- Healist Age --- */
.hsd-healistAge {
  text-align: center;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-border);
}

.hsd-healistAgeLabel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.hsd-healistAgeValue {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}

.hsd-healistAgeNumber {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
}

.hsd-healistAgeDiff {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-text-secondary);
}

.hsd-healistAgeActual {
  font-size: 0.75rem;
  color: var(--brand-text-placeholder);
  margin-top: 4px;
}

.hsd-healistAgePrompt {
  font-size: 0.85rem;
  color: var(--brand-text-secondary);
  padding: var(--space-2) 0;
}

/* --- No Data Badge (on component cards) --- */
.hsd-noDataBadge {
  font-size: 0.75rem;
  color: var(--brand-text-placeholder);
  background-color: var(--brand-surface);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--brand-border);
}

/* --- History Sparkline --- */
.hsd-historySection {
  margin-top: var(--space-4);
  text-align: center;
}

.hsd-historyToggle {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text-secondary);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hsd-historyToggle:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.hsd-historyBars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-2);
  height: 80px;
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
}

.hsd-historyBarWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 40px;
  height: 100%;
  justify-content: flex-end;
}

.hsd-historyBar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.hsd-historyBarLabel {
  font-size: 0.65rem;
  color: var(--brand-text-placeholder);
  margin-top: 4px;
}

/* --- Dashboard Modal: Score grade + no-data badges --- */
.score-grade-badge {
  text-align: center;
  font-size: 1.1rem;
  font-weight: var(--font-bold);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--brand-border);
}

.score-no-data-badge {
  font-size: var(--text-sm);
  color: var(--brand-text-placeholder);
  background-color: var(--brand-surface);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--brand-border);
}

/* --- Last Updated --- */
.hsd-lastUpdated {
  font-size: 0.75rem;
  color: var(--brand-text-placeholder);
  text-align: center;
  margin-top: var(--space-4);
}

/* --- Mobile: stack grid to 1 column --- */
@media (max-width: 480px) {
  .hsd-componentsGrid {
    grid-template-columns: 1fr;
  }
  .hsd-container {
    padding: var(--space-4);
  }
  .hsd-healistAgeNumber {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   ProfileTab.jsx — Semantic CSS Classes
   Prefix: pt-
   Design: Dark theme (Profile section) — consistent with Fitness palette
   Note: Utility classes .pt-3, .pt-4 at lines 1036-1037 are UNRELATED
   
   REMAINING INLINE STYLES (4 — dynamic JS color values):
   1. BMI estimated value color — bmiColors[displayCategory]
   2. BMI category badge bg — bmiColors + alpha
   3. Actual BMI value color — bmiColors[getBmiCategory()]
   4. Calculate button opacity — calculating state
   ========================================================================== */

/* --- Container & Layout --- */
.pt-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.pt-header {
  margin-bottom: 20px;
}

.pt-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-primary-dark);
  margin-bottom: 10px;
}

.pt-subtitle {
  font-size: 14px;
  color: var(--brand-text-muted);
}

/* --- Tabs --- */
.pt-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.pt-tab {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--brand-surface);
  color: var(--brand-text-muted);
  transition: all 0.2s;
}

.pt-tab--active {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  color: white;
  border-color: transparent;
}

/* --- Section --- */
.pt-section {
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--brand-border);
}

.pt-sectionTitle {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
  margin-bottom: var(--space-5);
}

/* --- Form Grid --- */
.pt-formGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.pt-fieldGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pt-label {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--font-medium);
}

.pt-fieldHint {
  font-size: var(--text-xs);
  color: var(--brand-gold);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

.pt-inputRow {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pt-input {
  flex: 1;
  padding: var(--space-3);
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  color: var(--brand-text);
  font-size: var(--text-base);
}

.pt-select {
  padding: var(--space-3);
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  color: var(--brand-text);
  font-size: var(--text-base);
}

/* --- Unit Toggle --- */
.pt-unitToggle {
  display: flex;
  gap: 0;
}

.pt-unitButton {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid var(--brand-border);
  cursor: pointer;
  background-color: var(--brand-surface);
  color: var(--brand-text-muted);
  transition: all 0.2s;
}

.pt-unitButton--left {
  border-radius: 8px 0 0 8px;
  border-right: none;
}

.pt-unitButton--right {
  border-radius: 0 8px 8px 0;
}

.pt-unitButton--active {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  color: white;
  border-color: transparent;
}

/* --- Level Buttons --- */
.pt-levelButtons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pt-levelButton {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background-color: var(--brand-surface);
  color: var(--brand-text-muted);
  transition: all 0.2s;
}

.pt-levelButton--active {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  color: white;
  border-color: transparent;
}

/* --- BMI Section --- */
.pt-bmiSection {
  margin-top: var(--space-7);
  padding: var(--space-6);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-border);
}

.pt-bmiHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pt-bmiTitle {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
}

.pt-calculateButton {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: var(--brand-text-light);
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}
.pt-calculateButton:hover {
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.3);
  transform: translateY(-1px);
}

.pt-bmiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.pt-bmiCard {
  padding: var(--space-4);
  background-color: var(--brand-surface);
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid var(--brand-border);
}

.pt-bmiValue {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 5px;
}

.pt-bmiValue--recommended {
  color: var(--color-success);
}

.pt-bmiLabel {
  font-size: 11px;
  color: var(--brand-text-muted);
  text-transform: uppercase;
}

.pt-bmiCategory {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

.pt-healthNotes {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  line-height: 1.5;
  border: 1px solid var(--brand-border);
}

/* --- Save Bar --- */
.pt-saveBar {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--brand-border);
}

.pt-saveButton {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  cursor: pointer;
  background-color: var(--brand-surface);
  color: var(--brand-text-muted);
  transition: all 0.2s ease;
}

.pt-saveButton--active {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  color: white;
  border-color: transparent;
}

/* --- States --- */
.pt-error {
  padding: 15px;
  background-color: rgba(244, 67, 54, 0.2);
  border-radius: 8px;
  color: var(--color-error);
  margin-bottom: 15px;
}

.pt-loading {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
}

/* --- Healist Score Wrapper --- */
.pt-healistScoreWrapper {
  background-color: var(--brand-surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   DietComplianceChecker.jsx — Semantic CSS Classes
   Prefix: dcc-
   Design: Design 4 Prestige — Navy/Gold with CSS variables
   ========================================================================== */

/* ===== DietComplianceChecker — Container ===== */
.dcc-container {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 500px;
  box-shadow: var(--shadow-sm);
}

.dcc-container--embedded {
  background-color: var(--color-success-light);
  border-color: var(--color-success-light);
  box-shadow: none;
}

/* ===== DietComplianceChecker — Header ===== */
.dcc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.dcc-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--brand-primary);
  font-family: var(--font-heading);
}

.dcc-closeButton {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--brand-text-muted);
  transition: color var(--transition);
}

.dcc-closeButton:hover {
  color: var(--brand-text);
}

/* ===== DietComplianceChecker — Input Row ===== */
.dcc-inputRow {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dcc-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--brand-text);
}

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

.dcc-checkButton {
  padding: 10px var(--space-5);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: all var(--transition);
  box-shadow: var(--shadow-btn-primary);
}

.dcc-checkButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.3);
}

/* ===== DietComplianceChecker — Product Card ===== */
.dcc-productCard {
  padding: var(--space-3);
  background-color: var(--brand-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  border: 1px solid var(--brand-border);
}

.dcc-productImage {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: var(--radius);
  background-color: var(--brand-surface-elevated);
}

.dcc-productInfo {
  flex: 1;
}

.dcc-productName {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 2px;
  color: var(--brand-text);
}

.dcc-productBrand {
  color: var(--brand-text-muted);
  font-size: var(--text-sm);
}

/* ===== DietComplianceChecker — Strictness Selector ===== */
.dcc-strictnessRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.dcc-strictnessButtons {
  display: flex;
  gap: var(--space-1);
}

.dcc-strictnessButton {
  padding: 4px 10px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  cursor: pointer;
  text-transform: capitalize;
  background: var(--brand-surface);
  color: var(--brand-text-muted);
  font-family: var(--font-body);
  transition: all var(--transition);
}

.dcc-strictnessButton--active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* ===== DietComplianceChecker — Compliance Badge ===== */
.dcc-badgeRow {
  text-align: center;
  margin-bottom: var(--space-3);
}

.dcc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
}

.dcc-badge--compliant {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

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

.dcc-badge--fail {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

/* ===== DietComplianceChecker — Diet Fit Meter ===== */
.dcc-dietFitMeter {
  margin-bottom: var(--space-3);
}

.dcc-dietFitLabel {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--text-sm);
}

.dcc-dietFitLabelText {
  font-weight: 600;
  color: var(--brand-text);
}

.dcc-dietFitPercent {
  font-weight: 700;
}

.dcc-dietFitBar {
  height: 10px;
  background-color: var(--brand-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dcc-dietFitFill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* ===== DietComplianceChecker — Issues ===== */
.dcc-issuesList {
  margin-bottom: var(--space-3);
}

.dcc-issuesTitle {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-base);
  color: var(--color-error);
  font-family: var(--font-heading);
}

.dcc-issueCard {
  padding: 10px;
  border-radius: var(--radius);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.dcc-issueIcon {
  font-size: var(--text-base);
}

.dcc-issueContent {
  flex: 1;
}

.dcc-issueType {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.dcc-issueMessage {
  font-size: var(--text-sm);
  color: var(--brand-text);
}

/* ===== DietComplianceChecker — Warnings ===== */
.dcc-warningsSection {
  margin-bottom: var(--space-3);
}

.dcc-warningsTitle {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-base);
  color: var(--color-warning);
  font-family: var(--font-heading);
}

.dcc-warningCard {
  padding: var(--space-2) 10px;
  background-color: var(--color-warning-light);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-size: var(--text-sm);
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ===== DietComplianceChecker — Nutrition Grid ===== */
.dcc-nutritionGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.dcc-nutritionItem {
  text-align: center;
  background: var(--brand-surface);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--brand-border);
}

.dcc-nutritionValue {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--brand-primary);
  font-family: var(--font-heading);
}

.dcc-nutritionLabel {
  font-size: 10px;
  color: var(--brand-text-placeholder);
}

/* ===== DietComplianceChecker — States ===== */
.dcc-error {
  padding: 10px;
  background-color: var(--color-error-light);
  color: var(--color-error);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
}

.dcc-loading {
  text-align: center;
  padding: var(--space-5);
  color: var(--brand-text-muted);
}

/* ===== DietComplianceChecker — Check Another Button ===== */
.dcc-checkAnotherButton {
  margin-top: var(--space-3);
  width: 100%;
  padding: 10px;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--brand-text);
  transition: all var(--transition);
}

.dcc-checkAnotherButton:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}


/* ==========================================================================
   CarbonFootprintDashboard.jsx — Semantic CSS Classes
   Prefix: cfd-
   Design: Design 4 Prestige — Navy/Gold with CSS variables
   ========================================================================== */

/* ===== CarbonFootprintDashboard — Modal Structure ===== */
.cfd-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  padding: var(--space-4);
}

.cfd-modal {
  background-color: var(--brand-surface);
  border-radius: var(--radius-xl);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.cfd-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--brand-border);
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  color: white;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cfd-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: white;
  font-family: var(--font-heading);
}

.cfd-closeButton {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cfd-closeButton:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ===== CarbonFootprintDashboard — Tabs ===== */
.cfd-tabs {
  display: flex;
  background: var(--brand-surface);
  border-bottom: 2px solid var(--brand-border);
  padding: 0;
}

.cfd-tab {
  flex: 1;
  padding: 14px var(--space-5);
  border: none;
  background: transparent;
  color: var(--brand-text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition);
}

.cfd-tab:hover {
  color: var(--brand-primary);
}

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

/* ===== CarbonFootprintDashboard — Content ===== */
.cfd-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}

/* ===== CarbonFootprintDashboard — Grade Card ===== */
.cfd-gradeCard {
  text-align: center;
  padding: 30px;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

.cfd-gradeLabel {
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: var(--space-2);
  opacity: 0.8;
}

.cfd-gradeValue {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-heading);
}

.cfd-gradeSubtext {
  font-size: var(--text-base);
  margin-top: var(--space-2);
  opacity: 0.7;
}

/* ===== CarbonFootprintDashboard — Stats Grid ===== */
.cfd-statsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.cfd-statCard {
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}

.cfd-statValue {
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--brand-text);
  font-family: var(--font-heading);
}

.cfd-statLabel {
  font-size: 13px;
  color: var(--brand-text-muted);
  margin-top: var(--space-1);
}

/* ===== CarbonFootprintDashboard — Breakdown ===== */
.cfd-breakdownSection {
  margin-bottom: var(--space-6);
}

.cfd-sectionTitle {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--brand-text);
  font-family: var(--font-heading);
}

.cfd-breakdownBar {
  display: flex;
  height: 32px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.cfd-breakdownSegment {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--text-sm);
  font-weight: 500;
  min-width: 30px;
}

.cfd-segmentA { background-color: var(--color-success); }
.cfd-segmentB { background-color: var(--color-success); }
.cfd-segmentC { background-color: var(--color-warning); }
.cfd-segmentD { background-color: var(--color-warning); }
.cfd-segmentE { background-color: var(--color-error); }
.cfd-segmentUnscored { background-color: var(--brand-text-placeholder); }

.cfd-breakdownLegend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cfd-legendItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.cfd-legendDot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.cfd-dotA { background-color: var(--color-success); }
.cfd-dotB { background-color: var(--color-success); }
.cfd-dotC { background-color: var(--color-warning); }
.cfd-dotD { background-color: var(--color-warning); }
.cfd-dotE { background-color: var(--color-error); }
.cfd-dotUnscored { background-color: var(--brand-text-placeholder); }

/* ===== CarbonFootprintDashboard — Suggestions ===== */
.cfd-suggestionsList {
  background-color: var(--color-success-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.cfd-suggestionsTitle {
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-success);
}

.cfd-suggestion {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-success-light);
  font-size: var(--text-base);
  color: var(--color-success);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cfd-suggestion:last-child {
  border-bottom: none;
}

/* ===== CarbonFootprintDashboard — History Chart ===== */
.cfd-historyChart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  padding: var(--space-5) 0;
}

.cfd-historyBar {
  flex: 1;
  min-width: 8px;
  max-width: 20px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: opacity var(--transition);
}

.cfd-historyBar:hover {
  opacity: 0.8;
}

.cfd-historyLegend {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.cfd-historyStats {
  margin-top: var(--space-6);
}

/* ===== CarbonFootprintDashboard — Trend Badge ===== */
.cfd-trendBadge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

/* ===== CarbonFootprintDashboard — Weekly View ===== */
.cfd-weeklyHeader {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.cfd-weeklyGradeCard {
  flex: 1;
  margin-bottom: 0;
}

.cfd-weeklyGradeValue {
  font-size: var(--text-6xl);
}

.cfd-weeklyInfoPanel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.cfd-weeklyDateRange {
  font-size: var(--text-base);
  color: var(--brand-text-muted);
}

.cfd-weeklyItemCount {
  font-size: var(--text-base);
  color: var(--brand-text);
}

.cfd-dailyGrid {
  display: flex;
  gap: var(--space-2);
}

.cfd-dayCard {
  flex: 1;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
}

.cfd-dayCardLabel {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-bottom: var(--space-1);
}

.cfd-dayCardGrade {
  font-size: var(--text-3xl);
  font-weight: 600;
  font-family: var(--font-heading);
}

.cfd-dayCardCount {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
}

/* ===== CarbonFootprintDashboard — Monthly View ===== */
.cfd-comparisonBanner {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  text-align: center;
}

.cfd-comparisonIcon {
  font-size: var(--text-2xl);
}

.cfd-comparisonText {
  margin-left: var(--space-2);
}

.cfd-bestWorstGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.cfd-bestDayCard {
  padding: var(--space-4);
  background-color: var(--color-success-light);
  border-radius: var(--radius-lg);
  text-align: center;
}

.cfd-bestDayLabel {
  font-size: var(--text-base);
  color: var(--color-success);
  margin-bottom: var(--space-1);
}

.cfd-bestDayGrade {
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--color-success);
  font-family: var(--font-heading);
}

.cfd-bestDayDate {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.cfd-worstDayCard {
  padding: var(--space-4);
  background-color: var(--color-error-light);
  border-radius: var(--radius-lg);
  text-align: center;
}

.cfd-worstDayLabel {
  font-size: var(--text-base);
  color: var(--color-error);
  margin-bottom: var(--space-1);
}

.cfd-worstDayGrade {
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--color-error);
  font-family: var(--font-heading);
}

.cfd-worstDayDate {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.cfd-weeklyProgressGrid {
  display: flex;
  gap: var(--space-2);
}

.cfd-weekCard {
  flex: 1;
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.cfd-weekCardLabel {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
}

.cfd-weekCardGrade {
  font-size: var(--text-3xl);
  font-weight: 600;
  font-family: var(--font-heading);
}

.cfd-weekCardCount {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
}

/* ===== CarbonFootprintDashboard — Refresh Button ===== */
.cfd-refreshButton {
  width: 100%;
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition);
  box-shadow: var(--shadow-btn-primary);
}

.cfd-refreshButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.3);
}

/* ===== CarbonFootprintDashboard — States ===== */
.cfd-emptyState {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
}

.cfd-loadingState {
  text-align: center;
  padding: 60px;
  color: var(--brand-text-muted);
}

.cfd-loadingIcon {
  font-size: var(--text-6xl);
  margin-bottom: var(--space-4);
}

.cfd-error {
  background-color: var(--color-error-light);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* ===== CarbonFootprintDashboard — Mobile Responsive ===== */
@media (max-width: 640px) {
  .cfd-weeklyHeader {
    flex-direction: column;
  }

  .cfd-dailyGrid {
    flex-wrap: wrap;
  }

  .cfd-dayCard {
    min-width: calc(33% - var(--space-2));
  }

  .cfd-bestWorstGrid {
    grid-template-columns: 1fr;
  }

  .cfd-weeklyProgressGrid {
    flex-wrap: wrap;
  }

  .cfd-weekCard {
    min-width: calc(50% - var(--space-2));
  }
}

/* ==========================================================================
   NutritionComaprisonMode.jsx — Semantic CSS Classes
   Prefix: ncm-
   Design: Design 4 Prestige — Navy/Gold with CSS variables
   ========================================================================== */

/* ===== NutritionComparisonMode — Layout ===== */
.ncm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.ncm-modal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ncm-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ncm-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.ncm-closeBtn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
}

.ncm-closeBtn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.ncm-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ===== NutritionComparisonMode — Error ===== */
.ncm-error {
  background-color: var(--color-error-light);
  color: var(--color-error);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* ===== NutritionComparisonMode — History Toggle ===== */
.ncm-historyToggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.ncm-historyBtn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
}

.ncm-historyBtn--active {
  background-color: var(--brand-primary);
  color: white;
}

.ncm-clearHistBtn {
  padding: 6px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 20px;
  background-color: var(--brand-surface);
  color: var(--brand-text-muted);
  font-size: 13px;
  cursor: pointer;
}

.ncm-clearHistBtn:hover {
  background-color: var(--color-error-light);
  color: var(--color-error);
  border-color: var(--color-error);
}

.ncm-newCompBtn {
  padding: 8px 16px;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  margin-left: 8px;
}

.ncm-newCompBtn:hover {
  background-color: var(--brand-border);
}

/* ===== NutritionComparisonMode — History List ===== */
.ncm-historyList {
  background-color: var(--brand-surface-elevated);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.ncm-historyHeading {
  font-weight: 600;
  margin-bottom: 12px;
}

.ncm-historyItem {
  padding: 12px;
  background-color: var(--brand-surface);
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border: 1px solid var(--brand-border);
}

.ncm-historyItem:hover {
  border-color: var(--brand-primary);
}

.ncm-histProductA {
  font-weight: 500;
}

.ncm-histVs {
  color: var(--brand-text-muted);
  margin: 0 8px;
}

.ncm-histProductB {
  font-weight: 500;
}

.ncm-histItemRight {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ncm-histWinnerBadge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.ncm-histChoiceBadge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* ===== NutritionComparisonMode — Product Cards ===== */
.ncm-productsRow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}

.ncm-productCard {
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.2s;
}

.ncm-productCard--active {
  border-color: var(--brand-primary);
}

.ncm-productLabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ncm-productBadge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.ncm-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.ncm-input:focus {
  border-color: var(--brand-primary);
  outline: none;
}

/* ===== NutritionComparisonMode — Barcode Row ===== */
.ncm-barcodeRow {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* Stacked layout: UPC input on top, Scan button below (mobile only) */
.ncm-barcodeRow--stacked {
  flex-direction: column;
}

.ncm-barcodeInput {
  flex: 1;
  margin-bottom: 0;
}

.ncm-scanBtn {
  padding: 10px 16px;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: var(--brand-text-light);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
}

.ncm-scanBtn:hover {
  opacity: 0.9;
}

.ncm-scanBtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== NCM Inline Scanner Overlay (mobile camera) ===== */
.ncm-scannerOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ncm-scannerModal {
  background: var(--brand-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.ncm-scannerHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: white;
}

.ncm-scannerTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.ncm-scannerClose {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
}

.ncm-scannerHost {
  position: relative;
  width: 100%;
  height: 300px;
  background: #000;
}

.ncm-scannerHint {
  text-align: center;
  padding: 10px;
  font-size: 13px;
  color: var(--brand-text-muted);
  margin: 0;
}

.ncm-scannerErrorBox {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-error);
  font-size: 14px;
}
.ncm-scannerErrorBox p { margin: 0 0 12px 0; }

/* ===== NutritionComparisonMode — Product Info (from lookup) ===== */
.ncm-productInfo {
  margin-bottom: 12px;
  padding: 8px 12px;
  background-color: var(--brand-surface-elevated);
  border-radius: 6px;
  border-left: 3px solid var(--brand-primary);
}

.ncm-productName {
  font-weight: 600;
  font-size: 14px;
  display: block;
}

.ncm-productBrand {
  font-size: 13px;
  color: var(--brand-text-muted);
}

.ncm-nutritionValue {
  padding: 6px 8px;
  background-color: var(--brand-surface-elevated);
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.ncm-nutritionLabel {
  font-size: 13px;
  color: var(--brand-text-muted);
  margin-bottom: 8px;
}

.ncm-nutritionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.ncm-nutritionInput {
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 13px;
}

.ncm-nutritionInput:focus {
  border-color: var(--brand-primary);
  outline: none;
}

.ncm-swapBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--brand-surface-elevated);
  border: none;
  cursor: pointer;
  font-size: 20px;
  align-self: center;
  margin-top: 40px;
}

.ncm-swapBtn:hover {
  background-color: var(--brand-border);
}

/* ===== NutritionComparisonMode — Compare Button ===== */
.ncm-compareBtn {
  width: 100%;
  padding: 14px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 24px;
}

.ncm-compareBtn:hover {
  background-color: var(--brand-primary-dark);
}

.ncm-compareBtn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== NutritionComparisonMode — Results ===== */
.ncm-results {
  background-color: var(--brand-surface-elevated);
  border-radius: 12px;
  padding: 24px;
}

/* ===== NutritionComparisonMode — Winner Banner ===== */
.ncm-winnerBanner {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.ncm-winnerBanner--a {
  background-color: var(--color-info-light);
  border: 2px solid var(--brand-primary);
}

.ncm-winnerBanner--b {
  background-color: var(--color-warning-light);
  border: 2px solid var(--color-warning);
}

.ncm-winnerBanner--tie {
  background-color: var(--brand-surface-elevated);
  border: 2px solid var(--brand-text-muted);
}

.ncm-winnerEmoji {
  font-size: 32px;
  margin-bottom: 8px;
}

.ncm-winnerTitle {
  font-size: 18px;
  font-weight: 600;
}

.ncm-winnerReason {
  font-size: 14px;
  color: var(--brand-text-muted);
  margin-top: 4px;
}

/* ===== NutritionComparisonMode — Score Comparison ===== */
.ncm-scoreRow {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 24px;
}

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

.ncm-scoreLabel {
  font-size: 13px;
  color: var(--brand-text-muted);
  margin-bottom: 8px;
}

.ncm-scoreValues {
  display: flex;
  gap: 16px;
  align-items: center;
}

.ncm-scoreBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
}

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

/* ===== NutritionComparisonMode — Comparison Table ===== */
.ncm-table {
  width: 100%;
  border-collapse: collapse;
}

.ncm-th {
  background-color: var(--brand-surface-elevated);
  padding: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

.ncm-thMetric {
  text-align: left;
}

.ncm-thProductA {
  background-color: var(--color-info-light);
}

.ncm-thProductB {
  background-color: var(--color-warning-light);
}

.ncm-td {
  padding: 12px;
  border-bottom: 1px solid var(--brand-border);
  text-align: center;
  font-size: 14px;
}

.ncm-tdMetric {
  text-align: left;
  font-weight: 500;
}

.ncm-td--winner {
  font-weight: 600;
}

.ncm-td--winnerA {
  background-color: var(--color-info-light);
  color: var(--brand-primary);
}

.ncm-td--winnerB {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.ncm-directionHint {
  color: var(--brand-text-placeholder);
  font-weight: 400;
  margin-left: 4px;
}

.ncm-winnerTextA {
  color: var(--brand-primary);
}

.ncm-winnerTextB {
  color: var(--color-warning);
}

.ncm-tieText {
  color: var(--brand-text-placeholder);
}

.ncm-diffPercent {
  font-size: 11px;
  color: var(--brand-text-muted);
  display: block;
}

/* ===== NutritionComparisonMode — Recommendation ===== */
.ncm-recommendation {
  background-color: var(--color-success-light);
  border: 1px solid var(--color-success);
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}

.ncm-recTitle {
  font-weight: 600;
  color: var(--color-success);
  margin-bottom: 4px;
}

.ncm-recText {
  color: var(--color-success);
}

/* ===== NutritionComparisonMode — Choice Buttons ===== */
.ncm-choiceButtons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.ncm-choiceLabel {
  font-size: 14px;
  color: var(--brand-text-muted);
  margin-right: 12px;
  align-self: center;
}

.ncm-choiceBtn {
  padding: 10px 24px;
  border-radius: 8px;
  border: 2px solid var(--brand-border);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  background-color: var(--brand-surface);
}

.ncm-choiceBtnA {
  color: var(--brand-primary);
}

.ncm-choiceBtnA.ncm-choiceBtn--selected {
  border-color: var(--brand-primary);
  background-color: var(--brand-surface-elevated);
}

.ncm-choiceBtnB {
  color: var(--color-warning);
}

.ncm-choiceBtnB.ncm-choiceBtn--selected {
  border-color: var(--color-warning);
  background-color: var(--color-warning-light);
}

/* ===== NCM Best For You — UC-aware personalization ===== */

.ncm-alertBanner {
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.ncm-alertItem {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.ncm-alertItem + .ncm-alertItem {
  border-top: 1px solid #FECACA;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}

.ncm-alertIcon {
  color: #DC2626;
  font-size: var(--text-base);
  flex-shrink: 0;
}

.ncm-alertText {
  color: #991B1B;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  line-height: 1.4;
}

.ncm-best4uCard {
  background: linear-gradient(135deg, var(--brand-surface-elevated), #F5F0E6);
  border: 1px solid var(--brand-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}

.ncm-best4uCard--a {
  border-left: 4px solid var(--brand-primary);
}

.ncm-best4uCard--b {
  border-left: 4px solid var(--color-warning);
}

.ncm-best4uLabel {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-secondary);
  margin-bottom: var(--space-1);
}

.ncm-best4uWinner {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
  margin-bottom: var(--space-1);
}

.ncm-best4uCard .ncm-best4uReason {
  font-size: var(--text-sm);
  color: var(--brand-text-secondary);
  font-style: italic;
}

.ncm-best4uEmpty {
  background-color: var(--brand-surface);
  border: 1px dashed var(--brand-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  font-style: italic;
}

.ncm-thBest4u {
  min-width: 80px;
  text-align: center;
}

.ncm-tdBest4u {
  text-align: center;
  vertical-align: top;
}

.ncm-best4uBadge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: default;
}

.ncm-best4uBadge--a {
  color: var(--brand-primary);
}

.ncm-best4uBadge--b {
  color: var(--color-warning);
}

.ncm-best4uBadge--neutral {
  color: var(--brand-text-muted);
}

.ncm-best4uHint {
  display: block;
  font-size: 10px;
  font-weight: normal;
  color: var(--brand-text-muted);
  line-height: 1.2;
  max-width: 120px;
  white-space: normal;
}

.ncm-recsSection {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ncm-recItem {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--brand-text-secondary);
  line-height: 1.5;
}

.ncm-recItem::before {
  content: '•';
  position: absolute;
  left: var(--space-2);
  color: var(--brand-secondary);
  font-weight: bold;
}

.ncm-recItem + .ncm-recItem {
  border-top: 1px solid var(--brand-border-light);
}

/* NCM mobile — fix modal scroll, product card stacking, Best4U responsive */
@media (max-width: 640px) {
  .ncm-overlay {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  .ncm-modal {
    max-height: none;
    border-radius: 12px;
    margin-bottom: 20px;
  }

  .ncm-content {
    overflow-y: visible;
    padding: 16px;
  }

  .ncm-productsRow {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ncm-swapBtn {
    justify-self: center;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .ncm-productCard {
    padding: 14px;
  }

  .ncm-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ncm-best4uHint {
    max-width: 80px;
    font-size: 9px;
  }

  .ncm-thBest4u {
    min-width: 60px;
  }

  .ncm-best4uCard {
    padding: var(--space-3);
  }

  .ncm-best4uWinner {
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   FitnessProgramFiles.jsx — Semantic CSS Classes
   Prefix: fpf-
   Design: D4S Light theme
   ========================================================================== */

/* --- Container & Layout --- */
.fpf-container {
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--brand-border);
}

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

.fpf-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fpf-fileCount {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
  background-color: var(--brand-surface);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--brand-border);
}

.fpf-allowedTypes {
  font-size: 11px;
  color: var(--brand-text-muted);
  margin-bottom: 15px;
}

/* --- Upload Button --- */
.fpf-uploadButton {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: var(--brand-text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fpf-uploadButton--disabled {
  background-color: var(--brand-border);
  color: var(--brand-text-muted);
  cursor: not-allowed;
}

.fpf-hiddenInput {
  display: none;
}

/* --- File List --- */
.fpf-fileList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fpf-fileItem {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background-color: var(--brand-surface);
  border-radius: var(--radius);
  gap: var(--space-4);
  border: 1px solid var(--brand-border);
}

.fpf-fileIcon {
  font-size: 24px;
}

.fpf-fileInfo {
  flex: 1;
  min-width: 0;
}

.fpf-fileName {
  font-size: var(--text-base);
  color: var(--brand-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fpf-fileMeta {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 2px;
}

.fpf-fileActions {
  display: flex;
  gap: 8px;
}

/* --- Action Buttons --- */
.fpf-actionButton {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background-color: var(--brand-surface);
  color: var(--brand-text);
  transition: all 0.2s ease;
}
.fpf-actionButton:hover {
  background-color: var(--brand-surface-elevated);
}

.fpf-deleteButton {
  background-color: rgba(244, 67, 54, 0.2);
  color: var(--color-error);
}

/* --- States --- */
.fpf-emptyState {
  text-align: center;
  padding: 30px;
  color: var(--brand-text-muted);
}

.fpf-loading {
  text-align: center;
  padding: 20px;
  color: var(--brand-text-muted);
}

.fpf-error {
  padding: 12px;
  background-color: rgba(244, 67, 54, 0.2);
  border-radius: 8px;
  color: var(--color-error);
  margin-bottom: 15px;
  font-size: 13px;
}

.fpf-errorClose {
  float: right;
  cursor: pointer;
}

/* --- File Viewer Modal --- */
.fpf-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.fpf-modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  border-bottom: none;
}

.fpf-modalTitle {
  font-size: var(--text-base);
  color: white;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fpf-modalActions {
  display: flex;
  gap: 10px;
}

.fpf-modalContent {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}

.fpf-pdfViewer {
  width: 100%;
  height: 100%;
  border: none;
}

.fpf-imageViewer {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fpf-textViewer {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: var(--brand-text-light);
  color: var(--brand-text);
  font-family: var(--font-mono);
  font-size: 14px;
  overflow: auto;
  white-space: pre-wrap;
}

/* --- Delete Confirmation Modal --- */
.fpf-confirmModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.fpf-confirmBox {
  background-color: var(--brand-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 400px;
  width: 90%;
  border: 1px solid var(--brand-border);
}

.fpf-confirmTitle {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
  margin-bottom: var(--space-3);
}

.fpf-confirmText {
  font-size: var(--text-base);
  color: var(--brand-text-muted);
  margin-bottom: var(--space-5);
}

.fpf-confirmButtons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.fpf-cancelButton {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  cursor: pointer;
  background-color: var(--brand-surface);
  color: var(--brand-text);
  transition: all 0.2s ease;
}
.fpf-cancelButton:hover {
  background-color: var(--brand-surface-elevated);
}

.fpf-confirmDeleteButton {
  padding: 10px 20px;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--color-error);
  color: var(--brand-text-light);
}

/* ==========================================================================
   SportsHobbiesManager.jsx — Semantic CSS Classes
   Prefix: shm-
   Design: Design 4 Prestige — Navy/Gold with CSS variables
   ========================================================================== */

/* ===== SportsHobbiesManager — Container ===== */
.shm-container {
  padding: var(--space-5);
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  color: var(--brand-text);
}

/* ===== SportsHobbiesManager — Header ===== */
.shm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}

.shm-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--brand-text);
  font-family: var(--font-heading);
}

.shm-stats {
  font-size: var(--text-base);
  color: var(--brand-text-muted);
  margin-top: var(--space-1);
}

.shm-headerButtons {
  display: flex;
  gap: var(--space-2);
}

.shm-smallButton {
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  cursor: pointer;
  background-color: var(--brand-surface);
  color: var(--brand-text-muted);
  font-family: var(--font-body);
  transition: all var(--transition);
}

.shm-smallButton:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.shm-saveButton {
  padding: 10px var(--space-5);
  font-size: var(--text-base);
  font-weight: 600;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  font-family: var(--font-body);
  transition: all var(--transition);
}

.shm-saveButton:disabled {
  cursor: default;
  opacity: 0.6;
}

.shm-saveButton--active {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  color: white;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-btn-primary);
}

.shm-saveButton--active:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.3);
}

/* ===== SportsHobbiesManager — Error ===== */
.shm-error {
  padding: var(--space-4);
  background-color: var(--color-error-light);
  border-radius: var(--radius-md);
  color: var(--color-error);
  margin-bottom: var(--space-4);
}

/* ===== SportsHobbiesManager — Category Cards ===== */
.shm-categoryCard {
  background-color: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.shm-categoryHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition);
}

.shm-categoryHeader:hover {
  background-color: rgba(30, 58, 95, 0.04);
}

.shm-categoryTitle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--brand-text);
}

.shm-categoryCount {
  font-size: var(--text-sm);
  color: var(--brand-primary);
  background-color: rgba(30, 58, 95, 0.08);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

.shm-expandIcon {
  font-size: var(--text-xl);
  color: var(--brand-text-muted);
}

/* ===== SportsHobbiesManager — Activities Grid ===== */
.shm-activitiesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4) var(--space-4);
}

.shm-activityItem {
  display: flex;
  align-items: center;
  padding: var(--space-2);
  background-color: var(--brand-surface);
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
}

.shm-activityItem:hover {
  border-color: var(--brand-border);
}

.shm-activityItem--selected {
  background-color: rgba(30, 58, 95, 0.06);
  border-color: var(--brand-primary);
}

.shm-activityItem--highlighted {
  background-color: rgba(30, 58, 95, 0.1);
  border-color: var(--brand-primary-light);
}

.shm-checkbox {
  width: 18px;
  height: 18px;
  margin-right: var(--space-2);
  accent-color: var(--brand-primary);
}

.shm-activityName {
  font-size: var(--text-base);
  flex: 1;
  color: var(--brand-text);
}

.shm-metValue {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
  margin-left: var(--space-1);
}

/* ===== SportsHobbiesManager — Details Panel ===== */
.shm-detailsPanel {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background-color: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
}

.shm-detailsTitle {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand-text);
  font-family: var(--font-heading);
}

.shm-detailsCategoryLabel {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.shm-detailsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.shm-fieldGroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.shm-label {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  text-transform: uppercase;
  font-weight: 500;
}

.shm-select {
  padding: 10px;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  color: var(--brand-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
}

.shm-primaryToggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--brand-text);
  font-family: var(--font-body);
  transition: border-color var(--transition);
}

.shm-primaryToggle:hover {
  border-color: var(--brand-primary);
}

/* ===== SportsHobbiesManager — Loading ===== */
.shm-loading {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
}

/* ===== SportsHobbiesManager — Mobile Responsive ===== */
@media (max-width: 640px) {
  .shm-header {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .shm-headerButtons {
    flex-wrap: wrap;
  }

  .shm-activitiesGrid {
    grid-template-columns: 1fr;
  }

  .shm-detailsGrid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FamilyAllergenGuard.jsx — Semantic CSS Classes
   Prefix: fag-
   Design: Design 4 Prestige — Navy/Gold with CSS variables
   ========================================================================== */

/* --- Layout --- */
.fag-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.fag-modal {
  background-color: var(--brand-surface);
  border-radius: 16px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.fag-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--brand-border);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fag-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}

.fag-closeButton {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fag-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* --- Tabs --- */
.fag-tabs {
  display: flex;
  border-bottom: 1px solid var(--brand-border);
  background-color: var(--brand-surface-elevated);
}

.fag-tab {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text-muted);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.fag-tab--active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  background-color: var(--brand-surface);
}

/* --- Member Cards --- */
.fag-memberCard {
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.fag-memberAvatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: white;
  font-family: var(--font-heading);
  flex-shrink: 0;
}

.fag-memberInfo {
  flex: 1;
}

.fag-memberName {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.fag-memberRelationship {
  color: var(--brand-text-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.fag-memberActions {
  display: flex;
  gap: 8px;
}

.fag-iconButton {
  padding: 8px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.fag-editBtn {
  background-color: var(--brand-secondary-light);
}

.fag-deleteBtn {
  background-color: var(--color-error-light);
}

/* --- Member Summary (replaced tag badges) --- */
.fag-memberSummary {
  display: flex;
  gap: 12px;
}

.fag-summaryText {
  font-size: 12px;
  color: var(--brand-text-muted);
}

/* --- Forms --- */
.fag-formGroup {
  margin-bottom: 20px;
}

.fag-label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--brand-text-muted);
}

.fag-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.fag-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--brand-surface);
}

.fag-textarea {
  min-height: 80px;
  resize: vertical;
}

.fag-formTitle {
  margin: 0 0 20px 0;
}

.fag-formRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fag-limitsRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* --- Checkboxes --- */
.fag-checkboxGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.fag-checkboxLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.fag-checkboxLabel--selected {
  background-color: rgba(30, 58, 95, 0.08);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.fag-hiddenCheckbox {
  display: none;
}

/* --- Buttons --- */
.fag-buttonRow {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.fag-primaryButton {
  flex: 1;
  padding: 12px 20px;
  background-color: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.fag-secondaryButton {
  flex: 1;
  padding: 12px 20px;
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.fag-addAnotherBtn {
  width: 100%;
  margin-top: 12px;
  border: 2px dashed var(--brand-border);
}

.fag-checkBtn {
  width: 100%;
}

/* --- Product Check --- */
.fag-checkTitle {
  margin: 0 0 20px 0;
}

.fag-checkDescription {
  color: var(--brand-text-muted);
  margin-bottom: 20px;
}

.fag-noMembersWarning {
  color: var(--color-error);
  font-size: 13px;
  margin-top: 8px;
  text-align: center;
}

/* --- Results --- */
.fag-resultCard {
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

.fag-resultCard--safe {
  background-color: var(--color-success-light);
  border: 1px solid var(--color-success);
}

.fag-resultCard--unsafe {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error);
}

.fag-resultTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.fag-resultSummary {
  margin: 0 0 16px 0;
  color: var(--brand-text-muted);
}

.fag-memberResult {
  padding: 12px;
  background-color: var(--brand-surface);
  border-radius: 8px;
  margin-top: 12px;
}

.fag-memberResultName {
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fag-memberErrors {
  color: var(--color-error);
  font-size: 13px;
}

.fag-memberWarnings {
  color: var(--color-warning);
  font-size: 13px;
  margin-top: 4px;
}

.fag-memberSafe {
  color: var(--color-success);
  font-size: 13px;
}

/* --- States --- */
.fag-error {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-light);
  color: var(--color-error);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.fag-emptyState {
  text-align: center;
  padding: 40px 20px;
  color: var(--brand-text-muted);
}

.fag-emptyIcon {
  font-size: 48px;
  margin-bottom: 16px;
}

.fag-emptyTitle {
  margin: 0 0 8px 0;
  color: var(--brand-text-muted);
}

.fag-emptyText {
  margin: 0 0 20px 0;
}

.fag-loading {
  text-align: center;
  padding: 40px;
}

/* ==========================================================================
   VisionGroceryCapture.jsx — Semantic CSS Classes
   Prefix: vgc-
   Design: Design 4 Prestige — Navy/Gold with CSS variables
   ========================================================================== */

/* --- MODAL STRUCTURE --- */

.vgc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: var(--space-5);
}

.vgc-modal {
  background-color: var(--brand-surface);
  border-radius: var(--radius-xl);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.vgc-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--brand-text-light);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.vgc-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  font-family: var(--font-heading);
  color: white;
}

.vgc-headerActions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.vgc-closeButton {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--brand-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.vgc-closeButton:hover {
  background: rgba(255, 255, 255, 0.3);
}

.vgc-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}

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

/* --- ERROR & STATUS --- */

.vgc-error {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-light);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.vgc-success {
  background-color: var(--color-success-light);
  border: 1px solid var(--color-success-light);
  color: var(--color-success);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.vgc-usageBadge {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
}

.vgc-loadingState {
  text-align: center;
  padding: var(--space-10);
  color: var(--brand-text-muted);
}

.vgc-emptyWarning {
  color: var(--color-error);
  font-size: 13px;
}

/* --- DESTINATION SELECTOR --- */

.vgc-destinationSelector {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-border);
}

.vgc-destinationTabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.vgc-destinationTab {
  flex: 1;
  padding: 10px var(--space-4);
  border: 2px solid var(--brand-border);
  border-radius: var(--radius-md);
  background-color: var(--brand-surface);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  font-family: var(--font-body);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.vgc-destinationTab:hover {
  border-color: var(--brand-primary-light);
}

.vgc-destinationTabActive {
  border-color: var(--brand-primary);
  background-color: var(--brand-surface-elevated);
  color: var(--brand-primary);
}

.vgc-selectWrapper {
  margin-top: var(--space-3);
}

.vgc-selectLabel {
  display: block;
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--brand-text-muted);
  margin-bottom: 6px;
}

.vgc-select {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  background-color: var(--brand-surface);
}

/* --- INPUT METHOD TABS --- */

.vgc-inputMethodTabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.vgc-inputMethodTab {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--brand-border);
  border-radius: var(--radius-md);
  background-color: var(--brand-surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--font-medium);
  font-family: var(--font-body);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.vgc-inputMethodTab:hover {
  border-color: var(--brand-primary-light);
}

.vgc-inputMethodTabActive {
  border-color: var(--brand-primary);
  background-color: var(--brand-surface-elevated);
  color: var(--brand-primary);
}

.vgc-tabIcon {
  font-size: 20px;
}

/* --- SCANNER SECTION --- */

.vgc-scannerSection {
  padding: var(--space-5);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-lg);
  text-align: center;
}

.vgc-scannerHost {
  width: 100%;
  height: 250px;
  background-color: var(--brand-text);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  position: relative;
}

.vgc-scannerWarning {
  color: var(--color-error);
  margin-bottom: var(--space-4);
}

.vgc-scannerLoading {
  color: var(--brand-text-muted);
  margin-bottom: var(--space-4);
}

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

.vgc-scannerPlaceholderIcon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.vgc-scannerPlaceholderTitle {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}

.vgc-scannerPlaceholderText {
  color: var(--brand-text-muted);
  margin: 0 0 var(--space-5) 0;
}

.vgc-scannerControls {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-4);
}

.vgc-scanButton {
  padding: 14px 28px;
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 200px;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.vgc-scanButton:hover {
  background-color: var(--brand-primary-light);
}

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

.vgc-scanButtonStop:hover {
  background-color: var(--color-error);
}

.vgc-scanButtonDisabled {
  background-color: var(--brand-text-placeholder);
  cursor: not-allowed;
}

.vgc-doneButton {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  flex: 1;
  max-width: 200px;
}

.vgc-doneButton:hover {
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
}

.vgc-lastScanned {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-success-light);
  border-radius: var(--radius);
  color: var(--color-success);
  font-size: 13px;
}

.vgc-lookingUpText {
  margin-top: var(--space-3);
  color: var(--brand-text-muted);
}

/* --- SCANNED ITEMS INLINE (during continuous scanning) --- */

.vgc-scannedItemsSection {
  margin-top: var(--space-4);
  text-align: left;
}

.vgc-scannedItemsTitle {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--brand-text-muted);
}

.vgc-scannedItemsList {
  max-height: 200px;
  overflow-y: auto;
}

.vgc-scannedItemRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-success-light);
  border-radius: var(--radius);
  margin-bottom: var(--space-1);
  font-size: 13px;
}

.vgc-scannedItemName {
  font-weight: var(--font-medium);
}

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

.vgc-scannedItemRemove {
  background: none;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  padding: 2px 6px;
  font-size: var(--text-lg);
}

/* --- BARCODE ENTRY SECTION --- */

.vgc-barcodeSection {
  padding: var(--space-5);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-lg);
  text-align: center;
}

.vgc-enterIcon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.vgc-enterTitle {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
  font-weight: var(--font-medium);
}

.vgc-barcodeInputWrapper {
  display: flex;
  gap: var(--space-2);
  max-width: 400px;
  margin: 0 auto;
}

.vgc-barcodeInput {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--brand-border);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-family: var(--font-body);
  text-align: center;
  letter-spacing: 2px;
}

.vgc-barcodeInput:focus {
  border-color: var(--brand-primary);
  outline: none;
}

.vgc-lookupButton {
  padding: var(--space-3) var(--space-5);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.vgc-lookupButton:hover {
  background-color: var(--brand-primary-light);
}

.vgc-lookupButtonDisabled {
  background-color: var(--brand-text-placeholder);
  cursor: not-allowed;
}

.vgc-enterHint {
  color: var(--brand-text-muted);
  font-size: 13px;
  margin-top: var(--space-4);
}

.vgc-itemCount {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: var(--color-success-light);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--text-base);
  text-align: center;
}

/* --- PHOTO INPUT SECTION --- */

.vgc-dropZone {
  border: 2px dashed var(--brand-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background-color: var(--brand-surface-elevated);
}

.vgc-dropZone:hover {
  border-color: var(--brand-primary-light);
}

.vgc-dropZoneActive {
  border-color: var(--brand-primary);
  background-color: var(--brand-surface-elevated);
}

.vgc-imagePreview {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.vgc-changeImageText {
  color: var(--brand-text-muted);
  margin: 0;
}

.vgc-photoIcon {
  font-size: 3rem;
  margin-bottom: 10px;
}

.vgc-photoTitle {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}

.vgc-photoHint {
  color: var(--brand-text-muted);
  margin: 0;
}

.vgc-hiddenInput {
  display: none;
}

.vgc-tipsBox {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--brand-primary);
}

.vgc-tipsList {
  margin: var(--space-2) 0 0 0;
  padding-left: var(--space-5);
}

.vgc-analyzeButton {
  width: 100%;
  padding: 14px var(--space-5);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background-color var(--transition-fast);
}

.vgc-analyzeButton:hover {
  background-color: var(--brand-primary-light);
}

.vgc-analyzeButtonDisabled {
  background-color: var(--brand-text-placeholder);
  cursor: not-allowed;
}

.vgc-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: vgc-spin 1s linear infinite;
  display: inline-block;
}

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

.vgc-scanHint {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--brand-text-placeholder);
  margin-top: var(--space-3);
}

/* --- ITEMS LIST (results view) --- */

.vgc-itemsList {
  margin-top: var(--space-5);
}

.vgc-itemCard {
  display: flex;
  align-items: center;
  padding: var(--space-3);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  gap: var(--space-3);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.vgc-itemCardSelected {
  background-color: var(--brand-surface-elevated);
  border-color: var(--brand-primary);
}

.vgc-itemCardUnselected {
  opacity: 0.6;
}

.vgc-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--brand-primary);
}

.vgc-itemInfo {
  flex: 1;
}

.vgc-itemName {
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
}

.vgc-itemCategory {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.vgc-itemNutrition {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.vgc-nutritionBadge {
  font-size: var(--text-xs);
  padding: 2px 6px;
  background-color: var(--brand-border);
  border-radius: var(--radius-sm);
  color: var(--brand-text-muted);
}

.vgc-healthLabel {
  background-color: var(--brand-secondary-light);
  color: var(--brand-primary);
}

.vgc-quantityControl {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vgc-quantityInput {
  width: 60px;
  padding: 6px var(--space-2);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-body);
}

.vgc-nameInput {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: var(--font-body);
  margin-bottom: var(--space-1);
}

.vgc-nameInput:focus,
.vgc-quantityInput:focus {
  border-color: var(--brand-primary);
  outline: none;
}

.vgc-removeButton {
  background: none;
  border: none;
  color: var(--color-error);
  font-size: var(--text-xl);
  cursor: pointer;
  padding: var(--space-1);
  transition: color var(--transition-fast);
}

.vgc-removeButton:hover {
  color: var(--color-error);
}

.vgc-addItemButton {
  width: 100%;
  padding: var(--space-3);
  background-color: transparent;
  border: 2px dashed var(--brand-border);
  border-radius: var(--radius-md);
  color: var(--brand-text-muted);
  cursor: pointer;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}

.vgc-addItemButton:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.vgc-brandLabel {
  color: var(--brand-text-muted);
  font-weight: var(--font-normal);
}

.vgc-barcodeLabel {
  margin-left: var(--space-2);
}

.vgc-unitLabel {
  color: var(--brand-text-muted);
  font-size: var(--text-sm);
}

/* --- RESULTS / SUMMARY --- */

.vgc-summary {
  padding: var(--space-4);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.vgc-summaryTitle {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--brand-primary);
}

.vgc-summaryText {
  font-size: var(--text-base);
  color: var(--brand-primary);
}

.vgc-resultImageWrap {
  margin-bottom: var(--space-4);
  text-align: center;
}

.vgc-resultImage {
  max-width: 100%;
  max-height: 150px;
  border-radius: var(--radius-md);
}

.vgc-addMoreSection {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
}

.vgc-addMoreLabel {
  font-size: 13px;
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
  color: var(--brand-text-muted);
}

.vgc-addMoreInput {
  font-size: var(--text-base);
}

.vgc-addMoreButton {
  padding: 10px var(--space-4);
}

/* --- FOOTER BUTTONS --- */

.vgc-secondaryButton {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  background-color: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.vgc-secondaryButton:hover {
  background-color: var(--brand-border);
}

.vgc-cancelButton {
  flex: none;
  width: 100%;
}

.vgc-primaryButton {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  background-color: var(--brand-primary);
  color: var(--brand-text-light);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.vgc-primaryButton:hover {
  background-color: var(--brand-primary-light);
}

.vgc-primaryButtonDisabled {
  background-color: var(--brand-text-placeholder);
  cursor: not-allowed;
}

/* --- RESPONSIVE --- */

@media (max-width: 480px) {
  .vgc-overlay {
    padding: var(--space-2);
  }
  
  .vgc-modal {
    max-height: 95vh;
    border-radius: var(--radius-lg);
  }
  
  .vgc-header {
    padding: var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  
  .vgc-content {
    padding: var(--space-4);
  }
  
  .vgc-inputMethodTabs {
    gap: var(--space-1);
  }
  
  .vgc-inputMethodTab {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-1);
  }
  
  .vgc-barcodeInputWrapper {
    flex-direction: column;
  }
  
  .vgc-scanButton {
    max-width: none;
  }
}

/* ==========================================================================
   InventoryManager.jsx — Semantic CSS Classes
   Prefix: im-
   Design: Embedded card — expiry tracking, freeze/unfreeze, Design 4 Prestige
   ========================================================================== */

/* --- Container --- */
.im-container {
  padding: var(--space-5);
  max-width: 800px;
  margin: 0 auto;
}

.im-container--card {
  padding: 0;
}

/* --- Card --- */
.im-card {
  background-color: var(--brand-surface, white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
  margin-bottom: var(--space-5);
}

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

.im-title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--brand-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.im-countBadge {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  padding: 2px var(--space-2);
  border-radius: 12px;
  font-size: 0.85rem;
}

.im-refreshButton {
  padding: 6px var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background-color: var(--brand-surface, white);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s ease;
}

.im-refreshButton:hover {
  background-color: var(--brand-surface-elevated);
}

/* --- Summary --- */
.im-summary {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.im-summaryCard {
  flex: 1;
  padding: var(--space-4);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  text-align: center;
}

.im-summaryValue {
  font-size: 2rem;
  font-weight: 700;
}

.im-summaryValue--expiring {
  color: var(--color-warning);
}

.im-summaryValue--expired {
  color: var(--color-error);
}

.im-summaryLabel {
  font-size: 0.85rem;
  color: var(--brand-text-muted);
  margin-top: 4px;
}

/* --- Filter Row --- */
.im-filterRow {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.im-filterLabel {
  font-size: 0.9rem;
  color: var(--brand-text-muted);
}

.im-filterButton {
  padding: 6px var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background-color: var(--brand-surface, white);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.im-filterButton:hover {
  background-color: var(--brand-surface-elevated);
}

.im-filterButton--active {
  background-color: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* --- Item List --- */
.im-itemList {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.im-itemCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-border);
}

.im-itemCard--expired {
  background-color: var(--color-error-light);
}

.im-itemInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.im-itemName {
  font-weight: 600;
  color: var(--brand-text-primary);
}

.im-itemMeta {
  font-size: 0.85rem;
  color: var(--brand-text-muted);
}

/* --- Badges --- */
.im-urgencyBadge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.im-frozenBadge {
  padding: 4px var(--space-2);
  background-color: var(--color-info-light);
  color: var(--brand-primary);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-2);
}

.im-storageBadge {
  padding: 4px var(--space-2);
  background-color: #FEF3C7;
  color: #92400E;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
}

.im-openedBadge {
  padding: 4px var(--space-2);
  background-color: #FEF3C7;
  color: #92400E;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
}

/* --- Action Buttons --- */
.im-itemActions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.im-actionButton {
  padding: 6px var(--space-3);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.im-actionButton:hover {
  opacity: 0.85;
}

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

.im-actionButton--freeze {
  background-color: var(--color-info-light);
  color: var(--brand-primary);
}

.im-actionButton--unfreeze {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.im-actionButton--delete {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

/* --- Empty State --- */
.im-emptyState {
  text-align: center;
  padding: 40px var(--space-5);
  color: var(--brand-text-muted);
}

.im-emptyIcon {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* --- Loading --- */
.im-loading {
  text-align: center;
  padding: 40px;
  color: var(--brand-text-muted);
}

/* --- Expired Section --- */
.im-expiredSection {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--brand-border);
}

.im-expiredHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.im-expiredTitle {
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.im-expandIcon {
  font-size: 0.8rem;
}

.im-daysAgo {
  color: var(--color-error);
  margin-left: var(--space-2);
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
  .im-summary {
    flex-direction: column;
  }

  .im-itemCard {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .im-itemActions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================
   BarcodeScanner.jsx — REMOVED (dead code)
   All barcode scanning now uses useBarcodeScanner hook
   + BarcodeLookupModal + PantryItemForm inline camera
   ============================================ */


/* ============================================
   PAGE EXIT BUTTON — Dashboard Return
   ============================================ */

.page-header-row .page-exit-btn {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  line-height: normal;
  white-space: nowrap;
}

.page-header-row .page-exit-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.page-header-row .page-section-title {
  padding: 0;
  background: none;
}

/* ============================================
   AI DATA PAGE (aidp-) — My AI Data Set
   ============================================ */

.aidp-container {
  padding: var(--space-4) 0;
}
.aidp-uhcTitle {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-accent, #C9A962);
}

.aidp-section {
  background: var(--brand-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-border);
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.aidp-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--brand-primary);
  padding: var(--space-3) var(--space-5);
  margin: 0;
  border-bottom: 1px solid var(--brand-border);
  background: var(--brand-surface-elevated);
  border-left: 3px solid var(--brand-secondary);
}

.aidp-data-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  padding: 0;
}

.aidp-data-grid dt {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--brand-text-muted);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--brand-border);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.aidp-data-grid dd {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text);
  padding: var(--space-3) var(--space-5);
  margin: 0;
  border-bottom: 1px solid var(--brand-border);
}

.aidp-data-grid dt:last-of-type,
.aidp-data-grid dd:last-of-type {
  border-bottom: none;
}

.aidp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aidp-list li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--brand-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.aidp-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--brand-secondary);
  flex-shrink: 0;
}

.aidp-list li:last-child {
  border-bottom: none;
}

.aidp-list-label {
  font-weight: var(--font-semibold);
  color: var(--brand-text);
}

.aidp-list-detail {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-left: var(--space-2);
}

.aidp-list-desc {
  white-space: pre-wrap;
  margin-top: 4px;
  word-break: break-word;
  margin-left: 0;
}

.aidp-empty {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text-placeholder);
  font-style: italic;
  padding: var(--space-4) var(--space-5);
}

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

.aidp-fhir-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-navy);
  margin: var(--space-3) 0 var(--space-2) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--brand-gold);
}

.aidp-fhir-source {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--brand-text-secondary);
  font-style: italic;
  margin-top: var(--space-3);
  padding-left: var(--space-3);
}

.aidp-footer-message {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.04) 0%, rgba(201, 169, 98, 0.06) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-border-subtle);
  padding: var(--space-5);
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  line-height: var(--leading-relaxed);
  text-align: center;
}

.aidp-timestamp {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--brand-text-placeholder);
  text-align: right;
  padding: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
}

.aidp-loading {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text-muted);
}

/* Badges for status indicators */
.aidp-list-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: var(--space-2);
  background: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
}

.aidp-list-badge--success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.aidp-list-badge--fav {
  background: var(--brand-secondary-light);
  color: var(--brand-secondary-dark);
}

.aidp-source-tag {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  background: #EBF0F7;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* Lab values inline display */
.aidp-lab-values {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
}

.aidp-lab-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--brand-border-subtle);
}

.aidp-lab-row:last-child {
  border-bottom: none;
}

.aidp-lab-test {
  font-weight: 500;
  color: var(--brand-text);
  min-width: 140px;
}

.aidp-lab-value {
  color: var(--brand-text);
  font-family: var(--font-body);
}

.aidp-lab-ref {
  color: var(--brand-text-muted);
  font-size: var(--text-xs);
}

.aidp-lab-flag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
}

.aidp-lab-flag--high {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.aidp-lab-flag--low {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.aidp-lab-flag--critical {
  background: var(--color-error-light);
  color: var(--color-error-dark);
}

@media (max-width: 600px) {
  .aidp-data-grid {
    grid-template-columns: 1fr;
  }

  .aidp-data-grid dt {
    padding-bottom: var(--space-1);
    border-bottom: none;
  }

  .aidp-data-grid dd {
    padding-top: var(--space-1);
  }

  .aidp-lab-row {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .aidp-lab-test {
    min-width: 100%;
  }
}

/* =========================================================================
   NOTIFICATION SETTINGS (ns-)
   Settings → Notifications tab — unified push notification management
   ========================================================================= */

.ns-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ns-card {
  margin-bottom: 0;
}

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

.ns-typeGrid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ns-typeRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  transition: background 0.15s;
}

.ns-typeRow:hover {
  background: #f8f9fa;
}

.ns-typeIcon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.ns-typeInfo {
  flex: 1;
  min-width: 0;
}

.ns-typeName {
  font-weight: 600;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ns-typeDesc {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
  margin-top: 2px;
}

.ns-typeActions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.ns-typeBadge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ns-typeBadge--active {
  background: #e8f5e9;
  color: #2e7d32;
}

.ns-typeBadge--soon {
  background: #f0f0f0;
  color: var(--text-muted, #6b7280);
}

.ns-typeTestBtn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--brand-primary);
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  letter-spacing: 0.3px;
}

.ns-typeTestBtn:hover {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.25);
}

.ns-typeTestBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Toggle Switch */
.ns-toggleSwitch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.ns-toggleSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ns-toggleSlider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #b0b0b0;
  border-radius: 26px;
  border: 1px solid #999;
  transition: background 0.25s, border-color 0.25s;
}

.ns-toggleSlider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s;
}

.ns-toggleSwitch input:checked + .ns-toggleSlider {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.ns-toggleSwitch input:checked + .ns-toggleSlider::before {
  transform: translateX(22px);
}

/* Quiet Hours */
.ns-quietRow {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.ns-quietField {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ns-quietLabel {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.ns-quietSaved {
  margin-top: var(--space-2);
}

.ns-saveBtn {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ns-saveBtn:hover {
  opacity: 0.9;
}

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

/* Mobile responsive */
@media (max-width: 600px) {
  .ns-typeRow {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ns-typeActions {
    width: 100%;
    justify-content: space-between;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
  }

  .ns-quietRow {
    flex-direction: column;
  }
}

/* ====================================================================
   Add to Cart (ATC) Mini-Modal — Recipe → Shopping List
   ==================================================================== */
.atc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.atc-modal {
  background: var(--brand-surface);
  border-radius: 12px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.atc-header {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark, #162d4a));
  color: white;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.atc-header h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  color: white;
}

.atc-body {
  padding: 20px;
}

.atc-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  flex-wrap: wrap;
}

.atc-option:hover {
  border-color: var(--brand-primary);
}

.atc-option--selected {
  border-color: var(--brand-primary);
  background-color: var(--brand-surface-elevated);
}

.atc-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--brand-primary);
}

.atc-listName {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding-left: 24px;
  font-size: 13px;
  color: var(--brand-text-muted);
  font-style: italic;
}

.atc-select {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--brand-surface);
  color: var(--brand-text);
}

.atc-servingsRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border);
}

.atc-servingsRow label {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text);
}

.atc-servingsInput {
  width: 80px;
  padding: 6px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

.atc-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--brand-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.atc-addBtn {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark, #162d4a));
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.atc-addBtn:hover {
  opacity: 0.9;
}

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

/* Recipe Card — Add to Cart button (D4S: navy gradient, white text) */
.shl-addCartBtn {
  background: linear-gradient(135deg, var(--brand-primary, #1E3A5F), var(--brand-primary-light, #2A5080));
  color: white;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.shl-addCartBtn:hover {
  opacity: 0.9;
}

/* Recipe Card — Cook This button */
.rcl-cookBtn {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark, #162d4a));
  color: white;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.rcl-cookBtn:hover {
  opacity: 0.9;
}

/* ====================================================================
   Recipe Book Management Modal (rbm-)
   ==================================================================== */
.rbm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rbm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  gap: 12px;
}

.rbm-cardInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.rbm-cardInfo strong {
  color: var(--brand-primary, #1E3A5F);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rbm-meta {
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
}

.rbm-cardActions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.rbm-empty {
  text-align: center;
  color: var(--text-secondary, #6b7280);
  padding: 32px 16px;
  font-size: 14px;
}

.rbm-viewer {
  width: 100%;
  min-height: 70vh;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
}

@media (max-width: 600px) {
  .rbm-card {
    flex-direction: column;
    align-items: stretch;
  }
  .rbm-cardActions {
    justify-content: flex-end;
  }
}

/* ====================================================================
   Shopping List Viewer (SLV) — Check Pantry + Stock My Pantry
   ==================================================================== */
.slv-checkPantryBtn {
  background: linear-gradient(135deg, var(--brand-accent, #C9A962), var(--brand-accent-light, #E8D5A3));
  color: var(--brand-primary);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.slv-checkPantryBtn:hover {
  opacity: 0.9;
}

/* Verification badges on SLV items */
.slv-verifyBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
}

.slv-verifyBadge--have {
  background-color: #D1FAE5;
  color: #065F46;
}

.slv-verifyBadge--need {
  background-color: #FEE2E2;
  color: #991B1B;
}

/* Verification summary bar */
.slv-verifySummary {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.06), rgba(30, 58, 95, 0.02));
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary);
  text-align: center;
}

/* Food-Drug Interaction badges on SLV items */
.slv-drugBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.slv-drugBadge--critical {
  background-color: #FEE2E2;
  color: #991B1B;
}

.slv-drugBadge--significant {
  background-color: #FED7AA;
  color: #9A3412;
}

.slv-drugBadge--moderate {
  background-color: #FEF3C7;
  color: #92400E;
}

@media (max-width: 600px) {
  .atc-modal {
    width: 95vw;
  }

  .atc-servingsRow {
    flex-direction: column;
    align-items: flex-start;
  }

  .slv-verifyBadge {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* =============================================================================
   MPI — Meal Plan Import Modal
   ============================================================================= */

.mpi-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.mpi-modal {
  background: white;
  border-radius: 12px;
  width: 90vw;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mpi-header {
  background: linear-gradient(135deg, var(--brand-navy, #1E3A5F), var(--brand-navy-light, #2C5282));
  color: white;
  padding: 16px 24px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mpi-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: white;
}

.mpi-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpi-close:hover {
  background: rgba(255,255,255,0.3);
}

.mpi-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.mpi-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-light, #E2E8F0);
  overflow: visible;
}

.mpi-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary, #64748B);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.mpi-tab:hover {
  color: var(--brand-navy, #1E3A5F);
}

.mpi-tab--active {
  color: var(--brand-navy, #1E3A5F);
  font-weight: 600;
  border-bottom-color: var(--brand-gold, #C9A962);
}

.mpi-dropzone {
  border: 2px dashed var(--border-light, #D1D5DB);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  background: var(--bg-light, #F9FAFB);
  transition: border-color 0.2s, background 0.2s;
}

.mpi-dropzone:hover {
  border-color: var(--brand-navy, #1E3A5F);
  background: var(--bg-blue-tint, #EBF0F7);
}

.mpi-dropzoneContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mpi-dropzoneText {
  font-size: 0.95rem;
  color: var(--text-secondary, #64748B);
  margin: 0;
}

.mpi-dropzoneOr {
  font-size: 0.85rem;
  color: var(--text-muted, #94A3B8);
  margin: 4px 0;
}

.mpi-browseBtn {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--brand-navy, #1E3A5F), var(--brand-navy-light, #2C5282));
  color: white;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 500;
}

.mpi-browseBtn:hover {
  opacity: 0.9;
}

.mpi-fileInputHidden {
  display: none;
}

.mpi-fileHint {
  font-size: 0.8rem;
  color: var(--text-muted, #94A3B8);
  margin: 4px 0 0;
}

.mpi-fileSelected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.mpi-fileName {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  margin: 0;
}

.mpi-removeFileBtn {
  background: none;
  border: 1px solid var(--border-light, #D1D5DB);
  color: var(--text-secondary, #64748B);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

.mpi-removeFileBtn:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #991B1B;
}

.mpi-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-light, #D1D5DB);
  border-radius: 8px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.9rem;
  resize: vertical;
  min-height: 200px;
  box-sizing: border-box;
}

.mpi-textarea:focus {
  outline: none;
  border-color: var(--brand-navy, #1E3A5F);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.mpi-urlInput {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-light, #D1D5DB);
  border-radius: 8px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.9rem;
  box-sizing: border-box;
}

.mpi-urlInput:focus {
  outline: none;
  border-color: var(--brand-navy, #1E3A5F);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.mpi-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.mpi-parseBtn {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--brand-navy, #1E3A5F), var(--brand-navy-light, #2C5282));
  color: white;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.mpi-parseBtn:hover:not(:disabled) {
  opacity: 0.9;
}

.mpi-parseBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mpi-planMeta {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.mpi-metaRow {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mpi-metaLabel {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #64748B);
}

.mpi-metaInput,
.mpi-metaSelect {
  padding: 8px 12px;
  border: 1px solid var(--border-light, #D1D5DB);
  border-radius: 6px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.9rem;
}

.mpi-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.mpi-dayCard {
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--bg-light, #F9FAFB);
}

.mpi-dayTitle {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light, #E2E8F0);
}

.mpi-mealRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.mpi-mealType {
  width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--border-light, #D1D5DB);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: var(--font-body, 'Outfit', sans-serif);
  flex-shrink: 0;
}

.mpi-mealName {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-light, #D1D5DB);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: var(--font-body, 'Outfit', sans-serif);
}

.mpi-mealCals {
  font-size: 0.8rem;
  color: var(--text-muted, #94A3B8);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

.mpi-removeMealBtn {
  background: none;
  border: none;
  color: #EF4444;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}

.mpi-removeMealBtn:hover {
  background: #FEE2E2;
}

.mpi-backBtn {
  padding: 10px 20px;
  background: white;
  border: 1px solid var(--border-light, #D1D5DB);
  border-radius: 8px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-secondary, #64748B);
}

.mpi-backBtn:hover {
  background: var(--bg-light, #F9FAFB);
}

.mpi-confirmBtn {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--brand-gold, #C9A962), var(--brand-gold-light, #E8D5A3));
  color: var(--brand-navy, #1E3A5F);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.mpi-confirmBtn:hover:not(:disabled) {
  opacity: 0.9;
}

.mpi-confirmBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mpi-parseBtn:disabled,
.mpi-confirmBtn:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mpi-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: mpi-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}

.mpi-confirmBtn .mpi-spinner {
  border-color: rgba(30,58,95,0.2);
  border-top-color: var(--brand-navy, #1E3A5F);
}

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

@media (max-width: 600px) {
  .mpi-modal {
    width: 95vw;
    max-height: 90vh;
  }

  .mpi-body {
    padding: 16px;
  }

  .mpi-tabs {
    overflow-x: auto;
  }

  .mpi-tab {
    padding: 8px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .mpi-planMeta {
    flex-direction: column;
  }

  .mpi-mealRow {
    flex-wrap: wrap;
  }

  .mpi-mealType {
    width: 100%;
  }

  .mpi-mealName {
    width: 100%;
  }

  .mpi-actions {
    flex-direction: column;
  }

  .mpi-parseBtn,
  .mpi-confirmBtn,
  .mpi-backBtn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   XAI — Explainable AI Prompt Transparency
   Prefix: xai-
   Patent: P-003 Claims 1,4,5 · P-001 Claims 4,7,8,13
   ============================================================ */

/* ── Toggle Button (gold outline, brain icon) ── */
.xai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--brand-accent, #C9A962);
  color: var(--brand-primary, #1E3A5F);
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s;
}
.xai-toggle:hover {
  background: rgba(201, 169, 98, 0.1);
  border-color: #B8983C;
}
.xai-toggle .xai-toggle-icon { font-size: 16px; }

/* ── Panel Container ── */
.xai-panel {
  margin-top: 16px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 12px;
  background: #FAFBFC;
  overflow: hidden;
}
.xai-panel-header {
  background: linear-gradient(135deg, #EBF0F7 0%, #F0F4F8 100%);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xai-panel-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-primary, #1E3A5F);
}
.xai-panel-badge {
  background: linear-gradient(135deg, #C9A962, #E8D5A3);
  color: var(--brand-primary, #1E3A5F);
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
}

/* ── 3-Layer Tabs ── */
.xai-layers {
  display: flex;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  background: white;
  overflow: visible;
  gap: 0;
}
.xai-layer-tab {
  flex: 1;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border: none;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  background: none;
  font-family: var(--font-body, 'Outfit', sans-serif);
}
.xai-layer-tab:hover { color: var(--brand-primary, #1E3A5F); background: #F8F9FB; }
.xai-layer-tab--active {
  color: var(--brand-primary, #1E3A5F);
  border-bottom-color: var(--brand-accent, #C9A962);
  font-weight: 600;
}

/* ── Layer Content ── */
.xai-layer-content { padding: 16px; }
.xai-layer-intro { font-size: 13px; color: #6b7280; margin-bottom: 12px; }

/* ── Summary Items ── */
.xai-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.xai-summary-item:last-child { border-bottom: none; }
.xai-summary-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: #EBF0F7;
}
.xai-summary-body { flex: 1; min-width: 0; }
.xai-summary-label { font-weight: 500; color: var(--brand-primary, #1E3A5F); }
.xai-summary-value { color: #4b5563; font-size: 13px; word-wrap: break-word; }

/* Feature importance bar (P-003 Claim 5) */
.xai-importance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.xai-importance-bar {
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  flex: 1;
  max-width: 120px;
  overflow: hidden;
}
.xai-importance-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #C9A962, #E8D5A3);
}
.xai-importance-pct {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  white-space: nowrap;
}

/* Confidence box */
.xai-confidence-box {
  margin-top: 12px;
  padding: 10px;
  background: #EBF0F7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.xai-confidence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #059669;
  font-weight: 600;
  white-space: nowrap;
}
.xai-confidence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #059669;
  flex-shrink: 0;
}
.xai-confidence-detail { font-size: 12px; color: #6b7280; }

/* ── Full Prompt (Detail Layer) ── */
.xai-prompt-section {
  margin-bottom: 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.xai-prompt-section-header {
  background: #F8F9FB;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary, #1E3A5F);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  user-select: none;
}
.xai-prompt-section-header:hover { background: #EBF0F7; }
.xai-arrow { font-size: 10px; width: 16px; text-align: center; transition: transform 0.2s; }
.xai-prompt-text {
  padding: 12px 14px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #374151;
  background: #FAFBFC;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Model params */
.xai-params {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: white;
}
.xai-param {
  background: #EBF0F7;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--brand-primary, #1E3A5F);
  font-weight: 500;
}
.xai-param span { color: #6b7280; font-weight: 400; }

/* ── Evidence Layer ── */
.xai-evidence-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.xai-evidence-item:last-child { border-bottom: none; }
.xai-evidence-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: 4px;
}
.xai-evidence-desc { font-size: 13px; color: #4b5563; margin-bottom: 6px; }
.xai-evidence-source { font-size: 11px; color: #9ca3af; font-style: italic; }
.xai-evidence-disclaimer {
  margin-top: 12px;
  padding: 10px;
  background: #FEF3C7;
  border-radius: 8px;
  font-size: 12px;
  color: #92400e;
}

/* ── Compact mode (chat) ── */
.xai-compact {
  margin-top: 8px;
  padding: 10px 12px;
  background: #FAFBFC;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
}
.xai-compact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.xai-compact-icon { font-size: 14px; flex-shrink: 0; }
.xai-compact-label { font-weight: 500; color: var(--brand-primary, #1E3A5F); }
.xai-compact-value { color: #6b7280; font-size: 12px; }
.xai-compact-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── PWA Responsive (mobile/tablet/desktop) ── */
@media (max-width: 600px) {
  .xai-toggle { width: 100%; justify-content: center; font-size: 12px; padding: 10px; }
  .xai-layers { flex-wrap: nowrap; }
  .xai-layer-tab { font-size: 12px; padding: 8px 6px; }
  .xai-summary-item { gap: 8px; }
  .xai-summary-icon { width: 24px; height: 24px; font-size: 12px; }
  .xai-prompt-text { font-size: 11px; max-height: 300px; padding: 10px; }
  .xai-confidence-box { flex-direction: column; align-items: flex-start; }
  .xai-params { flex-direction: column; }
  .xai-compact-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .xai-prompt-text { max-height: 350px; }
}
@media (min-width: 1025px) {
  .xai-panel { max-width: 800px; }
}

/* ============================================
   MEDICAL DISCLAIMER
   Reusable disclaimer banner for AI and health screens.
   ============================================ */
.medical-disclaimer {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-tertiary, #F0F4F8);
  border-left: 3px solid var(--brand-navy, #1E3A5F);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  font-size: var(--font-size-sm, 0.8125rem);
  color: var(--text-secondary, #6B7280);
  line-height: 1.5;
}

.medical-disclaimer p {
  margin: 0;
}

/* =============================================================================
   SubscriptionTab (sub-) + PaidGate (pg-) + TrialBanner (tb-)
   Sprint 16 — Simplified 1-tier PRO model
   Patent claims: P-007 Claims 1-6
   All tokens from healist-tokens.css (D4S Prestige standard)
   ============================================================================= */

.sub-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-5);
}

/* Current Plan Card */
.sub-currentPlan {
  margin-bottom: var(--space-6);
}

.sub-currentPlanBody {
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.sub-currentPlanInfo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.sub-currentTierName {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--brand-primary);
}

.sub-statusBadge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--brand-surface-elevated);
  color: var(--brand-text-muted);
}

.sub-statusBadge--active {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.sub-statusBadge--pastDue {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.sub-statusBadge--canceled {
  background: var(--color-error-light);
  color: var(--color-error-dark);
}

.sub-renewalDate {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text-muted);
}

.sub-manageBtn {
  white-space: nowrap;
}

/* Success / Error Banners */
.sub-successBanner {
  background: var(--color-success-light);
  color: var(--color-success-dark);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  border: 1px solid var(--color-success-border);
}

.sub-errorBanner {
  background: var(--color-error-light);
  color: var(--color-error-dark);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  border: 1px solid var(--color-error-border);
}

/* Billing Interval Toggle */
.sub-billingToggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-6);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--brand-border);
}

.sub-toggleBtn {
  flex: 1;
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--brand-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.sub-toggleBtn--active {
  background: var(--brand-primary);
  color: var(--brand-text-light);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-semibold);
}

.sub-toggleBtn--active:hover {
  background: var(--brand-primary-dark);
}

.sub-savingsBadge {
  background: var(--brand-secondary);
  color: white;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Tier Cards Grid */
.sub-tierGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.sub-tierCard {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.sub-tierCard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.sub-tierCard--current {
  border-color: var(--brand-secondary);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--brand-secondary), var(--shadow-md);
}

.sub-tierCard--recommended {
  border-color: var(--brand-primary);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

.sub-recommendedRibbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));
  color: var(--brand-text-light);
  text-align: center;
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.sub-tierCardHeader {
  padding: var(--space-6) var(--space-5) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--brand-border);
}

.sub-tierCard--recommended .sub-tierCardHeader {
  padding-top: calc(var(--space-6) + 32px);
}

.sub-tierName {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--brand-primary);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
}

.sub-tierPrice {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--space-1);
}

.sub-priceAmount {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--brand-primary);
  line-height: var(--leading-tight);
}

.sub-priceInterval {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text-muted);
}

.sub-annualTotal {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin-top: var(--space-1);
}

/* Feature List */
.sub-featureList {
  list-style: none;
  padding: var(--space-5);
  margin: 0;
  flex: 1;
}

.sub-featureItem {
  padding: var(--space-1) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--leading-normal);
}

.sub-featureCheck {
  color: var(--brand-secondary);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Card Footer / CTA */
.sub-tierCardFooter {
  padding: var(--space-3) var(--space-5) var(--space-5);
}

.sub-upgradeBtn {
  width: 100%;
}

.sub-downgradeBtn {
  width: 100%;
}

.sub-currentBtn {
  width: 100%;
  background: var(--brand-surface-elevated) !important;
  color: var(--brand-text-muted) !important;
  border: 1px solid var(--brand-border) !important;
  cursor: default !important;
}

.sub-currentBtn:hover {
  background: var(--brand-surface-elevated) !important;
  color: var(--brand-text-muted) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .sub-tierGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sub-tierGrid {
    grid-template-columns: 1fr;
  }

  .sub-currentPlanBody {
    flex-direction: column;
    align-items: flex-start;
  }

  .sub-manageBtn {
    width: 100%;
  }

  .sub-tierCard:hover {
    transform: none;
  }

  .sub-upgradeBtn,
  .sub-downgradeBtn,
  .sub-currentBtn {
    min-height: 44px;
    font-size: var(--text-lg) !important;
  }
}

/* ── Trial Countdown ────────────────────────────────────────────────────── */

.sub-trialCountdown {
  color: var(--brand-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(201, 169, 98, 0.1);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--brand-secondary);
}

.sub-trialNote {
  color: var(--brand-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* ── Trial Status Badge ─────────────────────────────────────────────────── */

.sub-statusBadge--trial {
  background: rgba(201, 169, 98, 0.15);
  color: var(--brand-secondary);
  border: 1px solid rgba(201, 169, 98, 0.3);
}

/* ── Referral Section ───────────────────────────────────────────────────── */

.sub-referralCard {
  margin-top: var(--space-6);
}

.sub-referralBody {
  padding: var(--space-5);
}

.sub-referralDescription {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.sub-referralCodeBox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-border);
  margin-bottom: var(--space-4);
}

.sub-referralCode {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
  flex: 1;
  word-break: break-all;
  user-select: all;
}

.sub-copyBtn {
  white-space: nowrap;
}

.sub-referralStats {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.sub-referralStat {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
}

.sub-referralStat strong {
  color: var(--brand-primary);
  font-size: var(--text-base);
}

.sub-applyRewardBtn {
  width: 100%;
}

/* =============================================================================
   PaidGate (pg-) — Subscription required prompt
   ============================================================================= */

.pg-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-8) var(--space-4);
}

.pg-card {
  max-width: 480px;
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.pg-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.7;
}

.pg-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}

.pg-description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text-muted);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.pg-features {
  text-align: left;
  margin-bottom: var(--space-5);
}

.pg-featuresLabel {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: var(--space-2);
}

.pg-featureList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pg-featureList li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  padding: var(--space-1) 0;
}

.pg-featureList li::before {
  content: "\2713";
  color: var(--state-success-dark);
  margin-right: var(--space-2);
  font-weight: 700;
}

.pg-actions {
  margin-top: var(--space-4);
}

.pg-subscribeBtn {
  width: 100%;
  margin-bottom: var(--space-2);
}

.pg-priceNote {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
}

/* =============================================================================
   TrialBanner (tb-) — Trial countdown banner
   ============================================================================= */

.tb-banner {
  flex-shrink: 0;          /* don't compress in flex layout */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--brand-primary), #2a4f7f);
  color: white;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.tb-banner--urgent {
  background: linear-gradient(135deg, #8b2020, #a52a2a);
}

.tb-banner--expired {
  background: linear-gradient(135deg, #6b1010, #8b1a1a);
}

.tb-text {
  flex: 1;
  font-weight: 500;
}

.tb-subscribeBtn {
  white-space: nowrap;
  padding: var(--space-1) var(--space-4) !important;
  font-size: var(--text-sm) !important;
  background: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
}

.tb-subscribeBtn:hover {
  background: var(--brand-secondary-light) !important;
}

.tb-dismissBtn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: var(--space-1);
  font-size: var(--text-base);
  line-height: 1;
}

.tb-dismissBtn:hover {
  color: white;
}

@media (max-width: 768px) {
  .tb-banner {
    flex-wrap: wrap;
  }

  .tb-text {
    flex: 1 1 100%;
    margin-bottom: var(--space-2);
  }

  .tb-subscribeBtn {
    flex: 1;
  }

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

  .sub-referralStats {
    flex-direction: column;
    gap: var(--space-2);
  }

  .sub-referralCodeBox {
    flex-direction: column;
    text-align: center;
  }

  .sub-copyBtn {
    width: 100%;
  }
}


/* ============================================
   REFERRAL ENTRIES (SubscriptionTab)
   ============================================ */

.sub-referralEntries { margin-top: var(--space-4); }
.sub-referralEntriesTitle { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); color: var(--brand-primary); }
.sub-referralEntry { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.sub-referralEntryEmail { font-size: var(--text-sm); flex: 1; min-width: 150px; }
.sub-referralEntryStatus { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
.sub-referralEntryStatus--converted { background: var(--bg-info); color: var(--brand-primary); }
.sub-referralEntryStatus--rewarded { background: var(--bg-success-subtle, #e8f5e9); color: #2e7d32; }
.sub-referralEntryDate { font-size: var(--text-xs); color: var(--text-tertiary); }

/* =============================================================================
   WCI — What Can I Cook (pantry-first recipe discovery)
   ============================================================================= */
.wci-hubWrapper { padding: var(--space-4); }
.wci-hubHeader { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.wci-hubTitle { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--brand-primary); margin: 0; }

.wci-summaryBar {
  display: flex; gap: var(--space-4); margin-bottom: var(--space-4);
  padding: var(--space-3); background: var(--bg-secondary); border-radius: var(--radius-lg);
}
.wci-stat { flex: 1; text-align: center; }
.wci-stat--highlight .wci-statValue { color: var(--brand-primary); }
.wci-statValue { display: block; font-size: var(--text-2xl); font-weight: 700; color: var(--brand-primary); font-family: var(--font-heading); }
.wci-statLabel { font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }

.wci-filters { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.wci-filterBtn {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--border-default); background: var(--bg-primary);
  font-size: var(--text-sm); cursor: pointer; transition: all 0.2s;
  color: var(--text-secondary);
}
.wci-filterBtn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.wci-filterBtn--active {
  background: var(--brand-primary); color: white; border-color: var(--brand-primary);
}

.wci-loading { text-align: center; padding: var(--space-8); color: var(--text-secondary); }
.wci-loading .spinner { margin: 0 auto var(--space-3); }
.wci-error { text-align: center; padding: var(--space-6); color: var(--color-error); }
.wci-emptyState { text-align: center; padding: var(--space-8); color: var(--text-secondary); }
.wci-emptyIcon { font-size: 3rem; margin-bottom: var(--space-3); }

.wci-recipeList { display: flex; flex-direction: column; gap: var(--space-3); }
.wci-recipeCard {
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow 0.2s;
}
.wci-recipeCard:hover { box-shadow: var(--shadow-md); }

.wci-recipeMain {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4); cursor: pointer; gap: var(--space-3);
}
.wci-recipeInfo { flex: 1; min-width: 0; }
.wci-recipeTitleRow { display: flex; align-items: center; gap: var(--space-2); }
.wci-recipeTitle {
  font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600;
  color: var(--brand-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wci-favStar { color: var(--brand-accent); font-size: var(--text-lg); }
.wci-recipeMeta {
  display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1);
  font-size: var(--text-xs); color: var(--text-tertiary);
}
.wci-recipeMeta span:not(:last-child)::after { content: " · "; }

.wci-recipeCoverage { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.wci-coverageCircle {
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
}
.wci-coveragePct { font-size: var(--text-sm); font-weight: 700; color: var(--brand-primary); }
.wci-badge {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.wci-badge--ready { background: var(--bg-info); color: var(--brand-primary); }
.wci-badge--almost { background: var(--bg-info); color: var(--brand-primary); }
.wci-badge--partial { background: #fef3c7; color: #92400e; }
.wci-badge--low { background: var(--bg-secondary); color: var(--text-tertiary); }
.wci-ingredientCount { font-size: var(--text-xs); color: var(--text-tertiary); }

.wci-recipeExpanded {
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
}
.wci-ingredientSection { margin-bottom: var(--space-3); }
.wci-sectionLabel {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: var(--space-1);
}
.wci-sectionLabel--have { color: var(--brand-primary); }
.wci-sectionLabel--need { color: var(--color-error, #b91c1c); }
.wci-ingredientTags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.wci-tag {
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full);
}
.wci-tag--have { background: var(--bg-info); color: var(--brand-primary); }
.wci-tag--need { background: #fef2f2; color: #b91c1c; }
.wci-recipeActions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }

@media (max-width: 480px) {
  .wci-summaryBar { flex-direction: column; gap: var(--space-2); }
  .wci-recipeMain { flex-direction: column; align-items: flex-start; }
  .wci-recipeCoverage { flex-direction: row; gap: var(--space-2); }
  .wci-recipeTitle { white-space: normal; }
}


/* ============================================
   LIST CONTROLS (lc-) — Search, Sort, Per-Page
   ============================================ */
.lc-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

.lc-searchInput {
  flex: 1;
  min-width: 180px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-text);
  background: white;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lc-searchInput:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 2px rgba(201, 169, 98, 0.2);
}

.lc-searchInput::placeholder {
  color: var(--brand-text-muted);
}

.lc-sortSelect,
.lc-perPageSelect {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-text);
  background: white;
  cursor: pointer;
  outline: none;
}

.lc-sortSelect:focus,
.lc-perPageSelect:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 2px rgba(201, 169, 98, 0.2);
}

.lc-perPageSelect {
  width: 70px;
}

.lc-resultCount {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lc-container {
    flex-direction: column;
    align-items: stretch;
  }
  .lc-searchInput {
    min-width: unset;
    width: 100%;
  }
  .lc-sortSelect,
  .lc-perPageSelect {
    width: 100%;
  }
}


/* ============================================
   PAGINATION (pgn-) — Page Navigation
   ============================================ */
.pgn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

.pgn-btn {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-md);
  background: white;
  color: var(--brand-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

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

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

.pgn-pageBtn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-md);
  background: white;
  color: var(--brand-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.pgn-pageBtn:hover {
  background: rgba(30, 58, 95, 0.08);
}

.pgn-pageBtn--active {
  background: var(--brand-primary);
  color: white;
  font-weight: 600;
}

.pgn-pageBtn--active:hover {
  background: var(--brand-primary);
  color: white;
}

.pgn-ellipsis {
  padding: 0 var(--space-1);
  color: var(--brand-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}

@media (max-width: 480px) {
  .pgn-btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
  .pgn-pageBtn {
    min-width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }
}


/* PANTRY TABS — now uses standard .tab-bar / .tab-item (no custom pdv-tab classes) */


/* ============================================
   SHOPPING CART CARD (sla-) — Single Cart Card
   ============================================ */
.sla-cartCard {
  background: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}

.sla-cartStatus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sla-cartBadge {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  color: white;
}

.sla-cartBadge--pending {
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-dark, #b8953e));
}

.sla-cartBadge--fulfilled {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}

.sla-cartCount {
  color: var(--brand-text-muted);
  font-size: var(--text-sm);
}

.sla-cartMessage {
  color: var(--brand-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.sla-cartActions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.sla-emptyState {
  text-align: center;
  padding: var(--space-6);
  color: var(--brand-text-muted);
  font-style: italic;
}

.sla-viewItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--brand-border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.sla-viewItem:last-child {
  border-bottom: none;
}

.sla-viewItemName {
  flex: 1;
}

.sla-viewItemQty {
  color: var(--brand-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  margin-left: var(--space-3);
}

.sla-toolbar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* =============================================================================
   FASTEN HEALTH CONNECT (fhc-) — Health Records Connection + Provider Grid
   Patent claims: P-001 Claims 15-17, P-008 Claims 6-7
   ============================================================================= */

.fhc-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fhc-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--text-secondary);
  font-family: var(--font-body);
}

.fhc-statusCard {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.fhc-statusHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.fhc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1E3A5F;
  margin: 0;
}

.fhc-badge {
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fhc-badge--active {
  background: #dcfce7;
  color: #166534;
}

.fhc-badge--disconnected {
  background: #f3f4f6;
  color: #6b7280;
}

.fhc-statsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #d1d5db;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  margin: 1rem 0 1.5rem;
}

.fhc-stat {
  text-align: center;
  padding: 1rem 0.75rem;
  background: #ffffff;
}

.fhc-statLabel {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.fhc-statValue {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1E3A5F;
  font-family: 'Cormorant Garamond', serif;
}

.fhc-sectionTitle {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--brand-text);
  margin: 0 0 var(--space-2) 0;
}

.fhc-providerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.fhc-providerCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.fhc-providerName {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--brand-text);
}

.fhc-providerStatus {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
}

.fhc-providerStatus--active {
  background: var(--bg-success-subtle);
  color: var(--text-success);
}

.fhc-actions {
  display: flex;
  gap: var(--space-2);
}

.fhc-syncBtn {
  min-width: 100px;
}

.fhc-disconnectedInfo {
  text-align: center;
  padding: 1rem 0 0;
}

.fhc-description {
  font-family: 'Outfit', sans-serif;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 auto 1.25rem;
  max-width: 500px;
}

/* Hidden Fasten Stitch element — invisible but interactive (dialog needs pointer-events) */
.fhc-stitchHidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

/* Centered action button container */
.fhc-centeredAction {
  text-align: center;
  margin-top: 1rem;
}

/* D.O.P. Conflicts tooltip "?" */
.fhc-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d1d5db;
  color: #374151;
  font-size: 0.6rem;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
  vertical-align: middle;
}

/* D.O.P. Tab — Precedence Table */
.fhc-dopTable {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.fhc-dopRow {
  display: grid;
  grid-template-columns: 50px 1fr 70px 1fr;
  gap: 1px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
}

.fhc-dopRow:last-child {
  border-bottom: none;
}

.fhc-dopRow--header {
  background: #1E3A5F;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fhc-dopRow--header span {
  color: #ffffff;
}

.fhc-dopTier,
.fhc-dopSource,
.fhc-dopTrust,
.fhc-dopExamples {
  padding: 0.65rem 0.75rem;
  color: #374151;
}

.fhc-dopTier {
  text-align: center;
  font-weight: 700;
  color: #1E3A5F;
}

.fhc-dopTrust {
  text-align: center;
  font-weight: 600;
}

.fhc-dopExamples {
  color: #6b7280;
  font-size: 0.85rem;
}

.fhc-dopInfo {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.25rem;
}

.fhc-dopInfo h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1E3A5F;
  margin: 0 0 0.75rem;
}

.fhc-dopInfo ul {
  margin: 0;
  padding-left: 1.25rem;
}

.fhc-dopInfo li {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 0.35rem;
}

@media (max-width: 768px) {
  .fhc-dopRow {
    grid-template-columns: 40px 1fr 55px;
  }
  .fhc-dopExamples {
    display: none;
  }
}

/* =============================================================================
   MEDICAL RECORDS REQUESTS (mrr-) — Request Table + Email Modal + Vault
   Patent claims: P-004 (patient-provider communication)
   ============================================================================= */

.mrr-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

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

.mrr-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--brand-text);
  margin: 0;
}

.mrr-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mrr-item {
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.mrr-itemHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.mrr-providerName {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--brand-text);
}

.mrr-statusBadge {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: uppercase;
}

.mrr-statusBadge--draft {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.mrr-statusBadge--sent {
  background: var(--bg-info-subtle, #e0f2fe);
  color: var(--text-info, #0369a1);
}

.mrr-statusBadge--responded {
  background: var(--bg-success-subtle);
  color: var(--text-success);
}

.mrr-statusBadge--expired {
  background: var(--bg-warning-subtle, #fef3c7);
  color: var(--text-warning, #92400e);
}

.mrr-itemDetails {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  margin-bottom: var(--space-2);
}

.mrr-itemActions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mrr-deleteBtn {
  color: var(--text-danger, #dc2626) !important;
  border-color: var(--text-danger, #dc2626) !important;
}

.mrr-emptyText {
  font-family: var(--font-body);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--space-4);
}

.mrr-credentials {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.mrr-credField {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.mrr-credLabel {
  font-weight: 600;
  color: var(--brand-text);
  min-width: 100px;
}

.mrr-credWarning {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  padding: var(--space-2);
  background: var(--bg-success-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.mrr-emailPreview {
  padding: var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .fhc-statusHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .fhc-statsGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fhc-providerGrid {
    grid-template-columns: 1fr;
  }

  .fhc-actions {
    flex-direction: column;
  }

  .fhc-actions .btn {
    width: 100%;
  }

  .mrr-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .mrr-itemHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .mrr-itemActions {
    flex-direction: column;
  }

  .mrr-itemActions .btn {
    width: 100%;
  }
}

/* ============================================
   DMD — Digital Medical Devices Tab
   Sprint 31: Device Integration
   ============================================ */

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

.dmd-tierBadge {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-family: var(--font-body);
  color: white;
  background: var(--brand-navy-light, #2a4a6f);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
}

.dmd-noteText {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  font-style: italic;
}

.dmd-sectionLabel {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* Apple Health Bridge device grid */
.dmd-bridgeGrid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.dmd-bridgeCard {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-secondary, #f8f9fa);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light, #e0e0e0);
}

.dmd-bridgeIcon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.dmd-bridgeInfo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dmd-bridgeName {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base, 14px);
  color: var(--brand-text, #1E293B);
}

.dmd-bridgeCategory {
  font-family: var(--font-body);
  font-size: var(--text-sm, 12px);
  color: var(--brand-text-muted, #6B7280);
}

.dmd-bridgeDescription {
  font-family: var(--font-body);
  font-size: var(--text-sm, 12px);
  color: var(--brand-text-muted, #6B7280);
  line-height: 1.5;
  margin-top: 2px;
}

.dmd-bridgeStatus {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.dmd-bridgeStatus--active {
  color: #166534;
  background: #dcfce7;
}

.dmd-bridgeStatus--inactive {
  color: var(--text-secondary);
  background: var(--surface-secondary, #f0f0f0);
}

.dmd-appStoreCta {
  background: var(--surface-secondary, #f5f7fa);
  border: 1px solid var(--border-primary, #e0e0e0);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}

.dmd-ctaText {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

/* Withings capabilities tags */
.dmd-capabilityGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.dmd-capabilityTag {
  font-size: var(--font-size-xs);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-navy);
  color: white;
  font-weight: 500;
}

.dmd-withingsCapabilities {
  border-top: 1px solid var(--border-light, #e0e0e0);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .dmd-bridgeCard {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .dmd-capabilityGrid {
    gap: 4px;
  }

  .dmd-capabilityTag {
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* =============================================================================
 * Sprint 46: AI Guardrails — AINutritionistChat Spinner + Locked Textarea
 * Prefix: ainc-
 * ============================================================================= */

.ainc-textarea--locked {
  background-color: var(--bg-secondary, #f8f9fa);
  cursor: not-allowed;
  opacity: 0.85;
}

.ainc-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px) var(--space-4, 16px);
  gap: var(--space-3, 12px);
}

.ainc-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bg-tertiary, #e0e0e0);
  border-top-color: var(--brand-navy, #1E3A5F);
  border-radius: 50%;
  animation: ainc-spin 0.8s linear infinite;
}

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

.ainc-spinner-text {
  color: var(--brand-navy, #1E3A5F);
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: var(--font-size-sm, 14px);
  font-style: italic;
  margin: 0;
}

/* =============================================================================
 * Sprint 46: Domain Validation Retry Modal
 * Prefix: dvr-
 * ============================================================================= */

.dvr-message {
  font-size: var(--font-size-base, 16px);
  line-height: 1.5;
  color: var(--text-primary, #333);
  margin-bottom: var(--space-3, 12px);
}

.dvr-attempt {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary, #666);
  font-style: italic;
}

/* Sprint 46: Domain Validation Rejection Modal */
.dvm-overlay {
  z-index: 10001;
}

.dvm-rejection {
  text-align: center;
  padding: var(--space-3, 12px) 0;
}

.dvm-icon {
  font-size: 48px;
  margin-bottom: var(--space-3, 12px);
  line-height: 1;
}

.dvm-reason {
  font-size: var(--font-size-base, 16px);
  font-weight: 600;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: var(--space-3, 12px);
  line-height: 1.4;
}

.dvm-guidance {
  font-size: var(--font-size-base, 16px);
  color: var(--text-primary, #333);
  margin-bottom: var(--space-3, 12px);
  line-height: 1.5;
}

.dvm-context {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary, #666);
  line-height: 1.5;
  font-style: italic;
}

/* =============================================================================
 * Sprint 46: XAI Domain Validation Pre-Step
 * ============================================================================= */

.xai-domain-validation {
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px solid var(--border-light, #e0e0e0);
}

/* =============================================================================
 * Sprint 46: Recipe Image Generation Loading
 * Prefix: rf-
 * ============================================================================= */

.rf-imageLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px);
  margin: var(--space-3, 12px) 0;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: var(--radius-md, 8px);
  border: 1px dashed var(--border-light, #e0e0e0);
}

/* =============================================================================
   ASM — Active Sessions Manager (Account Tab)
   ============================================================================= */

.asm-loadingText,
.asm-emptyText {
  color: var(--text-secondary, #6c757d);
  font-style: italic;
  margin: 0;
}

.asm-sessionList {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.asm-sessionItem {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-light, #e0e0e0);
  background: var(--bg-primary, #ffffff);
  transition: background 0.15s;
}

.asm-sessionItem--current {
  border-color: var(--brand-navy, #1E3A5F);
  background: var(--bg-secondary, #f8f9fa);
}

.asm-sessionIcon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.asm-sessionInfo {
  flex: 1;
  min-width: 0;
}

.asm-sessionName {
  font-weight: 600;
  color: var(--brand-text, #1E3A5F);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

.asm-currentBadge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-navy, #1E3A5F);
  color: #ffffff;
}

.asm-sessionMeta {
  font-size: 0.85rem;
  color: var(--text-secondary, #6c757d);
  margin-top: 2px;
}

.asm-revokeBtn {
  flex-shrink: 0;
  font-size: 0.85rem;
  padding: 4px 12px;
  color: var(--brand-navy, #1E3A5F);
  border: 1px solid var(--brand-navy, #1E3A5F);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.asm-revokeBtn:hover {
  background: var(--brand-navy, #1E3A5F);
  color: #ffffff;
}

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

.asm-logoutAllRow {
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-light, #e0e0e0);
}

.asm-logoutAllBtn {
  width: 100%;
}

.asm-confirmRow {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

.asm-confirmRow span {
  font-weight: 600;
  color: var(--brand-text, #1E3A5F);
}

.asm-confirmBtn {
  font-size: 0.85rem;
  padding: 6px 16px;
}

.asm-cancelBtn {
  font-size: 0.85rem;
  padding: 6px 16px;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .asm-sessionItem {
    flex-wrap: wrap;
  }

  .asm-revokeBtn {
    margin-left: auto;
  }

  .asm-confirmRow {
    flex-direction: column;
    align-items: stretch;
  }

  .asm-confirmRow span {
    text-align: center;
  }
}

/* =============================================================================
   MEDICATIONS PAGE (med- prefix) — Backlog #25
   ============================================================================= */

.med-emptyText {
  padding: 1.5rem;
  color: var(--text-secondary, #6b7280);
  text-align: center;
}

.med-category {
  font-size: 0.8rem;
  color: var(--brand-navy, #1E3A5F);
  background: var(--brand-gold-light, #f5eed9);
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
  text-transform: capitalize;
}

.med-reason {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
  margin-top: 0.25rem;
}

.med-timing {
  font-size: 0.85rem;
  color: var(--brand-navy, #1E3A5F);
  margin-top: 0.25rem;
}

.med-interactionCount {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}

.med-interactionList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.med-interactionCard {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem;
  background: var(--surface, #fff);
}

.med-severity-critical {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
}

.med-severity-significant {
  border-left: 4px solid #ea580c;
  background: #fff7ed;
}

.med-severity-moderate {
  border-left: 4px solid #ca8a04;
  background: #fefce8;
}

.med-severity-minor {
  border-left: 4px solid #2563eb;
  background: #eff6ff;
}

.med-severity-info {
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
}

.med-interactionHeader {
  margin-bottom: 0.5rem;
}

.med-severityBadge {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: capitalize;
}

.med-interactionPair {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.med-mechanism {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 0.35rem;
}

.med-guidance {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-navy, #1E3A5F);
}

/* Timing Schedule */
.med-timingList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.med-timingGroup {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem;
}

.med-timingSlotLabel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 0.5rem;
}

.med-timingItems {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.med-timingItems li {
  font-size: 0.9rem;
  padding: 0.15rem 0;
}

.med-customTiming {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}

.med-timingNotes {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}

/* Warning Banner (post-save interaction alert) */
.med-warningBanner {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem;
}

.med-warningItem {
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 4px;
}

.med-warningItem p {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin-top: 0.25rem;
}

.med-warningDisclaimer {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-navy, #1E3A5F);
}

/* AI Supplement Recommendations */
.med-aiLoading {
  text-align: center;
  padding: 2rem;
}

.med-aiLoading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(30, 58, 95, 0.2);
  border-top-color: var(--brand-navy, #1E3A5F);
  margin: 1rem auto 0;
}

.med-aiError {
  text-align: center;
  padding: 1.5rem;
  color: #dc2626;
}

.med-recCard {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--surface, #fff);
}

.med-recCard--warning {
  border-color: #f59e0b;
  background: #fffbeb;
}

.med-recHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.med-recHeader h4 {
  margin: 0;
  color: var(--brand-navy, #1E3A5F);
}

.med-evidenceBadge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: capitalize;
}

.med-evidence-strong {
  background: #dcfce7;
  color: #166534;
}

.med-evidence-moderate {
  background: #fef9c3;
  color: #854d0e;
}

.med-evidence-emerging {
  background: #e0e7ff;
  color: #3730a3;
}

.med-recDosage {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 0.25rem;
}

.med-recReason {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 0.25rem;
}

.med-recTiming {
  font-size: 0.85rem;
  color: var(--brand-navy, #1E3A5F);
  font-style: italic;
}

.med-recWarning {
  font-size: 0.8rem;
  color: #ca8a04;
  margin-top: 0.25rem;
}

.med-recInteractionAlert {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

/* Autocomplete Dropdown */
.med-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
}

.med-autocompleteItem {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color, #f3f4f6);
}

.med-autocompleteItem:hover {
  background: var(--brand-gold-light, #f5eed9);
}

.med-autocompleteName {
  font-weight: 500;
  flex: 1;
}

.med-autocompleteGeneric {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

.med-autocompleteSource {
  font-size: 0.7rem;
  color: var(--text-secondary, #9ca3af);
  text-transform: uppercase;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .med-interactionList {
    padding: 0.5rem;
  }

  .med-interactionCard {
    padding: 0.75rem;
  }

  .med-timingList {
    padding: 0.5rem;
  }
}

/* ============================================
   BARCODE LOOKUP MODAL (blm-*)
   Reusable barcode entry + mobile scan modal.
   ============================================ */

.blm-modal {
  max-width: 480px;
}

.blm-body {
  padding: 1.25rem;
}

.blm-error {
  background: #FEF2F2;
  color: #991B1B;
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.blm-scanBtn {
  width: 100%;
}

.blm-scannerSection {
  margin: 1rem 0;
}

.blm-scannerHost {
  width: 100%;
  height: 240px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.blm-stopBtn {
  width: 100%;
}

.blm-productResult {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--surface-secondary, #F8F9FA);
  border-radius: 8px;
  border: 1px solid var(--border-light, #E5E7EB);
}

.blm-productInfo {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  margin-bottom: 0.875rem;
}

.blm-productImage {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-light, #E5E7EB);
  flex-shrink: 0;
}

.blm-productDetails {
  flex: 1;
  min-width: 0;
}

.blm-productName {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.blm-productBrand {
  font-size: 0.8125rem;
  color: var(--text-secondary, #6B7280);
  margin-bottom: 0.375rem;
}

.blm-productNutrition {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #6B7280);
}

.blm-useBtn {
  width: 100%;
}

/* PantryItemForm inline camera scanner */
.pf-inlineScanner {
  margin-top: 0.5rem;
}

.pf-scannerHost {
  width: 100%;
  height: 250px;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative;
}

.pf-cameraError {
  color: #c0392b;
  font-size: 0.85rem;
  margin: 0.5rem 0;
  text-align: center;
}

.pf-stopScanBtn {
  width: 100%;
}


/* =============================================================================
   INSTACART ORDER REVIEW (icr-*) — 3-stage reconciliation modal
   ============================================================================= */

.icr-selectAll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--brand-surface-elevated);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.icr-checkLabel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--brand-text);
}

.icr-checkLabel input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-navy);
  cursor: pointer;
}

.icr-selectedCount {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
}

.icr-itemList {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.icr-itemRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--brand-border);
  transition: background-color 0.15s ease;
}

.icr-itemRow:last-child {
  border-bottom: none;
}

.icr-itemRow--selected {
  background: rgba(30, 58, 95, 0.04);
}

.icr-itemName {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--brand-text);
}

.icr-itemQty {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

.icr-itemBadge {
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--brand-navy);
  background: var(--brand-gold-light, #F5EDD8);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

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

.icr-addItemBtns {
  display: flex;
  gap: var(--space-3);
}

.icr-addItemForm {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.icr-addInput {
  flex: 2;
  min-width: 140px;
}

.icr-addInputSm {
  flex: 1;
  min-width: 60px;
  max-width: 90px;
}

.icr-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--brand-border);
}

/* Instacart partner CTA button — official Kale/Cashew palette */
.icr-instacartCta {
  background-color: #003D29 !important;
  color: #FAF1E5 !important;
  border: none !important;
  border-radius: 23px;
  height: 46px;
  padding: 0 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.icr-instacartCta:hover {
  opacity: 0.9;
}

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

.icr-confirmDesc {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .icr-addItemForm {
    flex-direction: column;
  }
  .icr-addInput,
  .icr-addInputSm {
    max-width: 100%;
    min-width: 100%;
  }
  .icr-footer {
    flex-direction: column;
  }
  .icr-footer .btn {
    width: 100%;
  }
  .icr-addItemBtns {
    flex-direction: column;
  }
  .icr-addItemBtns .btn {
    width: 100%;
  }
}

/* ============================================================
   Recipe Cards / Recipe Book / Bulk Operations (rcl-*)
   MATCHES APPROVED PROTOTYPE: healist-recipe-cards-prototype.html
   ============================================================ */

/* --- Filter toggle row --- */
.rcl-filterRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--space-4, 16px) var(--space-2, 8px);
}
.rcl-filterToggle {
  display: inline-flex;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  border: 1px solid var(--brand-border, #E5E7EB);
  margin: 0 var(--space-4, 16px) var(--space-3, 12px);
}
.rcl-filterToggle button {
  padding: 8px 20px;
  border: none;
  background: var(--brand-surface, #fff);
  color: var(--brand-text-muted, #6B7280);
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: var(--text-base, 14px);
  font-weight: var(--font-medium, 500);
  cursor: pointer;
  transition: all 0.2s;
}
.rcl-filterToggle button.active {
  background: linear-gradient(135deg, var(--brand-primary, #1E3A5F), var(--brand-primary-light, #2D4F7A));
  color: white;
}
.rcl-filterToggle button:not(.active):hover {
  background: var(--brand-surface-elevated, #F8F9FC);
  color: var(--brand-primary, #1E3A5F);
}
.rcl-filterHint {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13.5px;
  font-style: italic;
  color: var(--brand-text-muted, #6B7280);
}
.rcl-filterHint .rcl-goldHeart {
  color: var(--brand-secondary, #C9A962);
  font-style: normal;
  font-size: 15px;
}
.rcl-bookCount {
  display: inline-block;
  background: var(--brand-secondary, #C9A962);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
}

/* --- Bulk action bar — navy gradient, ALWAYS visible --- */
.rcl-bulkBar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 16px 12px;
  background: linear-gradient(135deg, var(--brand-primary, #1E3A5F), var(--brand-primary-light, #2D4F7A));
  border-radius: 10px;
  color: white;
  flex-wrap: wrap;
}
.rcl-bulkCount {
  font-weight: 600;
  font-size: 14px;
  margin-right: auto;
}
.rcl-bulkBar .btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  min-height: auto;
  transition: all 0.2s;
}
.rcl-bulkBar .btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}
.rcl-bulkBar .btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rcl-bulkBar .btn-bulk-delete {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.15);
}
.rcl-bulkBar .btn-bulk-delete:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.3);
}
.rcl-bulkBar .btn-deselect {
  border: none;
  background: transparent;
  opacity: 0.7;
  text-decoration: underline;
}
.rcl-bulkBar .btn-deselect:disabled {
  opacity: 0.25;
  text-decoration: none;
}

/* --- Select All row — elevated bg, border --- */
.rcl-selectAllRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 0 16px 8px;
  background: var(--brand-surface-elevated, #F8F9FC);
  border: 1px solid var(--brand-border, #E5E7EB);
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
}
.rcl-selectAllRow input[type="checkbox"],
.rcl-selectCol input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary, #1E3A5F);
  cursor: pointer;
}
.rcl-selectAllRow label {
  cursor: pointer;
  user-select: none;
}

/* --- Recipe card — vertical layout, navy left border --- */
.rcl-card {
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, #E5E7EB);
  border-left: 4px solid var(--brand-primary, #1E3A5F);
  border-radius: 8px;
  margin: 0 16px 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
  transition: all 0.2s;
}
.rcl-card:hover {
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.10);
  border-left-color: var(--brand-primary-light, #2D4F7A);
}
.rcl-card.rcl-card--selected {
  border-color: var(--brand-primary, #1E3A5F);
  border-left-color: var(--brand-secondary, #C9A962);
  background: #F0F4FA;
}

/* Top row: checkbox + heart + title */
.rcl-titleRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.rcl-titleRow input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary, #1E3A5F);
  cursor: pointer;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Heart button — 50% darker colors */
.rcl-heartBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 2px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.rcl-heartBtn:hover {
  transform: scale(1.2);
}
.rcl-heartBtn--active {
  color: #8B7340;
}
.rcl-heartBtn--inactive {
  color: #8B8F96;
}

/* Title area */
.rcl-titleContent {
  flex: 1;
  min-width: 0;
}
.rcl-titleContent h4 {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-primary-dark, #0F1C2E);
  margin: 0;
  line-height: 1.3;
}
.rcl-titleContent p {
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* Meta row */
.rcl-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
  margin-top: 6px;
}
.rcl-sourceBadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--brand-surface-elevated, #F8F9FC);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  border: 1px solid var(--brand-border, #E5E7EB);
}
.rcl-mealPlanBadge {
  background: var(--color-success, #059669);
  color: white;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

/* Actions — at the BOTTOM of the card */
.rcl-primaryActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--brand-border, #E5E7EB);
  align-items: center;
}

/* "Other Actions..." button */
.rcl-overflowWrapper {
  position: relative;
  margin-left: auto;
}
.rcl-overflowBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--brand-border, #E5E7EB);
  background: var(--brand-surface, #fff);
  cursor: pointer;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13px;
  color: #555;
  transition: all 0.2s;
  min-height: 36px;
}
.rcl-overflowBtn:hover {
  background: var(--brand-surface-elevated, #F8F9FC);
  border-color: var(--brand-primary, #1E3A5F);
  color: var(--brand-primary, #1E3A5F);
}

/* Overflow dropdown */
.rcl-overflowMenu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, #E5E7EB);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 165px;
  z-index: 100;
  overflow: hidden;
  animation: rcl-fadeIn 0.15s ease;
}
@keyframes rcl-fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.rcl-overflowMenu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13px;
  color: var(--brand-text, #1A1A2E);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.rcl-overflowMenu button:hover {
  background: var(--brand-surface-elevated, #F8F9FC);
}
.rcl-overflowMenu button.rcl-overflowDanger {
  color: var(--color-error, #DC2626);
}
.rcl-overflowMenu button.rcl-overflowDanger:hover {
  background: var(--color-error-light, #FEE2E2);
}
.rcl-overflowDivider {
  height: 1px;
  background: var(--brand-border, #E5E7EB);
  margin: 2px 0;
}

/* --- My Recipe Book bar — white bg, black text, navy button --- */
.rcl-bookBar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 16px 12px;
  background: white;
  border: 1px solid var(--brand-border, #E5E7EB);
  border-radius: 10px;
}
.rcl-bookIcon {
  font-size: 28px;
  flex-shrink: 0;
}
.rcl-bookLabel {
  font-weight: 600;
  font-size: 16px;
  color: #1A1A2E;
  font-family: var(--font-body, 'Outfit', sans-serif);
}
.rcl-bookCountLabel {
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
}
.rcl-bookBar .btn {
  margin-left: auto;
}
/* Spinner for recipe book generation */
.rcl-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: rcl-spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes rcl-spin {
  to { transform: rotate(360deg); }
}

/* --- Post-fulfillment print prompt --- */
.rcl-fulfillPrompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.rcl-fulfillPromptCard {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.rcl-fulfillPromptCard h3 {
  color: var(--brand-primary, #1E3A5F);
  margin: 0 0 8px;
}
.rcl-fulfillPromptCard p {
  color: var(--brand-text-muted, #6B7280);
  margin: 0 0 20px;
  font-size: 14px;
}
.rcl-fulfillPromptActions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* --- Mobile responsive --- */
@media (max-width: 600px) {
  .rcl-primaryActions {
    flex-direction: column;
  }
  .rcl-primaryActions .btn {
    width: 100%;
  }
  .rcl-overflowWrapper {
    margin-left: 0;
    width: 100%;
  }
  .rcl-overflowBtn {
    width: 100%;
  }
  .rcl-bulkBar {
    flex-direction: column;
    align-items: stretch;
  }
  .rcl-bulkCount {
    margin-right: 0;
  }
  .rcl-filterRow {
    flex-direction: column;
    align-items: stretch;
  }
  .rcl-bookBar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .rcl-bookBar .btn {
    margin-left: 0;
  }
  .rcl-fulfillPromptActions {
    flex-direction: column;
  }
}


/* =============================================================================
 * DIGITAL TWIN — dt- prefix
 * Patent claims: P-011, P-012, P-013
 * ============================================================================= */

.dt-content {
  padding: 20px;
}

/* Loading & Empty States */
.dt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-secondary, #6b7280);
}

.dt-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-light, #e8e8e8);
  border-top-color: var(--brand-navy, #1E3A5F);
  border-radius: 50%;
  animation: dt-spin 0.8s linear infinite;
}

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

.dt-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #6b7280);
}

.dt-empty h3 {
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 8px;
}

.dt-empty-text {
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}

.dt-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dt-error p {
  flex: 1;
  color: #b91c1c;
  margin: 0;
}

/* Status Card */
.dt-statusCard {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 20px;
  margin-bottom: 20px;
}

.dt-statusCard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dt-statusCard-header h3 {
  color: var(--brand-navy, #1E3A5F);
  margin: 0;
}

.dt-syncBtn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--brand-navy, #1E3A5F);
  background: transparent;
  color: var(--brand-navy, #1E3A5F);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.dt-syncBtn:hover {
  background: var(--brand-navy, #1E3A5F);
  color: white;
}

.dt-syncBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sync Banner */
.dt-syncBanner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.dt-syncBanner-active {
  background: rgba(30, 58, 95, 0.08);
  color: var(--brand-navy, #1E3A5F);
  border: 1px solid rgba(30, 58, 95, 0.2);
}

.dt-syncBanner-success {
  background: rgba(30, 58, 95, 0.06);
  color: var(--brand-navy, #1E3A5F);
  border: 1px solid rgba(30, 58, 95, 0.15);
}

.dt-syncBanner-error {
  background: rgba(198, 40, 40, 0.06);
  color: #c62828;
  border: 1px solid rgba(198, 40, 40, 0.15);
}

.dt-syncBanner-warnings {
  opacity: 0.7;
  font-size: 0.85rem;
}

/* Small spinner for sync banner */
.dt-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(30, 58, 95, 0.2);
  border-top-color: var(--brand-navy, #1E3A5F);
  border-radius: 50%;
  animation: dt-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.dt-statusCard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.dt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dt-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-navy, #1E3A5F);
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
}

.dt-stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Data Freshness Badges */
.dt-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dt-freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.dt-freshness-fresh {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.dt-freshness-stale {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.dt-freshness-outdated {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.dt-freshness-age {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Alert Cards */
.dt-alertsSection {
  margin-bottom: 20px;
}

.dt-alertsSection h3 {
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 12px;
}

.dt-alertsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dt-alertCard {
  background: white;
  border-radius: 8px;
  border-left: 4px solid;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.dt-severity-critical { border-left-color: #dc2626; }
.dt-severity-significant { border-left-color: #ea580c; }
.dt-severity-moderate { border-left-color: var(--brand-gold, #C9A962); }
.dt-severity-minor { border-left-color: #2563eb; }

.dt-alertCard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dt-alertCard-metric {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  text-transform: capitalize;
}

.dt-alertCard-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--brand-navy, #1E3A5F);
  color: white;
}

.dt-alertCard-narrative {
  color: var(--text-primary, #374151);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.dt-alertCard-stats {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 8px;
}

.dt-alertCard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dt-dismissBtn {
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-light, #e8e8e8);
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 0.8rem;
  cursor: pointer;
}

.dt-dismissBtn:hover {
  background: #f3f4f6;
}

.dt-alertCard-time {
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
}

/* Baselines Grid */
.dt-baselinesSection {
  margin-bottom: 20px;
}

.dt-baselinesSection h3 {
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 12px;
}

.dt-baselinesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.dt-domainGroup {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 16px;
}

.dt-domainGroup-title {
  color: var(--brand-navy, #1E3A5F);
  font-size: 0.95rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
}

.dt-metricsTable-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.5fr;
  gap: 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #6b7280);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
  margin-bottom: 4px;
}

.dt-metricsTable-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.5fr;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid #f9fafb;
}

.dt-metricName {
  text-transform: capitalize;
  color: var(--text-primary, #374151);
}

.dt-metricValue {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
}

.dt-metricSamples {
  color: var(--text-secondary, #6b7280);
  text-align: right;
}

/* Simulations */
.dt-newSimCard {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 20px;
  margin-bottom: 20px;
}

.dt-newSimCard h3 {
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 16px;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.3rem;
}

.dt-categoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.dt-categoryBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.dt-categoryBtn:hover {
  border-color: var(--brand-navy, #1E3A5F);
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.dt-categoryBtn-icon {
  font-size: 1.8rem;
}

.dt-categoryBtn-label {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  font-size: 0.9rem;
}

.dt-categoryBtn-desc {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  text-align: center;
}

/* Simulation Result Card */
.dt-resultCard {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 20px;
  margin-bottom: 20px;
}

.dt-resultCard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dt-resultCard-header h3 {
  color: var(--brand-navy, #1E3A5F);
  margin: 0;
}

.dt-closeBtn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-light, #e8e8e8);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-secondary, #6b7280);
}

.dt-closeBtn:hover {
  background: #f3f4f6;
}

/* Domain Impacts */
.dt-impactGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dt-impactCard {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
}

.dt-impact-high { border-left: 3px solid #dc2626; }
.dt-impact-medium { border-left: 3px solid var(--brand-gold, #C9A962); }
.dt-impact-low { border-left: 3px solid #2563eb; }

.dt-impactCard-domain {
  display: block;
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  text-transform: capitalize;
  margin-bottom: 4px;
}

.dt-impactCard-impact {
  display: block;
  font-size: 0.85rem;
  color: var(--text-primary, #374151);
}

.dt-impactCard-magnitude {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
  margin-top: 4px;
}

/* Trajectory Cards */
.dt-trajGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dt-trajCard {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  background: #f9fafb;
}

.dt-trajCard-metric {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  text-transform: capitalize;
  margin-bottom: 4px;
}

.dt-trajCard-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-navy, #1E3A5F);
}

.dt-trajCard-trend {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}

.dt-trend-up { background: #ecfdf5; color: #065f46; }
.dt-trend-down { background: #fef2f2; color: #991b1b; }
.dt-trend-stable { background: #f3f4f6; color: #6b7280; }

.dt-trajCard-confidence {
  display: block;
  font-size: 0.7rem;
  color: var(--text-tertiary, #9ca3af);
  margin-top: 4px;
}

/* Score Impact */
.dt-scoreImpact {
  background: linear-gradient(135deg, var(--brand-navy, #1E3A5F), #2d5a8e);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  color: white;
}

.dt-scoreImpact h4,
.dt-scoreImpact h5 {
  color: white;
  margin-bottom: 8px;
  font-size: 1.15rem;
  font-family: var(--ff-heading, 'Cormorant Garamond', serif);
}

.dt-scoreImpact-values {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.15rem;
  color: white;
}

.dt-scoreImpact-arrow {
  font-size: 1.4rem;
}

.dt-scoreImpact-change {
  font-weight: 700;
}

.dt-scoreImpact-change.positive { color: #a7f3d0; }
.dt-scoreImpact-change.negative { color: #fca5a5; }

/* AI Explanation */
.dt-aiExplanation {
  background: #f0f4ff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  border-left: 3px solid var(--brand-navy, #1E3A5F);
}

.dt-aiExplanation h4,
.dt-aiExplanation h5 {
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 8px;
  font-size: 1.15rem;
  font-family: var(--ff-heading, 'Cormorant Garamond', serif);
}

.dt-aiExplanation p {
  color: var(--text-primary, #374151);
  line-height: 1.6;
  margin: 0;
}

/* Risks */
.dt-risks {
  margin-bottom: 16px;
}

.dt-risks h4,
.dt-risks h5 {
  color: #b91c1c;
  margin-bottom: 8px;
  font-size: 1.15rem;
  font-family: var(--ff-heading, 'Cormorant Garamond', serif);
}

.dt-risks ul {
  list-style: disc;
  padding-left: 20px;
}

.dt-risks li {
  color: var(--text-primary, #374151);
  margin-bottom: 4px;
}

/* XAI Panel */
.dt-xaiPanel {
  margin-top: 12px;
  border: 1px solid var(--border-light, #e8e8e8);
  border-radius: 8px;
}

.dt-xaiPanel summary {
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  font-size: 0.85rem;
}

.dt-xaiPanel pre {
  padding: 16px;
  background: #f9fafb;
  font-size: 0.75rem;
  overflow-x: auto;
  margin: 0;
  border-radius: 0 0 8px 8px;
}

/* Simulation List */
.dt-simsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-simItem {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 12px 16px;
}

.dt-simItem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.dt-simItem-type {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  text-transform: capitalize;
}

.dt-simItem-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

.dt-simItem-accuracy {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
}

/* Track This button (D4S outline — navy, matches Delete btn pattern) */
.dt-trackBtn {
  background: transparent;
  border: 1px solid var(--brand-navy, #1E3A5F);
  color: var(--brand-navy, #1E3A5F);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dt-trackBtn:hover {
  background: var(--brand-navy, #1E3A5F);
  color: white;
}

/* Simulation Modal */
.dt-simModal {
  max-width: 500px;
}

/* Spinner inside SimulationModal while AI runs */
.dt-simModal-running {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: rgba(30, 58, 95, 0.04);
  border-radius: 8px;
  text-align: center;
}

.dt-simModal-running p {
  margin: 0;
  color: var(--brand-navy, #1E3A5F);
  font-weight: 500;
}

.dt-simForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.dt-simForm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-simForm-field label {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  font-size: 0.85rem;
}

.dt-simForm-field input,
.dt-simForm-field select,
.dt-simForm-field textarea {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-light, #e8e8e8);
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.9rem;
}

.dt-simForm-field input:focus,
.dt-simForm-field select:focus,
.dt-simForm-field textarea:focus {
  outline: none;
  border-color: var(--brand-navy, #1E3A5F);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.dt-horizonBtns {
  display: flex;
  gap: 8px;
}

.dt-horizonBtn {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-light, #e8e8e8);
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.dt-horizonBtn.active {
  background: var(--brand-navy, #1E3A5F);
  color: white;
  border-color: var(--brand-navy, #1E3A5F);
}

.dt-simForm-disclaimer {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  background: #fffbeb;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #fde68a;
}

/* Patterns */
.dt-patternsHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dt-patternsHeader-left h3 {
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 8px;
}

.dt-domainFilter {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dt-filterBtn {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-light, #e8e8e8);
  background: white;
  color: var(--text-secondary, #6b7280);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.dt-filterBtn.active {
  background: var(--brand-navy, #1E3A5F);
  color: white;
  border-color: var(--brand-navy, #1E3A5F);
}

.dt-patternsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.dt-patternCard {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.dt-patternCard:hover {
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.dt-patternCard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dt-lifecycleBadge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.dt-lifecycle-discovery { background: #dbeafe; color: #1e40af; }
.dt-lifecycle-active { background: #dcfce7; color: #166534; }
.dt-lifecycle-strengthening { background: linear-gradient(135deg, #fef9c3, #fde68a); color: #92400e; }
.dt-lifecycle-weakening { background: #fed7aa; color: #9a3412; }
.dt-lifecycle-archived { background: #f3f4f6; color: #6b7280; }

.dt-patternCard-lag {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

.dt-patternCard-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dt-patternCard-metricA,
.dt-patternCard-metricB {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  text-transform: capitalize;
  font-size: 0.9rem;
}

.dt-patternCard-arrow {
  color: var(--brand-gold, #C9A962);
  font-size: 1.2rem;
  font-weight: 700;
}

.dt-patternCard-domains {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.dt-domainTag {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: var(--text-secondary, #6b7280);
  text-transform: capitalize;
}

/* Correlation Bar */
.dt-correlationBar {
  position: relative;
  height: 24px;
  background: #f3f4f6;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

.dt-correlationBar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.3s ease;
}

.dt-corr-strong {
  background: linear-gradient(90deg, var(--brand-navy, #1E3A5F), var(--brand-gold, #C9A962));
}

.dt-corr-moderate {
  background: linear-gradient(90deg, var(--brand-navy, #1E3A5F), #5b8cb8);
}

.dt-corr-mild {
  background: var(--brand-navy, #1E3A5F);
  opacity: 0.6;
}

.dt-correlationBar-label {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
}

.dt-patternCard-narrative {
  font-size: 0.85rem;
  color: var(--text-primary, #374151);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pattern Detail Modal */
.dt-patternModal {
  max-width: 600px;
}

.dt-patternDetail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dt-pharmaContext {
  margin-bottom: 16px;
}

.dt-pharmaContext pre {
  background: #f9fafb;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  overflow-x: auto;
}

/* Validation History */
.dt-validationList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-validationItem {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  background: #f9fafb;
}

.dt-validationItem.passed { border-left: 3px solid #22c55e; }
.dt-validationItem.failed { border-left: 3px solid #ef4444; }

.dt-pass { color: #16a34a; font-weight: 600; }
.dt-fail { color: #dc2626; font-weight: 600; }

/* Lifecycle Timeline */
.dt-lifecycleSteps {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.dt-lifecycleStep {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  font-size: 0.7rem;
  border-radius: 4px;
  background: #f3f4f6;
  color: var(--text-secondary, #6b7280);
  text-transform: capitalize;
}

.dt-lifecycleStep.current {
  background: var(--brand-navy, #1E3A5F);
  color: white;
  font-weight: 700;
}

.dt-lifecycleStep.past {
  background: #dbeafe;
  color: #1e40af;
}

/* Schedule */
.dt-scheduleHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dt-scheduleHeader h3 {
  color: var(--brand-navy, #1E3A5F);
}

.dt-scheduleActions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.dt-toggleGroup {
  display: flex;
  border: 1px solid var(--border-light, #e8e8e8);
  border-radius: 6px;
  overflow: hidden;
}

.dt-toggleBtn {
  padding: 6px 14px;
  border: none;
  background: white;
  color: var(--text-secondary, #6b7280);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.dt-toggleBtn.active {
  background: var(--brand-navy, #1E3A5F);
  color: white;
}

/* 24-Hour Timeline */
.dt-timeline {
  position: relative;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 40px 16px 60px;
  margin-bottom: 16px;
  overflow-x: auto;
  min-width: 0;
}

.dt-timeline-hours {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 30px;
  display: flex;
}

.dt-timeline-hour {
  position: absolute;
  font-size: 0.65rem;
  color: var(--text-tertiary, #9ca3af);
  transform: translateX(-50%);
  top: 10px;
}

.dt-timeline-sleep {
  position: absolute;
  top: 30px;
  bottom: 50px;
  background: rgba(156, 163, 175, 0.1);
  border-radius: 4px;
}

.dt-timeline-track {
  position: relative;
  min-height: 80px;
}

.dt-timeline-block {
  position: absolute;
  top: 0;
  width: 120px;
  padding: 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  z-index: 1;
}

.dt-slot-meal {
  background: linear-gradient(135deg, rgba(201, 169, 98, 0.15), rgba(232, 213, 163, 0.2));
  border: 1px solid var(--brand-gold, #C9A962);
}

.dt-slot-medication {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.1), rgba(30, 58, 95, 0.15));
  border: 1px solid var(--brand-navy, #1E3A5F);
}

.dt-slot-supplement {
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid #14b8a6;
}

.dt-timeline-block-time {
  display: block;
  font-weight: 700;
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 4px;
}

.dt-timeline-block-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dt-timeline-block-item {
  color: var(--text-primary, #374151);
}

.dt-timeline-block-item em {
  color: var(--text-secondary, #6b7280);
  font-size: 0.7rem;
}

.dt-timeline-block-notes {
  display: block;
  font-size: 0.65rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
  margin-top: 4px;
}

.dt-timeline-legend {
  position: absolute;
  bottom: 8px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 16px;
  font-size: 0.7rem;
  color: var(--text-secondary, #6b7280);
}

.dt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dt-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* Schedule Cards */
.dt-scheduleCard {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 16px;
  margin-bottom: 16px;
}

.dt-scheduleCard-meta {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin-top: 12px;
}

/* Proposals */
.dt-proposals-current {
  color: var(--text-secondary, #6b7280);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.dt-proposalGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: 16px;
}

.dt-proposalCard {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 16px;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.dt-proposalCard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dt-proposalCard-rank {
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
}

.dt-proposalCard-score {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}

.dt-aiExplanation {
  font-family: var(--font-body);
  font-size: var(--text-base, 14px);
  line-height: 1.7;
  color: var(--brand-text, #1E293B);
}
.dt-aiExplanation p { margin-bottom: 12px; }
.dt-aiExplanation strong { color: var(--brand-primary, #1E3A5F); }
.dt-aiExplanation ul { padding-left: 20px; margin: 8px 0; }
.dt-aiExplanation li { margin-bottom: 4px; }

.dt-proposalCard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 12px;
}

.dt-resolved {
  color: #16a34a;
  font-weight: 600;
}

.dt-residual {
  color: #ea580c;
}

.dt-activateBtn {
  width: 100%;
  margin-top: 12px;
}

/* PK Profiles */
.dt-pkGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.dt-pkCard {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8e8e8);
  padding: 16px;
}

.dt-pkCard h5 {
  color: var(--brand-navy, #1E3A5F);
  margin-bottom: 8px;
}

.dt-pkCard-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-primary, #374151);
}

.dt-pkCard-personalized {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light, #e8e8e8);
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
}

.dt-personalized-badge {
  background: linear-gradient(135deg, var(--brand-gold, #C9A962), #E8D5A3);
  color: #1E3A5F;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .dt-content {
    padding: 12px;
  }

  .dt-statusCard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dt-categoryGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dt-baselinesGrid {
    grid-template-columns: 1fr;
  }

  .dt-patternsGrid {
    grid-template-columns: 1fr;
  }

  .dt-proposalGrid {
    grid-template-columns: 1fr;
  }

  .dt-patternsHeader {
    flex-direction: column;
  }

  .dt-scheduleHeader {
    flex-direction: column;
    align-items: stretch;
  }

  .dt-scheduleActions {
    flex-wrap: wrap;
  }

  .dt-timeline-block {
    width: 100px;
    font-size: 0.65rem;
  }

  .dt-impactGrid {
    grid-template-columns: 1fr;
  }

  .dt-trajGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dt-patternDetail-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dt-pkGrid {
    grid-template-columns: 1fr;
  }

  .dt-simModal {
    margin: 12px;
    max-width: none;
  }

  .dt-scoreImpact-values {
    flex-wrap: wrap;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .dt-statusCard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .dt-categoryGrid {
    grid-template-columns: 1fr 1fr;
  }

  .dt-trajGrid {
    grid-template-columns: 1fr;
  }

  .dt-freshness {
    flex-direction: column;
  }

  .dt-domainFilter {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .dt-lifecycleSteps {
    flex-wrap: wrap;
  }
}

/* ── AI Operation Spinner Overlay ── */
.dt-aiOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.dt-aiOverlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 40px 20px;
}

.dt-aiOverlay-content p {
  color: var(--brand-navy, #1E3A5F);
  font-family: var(--ff-body, 'Outfit', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.dt-aiOverlay-sub {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--text-secondary, #6b7280) !important;
}

/* Ensure parent containers are positioned for overlay */
.dt-simulations,
.dt-patterns,
.dt-schedule {
  position: relative;
  min-height: 200px;
}

/* Simulation item actions row */
.dt-simItem-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Delete button (D4S outline) */
.dt-deleteBtn {
  background: transparent;
  border: 1px solid #c62828;
  color: #c62828;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dt-deleteBtn:hover {
  background: #c62828;
  color: white;
}

/* ── Status Badge Buttons (COMPLETED / TRACKING / EVALUATED) ── */
.dt-simItem-badgeGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.dt-simItem-statusBtn {
  border: none;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dt-simItem-statusBtn.dt-status-completed {
  background: rgba(30, 58, 95, 0.1);
  color: var(--brand-navy, #1E3A5F);
}
.dt-simItem-statusBtn.dt-status-completed:hover {
  background: rgba(30, 58, 95, 0.2);
}

.dt-simItem-statusBtn.dt-status-tracking {
  background: rgba(201, 169, 98, 0.15);
  color: #8B7340;
}
.dt-simItem-statusBtn.dt-status-tracking:hover {
  background: rgba(201, 169, 98, 0.3);
}

.dt-simItem-statusBtn.dt-status-evaluated {
  background: rgba(46, 125, 50, 0.1);
  color: #2E7D32;
}
.dt-simItem-statusBtn.dt-status-evaluated:hover {
  background: rgba(46, 125, 50, 0.2);
}

.dt-simItem-hint {
  font-size: 0.65rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}

/* ── Simulation Detail Modal ── */
.dt-simDetailModal {
  max-width: 680px;
  max-height: 85vh;
  overflow-y: auto;
}

.dt-simDetailModal .modal-body {
  padding: 20px 24px 24px;
}

/* Input Parameters */
.dt-inputParams {
  margin-bottom: 16px;
}

.dt-inputParams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.dt-inputParam {
  display: flex;
  flex-direction: column;
  background: rgba(30, 58, 95, 0.04);
  padding: 8px 12px;
  border-radius: 8px;
}

.dt-inputParam-key {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  text-transform: capitalize;
}

.dt-inputParam-val {
  font-weight: 500;
  color: var(--brand-navy, #1E3A5F);
  text-transform: capitalize;
}

/* ── Tracking Progress Bar ── */
.dt-trackingStatus {
  margin-bottom: 20px;
}

.dt-trackingProgress {
  margin: 16px 0;
}

.dt-trackingProgress-bar {
  height: 8px;
  background: rgba(30, 58, 95, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.dt-trackingProgress-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--brand-navy, #1E3A5F), var(--brand-gold, #C9A962));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.dt-trackingProgress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}

.dt-trackingExplainer {
  background: rgba(201, 169, 98, 0.08);
  border: 1px solid rgba(201, 169, 98, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.dt-trackingExplainer h4 {
  color: var(--brand-navy, #1E3A5F);
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.dt-trackingExplainer p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
}

/* ── Evaluated / Accuracy Display ── */
.dt-evaluatedResult {
  margin-bottom: 20px;
}

.dt-accuracyDisplay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px;
  background: rgba(30, 58, 95, 0.04);
  border-radius: 12px;
  margin: 12px 0;
}

.dt-accuracyDisplay-score {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand-navy, #1E3A5F);
  font-family: var(--ff-heading, 'Cormorant Garamond', serif);
}

.dt-accuracyDisplay-label {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}

/* ── Modal Predictions Section ── */
.dt-modalPredictions {
  margin-top: 16px;
}

.dt-modalPredictions h4 {
  color: var(--brand-navy, #1E3A5F);
  margin: 0 0 12px;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
  padding-bottom: 8px;
}

.dt-modalPredictions h5 {
  color: var(--brand-navy, #1E3A5F);
  margin: 20px 0 10px;
  font-size: 1.15rem;
  font-family: var(--ff-heading, 'Cormorant Garamond', serif);
}

/* ===== AI Limit Modal (unified 429 / 403 UX) ===== */
.ailm-overlay {
  z-index: 10000;
}
.ailm-modal {
  max-width: 560px;
  width: 92%;
}
.ailm-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.ailm-body {
  padding: 20px 24px;
}
.ailm-message {
  font-size: 1rem;
  color: var(--brand-text, #1E3A5F);
  margin: 0 0 16px;
  line-height: 1.5;
}
.ailm-usage {
  background: var(--bg-subtle, #F5F2EC);
  border: 1px solid var(--border-light, #E8D5A3);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px;
}
.ailm-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(200, 180, 140, 0.25);
}
.ailm-usage-row:last-child {
  border-bottom: none;
}
.ailm-usage-label {
  color: var(--brand-text-muted, #5A6B7F);
  font-size: 0.9rem;
}
.ailm-usage-value {
  color: var(--brand-navy, #1E3A5F);
  font-weight: 600;
  font-size: 0.95rem;
}
.ailm-tiers {
  margin: 0 0 12px;
}
.ailm-tiers-title {
  font-size: 0.95rem;
  color: var(--brand-navy, #1E3A5F);
  margin: 0 0 8px;
  font-family: var(--ff-heading, 'Cormorant Garamond', serif);
}
.ailm-tiers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.ailm-tiers-table th,
.ailm-tiers-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light, #E8D5A3);
}
.ailm-tiers-table th {
  background: var(--brand-navy, #1E3A5F);
  color: white;
  font-weight: 600;
}
.ailm-tiers-table tr.ailm-tier-current {
  background: rgba(201, 169, 98, 0.15);
  font-weight: 600;
}
.ailm-reset-note {
  font-size: 0.85rem;
  color: var(--brand-text-muted, #5A6B7F);
  font-style: italic;
  margin: 8px 0 0;
  text-align: center;
}
.ailm-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .ailm-footer {
    flex-direction: column-reverse;
  }
  .ailm-footer .btn {
    width: 100%;
  }
}

/* ============================================
   PASSWORD FIELD WITH EYE TOGGLE
   ============================================ */
.pw-field-wrap {
  position: relative;
  width: 100%;
}
.pw-field-wrap input {
  width: 100%;
  padding-right: 44px;
}
.pw-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--brand-text-muted);
  padding: 4px;
  line-height: 1;
}
.pw-eye-btn:hover {
  color: var(--brand-text);
}

/* ============================================
   FORGOT PASSWORD MODAL (D4S)
   ============================================ */
.forgot-pw-modal .modal-content {
  max-width: 420px;
  padding: var(--space-8);
}
.forgot-pw-modal .modal-title {
  text-align: center;
  margin-bottom: var(--space-2);
}
.forgot-pw-modal .modal-subtitle {
  text-align: center;
  margin-bottom: var(--space-6);
}
.forgot-pw-modal .form-group {
  margin-bottom: var(--space-5);
}
.forgot-pw-modal .modal-footer {
  gap: var(--space-3);
}

/* ============================================
   PRE-LAUNCH MODAL (D4S)
   ============================================ */
.pre-launch-modal .modal-content {
  padding: var(--space-8);
  max-width: 460px;
}
.pre-launch-header {
  text-align: center;
  margin-bottom: var(--space-4);
}
.pre-launch-logo {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: var(--space-2);
}
.pre-launch-logo span {
  color: var(--brand-secondary, #C9A962);
}
.pre-launch-waitlist {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--brand-surface-elevated, #f8f9fc);
  border-radius: var(--radius-lg, 12px);
}
.pre-launch-waitlist-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text, #1A1A2E);
  margin-bottom: var(--space-3);
}
.pre-launch-waitlist .form-group {
  margin-bottom: var(--space-3);
}
.pre-launch-waitlist .btn {
  width: 100%;
}
.pre-launch-footer {
  text-align: center;
  margin-top: var(--space-4);
}
.pre-launch-footer .btn {
  min-width: 120px;
}
.pre-launch-admin-link {
  text-align: center;
  margin-top: var(--space-4);
}
.pre-launch-admin-link a {
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
  text-decoration: none;
}
.pre-launch-admin-link a:hover {
  color: var(--brand-text, #1A1A2E);
  text-decoration: underline;
}

/* ============================================
   ADMIN STAT CARDS (Audit Dashboard)
   ============================================ */
.wla-stat-card {
  background: var(--brand-surface-elevated, #f8f9fc);
  border: 1px solid var(--brand-border, #E5E7EB);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 20px;
  min-width: 140px;
  text-align: center;
  flex: 1;
}
.wla-stat-value {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-primary, #1E3A5F);
  line-height: 1.2;
}
.wla-stat-label {
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* =============================================================================
   HRH — Health Records Hub
   ============================================================================= */
.hrh-card {
  background: var(--card-bg, #FFFFFF);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15,28,46,0.06);
  border: 1px solid var(--border-color, #E5E7EB);
  overflow: hidden;
}
.hrh-header {
  background: linear-gradient(135deg, #0F1C2E, var(--brand-primary, #1E3A5F));
  color: white;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hrh-headerTitle {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  color: white;
}
.hrh-headerStatus {
  font-size: 12px;
  background: rgba(255,255,255,0.15);
  padding: 4px 12px;
  border-radius: 20px;
  color: white;
}
.hrh-body {
  padding: 24px 28px;
}
.hrh-paths {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hrh-pathCard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.hrh-pathCard:hover {
  border-color: var(--brand-accent, #C9A962);
  background: #FEFCF7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201,169,98,0.12);
}
.hrh-pathIcon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-accent, #C9A962), #E8D5A3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hrh-pathText {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hrh-pathTitle {
  font-weight: 600;
  font-size: 15px;
  color: #0F1C2E;
}
.hrh-pathSubtitle {
  font-weight: 400;
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
  margin-left: 6px;
}
.hrh-pathDesc {
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
  line-height: 1.4;
}
.hrh-pathArrow {
  color: var(--brand-text-muted, #6B7280);
  font-size: 22px;
  font-weight: 300;
}
.hrh-pathBadge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.hrh-pathBadge--new {
  background: #EBF0F7;
  color: var(--brand-primary, #1E3A5F);
}
.hrh-pathBadge--soon {
  background: #F3F4F6;
  color: #9CA3AF;
}

/* Connected Sources */
.hrh-sources {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color, #E5E7EB);
}
.hrh-sourcesTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.hrh-sourcesNote {
  font-size: 0.8rem;
  color: var(--text-secondary, #6B7280);
  font-style: italic;
  margin-bottom: 12px;
}
.hrh-sourceRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color, #E5E7EB);
}
.hrh-sourceRow:last-of-type {
  border-bottom: none;
}
.hrh-sourceInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.hrh-sourceName {
  font-weight: 500;
}
.hrh-sourceCount {
  color: var(--brand-text-muted, #6B7280);
  font-size: 13px;
}
.hrh-sourceSyncDate {
  color: var(--brand-text-muted, #6B7280);
  font-size: 12px;
}
.hrh-sourceActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hrh-sourceBadge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.hrh-sourceBadge--active,
.hrh-sourceBadge--connected {
  background: #dcfce7;
  color: #166534;
}
.hrh-sourceBadge--disconnected,
.hrh-sourceBadge--error {
  background: #FEE2E2;
  color: #991B1B;
}
.hrh-total {
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--border-color, #E5E7EB);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-primary, #1E3A5F);
}

/* Detail Views */
.hrh-back {
  background: none;
  border: none;
  color: var(--brand-accent, #C9A962);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 20px 28px 0;
  font-family: inherit;
  display: block;
}
.hrh-back:hover {
  text-decoration: underline;
}
.hrh-info {
  padding: 24px 28px;
}
.hrh-infoIcon {
  font-size: 28px;
  display: block;
  margin-bottom: 12px;
}
.hrh-detailTitle {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 18px;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: 12px;
}
.hrh-detailDesc {
  font-size: 14px;
  color: var(--brand-text-muted, #6B7280);
  line-height: 1.6;
  margin-bottom: 12px;
}
.hrh-detailNote {
  font-size: 13px;
  font-style: italic;
  color: var(--brand-text-muted, #6B7280);
  margin-bottom: 12px;
}
.hrh-detailActions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.hrh-howTo {
  background: var(--surface-alt, #F8F9FA);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
}
.hrh-howToTitle {
  font-family: var(--font-body);
  font-size: var(--text-lg, 16px);
  font-weight: 600;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: 10px;
}
.hrh-howToSteps {
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: var(--text-base, 14px);
  line-height: 1.8;
  color: var(--brand-text, #1E293B);
}
.hrh-howToSteps li {
  margin-bottom: 4px;
}

/* Portal Search */
.hrh-portalSearch { padding: 0 28px 24px; }
.hrh-searchRow { display: flex; gap: 10px; margin-bottom: 16px; }
.hrh-searchInput {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.hrh-searchInput:focus {
  outline: none;
  border-color: var(--brand-accent, #C9A962);
  box-shadow: 0 0 0 3px rgba(201,169,98,0.15);
}
.hrh-filterRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.hrh-resultCount {
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
}
.hrh-stateFilter {
  padding: 6px 10px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
}
.hrh-portalResults {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
}
.hrh-loadingMore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
}
.hrh-spinnerSmall {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.hrh-providerCard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.hrh-providerCard:hover { border-color: var(--brand-primary, #1E3A5F); background: #F0F4F8; }
.hrh-providerLogo { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.hrh-providerInfo { flex: 1; display: flex; flex-direction: column; }
.hrh-providerName { font-weight: 600; font-size: 14px; color: var(--brand-primary, #1E3A5F); }
.hrh-providerSystem { font-size: 11px; color: var(--brand-text-muted, #6B7280); }
.hrh-portalConnecting { text-align: center; padding: 32px 0; }
.hrh-noResults { color: var(--brand-text-muted, #6B7280); font-size: 14px; text-align: center; padding: 16px 0; }

/* PH Demographics Form */
.hrh-phForm { padding: 0 28px 24px; }
.hrh-formRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.hrh-formRow--3 { grid-template-columns: 1fr 1fr 1fr; }
.hrh-formGroup { display: flex; flex-direction: column; }
.hrh-formLabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hrh-formInput {
  padding: 10px 14px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.hrh-formInput:focus {
  outline: none;
  border-color: var(--brand-accent, #C9A962);
  box-shadow: 0 0 0 3px rgba(201,169,98,0.15);
}
.hrh-formHint { font-size: 11px; color: var(--brand-text-muted, #6B7280); margin-top: 3px; }
.hrh-hintsToggle {
  background: none;
  border: none;
  color: var(--brand-accent, #C9A962);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  font-family: inherit;
}
.hrh-hintsToggle:hover { text-decoration: underline; }
.hrh-hintsRow { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.hrh-hintInput { padding: 8px 10px; font-size: 13px; }

/* Consent */
.hrh-consent {
  background: #F0F4F8;
  border-left: 4px solid var(--brand-accent, #C9A962);
  border-radius: 8px;
  padding: 20px;
  margin: 16px 0;
}
.hrh-consentTitle {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px;
  color: var(--brand-primary, #1E3A5F);
  margin-bottom: 8px;
}
.hrh-consentText {
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
  line-height: 1.6;
  margin-bottom: 12px;
}
.hrh-consentLabel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.hrh-consentLabel input[type="checkbox"] { margin-top: 2px; }
.hrh-searchBtn { width: 100%; }
.hrh-testPatientBtn { margin-bottom: 16px; }
.hrh-sourceNote { font-size: 0.8rem; color: var(--brand-gold, #C9A962); font-style: italic; }
.hrh-sandboxHint {
  background: rgba(201, 169, 98, 0.08);
  border: 1px solid var(--brand-gold, #C9A962);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.hrh-sandboxHint code {
  background: #EBF0F7;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
}
.hrh-sandboxCredsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.85rem;
}
.hrh-sandboxCredsTable th {
  text-align: left;
  padding: 4px 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--brand-gold, #C9A962);
}
.hrh-sandboxCredsTable td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Disconnect Options */
.hrh-disconnectOptions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.hrh-radioOption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.hrh-radioOption:hover { border-color: var(--brand-accent, #C9A962); }
.hrh-radioOption input[type="radio"] { margin-top: 3px; }
.hrh-radioOption strong { display: block; font-size: 14px; color: var(--brand-primary, #1E3A5F); margin-bottom: 2px; }
.hrh-radioOption p { font-size: 13px; color: var(--brand-text-muted, #6B7280); margin: 0; }

/* View Records Modal */
.hrh-expandAllRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #E5E7EB);
}
.hrh-recordsModal { max-height: 70vh; overflow-y: auto; }
.hrh-recordsList { display: flex; flex-direction: column; gap: 8px; }
.hrh-recordItem {
  padding: 10px 14px;
  border: 1px solid var(--border-color, #E5E7EB);
  border-radius: 8px;
}
.hrh-recordHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.hrh-recordType {
  font-weight: 600;
  font-size: 13px;
  color: var(--brand-primary, #1E3A5F);
  text-transform: capitalize;
}
.hrh-recordDate {
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
}
.hrh-recordDetail {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--brand-text-muted, #6B7280);
}
.hrh-recordTable {
  text-transform: capitalize;
}
.hrh-recordItem { cursor: pointer; transition: background 0.15s; }
.hrh-recordItem:hover { background: #F8F9FA; }
.hrh-recordItem--expanded { background: #F0F4F8; border-color: var(--brand-accent, #C9A962); }
.hrh-recordSummary { display: flex; align-items: center; gap: 8px; }
.hrh-recordTitle {
  font-weight: 500;
  color: var(--brand-text, #1A1A2E);
}
.hrh-recordInactive {
  color: #991B1B;
  font-size: 11px;
  font-style: italic;
}
.hrh-recordExpanded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #E5E7EB);
}
.hrh-recordField {
  font-size: 13px;
  color: var(--brand-text-muted, #6B7280);
  margin-bottom: 4px;
}
.hrh-recordField strong {
  color: var(--brand-primary, #1E3A5F);
}
.hrh-clinicalContent {
  margin-top: 6px;
  padding: 10px 14px;
  background: #F8F9FA;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--brand-text, #1A1A2E);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}
.hrh-labValues { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hrh-labValue {
  background: #EBF0F7;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--brand-primary, #1E3A5F);
}
.hrh-error {
  background: #FEE2E2;
  color: #991B1B;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Searching Animation */
.hrh-searchingAnim { text-align: center; padding: 48px 28px; }
.hrh-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-color, #E5E7EB);
  border-top: 4px solid var(--brand-accent, #C9A962);
  border-radius: 50%;
  animation: hrh-spin 1s linear infinite;
  margin: 0 auto 20px;
}
@keyframes hrh-spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 600px) {
  .hrh-header { padding: 16px 20px; }
  .hrh-body { padding: 16px 20px; }
  .hrh-pathCard { padding: 12px 14px; gap: 12px; }
  .hrh-pathIcon { width: 36px; height: 36px; font-size: 18px; }
  .hrh-back { padding: 16px 20px 0; }
  .hrh-info { padding: 16px 20px; }
  .hrh-portalSearch { padding: 0 20px 20px; }
  .hrh-phForm { padding: 0 20px 20px; }
  .hrh-formRow, .hrh-formRow--3 { grid-template-columns: 1fr; }
  .hrh-hintsRow { grid-template-columns: 1fr 1fr; }
  .hrh-searchRow { flex-direction: column; }
}

/* =============================================
   UHC EXCLUSIONS (uhce-)
   ============================================= */

.uhce-container { padding: 0; }
.uhce-explainer { padding: 16px 24px; font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); }
.uhce-explainer p { margin-bottom: 8px; }
.uhce-list { padding: 0 24px 24px; }
.uhce-listHeader { margin-bottom: 12px; }
.uhce-countBadge { font-size: 0.8rem; background: #EBF0F7; padding: 3px 10px; border-radius: 12px; color: var(--text-secondary); }
.uhce-emptyState { padding: 24px; color: var(--text-secondary); text-align: center; }
.uhce-typeGroup { margin-bottom: 16px; padding: 0 24px; }
.uhce-typeHeader {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-navy);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light, #eee);
}
.uhce-recordList { display: flex; flex-direction: column; gap: 6px; }
.uhce-recordItem {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface-elevated, #fafafa);
  border: 1px solid var(--border-light, #eee);
  gap: 12px;
}
.uhce-recordItem--excluded {
  opacity: 0.6;
  background: var(--surface-muted, #f5f5f5);
  border-left: 3px solid var(--brand-gold, #C9A962);
}
.uhce-recordInfo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.uhce-recordTitle { font-weight: 500; color: var(--brand-navy); }
.uhce-recordDate { font-size: 0.8rem; color: var(--text-secondary); }
.uhce-recordDesc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uhce-excludeReason { font-size: 0.75rem; color: var(--brand-gold); font-style: italic; }
.uhce-recordSource { font-size: 0.7rem; color: var(--text-tertiary, #aaa); text-transform: uppercase; }
.uhce-recordActions { flex-shrink: 0; display: flex; align-items: center; }
.uhce-excludeForm { display: flex; gap: 6px; align-items: center; }
.uhce-reasonInput {
  padding: 4px 8px;
  border: 1px solid var(--border-light, #ddd);
  border-radius: 4px;
  font-size: 0.8rem;
  width: 160px;
}

/* =============================================
   UHC AUDIT REPORTS (uhca-)
   ============================================= */

.uhca-container { display: flex; flex-direction: column; gap: 16px; }
.uhca-emptyState { padding: 24px; color: var(--text-secondary); text-align: center; }
.uhca-scoreCard {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px;
}
.uhca-scoreCircle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uhca-scoreValue { font-size: 2rem; font-weight: 700; font-family: var(--font-heading); }
.uhca-scoreLabel { font-size: 0.75rem; color: var(--text-secondary); }
.uhca-scoreDetails {
  flex: 1;
}
.uhca-metricsGroup { margin-bottom: 16px; }
.uhca-groupTitle { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--brand-navy, #1E3A5F); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light, #E5E7EB); }
.uhca-metricsGroup--excluded .uhca-groupTitle { color: var(--brand-gold, #C9A962); border-bottom-color: var(--brand-gold, #C9A962); }
.uhca-metricsRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
.uhca-metric { display: flex; flex-direction: column; }
.uhca-metricLabel { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.uhca-metricValue { font-size: 1.1rem; font-weight: 600; color: var(--brand-navy); }
.uhca-metricPct { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.uhca-findingsSection { padding: 0 24px 24px; }
.uhca-findingsList { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.uhca-finding {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  border-left: 3px solid var(--border-light);
  background: var(--surface-elevated, #fafafa);
}
.uhca-finding--warning { border-left-color: var(--brand-gold, #C9A962); }
.uhca-finding--error { border-left-color: var(--status-error, #C62828); }
.uhca-finding--info { border-left-color: var(--brand-navy, #1E3A5F); }
.uhca-findingType { font-weight: 500; min-width: 100px; color: var(--brand-navy); }
.uhca-findingIssue { min-width: 140px; color: var(--text-secondary); }
.uhca-findingDetail { flex: 1; color: var(--text-primary); }
.uhca-historyCard { margin-top: 0; }
.uhca-historyTable { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.uhca-historyTable th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-light, #eee);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.uhca-historyTable td { padding: 8px 12px; border-bottom: 1px solid var(--border-light, #eee); }

@media (max-width: 768px) {
  .uhce-filterBar { flex-wrap: wrap; }
  .uhce-recordItem { flex-direction: column; }
  .uhce-excludeForm { flex-wrap: wrap; }
  .uhca-scoreCard { flex-direction: column; gap: 16px; }
  .uhca-metricsRow { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   VIEW RECORDS — Semantic Sections (v5 design)
   ============================================= */

.hrh-recordsSections { display: flex; flex-direction: column; gap: 24px; }
.hrh-recSection { }
.hrh-recSectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--brand-gold, #C9A962);
}
.hrh-recSectionTitle {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-navy, #1E3A5F);
  margin: 0;
}
.hrh-recSectionCount {
  font-size: 0.75rem;
  color: var(--text-secondary, #6B7280);
  background: #EBF0F7;
  padding: 2px 10px;
  border-radius: 12px;
}
.hrh-recSectionBody { display: flex; flex-direction: column; gap: 8px; }
.hrh-recordItem {
  background: white;
  border: 1px solid var(--border-light, #E5E7EB);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.hrh-recordItem:hover { border-color: var(--brand-gold, #C9A962); }
.hrh-recordItem--expanded { border-color: var(--brand-navy, #1E3A5F); }
.hrh-recordHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.hrh-recordTitle { font-weight: 600; font-size: 0.95rem; color: var(--brand-navy-dark, #0F1C2E); flex: 1; }
.hrh-recordMeta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hrh-recordDate { font-size: 0.8rem; color: var(--text-secondary, #6B7280); white-space: nowrap; }
.hrh-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.hrh-badge--active { background: #dcfce7; color: #166534; }
.hrh-badge--inactive { background: #EBF0F7; color: var(--brand-navy, #1E3A5F); }
.hrh-recordExpanded { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light, #E5E7EB); }
.hrh-recordField { font-size: 0.9rem; margin: 3px 0; line-height: 1.5; }
.hrh-recordField strong { font-weight: 600; color: var(--brand-navy, #1E3A5F); min-width: 140px; display: inline-block; }

.hrh-clinicalNarrative {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-primary, #1A1A2E);
  white-space: pre-wrap;
}

.hrh-clinicalContent {
  background: #F0F4F8;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.7;
  border-left: 3px solid var(--brand-gold, #C9A962);
  max-height: 500px;
  overflow-y: auto;
}
.hrh-clinicalContent table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 8px 0; }
.hrh-clinicalContent th { background: var(--brand-navy, #1E3A5F); color: white; padding: 6px 10px; text-align: left; font-size: 0.8rem; }
.hrh-clinicalContent td { padding: 6px 10px; border-bottom: 1px solid var(--border-light, #E5E7EB); font-size: 0.85rem; }
.hrh-clinicalContent tr:nth-child(even) { background: #F8F9FA; }

.hrh-vitalsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.hrh-vitalCard {
  background: white;
  border: 1px solid var(--border-light, #E5E7EB);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hrh-vitalName { font-size: 0.7rem; color: var(--text-secondary, #6B7280); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.hrh-vitalValue { font-size: 1.4rem; font-weight: 600; color: var(--brand-navy, #1E3A5F); }
.hrh-vitalUnit { font-size: 0.75rem; color: var(--text-secondary, #6B7280); }

@media (max-width: 768px) {
  .hrh-vitalsGrid { grid-template-columns: repeat(2, 1fr); }
  .hrh-recordHeader { flex-direction: column; gap: 4px; }
  .hrh-recordMeta { justify-content: flex-start; }
}

/* AI Prompt viewer */
.uhc-prompt-text {
  margin: 0 24px 24px;
  padding: 20px;
  background: #F0F4F8;
  border: 1px solid var(--border-light, #E5E7EB);
  border-left: 3px solid var(--brand-navy, #1E3A5F);
  border-radius: 8px;
  font-family: "Outfit", sans-serif;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-primary);
  word-break: break-word;
  max-height: 600px;
  overflow-y: auto;
}
.uhc-prompt-text table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 8px 0; }
.uhc-prompt-text th { background: var(--brand-navy, #1E3A5F); color: white; padding: 6px 10px; text-align: left; font-size: 0.8rem; }
.uhc-prompt-text td { padding: 6px 10px; border-bottom: 1px solid var(--border-light, #E5E7EB); font-size: 0.85rem; }
.uhc-prompt-text tr:nth-child(even) { background: rgba(255,255,255,0.5); }

.uhca-explainer { padding: 16px 24px; font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); }
.uhca-explainer p { margin-bottom: 0; }
.uhca-metricHelp { font-size: 0.7rem; color: var(--text-secondary, #6B7280); line-height: 1.3; margin-top: 2px; }
.uhca-headerActions { display: flex; gap: 8px; align-items: center; }
.uhca-safetyAlert {
  margin: 0 24px;
  padding: 12px 16px;
  background: #FFEBEE;
  border: 1px solid #C62828;
  border-left: 4px solid #C62828;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #B71C1C;
}

/* HRH — Medicare sandbox hint text */
.hrh-sandboxHintText { margin: 8px 0 0; }

/* ============================================ */
/* MESSAGE CENTER — Notification Bell + Dropdown */
/* ============================================ */
.mc-container { position: relative; display: inline-block; }
.mc-bell { background: none; border: none; font-size: 20px; cursor: pointer; position: relative; padding: 4px 8px; }
.mc-badge { position: absolute; top: -2px; right: 0; background: #DC2626; color: white; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.mc-dropdown { position: absolute; top: 100%; right: 0; width: 320px; max-height: 400px; background: white; color: var(--brand-text, #1a1a2e); border: 1px solid var(--border, #E5E7EB); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1000; overflow: hidden; }
.mc-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border, #E5E7EB); }
.mc-headerTitle { font-size: 14px; font-weight: 600; }
.mc-markAll { font-size: 12px; color: var(--brand-primary, #1E3A5F); cursor: pointer; background: none; border: none; }
.mc-list { max-height: 340px; overflow-y: auto; }
.mc-empty { padding: 24px; text-align: center; color: var(--brand-text-muted, #6B7280); font-size: 13px; }
.mc-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border, #E5E7EB); cursor: pointer; transition: background 0.15s; }
.mc-item:hover { background: var(--surface-alt, #F8F9FA); }
.mc-item--unread { background: #EFF6FF; }
.mc-item--read { opacity: 0.7; }
.mc-itemIcon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.mc-itemContent { flex: 1; min-width: 0; }
.mc-itemTitle { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.mc-itemMessage { display: block; font-size: 12px; color: var(--brand-text-muted, #6B7280); line-height: 1.4; }
.mc-itemTime { display: block; font-size: 11px; color: var(--brand-text-muted, #6B7280); margin-top: 4px; }

/* ============================================
   Login History Card (#66 Security Activity)
   ============================================ */
.lhc-table-wrap { overflow-x: auto; }
.lhc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm, 12px);
}
.lhc-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--brand-primary, #1E3A5F);
  border-bottom: 2px solid var(--brand-border, #E5E7EB);
  white-space: nowrap;
}
.lhc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--brand-border, #E5E7EB);
  color: var(--brand-text, #1E293B);
}
.lhc-row-failed { background: #FEF2F2; }
.lhc-row-failed td { color: #991B1B; }
.lhc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.lhc-badge-ok { background: #DCFCE7; color: #166534; }
.lhc-badge-fail { background: #FEE2E2; color: #991B1B; }
.lhc-ip { font-family: monospace; font-size: 11px; color: var(--brand-text-muted, #6B7280); }
.lhc-dateRange {
  font-family: var(--font-body);
  font-size: var(--text-sm, 12px);
  padding: 4px 8px;
  border: 1px solid var(--brand-border, #E5E7EB);
  border-radius: 6px;
  color: var(--brand-text, #1E293B);
  background: white;
}
@media (max-width: 768px) {
  .lhc-table { font-size: 11px; }
  .lhc-table th, .lhc-table td { padding: 6px 6px; }
}

/* =============================================================================
   SupportChat — AI Support Bot (#39)
   Prefix: sc-
   ============================================================================= */

/* Header Button — centered in top header bar */
.sc-headerBtn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full, 9999px);
  padding: 6px 16px;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--brand-text-light);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  white-space: nowrap;
}
.sc-headerBtn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.sc-headerIcon {
  font-size: 18px;
  line-height: 1;
}
.sc-headerName {
  font-size: var(--text-sm);
}

/* Modal — uses standard modal-overlay + modal-content pattern */
.sc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-panel {
  display: none;
}
.sc-panel--open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 50vh;
  background: var(--brand-surface, #ffffff);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-lg, 12px);
  z-index: 2001;
  overflow: hidden;
}

/* Panel Header */
.sc-panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  flex-shrink: 0;
  gap: var(--space-3);
}
.sc-panelTitle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: white;
}
.sc-panelIcon {
  font-size: 22px;
}
.sc-historyGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sc-historyTitle {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sc-toggleRow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-toggleLabel {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
.sc-toggleLabel--active {
  color: white;
  font-weight: 700;
}
.sc-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  padding: 0;
}
.sc-toggle--on {
  background: var(--brand-secondary, #C9A962);
}
.sc-toggleKnob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: left 0.2s ease;
}
.sc-toggle--on .sc-toggleKnob {
  left: 18px;
}
.sc-closeBtn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.sc-closeBtn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Welcome State */
.sc-welcome {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  color: var(--brand-text-muted);
}
.sc-welcomeIcon {
  font-size: 48px;
  display: block;
  margin-bottom: var(--space-4);
}
.sc-welcome p {
  margin: var(--space-2) 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--brand-text);
}

/* Suggested Questions */
.sc-suggestions {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--brand-border);
  flex-shrink: 0;
}
.sc-suggestLabel {
  display: block;
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sc-suggestChip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 6px 12px;
  background: var(--brand-surface-elevated, #f5f5f5);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-sm);
  color: var(--brand-primary);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}
.sc-suggestChip:hover {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* Messages Area */
.sc-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Message Layout */
.sc-msg {
  display: flex;
  gap: var(--space-2);
  max-width: 90%;
}
.sc-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.sc-msg--bot {
  align-self: flex-start;
}

/* Message Avatar */
.sc-msgAvatar {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* Message Bubbles */
.sc-msgBubble {
  padding: var(--space-3) var(--space-4);
  border-radius: 16px;
  font-size: var(--text-base);
  line-height: 1.6;
  word-wrap: break-word;
}
.sc-msgBubble--user {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border-bottom-right-radius: 4px;
}
.sc-msgBubble--bot {
  background: var(--brand-surface-elevated, #f5f5f5);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-bottom-left-radius: 4px;
}
.sc-msgText {
  font-family: var(--font-body);
}
.sc-msgText strong {
  font-weight: var(--font-semibold);
}

/* Feedback Thumbs */
.sc-feedback {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--brand-border);
}
.sc-feedbackLabel {
  font-size: var(--text-xs);
  color: var(--brand-text-muted);
}
.sc-feedbackBtn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius);
  opacity: 0.5;
  transition: all var(--transition);
}
.sc-feedbackBtn:hover {
  opacity: 1;
  transform: scale(1.2);
}
.sc-feedbackBtn--active {
  opacity: 1;
  transform: scale(1.2);
}

/* Typing Indicator */
.sc-typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
}
.sc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-text-muted);
  animation: sc-bounce 1.4s ease-in-out infinite;
}
.sc-dot:nth-child(2) { animation-delay: 0.2s; }
.sc-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes sc-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* Follow-up Suggestions */
.sc-followups {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--brand-border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}
.sc-followupChip {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  color: var(--brand-primary);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}
.sc-followupChip:hover {
  background: var(--brand-primary);
  color: white;
}

/* Input Area */
.sc-inputArea {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--brand-border);
  background: var(--brand-surface, #ffffff);
  flex-shrink: 0;
}
.sc-input {
  flex: 1;
  border: 1px solid var(--brand-border);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: var(--text-base);
  font-family: var(--font-body);
  resize: none;
  outline: none;
  transition: border-color var(--transition);
  max-height: 100px;
  overflow-y: auto;
}
.sc-input:focus {
  border-color: var(--brand-primary);
}
.sc-input::placeholder {
  color: var(--brand-text-muted);
}
.sc-sendBtn {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all var(--transition);
  flex-shrink: 0;
}
.sc-sendBtn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}
.sc-sendBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* Extension Offer Button */
.sc-extendBtn {
  display: block;
  margin-top: var(--space-3);
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-secondary-dark, #B8972F) 100%);
  color: var(--brand-primary-dark);
  border: none;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition);
}
.sc-extendBtn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .sc-panel--open {
    width: 90vw;
    height: 70vh;
    min-width: unset;
    min-height: unset;
  }
}
@media (max-width: 480px) {
  .sc-headerName {
    display: none;
  }
  .sc-headerBtn {
    padding: 6px 10px;
  }
}

/* =============================================================================
   AI Assistant Personalization (Settings Tab)
   Prefix: sbt-
   ============================================================================= */
.sbt-section {
  padding: var(--space-6);
}
.sbt-sectionTitle {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--brand-primary-dark);
  margin-bottom: var(--space-2);
}
.sbt-sectionDesc {
  color: var(--brand-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}
.sbt-field {
  margin-bottom: var(--space-5);
}
.sbt-label {
  display: block;
  font-weight: var(--font-semibold);
  color: var(--brand-text);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.sbt-iconGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sbt-iconBtn {
  width: 48px;
  height: 48px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brand-border);
  border-radius: var(--radius-md, 8px);
  background: var(--brand-surface, #ffffff);
  cursor: pointer;
  transition: all var(--transition);
}
.sbt-iconBtn:hover {
  border-color: var(--brand-primary);
  transform: scale(1.1);
}
.sbt-iconBtn--active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-light, #E8EDF4);
  box-shadow: 0 0 0 2px var(--brand-primary);
}
.sbt-select {
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-text);
  background: var(--brand-surface, #ffffff);
}
.sbt-select:focus {
  outline: none;
  border-color: var(--brand-primary);
}
.sbt-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--brand-surface-elevated, #f5f5f5);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-5);
}
.sbt-previewIcon {
  font-size: 32px;
}
.sbt-previewName {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--brand-primary-dark);
}
.sbt-previewHint {
  font-size: var(--text-sm);
  color: var(--brand-text-muted);
  font-style: italic;
}
.sbt-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sbt-success {
  color: #059669;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}
.sbt-error {
  color: #DC2626;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}