@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

:root {
  --nav: #1C1A16;
  --bg: #F5F0E8;
  --card: #FFFFFF;
  --primary: #2D6A4F;
  --primary-dark: #245A42;
  --text: #1C1A16;
  --text-muted: #6B6560;
  --text-light: #A09A94;
  --border: #E8E2D8;
  --red: #E8623A;
  --amber: #E5A100;
  --green: #2D6A4F;
  --green-light: #D8F3DC;
  --amber-light: #FFF3D0;
  --red-light: #FEE5E0;
  --blue: #3B82F6;
  --purple: #8B5CF6;
  --rose: #E11D48;
  --orange: #EA580C;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(28,26,22,0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background: var(--nav);
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3, h4 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
}

/* ═══════════════════════════════════════════ */
/* Auth Screen                                 */
/* ═══════════════════════════════════════════ */
.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  text-align: center;
}
.auth-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 42px;
  color: var(--green);
  margin-bottom: 8px;
}
.auth-tagline {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 40px;
}
.auth-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.auth-btn:hover { border-color: var(--green); box-shadow: var(--shadow); }
.auth-btn svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════ */
/* Biometric Lock Screen                       */
/* ═══════════════════════════════════════════ */
.bio-lock-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--nav);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bio-lock-content { text-align: center; padding: 40px 24px; }
.bio-lock-icon { font-size: 64px; margin-bottom: 16px; }
.bio-lock-title {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: var(--green-light);
  margin-bottom: 8px;
}
.bio-lock-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.bio-lock-btn {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════ */
/* Navigation                                  */
/* ═══════════════════════════════════════════ */
.nav {
  background: var(--nav);
  padding: 12px 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}
.nav-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.nav-brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo {
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-logo svg { width: 20px; height: 20px; }
.nav-brand-text {
  display: flex;
  flex-direction: column;
}
.nav-brand {
  font-family: 'DM Serif Display', Georgia, serif;
  color: #fff;
  font-size: 18px;
  line-height: 1.1;
}
.nav-version {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
}
.patient-selector {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  max-width: 160px;
  min-width: 100px;
  -webkit-appearance: none;
  appearance: none;
}
.patient-selector:focus { outline: none; }
.patient-selector option {
  background: var(--nav);
  color: #fff;
}
.nav-settings {
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* Tab Bar (scrollable with icons) */
.tab-bar {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tab-bar::-webkit-scrollbar { display: none; }
.nav-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nav-tab:hover { color: rgba(255,255,255,0.8); }
.nav-tab.active {
  color: #fff;
  border-bottom-color: var(--primary);
}
.tab-icon {
  font-size: 16px;
  line-height: 1;
}

/* Install button */
.nav-install {
  background: var(--green);
  border: none;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════ */
/* Content Area                                */
/* ═══════════════════════════════════════════ */
.offline-bar {
  background: var(--amber);
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}
.container {
  padding: 16px;
  padding-bottom: 32px;
  max-width: 640px;
  margin: 0 auto;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ═══════════════════════════════════════════ */
/* Cards                                       */
/* ═══════════════════════════════════════════ */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card-action {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

/* ═══════════════════════════════════════════ */
/* Hero Stats Grid (Dashboard)                 */
/* ═══════════════════════════════════════════ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.hero-stat {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid var(--border);
}
.hero-stat-icon { font-size: 20px; margin-bottom: 6px; }
.hero-stat-value {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  color: var(--text);
  line-height: 1.1;
}
.hero-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.hero-stat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 6px;
}

/* Classification badges */
.badge-green { background: #E6F4ED; color: var(--green); }
.badge-amber { background: #FFF3D0; color: #92600A; }
.badge-red { background: #FEE; color: var(--red); }
.badge-blue { background: #EFF6FF; color: var(--blue); }
.badge-normal { background: #E6F4ED; color: var(--green); }
.badge-elevated { background: #FFF3D0; color: #92600A; }
.badge-high { background: #FEE; color: var(--red); }

/* ═══════════════════════════════════════════ */
/* Reading / List Items (card-based)           */
/* ═══════════════════════════════════════════ */
.reading-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.reading-item:last-child { border-bottom: none; }
.reading-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 12px;
}
.reading-main { flex: 1; min-width: 0; }
.reading-value { font-weight: 600; font-size: 15px; }
.reading-meta { font-size: 12px; color: var(--text-muted); }
.reading-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.reading-actions {
  display: flex;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}
.reading-actions .btn { padding: 4px 10px; font-size: 11px; }

/* Large reading display (BP/Sugar hero) */
.reading-large {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 40px;
  margin: 4px 0;
}
.reading-large-slash {
  color: var(--text-muted);
  font-size: 24px;
}
.reading-large-sub {
  font-size: 14px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════ */
/* Next Dose / Due Cards                       */
/* ═══════════════════════════════════════════ */
.next-dose {
  display: flex;
  align-items: center;
  gap: 12px;
}
.next-dose-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.next-dose-info { flex: 1; }
.next-dose-name { font-weight: 600; font-size: 15px; }
.next-dose-detail { font-size: 13px; color: var(--text-muted); }
.next-dose-time {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

/* Due badge styles */
.due-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
}
.due-badge.overdue { background: #FEE; color: var(--red); }
.due-badge.due { background: #FFF3D0; color: #92600A; }
.due-badge.upcoming { background: #E6F4ED; color: var(--green); }

/* ═══════════════════════════════════════════ */
/* Quick Actions (horizontal scroll)           */
/* ═══════════════════════════════════════════ */
.section-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 8px;
  font-family: 'DM Sans', sans-serif;
}
.h-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll-card {
  flex-shrink: 0;
  width: 100px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.h-scroll-card:hover { border-color: var(--primary); }
.h-scroll-card .action-icon { font-size: 24px; }
.h-scroll-card .action-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ═══════════════════════════════════════════ */
/* Weekly Summary                              */
/* ═══════════════════════════════════════════ */
.week-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  text-align: center;
}
.week-summary-value {
  font-size: 20px;
  font-weight: 700;
}
.week-summary-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════ */
/* Chart                                       */
/* ═══════════════════════════════════════════ */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
}
.chart-canvas-wrap canvas {
  width: 100% !important;
  height: auto !important;
}
.chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.chart-legend span::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.legend-sys::before { background: var(--red); }
.legend-dia::before { background: var(--blue); }
.legend-pulse::before { background: var(--purple); }
.legend-fasting::before { background: var(--orange); }
.legend-post::before { background: var(--blue); }

/* ═══════════════════════════════════════════ */
/* Filter Chips (History tab)                  */
/* ═══════════════════════════════════════════ */
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-chip {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}
.filter-chip.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ═══════════════════════════════════════════ */
/* Buttons                                     */
/* ═══════════════════════════════════════════ */
.btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary-full {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: #d4cdbf; }
.btn-secondary-full {
  width: 100%;
  padding: 14px;
  background: none;
  color: var(--text-muted);
  border: none;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
}
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #cc4f2e; }
.btn-sm { padding: 5px 14px; font-size: 12px; }
.btn-amber { background: var(--amber); color: #fff; }

/* ═══════════════════════════════════════════ */
/* Toolbar (section header + action)           */
/* ═══════════════════════════════════════════ */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.search-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.search-input { flex: 1; min-width: 140px; }
.filter-select { width: auto; min-width: 90px; flex-shrink: 0; }
.date-range-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.date-range-bar .form-control { width: auto; min-width: 120px; }

/* ═══════════════════════════════════════════ */
/* Modal (Bottom Sheet style)                  */
/* ═══════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: flex-end;
  justify-content: center;
  overscroll-behavior: contain;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.modal-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px;
  margin-bottom: 16px;
}

/* Legacy modal header/footer (for existing modals) */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-header h3 {
  font-size: 20px;
}
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  line-height: 1;
}
.modal-body { margin-bottom: 16px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════ */
/* Forms                                       */
/* ═══════════════════════════════════════════ */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  background: var(--card);
  color: var(--text);
  -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
}
select.form-control { cursor: pointer; }
textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* Inline groups */
.inline-group {
  display: flex;
  gap: 10px;
}
.inline-input { flex: 0 0 90px; }
.inline-select { flex: 1; }

/* Toggle / Chip group */
.toggle-group {
  display: flex;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.toggle-option {
  flex: 1;
  padding: 9px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: var(--text-muted);
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.toggle-option.active {
  background: var(--primary);
  color: #fff;
}

/* Form chips (for arm, position, etc.) */
.form-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.form-chip {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}
.form-chip.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Custom time toggle */
.custom-time-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.switch {
  position: relative;
  width: 42px;
  height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: 0.3s;
}
.slider:before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
input:checked + .slider { background: var(--green); }
input:checked + .slider:before { transform: translateX(18px); }
.custom-time-fields { display: none; }
.custom-time-fields.visible { display: block; }

/* Slot checklist */
.slot-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.slot-item:hover { border-color: var(--green); }
.slot-item.taken {
  background: #E6F4ED;
  border-color: var(--green);
  opacity: 0.7;
  cursor: default;
}
.slot-item.newly-checked {
  border-color: var(--green);
  background: #eef7f1;
}
.slot-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}
.slot-checkbox:disabled { cursor: default; }
.slot-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.slot-taken-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════ */
/* OCR / Camera Button                         */
/* ═══════════════════════════════════════════ */
.ocr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 2px dashed var(--primary);
  border-radius: 12px;
  background: #E6F4ED;
  color: var(--primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}
.ocr-btn .icon { font-size: 20px; }

/* ═══════════════════════════════════════════ */
/* Mood Selector                               */
/* ═══════════════════════════════════════════ */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mood-btn:hover { border-color: var(--primary); }
.mood-btn.selected {
  border-color: var(--primary);
  background: #E6F4ED;
}
.mood-emoji { font-size: 24px; }
.mood-label { font-size: 10px; color: var(--text-muted); }

/* ═══════════════════════════════════════════ */
/* Symptom Tags                                */
/* ═══════════════════════════════════════════ */
.symptom-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.symptom-tag {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.symptom-tag:hover { border-color: var(--green); }
.symptom-tag.selected {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ═══════════════════════════════════════════ */
/* Journal Timeline                            */
/* ═══════════════════════════════════════════ */
.timeline-item {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.timeline-content {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.timeline-time { font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
.timeline-mood { font-size: 16px; margin-bottom: 4px; }
.timeline-text { font-size: 13px; line-height: 1.5; color: var(--text); }
.timeline-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.timeline-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════ */
/* Lab Reports                                 */
/* ═══════════════════════════════════════════ */
.lab-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.lab-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.lab-card-title { font-weight: 600; font-size: 15px; }
.lab-card-date { font-size: 12px; color: var(--text-muted); }
.lab-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.lab-row:last-child { border-bottom: none; }
.lab-name { color: var(--text-muted); }
.lab-val { font-weight: 600; }
.lab-val.high { color: var(--red); }
.lab-val.low { color: var(--blue); }
.lab-val.normal { color: var(--green); }
.lab-range { font-size: 11px; color: var(--text-light); margin-left: 4px; }

/* Lab result rows in modal */
.lab-result-row {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.lab-result-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════ */
/* Insights                                    */
/* ═══════════════════════════════════════════ */
.score-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.score-ring-wrap svg { transform: rotate(-90deg); }
.score-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring-value {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  line-height: 1;
}
.score-ring-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Progress bars */
.progress-bar-wrap {
  background: var(--border);
  border-radius: 4px;
  height: 8px;
  margin-top: 6px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* Guidance items */
.guidance-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.guidance-item:last-child { margin-bottom: 0; }
.guidance-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.guidance-title { font-weight: 600; font-size: 13px; }
.guidance-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Pattern cards */
.pattern-card {
  padding: 12px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 10px;
}
.pattern-card:last-child { margin-bottom: 0; }
.pattern-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.pattern-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ═══════════════════════════════════════════ */
/* Settings                                    */
/* ═══════════════════════════════════════════ */
.settings-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.settings-group-title {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 6px;
}
.settings-group-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.settings-field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.settings-divider {
  border-top: 1px dashed var(--border);
  margin: 20px 0;
}
.settings-preview {
  background: var(--bg);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  line-height: 1.8;
}
.settings-preview strong { color: var(--text); }

/* Toggle switch (settings) */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border);
  border-radius: 24px;
  transition: 0.3s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ═══════════════════════════════════════════ */
/* Help Page                                   */
/* ═══════════════════════════════════════════ */
.help-section {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.help-heading {
  font-size: 17px;
  margin-bottom: 12px;
  color: var(--text);
}
.help-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 8px;
}
.help-list {
  font-size: 14px;
  line-height: 1.8;
  padding-left: 20px;
  color: var(--text);
  margin: 0;
}
.help-list li { margin-bottom: 6px; }
.help-list li strong { color: var(--text); }

/* ═══════════════════════════════════════════ */
/* Welcome Overlay                             */
/* ═══════════════════════════════════════════ */
.welcome-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.welcome-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.welcome-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════ */
/* Empty State                                 */
/* ═══════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.empty-state p {
  font-size: 15px;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════ */
/* Toast / Loading                             */
/* ═══════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--nav);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 2000;
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.loading-bar {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}
.loading-bar.active { display: block; }
@keyframes loading-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ═══════════════════════════════════════════ */
/* Status badges (medications)                 */
/* ═══════════════════════════════════════════ */
.status-active { color: var(--green); font-weight: 600; }
.status-inactive { color: var(--text-muted); opacity: 0.5; }

/* Medication strength badge */
.strength-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: #E8E3D9;
  color: var(--text);
}

/* ═══════════════════════════════════════════ */
/* Date group headers (History)                */
/* ═══════════════════════════════════════════ */
.date-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  margin-top: 16px;
}
.date-group-title:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════ */
/* Responsive                                  */
/* ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero-grid { gap: 10px; }
  .hero-stat { padding: 12px; }
  .hero-stat-value { font-size: 20px; }
  .nav { padding: 8px 12px 0; }
  .nav-tab { padding: 8px 10px; font-size: 12px; }
  .tab-icon { font-size: 14px; }
  .container { padding: 12px; }
  .mood-grid { gap: 6px; }
  .mood-emoji { font-size: 20px; }
  .patient-selector { max-width: 120px; min-width: 80px; font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   REDESIGN COMPONENT SYSTEM (from design/tokens.css)
   Scoped under .dc so it applies only to screens ported to the new
   design. Unported screens keep their original styles until converted.
   Added variables above are aliases/additions; shared values match
   the originals exactly.
   ═══════════════════════════════════════════════════════════════ */

:root{--canvas:#F5F0E8;
  --card:#FFFFFF;
  --ink:#1C1A16;
  --primary:#2D6A4F;
  --primary-dark:#245A42;
  --accent-light:#D8F3DC;
  --muted:#6B6560;
  --light-text:#A09A94; 
  --border:#E8E2D8;
  --alert:#E8623A;
  --alert-dark:#B5431F;  
  --alert-tint:#FBE4DC;
  --warning:#E5A100;
  --warning-dark:#8A6400; 
  --warning-tint:#FBF0D9;
  --radius:12px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow:0 2px 8px rgba(28,26,22,0.06);
  --font-heading:'DM Serif Display', Georgia, serif;
  --font-body:'DM Sans', Helvetica, Arial, sans-serif;}

.dc *,
.dc *::before,
.dc *::after{box-sizing:border-box;}

.dc html,
.dc body{margin:0;padding:0;}

.dc body{background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;}

.dc h1,
.dc h2,
.dc h3{font-family:var(--font-heading);font-weight:400;margin:0;color:var(--ink);}

.dc p{margin:0;}

.dc button{font-family:inherit;}

.dc input,
.dc select,
.dc textarea{font-family:inherit;}

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

.dc a{color:var(--primary-dark);}

.dc a:hover{color:var(--primary);}

.dc :focus-visible{outline:2.5px solid var(--primary);outline-offset:2px;}

.dc .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;}

.dc .app-shell{max-width:480px;margin:0 auto;min-height:100vh;
  background:var(--canvas);
  display:flex;flex-direction:column;}

.dc .app-header{display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px 6px;}

.dc .header-brand{display:flex;align-items:baseline;gap:8px;}

.dc .wordmark{font-size:24px;color:var(--ink);}

.dc .version-tag{font-size:12px;color:var(--light-text);font-weight:500;}

.dc .icon-btn{width:44px;height:44px;border-radius:var(--radius-pill);
  border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);}

.dc .icon-btn:hover{background:var(--border);}

.dc .icon-btn:active{background:var(--accent-light);color:var(--primary-dark);}

.dc .icon-gear{width:22px;height:22px;position:relative;}

.dc .icon-gear::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2.5px solid currentColor;}

.dc .icon-gear::after{content:"";position:absolute;inset:6px;border-radius:50%;
  background:var(--canvas);}

.dc .icon-gear i{position:absolute;width:3px;height:6px;background:currentColor;
  left:50%;top:-3px;transform-origin:11px 14px;margin-left:-1.5px;}

.dc .icon-close{width:18px;height:18px;position:relative;}

.dc .icon-close::before,
.dc .icon-close::after{content:"";position:absolute;top:8px;left:0;width:18px;height:2.5px;
  background:currentColor;border-radius:2px;}

.dc .icon-close::before{transform:rotate(45deg);}

.dc .icon-close::after{transform:rotate(-45deg);}

.dc .icon-chevron{width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);}

.dc .icon-chevron.is-down{transform:rotate(45deg);}

.dc .icon-search{width:18px;height:18px;position:relative;}

.dc .icon-search::before{content:"";position:absolute;top:0;left:0;width:12px;height:12px;border:2.5px solid currentColor;border-radius:50%;}

.dc .icon-search::after{content:"";position:absolute;bottom:0;right:0;width:7px;height:2.5px;background:currentColor;border-radius:2px;transform:rotate(45deg);}

.dc .icon-camera{width:30px;height:24px;position:relative;}

.dc .icon-camera::before{content:"";position:absolute;top:2px;left:0;width:30px;height:20px;border-radius:5px;background:currentColor;}

.dc .icon-camera::after{content:"";position:absolute;top:7px;left:10px;width:10px;height:10px;border-radius:50%;background:var(--card);}

.dc .icon-mic{width:16px;height:22px;position:relative;}

.dc .icon-mic::before{content:"";position:absolute;top:0;left:5px;width:6px;height:14px;border-radius:3px;background:currentColor;}

.dc .icon-mic::after{content:"";position:absolute;bottom:0;left:2px;width:12px;height:2.5px;background:currentColor;border-radius:2px;}

.dc .app-tabs{display:flex;gap:8px;overflow-x:auto;
  padding:10px 16px 14px;border-bottom:1px solid var(--border);
  scrollbar-width:none;}

.dc .app-tabs::-webkit-scrollbar{display:none;}

.dc .tab{flex:0 0 auto;padding:10px 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;color:var(--muted);
  background:transparent;min-height:44px;display:flex;align-items:center;
  text-decoration:none;white-space:nowrap;border:1.5px solid transparent;}

.dc .tab:hover{background:var(--border);}

.dc .tab[aria-current="page"]{background:var(--accent-light);color:var(--primary-dark);}

.dc .screen{padding:20px 16px 40px;display:flex;flex-direction:column;gap:20px;flex:1;}

.dc .page-title{font-size:28px;}

.dc .page-subtitle{color:var(--muted);font-size:15px;margin-top:4px;}

.dc .section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}

.dc .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;}

.dc .card-title{font-size:18px;font-weight:700;font-family:var(--font-body);}

.dc .card-subtitle{color:var(--muted);font-size:14px;margin-top:2px;}

.dc .card-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}

.dc .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;border-radius:var(--radius);
  font-size:16px;font-weight:600;border:1.5px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  text-decoration:none;}

.dc .btn-block{width:100%;}

.dc .btn-sm{padding:8px 14px;font-size:14px;min-height:44px;}

.dc .btn-primary{background:var(--primary);color:#fff;}

.dc .btn-primary:hover{background:var(--primary-dark);}

.dc .btn-primary:active{background:var(--primary-dark);}

.dc .btn-primary:disabled{background:var(--border);color:var(--light-text);cursor:not-allowed;}

.dc .btn-secondary{background:var(--card);color:var(--ink);border-color:var(--border);}

.dc .btn-secondary:hover{border-color:var(--primary);background:var(--accent-light);color:var(--primary-dark);}

.dc .btn-secondary:disabled{color:var(--light-text);cursor:not-allowed;}

.dc .btn-danger{background:var(--card);color:var(--alert-dark);border-color:var(--alert);}

.dc .btn-danger:hover{background:var(--alert-tint);}

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

.dc .btn-ghost:hover{background:var(--border);}

.dc .field{display:flex;flex-direction:column;gap:6px;}

.dc .field label{font-size:14px;font-weight:600;color:var(--ink);}

.dc .field-hint{font-size:13px;color:var(--muted);}

.dc .field-error{font-size:13px;color:var(--alert-dark);}

.dc .field input[type="text"],
.dc .field input[type="number"],
.dc .field input[type="email"],
.dc .field input[type="password"],
.dc .field input[type="time"],
.dc .field input[type="datetime-local"],
.dc .field select,
.dc .field textarea{min-height:44px;padding:11px 14px;border-radius:var(--radius);
  border:1.5px solid var(--border);background:var(--card);color:var(--ink);
  font-size:16px;width:100%;}

.dc .field textarea{min-height:88px;resize:vertical;line-height:1.5;}

.dc .field input::placeholder,
.dc .field textarea::placeholder{color:var(--muted);}

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

.dc .field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}

.dc .field-row .field{min-width:0;}

.dc .input-icon-wrap{position:relative;}

.dc .input-icon-wrap .field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);}

.dc .input-icon-wrap input{padding-left:40px;}

.dc .segmented{display:flex;gap:8px;flex-wrap:wrap;}

.dc .segmented input{position:absolute;opacity:0;width:1px;height:1px;}

.dc .segmented label{flex:1 1 auto;text-align:center;min-height:44px;padding:10px 14px;
  border-radius:var(--radius);border:1.5px solid var(--border);
  color:var(--muted);font-weight:600;font-size:14px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;}

.dc .segmented input:checked + label{background:var(--accent-light);border-color:var(--primary);color:var(--primary-dark);}

.dc .segmented input:focus-visible + label{outline:2.5px solid var(--primary);outline-offset:2px;}

.dc .switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;}

.dc .switch-row + .switch-row{border-top:1px solid var(--border);}

.dc .switch-label{font-weight:600;font-size:15px;}

.dc .switch-meta{font-size:13px;color:var(--muted);margin-top:2px;}

.dc .switch{position:relative;display:inline-flex;width:48px;height:44px;align-items:center;flex:0 0 auto;}

.dc .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}

.dc .switch .track{width:48px;height:28px;border-radius:var(--radius-pill);background:var(--border);
  transition:background .15s;position:relative;}

.dc .switch .thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow);transition:transform .15s;}

.dc .switch input:checked ~ .track{background:var(--primary);}

.dc .switch input:checked ~ .track .thumb{transform:translateX(20px);}

.dc .switch input:focus-visible ~ .track{outline:2.5px solid var(--primary);outline-offset:2px;}

.dc .badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--radius-pill);}

.dc .badge-success{background:var(--accent-light);color:var(--primary-dark);}

.dc .badge-warning{background:var(--warning-tint);color:var(--warning-dark);}

.dc .badge-alert{background:var(--alert-tint);color:var(--alert-dark);}

.dc .badge-neutral{background:var(--border);color:var(--muted);}

.dc .sheet-overlay{position:fixed;inset:0;background:rgba(28,26,22,.45);
  display:flex;align-items:flex-end;justify-content:center;z-index:100;}

.dc .sheet{background:var(--card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;}

.dc .sheet-handle{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--border);margin:10px auto 0;flex:0 0 auto;}

.dc .sheet-header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);flex:0 0 auto;}

.dc .sheet-title{font-size:20px;}

.dc .sheet-body{padding:18px;display:flex;flex-direction:column;gap:18px;}

.dc .sheet-actions{display:flex;gap:10px;padding:16px 18px;border-top:1px solid var(--border);
  flex:0 0 auto;position:sticky;bottom:0;background:var(--card);}

.dc .sheet-actions .btn{flex:1;}

.dc .dialog-overlay{position:fixed;inset:0;background:rgba(28,26,22,.45);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;}

.dc .dialog{background:var(--card);border-radius:var(--radius-lg);max-width:340px;width:100%;
  padding:28px 24px;text-align:center;box-shadow:var(--shadow);}

.dc .dialog-title{font-size:22px;margin-bottom:8px;}

.dc .dialog-text{color:var(--muted);font-size:15px;margin-bottom:18px;}

.dc .toast-wrap{position:fixed;top:16px;left:0;right:0;display:flex;justify-content:center;z-index:200;padding:0 16px;}

/* Reset the legacy .toast positioning/opacity that would otherwise leak in
   (legacy .toast is position:fixed;bottom;opacity:0 and only shows with
   .show) — here the toast is a normal flex child of the top-anchored
   .toast-wrap. The showToast JS sets inline opacity/transform for the fade. */
.dc .toast{position:static;left:auto;right:auto;bottom:auto;transform:none;opacity:1;pointer-events:auto;
  display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:var(--radius);box-shadow:var(--shadow);
  font-size:14px;font-weight:600;max-width:480px;}

.dc .toast-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}

.dc .toast.is-success .toast-dot{background:var(--accent-light);}

.dc .toast.is-error .toast-dot{background:var(--alert);}

.dc .empty-state{text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;}

.dc .empty-icon{width:64px;height:64px;border-radius:50%;background:var(--border);
  background-image:repeating-linear-gradient(45deg, rgba(28,26,22,.05) 0 6px, transparent 6px 12px);}

.dc .empty-title{font-size:17px;font-weight:700;}

.dc .empty-text{color:var(--muted);font-size:14px;max-width:280px;}

.dc .quick-actions{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}

.dc .quick-actions::-webkit-scrollbar{display:none;}

.dc .quick-action{flex:0 0 auto;width:84px;min-height:76px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius);color:var(--ink);
  font-size:12px;font-weight:600;text-align:center;cursor:pointer;padding:10px 6px;}

.dc .quick-action:hover{border-color:var(--primary);background:var(--accent-light);}

.dc .quick-action .qa-icon{width:32px;height:32px;border-radius:50%;background:var(--accent-light);
  color:var(--primary-dark);display:flex;align-items:center;justify-content:center;}

.dc .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.dc .stat-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:4px;}

.dc .stat-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}

.dc .stat-value{font-size:24px;font-family:var(--font-heading);}

.dc .stat-meta{font-size:13px;color:var(--muted);}

.dc .stat-meta.is-good{color:var(--primary-dark);}

.dc .stat-meta.is-warning{color:var(--warning-dark);}

.dc .stat-meta.is-alert{color:var(--alert-dark);}

.dc .progress{height:8px;border-radius:var(--radius-pill);background:var(--border);overflow:hidden;}

.dc .progress-fill{height:100%;background:var(--primary);border-radius:var(--radius-pill);}

.dc .dev-note{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);background:var(--border);
  padding:3px 9px;border-radius:var(--radius-pill);}


/* ═══════════════════════════════════════════════════════════════
   HOME RE-SKIN BRIDGE (Option B)
   Maps the dashboard's legacy class names — the ones its JS emits
   via innerHTML — onto the new design look, scoped under .dc so only
   #tab-dashboard (which carries the dc marker) is affected. Shared
   components (.card, .btn, .section-title) already inherit the design
   from the scoped component system above; these rules cover the
   dashboard-only classes that have no design counterpart by name.
   ═══════════════════════════════════════════════════════════════ */

/* Hero stat cards → design stat-card (left-aligned, no icon) */
.dc .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dc .hero-stat{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
}
.dc .hero-stat-icon{display:none;}
.dc .hero-stat-value{font-family:var(--font-heading);font-size:24px;font-weight:400;color:var(--ink);order:1;}
.dc .hero-stat-label{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);order:0;
}

