:root {
  color-scheme: light dark;
  --page: #f8f7f4;
  --surface: #ffffff;
  --surface-soft: #f0efe9;
  --ink: #20201d;
  --muted: #797973;
  --line: #e6e4dc;
  --nav: rgba(255, 255, 255, .88);
  --coral: #df725b;
  --coral-soft: #f7dcd5;
  --lavender: #8e81d5;
  --lavender-soft: #e7e2f7;
  --mint: #4b9a83;
  --mint-soft: #d9eee6;
  --sky: #5a96c8;
  --sky-soft: #dceaf5;
  --sun: #c6912f;
  --sun-soft: #f8edce;
  --shadow: 0 10px 28px rgba(35, 34, 28, .07);
}

@media (prefers-color-scheme: dark) {
  :root { --page:#171816; --surface:#22231f; --surface-soft:#2d2e29; --ink:#f6f5ef; --muted:#aaa9a2; --line:#353630; --nav:rgba(34,35,31,.91); --shadow:0 10px 28px rgba(0,0,0,.21); --coral-soft:#583c35; --lavender-soft:#423d66; --mint-soft:#294d42; --sky-soft:#2e4659; --sun-soft:#554722; }
}

* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { width: min(100%, 680px); margin: 0 auto; min-height: 100vh; padding: calc(24px + env(safe-area-inset-top)) 20px calc(103px + env(safe-area-inset-bottom)); }
.screen { animation: rise .26s ease; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:25px; }
h1,h2,p { margin:0; }
h1 { font-size:clamp(29px,8vw,36px); letter-spacing:-1.2px; line-height:1.05; font-weight:700; }
h2 { font-size:18px; letter-spacing:-.35px; line-height:1.2; }
.eyebrow,.section-kicker { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:1.35px; text-transform:uppercase; margin-bottom:6px; }
.avatar,.add-circle { width:42px; height:42px; border-radius:50%; border:0; background:var(--ink); color:var(--page); font-weight:700; font-size:16px; display:grid; place-items:center; flex:0 0 auto; }
.add-circle { font-size:26px; font-weight:400; line-height:1; }
.icon-button { border:0; background:transparent; font-size:18px; padding:8px; letter-spacing:2px; }
.focus-card { background:var(--surface); box-shadow:var(--shadow); border-radius:26px; min-height:146px; display:flex; align-items:center; justify-content:space-between; padding:25px 23px; margin-bottom:27px; }
.focus-copy { max-width:205px; }.focus-copy strong { font-size:22px; letter-spacing:-.5px; display:block; margin-bottom:6px; }.focus-copy p:not(.section-kicker) { color:var(--muted); line-height:1.4; font-size:14px; }
.progress-orbit { --degree: 0deg; width:92px; height:92px; border-radius:50%; background:conic-gradient(var(--coral) var(--degree), var(--surface-soft) 0); position:relative; display:grid; place-items:center; font-size:20px; letter-spacing:-.5px; font-weight:700; flex:0 0 auto; }
.progress-orbit::after { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--surface); }.progress-orbit span { position:relative; z-index:1; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px; }.section-heading.compact { align-items:center; margin-bottom:12px; }.section-heading span { color:var(--muted); font-size:13px; }.text-button { border:0; background:transparent; color:var(--coral); font-size:14px; font-weight:600; padding:4px 0; }
.week-section { margin:0 3px 28px; }.week-strip { display:grid; grid-template-columns:repeat(7, 1fr); gap:7px; }.day-cell { min-width:0; text-align:center; }.day-cell span { display:block; color:var(--muted); font-size:11px; font-weight:600; margin-bottom:8px; }.day-dot { width:100%; aspect-ratio:1; border-radius:50%; background:var(--surface-soft); display:grid; place-items:center; font-size:12px; color:var(--muted); margin:auto; }.day-cell.today .day-dot { outline:1.5px solid var(--ink); outline-offset:2px; }.day-cell.full .day-dot { background:var(--ink); color:var(--page); }.day-cell.partial .day-dot { background:var(--coral-soft); color:var(--coral); }
.habit-section { margin-bottom:28px; }.habit-list { display:grid; gap:10px; }.habit-row { width:100%; display:flex; align-items:center; gap:13px; text-align:left; padding:13px; border:1px solid transparent; background:var(--surface); box-shadow:0 4px 13px rgba(35,34,28,.035); border-radius:19px; transition:transform .18s ease, background .18s ease; }.habit-row:active { transform:scale(.98); }.habit-row.done { background:var(--surface-soft); }.habit-icon { height:44px; width:44px; border-radius:15px; display:grid; place-items:center; font-size:21px; flex:0 0 auto; }.habit-icon.coral { background:var(--coral-soft); color:var(--coral); }.habit-icon.lavender { background:var(--lavender-soft); color:var(--lavender); }.habit-icon.mint { background:var(--mint-soft); color:var(--mint); }.habit-icon.sky { background:var(--sky-soft); color:var(--sky); }.habit-icon.sun { background:var(--sun-soft); color:var(--sun); }
.habit-main { min-width:0; flex:1; }.habit-main strong { display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.15px; }.habit-main small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }.check-mark { width:27px; height:27px; border-radius:50%; border:1.6px solid var(--line); display:grid; place-items:center; color:transparent; font-size:15px; flex:0 0 auto; }.habit-row.done .check-mark { color:white; background:var(--ink); border-color:var(--ink); }.habit-progress { width:50px; color:var(--muted); font-size:11px; text-align:right; flex:0 0 auto; }.habit-row.done .habit-progress { color:var(--ink); font-weight:650; }
.empty-state { text-align:center; background:var(--surface); color:var(--muted); padding:30px 18px; border-radius:20px; line-height:1.5; font-size:14px; }.empty-state button { display:block; margin:13px auto 0; }
.widget-card { padding:18px; border-radius:24px; background:var(--ink); color:var(--page); }.widget-title-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:13px; }.widget-card .section-kicker { color:color-mix(in srgb, var(--page) 60%, transparent); }.widget-card h2 { color:var(--page); }.widget-sparkle { font-size:21px; color:var(--coral); }.widget-list { display:grid; gap:1px; border-radius:14px; overflow:hidden; }.widget-entry { background:color-mix(in srgb, var(--page) 10%, transparent); padding:11px 10px; display:flex; align-items:center; gap:9px; font-size:13px; }.widget-entry button { background:transparent; border:0; color:inherit; padding:0; display:flex; align-items:center; gap:9px; width:100%; text-align:left; }.widget-dot { width:16px; height:16px; border:1px solid color-mix(in srgb, var(--page) 50%, transparent); border-radius:50%; display:grid; place-items:center; font-size:10px; }.widget-entry.done .widget-dot { background:var(--page); color:var(--ink); border-color:var(--page); }.widget-caption { color:color-mix(in srgb, var(--page) 62%, transparent); font-size:11px; line-height:1.4; margin-top:12px; }
.tabbar { position:fixed; width:min(100%, 680px); bottom:0; left:50%; transform:translateX(-50%); padding:9px 20px calc(10px + env(safe-area-inset-bottom)); background:var(--nav); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent); z-index:5; }.tab { appearance:none; border:0; background:transparent; color:var(--muted); padding:5px 2px; display:grid; justify-items:center; gap:4px; }.tab span { height:22px; font-size:21px; line-height:19px; }.tab small { font-size:10px; font-weight:650; }.tab.active { color:var(--ink); }
.segmented-control { display:flex; background:var(--surface-soft); padding:3px; border-radius:12px; margin-bottom:27px; }.segment { flex:1; border:0; color:var(--muted); background:transparent; padding:9px 7px; border-radius:9px; font-size:13px; font-weight:650; }.segment.active { background:var(--surface); color:var(--ink); box-shadow:0 2px 5px rgba(0,0,0,.05); }.insight-hero { text-align:center; padding:20px 12px 26px; }.insight-hero p:first-child { color:var(--muted); font-size:13px; }.insight-hero strong { display:block; font-size:54px; letter-spacing:-3px; line-height:1.05; margin-top:4px; }.insight-hero span { color:var(--muted); font-size:13px; }.insight-hero p:last-child { margin-top:13px; font-size:14px; }.chart-section,.heatmap-section { background:var(--surface); border-radius:22px; padding:18px; margin-bottom:15px; }.bar-chart { height:162px; display:flex; align-items:end; gap:8px; padding-top:12px; }.bar-column { flex:1; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:8px; min-width:0; }.bar-track { width:100%; height:122px; border-radius:10px; background:var(--surface-soft); display:flex; align-items:end; overflow:hidden; }.bar-fill { width:100%; min-height:4px; background:var(--coral); border-radius:10px; transition:height .32s ease; }.bar-column.today .bar-fill { background:var(--ink); }.bar-column span { font-size:10px; color:var(--muted); font-weight:600; }.bar-column.today span { color:var(--ink); }.heatmap-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }.heat-cell { aspect-ratio:1; border-radius:5px; background:var(--surface-soft); }.heat-cell.level-1 { background:color-mix(in srgb,var(--coral) 22%,var(--surface)); }.heat-cell.level-2 { background:color-mix(in srgb,var(--coral) 45%,var(--surface)); }.heat-cell.level-3 { background:color-mix(in srgb,var(--coral) 72%,var(--surface)); }.heat-cell.level-4 { background:var(--coral); }.heatmap-key { display:flex; justify-content:flex-end; align-items:center; gap:4px; margin-top:11px; color:var(--muted); font-size:10px; }.heatmap-key i { height:10px; width:10px; border-radius:3px; background:var(--surface-soft); }.heatmap-key i:nth-of-type(2) { background:color-mix(in srgb,var(--coral) 35%,var(--surface)); }.heatmap-key i:nth-of-type(3) { background:color-mix(in srgb,var(--coral) 62%,var(--surface)); }.heatmap-key i:nth-of-type(4) { background:var(--coral); }.milestone-card { background:var(--lavender-soft); border-radius:22px; padding:19px; display:flex; gap:14px; align-items:center; }.milestone-icon { width:43px;height:43px;background:var(--lavender);color:white;border-radius:14px;display:grid;place-items:center;font-size:22px; }.milestone-card h2 { margin-bottom:4px; }.milestone-card p:last-child { color:var(--muted); font-size:12px; }
.screen-intro { color:var(--muted); font-size:14px; line-height:1.45; margin:-8px 0 20px; }.habit-library { display:grid; gap:11px; }.habit-card { position:relative; background:var(--surface); border-radius:21px; padding:16px; display:flex; align-items:center; gap:13px; box-shadow:0 4px 13px rgba(35,34,28,.035); }.habit-card .habit-icon { width:48px;height:48px; }.habit-card .habit-main small { margin-top:5px; }.habit-card .library-stats { color:var(--muted); font-size:12px; text-align:right; line-height:1.45; }.habit-card .library-stats strong { display:block; color:var(--ink); font-size:14px; }.add-large { width:100%; margin-top:14px; background:transparent; color:var(--muted); border:1.5px dashed var(--line); border-radius:20px; padding:17px; font-weight:600; }.add-large span { color:var(--coral); font-size:18px; margin-right:4px; }
.profile-card { border-radius:22px; background:var(--ink); color:var(--page); padding:18px; display:flex; gap:13px; align-items:center; margin-bottom:25px; }.profile-mark { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--coral); color:white; font-weight:700; }.profile-card p { font-size:12px; color:color-mix(in srgb,var(--page) 65%, transparent); margin-top:3px; }.settings-group { margin-bottom:24px; }.settings-group h2 { font-size:13px; color:var(--muted); letter-spacing:.2px; margin:0 4px 9px; }.setting-row,.setting-link { width:100%; border:0; background:var(--surface); min-height:62px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; text-align:left; border-bottom:1px solid var(--line); }.setting-row:first-of-type,.setting-link:first-of-type { border-radius:15px 15px 0 0; }.setting-row:last-of-type,.setting-link:last-of-type { border-bottom:0; border-radius:0 0 15px 15px; }.setting-row span { display:grid; gap:3px; }.setting-row strong,.setting-link span { font-size:14px; }.setting-row small { color:var(--muted); font-size:11px; }.setting-link b { font-size:24px; color:var(--muted); font-weight:400; }.setting-link.danger span { color:var(--coral); }.setting-help,.privacy-note { color:var(--muted); font-size:12px; line-height:1.45; margin:10px 4px 0; }.privacy-note { text-align:center; margin:32px 14px 0; }
input[role="switch"] { appearance:none; width:42px; height:26px; border-radius:20px; border:0; background:var(--line); position:relative; transition:.2s; flex:0 0 auto; } input[role="switch"]::after { content:""; position:absolute; height:20px;width:20px;border-radius:50%; background:white; top:3px;left:3px; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:.2s; } input[role="switch"]:checked { background:var(--mint); }input[role="switch"]:checked::after{left:19px;}
.sheet-backdrop { position:fixed; inset:0; background:rgba(21,21,18,.36); z-index:10; display:flex; align-items:flex-end; justify-content:center; padding:15px 0 0; }.habit-sheet { background:var(--page); width:min(100%,680px); max-height:90vh; overflow:auto; border-radius:27px 27px 0 0; padding:8px 20px calc(25px + env(safe-area-inset-bottom)); animation:slideUp .27s ease; }.sheet-grabber { height:4px; width:38px; border-radius:3px; background:var(--line); margin:3px auto 15px; }.sheet-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }.sheet-header h2 { font-size:21px; }.close-sheet { border:0;background:var(--surface-soft);width:31px;height:31px;border-radius:50%;font-size:24px;font-weight:300;line-height:1; }.form-label { display:block; color:var(--muted); font-size:12px; font-weight:650; margin-bottom:14px; }.text-input,.select-input { margin-top:6px; display:block; width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:12px; min-height:45px; padding:0 12px; outline-color:var(--coral); font-size:16px; }.select-input { font-size:14px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.color-field { border:0; padding:0; }.color-field legend { padding:0; }.color-picker { margin-top:8px; display:flex; gap:7px; }.color-dot { width:29px; height:29px; border-radius:50%; border:3px solid transparent; }.color-dot.active { outline:1.5px solid var(--ink); outline-offset:2px; }.color-dot.coral{background:var(--coral)}.color-dot.lavender{background:var(--lavender)}.color-dot.mint{background:var(--mint)}.color-dot.sky{background:var(--sky)}.color-dot.sun{background:var(--sun)}.weekday-picker { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:-4px 0 14px; }.weekday-picker button { border:0;background:var(--surface-soft);height:35px;border-radius:50%;font-size:12px;font-weight:700; }.weekday-picker button.selected { background:var(--ink);color:var(--page); }.optional { font-weight:400; color:var(--muted); }.form-error { min-height:16px; color:var(--coral); font-size:12px; margin-top:-6px; }.sheet-actions { display:flex; gap:10px; margin-top:7px; }.save-button,.delete-button { min-height:49px;border:0;border-radius:14px;font-weight:700; }.save-button { flex:1;background:var(--ink);color:var(--page); }.delete-button { background:var(--coral-soft);color:var(--coral);padding:0 16px; }.toast { position:fixed; z-index:20; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ink); color:var(--page); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); font-size:13px; white-space:nowrap; }
.sheet-backdrop[hidden], .toast[hidden] { display:none; }
@keyframes rise { from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none} } @keyframes slideUp { from{transform:translateY(100%)}to{transform:none} }
.heat-cell { appearance:none; border:0; padding:0; }
@media (min-width: 680px) { .app-shell { padding-left:30px;padding-right:30px; } .focus-card { min-height:160px; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }