/* ============================================================
   RHYTHM — Heart Anxiety Tracker
   Premium Light Wellness UI — Warm Coral
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&family=Lora:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

/* --- Variables --- */
:root {
  --bg: #FFF5F3;
  --bg-card: #FFFFFF;
  --bg-card-2: #FFF0ED;
  --primary: #C9746A;
  --primary-light: #D4705F;
  --primary-dark: #C05A48;
  --primary-dim: rgba(201, 116, 106, 0.10);
  --primary-glow: rgba(201, 116, 106, 0.20);
  --secondary: #5A9E72;
  --secondary-dim: rgba(90, 158, 114, 0.10);
  --text: #2D1F1E;
  --text-dim: #B07A72;
  --text-muted: rgba(176, 122, 114, 0.65);
  --border: rgba(201, 116, 106, 0.10);
  --border-strong: rgba(201, 116, 106, 0.18);
  --shadow-card: 0 4px 20px rgba(180, 80, 60, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(180, 80, 60, 0.13);
  --radius: 18px;
  --radius-sm: 12px;
  --nav-height: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; overflow: hidden; }

body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

h1, h2, h3, .serif { font-family: 'Playfair Display', Georgia, serif; }
p, span, label, input, textarea, button { font-family: 'DM Sans', sans-serif; }

input, textarea { -webkit-appearance: none; appearance: none; user-select: text; }

/* --- App Shell --- */
#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* --- Screens --- */
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: translateY(12px);
  background: var(--bg);
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.screen.slide-up {
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.screen.active.slide-up {
  transform: translateY(0);
}

/* screens with bottom nav need padding */
.screen.has-nav {
  padding-bottom: calc(150px + var(--safe-bottom));
}

/* ============================================================
   FLOATING BOTTOM DOCK
   ============================================================ */
#bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 0 16px calc(var(--safe-bottom) + 12px);
  z-index: 200;
  pointer-events: none;
}
#bottom-nav.hidden { display: none; }
.dock-wrap {
  background: rgba(255,245,243,0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(180,80,60,0.10), 0 2px 8px rgba(0,0,0,0.06);
  pointer-events: all;
}
.dock-support { padding: 12px 12px 0; }
.dock-support-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #e8725a, #C9746A);
  color: white; border: none; border-radius: 20px;
  font-size: 15px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
  animation: dockSosPulse 2.8s ease-in-out infinite;
  transition: transform 0.12s ease;
}
.dock-support-btn:active { transform: scale(0.97); animation: none; }
@keyframes dockSosPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(232,114,90,0.30); }
  50%      { box-shadow: 0 4px 32px rgba(232,114,90,0.55); }
}
.dock-divider { height: 1px; background: var(--border); margin: 10px 12px 0; }
.dock-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 4px 8px;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 14px; background: none; border: none; cursor: pointer;
  border-radius: 14px; color: var(--text-muted); opacity: 0.55;
  transition: all 0.2s ease; font-family: 'DM Sans', sans-serif;
}
.nav-item .nav-svg { width: 20px; height: 20px; }
.nav-item .nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.nav-item.active { color: var(--primary); opacity: 1; }
.nav-item:active { transform: scale(0.91); }

/* --- Typography helpers --- */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; letter-spacing: 0.04em; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 22px; }
.text-center { text-align: center; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* --- Layout helpers --- */
.px-5 { padding-left: 20px; padding-right: 20px; }
.pt-safe { padding-top: max(env(safe-area-inset-top, 0px), 16px); }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.card-sm {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}

/* --- Buttons --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 52px;
  padding: 0 28px;
  width: 100%;
  letter-spacing: 0.01em;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  color: white;
  box-shadow: 0 4px 24px rgba(201, 116, 106, 0.35);
}

.btn-primary:hover { box-shadow: 0 6px 32px rgba(201, 116, 106, 0.48); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--shadow-card);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 400;
  min-height: 44px;
}

.btn-sage {
  background: rgba(90, 158, 114, 0.1);
  color: var(--secondary);
  border: 1px solid rgba(90, 158, 114, 0.25);
}

/* --- Top bar / header --- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(env(safe-area-inset-top, 16px), 16px) 20px 12px;
}

.back-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}

.back-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back-btn:active { transform: scale(0.93); }

/* ============================================================
   ONBOARDING SCREENS
   ============================================================ */

/* --- Onboarding 1: Hero --- */
#screen-onboarding-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

.waveform-bg { display: none; }

.waveform-inline {
  width: 100%;
  padding: 8px 0 16px;
  overflow: hidden;
  pointer-events: none;
}

.waveform-inline #ecg-path, #ecg-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: ecg-draw 3s linear infinite;
}

@keyframes ecg-draw {
  0% { stroke-dashoffset: 2000; opacity: 0.25; }
  10% { opacity: 0.45; }
  80% { opacity: 0.45; }
  100% { stroke-dashoffset: 0; opacity: 0.25; }
}

.onboarding-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
  gap: 16px;
}

.logo-mark {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(201, 116, 106, 0.35);
  margin-bottom: 8px;
}

.logo-mark svg { width: 40px; height: 40px; }

.onboarding-title {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.onboarding-tagline {
  font-size: 18px;
  color: var(--text-dim);
  font-weight: 400;
  line-height: 1.55;
  max-width: 260px;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.01em;
}

.onboarding-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 24px max(env(safe-area-inset-bottom, 32px), 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Fade from transparent to background so ECG/tagline text doesn't bleed
     through the footer area behind the Begin button. */
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 28%);
}

.trust-badges {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 4px;
}

.trust-badge {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.trust-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--secondary);
}

/* --- Onboarding 2: Condition selector --- */
.ob-section { padding: 20px 20px 0; }

.ob-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--text);
}

.ob-subtitle {
  font-size: 15px;
  color: var(--text-dim);
  margin-bottom: 24px;
  line-height: 1.5;
}

.condition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px;
  margin-bottom: 24px;
}

.condition-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.condition-card.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: 0 0 0 2px var(--primary-dim), var(--shadow-card);
}

.condition-card:active { transform: scale(0.96); }

.condition-icon { font-size: 28px; line-height: 1; }

.condition-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* --- Onboarding 3: Signup --- */
.signup-form {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-input {
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 16px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s;
  width: 100%;
  min-height: 52px;
  box-shadow: var(--shadow-card);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

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

.remember-me-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--bg-card-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.remember-me-box:active { opacity: 0.8; }
.rm-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.rm-label {
  font-size: 14px;
  color: var(--text-dim);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}

.form-footer-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  padding: 0 8px;
}

/* ============================================================
   PAYWALL
   ============================================================ */

#screen-paywall {
  background: var(--bg);
}

.paywall-header {
  padding: max(env(safe-area-inset-top, 20px), 20px) 24px 24px;
  text-align: center;
}

.paywall-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--secondary-dim);
  border: 1px solid rgba(90, 158, 114, 0.2);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.paywall-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--text);
}

.paywall-subtitle {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.5;
}

.value-props {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.value-prop {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.vp-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.vp-icon.rose { background: var(--primary-dim); }
.vp-icon.sage { background: var(--secondary-dim); }
.vp-icon.gold { background: rgba(212, 175, 55, 0.10); }

.vp-text { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text); }

.plan-cards {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.plan-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: var(--shadow-card);
}

.plan-card.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: 0 0 0 2px var(--primary-dim);
}

.plan-card:active { transform: scale(0.98); }

.plan-badge {
  position: absolute;
  top: -10px; right: 16px;
  background: var(--secondary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
}

.plan-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; color: var(--text); }
.plan-price { font-size: 13px; color: var(--text-dim); }
.plan-total { font-size: 22px; font-weight: 700; color: var(--primary); }

.plan-radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}

.plan-card.selected .plan-radio {
  border-color: var(--primary);
  background: var(--primary);
}

.plan-card.selected .plan-radio::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: white;
}

.paywall-footer {
  padding: 0 24px max(env(safe-area-inset-bottom, 24px), 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paywall-legal {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   HOME SCREEN — Premium Light Redesign
   ============================================================ */

.home-header {
  padding: max(env(safe-area-inset-top, 24px), 24px) 22px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.greeting-text {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.greeting-name {
  font-size: 28px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  line-height: 1.1;
  color: var(--text);
}

.streak-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(90,158,114,0.1);
  border: 1px solid rgba(90,158,114,0.2);
  border-radius: 50px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
}

/* Hero stats card */
.home-hero-card {
  margin: 16px 20px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow-card);
}

.hero-left { flex: 0 0 auto; }

.hero-number {
  font-size: 56px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: var(--primary);
  line-height: 1;
}

.hero-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 5px;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 50px;
  margin-top: 8px;
}

.stat-change.good { background: var(--secondary-dim); color: var(--secondary); }
.stat-change.bad { background: var(--primary-dim); color: var(--primary); }
.stat-change.neutral { background: rgba(45,31,30,0.06); color: var(--text-dim); }

.hero-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}

.hero-right { flex: 1; min-width: 0; }
.hero-right-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.hero-right-value { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.hero-right-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* 2-col quick action tiles */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px;
  margin-bottom: 10px;
}

.home-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 16px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 108px;
  box-shadow: var(--shadow-card);
}

.home-tile:active { transform: scale(0.96); box-shadow: var(--shadow-card-hover); }
.home-tile-icon { font-size: 26px; line-height: 1; }
.home-tile-label { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--text); }
.home-tile-sub { font-size: 12px; color: var(--text-muted); line-height: 1.3; }

/* List rows */
.home-list-row {
  margin: 0 20px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-card);
}

.home-list-row:active { transform: scale(0.98); box-shadow: var(--shadow-card-hover); }
.home-list-icon { font-size: 20px; flex-shrink: 0; }
.home-list-label { flex: 1; font-size: 15px; font-weight: 500; color: var(--text); }
.home-list-arrow { color: var(--text-muted); font-size: 20px; font-weight: 300; }

/* Trigger callout */
.home-insight-row {
  margin: 0 20px 10px;
  background: rgba(201,116,106,0.07);
  border: 1px solid rgba(201,116,106,0.15);
  border-radius: 14px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-insight-label { font-size: 12px; color: var(--text-muted); }
.home-insight-value { font-size: 14px; font-weight: 600; color: var(--primary); }

/* ============================================================
   CRISIS CARD — full-width card with pulse + wave
   ============================================================ */

.crisis-bottom-wrap { padding: 6px 20px 16px; }

.crisis-card {
  width: 100%;
  border-radius: 28px;
  border: none;
  background: linear-gradient(135deg, #D4705F, #C05A48);
  color: white;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 8px 32px rgba(192, 90, 72, 0.38);
  transition: all 0.2s ease;
}

.crisis-card:active { transform: scale(0.97); box-shadow: 0 4px 16px rgba(192, 90, 72, 0.28); }

/* Pulse ring around icon */
.crisis-pulse-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}

.crisis-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  animation: crisis-pulse 1.8s ease-out infinite;
}