/* Card header row (title + action link) */
.dc .card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.dc .card-action{font-size:14px;font-weight:600;color:var(--primary-dark);cursor:pointer;}

/* Next dose content row */
.dc .next-dose{display:flex;align-items:center;gap:12px;}
.dc .next-dose-icon{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--accent-light);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.dc .next-dose-info{flex:1;min-width:0;}
.dc .next-dose-name{font-weight:700;font-size:16px;}
.dc .next-dose-detail{font-size:14px;color:var(--muted);margin-top:2px;}
.dc .next-dose-time{font-weight:700;font-size:14px;white-space:nowrap;}

/* Quick actions row */
.dc .h-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.dc .h-scroll::-webkit-scrollbar{display:none;}
.dc .h-scroll-card{
  flex:0 0 auto;width:84px;min-height:76px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius);color:var(--ink);
  font-size:12px;font-weight:600;text-align:center;cursor:pointer;padding:10px 6px;
}
.dc .h-scroll-card:active{border-color:var(--primary);background:var(--accent-light);}
.dc .action-icon{
  width:32px;height:32px;border-radius:50%;background:var(--accent-light);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.dc .action-label{font-size:12px;font-weight:600;}

/* Reading rows (JS-emitted — due-now here, also BP/Sugar/Labs/Med Log lists).
   Only affects the dashboard until those tabs also opt into .dc. */
.dc .reading-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.dc .reading-item:last-child{border-bottom:none;}
.dc .reading-icon{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.dc .reading-main{flex:1;min-width:0;}
.dc .reading-value{font-weight:700;font-size:16px;}
.dc .reading-meta{font-size:13px;color:var(--muted);margin-top:2px;}
.dc .reading-badge{
  display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap;
}
.dc .badge-green{background:var(--accent-light);color:var(--primary-dark);}
.dc .badge-amber{background:var(--warning-tint);color:var(--warning-dark);}
.dc .badge-red{background:var(--alert-tint);color:var(--alert-dark);}

/* Week summary */
.dc .week-summary-grid{display:flex;gap:20px;flex-wrap:wrap;}
.dc .week-summary-value{font-family:var(--font-heading);font-size:20px;color:var(--ink);}
.dc .week-summary-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-top:2px;}

/* Textarea/inputs on the dashboard */
.dc .form-control{
  border:1.5px solid var(--border);border-radius:var(--radius);background:var(--card);
  color:var(--ink);font-size:16px;padding:11px 14px;width:100%;
}
.dc .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-light);outline:none;}


