:root {
  --bg: #f4faf9;
  --surface: #ffffff;
  --surface-soft: #eaf5f3;
  --primary: #1f5360;
  --primary-2: #76c5c2;
  --accent: #7ec9c5;
  --text: #173741;
  --muted: #6b7f84;
  --line: #d9e8e6;
  --success: #2f7d68;
  --warning: #a86c23;
  --danger: #a94d59;
  --shadow: 0 12px 35px rgba(24, 72, 78, 0.10);
  --radius: 22px;
  --radius-sm: 14px;
  --font-scale: 1;
}

[data-theme="ocean"] { --primary:#225d77; --primary-2:#7ab6cf; --accent:#80bfd8; --surface-soft:#eaf5fa; --bg:#f4f9fc; }
[data-theme="sage"] { --primary:#315f55; --primary-2:#91bea4; --accent:#a7ceb2; --surface-soft:#edf6ef; --bg:#f7fbf7; }
[data-theme="lavender"] { --primary:#5f547d; --primary-2:#b3a6d6; --accent:#c0b5df; --surface-soft:#f1eef8; --bg:#faf8fd; }
[data-contrast="high"] { --text:#071c22; --muted:#33484e; --line:#9cb9b5; }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }

* { box-sizing: border-box; }
html { font-size: calc(16px * var(--font-scale)); background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 0% 0%, rgba(118, 197, 194, .18), transparent 34rem),
    var(--bg);
  color: var(--text);
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display:flex; align-items:center; justify-content:space-between;
  min-height: 76px; padding: 12px max(18px, env(safe-area-inset-left)) 12px max(18px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.brand-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-logo { width: 128px; height:auto; object-fit:contain; }
.app-name { font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.header-subtitle { font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw; }

.main-content { width:min(980px, 100%); margin:0 auto; padding:18px 18px 40px; }
.screen { display:none; animation: fadeUp .22s ease; }
.screen.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.hero {
  position:relative; overflow:hidden;
  padding:26px; border-radius:28px; color:white;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 68%, var(--primary-2)));
  box-shadow:var(--shadow);
}
.hero::after { content:""; position:absolute; width:180px; height:180px; right:-60px; top:-70px; border-radius:50%; background:rgba(255,255,255,.10); }
.hero .date { font-size:.82rem; opacity:.85; text-transform:capitalize; }
.hero h1 { margin:.25rem 0 .4rem; font-size:clamp(1.75rem, 5vw, 2.6rem); line-height:1.08; letter-spacing:-.04em; }
.hero p { max-width:620px; margin:0; color:rgba(255,255,255,.88); }
.hero .hero-progress { display:flex; gap:10px; align-items:center; margin-top:18px; }
.hero .progress-track { flex:1; height:8px; background:rgba(255,255,255,.22); border-radius:999px; overflow:hidden; }
.hero .progress-fill { height:100%; width:0; background:white; border-radius:inherit; transition:width .35s ease; }
.hero .progress-text { font-size:.78rem; white-space:nowrap; }

.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.quick-action {
  appearance:none; border:1px solid var(--line); background:var(--surface); border-radius:18px;
  padding:13px 8px; min-height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 5px 18px rgba(24,72,78,.06); cursor:pointer; transition:.18s ease;
}
.quick-action:hover, .quick-action:focus-visible { transform:translateY(-2px); border-color:var(--accent); outline:none; }
.quick-action .qa-icon { font-size:1.25rem; }
.quick-action small { font-size:.72rem; color:var(--muted); text-align:center; }

.card-stack, .settings-stack, .chart-stack, .timeline { display:grid; gap:14px; }
.card, .settings-card, .chart-card, .timeline-item, .prompt-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 7px 24px rgba(24,72,78,.055);
}
.card { padding:18px; }
.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.card-title-wrap { display:flex; gap:12px; align-items:center; }
.card-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--surface-soft); color:var(--primary); font-size:1.15rem; flex:0 0 auto; }
.card h2, .settings-card h2, .chart-card h2 { margin:0; font-size:1.08rem; letter-spacing:-.02em; }
.card-subtitle { margin:.15rem 0 0; color:var(--muted); font-size:.82rem; }
.card-actions { display:flex; gap:8px; flex-wrap:wrap; }

.primary-button, .secondary-button, .ghost-button, .danger-button {
  border:0; border-radius:14px; padding:11px 15px; font-weight:750; cursor:pointer; transition:.16s ease;
}
.primary-button { color:white; background:var(--primary); box-shadow:0 8px 18px color-mix(in srgb, var(--primary) 20%, transparent); }
.secondary-button { color:var(--primary); background:var(--surface-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ghost-button { color:var(--primary); background:transparent; border:1px solid var(--line); }
.danger-button { color:white; background:var(--danger); }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover { filter:brightness(.97); transform:translateY(-1px); }
.small-button { padding:8px 10px; border-radius:12px; font-size:.8rem; }
.full-width { width:100%; }
.icon-button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; font-weight:800; cursor:pointer; }

.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:4px 0 18px; }
.section-heading h1 { font-size:clamp(1.8rem, 6vw, 2.6rem); margin:.15rem 0 .35rem; letter-spacing:-.045em; }
.section-heading p { margin:0; color:var(--muted); max-width:650px; }
.eyebrow { margin:0; color:var(--primary); font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.11em; }
.compact-select { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:10px 12px; color:var(--text); }

.med-list, .habit-list { display:grid; gap:10px; }
.med-row, .habit-row {
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; background:var(--surface-soft);
}
.med-row.done, .habit-row.done { opacity:.72; }
.med-time { font-weight:850; min-width:48px; }
.med-main, .habit-main { flex:1; min-width:0; }
.med-name, .habit-name { font-weight:780; }
.med-detail, .habit-detail { font-size:.78rem; color:var(--muted); margin-top:2px; }
.status-button { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:8px 10px; cursor:pointer; font-size:.8rem; }
.status-button.done { background:var(--success); color:white; border-color:transparent; }
.status-chip { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 9px; font-size:.72rem; background:var(--surface-soft); color:var(--primary); }
.status-chip.warning { color:var(--warning); background:#fff6e8; }
.status-chip.danger { color:var(--danger); background:#fff0f2; }

.score-row { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.score-button { border:1px solid var(--line); background:var(--surface); border-radius:14px; min-height:46px; cursor:pointer; }
.score-button.selected { color:white; background:var(--primary); border-color:var(--primary); }
.metric-bars { display:grid; gap:10px; }
.metric-line { display:grid; grid-template-columns:120px 1fr 38px; gap:10px; align-items:center; font-size:.82rem; }
.metric-bar { height:9px; background:var(--surface-soft); border-radius:999px; overflow:hidden; }
.metric-bar > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary-2),var(--primary)); }

.prompt-card { padding:20px; margin-bottom:14px; background:linear-gradient(135deg,var(--surface-soft),var(--surface)); }
.prompt-card .prompt-label { font-size:.75rem; color:var(--muted); margin-bottom:5px; }
.prompt-card blockquote { margin:0; font-size:1.08rem; font-weight:720; }
.timeline-item { padding:16px; }
.timeline-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:.75rem; margin-bottom:8px; }
.timeline-item h3 { margin:0 0 6px; font-size:1rem; }
.timeline-item p { margin:0; white-space:pre-wrap; }
.timeline-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