.crisis-pulse-ring-2 {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  animation: crisis-pulse 1.8s ease-out infinite 0.6s;
}

@keyframes crisis-pulse {
  0%   { transform: scale(0.9); opacity: 0.8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.crisis-icon {
  font-size: 22px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.crisis-card-text { flex: 1; }
.crisis-card-title { font-size: 17px; font-weight: 700; line-height: 1.2; margin-bottom: 3px; }
.crisis-card-sub { font-size: 13px; opacity: 0.8; font-weight: 400; }

/* Mini heartbeat wave inside card */
.crisis-wave {
  position: absolute;
  right: 0; bottom: 0;
  width: 120px; height: 60px;
  opacity: 0.18;
  pointer-events: none;
}

.crisis-card-arrow {
  font-size: 22px;
  opacity: 0.7;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Keep old pill class for backwards compat */
.crisis-pill {
  width: 100%;
  height: 58px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #D4705F, #C05A48);
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  cursor: pointer;
  box-shadow: 0 6px 28px rgba(192, 90, 72, 0.38);
  transition: all 0.2s ease;
}
.crisis-pill:active { transform: scale(0.97); }
.crisis-pill-icon { font-size: 20px; flex-shrink: 0; }
.crisis-pill-text { flex: 1; font-size: 16px; font-weight: 600; text-align: left; }
.crisis-pill-arrow { font-size: 18px; opacity: 0.75; }

/* ============================================================
   CRISIS FLOW
   ============================================================ */

.crisis-screen-header {
  padding: max(env(safe-area-inset-top, 16px), 16px) 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.crisis-step-label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.step-dots {
  display: flex;
  gap: 5px;
}

.step-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: all 0.3s ease;
}

.step-dot.active { background: var(--primary); width: 18px; border-radius: 3px; }
.step-dot.done { background: var(--secondary); }

/* --- Crisis 1: Sensation selector --- */
.sensation-title {
  padding: 20px 20px 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.sensation-sub {
  padding: 0 20px 20px;
  font-size: 14px;
  color: var(--text-dim);
}

.sensation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px;
}

.sensation-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 110px;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.sensation-card.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: 0 0 0 2px var(--primary-dim);
}

.sensation-card:active { transform: scale(0.95); }

.sensation-icon {
  font-size: 32px;
  line-height: 1;
}

.sensation-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.sensation-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.crisis-next-btn {
  margin: 20px;
}

/* --- Crisis 2: Quick context --- */
.context-section {
  padding: 20px 20px 0;
}

.context-question {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}

.star-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.star-btn {
  flex: 1;
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.star-btn.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
}

.duration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.duration-btn {
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 10px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.duration-btn.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--text);
}

.voice-note-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  width: 100%;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.voice-note-btn:active { background: var(--bg-card-2); }

/* --- Crisis 3: AI Response --- */
#screen-crisis-3 {
  background: var(--bg);
}

.ai-response-header {
  padding: max(env(safe-area-inset-top, 16px), 16px) 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ai-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ai-status { font-size: 12px; color: var(--secondary); }

.typing-dots {
  display: flex;
  gap: 4px;
  padding: 20px 20px 0;
}

.typing-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.ai-message {
  margin: 16px 20px 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top-left-radius: 4px;
  padding: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  display: none;
  box-shadow: var(--shadow-card);
}

.ai-message.visible { display: block; animation: fade-up 0.4s ease; }

.pattern-context-card {
  margin: 12px 20px 0;
  background: var(--secondary-dim);
  border: 1px solid rgba(90, 158, 114, 0.18);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: none;
}

.pattern-context-card.visible { display: block; animation: fade-up 0.4s ease 0.2s both; }

.pcc-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); margin-bottom: 6px; }
.pcc-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* Breathing animation */
.breathing-section {
  padding: 24px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  display: none;
}

.breathing-section.visible { display: flex; }

.breathing-label-top {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: flex-start;
}

.breathing-circle-wrap {
  position: relative;
  width: 200px; height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breathing-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(90, 158, 114, 0.15);
}

.breathing-circle {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 158, 114, 0.3), rgba(90, 158, 114, 0.1));
  border: 2px solid rgba(90, 158, 114, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: var(--secondary);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 30px rgba(90, 158, 114, 0.12);
}

.breathing-circle.inhale {
  width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(90, 158, 114, 0.4), rgba(90, 158, 114, 0.15));
  box-shadow: 0 0 50px rgba(90, 158, 114, 0.2);
  border-color: rgba(90, 158, 114, 0.6);
}

.breathing-circle.hold {
  width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(201, 116, 106, 0.25), rgba(201, 116, 106, 0.08));
  border-color: rgba(201, 116, 106, 0.35);
  box-shadow: 0 0 50px rgba(201, 116, 106, 0.12);
  color: var(--primary);
}

.breathing-circle.exhale {
  width: 100px; height: 100px;
}

.breathing-phase {
  font-size: 18px;
  font-weight: 600;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--secondary);
  transition: color 0.5s ease;
}

.breathing-phase.hold-phase { color: var(--primary); }

.breathing-guide {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  max-width: 220px;
  line-height: 1.5;
}

.crisis-calmer-btn {
  margin: 20px;
  margin-top: 16px;
}

.crisis-no-better {
  text-align: center;
  padding: 0 20px 32px;
  font-size: 13px;
  color: var(--text-muted);
}

.crisis-no-better a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

/* ============================================================
   DAILY CHECK-IN
   ============================================================ */

#screen-checkin {
  background: var(--bg);
  overflow: hidden;
}

.checkin-header {
  padding: max(env(safe-area-inset-top, 16px), 16px) 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkin-title { font-size: 22px; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--text); }

.checkin-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 0;
}

.checkin-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.checkin-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.checkin-progress-text {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Single-card check-in (no stacking, one clean card at a time) */
.card-stack {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}

.checkin-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform, opacity;
  box-shadow: var(--shadow-card-hover);
}

/* next-card / stacking styles kept for swipe feel but minimised */
.checkin-card.next-card { display: none; }
.checkin-card:nth-child(3) { display: none; }

.ci-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

.ci-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.ci-question { font-size: 22px; font-weight: 700; font-family: 'Playfair Display', serif; line-height: 1.25; color: var(--text); }
.ci-sub { font-size: 14px; color: var(--text-dim); margin-top: 6px; line-height: 1.45; }

/* Slider */
.ci-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ci-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
  user-select: text;
}

.ci-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(201, 116, 106, 0.35);
}

.ci-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.ci-slider-value {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: var(--primary);
}

/* Option row */
.ci-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ci-option {
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
}

.ci-option.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--text);
}

/* Emoji row */
.ci-emoji-row {
  display: flex;
  gap: 10px;
}

.ci-emoji-btn {
  flex: 1;
  height: 64px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 26px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ci-emoji-btn span { font-size: 10px; color: var(--text-muted); font-weight: 500; }

.ci-emoji-btn.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  transform: scale(1.05);
}

/* Number pad row */
.ci-number-row {
  display: flex;
  gap: 8px;
}

.ci-number-btn {
  flex: 1;
  height: 56px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 20px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-dim);
}

.ci-number-btn.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
}

.checkin-card-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ci-next-btn {
  flex: 1;
  height: 48px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  border: none;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ci-next-btn:active { transform: scale(0.97); }

.ci-skip-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 16px;
}

/* Check-in complete */
.checkin-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  text-align: center;
  gap: 16px;
  height: 100%;
}

.checkin-complete-icon {
  font-size: 56px;
  animation: bounce-in 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

.mini-waveform {
  width: 120px; height: 40px;
  opacity: 0.6;
}

/* ============================================================
   PATTERNS SCREEN
   ============================================================ */

.screen-header {
  padding: max(env(safe-area-inset-top, 20px), 20px) 20px 0;
}

.screen-title {
  font-size: 30px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  margin-bottom: 4px;
  color: var(--text);
}

.screen-subtitle {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 24px;
}

.patterns-content { padding: 0 20px; }

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100px;
  margin-bottom: 8px;
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: rgba(201, 116, 106, 0.12);
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 4px;
  position: relative;
}

.bar.current { background: linear-gradient(180deg, var(--primary-light), var(--primary-dark)); }
.bar.has-data { background: rgba(201, 116, 106, 0.15); }

.bar-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.bar-label {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* Insight cards */
.insight-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

.insight-card.highlight {
  border-color: rgba(201, 116, 106, 0.2);
  background: rgba(201, 116, 106, 0.04);
}

.insight-card.sage {
  border-color: rgba(90, 158, 114, 0.2);
  background: rgba(90, 158, 114, 0.04);
}

.insight-icon { font-size: 20px; margin-bottom: 10px; }
.insight-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.insight-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

.trigger-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.trigger-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trigger-rank {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.trigger-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }

.trigger-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.trigger-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary-dark));
}

.trigger-pct { font-size: 12px; font-weight: 600; color: var(--primary); min-width: 32px; text-align: right; }

.no-data-state {
  text-align: center;
  padding: 24px 16px;
}

.no-data-icon { font-size: 36px; margin-bottom: 12px; }
.no-data-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.no-data-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.ai-insight-card {
  background: var(--bg-card);
  border: 1px solid rgba(201, 116, 106, 0.15);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

.ai-insight-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ai-insight-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ai-insight-text { font-size: 14px; color: var(--text-dim); line-height: 1.7; }

/* ============================================================
   TOOLS SCREEN
   ============================================================ */

.tools-content { padding: 0 20px; }

.tool-category {
  margin-bottom: 28px;
}

.tool-category-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-card);
}

.tool-card:active { transform: scale(0.98); box-shadow: var(--shadow-card-hover); }

.tool-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.tool-card-icon.rose { background: var(--primary-dim); }
.tool-card-icon.sage { background: var(--secondary-dim); }
.tool-card-icon.blue { background: rgba(100, 160, 220, 0.10); }
.tool-card-icon.gold { background: rgba(212, 175, 55, 0.10); }

.tool-card-body { flex: 1; }
.tool-card-name { font-size: 15px; font-weight: 600; margin-bottom: 3px; color: var(--text); }
.tool-card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.tool-card-badge { font-size: 10px; font-weight: 600; color: var(--secondary); background: var(--secondary-dim); padding: 2px 8px; border-radius: 50px; margin-top: 4px; display: inline-block; }

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

.tool-card-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   TOOL DETAIL SCREEN
   ============================================================ */

#screen-tool-detail { background: var(--bg); }