/* ═══════════════════════════════════════════════════════════════
   MEDS RE-SKIN BRIDGE (Option B)
   Opts #tab-medications into .dc. The med cards its JS emits reuse
   the reading-item / card / btn classes already covered by the
   component system and the Home bridge; these rules cover the
   meds-only layout classes (toolbar, search/filter bar) plus the
   action-button row, which — unlike Home's reading rows — carries
   three buttons and so drops to a full-width row beneath each med.
   No JS and no meds markup structure changed.
   ═══════════════════════════════════════════════════════════════ */

/* Header row (title + Add button) */
.dc .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}

/* Search + status filter row. flex-wrap lets the Med Log variant (search +
   date-range) drop the date row below the search box on narrow screens;
   harmless to the Meds variant (search + select), which fits on one line. */
.dc .search-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.dc .search-input{flex:1;min-width:0;}
/* Override .dc .form-control's width:100% so the select keeps its natural width */
.dc .filter-select{width:auto;flex:0 0 auto;min-width:110px;}

/* Med rows: let the action buttons wrap onto their own full-width row,
   scoped to #med-list so Home's single-line reading rows are untouched. */
.dc #med-list .reading-item{flex-wrap:wrap;}
.dc #med-list .reading-actions{flex-basis:100%;margin-left:0;margin-top:12px;gap:8px;}
.dc #med-list .reading-actions .btn{flex:1;}


