/* ========================================
   DOCTR.TECH - DEMO SITE STYLES
   Brand: Deep Teal #0B6B5E, Warm Coral #E8593C
   Font: Inter (app), DM Serif Display (landing)
   ======================================== */

:root {
  --teal: #0B6B5E;
  --teal-dark: #084d44;
  --teal-light: #e8f5f2;
  --coral: #E8593C;
  --coral-light: #fef0ec;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --purple: #7c3aed;
  --purple-light: #f5f3ff;
  --gold: #b45309;
  --gold-light: #fef9ee;
  --bg-dark: #050A09;
  --bg-card: #0d1614;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-dark);
  color: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ======================== APP THEME VARIABLES ======================== */

.app {
  --accent: #0B6B5E;
  --app-bg: #f8fafb;
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-border-light: #f3f4f6;
  --text-primary: #1a1a1a;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --tab-bg: #ffffff;
  --tab-border: #e5e7eb;
  --input-bg: #f8fafb;
  --pill-bg: #ffffff;
  --pill-border: #e5e7eb;
  --tip-bg: #e8f5f2;
  --tip-title: #084d44;
  --tip-body: #0B6B5E;
  --overlay-panel: #ffffff;
  --chat-incoming: #f3f4f6;
  --chat-outgoing: #0B6B5E;
  --toast-bg: #1a1a1a;
  --toast-color: #fff;
}

.app.dark {
  --accent: #2dd4a8;
  --app-bg: #0f1714;
  --card-bg: #18211e;
  --card-border: #263530;
  --card-border-light: #1e2a26;
  --text-primary: #e8ede9;
  --text-secondary: #8a9e96;
  --text-muted: #5c7068;
  --tab-bg: #141d1a;
  --tab-border: #263530;
  --input-bg: #18211e;
  --pill-bg: #18211e;
  --pill-border: #263530;
  --tip-bg: #142620;
  --tip-title: #2dd4a8;
  --tip-body: #5cecc0;
  --overlay-panel: #18211e;
  --chat-incoming: #1e2a26;
  --chat-outgoing: #0B6B5E;
  --toast-bg: #2dd4a8;
  --toast-color: #0f1714;
}

/* ======================== LANDING PAGE ======================== */

.landing { min-height: 100vh; background: var(--bg-dark); position: relative; }
.landing::before { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 50% 30%, rgba(11,107,94,0.08) 0%, transparent 60%); pointer-events: none; }

.landing-nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 48px; position: relative; z-index: 10; }
.landing-nav__logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.landing-nav__links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.landing-nav__links a:hover { color: #fff; }

.hero { display: flex; flex-direction: column; align-items: center; padding: 40px 24px 60px; text-align: center; position: relative; z-index: 2; }
.hero__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.hero__headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 56px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
.hero__headline em { color: var(--teal); font-style: italic; }
.hero__sub { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.55); max-width: 500px; margin-bottom: 20px; font-weight: 300; }

.hero__badges { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center; }
.hero__badge { font-size: 12px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 6px 14px; border-radius: 20px; font-weight: 400; }

.hero__hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.35); animation: pulse-hint 2s ease-in-out infinite; }
@keyframes pulse-hint { 0%, 100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } }

/* iPhone */
.iphone-container { position: relative; margin: 40px auto 0; display: flex; justify-content: center; }
.iphone-glow { position: absolute; width: 500px; height: 500px; background: radial-gradient(ellipse, rgba(11,107,94,0.2) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; filter: blur(40px); }
.iphone { position: relative; z-index: 2; }
.iphone__frame { width: 375px; height: 812px; background: #fff; border-radius: 52px; border: 10px solid #1c1c1e; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #3a3a3c, 0 40px 80px rgba(0,0,0,0.6), 0 0 120px rgba(11,107,94,0.15), inset 0 0 0 1px rgba(255,255,255,0.05); transition: background 0.3s; }
.app.dark ~ .iphone__frame, .app.dark { } /* frame stays dark via border */
.dynamic-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 200; }

.status-bar { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 28px 8px; z-index: 150; color: var(--text-primary); transition: color 0.35s ease; }
.status-bar__time { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.status-bar__icons { display: flex; align-items: center; gap: 7px; }
.status-icon { display: block; }

/* Battery - realistic iOS style */
.battery { display: flex; align-items: center; gap: 1.5px; }
.battery__body { width: 25px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; padding: 2px; opacity: 0.85; position: relative; }
.battery__fill { width: 93%; height: 100%; background: currentColor; border-radius: 1px; opacity: 0.9; }
.battery__cap { width: 2px; height: 5px; background: currentColor; border-radius: 0 1.5px 1.5px 0; opacity: 0.45; }

/* ======================== APP CORE ======================== */

.app { position: absolute; inset: 0; background: var(--app-bg); overflow: hidden; transition: background 0.35s ease; }

.screen { position: absolute; inset: 0; bottom: 80px; top: 54px; opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; overflow: hidden; }
.screen.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.screen__scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px; scrollbar-width: none; }
.screen__scroll::-webkit-scrollbar { display: none; }
.screen__spacer { height: 40px; }
.screen-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.02em; }
.screen-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.section-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 12px; }