.tool-detail-header {
  padding: max(env(safe-area-inset-top, 16px), 16px) 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.tool-detail-body { padding: 20px; }

.tool-detail-icon-large {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  margin-bottom: 16px;
}

.tool-detail-title { font-size: 28px; font-weight: 700; font-family: 'Playfair Display', serif; margin-bottom: 6px; color: var(--text); }
.tool-detail-when { font-size: 14px; color: var(--secondary); font-weight: 500; margin-bottom: 16px; }

.evidence-card {
  background: var(--secondary-dim);
  border: 1px solid rgba(90, 158, 114, 0.18);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.evidence-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary); margin-bottom: 6px; }
.evidence-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.steps-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-dim);
  border: 1.5px solid rgba(201, 116, 106, 0.2);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.step-text { font-size: 14px; line-height: 1.6; color: var(--text); padding-top: 4px; }

.feedback-row {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.feedback-btn {
  flex: 1;
  height: 52px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-card);
}

.feedback-btn.worked { color: var(--secondary); border-color: rgba(90, 158, 114, 0.25); }
.feedback-btn.worked:active { background: var(--secondary-dim); }
.feedback-btn.no-work { color: var(--primary); border-color: rgba(201, 116, 106, 0.2); }
.feedback-btn.no-work:active { background: var(--primary-dim); }

/* Animated diagram for tools */
.tool-diagram {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.diagram-figure {
  font-size: 64px;
  animation: diagram-float 3s ease-in-out infinite;
}

@keyframes diagram-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Tool card — warning badge variant */
.tool-card-badge-warn { color: var(--primary); background: var(--primary-dim); }

/* Tool detail — SVT warning banner */
.td-warning-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(201, 116, 106, 0.08);
  border: 1.5px solid rgba(201, 116, 106, 0.3);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.td-warning-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.td-warning-text { font-size: 13px; color: var(--text); line-height: 1.55; }

/* Tool detail — breathing orb */
.td-breath-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 16px;
}
.td-breath-orb {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(90,158,114,0.9), rgba(90,158,114,0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 18px;
  box-shadow: 0 0 0 0 rgba(90,158,114,0.25);
  transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
}
.td-breath-orb.td-breath-inhale {
  transform: scale(1.35);
  box-shadow: 0 0 0 18px rgba(90,158,114,0.08);
}
.td-breath-orb.td-breath-exhale {
  transform: scale(0.82);
  box-shadow: 0 0 0 0 rgba(90,158,114,0);
}
.td-breath-phase {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  min-height: 28px;
}
.td-breath-pattern {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.td-breath-count { font-size: 32px; font-weight: 700; color: white; }

/* Tool detail — grounding */
.td-grounding-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 10px;
  opacity: 0.45;
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.td-grounding-step.active {
  opacity: 1;
  border-color: rgba(184,134,78,0.4);
  background: rgba(184,134,78,0.04);
}
.td-grounding-step.done {
  opacity: 0.55;
  border-color: rgba(90,158,114,0.25);
  background: var(--secondary-dim);
}
.tdg-count {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(184,134,78,0.15);
  color: #b8864e;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.td-grounding-step.done .tdg-count { background: var(--secondary-dim); color: var(--secondary); }
.tdg-body { flex: 1; }
.tdg-sense {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8864e;
  margin-bottom: 4px;
}
.td-grounding-step.done .tdg-sense { color: var(--secondary); }
.tdg-prompt { font-size: 14px; color: var(--text); line-height: 1.5; }
.tdg-check { font-size: 16px; color: var(--secondary); opacity: 0; transition: opacity 0.3s; flex-shrink: 0; margin-top: 2px; }
.tdg-done {
  text-align: center;
  padding: 24px 20px;
  background: var(--secondary-dim);
  border-radius: var(--radius-sm);
  margin-top: 8px;
  margin-bottom: 24px;
}

/* Tool detail — educational cards */
.td-edu-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.td-edu-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}
.td-edu-card:active { border-color: rgba(184,134,78,0.4); }
.td-edu-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  gap: 12px;
}
.td-edu-card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.td-edu-chevron { font-size: 22px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.td-edu-card-body {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* ============================================================
   HISTORY SCREEN
   ============================================================ */

.history-content { padding: 0 20px; }

.history-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 16px;
}

.filter-chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}

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

.history-list { display: flex; flex-direction: column; gap: 10px; }

.episode-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-card);
}

.episode-item:active { transform: scale(0.98); }

.episode-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.episode-dot.low { background: var(--secondary); }
.episode-dot.medium { background: #D4A843; }
.episode-dot.high { background: var(--primary); }

.episode-main { flex: 1; }
.episode-type { font-size: 14px; font-weight: 600; margin-bottom: 3px; color: var(--text); }
.episode-meta { font-size: 12px; color: var(--text-muted); }

.episode-intensity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.intensity-stars {
  display: flex;
  gap: 2px;
}

.intensity-star { font-size: 10px; color: var(--primary); }
.intensity-star.empty { color: var(--border-strong); }

.episode-duration { font-size: 11px; color: var(--text-muted); }

.empty-history {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-history-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-history-text { font-size: 14px; line-height: 1.6; }

/* Episode detail */
.episode-detail-body { padding: 20px; }

.episode-detail-time {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.episode-detail-sensations {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sensation-tag {
  background: var(--primary-dim);
  border: 1px solid rgba(201, 116, 106, 0.18);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}

.episode-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.episode-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: var(--shadow-card);
}

.episode-stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.episode-stat-value { font-size: 18px; font-weight: 700; color: var(--primary); }

.ai-response-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

.air-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.air-title { font-size: 14px; font-weight: 600; color: var(--text); }
.air-text { font-size: 14px; color: var(--text-dim); line-height: 1.65; }

/* Episode detail — trigger data section */
.episode-triggers-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 4px;
  margin-bottom: 12px;
}
.episode-triggers-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.episode-trigger-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.episode-trigger-row:last-child { border-bottom: none; padding-bottom: 0; }
.episode-trigger-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 86px;
  flex-shrink: 0;
  padding-top: 1px;
}
.episode-trigger-value { font-size: 13px; color: var(--text); line-height: 1.5; }
.episode-triggers-empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  margin-bottom: 12px;
}


/* ============================================================
   PROFILE SCREEN
   ============================================================ */

.profile-header {
  padding: max(env(safe-area-inset-top, 20px), 20px) 20px 24px;
  text-align: center;
}

.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 12px;
  box-shadow: 0 4px 20px rgba(201, 116, 106, 0.25);
}

.profile-email { font-size: 14px; color: var(--text-dim); }
.profile-plan { font-size: 12px; font-weight: 600; color: var(--secondary); margin-top: 4px; }

.settings-section { padding: 0 20px; margin-bottom: 20px; }

.settings-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b09888;
  margin-bottom: 10px;
  padding-left: 4px;
}
.settings-section + .settings-section > .settings-section-label {
  margin-top: 28px;
}

.settings-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--border);
}

.settings-item:last-child { border-bottom: none; }
.settings-item:active { background: var(--bg-card-2); }

.settings-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.settings-icon.rose { background: var(--primary-dim); }
.settings-icon.sage { background: var(--secondary-dim); }
.settings-icon.blue { background: rgba(100, 160, 220, 0.10); }
.settings-icon.gold { background: rgba(212, 175, 55, 0.10); }

.settings-item-main { flex: 1; }
.settings-item-name { font-size: 15px; font-weight: 500; color: var(--text); }
.settings-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.settings-arrow { color: var(--text-muted); }
.settings-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.api-key-section { padding: 0 20px 20px; }

.api-key-input-wrap {
  display: flex;
  gap: 8px;
}

.api-key-save-btn {
  height: 52px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  border: none;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* ============================================================
   MODALS / OVERLAYS
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 31, 30, 0.35);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.modal-sheet {
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  width: 100%;
  padding: 20px 20px max(env(safe-area-inset-bottom, 24px), 24px);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 -8px 40px rgba(180, 80, 60, 0.12);
}

.modal-overlay.visible .modal-sheet {
  transform: translateY(0);
}

.modal-handle {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.install-instructions { display: flex; flex-direction: column; gap: 14px; }

.install-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}

.install-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   RHYTHM CHAT SCREEN
   ============================================================ */

#screen-rhythm-chat {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.chat-header {
  padding: max(env(safe-area-inset-top, 16px), 16px) 20px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

.chat-bubble {
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.6;
  animation: fade-up 0.3s ease;
}

.chat-bubble.rhythm {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  color: var(--text);
  align-self: flex-start;
  box-shadow: var(--shadow-card);
}

.chat-bubble.user {
  background: linear-gradient(135deg, #D4705F, #C05A48);
  color: white;
  border-bottom-right-radius: 5px;
  align-self: flex-end;
}

.chat-bubble.typing {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  align-self: flex-start;
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}

.chat-input-area {
  padding: 12px 16px max(env(safe-area-inset-bottom, 20px), 20px);
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 50px;
  padding: 14px 20px;
  font-size: 15px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  user-select: text;
  min-height: 50px;
}

.chat-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.chat-input::placeholder { color: var(--text-muted); }

.chat-send-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #D4705F, #C05A48);
  color: white;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(201,116,106,0.3);
}

.chat-send-btn:active { transform: scale(0.93); }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }

/* Breathing start button */
.breathing-start-btn {
  margin: 0 20px 4px;
  height: 52px;
  border-radius: 50px;
  border: 1.5px solid rgba(90,158,114,0.3);
  background: rgba(90,158,114,0.08);
  color: var(--secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.breathing-start-btn:active { transform: scale(0.97); }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px + var(--safe-bottom));
  left: 16px;
  right: 16px;
  transform: translateY(20px);
  background: var(--text);
  border-radius: 16px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  z-index: 300;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 24px rgba(45,31,30,0.2);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ANIMATIONS & UTILITIES
   ============================================================ */

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

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

.fade-up { animation: fade-up 0.4s ease both; }

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 0; background: transparent; }

/* Safe area spacer */
.safe-bottom { height: max(env(safe-area-inset-bottom, 20px), 20px); }