/* ═══════════════════════════════════════════════════════════════
   BP RE-SKIN BRIDGE (Option B)
   Opts #tab-bp into .dc. Most of the tab (toolbar, trend card, section
   titles) reuses classes already covered above; these rules cover the
   BP-only pieces its JS emits: the large latest-reading hero, the
   classification badges (normal/elevated/high — a different naming from
   Home's green/amber/red), and the recent-reading rows whose inline
   Edit/Del buttons wrap onto a full-width row beneath each reading.
   The hero-label, reading-large and badge-normal/elevated/high rules are
   shared by Sugar/Labs/Med Log and stay inert until those tabs opt in.
   No JS and no BP markup structure changed.
   ═══════════════════════════════════════════════════════════════ */

/* Latest-reading hero (#bp-latest, centered card) */
.dc .hero-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.dc .reading-large{font-family:var(--font-heading);font-size:44px;line-height:1.1;font-weight:400;color:var(--ink);margin:6px 0 2px;}
.dc .reading-large-sub{font-size:14px;color:var(--muted);}

/* Classification badges (shared with Sugar/Labs) */
.dc .badge-normal{background:var(--accent-light);color:var(--primary-dark);}
.dc .badge-elevated{background:var(--warning-tint);color:var(--warning-dark);}
.dc .badge-high{background:var(--alert-tint);color:var(--alert-dark);}

