:root {
  --bg: #f4f6f1; --surface: #fff; --surface-2: #eef1eb; --ink: #18201c; --muted: #68736c;
  --line: #dfe4dc; --accent: #1e6b52; --accent-soft: #d9eee5; --mint: #3fae83; --coral: #e37862;
  --violet: #806fd1; --blue: #568bb9; --shadow: 0 18px 60px rgba(34, 53, 44, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#101512; --surface:#18201c; --surface-2:#202a25; --ink:#eef5f0; --muted:#9aa79f; --line:#2e3a34; --accent:#72d2aa; --accent-soft:#203d32; --shadow:0 20px 70px rgba(0,0,0,.26); }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); min-height:100vh; }
button,input { font:inherit; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px 1fr; }
.sidebar { padding:28px 20px 22px; border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-weight:750; letter-spacing:-.02em; }
.brand-mark { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--accent); color:var(--bg); font-weight:850; }
nav { display:grid; gap:5px; margin-top:42px; }
.nav-link { padding:11px 13px; border-radius:11px; text-decoration:none; color:var(--ink); font-size:14px; }
.nav-link:hover { background:var(--accent-soft); color:var(--accent); }
.nav-link.muted { color:var(--muted); opacity:.7; }
.profile { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); font-weight:750; }
.profile strong,.profile small { display:block; font-size:12px; }.profile small { color:var(--muted); margin-top:2px; }
.icon-button { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:8px; }
.content { padding:46px clamp(24px,5vw,72px) 80px; min-width:0; }.auth-content { grid-column:1/-1; display:grid; place-items:center; }
.page-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:9px; font-size:clamp(30px,4vw,46px); letter-spacing:-.045em; line-height:1.04; } h2 { font-size:18px; margin-bottom:0; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; margin-bottom:8px; }
.lede { color:var(--muted); max-width:650px; margin-bottom:0; line-height:1.55; }
.period-control { display:flex; gap:5px; padding:4px; background:var(--surface-2); border-radius:12px; }
.chip { border:0; background:transparent; color:var(--muted); padding:8px 12px; border-radius:9px; cursor:pointer; font-size:12px; }.chip.active { background:var(--surface); color:var(--ink); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.metric-card { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; padding:18px; }
.metric-icon { grid-row:1/4; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; }.mint{background:var(--mint)}.coral{background:var(--coral)}.violet{background:var(--violet)}.blue{background:var(--blue)}
.metric-label,.metric-card small { color:var(--muted); font-size:11px; }.metric-card strong { font-size:25px; letter-spacing:-.04em; }.metric-card small { grid-column:2; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(270px,.7fr); gap:14px; margin-top:14px; }
.person-switcher{display:flex;gap:8px;overflow:auto;margin:-10px 0 20px}.person-pill{white-space:nowrap;color:var(--muted);text-decoration:none;border:1px solid var(--line);background:var(--surface);padding:8px 12px;border-radius:99px;font-size:12px}.person-pill.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.panel { padding:22px; }.panel-head { display:flex; justify-content:space-between; align-items:start; }.status-dot { font-size:11px; color:var(--accent); background:var(--accent-soft); padding:7px 9px; border-radius:99px; }
.empty-chart { position:relative; min-height:310px; display:grid; place-items:center; overflow:hidden; }
.guide-lines { position:absolute; inset:28px 0; background:repeating-linear-gradient(to bottom,transparent 0,transparent 59px,var(--line) 60px); opacity:.75; }
.empty-orbit { position:relative; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:12px 17px; border-radius:99px; font-size:12px; }
.steps { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:20px; }.steps li { display:flex; gap:12px; align-items:center; }.steps li>span { flex:0 0 30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:800; }.steps li.done>span { background:var(--accent-soft); color:var(--accent); }.steps strong,.steps small { display:block; font-size:12px; }.steps small { color:var(--muted); margin-top:4px; line-height:1.4; }
.bar-chart{height:310px;display:flex;align-items:end;gap:8px;padding-top:35px}.bar-day{flex:1;min-width:12px;text-align:center}.bar-track{height:230px;display:flex;align-items:end;background:linear-gradient(to top,var(--surface-2),transparent);border-radius:8px 8px 3px 3px;overflow:hidden}.bar-track span{width:100%;background:linear-gradient(180deg,var(--mint),var(--accent));border-radius:8px 8px 2px 2px}.bar-day small{display:block;color:var(--muted);font-size:9px;margin-top:8px;transform:rotate(-35deg)}
.auth-card { width:min(620px,calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(26px,5vw,48px); box-shadow:var(--shadow); }.auth-card.compact{max-width:480px}.auth-brand{margin-bottom:42px}
.form-stack { display:grid; gap:18px; margin-top:28px; }.form-stack label { display:grid; gap:7px; font-size:12px; font-weight:700; }.form-stack label small{color:var(--muted);font-weight:400}.form-stack input { width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:11px; padding:12px 13px; outline:none; }.form-stack input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.button { border:0; border-radius:11px; padding:13px 16px; cursor:pointer; font-weight:750; }.button.primary { background:var(--accent); color:var(--bg); }.callout { padding:12px 14px; border-radius:11px; font-size:12px; margin:18px 0 0; }.callout.warning{background:#fff0c9;color:#765407}.callout.error{background:#fee0dc;color:#8a3025}
.button.secondary{background:var(--surface-2);color:var(--ink)}.button.danger{background:#fee5e0;color:#9a3d31;padding:9px 11px;font-size:11px}.secret-panel{margin-bottom:14px;border-color:var(--accent)}.copy-row{display:flex;gap:10px;margin-top:18px}.copy-row code{flex:1;min-width:0;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:13px;white-space:nowrap;font-size:11px}.table-panel{margin-top:14px}.member-list{display:grid;margin-top:18px}.member-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}.member-row:first-child{border-top:0}.member-row>div{flex:1}.member-row strong,.member-row small{display:block;font-size:12px}.member-row small{color:var(--muted);margin-top:4px}.tag{font-size:10px;color:var(--muted);background:var(--surface-2);border-radius:99px;padding:6px 9px}.tag.success{color:var(--accent);background:var(--accent-soft)}.device-symbol{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent)}.empty-copy{color:var(--muted);font-size:12px;margin:20px 0}.sharing-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-stack select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:11px;padding:12px 13px}.form-stack fieldset{border:1px solid var(--line);border-radius:14px;padding:12px}.form-stack legend{font-size:11px;color:var(--muted);padding:0 6px}.check-row{display:flex!important;grid-template-columns:none!important;align-items:start;gap:10px!important;padding:9px}.check-row input{width:auto;margin-top:2px}.check-row span{display:block}.check-row strong,.check-row small{display:block}.linked{text-decoration:none;color:var(--ink)}.linked:hover{color:var(--accent)}
@media(max-width:1000px){.metric-grid{grid-template-columns:1fr 1fr}.dashboard-grid,.sharing-grid{grid-template-columns:1fr}.quick-start{order:-1}}
@media(max-width:720px){.app-shell{display:block}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:16px;flex-direction:row;align-items:center}.sidebar nav{display:none}.profile{margin:0 0 0 auto;border:0;padding:0}.profile>span:not(.avatar){display:none}.content{padding:28px 16px 60px}.page-head{display:block}.period-control{margin-top:20px;width:max-content}.metric-grid{grid-template-columns:1fr}.auth-content{padding:16px;min-height:100vh}}