/* Profile onboarding option buttons */
.pob-option {
  width: 100%; padding: 16px 20px; text-align: left;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: 16px; font-size: 15px; font-weight: 500;
  color: var(--text); cursor: pointer; transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
}
.pob-option:active   { transform: scale(0.98); }
.pob-option.selected { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* Loading spinner */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   HOME SCREEN REDESIGN
   ============================================================ */

.greeting-sub {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 2px;
}

.home-context-card {
  margin: 0 20px 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s ease;
  min-height: 64px;
}
.home-context-card:active { transform: scale(0.98); }

.ctx-icon { font-size: 24px; flex-shrink: 0; }
.ctx-body { flex: 1; }
.ctx-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.ctx-sub { font-size: 12px; color: var(--text-dim); }
.ctx-arrow { font-size: 18px; color: var(--text-muted); }

.home-mood-row {
  margin: 0 20px 16px;
}
.home-mood-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.home-mood-buttons {
  display: flex;
  gap: 10px;
}
.mood-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mood-btn span { font-size: 11px; color: var(--text-dim); font-family: 'DM Sans', sans-serif; }
.mood-btn:active { transform: scale(1.05); }
.mood-btn.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.home-glance-strip {
  display: flex;
  gap: 10px;
  margin: 0 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.home-glance-strip::-webkit-scrollbar { display: none; }
.glance-card {
  flex-shrink: 0;
  width: 80px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s;
}
.glance-card:active { transform: scale(0.96); }
.glance-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
}
.glance-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.home-score-card {
  margin: 0 20px 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px 20px 12px;
  text-align: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.score-arc-wrap { position: relative; width: 120px; margin: 0 auto 4px; }
.score-arc-svg { width: 120px; height: 80px; }
.score-arc-value {
  position: absolute;
  bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 28px; font-weight: 700; color: var(--text);
  font-family: 'DM Sans', sans-serif;
}
.score-arc-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 4px;
}
.score-tap-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.home-quick-actions {
  display: flex;
  gap: 8px;
  margin: 0 20px 20px;
  justify-content: center;
}
.quick-action-pill {
  flex: 1;
  padding: 10px 4px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.quick-action-pill:active {
  background: var(--primary-dim);
  border-color: var(--primary);
  transform: scale(0.97);
}

/* ============================================================
   HOME SCREEN — Premium Redesign v2
   ============================================================ */

/* Stagger animation */
.home-stagger-1 { animation: homeCardIn 0.45s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.home-stagger-2 { animation: homeCardIn 0.45s cubic-bezier(0.22,1,0.36,1) 0.13s both; }
.home-stagger-3 { animation: homeCardIn 0.45s cubic-bezier(0.22,1,0.36,1) 0.21s both; }
.home-stagger-4 { animation: homeCardIn 0.45s cubic-bezier(0.22,1,0.36,1) 0.29s both; }
@keyframes homeCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header */
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: max(env(safe-area-inset-top, 20px), 20px) 20px 12px;
}
.home-header-left { flex: 1; min-width: 0; }
.home-greeting {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.home-headline {
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 4px;
}
.home-subline {
  font-size: 13px;
  color: var(--text-dim);
}
.home-streak-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--secondary-dim);
  border: 1px solid rgba(90,158,114,0.2);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Base card */
.home-card {
  margin: 0 16px 12px;
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(180,80,60,0.07);
  overflow: hidden;
  position: relative;
}

/* Check-in card */
.home-checkin-card {
  padding: 18px 16px 16px;
}
.home-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.home-mood-row {
  display: flex;
  gap: 8px;
  margin: 0;
}
.mood-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--bg-card-2);
  border: 2px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
  font-family: 'DM Sans', sans-serif;
}
.mood-btn:active { transform: scale(0.96); }
.mood-btn.selected-calm  { border-color: var(--secondary); background: rgba(90,158,114,0.10); box-shadow: 0 0 0 3px rgba(90,158,114,0.18); }
.mood-btn.selected-off   { border-color: #C9A84C; background: rgba(201,168,76,0.10); box-shadow: 0 0 0 3px rgba(201,168,76,0.18); }
.mood-btn.selected-anxious { border-color: var(--primary); background: var(--primary-dim); box-shadow: 0 0 0 3px var(--primary-glow); }
.mood-emoji { font-size: 26px; line-height: 1; }
.mood-label { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; }
.mood-response {
  margin-top: 14px;
  font-size: 15px;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
  animation: fadeUp 0.3s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Breathing orb card */
.home-orb-card {
  padding: 28px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
  justify-content: center;
}
.orb-ambient {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,158,114,0.22) 0%, transparent 70%);
  transition: background 3s ease;
  pointer-events: none;
  animation: orbAmbientPulse 4s ease-in-out infinite;
}
@keyframes orbAmbientPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.65; }
  50%       { transform: scale(1.1); opacity: 1; }
}
.orb-ring-2 {
  width: 152px; height: 152px;
  border-radius: 50%;
  border: 1.5px solid rgba(90,158,114,0.18);
  position: absolute;
  transition: transform 4s cubic-bezier(0.45,0.05,0.55,0.95), border-color 3s ease;
}
.orb-ring-1 {
  width: 124px; height: 124px;
  border-radius: 50%;
  border: 1.5px solid rgba(90,158,114,0.3);
  position: absolute;
  transition: transform 4s cubic-bezier(0.45,0.05,0.55,0.95), border-color 3s ease;
}
.orb-core {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(90,158,114,0.9), rgba(90,158,114,0.65));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 2;
  transition: transform 4s cubic-bezier(0.45,0.05,0.55,0.95), background 3s ease, box-shadow 3s ease;
  box-shadow: 0 6px 32px rgba(90,158,114,0.45), 0 0 60px rgba(90,158,114,0.15);
}
.orb-idle .orb-core {
  animation: orbIdlePulse 3.5s ease-in-out infinite;
}
@keyframes orbIdlePulse {
  0%, 100% { transform: scale(0.95); box-shadow: 0 6px 24px rgba(90,158,114,0.3), 0 0 40px rgba(90,158,114,0.1); }
  50%       { transform: scale(1.07); box-shadow: 0 8px 44px rgba(90,158,114,0.55), 0 0 80px rgba(90,158,114,0.22); }
}
.orb-count {
  font-size: 28px; font-weight: 300; color: white;
  font-family: 'DM Sans', sans-serif; line-height: 1;
}
.orb-phase-label {
  margin-top: 20px;
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  letter-spacing: 0.06em; text-align: center;
  min-height: 18px;
  transition: opacity 0.4s ease;
}
.orb-cycle-count {
  margin-top: 6px;
  font-size: 11px; color: var(--text-muted);
  text-align: center;
}

/* Contextual card (new) */
.home-context-card {
  padding: 16px;
  min-height: 64px;
  cursor: default;
}
.ctx-row {
  display: flex; align-items: center; gap: 12px;
}
.ctx-icon-lg { font-size: 26px; flex-shrink: 0; }
.ctx-body { flex: 1; }
.ctx-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; line-height: 1.3; }
.ctx-sub   { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.ctx-arrow { font-size: 20px; color: var(--text-muted); }
.ctx-btn {
  margin-top: 12px; width: 100%;
  padding: 11px; background: var(--primary-dim);
  border: 1.5px solid var(--primary-glow); border-radius: 12px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: all 0.15s ease;
}
.ctx-btn:active { background: var(--primary); color: white; }
.ctx-scale-row {
  display: flex; gap: 6px; margin-top: 12px;
}
.ctx-scale-btn {
  flex: 1; padding: 10px 4px;
  background: var(--bg-card-2); border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); cursor: pointer;
  font-family: 'DM Sans', sans-serif; text-align: center;
  transition: all 0.15s ease;
}
.ctx-scale-btn:active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }

/* Rhythm Score card (new) */
.home-score-card {
  padding: 18px 16px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
}
.score-arc-wrap { position: relative; width: 120px; height: 80px; margin-bottom: 4px; }
.score-svg { width: 120px; height: 80px; }
.score-center {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.score-num {
  font-size: 26px; font-weight: 300; color: var(--text);
  line-height: 1;
}
.score-word {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 2px;
}
.score-trend {
  font-size: 12px; color: var(--text-dim); margin-top: 4px;
}
.score-tap-hint {
  font-size: 11px; color: var(--text-muted); margin-top: 6px;
}

/* SOS button */
.home-sos-wrap {
  display: flex; justify-content: center;
  padding: 4px 16px 0;
  position: sticky; bottom: calc(88px + var(--safe-bottom));
  z-index: 10; pointer-events: none;
}
.home-sos-btn {
  pointer-events: all;
  background: linear-gradient(135deg, #e8725a 0%, #C9746A 100%);
  color: white; border: none; border-radius: 32px;
  padding: 16px 40px; font-size: 16px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
  width: 214px;
  box-shadow: 0 4px 24px rgba(232,114,90,0.45);
  animation: sosPulse 2.8s ease-in-out infinite;
  transition: transform 0.12s ease;
}
.home-sos-btn:active { transform: scale(0.93); animation: none; }
@keyframes sosPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(232,114,90,0.45); }
  50%       { box-shadow: 0 4px 42px rgba(232,114,90,0.72); }
}

/* Quick actions */
.home-quick-row {
  display: flex; gap: 8px; margin: 10px 16px 0;
}
.quick-pill {
  flex: 1; padding: 10px 4px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong); border-radius: 20px;
  font-size: 11px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  text-align: center; white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 6px rgba(180,80,60,0.06);
}
.quick-pill:active { background: var(--primary-dim); border-color: var(--primary); transform: scale(0.97); }

/* Medical disclaimer footer */
.home-disclaimer {
  text-align: center; padding: 16px 20px 6px;
  font-size: 10px; color: var(--text-muted);
  opacity: 0.65; letter-spacing: 0.03em;
}

/* ============================================================
   STATE PICKER
   ============================================================ */