/* Recent-reading rows stay on a single line (icon · value/meta · badge ·
   Edit · Del). The Edit/Del buttons carry inline font/padding the JS emits
   that class rules can't override, so rather than fight them, give the
   bare .btn an outlined-chip look sized by that inline padding and drop
   the 44px min-height the component base would otherwise impose. gap+small
   badge keep the row readable; the value/meta column truncates. Shared by
   the BP and Sugar readings lists (identical row markup); Labs/Med Log can
   join the selector list when they opt in. */
.dc #bp-readings-list .reading-item,
.dc #sugar-readings-list .reading-item{gap:8px;}
.dc #bp-readings-list .reading-badge,
.dc #sugar-readings-list .reading-badge{flex:0 0 auto;}
.dc #bp-readings-list .btn,
.dc #sugar-readings-list .btn{min-height:0;flex:0 0 auto;border:1.5px solid var(--border);
  background:var(--card);color:var(--muted);border-radius:var(--radius-pill);font-weight:600;}
.dc #bp-readings-list .btn:active,
.dc #sugar-readings-list .btn:active{background:var(--accent-light);border-color:var(--primary);color:var(--primary-dark);}


/* ═══════════════════════════════════════════════════════════════
   JOURNAL RE-SKIN BRIDGE (Option B)
   Opts #tab-journal into .dc. The today hero reuses hero-label +
   timeline-tag; the recent entries are a vertical timeline whose classes
   have no design counterpart by name, so they're mapped here to the
   design language (the mood dot keeps its JS-set inline colour; the entry
   becomes a shadowed card). The timeline-* rules are a reusable component
   (Insights can share them) and stay inert until a tab opts in; the
   Edit/Delete chip treatment is scoped to #journal-entries-list.
   No JS and no journal markup structure changed.
   ═══════════════════════════════════════════════════════════════ */

.dc .timeline-item{display:flex;gap:12px;margin-bottom:14px;}
.dc .timeline-dot{width:12px;height:12px;border-radius:50%;margin-top:16px;flex:0 0 auto;}
.dc .timeline-content{flex:1;min-width:0;background:var(--card);border:none;
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;}
.dc .timeline-time{font-size:12px;color:var(--muted);margin-bottom:4px;}
.dc .timeline-mood{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.dc .timeline-text{font-size:14px;line-height:1.5;color:var(--ink);}
.dc .timeline-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.dc .timeline-tag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--radius-pill);
  background:var(--border);color:var(--muted);}

/* Entry Edit/Delete chips (inline font/padding from the JS win; drop the
   component min-height and give the bare .btn the shared chip look). */