.module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.module-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; cursor:pointer; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; transition:.16s ease; }
.module-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.module-card .module-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--surface-soft); }
.module-card h3 { margin:14px 0 5px; }
.module-card p { margin:0; color:var(--muted); font-size:.82rem; }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.stat-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; }
.stat-value { font-size:1.6rem; font-weight:860; letter-spacing:-.04em; }
.stat-label { color:var(--muted); font-size:.76rem; margin-top:3px; }
.chart-card { padding:18px; }
.chart-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.chart { width:100%; min-height:160px; display:block; overflow:visible; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.chart-line { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart-area { fill:color-mix(in srgb, var(--primary-2) 25%, transparent); }
.chart-dot { fill:var(--surface); stroke:var(--primary); stroke-width:2; }
.chart-label { fill:var(--muted); font-size:10px; }

.settings-card { padding:18px; }
.settings-card-header { margin-bottom:14px; }
.settings-card-header p { margin:4px 0 0; color:var(--muted); font-size:.82rem; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.settings-row:first-of-type { border-top:0; }
.settings-row-text { min-width:0; }
.settings-row-text strong { display:block; }
.settings-row-text small { display:block; color:var(--muted); margin-top:2px; }
.switch { position:relative; width:48px; height:28px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; border-radius:999px; background:#cbd8d6; cursor:pointer; transition:.18s; }
.switch span::after { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; border-radius:50%; background:white; transition:.18s; box-shadow:0 2px 7px rgba(0,0,0,.15); }
.switch input:checked + span { background:var(--primary); }
.switch input:checked + span::after { transform:translateX(20px); }
.reorder-list { display:grid; gap:8px; }
.reorder-item { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.reorder-item span:first-child { flex:1; }
.reorder-controls { display:flex; gap:5px; }
.reorder-controls button { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.palette-row { display:flex; gap:8px; flex-wrap:wrap; }
.palette-button { width:42px; height:42px; border-radius:50%; border:3px solid white; box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.palette-button.selected { box-shadow:0 0 0 3px var(--primary); }
.palette-default { background:linear-gradient(135deg,#1f5360,#76c5c2); }
.palette-ocean { background:linear-gradient(135deg,#225d77,#7ab6cf); }
.palette-sage { background:linear-gradient(135deg,#315f55,#91bea4); }
.palette-lavender { background:linear-gradient(135deg,#5f547d,#b3a6d6); }

.bottom-nav {
  position:fixed; z-index:35; bottom:0; left:50%; transform:translateX(-50%);
  width:min(760px, calc(100% - 20px)); padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
  background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(20px);
  border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; box-shadow:0 -12px 35px rgba(24,72,78,.10);
}
.nav-item { border:0; background:transparent; border-radius:15px; padding:8px 4px 7px; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
.nav-item span { font-size:1.15rem; line-height:1; }
.nav-item small { font-size:.67rem; }
.nav-item.active { color:var(--primary); background:var(--surface-soft); font-weight:800; }

.modal { border:0; padding:0; width:min(620px, calc(100% - 24px)); max-height:min(88vh, 840px); border-radius:26px; background:transparent; color:var(--text); }
.modal::backdrop { background:rgba(7,30,34,.48); backdrop-filter:blur(5px); }
.modal-card { background:var(--surface); border:1px solid var(--line); border-radius:26px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.22); }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 20px 14px; border-bottom:1px solid var(--line); }
.modal-header h2 { margin:.2rem 0 0; font-size:1.45rem; letter-spacing:-.035em; }
.modal-body { padding:18px 20px; max-height:58vh; overflow:auto; display:grid; gap:15px; }
.modal-footer { padding:14px 20px 20px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); }
.onboarding-modal { max-height:94vh; }
.onboarding-card { padding:24px; overflow:auto; max-height:94vh; }
.onboarding-logo { width:190px; max-width:70%; margin-bottom:18px; }
.onboarding-card h1 { margin:.2rem 0 .5rem; font-size:2.35rem; letter-spacing:-.05em; }
.onboarding-intro { color:var(--muted); line-height:1.55; }
.privacy-note { font-size:.76rem; color:var(--muted); background:var(--surface-soft); padding:12px; border-radius:14px; }

.field { display:grid; gap:7px; }
.field > span, .field legend, .choice-group legend { font-weight:750; font-size:.86rem; }
.field small { color:var(--muted); font-weight:500; }
input[type="text"], input[type="time"], input[type="date"], input[type="number"], input[type="url"], textarea, select {
  width:100%; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:14px; padding:12px 13px; outline:none;
}
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
textarea { min-height:110px; resize:vertical; }
.choice-group { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.choice-group legend { width:100%; margin-bottom:4px; }
.choice-pill { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); cursor:pointer; }
.choice-pill:has(input:checked) { border-color:var(--primary); background:var(--surface-soft); color:var(--primary); font-weight:750; }
.choice-pill input { accent-color:var(--primary); }
.toggle-row { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:14px; background:var(--surface-soft); }
.toggle-row input { accent-color:var(--primary); width:18px; height:18px; }
.range-wrap { display:grid; grid-template-columns:1fr 44px; gap:10px; align-items:center; }
input[type="range"] { width:100%; accent-color:var(--primary); }
.range-value { text-align:center; font-weight:850; background:var(--surface-soft); padding:7px; border-radius:10px; }
.inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.checkbox-card { display:flex; gap:8px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:13px; }
.checkbox-card input { accent-color:var(--primary); }
.form-note { margin:0; color:var(--muted); font-size:.78rem; line-height:1.45; }
.divider { height:1px; background:var(--line); margin:2px 0; }

.empty-state { text-align:center; padding:26px 18px; border:1px dashed var(--line); border-radius:20px; background:color-mix(in srgb,var(--surface) 70%, transparent); }
.empty-icon { width:38px; height:38px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center; background:var(--surface-soft); font-size:1.3rem; }
.empty-state h3 { margin:0 0 5px; }
.empty-state p { margin:0; color:var(--muted); }
.toast { position:fixed; z-index:80; left:50%; bottom:102px; transform:translate(-50%,20px); opacity:0; pointer-events:none; color:white; background:var(--primary); border-radius:999px; padding:11px 16px; box-shadow:var(--shadow); font-size:.84rem; transition:.2s ease; max-width:calc(100% - 30px); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.safety-box { border-radius:16px; padding:14px; background:#fff5f6; border:1px solid #f1c7cd; }
.safety-box strong { color:var(--danger); }
.safety-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.safety-links a { text-align:center; text-decoration:none; padding:10px; border-radius:12px; font-weight:800; background:var(--danger); color:white; }
.address-card { background:var(--surface-soft); padding:14px; border-radius:16px; line-height:1.55; }
.disclaimer { color:var(--muted); font-size:.78rem; line-height:1.5; }

@media (max-width: 720px) {
  .brand-logo { width:104px; }
  .app-name { font-size:.88rem; }
  .header-subtitle { display:none; }
  .main-content { padding:14px 12px 34px; }
  .hero { padding:22px 19px; }
  .quick-actions { grid-template-columns:repeat(4,1fr); gap:7px; }
  .quick-action { min-height:68px; padding:10px 5px; }
  .module-grid { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .section-heading .primary-button { width:100%; }
  .metric-line { grid-template-columns:92px 1fr 32px; }
  .inline-fields, .checkbox-grid { grid-template-columns:1fr; }
}

@media (max-width: 410px) {
  .quick-actions { grid-template-columns:repeat(2,1fr); }
  .module-grid { grid-template-columns:1fr; }
  .bottom-nav { width:100%; border-radius:18px 18px 0 0; }
  .nav-item small { font-size:.61rem; }
}

@media print {
  .topbar, .bottom-nav, .quick-actions, button, .section-heading .compact-select { display:none!important; }
  body { background:white; }
  .app-shell { padding:0; }
  .main-content { width:100%; max-width:none; padding:0; }
  .screen { display:none!important; }
  #screen-trends { display:block!important; }
  .card, .chart-card, .stat-card { break-inside:avoid; box-shadow:none; }
}