.sp-wrap {
  display: flex; flex-direction: column;
  min-height: 100%; padding: 48px 24px 32px;
  justify-content: center;
}
.sp-orb-wrap {
  position: relative; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.sp-orb-ambient {
  position: absolute; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,116,106,0.16) 0%, transparent 70%);
  animation: orbBreath 3.5s ease-in-out infinite;
  pointer-events: none;
}
.sp-orb-ring {
  position: absolute; width: 80px; height: 80px; border-radius: 50%;
  border: 1.5px solid rgba(201,116,106,0.22);
  animation: orbBreath 3.5s ease-in-out infinite 0.2s;
}
.sp-orb-core {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(201,116,106,0.88), rgba(201,116,106,0.62));
  box-shadow: 0 4px 20px rgba(201,116,106,0.38);
  animation: orbBreath 3.5s ease-in-out infinite;
}
@keyframes orbBreath {
  0%, 100% { transform: scale(0.93); opacity: 0.8; }
  50%       { transform: scale(1.07); opacity: 1; }
}
.sp-header { margin-bottom: 24px; }
.sp-greeting {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.sp-headline { font-size: 28px; font-weight: 400; color: var(--text); line-height: 1.25; margin-bottom: 0; }
.sp-sub { font-size: 14px; color: var(--text-dim); }
.sp-cards { display: flex; flex-direction: column; gap: 12px; }
.sp-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border-radius: 20px; padding: 18px;
  box-shadow: 0 2px 16px rgba(180,80,60,0.07);
  border: 2px solid transparent;
  cursor: pointer; transition: all 0.15s ease;
}
.sp-card:active { transform: scale(0.98); }
.sp-card--struggling:active { background: var(--primary-dim); border-color: var(--primary); }
.sp-card--log:active        { background: rgba(201,168,76,0.08); border-color: #C9A84C; }
.sp-card--gateway:active    { background: rgba(90,158,114,0.08); border-color: var(--secondary); }
.sp-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.sp-icon--coral { background: var(--primary-dim); }
.sp-icon--sage  { background: rgba(90,158,114,0.12); }
.sp-icon--gold  { background: rgba(201,168,76,0.12); }
.sp-card-body { flex: 1; }
.sp-card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.sp-card-sub   { font-size: 12px; color: var(--text-dim); }
.sp-card-chevron { font-size: 22px; color: var(--text-muted); }
/* Check-in sub-card */
.sp-checkin-sub {
  margin-top: 14px;
  background: var(--bg-card); border-radius: 16px; padding: 13px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border); cursor: pointer;
  transition: all 0.15s ease;
}
.sp-checkin-sub:active { transform: scale(0.98); }
.sp-checkin-left { display: flex; align-items: center; gap: 8px; }
.sp-checkin-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sp-checkin-dot--empty { background: var(--border-strong); }
.sp-checkin-dot--done  { background: var(--secondary); }
.sp-checkin-label { font-size: 13px; font-weight: 600; color: var(--text); }
.sp-checkin-cta { font-size: 12px; color: var(--text-dim); }
.sp-disclaimer {
  text-align: center; margin-top: 24px;
  font-size: 10px; color: var(--text-muted); opacity: 0.6; letter-spacing: 0.03em;
}
/* Stagger anims */
.sp-anim-1 { animation: spCardIn 0.4s ease 0s both; }
.sp-anim-2 { animation: spCardIn 0.4s ease 0.08s both; }
.sp-anim-3 { animation: spCardIn 0.4s ease 0.16s both; }
.sp-anim-4 { animation: spCardIn 0.4s ease 0.24s both; }
@keyframes spCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Help bottom sheet */
.help-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(45,31,30,0.5); backdrop-filter: blur(4px);
  z-index: 1000; opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.help-sheet-backdrop.open { opacity: 1; pointer-events: all; }
.help-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-card); border-radius: 28px 28px 0 0;
  padding: 0 24px 40px; z-index: 1001;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
  max-width: 480px; margin: 0 auto;
}
.help-sheet.open { transform: translateY(0); }
.help-sheet-handle {
  width: 40px; height: 4px; background: var(--border-strong);
  border-radius: 2px; margin: 16px auto 24px;
}
.help-sheet-orb-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.help-sheet-orb {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(201,116,106,0.88), rgba(201,116,106,0.62));
  box-shadow: 0 4px 16px rgba(201,116,106,0.32);
  animation: orbBreath 3.5s ease-in-out infinite;
}
.help-sheet-title {
  font-size: 24px; font-weight: 400; color: var(--text);
  text-align: center; margin-bottom: 8px;
}
.help-sheet-sub {
  font-size: 14px; color: var(--text-dim);
  text-align: center; margin-bottom: 28px; line-height: 1.5;
}
.help-sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.help-sheet-btn-breathing {
  background: var(--secondary-dim); color: var(--secondary);
  border: none; width: 100%; padding: 16px; border-radius: 14px;
  font-size: 16px; font-weight: 600; cursor: pointer; font-family: 'DM Sans',sans-serif;
}
.help-sheet-dismiss {
  background: none; border: none; color: var(--text-dim);
  font-size: 13px; cursor: pointer; width: 100%; padding: 8px; text-align: center;
}

/* Chat header orb */
.chat-header-orb {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, rgba(201,116,106,0.88), rgba(201,116,106,0.62));
  box-shadow: 0 4px 14px rgba(201,116,106,0.32);
  animation: orbBreath 3.5s ease-in-out infinite;
}

/* Context card streak progress bar */
.ctx-streak-progress {
  height: 4px; background: var(--border);
  border-radius: 2px; margin-top: 10px; overflow: hidden;
}
.ctx-streak-fill {
  height: 100%; background: var(--secondary);
  border-radius: 2px; transition: width 0.6s ease;
}

/* ============================================================
   STRUGGLING HOME
   ============================================================ */
.hs-wrap { padding: 48px 16px 24px; }
.hs-header { margin-bottom: 20px; padding: 0 4px; }
.hs-greeting { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.hs-headline { font-size: 28px; font-weight: 400; color: var(--text); margin-bottom: 6px; }
.hs-sub { font-size: 14px; color: var(--text-dim); }
.hs-primary-card { padding: 20px; }
.hs-quote { font-size: 14px; font-style: italic; color: var(--text-dim); line-height: 1.6; margin-bottom: 18px; }
.hs-tools-card { padding: 16px; }
.hs-tool-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border-radius: 12px; padding: 13px 12px;
  margin-bottom: 8px; cursor: pointer; transition: transform 0.15s ease;
}
.hs-tool-row:last-child { margin-bottom: 0; }
.hs-tool-row:active { transform: scale(0.98); }
.hs-tool-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.hs-tool-body { flex: 1; }
.hs-tool-name { font-size: 14px; font-weight: 600; color: var(--text); }
.hs-tool-sub  { font-size: 12px; color: var(--text-dim); }
.hs-tool-chevron { font-size: 18px; color: var(--text-muted); }
.hs-anim-1 { animation: spCardIn 0.4s ease 0s both; }
.hs-anim-2 { animation: spCardIn 0.4s ease 0.08s both; }

/* ============================================================
   CHECKIN HOME
   ============================================================ */
.hc-wrap { padding: 48px 16px 24px; }
.hc-header { margin-bottom: 20px; padding: 0 4px; }
.hc-greeting { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.hc-headline { font-size: 28px; font-weight: 400; color: var(--text); margin-bottom: 6px; }
.hc-sub { font-size: 14px; color: var(--text-dim); }
.hc-checkin-card { padding: 18px 16px 16px; }
.hc-mood-row { display: flex; gap: 8px; margin-bottom: 4px; }
.hc-mood-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px; background: var(--bg-card-2);
  border: 2px solid transparent; border-radius: 16px; cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1); font-family: 'DM Sans',sans-serif;
}
.hc-mood-btn:active { transform: scale(0.96); }
.hc-mood-btn.sel-calm    { border-color: var(--secondary); background: rgba(90,158,114,0.10); box-shadow: 0 0 0 3px rgba(90,158,114,0.18); }
.hc-mood-btn.sel-off     { border-color: #C9A84C; background: rgba(201,168,76,0.10); box-shadow: 0 0 0 3px rgba(201,168,76,0.18); }
.hc-mood-btn.sel-anxious { border-color: var(--primary); background: var(--primary-dim); box-shadow: 0 0 0 3px var(--primary-glow); }
.hc-mood-emoji { font-size: 28px; line-height: 1; }
.hc-mood-label { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; }
.hc-mood-response {
  margin-top: 14px; font-size: 15px; font-style: italic;
  color: var(--text-dim); text-align: center; line-height: 1.5;
  animation: spCardIn 0.3s ease both;
}
/* Score + stats side by side */
.hc-score-stats {
  display: flex; gap: 10px; margin: 0 0 10px;
}
.hc-score-card {
  flex: 1; padding: 14px 10px 10px;
  display: flex; flex-direction: column; align-items: center;
  position: relative; cursor: pointer;
}
.hc-score-svg { width: 100px; height: 70px; }
.hc-score-center {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  text-align: center;
}
.hc-score-num { font-size: 22px; font-weight: 300; color: var(--text); line-height: 1; }
.hc-score-label { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.hc-score-trend { font-size: 11px; color: var(--text-dim); margin-top: 4px; text-align: center; }
.hc-stats-col { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hc-stat-card { padding: 12px 14px; flex: 1; }
.hc-stat-label { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.hc-stat-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.hc-stat-num.coral { color: var(--primary); }
.hc-stat-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* Streak card */
.hc-streak-card {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.hc-streak-left { display: flex; align-items: center; gap: 12px; }
.hc-streak-icon { font-size: 22px; }
.hc-streak-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.hc-streak-sub   { font-size: 12px; color: var(--text-dim); }
.hc-streak-dots  { display: flex; gap: 5px; flex-shrink: 0; }
.hc-streak-dot   { width: 8px; height: 8px; border-radius: 50%; }
.hc-streak-dot.filled { background: var(--secondary); }
.hc-streak-dot.empty  { background: var(--border-strong); }
/* Quick grid */
.hc-quick-grid { display: flex; gap: 8px; margin-bottom: 12px; }
.hc-quick-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px; background: var(--bg-card);
  border: 1.5px solid var(--border-strong); border-radius: 16px;
  cursor: pointer; transition: all 0.15s ease;
  font-family: 'DM Sans',sans-serif; box-shadow: 0 1px 6px rgba(180,80,60,0.06);
}
.hc-quick-btn:active { background: var(--primary-dim); border-color: var(--primary); transform: scale(0.97); }
.hc-quick-icon  { font-size: 22px; }
.hc-quick-label { font-size: 11px; font-weight: 600; color: var(--text-dim); }
/* Stagger */
.hc-anim-1 { animation: spCardIn 0.4s ease 0.05s both; }
.hc-anim-2 { animation: spCardIn 0.4s ease 0.13s both; }
.hc-anim-3 { animation: spCardIn 0.4s ease 0.21s both; }
.hc-anim-4 { animation: spCardIn 0.4s ease 0.29s both; }

/* ============================================================
   PATTERNS HOME
   ============================================================ */
.hp-wrap { padding: 48px 16px 24px; }
.hp-header { margin-bottom: 20px; padding: 0 4px; }
.hp-greeting { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.hp-headline { font-size: 28px; font-weight: 400; color: var(--text); margin-bottom: 6px; }
.hp-sub { font-size: 14px; color: var(--text-dim); }
.hp-insight-card { padding: 18px; background: linear-gradient(135deg, rgba(90,158,114,0.08), rgba(90,158,114,0.03)); }
.hp-insight-text { font-size: 15px; font-style: italic; color: var(--text); line-height: 1.6; margin: 10px 0 14px; }
.hp-ghost-btn { background: none; border: 1.5px solid var(--secondary); color: var(--secondary); border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'DM Sans',sans-serif; }
.hp-insight-empty { padding: 16px; }
.hp-insight-empty-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.hp-triggers-card { padding: 16px; }
.hp-trigger-row { margin-bottom: 12px; }
.hp-trigger-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: flex; justify-content: space-between; }
.hp-trigger-pct { font-size: 12px; color: var(--text-dim); }
.hp-trigger-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.hp-trigger-bar-fill { height: 100%; background: var(--primary); border-radius: 3px; width: 0; transition: width 0.8s ease; }
.hp-trigger-empty { font-size: 13px; color: var(--text-dim); line-height: 1.5; padding: 4px 0; }
.hp-anim-1 { animation: spCardIn 0.4s ease 0.05s both; }
.hp-anim-2 { animation: spCardIn 0.4s ease 0.13s both; }
.hp-anim-3 { animation: spCardIn 0.4s ease 0.21s both; }

/* ============================================================
   SOS MODAL
   ============================================================ */
.sos-modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(255,245,243,0.97);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  animation: sosFadeIn 0.25s ease both;
  padding: 24px;
}
@keyframes sosFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sos-modal-sheet { width: 100%; max-width: 300px; text-align: center; }
.sos-icon-wrap { margin-bottom: 16px; }
.sos-icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary-dim); border: 2px solid var(--primary-glow);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto;
  animation: sosPulse 2.5s ease-in-out infinite;
}
@keyframes sosPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,114,90,0.25); }
  50%      { box-shadow: 0 0 0 10px rgba(232,114,90,0); }
}
.sos-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.sos-headline { font-size: 26px; font-weight: 300; color: var(--text); margin-bottom: 10px; }
.sos-body { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-bottom: 24px; }