.dc #journal-entries-list .btn{min-height:0;border:1.5px solid var(--border);
  background:var(--card);color:var(--muted);border-radius:var(--radius-pill);font-weight:600;}
.dc #journal-entries-list .btn:active{background:var(--accent-light);border-color:var(--primary);color:var(--primary-dark);}


/* ═══════════════════════════════════════════════════════════════
   LABS RE-SKIN BRIDGE (Option B)
   Opts #tab-labs into .dc. Covers the scan CTA and the lab-report cards
   its JS emits. The scan button is modelled on the design's camera scan
   affordance (accent-light fill, solid primary border) rather than the
   legacy dashed box; each report becomes a shadowed card whose result
   rows keep an out-of-range colour cue. Edit/Delete chips scoped to
   #lab-reports-list. No JS and no labs markup structure changed.
   ═══════════════════════════════════════════════════════════════ */

/* Scan Lab Report CTA */
.dc .ocr-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px;border:1.5px solid var(--primary);border-radius:var(--radius);
  background:var(--accent-light);color:var(--primary-dark);
  font-size:16px;font-weight:700;cursor:pointer;margin-bottom:16px;}
.dc .ocr-btn .icon{font-size:22px;}
.dc .ocr-btn:active{background:var(--primary);color:#fff;}

/* Lab report cards */
.dc .lab-card{background:var(--card);border:none;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:12px;}
.dc .lab-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;}
.dc .lab-card-title{font-weight:700;font-size:16px;color:var(--ink);}
.dc .lab-card-date{font-size:12px;color:var(--muted);margin-top:2px;}
.dc .lab-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;}
.dc .lab-name{color:var(--muted);}
.dc .lab-val{font-weight:700;color:var(--ink);}
.dc .lab-val.high{color:var(--alert-dark);}
.dc .lab-val.low{color:var(--blue);}
.dc .lab-val.normal{color:var(--primary-dark);}
.dc .lab-range{font-size:12px;color:var(--muted);margin-left:4px;}

/* Edit/Delete chips (inline font/padding win; shared chip look) */
.dc #lab-reports-list .btn{min-height:0;border:1.5px solid var(--border);
  background:var(--card);color:var(--muted);border-radius:var(--radius-pill);font-weight:600;}
.dc #lab-reports-list .btn:active{background:var(--accent-light);border-color:var(--primary);color:var(--primary-dark);}


/* ═══════════════════════════════════════════════════════════════
   INSIGHTS RE-SKIN BRIDGE (Option B)
   Opts #tab-insights into .dc. The five insight cards inherit the card
   look; these rules cover the pieces its JS emits — the health-score
   ring, the category breakdown's progress bars, the guidance rows and
   the pattern panels. The score ring's colour and each bar's width/colour
   are inline (JS-computed) and left intact. The section <h3> headers are
   inline-styled and need no rule. No JS and no insights markup changed.
   ═══════════════════════════════════════════════════════════════ */

/* Health-score ring */
.dc .score-ring-wrap{position:relative;width:130px;height:130px;margin:0 auto;}
.dc .score-ring-wrap svg{transform:rotate(-90deg);}
.dc .score-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dc .score-ring-value{font-family:var(--font-heading);font-size:40px;line-height:1;color:var(--ink);}
.dc .score-ring-label{font-size:12px;color:var(--muted);}

/* Category breakdown progress bars (width + colour set inline) */
.dc .progress-bar-wrap{background:var(--border);border-radius:var(--radius-pill);height:8px;margin-top:8px;overflow:hidden;}
.dc .progress-bar{height:100%;border-radius:var(--radius-pill);}

/* Guidance rows */
.dc .guidance-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.dc .guidance-item:last-child{margin-bottom:0;}
.dc .guidance-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;font-size:16px;}
.dc .guidance-title{font-weight:700;font-size:15px;color:var(--ink);}
.dc .guidance-text{font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px;}

/* Detected-pattern panels (subtle inset on the white card) */
.dc .pattern-card{padding:14px;background:var(--canvas);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:10px;}
.dc .pattern-card:last-child{margin-bottom:0;}
.dc .pattern-title{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:4px;}
.dc .pattern-text{font-size:13px;color:var(--muted);line-height:1.5;}


/* ═══════════════════════════════════════════════════════════════
   MED LOG RE-SKIN BRIDGE (Option B)
   Opts #tab-history into .dc. The log rows reuse the reading-item /
   reading-actions / btn classes already covered; these rules cover the
   date-group headers and the from/to date-range row. The single Edit
   button per row is class-based (no inline styles) so it renders as a
   normal small secondary button. No JS and no history markup changed.
   ═══════════════════════════════════════════════════════════════ */

.dc .date-group-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:16px 0 8px;}
.dc .date-group-title:first-child{margin-top:0;}

.dc .date-range-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* beat .dc .form-control{width:100%} so each date field keeps a natural width */
.dc .date-range-bar .form-control{width:auto;flex:1;min-width:120px;}


/* ═══════════════════════════════════════════════════════════════
   HELP RE-SKIN BRIDGE (Option B)
   Opts #tab-help into .dc. Help is fully static markup; each section
   becomes a shadowed card, the headings adopt the body font (overriding
   the .dc h3 serif so they read like card titles), and the lists get
   readable body sizing with brand-emphasised UI references (<em>).
   No JS and no help markup changed.
   ═══════════════════════════════════════════════════════════════ */

.dc .help-section{background:var(--card);border:none;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:12px;}
.dc .help-heading{font-family:var(--font-body);font-size:18px;font-weight:700;color:var(--ink);margin-bottom:12px;}
.dc .help-list{font-size:15px;line-height:1.7;padding-left:20px;color:var(--ink);margin:0;}
.dc .help-list li{margin-bottom:8px;}
.dc .help-list li strong{color:var(--ink);font-weight:700;}
.dc .help-list em{font-style:normal;font-weight:600;color:var(--primary-dark);}