/* ===== HOME ===== */
.home-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; padding-top: 4px; }
.home-header__aloha { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.home-header__location { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.home-header__right { display: flex; align-items: center; gap: 10px; }
.home-header__avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; cursor: pointer; transition: transform 0.15s; border: 2px solid var(--card-border); }
.home-header__avatar:active { transform: scale(0.95); }

.avatar-img, .avatar-img-lg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Theme Toggle */
/* Theme toggle: dark circle in light mode, light circle in dark mode */
.theme-toggle { background: #1a1a1a; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #f5f5f5; transition: all 0.35s ease; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.theme-toggle:active { transform: scale(0.88); }
.theme-toggle .icon-moon { display: none; }
.app.dark .theme-toggle .icon-sun { display: none; }
.app.dark .theme-toggle .icon-moon { display: block; }
.app.dark .theme-toggle { background: #e8ede9; color: #0f1714; box-shadow: 0 2px 8px rgba(255,255,255,0.1); }

/* Welcome Banner */
.welcome-banner { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 16px; height: 120px; }
.welcome-banner__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.welcome-banner__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.welcome-banner__text { font-size: 16px; font-weight: 700; color: #fff; }
.welcome-banner__sub { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }

/* Quick Actions */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quick-action span { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.quick-action__icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; }
.quick-action:active .quick-action__icon { transform: scale(0.92); }
.qa-book { background: var(--teal); }
.qa-nav { background: #2563eb; }
.qa-pay { background: #7c3aed; }
.qa-crisis { background: var(--coral); }

/* Appointment Card */
.appointment-card { display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); border-radius: 16px; padding: 14px; border: 1px solid var(--card-border); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.appointment-card:active { transform: scale(0.98); }
.appointment-card__left { display: flex; gap: 12px; align-items: center; }
.appointment-card__photo { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.appointment-card__doctor { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.appointment-card__type { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.appointment-card__time { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--accent); font-weight: 500; margin-top: 4px; }
.appointment-card__badge { font-size: 11px; font-weight: 600; color: var(--coral); background: var(--coral-light); padding: 4px 10px; border-radius: 8px; flex-shrink: 0; }
.app.dark .appointment-card__badge { background: rgba(232,89,60,0.15); }

/* Events Scroll */
.events-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.events-scroll::-webkit-scrollbar { display: none; }
.event-card-sm { min-width: 155px; cursor: pointer; flex-shrink: 0; transition: transform 0.15s; }
.event-card-sm:active { transform: scale(0.96); }
.event-card-sm__img { height: 95px; border-radius: 12px; position: relative; overflow: hidden; }
.event-card-sm__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card-sm__date { position: absolute; bottom: 8px; left: 8px; font-size: 11px; font-weight: 600; color: white; background: rgba(0,0,0,0.4); padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(4px); }
.event-card-sm__title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 8px; line-height: 1.3; }
.event-card-sm__loc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* Tip */
.tip-card { display: flex; gap: 14px; background: var(--tip-bg); border-radius: 16px; padding: 16px; align-items: flex-start; }
.tip-card__icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.tip-card__title { font-size: 14px; font-weight: 600; color: var(--tip-title); }
.tip-card__body { font-size: 12px; color: var(--tip-body); line-height: 1.5; margin-top: 2px; }

/* ===== PROVIDERS ===== */
.search-bar { display: flex; align-items: center; gap: 10px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; margin: 16px 0 12px; }
.search-bar input { border: none; outline: none; font-size: 14px; font-family: inherit; color: var(--text-primary); width: 100%; background: transparent; }
.search-bar input::placeholder { color: var(--text-muted); }
.filter-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.filter-pills::-webkit-scrollbar { display: none; }
.pill { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--pill-border); background: var(--pill-bg); font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.pill.active { background: var(--accent); color: white; border-color: var(--accent); }

.provider-card { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border-radius: 16px; padding: 14px; border: 1px solid var(--card-border); margin-bottom: 10px; cursor: pointer; transition: transform 0.15s; }
.provider-card:active { transform: scale(0.98); }
.provider-card__photo { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.provider-card__info { flex: 1; min-width: 0; }
.provider-card__name { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.provider-card__spec { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.provider-card__meta { display: flex; gap: 10px; margin-top: 4px; }
.provider-card__rating { font-size: 12px; color: var(--gold); font-weight: 500; }
.provider-card__avail { font-size: 12px; color: var(--accent); font-weight: 500; }
.provider-card__arrow { font-size: 22px; color: var(--text-muted); flex-shrink: 0; }

/* ===== BOOKING ===== */
.booking-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-top: 4px; }
.back-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; -webkit-tap-highlight-color: transparent; }
.booking-header__title { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.booking-step { display: none; }
.booking-step.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.booking-provider-mini { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--card-border); }
.booking-provider-mini__photo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.booking-provider-mini__name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.booking-provider-mini__spec { font-size: 12px; color: var(--text-secondary); }
.booking-label { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.booking-options { display: flex; flex-direction: column; gap: 10px; }
.booking-option { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 2px solid var(--card-border); border-radius: 14px; padding: 16px; cursor: pointer; font-family: inherit; text-align: left; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.booking-option:active, .booking-option.selected { border-color: var(--accent); background: var(--tip-bg); }
.booking-option__label { font-size: 14px; font-weight: 600; color: var(--text-primary); display: block; }
.booking-option__sub { font-size: 12px; color: var(--text-secondary); display: block; margin-top: 1px; }

.date-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.date-item { text-align: center; padding: 12px 8px; border-radius: 12px; border: 2px solid var(--card-border); background: var(--card-bg); font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.15s; }
.date-item span { display: block; font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.date-item.selected { border-color: var(--accent); background: var(--tip-bg); }
.date-item.disabled { opacity: 0.4; pointer-events: none; }
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.time-slot { padding: 10px; border-radius: 10px; border: 1.5px solid var(--card-border); background: var(--card-bg); font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; font-family: inherit; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.time-slot.selected { border-color: var(--accent); background: var(--accent); color: white; }
.time-slot.taken { opacity: 0.3; pointer-events: none; text-decoration: line-through; }

.confirm-card { background: var(--card-bg); border-radius: 14px; border: 1px solid var(--card-border); overflow: hidden; margin-bottom: 16px; }
.confirm-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--card-border-light); }
.confirm-row:last-child { border-bottom: none; }
.confirm-row span:first-child { font-size: 13px; color: var(--text-secondary); }
.confirm-row strong { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cost-label { color: var(--accent) !important; }
.insurance-tag { font-size: 10px; background: var(--tip-bg); color: var(--accent); padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; }
.booking-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 12px; line-height: 1.5; }

.success-screen { text-align: center; padding: 20px 0; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: white; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes scaleIn { from { transform: scale(0); } to { transform: scale(1); } }
.success-screen h3 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.success-screen > p { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }

/* Buttons */
.btn-primary { width: 100%; padding: 14px; border-radius: 12px; border: none; background: var(--accent); color: white; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.btn-primary:active { transform: scale(0.98); opacity: 0.85; }
.btn-primary:disabled { opacity: 0.4; pointer-events: none; }
.btn-secondary { width: 100%; padding: 14px; border-radius: 12px; border: 1.5px solid var(--card-border); background: var(--card-bg); color: var(--text-primary); font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; margin-top: 8px; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.btn-secondary:active { transform: scale(0.98); }
.btn-outline { padding: 8px 20px; border-radius: 10px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.btn-outline:active { background: var(--accent); color: white; }
.btn-primary-sm { padding: 10px 20px; border-radius: 10px; border: none; background: var(--accent); color: white; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.btn-primary-sm:active { transform: scale(0.97); }

/* ===== EVENTS ===== */
.event-card-lg { background: var(--card-bg); border-radius: 16px; border: 1px solid var(--card-border); overflow: hidden; margin-bottom: 14px; }
.event-card-lg__banner { height: 110px; position: relative; overflow: hidden; }
.event-card-lg__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card-lg__badge { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 600; color: white; background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 8px; backdrop-filter: blur(4px); }
.event-card-lg__body { padding: 16px; }
.event-card-lg__date { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.event-card-lg__title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.event-card-lg__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.event-card-lg__loc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }

/* ===== MARKETPLACE ===== */
.market-card { background: var(--card-bg); border-radius: 16px; border: 1px solid var(--card-border); padding: 18px; margin-bottom: 12px; }
.market-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.market-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.teal-light { background: var(--teal-light); } .coral-light { background: var(--coral-light); } .blue-light { background: var(--blue-light); } .purple-light { background: var(--purple-light); } .gold-light { background: var(--gold-light); }
.app.dark .teal-light { background: rgba(11,107,94,0.2); } .app.dark .coral-light { background: rgba(232,89,60,0.15); } .app.dark .blue-light { background: rgba(37,99,235,0.15); } .app.dark .purple-light { background: rgba(124,58,237,0.15); } .app.dark .gold-light { background: rgba(180,83,9,0.15); }
.market-card__price { font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.market-card__price span { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.market-card__title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.market-card__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }

/* ===== PROFILE ===== */
.profile-header { text-align: center; padding: 16px 0 8px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; border: 3px solid var(--accent); }
.profile-name { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.profile-meta { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.profile-insurance { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--tip-bg); display: inline-block; padding: 4px 12px; border-radius: 8px; margin-top: 8px; }
.records-list { display: flex; flex-direction: column; gap: 8px; }
.record-item { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border-radius: 12px; padding: 14px; border: 1px solid var(--card-border); }
.record-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.record-dot.coral { background: var(--coral); } .record-dot.teal { background: var(--teal); }
.record-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.record-sub { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.med-icon { font-size: 20px; flex-shrink: 0; width: 32px; text-align: center; }
.program-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.date-badge { width: 44px; height: 44px; border-radius: 10px; background: var(--tip-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1; }
.date-badge span { font-size: 9px; font-weight: 600; letter-spacing: 0.05em; margin-top: 1px; }

.settings-list { display: flex; flex-direction: column; background: var(--card-bg); border-radius: 14px; border: 1px solid var(--card-border); overflow: hidden; }
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--card-border-light); font-size: 14px; color: var(--text-primary); }
.setting-item:last-child { border-bottom: none; }
.setting-value { font-size: 14px; color: var(--text-secondary); }
.font-toggle { display: flex; gap: 4px; }
.font-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--card-bg); font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.font-btn.active { background: var(--accent); color: white; border-color: var(--accent); font-size: 14px; }
.font-btn.large { font-size: 17px; }
.toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--card-border); padding: 3px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.toggle__knob { width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.2s; }
.toggle.active { background: var(--accent); }
.toggle.active .toggle__knob { transform: translateX(18px); }

/* ===== NAVIGATOR ===== */
.overlay { position: absolute; inset: 0; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.overlay.open { opacity: 1; pointer-events: auto; }
.overlay__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.overlay__panel { position: absolute; bottom: 0; left: 0; right: 0; background: var(--overlay-panel); border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.overlay.open .overlay__panel { transform: translateY(0); }

.navigator-panel { height: 85%; display: flex; flex-direction: column; }
.navigator-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 14px; border-bottom: 1px solid var(--card-border-light); }
.navigator-header__info { display: flex; align-items: center; gap: 12px; }
.navigator-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.navigator-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.navigator-role { font-size: 12px; color: var(--text-secondary); }
.close-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--card-border-light); font-size: 16px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.chat-messages::-webkit-scrollbar { display: none; }
.chat-bubble { max-width: 82%; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.45; }
.chat-bubble.incoming { background: var(--chat-incoming); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 6px; }
.chat-bubble.outgoing { background: var(--chat-outgoing); color: white; align-self: flex-end; border-bottom-right-radius: 6px; }
.chat-time { display: block; font-size: 10px; margin-top: 4px; opacity: 0.5; }
.chat-input { display: flex; gap: 8px; padding: 12px 20px 28px; border-top: 1px solid var(--card-border-light); background: var(--overlay-panel); }
.chat-input input { flex: 1; padding: 10px 16px; border: 1px solid var(--card-border); border-radius: 20px; font-size: 14px; font-family: inherit; outline: none; background: var(--input-bg); color: var(--text-primary); }
.chat-send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s; }
.chat-send:active { transform: scale(0.92); }

/* ===== CRISIS ===== */
.crisis-panel { max-height: 80%; padding: 24px 20px 40px; overflow-y: auto; }
.crisis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.crisis-header h3 { font-size: 20px; font-weight: 700; color: var(--coral); }
.crisis-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.crisis-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--input-bg); border-radius: 14px; margin-bottom: 10px; text-decoration: none; cursor: pointer; transition: transform 0.15s; }
.crisis-item:active { transform: scale(0.98); }
.crisis-item__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crisis-red { background: var(--coral); } .crisis-orange { background: #f59e0b; } .crisis-teal { background: var(--teal); }
.crisis-item__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.crisis-item__action { font-size: 12px; color: var(--accent); font-weight: 500; margin-top: 2px; }
.crisis-footer { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 16px; }

/* ===== FABs ===== */
.sos-fab { position: absolute; bottom: 94px; right: 16px; width: 52px; height: 52px; border-radius: 26px; border: none; background: var(--coral); color: white; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; cursor: pointer; z-index: 100; box-shadow: 0 4px 16px rgba(232,89,60,0.4); transition: transform 0.15s; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.sos-fab:active { transform: scale(0.9); }


/* ===== TAB BAR ===== */
.tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: var(--tab-bg); border-top: 1px solid var(--tab-border); display: flex; align-items: flex-start; padding-top: 8px; z-index: 100; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 4px 0; -webkit-tap-highlight-color: transparent; color: var(--text-muted); transition: color 0.15s; }
.tab span { font-size: 10px; font-weight: 500; font-family: inherit; }
.tab.active { color: var(--accent); }

/* ===== TOAST ===== */
.toast { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--toast-bg); color: var(--toast-color); padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 500; opacity: 0; transition: all 0.3s ease; z-index: 500; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ======================== STATS BAR ======================== */
.stats-bar { display: flex; justify-content: center; gap: 48px; padding: 60px 24px 48px; position: relative; z-index: 2; flex-wrap: wrap; }
.stat { text-align: center; }
.stat__number { display: block; font-size: 32px; font-weight: 700; color: var(--teal); letter-spacing: -0.02em; line-height: 1; }
.stat__label { display: block; font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* ======================== FEATURES ======================== */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; padding: 40px 48px 80px; position: relative; z-index: 2; }
.feature { text-align: center; padding: 24px 16px; }
.feature__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(11,107,94,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.feature h3 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.feature p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.45); font-weight: 300; }

/* ======================== FOOTER ======================== */
.landing-footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 40px 48px; position: relative; z-index: 2; }
.landing-footer__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.landing-footer__brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.landing-footer__tagline { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 16px; font-style: italic; }
.landing-footer__links { display: flex; justify-content: center; gap: 8px; font-size: 12px; margin-bottom: 12px; }
.landing-footer__links a { color: var(--teal); text-decoration: none; }
.landing-footer__links span { color: rgba(255,255,255,0.2); }
.landing-footer__legal { font-size: 11px; color: rgba(255,255,255,0.25); }

/* ======================== RESPONSIVE ======================== */
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); padding: 40px 24px 60px; } .stats-bar { gap: 32px; } }
@media (max-width: 600px) {
  .landing-nav { padding: 16px 20px; } .hero { padding: 24px 20px 40px; } .hero__headline { font-size: 40px; } .hero__sub { font-size: 14px; }
  .stats-bar { gap: 20px; padding: 40px 20px; } .stat__number { font-size: 24px; } .stat__label { font-size: 11px; }
  .features { grid-template-columns: 1fr; padding: 24px 20px 40px; gap: 8px; } .feature { padding: 16px; }
  .landing-footer { padding: 32px 20px; }
  .iphone__frame { width: 320px; height: 693px; border-radius: 44px; border-width: 8px; }
  .dynamic-island { width: 100px; height: 28px; top: 8px; }
  .status-bar { height: 46px; padding: 0 24px 6px; } .status-bar__time { font-size: 13px; }
  .tab-bar { height: 70px; } .screen { bottom: 70px; top: 46px; }
  .sos-fab { bottom: 82px; width: 46px; height: 46px; font-size: 11px; right: 12px; }
  
}
@media (max-width: 400px) { .iphone__frame { width: 290px; height: 628px; border-radius: 40px; } }



/* Leilani Avatar */
.leilani-avatar { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #0B6B5E 0%, #0d8a7a 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.leilani-avatar--lg { width: 72px; height: 72px; font-size: 24px; font-weight: 700; margin: 0 auto; }
.profile-avatar { width: 72px; height: 72px; margin: 0 auto 12px; }

/* No Results */
.no-results { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 14px; }

/* Footer Disclaimer */
.landing-footer__disclaimer { font-size: 11px; color: rgba(255,255,255,0.3); max-width: 600px; margin: 12px auto; line-height: 1.5; }
.landing-footer__links a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.landing-footer__links a:hover { color: var(--teal); }





/* ======================== INSURANCE SELECTOR ======================== */

.insurance-select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.insurance-select:focus {
  outline: none;
  border-color: var(--accent);
}

.app.dark .insurance-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a9e96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.insurance-detail-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 10px;
}

.insurance-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--card-border-light);
  font-size: 13px;
}

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

.insurance-detail-row span:first-child {
  color: var(--text-secondary);
}

.insurance-detail-row strong {
  color: var(--text-primary);
  font-weight: 600;
}

.insurance-selector {
  margin-bottom: 8px;
}

.profile-insurance-section {
  margin-top: 4px;
  margin-bottom: 8px;
}

.profile-insurance-section .insurance-select {
  margin-top: 10px;
}

.profile-insurance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ======================== IMAGE LOADING SHIMMER ======================== */

.img-loading {
  background: linear-gradient(90deg, var(--card-border) 25%, var(--card-border-light) 50%, var(--card-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  min-height: 40px;
}

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

/* Fade in images when loaded */
.welcome-banner__img,
.appointment-card__photo,
.provider-card__photo,
.event-card-sm__img img,
.event-card-lg__banner img {
  transition: opacity 0.3s ease;
}

/* ======================== PROVIDER DETAIL PANEL ======================== */

.provider-detail-panel {
  max-height: 85%;
  padding: 0 0 28px;
  overflow-y: auto;
}

.provider-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--card-border-light);
}

.provider-detail__photo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

.provider-detail__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.provider-detail__spec {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.provider-detail__rating {
  font-size: 13px;
  color: #b45309;
  font-weight: 500;
  margin-top: 4px;
}

.provider-detail-header .close-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.provider-detail__body {
  padding: 16px 20px;
}

.pd-section {
  margin-bottom: 16px;
}

.pd-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.pd-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

.pd-yes {
  color: var(--accent);
  font-weight: 600;
}

.provider-detail-panel .btn-primary {
  margin: 0 20px;
  width: calc(100% - 40px);
}

/* ======================== CONFETTI ======================== */

.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  top: -10px;
  border-radius: 2px;
  animation: confetti-fall 2.5s ease-out forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(250px) rotate(720deg); opacity: 0; }
}

/* ======================== SOCIAL PROOF ======================== */

.social-proof {
  text-align: center;
  padding: 32px 24px 40px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.social-proof__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 20px;
}

.social-proof__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.social-proof__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.social-proof__name {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.01em;
}

.social-proof__desc {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

.social-proof__divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.1);
}

.social-proof__note {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  margin-top: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ======================== VERSION INDICATOR ======================== */

.version {
  display: inline-block;
  font-size: 10px;
  color: rgba(255,255,255,0.15);
  margin-left: 4px;
}

@media (max-width: 600px) {
  .social-proof__logos { gap: 20px; }
  .social-proof__name { font-size: 16px; }
  .social-proof__divider { height: 28px; }
}



/* ======================== NOTIFICATION BELL ======================== */

.icon-btn { background: var(--card-bg); border: 1px solid var(--card-border); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; -webkit-tap-highlight-color: transparent; position: relative; }
.icon-btn:active { transform: scale(0.9); }
.notif-badge { position: absolute; top: -4px; right: -4px; background: var(--coral); color: white; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--app-bg); }

/* Notification Panel */
.notif-panel { max-height: 85%; padding: 0; overflow-y: auto; }
.notif-header { display: flex; align-items: center; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--card-border-light); }
.notif-header h3 { flex: 1; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.notif-mark { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; padding: 4px 8px; }
.notif-list { padding: 8px 0; }
.notif-item { display: flex; gap: 12px; padding: 14px 20px; align-items: flex-start; transition: background 0.15s; }
.notif-item.unread { background: var(--tip-bg); }
.notif-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-appt { background: var(--teal); } .notif-refill { background: var(--coral); } .notif-results { background: #2563eb; } .notif-event { background: #7c3aed; } .notif-goal { background: #0B6B5E; } .notif-nav { background: #2563eb; }
.notif-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.notif-body { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ======================== POST-VISIT SUMMARY ======================== */

.post-visit-card { display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 14px; cursor: pointer; transition: transform 0.15s; }
.post-visit-card:active { transform: scale(0.98); }
.post-visit__left { display: flex; gap: 12px; align-items: center; }
.post-visit__photo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.post-visit__provider { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.post-visit__date { font-size: 12px; color: var(--text-secondary); }
.post-visit__note { font-size: 12px; color: var(--accent); font-weight: 500; margin-top: 2px; }
.post-visit__arrow { font-size: 22px; color: var(--text-muted); }

/* Visit Summary Panel */
.visit-summary-panel { max-height: 85%; padding: 0 0 28px; overflow-y: auto; }
.visit-summary-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 14px; border-bottom: 1px solid var(--card-border-light); }
.visit-summary-header h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.visit-summary-provider { display: flex; gap: 12px; align-items: center; padding: 16px 20px; }
.visit-summary__photo { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.visit-summary__name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.visit-summary__date { font-size: 13px; color: var(--text-secondary); }
.visit-summary__body { padding: 0 20px; }
.vs-section { margin-bottom: 20px; }
.vs-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.vs-text { font-size: 14px; color: var(--text-primary); line-height: 1.6; }
.vs-steps p { font-size: 14px; color: var(--text-primary); line-height: 1.6; padding: 3px 0; }
.visit-summary-panel .btn-primary { margin: 0 20px; width: calc(100% - 40px); }

/* ======================== HEALTH GOALS ======================== */

.goals-summary-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: transform 0.15s; }
.goals-summary-card:active { transform: scale(0.98); }
.goals-ring-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; cursor: pointer; }
.goals-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.goal-ring-progress { transition: stroke-dashoffset 0.6s ease; }
.goals-ring-text { flex: 1; }
.goals-ring-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.goals-ring-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* Goals Detail */
.goals-panel { max-height: 85%; padding: 0 0 28px; overflow-y: auto; }
.goals-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 14px; border-bottom: 1px solid var(--card-border-light); }
.goals-header h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.goals-subtitle { font-size: 13px; color: var(--text-secondary); padding: 12px 20px 0; }
.goals-detail-list { padding: 8px 0; }
.goal-item { display: flex; gap: 12px; align-items: center; padding: 14px 20px; }
.goal-item__icon { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.goal-item__info { flex: 1; min-width: 0; }
.goal-item__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.goal-item__bar-wrap { height: 6px; background: var(--card-border); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.goal-item__bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.goal-item__sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.goal-streak { color: var(--accent); font-weight: 600; }
.goal-check-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--accent); background: transparent; color: var(--accent); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; font-family: inherit; }
.goal-check-btn:active { background: var(--accent); color: white; }
.goal-check-btn:disabled { opacity: 0.3; border-color: var(--card-border); color: var(--card-border); }

/* ======================== FAMILY SWITCHER ======================== */

.family-switcher { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; margin-bottom: 12px; cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 500; transition: transform 0.15s; }
.family-switcher:active { transform: scale(0.98); }
.family-switcher__arrow { margin-left: auto; font-size: 18px; color: var(--text-muted); }
.family-panel { max-height: 70%; padding: 0 0 20px; }
.family-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 14px; border-bottom: 1px solid var(--card-border-light); }
.family-header h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.family-list { padding: 8px 0; }
.family-member { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; transition: background 0.15s; }
.family-member:active { background: var(--tip-bg); }
.family-member__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid transparent; }
.family-member.active .family-member__avatar { border-color: var(--accent); }
.family-member__name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.family-member__meta { font-size: 12px; color: var(--text-secondary); }
.family-member__check { width: 24px; height: 24px; margin-left: auto; color: var(--accent); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.family-panel .btn-secondary { margin: 12px 20px 0; width: calc(100% - 40px); }

/* ======================== RPM VITALS ======================== */

.vitals-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; cursor: pointer; }
.vitals-summary:active { opacity: 0.8; }
.vital-mini { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; text-align: center; }
.vital-mini__label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; display: block; }
.vital-mini__val { font-size: 18px; font-weight: 700; color: var(--text-primary); display: block; margin: 4px 0; }
.vital-mini__val small { font-size: 10px; font-weight: 400; color: var(--text-secondary); }
.vital-mini__trend { font-size: 10px; font-weight: 600; display: block; }
.trend-good { color: #0B6B5E; } .trend-stable { color: #b45309; }

.vitals-panel { max-height: 90%; padding: 0 0 28px; overflow-y: auto; }
.vitals-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 8px; }
.vitals-header h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.vitals-subtitle { font-size: 13px; color: var(--text-secondary); padding: 0 20px 12px; }
.vitals-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; margin: 0 20px 12px; }
.vitals-card__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.vitals-card__current { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 4px 0; }
.vitals-card__current small { font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.vitals-card__target { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.vitals-chart { width: 100%; height: 80px; }
.sparkline-svg { width: 100%; height: 100%; }
.a1c-chart { width: 100%; height: 120px; }
.a1c-bars { display: flex; gap: 16px; justify-content: center; align-items: flex-end; height: 100%; padding: 8px 0; }
.a1c-bar-wrap { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.a1c-bar { width: 32px; border-radius: 6px 6px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; min-height: 20px; transition: height 0.5s ease; }
.a1c-bar span { font-size: 12px; font-weight: 700; color: white; }
.a1c-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ======================== MEDICATION REFILL TRACKER ======================== */

.med-refill-item { flex-wrap: wrap; }
.med-refill-info { flex: 1; min-width: 0; }
.refill-bar-wrap { height: 4px; background: var(--card-border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.refill-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s; }
.refill-bar.refill-urgent { background: var(--coral); }
.refill-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.refill-urgent-text { color: var(--coral); font-weight: 600; }
.refill-btn { padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; flex-shrink: 0; align-self: center; transition: all 0.15s; }
.refill-btn:active { background: var(--accent); color: white; }

/* ======================== PHARMACY ======================== */

.pharmacy-cta { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; cursor: pointer; transition: transform 0.15s; }
.pharmacy-cta:active { transform: scale(0.98); }
.pharmacy-cta__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--tip-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pharmacy-cta__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pharmacy-cta__sub { font-size: 12px; color: var(--text-secondary); }

.pharmacy-panel { max-height: 85%; padding: 0 0 28px; overflow-y: auto; }
.pharmacy-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 8px; }
.pharmacy-header h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.pharmacy-subtitle { font-size: 13px; color: var(--text-secondary); padding: 0 20px 16px; }
.pharmacy-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; margin: 0 20px 12px; }
.pharmacy-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pharmacy-card__name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.pharmacy-card__dist { font-size: 12px; color: var(--accent); font-weight: 600; }
.pharmacy-card__address { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.pharmacy-prices { display: flex; gap: 8px; margin-bottom: 8px; }
.pharmacy-price { flex: 1; background: var(--tip-bg); border-radius: 8px; padding: 8px; text-align: center; }
.pharmacy-price span { font-size: 11px; color: var(--text-secondary); display: block; }
.pharmacy-price strong { font-size: 16px; font-weight: 700; color: var(--accent); display: block; margin-top: 2px; }
.pharmacy-card__hours { font-size: 11px; color: var(--text-muted); }

/* ======================== COMMUNITY FEED ======================== */

.feed-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.feed-card__header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.feed-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: white; flex-shrink: 0; }
.feed-avatar--org { background: var(--teal); } .feed-avatar--nav { background: #2563eb; }
.feed-card__author { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.feed-card__time { font-size: 11px; color: var(--text-muted); }
.feed-card__body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ======================== TELEHEALTH WAITING ROOM ======================== */

.waiting-room-panel { height: 90%; display: flex; flex-direction: column; justify-content: center; }
.waiting-room__content { text-align: center; padding: 32px 24px; }
.waiting-room__icon { margin-bottom: 20px; animation: pulse-wait 2s ease-in-out infinite; }
@keyframes pulse-wait { 0%,100%{opacity:0.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
.waiting-room__content h3 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.waiting-room__status { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; transition: color 0.3s; }
.waiting-room__status.almost { color: var(--accent); font-weight: 600; }
.waiting-room__timer { font-size: 48px; font-weight: 200; color: var(--text-primary); letter-spacing: 2px; margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.waiting-room__pulse { width: 60px; height: 4px; background: var(--accent); border-radius: 2px; margin: 0 auto 28px; animation: pulse-bar 1.5s ease-in-out infinite; }
@keyframes pulse-bar { 0%,100%{width:60px;opacity:0.5} 50%{width:120px;opacity:1} }
.waiting-tip__title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.waiting-room__tips p { font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.waiting-room-panel .btn-secondary { margin-top: 24px; width: auto; display: inline-block; padding: 10px 24px; }







/* ======================== COVERAGE NAVIGATOR ======================== */

/* Home card */
.coverage-home-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #0B6B5E 0%, #0d8a7a 100%); border-radius: 16px; padding: 16px; cursor: pointer; transition: transform 0.15s; margin-bottom: 16px; }
.coverage-home-card:active { transform: scale(0.98); }
.coverage-home__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.coverage-home__text { flex: 1; }
.coverage-home__title { font-size: 15px; font-weight: 600; color: white; }
.coverage-home__sub { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.4; margin-top: 2px; }
.coverage-home__arrow { font-size: 22px; color: rgba(255,255,255,0.6); flex-shrink: 0; }

/* Self-pay prompt */
.selfpay-prompt { display: flex; align-items: center; gap: 8px; background: var(--tip-bg); border: 1px dashed var(--accent); border-radius: 10px; padding: 10px 14px; margin-top: 10px; cursor: pointer; transition: transform 0.15s; }
.selfpay-prompt:active { transform: scale(0.98); }
.selfpay-prompt span { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.selfpay-prompt strong { color: var(--accent); }

/* Coverage Panel */
.coverage-panel { max-height: 90%; padding: 0 0 28px; overflow-y: auto; }
.coverage-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 12px; }
.coverage-header h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); }

/* Progress bar */
.cov-progress { height: 4px; background: var(--card-border); border-radius: 2px; margin: 0 20px 20px; overflow: hidden; }
.cov-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; }

/* Steps */
.cov-step { padding: 0 20px; animation: fadeIn 0.3s ease; }
.cov-question { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.35; }
.cov-hint { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.cov-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cov-option { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 2px solid var(--card-border); border-radius: 14px; padding: 16px; cursor: pointer; font-family: inherit; text-align: left; transition: all 0.2s; -webkit-tap-highlight-color: transparent; }
.cov-option:active, .cov-option.selected { border-color: var(--accent); background: var(--tip-bg); transform: scale(0.98); }
.cov-option__icon { font-size: 28px; flex-shrink: 0; }
.cov-option__label { font-size: 15px; font-weight: 600; color: var(--text-primary); display: block; }
.cov-option__sub { font-size: 12px; color: var(--text-secondary); display: block; margin-top: 2px; }

/* Result */
.cov-result-banner { text-align: center; padding: 24px 0 16px; }
.cov-result-check { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: white; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.cov-result-headline { font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; }
.cov-result-program { font-size: 22px; font-weight: 700; color: var(--accent); }
.cov-result-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; text-align: center; padding: 0 8px; }
.cov-result-details { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
.cov-result-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--card-border-light); font-size: 13px; }
.cov-result-row:last-child { border-bottom: none; }
.cov-result-row span { color: var(--text-secondary); }
.cov-result-row strong { color: var(--text-primary); font-weight: 600; }
.cov-step .btn-primary { width: 100%; margin-top: 8px; }

/* Document checklist */
.cov-docs { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; }
.cov-doc-item { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px; cursor: pointer; font-size: 14px; color: var(--text-primary); transition: all 0.15s; }
.cov-doc-item:has(input:checked) { border-color: var(--accent); background: var(--tip-bg); }
.cov-checkbox { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--card-border); appearance: none; -webkit-appearance: none; cursor: pointer; flex-shrink: 0; position: relative; transition: all 0.2s; background: var(--card-bg); }
.cov-checkbox:checked { background: var(--accent); border-color: var(--accent); }
.cov-checkbox:checked::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 700; }

/* Enroll box */
.cov-enroll-box { background: var(--tip-bg); border-radius: 16px; padding: 20px; text-align: center; }
.cov-enroll-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.cov-enroll-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.cov-enroll-box .btn-primary { width: 100%; }
.cov-enroll-box .btn-secondary { width: 100%; }

/* ======================== ADMIN MODE ======================== */

.admin-toggle-landing { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); padding: 8px 20px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.admin-toggle-landing:hover { background: rgba(255,255,255,0.15); color: white; }
.hero__mode-toggle { margin-bottom: 16px; }

.admin-header { padding: 4px 0 16px; }
.admin-header__title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.admin-header__sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.admin-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.admin-stat-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; text-align: center; }
.admin-stat-card.accent { background: var(--tip-bg); border-color: var(--accent); }
.admin-stat-card.warn { border-color: var(--coral); }
.admin-stat__num { display: block; font-size: 24px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.admin-stat-card.accent .admin-stat__num { color: var(--accent); }
.admin-stat-card.warn .admin-stat__num { color: var(--coral); }
.admin-stat__label { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; font-weight: 500; }

/* Queue */
.admin-queue { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.queue-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--card-border-light); }
.queue-item:last-child { border-bottom: none; }
.queue-item.active { background: var(--tip-bg); }
.queue-time { font-size: 13px; font-weight: 600; color: var(--text-muted); width: 36px; flex-shrink: 0; }
.queue-info { flex: 1; }
.queue-patient { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.queue-type { font-size: 12px; color: var(--text-secondary); }
.queue-status { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.queue-status.done { background: var(--card-border-light); color: var(--text-muted); }
.queue-status.current { background: var(--accent); color: white; }
.queue-status.upcoming { background: var(--tip-bg); color: var(--accent); }

/* Alerts */
.admin-alerts { display: flex; flex-direction: column; gap: 6px; }
.alert-item { display: flex; align-items: center; gap: 10px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.alert-high .alert-dot { background: var(--coral); box-shadow: 0 0 6px rgba(232,89,60,0.4); }
.alert-med .alert-dot { background: #f59e0b; }
.alert-low .alert-dot { background: var(--accent); }
.alert-patient { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.alert-msg { font-size: 12px; color: var(--text-secondary); }
.alert-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; margin-left: auto; }

/* Performance rows */
.admin-perf-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--card-border-light); font-size: 13px; }
.admin-perf-row span { color: var(--text-secondary); }
.admin-perf-row strong { color: var(--text-primary); font-weight: 600; }

/* County bars */
.county-bars { display: flex; flex-direction: column; gap: 10px; }
.county-bar { display: flex; align-items: center; gap: 10px; }
.county-name { font-size: 13px; font-weight: 500; color: var(--text-secondary); width: 50px; flex-shrink: 0; }
.county-bar-track { flex: 1; height: 8px; background: var(--card-border); border-radius: 4px; overflow: hidden; }
.county-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; animation: barFill 0.8s ease both; }
.county-count { font-size: 13px; font-weight: 600; color: var(--text-primary); width: 36px; text-align: right; flex-shrink: 0; }

/* Condition bars */
.admin-bar-item { margin-bottom: 10px; }
.admin-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.admin-bar-label span:first-child { color: var(--text-primary); font-weight: 500; }
.admin-bar-label span:last-child { color: var(--text-muted); }
.admin-bar-track { height: 6px; background: var(--card-border); border-radius: 3px; overflow: hidden; }
.admin-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; animation: barFill 0.6s ease both; }

/* Age grid */
.age-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.age-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; text-align: center; }
.age-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.age-count { display: block; font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 4px 0; }
.age-pct { display: block; font-size: 11px; color: var(--text-muted); }

/* Revenue chart */
.revenue-chart-wrap { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 12px 20px; height: 140px; }
.revenue-chart-wrap .sparkline-svg { width: 100%; height: 100%; }

/* Revenue streams */
.revenue-streams { display: flex; flex-direction: column; gap: 12px; }
.stream-item { }
.stream-bar-wrap { height: 8px; background: var(--card-border); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.stream-bar { height: 100%; border-radius: 4px; animation: barFill 0.8s ease both; }
.stream-info { display: flex; justify-content: space-between; }
.stream-name { font-size: 12px; color: var(--text-secondary); }
.stream-amt { font-size: 12px; font-weight: 600; color: var(--text-primary); }

/* Referrals */
.referral-list { display: flex; flex-direction: column; gap: 6px; }
.referral-item { display: flex; gap: 10px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; }
.referral-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.referral-pending { background: #f59e0b; }
.referral-accepted { background: var(--accent); }
.referral-completed { background: var(--card-border); }
.referral-patient { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.referral-arrow { color: var(--accent); margin: 0 4px; }
.referral-reason { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.referral-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* State Expansion */
.expansion-list { display: flex; flex-direction: column; gap: 8px; }
.expansion-card { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px; }
.expansion-card.active-state { border-color: var(--accent); background: var(--tip-bg); }
.expansion-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.active-dot { background: var(--accent); box-shadow: 0 0 6px rgba(11,107,94,0.4); }
.onboard-dot { background: #f59e0b; }
.planned-dot { background: var(--card-border); }
.expansion-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.expansion-detail { font-size: 12px; color: var(--text-secondary); }
.expansion-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; margin-left: auto; flex-shrink: 0; }
.expansion-active { background: var(--accent); color: white; }
.expansion-onboard { background: #fef3c7; color: #92400e; }
.app.dark .expansion-onboard { background: rgba(245,158,11,0.15); color: #f59e0b; }
.expansion-planned { background: var(--card-border-light); color: var(--text-muted); }
.expansion-summary { text-align: center; padding: 16px; font-size: 13px; color: var(--text-secondary); font-weight: 500; }

/* Admin Tab Bar */
.admin-tab-bar { background: var(--tab-bg); border-top: 1px solid var(--tab-border); }
.admin-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 4px 0; color: var(--text-muted); transition: color 0.15s; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.admin-tab span { font-size: 10px; font-weight: 500; }
.admin-tab.active { color: var(--accent); }

/* HIPAA Badges */
.hipaa-item { }
.hipaa-badges { display: flex; gap: 6px; }
.hipaa-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--tip-bg); color: var(--accent); letter-spacing: 0.03em; }

/* Appointment Detail */
.appt-detail-panel { max-height: 85%; padding: 0 0 28px; overflow-y: auto; }
.appt-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 14px; border-bottom: 1px solid var(--card-border-light); }
.appt-detail-header h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.appt-detail-provider { display: flex; gap: 12px; align-items: center; padding: 16px 20px; }
.appt-detail-body { padding: 0 20px; }
.appt-detail-body .confirm-card { margin-bottom: 16px; }
.appt-detail-prep { margin-bottom: 16px; }
.appt-prep-item { font-size: 13px; color: var(--text-secondary); line-height: 1.8; padding-left: 16px; position: relative; }
.appt-prep-item::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.appt-detail-actions { padding: 0 20px; }
.appt-detail-actions .btn-primary { width: 100%; }
.appt-detail-actions .btn-secondary { width: 100%; }



/* ======================== DEVICE MANAGEMENT ======================== */

.device-item { gap: 12px; }
.device-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--tip-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.device-info { flex: 1; }
.device-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.device-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Blue/gold program icons */
.blue-light { background: rgba(37,99,235,0.1); }
.gold-light { background: rgba(180,83,9,0.1); }

/* ======================== 9 PILLAR BARS ======================== */

.pillar-bar-item { margin-bottom: 8px; }
.pillar-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.pillar-bar-label span:first-child { color: var(--text-primary); font-weight: 500; }
.pillar-bar-label span:last-child { color: var(--accent); font-weight: 600; font-size: 11px; }
.pillar-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; margin-top: 8px; border-top: 1px solid var(--card-border); font-size: 14px; }
.pillar-total span { color: var(--text-secondary); }
.pillar-total strong { color: var(--accent); font-size: 16px; font-weight: 700; }

/* ======================== ANIMATIONS ======================== */

/* Staggered fade-in for cards */
.screen.active .appointment-card,
.screen.active .post-visit-card,
.screen.active .goals-summary-card,
.screen.active .tip-card,
.screen.active .feed-card,
.screen.active .provider-card,
.screen.active .market-card,
.screen.active .event-card-lg {
  animation: cardSlideIn 0.35s ease both;
}
.screen.active .appointment-card { animation-delay: 0.05s; }
.screen.active .post-visit-card { animation-delay: 0.1s; }
.screen.active .goals-summary-card { animation-delay: 0.15s; }
.screen.active .feed-card:nth-child(1) { animation-delay: 0.08s; }
.screen.active .feed-card:nth-child(2) { animation-delay: 0.14s; }
.screen.active .feed-card:nth-child(3) { animation-delay: 0.2s; }
.screen.active .provider-card:nth-child(1) { animation-delay: 0.04s; }
.screen.active .provider-card:nth-child(2) { animation-delay: 0.08s; }
.screen.active .provider-card:nth-child(3) { animation-delay: 0.12s; }
.screen.active .provider-card:nth-child(4) { animation-delay: 0.16s; }
.screen.active .provider-card:nth-child(5) { animation-delay: 0.2s; }
.screen.active .provider-card:nth-child(6) { animation-delay: 0.24s; }
.screen.active .market-card:nth-child(1) { animation-delay: 0.04s; }
.screen.active .market-card:nth-child(2) { animation-delay: 0.08s; }
.screen.active .market-card:nth-child(3) { animation-delay: 0.12s; }
.screen.active .market-card:nth-child(4) { animation-delay: 0.16s; }
.screen.active .market-card:nth-child(5) { animation-delay: 0.2s; }
.screen.active .market-card:nth-child(6) { animation-delay: 0.24s; }
.screen.active .event-card-lg:nth-child(1) { animation-delay: 0.04s; }
.screen.active .event-card-lg:nth-child(2) { animation-delay: 0.1s; }
.screen.active .event-card-lg:nth-child(3) { animation-delay: 0.16s; }
.screen.active .event-card-lg:nth-child(4) { animation-delay: 0.22s; }

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

/* Quick action bounce on load */
.screen.active .quick-action__icon {
  animation: iconPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.screen.active .quick-action:nth-child(1) .quick-action__icon { animation-delay: 0.1s; }
.screen.active .quick-action:nth-child(2) .quick-action__icon { animation-delay: 0.15s; }
.screen.active .quick-action:nth-child(3) .quick-action__icon { animation-delay: 0.2s; }
.screen.active .quick-action:nth-child(4) .quick-action__icon { animation-delay: 0.25s; }

@keyframes iconPop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Welcome banner parallax-lite on scroll */
.welcome-banner {
  transform: translateZ(0);
  transition: transform 0.1s;
}

/* Notification badge pulse */
.notif-badge {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Tab bar icon spring on tap */
.tab:active svg { animation: tabBounce 0.3s ease; }
@keyframes tabBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.85); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* SOS button gentle pulse */
.sos-fab {
  animation: sosPulse 3s ease-in-out infinite;
}
@keyframes sosPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(232,89,60,0.4); }
  50% { box-shadow: 0 4px 24px rgba(232,89,60,0.6), 0 0 0 6px rgba(232,89,60,0.1); }
}

/* Overlay slide-in with spring */
.overlay__panel {
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Event card horizontal scroll snap feel */
.events-scroll {
  scroll-snap-type: x proximity;
}
.event-card-sm {
  scroll-snap-align: start;
}

/* Vital mini cards hover lift */
.vital-mini {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vital-mini:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Refill button pulse when urgent */
.refill-urgent-text + .refill-btn,
.record-item:first-child .refill-btn {
  animation: refillPulse 2s ease-in-out infinite;
}
@keyframes refillPulse {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(232,89,60,0.1); }
}

/* Family member avatar ring animation on switch */
.family-member.active .family-member__avatar {
  animation: avatarRing 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes avatarRing {
  0% { border-color: transparent; transform: scale(0.9); }
  60% { transform: scale(1.08); }
  100% { border-color: var(--accent); transform: scale(1); }
}

/* Chat bubble entrance */
.chat-bubble {
  animation: bubbleIn 0.3s ease both;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Goal progress bar fill animation */
.goal-item__bar {
  animation: barFill 0.6s ease both;
}
@keyframes barFill {
  from { width: 0 !important; }
}

/* Profile header avatar float */
.profile-avatar {
  animation: avatarFloat 4s ease-in-out infinite;
}
@keyframes avatarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Section label slide-in */
.screen.active .section-label {
  animation: labelSlide 0.3s ease both;
}
@keyframes labelSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Dark mode transition smoothness */
.app * {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
/* Exclude elements that need their own timing */
.app .screen,
.app .overlay,
.app .overlay__panel,
.app .confetti-piece,
.app .goal-item__bar,
.app .refill-bar,
.app svg,
.app img {
  transition-property: none;
}

/* ======================== FONT SIZE SCALING ======================== */

.app.font-small { font-size: 13px; }
.app.font-small .home-header__aloha { font-size: 19px; }
.app.font-small .screen-title { font-size: 20px; }
.app.font-small .section-label { font-size: 11px; }
.app.font-small .appointment-card__doctor,
.app.font-small .provider-card__name,
.app.font-small .record-title,
.app.font-small .booking-provider-mini__name,
.app.font-small .booking-option__label,
.app.font-small .market-card__title,
.app.font-small .event-card-lg__title,
.app.font-small .navigator-name { font-size: 12px; }
.app.font-small .appointment-card__type,
.app.font-small .appointment-card__time,
.app.font-small .provider-card__spec,
.app.font-small .provider-card__meta span,
.app.font-small .record-sub,
.app.font-small .booking-option__sub,
.app.font-small .market-card__desc,
.app.font-small .event-card-lg__desc,
.app.font-small .event-card-lg__date,
.app.font-small .tip-card__body,
.app.font-small .crisis-item__title,
.app.font-small .crisis-subtitle,
.app.font-small .chat-bubble,
.app.font-small .booking-label,
.app.font-small .setting-item,
.app.font-small .confirm-row strong,
.app.font-small .screen-subtitle { font-size: 11px; }
.app.font-small .home-header__location,
.app.font-small .event-card-sm__title,
.app.font-small .quick-action span,
.app.font-small .tab span { font-size: 9px; }
.app.font-small .tip-card__title,
.app.font-small .profile-name { font-size: 13px; }
.app.font-small .profile-meta { font-size: 11px; }
.app.font-small .market-card__price { font-size: 24px; }
.app.font-small .btn-primary,
.app.font-small .btn-secondary { font-size: 13px; padding: 12px; }
.app.font-small .btn-primary-sm,
.app.font-small .btn-outline { font-size: 11px; }
.app.font-small .booking-header__title { font-size: 15px; }
.app.font-small .welcome-banner__text { font-size: 14px; }

.app.font-medium { font-size: 15px; }
/* font-medium is the default, no overrides needed */

.app.font-large { font-size: 17px; }
.app.font-large .home-header__aloha { font-size: 26px; }
.app.font-large .screen-title { font-size: 28px; }
.app.font-large .section-label { font-size: 14px; }
.app.font-large .appointment-card__doctor,
.app.font-large .provider-card__name,
.app.font-large .record-title,
.app.font-large .booking-provider-mini__name,
.app.font-large .booking-option__label,
.app.font-large .market-card__title,
.app.font-large .event-card-lg__title,
.app.font-large .navigator-name { font-size: 17px; }
.app.font-large .appointment-card__type,
.app.font-large .appointment-card__time,
.app.font-large .provider-card__spec,
.app.font-large .provider-card__meta span,
.app.font-large .record-sub,
.app.font-large .booking-option__sub,
.app.font-large .market-card__desc,
.app.font-large .event-card-lg__desc,
.app.font-large .event-card-lg__date,
.app.font-large .tip-card__body,
.app.font-large .crisis-item__title,
.app.font-large .crisis-subtitle,
.app.font-large .chat-bubble,
.app.font-large .booking-label,
.app.font-large .setting-item,
.app.font-large .confirm-row strong,
.app.font-large .screen-subtitle { font-size: 15px; }
.app.font-large .home-header__location,
.app.font-large .event-card-sm__title { font-size: 14px; }
.app.font-large .quick-action span,
.app.font-large .tab span { font-size: 12px; }
.app.font-large .event-card-sm__loc { font-size: 13px; }
.app.font-large .tip-card__title,
.app.font-large .profile-name { font-size: 22px; }
.app.font-large .profile-meta { font-size: 15px; }
.app.font-large .market-card__price { font-size: 32px; }
.app.font-large .btn-primary,
.app.font-large .btn-secondary { font-size: 17px; padding: 16px; }
.app.font-large .btn-primary-sm,
.app.font-large .btn-outline { font-size: 15px; padding: 12px 24px; }
.app.font-large .booking-header__title { font-size: 20px; }
.app.font-large .welcome-banner__text { font-size: 19px; }
.app.font-large .confirm-row span:first-child { font-size: 14px; }
.app.font-large .crisis-item__action { font-size: 14px; }
.app.font-large .chat-time { font-size: 11px; }

/* ======================== HIGH CONTRAST MODE ======================== */

.app.high-contrast {
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-muted: #555555;
  --card-border: #999999;
  --card-border-light: #bbbbbb;
}

.app.high-contrast .quick-action span { color: #000; font-weight: 600; }
.app.high-contrast .provider-card__spec,
.app.high-contrast .appointment-card__type { color: #333; font-weight: 500; }
.app.high-contrast .section-label { color: #000; font-weight: 700; }
.app.high-contrast .tip-card { border: 2px solid var(--accent); }
.app.high-contrast .appointment-card,
.app.high-contrast .provider-card,
.app.high-contrast .record-item,
.app.high-contrast .market-card,
.app.high-contrast .event-card-lg,
.app.high-contrast .confirm-card { border-width: 2px; }
.app.high-contrast .tab.active { font-weight: 700; }
.app.high-contrast .tab { color: #555; }
.app.high-contrast .pill { border-width: 2px; font-weight: 600; }
.app.high-contrast .pill.active { font-weight: 700; }
.app.high-contrast .btn-primary,
.app.high-contrast .btn-primary-sm { font-weight: 700; }
.app.high-contrast .btn-outline { border-width: 2px; font-weight: 700; }
.app.high-contrast .booking-option { border-width: 2.5px; }
.app.high-contrast .date-item { border-width: 2.5px; font-weight: 700; }
.app.high-contrast .time-slot { border-width: 2px; font-weight: 600; }
.app.high-contrast .welcome-banner__text { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.app.high-contrast .search-bar { border-width: 2px; }
.app.high-contrast .settings-list { border-width: 2px; }
.app.high-contrast .setting-item { font-weight: 500; }

/* High contrast + dark mode combo */
.app.dark.high-contrast {
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --card-border: #5c7068;
  --card-border-light: #3d4f48;
}
.app.dark.high-contrast .quick-action span { color: #fff; }
.app.dark.high-contrast .section-label { color: #fff; }
.app.dark.high-contrast .tab { color: #999; }