/* ============================================================
   BREATHING SCREEN
   ============================================================ */
#screen-breathing {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.breathing-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--safe-top) 0 var(--safe-bottom);
}
.breathing-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  flex-shrink: 0;
}
.breathing-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.breathing-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.breathing-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  gap: 0;
}
.breathing-sub {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 48px;
}
.orb-scene {
  position: relative;
  width: 230px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.breathing-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 16px;
  flex-shrink: 0;
}

/* ============================================================
   HISTORY CARD (struggling home)
   ============================================================ */
.hs-hist-card {
  padding: 18px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(45,31,30,0.07);
  animation: hsCardIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.hs-hist-headline {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 14px;
}
.hs-hist-list {
  margin-bottom: 14px;
}
.hs-hist-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 0;
  flex-wrap: wrap;
}
.hs-hist-sensation {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.hs-hist-dot {
  font-size: 12px;
  color: var(--border-strong);
}
.hs-hist-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.hs-hist-intro {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}
.hs-hist-evidence {
  font-size: 14px;
  font-style: italic;
  color: var(--secondary);
  font-family: 'Playfair Display', serif;
  margin: 0;
  line-height: 1.5;
}
.hs-hist-bottom {
  font-size: 13px;
  font-style: italic;
  color: var(--secondary);
  font-family: 'Playfair Display', serif;
  margin: 6px 0 0;
  line-height: 1.5;
}
.hs-hist-empty-text {
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
  font-family: 'Playfair Display', serif;
  margin: 0;
  line-height: 1.65;
}

/* Back button for home screens */
.screen-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 0 10px;
  display: flex;
  align-items: center;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.screen-back-btn:active { opacity: 1; }

/* ============================================================
   TRIGGER TAGS SCREEN
   ============================================================ */

.trigger-section {
  margin-bottom: 4px;
}

.trigger-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 20px 10px;
  text-transform: uppercase;
}

.trigger-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px 18px;
}

.trigger-chip {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  text-align: center;
  box-shadow: var(--shadow-card);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.trigger-chip.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
}

.trigger-chip:active {
  transform: scale(0.95);
}

.trigger-chip-icon {
  font-size: 26px;
  line-height: 1;
}

.trigger-chip-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.trigger-position-row {
  display: flex;
  gap: 10px;
  padding: 0 20px 22px;
}

.trigger-position-btn {
  flex: 1;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-shadow: var(--shadow-card);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.trigger-position-btn.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--text);
}

/* ============================================================
   TRIGGER TAGS — PATTERNS SCREEN DISPLAY
   ============================================================ */

.trigger-tag-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trigger-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trigger-tag-icon {
  font-size: 17px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.trigger-tag-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
}

.trigger-tag-bar-wrap {
  width: 80px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.trigger-tag-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary-dark));
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.trigger-tag-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.trig-data-source {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 14px;
  text-align: center;
  line-height: 1.4;
}

.trig-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 0 4px;
  gap: 6px;
}

.trig-empty-icon {
  font-size: 28px;
  margin-bottom: 2px;
}

.trig-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}

.trig-empty-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 260px;
}

.patterns-section-block {
  margin-bottom: 20px;
}

/* ============================================================
   TRIGGER FLOW — 6-step conversational logging
   ============================================================ */

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

#trigger-flow-content {
  padding-bottom: 40px;
  min-height: 100%;
}

.tf-step {
  display: flex;
  flex-direction: column;
}

/* Progress */
.tf-progress {
  padding: 16px 20px 0;
  margin-bottom: 4px;
}
.tf-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tf-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.tf-step-pct {
  font-size: 11px;
  color: var(--text-muted);
}
.tf-progress-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.tf-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #c8604a, #e8725a);
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Header */
.tf-header {
  padding: 20px 20px 12px;
}
.tf-category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.tf-question {
  font-size: 24px;
  font-weight: 400;
  font-family: 'Playfair Display', Georgia, serif;
  color: #2c1810;
  line-height: 1.3;
  margin-bottom: 6px;
}
.tf-why {
  font-size: 12px;
  font-style: italic;
  color: #b09888;
  margin-bottom: 6px;
  line-height: 1.45;
}
.tf-type-hint {
  font-size: 11px;
  color: #b09888;
  letter-spacing: 0.06em;
}

/* Chip grid */
.tf-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 20px 12px;
}