/* ═══════════════════════════════════════════════════════════════
   SETTINGS RE-SKIN BRIDGE (Option B)
   Opts the settings modal into .dc (the .dc class goes on #settings-modal,
   which is itself the .modal-overlay). The app's modal/toggle/settings
   classes are mapped onto the design's sheet + switch look; only this
   modal carries .dc, so every other modal keeps its legacy styling until
   the modals pass. Visibility is still driven by the legacy
   .modal-overlay(.open) rules — these rules never touch `display`, so the
   open/close JS keeps working. No JS and no settings markup changed.
   ═══════════════════════════════════════════════════════════════ */

/* Modal shell → design bottom-sheet. General case (any .dc modal): a
   canvas-backed padded sheet that scrolls as one; content sits directly
   in .modal. Settings overrides this below for a pinned footer. These
   rules never set `display`, so the legacy .modal-overlay(.open) show/hide
   JS keeps driving visibility. */
.dc.modal-overlay{background:rgba(28,26,22,.45);align-items:flex-end;}
.dc .modal{background:var(--canvas);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:18px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.dc .modal-handle{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--border);margin:2px auto 14px;}
.dc .modal-title{font-family:var(--font-heading);font-size:22px;color:var(--ink);margin:0 0 14px;}
.dc .modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.dc .modal-header h3{font-family:var(--font-heading);font-size:22px;font-weight:400;color:var(--ink);margin:0;}
.dc .modal-close{background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;}

/* Settings modal only: fixed title + independently scrolling body +
   flex-pinned footer (its content is wrapped in .modal-body/.modal-footer). */
#settings-modal.dc .modal{padding:0;overflow:hidden;display:flex;flex-direction:column;}
#settings-modal.dc .modal-handle{margin:10px auto 0;flex:0 0 auto;}
#settings-modal.dc .modal-title{padding:10px 18px 12px;margin:0;flex:0 0 auto;}
.dc .modal-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px 18px;margin:0;}
.dc .modal-footer{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border);
  background:var(--card);flex:0 0 auto;}
.dc .modal-footer .btn{flex:1;}

/* Full-width action buttons used by the data-entry modals */
.dc .btn-primary-full,.dc .btn-secondary-full{display:block;width:100%;min-height:48px;
  border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;
  border:1.5px solid transparent;margin-top:10px;}
.dc .btn-primary-full{background:var(--primary);color:#fff;}
.dc .btn-primary-full:active{background:var(--primary-dark);}
.dc .btn-secondary-full{background:var(--card);color:var(--ink);border-color:var(--border);}
.dc .btn-secondary-full:active{background:var(--accent-light);border-color:var(--primary);color:var(--primary-dark);}

/* Form chips (arm/position/context single-selects) */
.dc .form-chips{display:flex;gap:8px;flex-wrap:wrap;}
.dc .form-chip{padding:9px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--border);
  background:var(--card);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;min-height:40px;}
.dc .form-chip.selected{background:var(--accent-light);border-color:var(--primary);color:var(--primary-dark);}

/* Mood picker */
.dc .mood-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;
  border:1.5px solid var(--border);border-radius:var(--radius);background:var(--card);cursor:pointer;flex:1;}
.dc .mood-btn.selected{border-color:var(--primary);background:var(--accent-light);}
.dc .mood-emoji{font-size:24px;}
.dc .mood-label{font-size:11px;font-weight:600;color:var(--muted);}

/* App switch/slider (custom-time toggle in log/med modals) — the design
   .dc .switch component expects .track/.thumb which this DOM lacks, so map
   the app's .switch > .slider directly to the toggle look. */
.dc .switch{position:relative;display:inline-block;width:48px;height:28px;flex:0 0 auto;}
.dc .switch input{opacity:0;width:0;height:0;}
.dc .switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--border);
  border-radius:var(--radius-pill);transition:.25s;}
.dc .switch .slider::before{content:'';position:absolute;height:22px;width:22px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.dc .switch input:checked + .slider{background:var(--primary);}
.dc .switch input:checked + .slider::before{transform:translateX(20px);}

/* Welcome / profile-setup overlay steps */
.dc .welcome-steps{display:flex;flex-direction:column;gap:14px;margin:4px 0;}
.dc .welcome-step{display:flex;gap:12px;align-items:flex-start;}
.dc .welcome-step-num{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--primary);
  color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.dc .welcome-step strong{color:var(--ink);}

/* Settings section cards */
.dc .settings-group{background:var(--card);border:none;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:16px;}
.dc .settings-group-title{font-family:var(--font-body);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.dc .settings-group-desc{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.5;}
.dc .settings-field-hint{font-size:12px;color:var(--muted);margin:4px 0 0;}
.dc .settings-preview{background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;font-size:13px;color:var(--muted);line-height:1.7;}
.dc .settings-preview strong{color:var(--ink);}
.dc .scan-credit-badge{color:var(--primary-dark);font-family:var(--font-heading);}

/* Form fields inside the settings modal (shared .form-group) */
.dc .form-group{margin-bottom:14px;}
.dc .form-group label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;}

/* Toggle switches → design switch (48×28 track, primary when on) */
.dc .toggle-switch{position:relative;display:inline-block;width:48px;height:28px;flex:0 0 auto;}
.dc .toggle-switch input{opacity:0;width:0;height:0;}
.dc .toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);
  border-radius:var(--radius-pill);transition:.25s;}
.dc .toggle-slider::before{content:'';position:absolute;height:22px;width:22px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.dc .toggle-switch input:checked + .toggle-slider{background:var(--primary);}
.dc .toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px);}


/* ═══════════════════════════════════════════════════════════════
   OCR ACCESS GATE
   body carries `ocr-off` by default; initOcrGate() (app.js) removes it
   only for allowlisted / globally-enabled users. While off, hide every
   camera-scan entry point and the Scan Credits UI (credits are OCR-only).
   The Cloud Function enforces the same rule authoritatively; this is UX.
   ═══════════════════════════════════════════════════════════════ */
body.ocr-off .ocr-btn{display:none !important;}
body.ocr-off #settings-scan-credits{display:none !important;}
/* Scan/OCR mentions in Help text (spans mid-sentence, or whole list items) */
body.ocr-off .ocr-only{display:none !important;}