.tf-chip {
  width: 100%;
  min-height: 76px;
  border-radius: 16px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: #ffffff;
  border: 1.5px solid #f0e6e0;
  color: #2c1810;
  text-align: center;
  box-shadow: 0 1px 4px rgba(44,24,16,0.05);
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tf-chip:active { transform: scale(0.96); }
.tf-chip--selected { transform: scale(1.02); box-shadow: 0 2px 8px rgba(44,24,16,0.08); }
.tf-chip-emoji { font-size: 24px; line-height: 1; }
.tf-chip-label { font-size: 12px; font-weight: 500; color: inherit; line-height: 1.3; }

/* Other input */
.tf-other-input {
  display: block;
  width: calc(100% - 40px);
  margin: 4px 20px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #f0e6e0;
  background: #ffffff;
  font-size: 14px;
  color: #2c1810;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.tf-other-input:focus { border-color: rgba(200,96,74,0.50); }
.tf-other-input::placeholder { color: #b09888; }

.tf-extra-note {
  font-size: 11px;
  font-style: italic;
  color: #b09888;
  padding: 0 20px 10px;
  line-height: 1.4;
}

/* Actions */
.tf-actions {
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-continue-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #c8604a, #e8725a);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(200,96,74,0.20);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.tf-continue-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(200,96,74,0.15); }
.tf-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tf-back-btn, .tf-skip-btn {
  background: none;
  border: none;
  color: #b09888;
  font-size: 13px;
  padding: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tf-back-btn:active, .tf-skip-btn:active { opacity: 0.6; }

/* Group label for grouped_multi chips */
.tf-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b09888;
  padding: 12px 20px 6px;
}
.tf-group-label:first-child { padding-top: 4px; }

/* Notes textarea on final step */
.tf-notes-textarea {
  display: block;
  width: calc(100% - 40px);
  margin: 8px 20px 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.5;
  resize: none;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}
.tf-notes-textarea:focus { border-color: rgba(200,96,74,0.45); }
.tf-notes-textarea::placeholder { color: #b09888; }

/* Worried section */
.tf-worried-section {
  padding: 4px 20px 8px;
}
.tf-worried-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.tf-worried-btns {
  display: flex;
  gap: 8px;
}
.tf-worried-btn {
  flex: 1;
  padding: 10px 8px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tf-worried-btn.selected {
  background: rgba(200,96,74,0.12);
  border-color: rgba(200,96,74,0.55);
  color: #c8604a;
  font-weight: 600;
}

.medical-disclaimer-inline {
  text-align: center;
  font-size: 11px;
  color: #b09888;
  padding: 12px 20px 4px;
  line-height: 1.4;
}

/* ============================================================
   TRIGGER FLOW COMPLETION SCREEN
   ============================================================ */

.tfc-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 20px;
  text-align: center;
}
.tfc-check { margin-bottom: 16px; }
.tfc-check-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(90,138,114,0.12);
  color: #5a8a72;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.tfc-logged-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5a8a72;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tfc-headline {
  font-size: 26px;
  font-weight: 400;
  font-family: 'Playfair Display', Georgia, serif;
  color: #2c1810;
  margin-bottom: 12px;
  line-height: 1.3;
}
.tfc-body {
  font-size: 14px;
  font-style: italic;
  font-family: 'Playfair Display', Georgia, serif;
  color: #b09888;
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 24px;
}
.tfc-summary {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f0e6e0;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}
.tfc-summary-row { margin-bottom: 12px; }
.tfc-summary-row:last-child { margin-bottom: 0; }
.tfc-summary-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.tfc-summary-vals { font-size: 13px; color: #6b4c44; line-height: 1.4; }
.tfc-insights { width: 100%; margin-bottom: 24px; text-align: left; }
.tfc-insights-label {
  font-size: 11px;
  font-weight: 700;
  color: #b09888;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tfc-insight-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.tfc-insight-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tfc-badge--strong   { background: rgba(200,96,74,0.12);  color: #c8604a; }
.tfc-badge--likely   { background: rgba(184,134,78,0.12); color: #b8864e; }
.tfc-badge--possible { background: rgba(90,138,114,0.12); color: #5a8a72; }
.tfc-insight-msg { font-size: 13px; color: #2c1810; line-height: 1.45; }
.tfc-done-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #c8604a, #e8725a);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(200,96,74,0.20);
  margin-bottom: 20px;
  transition: transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.tfc-done-btn:active { transform: scale(0.97); }

/* Flat 2-column trigger grid — redesigned with column layout */
.tf-chip-grid--flat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 20px 12px;
}
.tf-chip--flat {
  min-height: 88px;
  padding: 12px 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 16px;
  text-align: center;
}
.tf-chip--flat .tf-chip-emoji { font-size: 24px; margin-bottom: 6px; }
.tf-chip--flat .tf-chip-text {
  display: flex; flex-direction: column; align-items: center;
}
.tf-chip--flat .tf-chip-label {
  font-size: 13px; font-weight: 500;
  text-align: center; line-height: 1.3;
  color: var(--text);
}
.tf-chip--flat .tf-chip-sublabel {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px; line-height: 1.3;
  text-align: center;
}
.tf-chip--flat.tf-chip--selected .tf-chip-label { color: inherit; }
.tf-chip--flat.tf-chip--selected .tf-chip-sublabel { color: inherit; opacity: 0.7; }

/* Bordered notes textarea */
.tf-notes-textarea--bordered {
  border-color: rgba(200,96,74,0.30) !important;
}

/* Serif headline variant for completion screen */
.tfc-headline--serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}

/* ============================================================
   FIRST-RUN HOME GUIDE OVERLAY
   ============================================================ */
#home-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.hg-backdrop {
  position: absolute;
  inset: 0;
  /* Backdrop is now handled by the ring's outer box-shadow so the spotlight
     punches out the highlighted card cleanly instead of dimming it too. */
  background: transparent;
}
.hg-spotlight-ring {
  position: fixed;
  border: 2px solid rgba(201, 116, 106, 0.90);
  box-shadow:
    0 0 0 9999px rgba(35, 16, 14, 0.62),
    0 0 0 6px rgba(201, 116, 106, 0.14),
    0 0 32px rgba(201, 116, 106, 0.28);
  pointer-events: none;
  z-index: 2001;
  transition: top 0.32s ease, left 0.32s ease,
              width 0.32s ease, height 0.32s ease,
              opacity 0.25s;
}
.hg-tooltip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border-radius: 20px;
  padding: 22px 22px 18px;
  width: calc(100vw - 48px);
  max-width: 340px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.18);
  pointer-events: all;
  z-index: 2002;
  transition: top 0.32s ease, bottom 0.32s ease, opacity 0.22s;
}
.hg-step-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.hg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(201, 116, 106, 0.20);
  transition: background 0.25s, transform 0.25s;
}
.hg-dot--active {
  background: var(--primary);
  transform: scale(1.3);
}
.hg-title {
  font-size: 19px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}
.hg-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.hg-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hg-btn-skip {
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.hg-btn-next {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.hg-btn-next:active { background: var(--primary-dark); }

/* ============================================================
   PROFILE BACK ROW
   ============================================================ */
.profile-nav-row {
  padding: max(env(safe-area-inset-top, 16px), 16px) 20px 0;
}

/* ============================================================
   SUBSCRIPTION MANAGEMENT MODAL
   ============================================================ */
.sub-modal-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sub-modal-option:last-child { border-bottom: none; }
.sub-modal-option:active { opacity: 0.7; }
.sub-modal-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sub-modal-icon--gold { background: rgba(201, 168, 76, 0.12); }
.sub-modal-icon--rose { background: var(--primary-dim); }
.sub-modal-option-body { flex: 1; }
.sub-modal-option-title { font-size: 15px; font-weight: 600; color: var(--text); }
.sub-modal-option-sub   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sub-modal-option-title--cancel { color: var(--primary); }
.sub-modal-arrow { color: var(--text-muted); }
.sub-modal-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sub-modal-status-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 20px;
  background: var(--secondary-dim);
  color: var(--secondary);
}
.sub-modal-status-badge--inactive {
  background: var(--primary-dim);
  color: var(--primary);
}


/* ============================================================
   QUIET DAY CARD + CELEBRATION ANIMATION
   ============================================================ */

/* Quiet day card — smaller, softer style below the 3 main cards */
.sp-card--quiet {
  border-style: dashed;
  border-color: var(--secondary);
  background: rgba(90, 158, 114, 0.04);
  padding: 14px 16px;
  min-height: 60px;
}
.sp-card--quiet:active {
  transform: scale(0.98);
  border-color: var(--secondary);
  background: rgba(90, 158, 114, 0.1);
}

/* Quiet days row in Heart Gateway */
.hp-quiet-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Celebration burst — floats from center of screen */
.quiet-day-burst {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: 28px;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  gap: 8px;
  animation: quietDayBurst 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  white-space: nowrap;
  filter: drop-shadow(0 2px 8px rgba(90, 158, 114, 0.5));
}
@keyframes quietDayBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  65%  { opacity: 1; transform: translate(-50%, -60%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.9); }
}


/* ============================================================
   HEART GATEWAY REDESIGN — rg- prefix
   ============================================================ */

:root {
  --rg-bg:           #fdf8f6;
  --rg-surface:      #ffffff;
  --rg-surface-warm: #fdf3ef;
  --rg-border:       #f0e6e0;
  --rg-border-up:    #e8d8d0;
  --rg-coral:        #c8604a;
  --rg-coral-light:  #e8725a;
  --rg-coral-soft:   #f5e6e2;
  --rg-sage:         #5a8a72;
  --rg-sage-soft:    #eaf2ee;
  --rg-sage-mid:     #c8e0d0;
  --rg-sage-dark:    #3d6b52;
  --rg-sage-text:    #6a8c78;
  --rg-gold:         #b8864e;
  --rg-gold-soft:    #faf0e4;
  --rg-text:         #2c1810;
  --rg-text-sub:     #7a6058;
  --rg-text-muted:   #b09888;
  --rg-text-faint:   #d4c4bc;
  --rg-text-dim:     #c8bdb8;
}

@keyframes rg-arc {
  from { stroke-dashoffset: 220; }
  to   { stroke-dashoffset: var(--rg-arc-to, 132); }
}
@keyframes rg-fadeup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rg-dotpop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes rg-bargrow {
  from { width: 0%; }
}
@keyframes rg-scorecount {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrance animation helpers */
.rg-anim-0 { animation: rg-fadeup 0.45s ease 0ms   both; }
.rg-anim-1 { animation: rg-fadeup 0.45s ease 120ms both; }
.rg-anim-2 { animation: rg-fadeup 0.45s ease 180ms both; }
.rg-anim-3 { animation: rg-fadeup 0.45s ease 240ms both; }
.rg-anim-4 { animation: rg-fadeup 0.45s ease 300ms both; }

/* ── Screen wrapper ─────────────────────────────────────── */
#screen-home-patterns .rg-wrap {
  background: var(--rg-bg);
  max-width: 390px;
  margin: 0 auto;
  padding: 0 20px 140px;
}

/* ── Section 1 — Header ─────────────────────────────────── */
.rg-header {
  padding-top: 52px;
  margin-bottom: 24px;
  position: relative;
}
.rg-header .screen-back-btn {
  position: absolute;
  top: 12px; left: -8px;
}
.rg-greeting {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rg-text-muted); margin-bottom: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-headline {
  font-family: 'Lora', Georgia, serif;
  font-size: 30px; font-weight: 400; color: var(--rg-text);
  line-height: 1.15; margin-bottom: 4px;
}
.rg-sub {
  font-size: 13px; color: var(--rg-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Base card ──────────────────────────────────────────── */
.rg-card {
  background: var(--rg-surface);
  border-radius: 20px;
  border: 1px solid var(--rg-border);
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}
.rg-corner-decor {
  position: absolute; top: 0; right: 0;
  width: 130px; height: 130px;
  border-radius: 0 20px 0 130px;
  background: linear-gradient(135deg, #fdf3ef, #fdf8f6);
  pointer-events: none;
}

/* ── Shared label ───────────────────────────────────────── */
.rg-label-sm {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rg-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Section 2 — Score card ─────────────────────────────── */
.rg-score-inner {
  display: flex; flex-direction: row; gap: 16px;
  align-items: flex-start;
  padding: 24px 22px 0;
  position: relative;
}
.rg-ring-wrap { flex-shrink: 0; width: 108px; height: 108px; }
.rg-ring-svg  { width: 108px; height: 108px; display: block; }
.rg-arc-label-sm {
  font-size: 10px; fill: #b09888; letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-arc-score {
  font-size: 26px; font-weight: 300; fill: #2c1810;
  font-family: 'Lora', Georgia, serif;
  animation: rg-scorecount 0.8s ease 0.7s both;
}
.rg-score-context { flex: 1; padding-top: 4px; }
.rg-score-phrase {
  font-family: 'Lora', Georgia, serif;
  font-size: 15px; color: var(--rg-gold); font-style: italic;
  margin-bottom: 12px; line-height: 1.3; margin-top: 5px;
}
.rg-score-dots { display: flex; flex-direction: column; gap: 7px; }
.rg-dot-line   { display: flex; align-items: center; gap: 7px; }
.rg-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.rg-dot--sage    { background: var(--rg-sage); }
.rg-dot--neutral { background: var(--rg-border-up); }
.rg-dot-text {
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-dot-text--sage    { color: var(--rg-sage-text); }
.rg-dot-text--neutral { color: var(--rg-text-muted); }
.rg-divider { height: 1px; background: #f5ede8; margin: 18px 22px 16px; }
.rg-stats-row { display: flex; padding: 0 0 22px; }
.rg-stat-col {
  flex: 1; text-align: center; padding: 0 8px;
}
.rg-stat-col--bordered {
  border-left: 1px solid var(--rg-border);
  border-right: 1px solid var(--rg-border);
}
.rg-stat-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rg-text-muted); margin-bottom: 4px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-stat-val {
  font-family: 'Lora', Georgia, serif;
  font-size: 22px; font-weight: 300; line-height: 1.1; margin-bottom: 2px;
  display: block;
}
.rg-val--coral { color: var(--rg-coral); }
.rg-val--sage  { color: var(--rg-sage); }
.rg-val--dark  { color: var(--rg-text); }
.rg-stat-sub {
  font-size: 10px; color: var(--rg-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Section 3 — Quiet day card ─────────────────────────── */
.rg-quiet-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 20px 0; margin-bottom: 14px;
}
.rg-quiet-pill {
  background: var(--rg-sage-soft); border: 1px solid var(--rg-sage-mid);
  color: var(--rg-sage); font-size: 11px; padding: 2px 10px;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-legend {
  display: flex; gap: 14px; padding: 0 20px; margin-bottom: 12px;
}
.rg-legend-item { display: flex; align-items: center; gap: 5px; }
.rg-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rg-legend-dot--quiet   { background: var(--rg-sage-soft); border: 1.5px solid var(--rg-sage); }
.rg-legend-dot--episode { background: var(--rg-coral-soft); border: 1.5px solid var(--rg-coral); }
.rg-legend-dot--none    { background: var(--rg-bg); border: 1.5px dashed var(--rg-border-up); }
.rg-legend-text {
  font-size: 10px; color: var(--rg-text-muted); letter-spacing: 0.04em;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-legend-text--quiet { color: #8aad96; }
.rg-legend-text--faint { color: var(--rg-text-dim); }

/* 7-day grid */
.rg-days-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; padding: 0 20px; margin-bottom: 18px;
}
.rg-day-col {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  animation: rg-dotpop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.rg-day-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rg-day-dot--quiet   { background: var(--rg-sage-soft); border: 1.5px solid var(--rg-sage); }
.rg-day-dot--episode { background: var(--rg-coral-soft); border: 1.5px solid var(--rg-coral); }
.rg-day-dot--unlogged { background: var(--rg-bg); border: 1.5px dashed var(--rg-border-up); }
.rg-day-dot--future  { background: var(--rg-bg); border: 1.5px dashed var(--rg-border-up); opacity: 0.5; }
.rg-ep-dot-inner { width: 8px; height: 8px; border-radius: 50%; background: var(--rg-coral); }
.rg-day-label {
  font-size: 9px; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-day-label--quiet, .rg-day-label--episode { color: var(--rg-text-muted); }
.rg-day-label--unlogged { color: var(--rg-text-dim); }
.rg-day-label--future   { color: var(--rg-text-dim); opacity: 0.5; }

/* Streak cards */
.rg-streak-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 14px; padding: 0 20px;
}
.rg-streak-card { border-radius: 14px; padding: 12px 14px; }
.rg-streak-card--green   { background: var(--rg-sage-soft); border: 1px solid var(--rg-sage-mid); }
.rg-streak-card--neutral { background: var(--rg-bg); border: 1px solid var(--rg-border); }
.rg-streak-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 4px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-streak-label--green { color: var(--rg-sage); }
.rg-streak-card--neutral .rg-streak-label { color: var(--rg-text-muted); }
.rg-streak-val-row { display: flex; align-items: baseline; gap: 4px; }
.rg-streak-val {
  font-family: 'Lora', Georgia, serif;
  font-size: 28px; font-weight: 300;
}
.rg-streak-val--green { color: var(--rg-sage-dark); }
.rg-streak-card--neutral .rg-streak-val { color: var(--rg-text); }
.rg-streak-unit {
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-streak-unit--green { color: var(--rg-sage); }
.rg-streak-card--neutral .rg-streak-unit { color: var(--rg-text-muted); }

/* Progress bar */
#rg-progress-section { padding: 0 20px 20px; }
.rg-progress-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.rg-progress-label {
  font-size: 11px; color: var(--rg-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-progress-away {
  font-size: 11px; font-weight: 500; color: var(--rg-sage);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-progress-track { height: 6px; background: var(--rg-border); border-radius: 3px; overflow: hidden; }
.rg-progress-fill  { height: 100%; background: var(--rg-sage); border-radius: 3px; width: 0%; }

/* ── Section 4 — Insight card ───────────────────────────── */
.rg-insight-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 20px 0; margin-bottom: 6px;
}
.rg-ep-count {
  font-size: 10px; color: var(--rg-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-insight-quote {
  font-family: 'Lora', Georgia, serif;
  font-size: 15px; color: var(--rg-text); font-style: italic;
  line-height: 1.65; padding: 10px 20px 0; margin-bottom: 20px;
}
.rg-thin-divider { height: 1px; background: #f5ede8; margin: 0 20px 16px; }
.rg-patterns-label { padding: 0 20px; margin-bottom: 12px; display: block; }
#rg-trigger-list { padding: 0 20px; }
.rg-trigger-item { margin-bottom: 14px; }
.rg-trigger-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rg-trigger-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rg-trigger-dot--coral { background: var(--rg-coral); }
.rg-trigger-dot--gold  { background: var(--rg-gold); }
.rg-trigger-dot--sage  { background: var(--rg-sage); }
.rg-trigger-name {
  font-size: 14px; color: var(--rg-text); flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-trigger-badge {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-trigger-badge--coral { background: var(--rg-coral-soft); color: var(--rg-coral); }
.rg-trigger-badge--gold  { background: var(--rg-gold-soft);  color: var(--rg-gold); }
.rg-trigger-badge--sage  { background: var(--rg-sage-soft);  color: var(--rg-sage-text); }
.rg-trigger-bar-track { height: 4px; background: var(--rg-border); border-radius: 2px; overflow: hidden; }
.rg-trigger-bar-fill  { height: 100%; border-radius: 2px; width: 0%; }
.rg-trigger-bar-fill--coral { background: var(--rg-coral); }
.rg-trigger-bar-fill--gold  { background: var(--rg-gold); }
.rg-trigger-bar-fill--sage  { background: var(--rg-sage); }
.rg-trigger-empty {
  font-family: 'Lora', Georgia, serif;
  font-size: 13px; font-style: italic; color: var(--rg-text-muted); line-height: 1.5;
}
.pattern-nudge-pill {
  display: inline-block;
  font-size: 11px;
  color: #5a8a72;
  background: #eaf2ee;
  border: 1px solid #c8e0d0;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.rg-suggest-card {
  background: var(--rg-surface-warm); border-radius: 14px;
  border: 1px solid #f5e0d8; padding: 14px 16px;
  margin: 20px 20px 6px;
}
.rg-suggest-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rg-coral); font-weight: 500; margin-bottom: 4px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-suggest-text {
  font-family: 'Lora', Georgia, serif;
  font-size: 13px; color: var(--rg-text-sub); line-height: 1.6; margin: 0;
}
.rg-insight-spacer { height: 20px; }

/* ── Section 5 — Recent episodes card ──────────────────── */
#screen-home-patterns .rg-episodes-card { padding: 20px; }
.rg-ep-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #f5ede8;
}
.rg-ep-row--last { border-bottom: none; }
.rg-ep-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rg-ep-dot--coral { background: var(--rg-coral); }
.rg-ep-dot--gold  { background: var(--rg-gold); }
.rg-ep-body { flex: 1; min-width: 0; }
.rg-ep-title {
  font-size: 14px; font-weight: 500; color: var(--rg-text); margin: 0 0 1px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-ep-sub {
  font-size: 11px; color: var(--rg-text-muted); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-ep-badge {
  font-size: 11px; color: var(--rg-text-muted);
  background: var(--rg-bg); border: 1px solid var(--rg-border);
  padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.rg-ep-empty {
  font-family: 'Lora', Georgia, serif;
  font-size: 13px; font-style: italic; color: var(--rg-text-muted);
}

/* ── Disclaimer ─────────────────────────────────────────── */
#screen-home-patterns .rg-disclaimer {
  font-size: 10px; color: var(--rg-text-faint);
  letter-spacing: 0.06em; text-align: center; margin: 0 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Episode date bar (backdating chips on crisis-1) ────── */
#episode-date-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 24px;
  padding: 0 20px 12px;
}
#episode-date-bar::-webkit-scrollbar { display: none; }
.ep-date-chip {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 12px; border-radius: 14px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer; transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap; min-width: 52px;
  min-height: 52px; justify-content: center;
}
.ep-date-chip .ep-date-day { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.ep-date-chip .ep-date-num { font-size: 16px; font-weight: 700; line-height: 1.1; }
.ep-date-chip--today { color: var(--text); }
.ep-date-chip--today .ep-date-day { color: var(--text-muted); }
.ep-date-chip--today .ep-date-num { color: var(--text); }
.ep-date-chip:not(.ep-date-chip--today):not(.ep-date-chip--selected) .ep-date-day { color: var(--text-muted); }
.ep-date-chip:not(.ep-date-chip--today):not(.ep-date-chip--selected) .ep-date-num { color: var(--primary); }
.ep-date-chip--selected {
  background: var(--primary); color: white;
  border-color: var(--primary);
}
.ep-date-chip--selected .ep-date-day { color: rgba(255,255,255,0.85); }
.ep-date-chip--selected .ep-date-num { color: white; }

/* ── SW update banner ───────────────────────────────────── */
#sw-update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #c8604a; color: white;
  font-size: 14px; font-family: 'DM Sans', sans-serif;
}
#sw-update-banner span { flex: 1; }
#sw-update-btn {
  padding: 7px 14px; background: white; color: #c8604a;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap;
}
#sw-update-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.8);
  font-size: 18px; cursor: pointer; padding: 4px; line-height: 1;
}

/* ── Quiet day date picker ──────────────────────────────── */
.quiet-day-date-chip {
  padding: 10px 18px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
}
.quiet-day-date-chip--today { font-weight: 700; color: var(--text); }
.quiet-day-date-chip--selected {
  background: var(--secondary); color: white;
  border-color: var(--secondary);
}
.quiet-day-date-chip--logged {
  opacity: 0.45; pointer-events: none;
}

/* ── Quiet day trigger chips ────────────────────────────── */
.qd-trigger-chip {
  padding: 9px 14px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s ease;
}
.qd-trigger-chip--selected {
  background: var(--secondary); color: white;
  border-color: var(--secondary);
}

/* ── Health context toggle switch ───────────────────────── */
#hormonal-tracking-toggle:checked + #hormonal-tracking-slider {
  background: var(--secondary);
}
#hormonal-tracking-slider:before {
  content: ''; position: absolute;
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: .2s;
}
#hormonal-tracking-toggle:checked + #hormonal-tracking-slider:before {
  transform: translateX(20px);
}

/* ── Health context / medication profile buttons active ─── */
.hc-preg-btn--selected,
.hc-condition-btn--selected {
  background: var(--primary-dim) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 600;
}

/* ── Medications list item ──────────────────────────────── */
.med-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--bg-card-2); margin-bottom: 8px;
}
.med-list-item-text { flex: 1; font-size: 14px; color: var(--text); }
.med-list-item-dose { font-size: 12px; color: var(--text-muted); }
.med-list-item-remove {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 2px 6px; line-height: 1;
  border-radius: 6px; transition: color 0.15s;
}
.med-list-item-remove:hover { color: var(--primary); }

/* ============================================================
   PROFILE TABS
   ============================================================ */
.profile-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg);
  margin: 0 -20px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.profile-tab {
  flex: 1;
  height: 44px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s, border-color 0.15s;
}
.profile-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.profile-tab:active { opacity: 0.75; }
.profile-tab-panel { padding: 24px 0 100px; }
.profile-tab-panel.hidden { display: none; }

/* ============================================================
   NOTIFICATION SETTINGS (Settings tab)
   ============================================================ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.settings-row-left { flex: 1; }
.settings-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.settings-row-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.toggle-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  margin-left: 12px;
}
.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-strong);
  border-radius: 26px;
  transition: background 0.2s;
}
.toggle-track:before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.toggle-input:checked + .toggle-track {
  background: var(--primary);
}
.toggle-input:checked + .toggle-track:before {
  transform: translateX(18px);
}
.time-select {
  padding: 8px 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.settings-description {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}
.settings-confirm-msg {
  font-size: 12px;
  color: var(--secondary);
  margin-top: 8px;
  font-weight: 500;
}
.settings-confirm-msg.hidden { display: none; }

/* ============================================================
   HYPOTHESIS TESTING — Active Test Banner + Result
   ============================================================ */
.active-test-banner {
  background: linear-gradient(135deg, #5a8a72, #3d6b52);
  border-radius: 16px;
  padding: 16px 18px;
  color: white;
  margin: 0 0 16px;
}
.active-test-banner.hidden { display: none; }
.atb-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.atb-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.8;
  text-transform: uppercase;
}
.atb-end-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.atb-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 6px;
}
.atb-phase { font-size: 13px; opacity: 0.9; margin-bottom: 2px; }
.atb-days  { font-size: 12px; opacity: 0.75; margin-bottom: 12px; }
.atb-deviation-btn {
  background: white;
  color: #3d6b52;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.atb-deviation-btn.hidden { display: none; }
.test-result-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #5a8a72;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.result-details.hidden { display: none; }