@font-face{font-family:Figtree;src:url('/assets/fonts/Figtree.ttf') format('truetype');font-weight:300 900;font-display:swap}@font-face{font-family:Barlow;src:url('/assets/fonts/Barlow-Medium.ttf');font-weight:500;font-display:swap}@font-face{font-family:Barlow;src:url('/assets/fonts/Barlow-SemiBold.ttf');font-weight:600;font-display:swap}@font-face{font-family:Barlow;src:url('/assets/fonts/Barlow-Bold.ttf');font-weight:700;font-display:swap}
:root{--bg:#090a0c;--panel:#141619;--panel-alt:#1a1d21;--line:#262a2f;--lime:#1fe35f;--blue:#1d9bff;--purple:#8db4ff;--yellow:#ffb21e;--red:#ff4d5e;--amber:#ffb21e;--text:#ffffff;--muted:#a1a9b2;color-scheme:dark;font-family:Figtree,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:15px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}a{color:inherit;text-decoration:none}button{border:0;background:none}button:hover{filter:brightness(1.15)}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:228px;border-right:1px solid var(--line);padding:38px 20px 18px;background:#121315;display:flex;flex-direction:column;z-index:10}.wordmark{font:italic 700 33px Barlow,Arial,sans-serif;letter-spacing:-2.5px;display:block;margin:0 15px 55px}.wordmark span{font:10px Figtree;vertical-align:top;letter-spacing:0;margin-left:4px}.workspace-label,.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--muted)}.workspace-label{margin:0 15px 16px}.nav-link{display:flex;align-items:center;gap:13px;padding:13px 15px;margin-bottom:6px;border-radius:5px;color:#9aa7b6;font-weight:700;font-size:14px}.nav-link.active{background:#24262a;color:var(--lime)}.nav-link:hover{background:#1f2124}.nav-icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.nav-link:nth-child(5){margin-top:28px}.sidebar-bottom{margin-top:auto}.connection-card{display:flex;align-items:center;text-align:left;gap:10px;background:#1b1d20;border:1px solid #2e3135;border-radius:6px;width:100%;padding:15px 10px;margin:26px 0}.connection-card>span:nth-child(2){font-size:12px;font-weight:700;flex:1}.connection-card small,.profile small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:5px}.fitbit-mark{font-size:30px;color:#4cc9cc}.profile{border-top:1px solid var(--line);padding:20px 3px 0;display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:12px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:33px;height:33px;flex-shrink:0;border-radius:50%;background:#313439;color:#d6dfd8;font:700 13px Barlow}.profile>span:nth-child(2){flex:1}.settings-icon{font-size:18px;color:#85929e}.main-shell{margin-left:228px;flex:1;min-width:0}.topbar{height:82px;padding:0 42px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:10px;letter-spacing:1.4px;color:var(--muted)}.breadcrumb span{margin:0 15px;color:#4a4f57}.breadcrumb strong{color:#d7dfe6;font-weight:400}.topbar-right{display:flex;align-items:center;gap:20px}.data-badge{display:inline-flex;align-items:center;gap:7px;font-size:9px;font-weight:700;letter-spacing:1.1px;color:#c2cbd2}.data-badge i{width:5px;height:5px;background:var(--yellow);border-radius:50%}.data-badge.live i{background:var(--lime)}.icon-button{font-size:20px;color:var(--muted);padding:7px}.avatar.small{width:29px;height:29px}main{max-width:1510px;margin:0 auto;padding:36px 42px 18px;outline:none}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:20px}h1{font:700 34px Barlow,sans-serif;margin:7px 0 9px;letter-spacing:-.8px}.subtext{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.page-heading .eyebrow{font-size:10px}.date-control{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:5px;padding:6px 8px;background:#16181a;white-space:nowrap;font-size:12px}.date-control button{font-size:20px;padding:2px 7px;color:#b3bdc7}.date-control input{position:absolute;opacity:0;width:0;pointer-events:none}.date-control label{cursor:pointer}.date-control svg{width:14px;height:14px;margin-right:7px;vertical-align:middle}.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:25px}.tabs button{padding:0 1px 14px;position:relative;font-weight:700;font-size:12px;letter-spacing:.3px;color:#8896a6}.tabs button.active{color:#eef2f5}.tabs button.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--lime)}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:23px}.metric-card{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:22px 23px 17px;position:relative;overflow:hidden;text-align:left;display:block;width:100%}.metric-card:before{position:absolute;content:'';height:2px;top:0;left:0;right:0;background:var(--accent);opacity:.75}.card-top{display:flex;align-items:center;justify-content:space-between}.card-top h2{font-size:11px;letter-spacing:1.5px;margin:0;font-weight:700}.card-top .nav-icon{color:var(--accent);width:17px;height:17px}.chevron{color:#80909f}.ring-wrap{position:relative;width:166px;height:166px;margin:14px auto 11px}.ring{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:7;stroke-linecap:butt}.ring .track{stroke:#2b2e33}.ring .progress{stroke:var(--accent);stroke-dasharray:440;stroke-dashoffset:calc(440 - 440 * var(--progress));transition:stroke-dashoffset .6s}.ring .ring-inner{stroke:#292c30;stroke-width:1;stroke-dasharray:1 9}.ring-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.ring-value{font:700 48px Barlow;letter-spacing:-1.5px;line-height:1}.ring-value small{font-size:23px;margin-left:2px}.ring-label{font-size:9px;letter-spacing:1.5px;color:var(--accent);font-weight:700;margin-top:8px}.metric-bottom{border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#98a5b2}.metric-bottom strong{color:var(--accent);font-size:11px}.insight-banner{border:1px solid #313439;border-radius:7px;display:flex;align-items:center;gap:17px;padding:18px 21px;background:linear-gradient(100deg,#1d1f22,#16171a);margin-bottom:30px}.insight-icon{color:var(--lime);border:1px solid #3f4349;border-radius:50%;padding:8px;width:38px;height:38px;display:grid;place-items:center}.insight-banner h3{font-size:14px;margin:0 0 5px}.insight-banner p{margin:0;color:#a9b7b1;font-size:12px;line-height:1.5}.insight-banner>.chevron{margin-left:auto}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-title h2{font:700 18px Barlow;margin:0;letter-spacing:.1px}.section-title .muted{font-size:11px}.text-button{font-size:11px;font-weight:700;color:#afbbc6;display:inline-flex;gap:8px;align-items:center}.content-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:23px;margin-bottom:27px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:23px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.panel-heading h3{font-size:10px;letter-spacing:1.4px;margin:0}.muted{color:var(--muted)}.chart-legend{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}.legend-dot{width:5px;height:5px;border-radius:50%;display:inline-block;background:var(--blue)}.chart-summary{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}.chart-summary strong{font:700 32px Barlow}.chart-summary span{font-size:11px;color:var(--muted)}.chart-summary .change{color:var(--lime);font-size:10px;margin-left:7px}.chart-container{position:relative;min-height:148px}.chart{width:100%;height:160px;overflow:visible}.chart text{fill:#7e8d9d;font-family:Figtree;font-size:10px}.chart-grid{stroke:#2d3034;stroke-width:.7;stroke-dasharray:3 4}.chart-line{stroke:var(--blue);stroke-width:2;fill:none;stroke-linejoin:round}.chart-axis{display:flex;justify-content:space-between;font-size:9px;color:#8c9ba9;padding-left:26px}.chart-key{display:flex;align-items:center;gap:15px;margin-top:18px;font-size:9px;color:var(--muted)}.chart-key span{display:inline-flex;align-items:center;gap:5px}.chart-key i{width:7px;height:7px;border-radius:2px;background:var(--blue)}.health-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}.health-row:last-child{border:0;padding-bottom:0}.health-label{display:flex;align-items:center;gap:10px;color:#b5c0cc;font-size:12px}.health-label .nav-icon{width:17px;height:17px;color:#7b8a99}.health-value{font:700 18px Barlow;text-align:right}.health-value small{font:400 10px Figtree;color:var(--muted);margin-left:4px}.health-value em{font:400 9px Figtree;display:block;color:#8ca391;margin-top:4px;font-style:normal}.health-tag{font-size:9px;color:#afc6aa;background:#272a2e;padding:4px 7px;border-radius:3px}.activity-list{display:grid;grid-template-columns:1fr 1fr;gap:17px}.activity-card{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:18px;gap:15px;text-align:left;width:100%}.activity-icon{height:43px;width:43px;display:grid;place-items:center;background:#2c2f34;border-radius:6px;color:#60b4e5}.activity-icon.purple{background:#2c2f34;color:var(--purple)}.activity-details{flex:1}.activity-details h3{font-size:13px;margin:0 0 6px}.activity-details p{color:var(--muted);font-size:10px;margin:0}.activity-score{font:700 23px Barlow;color:var(--blue);text-align:right}.activity-score small{display:block;font:400 8px Figtree;letter-spacing:1px;color:var(--muted);margin-top:5px}.footer{max-width:1510px;margin:auto;display:flex;justify-content:space-between;padding:24px 42px 26px;color:#6c7c8d;font-size:9px;letter-spacing:.4px}.footer>span:first-child{letter-spacing:1.8px;font-weight:700}.footer button{font-size:9px;color:#96a4b2;padding:0}.mobile-nav{display:none}.primary-button{background:var(--lime);color:#131416;border-radius:4px;padding:12px 19px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px}.secondary-button{border:1px solid #43474e;border-radius:4px;padding:11px 17px;font-size:12px;font-weight:700}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}dialog{background:#181a1d;color:var(--text);border:1px solid #3c4046;border-radius:12px;width:min(520px,calc(100% - 32px));padding:28px;box-shadow:0 24px 100px #0008;max-height:90vh}dialog::backdrop{background:#050a10b3;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-head h2{font:700 24px Barlow;margin:0}.modal-head button{font-size:25px;color:var(--muted)}dialog p{color:#aab6c2;font-size:14px;line-height:1.6}dialog .connection-status{border:1px solid var(--line);padding:15px;border-radius:6px;font-size:12px;margin:18px 0}dialog .connection-status strong{display:block;margin-bottom:6px}dialog code{overflow-wrap:anywhere;color:#d6e3ce;font-size:11px}dialog a{color:var(--lime);text-decoration:underline}dialog input,dialog select,dialog textarea,.form-field{width:100%;background:#111314;color:var(--text);border:1px solid #3c4147;border-radius:4px;padding:12px;margin-top:7px}dialog label{display:block;font-size:12px;margin-top:18px;color:#c1ccd7}dialog .note{font-size:11px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,30px);opacity:0;background:#e6efdf;color:#151719;border-radius:6px;padding:13px 20px;font-size:12px;z-index:100;transition:.2s;pointer-events:none;max-width:90vw}#toast.show{transform:translate(-50%,0);opacity:1}.detail-hero{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:35px;margin-bottom:24px}.detail-hero .ring-wrap{width:210px;height:210px;margin:0}.detail-hero .ring-value{font-size:59px}.detail-hero h2{font:700 28px Barlow;margin:0 0 12px}.detail-hero p{max-width:520px;line-height:1.7;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:28px}.stat{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:6px}.stat>span{font-size:10px;color:var(--muted);display:block}.stat strong{display:block;font:700 30px Barlow;margin:13px 0 5px}.stat strong small{font:400 11px Figtree;color:var(--muted);margin-left:4px}.stat p{margin:0;color:#9faeba;font-size:10px}.period-toggle{display:flex;border:1px solid var(--line);padding:3px;border-radius:5px}.period-toggle button{font-size:10px;padding:7px 13px;color:var(--muted)}.period-toggle .active{background:#303439;color:var(--lime);border-radius:3px}.trend-chart{height:260px}.bar-chart{display:flex;align-items:flex-end;gap:13px;height:210px;padding:20px 0 30px;border-bottom:1px solid var(--line)}.bar-col{flex:1;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;height:100%;position:relative}.bar-col .bar{width:100%;max-width:34px;border-radius:3px 3px 0 0;background:var(--accent);min-height:2px}.bar-col>small{position:absolute;bottom:-20px;color:var(--muted);font-size:9px}.bar-col>span{font:500 12px Barlow;margin-bottom:7px;color:#bfccd4}.empty-state{border:1px dashed #3f434a;border-radius:7px;padding:40px;text-align:center;margin-bottom:24px}.empty-state h2{font:700 24px Barlow}.empty-state p{color:var(--muted);line-height:1.6}.info-note{font-size:11px;color:var(--muted);line-height:1.6;padding:15px 0}.sleep-stages{display:flex;gap:3px;height:35px;margin:30px 0 20px;border-radius:4px;overflow:hidden}.sleep-stage{min-width:2px;background:var(--purple)}.sleep-legend{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.sleep-legend span{font-size:10px;color:var(--muted)}.sleep-legend b{display:block;font:700 20px Barlow;color:var(--text);margin-top:7px}.journal-intro{margin:0 0 24px}.journal-question{padding:22px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;align-items:center}.journal-question h3{font-size:14px;margin:0 0 5px}.journal-question p{font-size:11px;color:var(--muted);margin:0}.choices{display:flex;gap:7px;flex-wrap:wrap}.choice{font-size:11px;padding:9px 14px;background:#232629;border:1px solid #373a40;border-radius:4px}.choice.selected{color:var(--lime);border-color:var(--lime);background:#25282c}.journal-notes{margin-top:24px}.journal-notes label{font-size:12px;font-weight:700}.journal-notes textarea{height:100px;resize:vertical}.status-notice{padding:12px 17px;background:#1d1f22;color:#e2c990;border:1px solid #313439;border-radius:5px;font-size:12px;margin-bottom:22px;line-height:1.5}.status-notice button{text-decoration:underline;font-weight:700}.hidden{display:none!important}.skeleton{animation:pulse 1.2s infinite alternate}@keyframes pulse{to{opacity:.5}}@media(min-width:1500px){main{padding-top:45px}.ring-wrap{width:186px;height:186px}.metric-card{padding-top:25px;padding-bottom:23px}.content-grid{gap:24px}.chart{height:190px}.health-row{padding:16px 0}}@media(max-width:1150px){.sidebar{width:194px;padding-left:14px;padding-right:14px}.main-shell{margin-left:194px}.topbar{padding:0 26px}main{padding:28px 26px 18px}.footer{padding-left:26px;padding-right:26px}.metric-card{padding:20px 16px 16px}.ring-wrap{width:142px;height:142px}.ring-value{font-size:42px}.metric-bottom{font-size:9px}.content-grid{gap:17px;grid-template-columns:1.4fr 1fr}.panel{padding:19px}.connection-card small{font-size:9px}.activity-list{gap:15px}.activity-card{padding:15px;gap:11px}}
@media(max-width:850px){.sidebar{width:76px;padding:32px 10px}.sidebar .wordmark{font-size:19px;letter-spacing:-1px;margin:0 0 38px}.wordmark span{display:none}.workspace-label,.nav-link span,.sidebar-bottom{display:none}.nav-link{padding:14px 18px}.main-shell{margin-left:76px}.ring-wrap{width:130px;height:130px}.metric-card{padding:17px 12px 14px}.metric-bottom strong{font-size:9px}.card-top h2{font-size:10px}.content-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.topbar{height:67px}.footer>span:first-child{display:none}}
@media(max-width:600px){.sidebar{display:none}.main-shell{margin:0}.topbar{height:64px;padding:0 20px}.breadcrumb{font:italic 700 24px Barlow;letter-spacing:-1px;color:white}.breadcrumb span,.breadcrumb strong{display:none}.topbar-right{gap:12px}.topbar .icon-button{display:none}.data-badge{font-size:8px}main{padding:25px 18px 12px}.page-heading{align-items:flex-start;margin-bottom:25px;gap:6px}.page-heading .eyebrow{font-size:8px}h1{font-size:29px;margin-top:6px}.subtext{font-size:12px;max-width:220px}.date-control{font-size:10px;gap:2px;margin-top:4px;padding:6px 3px}.date-control button{padding:2px 6px;font-size:17px}.date-control label svg{display:none}.tabs{gap:25px;margin-bottom:20px}.tabs button{font-size:11px}.metrics-grid{gap:8px;margin-bottom:16px}.metric-card{padding:14px 7px 12px;border-radius:6px}.card-top h2{font-size:8px;letter-spacing:.8px}.card-top .nav-icon{display:none}.card-top .chevron{font-size:12px}.ring-wrap{width:100%;max-width:117px;height:auto;aspect-ratio:1;margin:13px auto 9px}.ring-value{font-size:31px;letter-spacing:-1px}.ring-value small{font-size:16px}.ring-label{font-size:7px;letter-spacing:.7px;margin-top:5px}.metric-bottom{flex-direction:column;gap:5px;font-size:8px;padding-top:10px}.metric-bottom strong{font-size:9px}.insight-banner{padding:15px 12px;gap:11px;margin-bottom:25px}.insight-icon{width:30px;height:30px;padding:5px;flex-shrink:0}.insight-banner h3{font-size:12px}.insight-banner p{font-size:11px}.section-title h2{font-size:17px}.content-grid{gap:16px;margin-bottom:24px}.panel{padding:20px 17px}.chart{height:158px}.activity-list{grid-template-columns:1fr;gap:10px}.activity-card{padding:17px}.footer{padding:20px 18px 95px;font-size:8px;justify-content:center}.mobile-nav{position:fixed;display:flex;bottom:0;left:0;right:0;padding:9px 8px calc(10px + env(safe-area-inset-bottom));background:#0e1722f5;border-top:1px solid #2d3035;backdrop-filter:blur(15px);z-index:15;justify-content:space-around}.mobile-nav a{display:flex;align-items:center;gap:6px;flex-direction:column;font-size:8px;color:var(--muted);padding:3px 10px}.mobile-nav .active{color:var(--lime)}.mobile-nav .nav-icon{width:21px;height:21px}.detail-hero{grid-template-columns:1fr;text-align:center;gap:20px}.detail-hero .ring-wrap{width:190px;height:190px;margin:auto}.detail-hero p{font-size:13px;margin:auto}.detail-hero h2{font-size:24px}.stat-grid{gap:10px}.stat{padding:17px}.stat strong{font-size:27px}.journal-question{align-items:flex-start;flex-direction:column;gap:15px}.choices{width:100%}.choice{flex:1;padding:9px 10px}.bar-chart{gap:9px}.empty-state{padding:25px 20px}#toast{bottom:93px}.sleep-legend{gap:15px}.sleep-legend span{font-size:9px}.sleep-legend b{font-size:17px}.page-heading .period-toggle button{padding:7px 9px}.status-notice{font-size:11px}.info-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Scoop palette and open-source type (Barlow + Figtree, SIL OFL 1.1). */
:root{--bg:#090a0c;--panel:#141619;--panel-alt:#1a1d21;--line:#262a2f;--lime:#1fe35f;--blue:#1d9bff;--purple:#8db4ff;--yellow:#ffb21e;--red:#ff4d5e;--amber:#ffb21e;--text:#ffffff;--muted:#a1a9b2}
.wordmark{display:flex;align-items:center;gap:10px;font:700 26px Barlow,Arial,sans-serif;letter-spacing:5px;font-style:normal;margin:0 15px 55px}.wordmark img{width:26px;height:26px}.wordmark span{display:none}.sidebar{background:#111314}.topbar{background:#1a1b1e}.overview-dial-panel{border:1px solid var(--line);background:radial-gradient(ellipse at 50% 10%,#35393f 0%,#282b2f 40%,#222427 100%);border-radius:8px 8px 0 0;padding:26px 45px;display:grid;grid-template-columns:1fr 240px 1fr;align-items:center;text-align:center}.overview-side{display:flex;flex-direction:column;align-items:center;justify-content:center}.overview-side>.eyebrow{font-size:11px;color:#d4dee5;letter-spacing:1.8px}.overview-side>strong{font:700 56px Barlow;line-height:1;margin:12px 0 8px;letter-spacing:-1px}.overview-side>strong small{font-size:25px}.summary-status{font-size:11px;color:#afc0ca;margin-bottom:22px}.summary-sub{display:block;border-top:1px solid #444950;width:80%;max-width:170px;padding-top:15px;color:#92a4af;font-size:9px;letter-spacing:1px}.summary-sub b{font:700 21px Barlow;color:#f6f8fa;display:block;margin-top:7px;letter-spacing:0}.summary-sub b small{font:400 10px Figtree;color:var(--muted)}.nested-dial{position:relative;width:220px;height:220px;margin:auto}.nested-dial svg{width:100%;height:100%;transform:rotate(-90deg)}.nested-dial circle{fill:none;stroke-width:12;stroke-linecap:butt}.nested-track{stroke:#41464c}.nested-strain{stroke:var(--blue);stroke-dasharray:590.62}.nested-recovery{stroke:var(--lime);stroke-dasharray:458.67}.nested-dial img{position:absolute;width:60px;height:55px;object-fit:contain;top:71px;left:80px}.nested-dial>span{position:absolute;left:35px;right:35px;bottom:63px;font-size:7px;letter-spacing:1.6px;color:#bdc9d2}.overview-mini-stats{border:1px solid var(--line);border-top:0;background:#222427;border-radius:0 0 8px 8px;display:grid;grid-template-columns:repeat(4,1fr);padding:18px 0;margin-bottom:22px}.overview-mini-stats button{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;border-right:1px solid #3c4046}.overview-mini-stats button:last-child{border:0}.overview-mini-stats .nav-icon{width:19px;height:19px;color:#91a7b8}.overview-mini-stats button>span{font-size:8px;letter-spacing:.8px;color:#9eafbc}.overview-mini-stats strong{display:block;font:700 22px Barlow;color:white;letter-spacing:0;margin-top:5px}.overview-mini-stats strong small{font:400 10px Figtree;color:var(--muted)}.setup-list{font-size:13px;color:#aab7c1;line-height:1.6;padding-left:20px}.setup-list li{padding:5px 0}.insight-banner{background:linear-gradient(100deg,#27292d,#232629);border-color:#3f4349}.primary-button{background:var(--lime)}.nav-link.active{color:#a3e378}.footer{color:#8c9ca5}.chart-key i{background:var(--blue)}
@media(max-width:1150px){.overview-dial-panel{grid-template-columns:1fr 215px 1fr;padding:25px}.nested-dial{width:205px;height:205px}.nested-dial img{left:74px;top:65px;width:57px}.nested-dial>span{bottom:59px;font-size:6px}.overview-mini-stats button{gap:8px}.overview-mini-stats .nav-icon{display:none}.overview-mini-stats button>span{font-size:7px}}
@media(max-width:850px){.wordmark{font-size:0;letter-spacing:0;justify-content:center;margin:0 0 38px}.wordmark img{width:30px;height:30px}.overview-dial-panel{grid-template-columns:1fr 205px 1fr;padding:22px 12px}.overview-side>strong{font-size:46px}.overview-side>.eyebrow{font-size:9px}.summary-status{font-size:10px}}
@media(max-width:600px){.overview-dial-panel{grid-template-columns:1fr 145px 1fr;padding:20px 7px}.nested-dial{width:145px;height:145px}.nested-dial img{width:40px;height:37px;left:53px;top:47px}.nested-dial>span{left:19px;right:19px;bottom:42px;font-size:4.5px;letter-spacing:.7px}.overview-side>.eyebrow{font-size:7px;letter-spacing:1px}.overview-side>strong{font-size:36px;margin:11px 0 6px}.overview-side>strong small{font-size:18px}.summary-status{font-size:8px;min-height:20px;margin-bottom:8px;line-height:1.5}.summary-sub{font-size:7px;letter-spacing:.7px;padding-top:10px;width:90%}.summary-sub b{font-size:19px}.summary-sub b small{font-size:8px}.overview-mini-stats{padding:14px 0}.overview-mini-stats button{padding:0 5px;text-align:center}.overview-mini-stats button>span{font-size:6px;letter-spacing:.4px}.overview-mini-stats strong{font-size:17px}.overview-mini-stats strong small{font-size:8px}.insight-banner{border-color:#3e4249}.mobile-nav{background:#111619f5}}

@media(max-width:600px){.breadcrumb{font-size:0;background:url('/assets/scoop-logo.svg') no-repeat left center;background-size:contain;width:105px;height:20px}.summary-status{max-width:96px}}

/* Score detail, impact analysis, and healthspan views (original Scoop design). */
.score-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start;margin-bottom:28px}
.score-card{background:linear-gradient(180deg,#1f2124 0%,#17191b 100%);border:1px solid var(--line);border-radius:28px;padding:22px 26px 24px}
.score-head{display:flex;justify-content:center;align-items:center;position:relative;font:600 13px Barlow,sans-serif;letter-spacing:2.4px;color:#dfe6ec;min-height:36px}
.score-head .icon-button{position:absolute;right:0;top:0;width:34px;height:34px;border:1.5px solid #6b7884;border-radius:50%;display:grid;place-items:center;color:#c7d0d8}
.score-head .icon-button .nav-icon{width:18px;height:18px}
.score-ring{position:relative;width:min(300px,78%);aspect-ratio:1;margin:18px auto 24px}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:14}
.score-ring .track{stroke:#2c2f34}
.score-ring .progress{stroke:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 45%,transparent));stroke-linecap:round;stroke-dasharray:540.35;stroke-dashoffset:calc(540.35 * (1 - var(--progress)));transition:stroke-dashoffset .8s ease}
.score-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.score-brand{font:500 17px Barlow,sans-serif;letter-spacing:5px;color:#aeb8c2}
.score-value{font:700 clamp(54px,8vw,84px)/1 Barlow,sans-serif;letter-spacing:-1px;margin:6px 0 8px}
.score-value small{font-size:.42em;margin-left:2px}
.score-label{font:600 13px Barlow,sans-serif;letter-spacing:2.6px;max-width:140px}
.metric-rows{background:#232529;border-radius:16px;padding:6px 18px 14px}
.metric-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #303338}
.metric-row .nav-icon{color:#9aa6b2;width:20px;height:20px}
.metric-name{flex:1;font:600 12.5px Barlow,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#e6ebef}
.metric-row strong{font:700 20px Barlow,sans-serif;min-width:58px;text-align:right}
.trend{font-style:normal;font-size:11px;width:14px;text-align:center}
.trend.good{color:var(--lime)}.trend.bad{color:var(--amber)}.trend.flat,.trend.none{color:#7e8a95}
.row-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;background:#181a1c;border-radius:10px;padding:11px 14px;font-size:13px;color:#c5cdd4}
.row-key span{display:flex;align-items:center;gap:6px}
.tri{display:flex;gap:4px}.tri b,.row-key b{display:block;width:22px;height:5px;border-radius:3px;background:#3a3e44}
.tri b.poor,.row-key b.poor{background:var(--amber)}.tri b.fair,.row-key b.fair{background:#aab4be}.tri b.good,.row-key b.good{background:var(--lime)}
.insight-card{border-radius:18px;padding:22px 24px;background:linear-gradient(#17191b,#17191b) padding-box,linear-gradient(135deg,var(--blue),var(--purple) 50%,var(--lime)) border-box;border:1.5px solid transparent}
.insight-card p{font-size:17px;line-height:1.5;color:#e8edf1;margin:10px 0 0}
.insight-card h3{font:600 19px Figtree,sans-serif;margin:12px 0 0}
.impact{margin-top:24px}
.impact .subtext{margin:0 0 18px}
.impact-head{display:grid;grid-template-columns:1fr auto 1fr;font:700 12px Barlow,sans-serif;letter-spacing:1.8px;margin-bottom:10px;padding:0 4px}
.impact-head .hurts{color:var(--amber)}.impact-head .helps{color:var(--lime);text-align:right}
.impact-row{background:#232529;border-radius:12px;padding:13px 16px 15px;margin-bottom:9px}
.impact-top{display:flex;justify-content:space-between;font:600 13px Barlow,sans-serif;letter-spacing:1.6px}
.impact-top strong{font-size:17px;letter-spacing:.5px;color:#aab4be}.impact-top .helps{color:var(--lime)}.impact-top .hurts{color:var(--amber)}
.impact-track{position:relative;height:9px;margin-top:10px;border-radius:5px;background:repeating-linear-gradient(-55deg,#2e3135 0 2px,transparent 2px 6px)}
.impact-track i{position:absolute;top:0;bottom:0;border-radius:5px}
.impact-track i.helps{background:var(--lime)}.impact-track i.hurts{background:var(--amber)}.impact-track i.neutral{background:#aab4be}
.impact-track b{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #232529}
.orb{position:relative;width:min(320px,82%);aspect-ratio:1;margin:12px auto 26px}
.orb svg{width:100%;height:100%;filter:drop-shadow(0 0 22px rgba(31,227,95,.3))}
.orb .score-value{font-size:clamp(48px,7vw,70px)}
.orb-sub{color:var(--lime);font:600 15px Barlow,sans-serif;margin-top:8px}
.pace-top{display:flex;justify-content:space-between;align-items:baseline}
.pace-top strong{font:700 26px Barlow,sans-serif}
.pace-scale{position:relative;margin:12px 0 8px}
.pace-ticks{display:flex;justify-content:space-between;height:28px;align-items:center}
.pace-ticks i{display:block;width:1.5px;height:20px;background:#5d6a76}.pace-ticks i.major{height:28px;background:#9aa6b2}
.pace-marker{position:absolute;top:-6px;bottom:-6px;width:4px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.pace-labels{display:flex;justify-content:space-between;font:500 12px Barlow,sans-serif;color:#9aa6b2}
@media(max-width:1000px){.score-layout{grid-template-columns:1fr}}
@media(max-width:600px){.score-card{padding:18px 14px;border-radius:22px}.metric-rows{padding:4px 12px 12px}.metric-name{font-size:11px;letter-spacing:1px}.metric-row strong{font-size:17px;min-width:48px}.tri b{width:14px}.insight-card p{font-size:15px}}

/* Connected state and profile. */
.connection-card.connected{border-color:rgba(31,227,95,.5);background:linear-gradient(135deg,rgba(31,227,95,.14),rgba(31,227,95,.03))}
.connection-card.connected small{color:#8ff0ad}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(31,227,95,.2);flex-shrink:0;margin:0 4px}
.avatar.photo,#top-avatar img.photo{object-fit:cover;padding:0;overflow:hidden}
#top-avatar{overflow:hidden;padding:0}#top-avatar img{width:100%;height:100%;border-radius:50%;display:block}
.profile-summary{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.profile-summary strong{display:block;font-size:17px}.profile-summary .muted{font-size:13px}
.avatar.large{width:52px;height:52px;font-size:19px;flex-shrink:0;display:grid;place-items:center;border-radius:50%}
.bar.empty{background:#2d3035!important;opacity:.6}
.bar-chart.dense{gap:3px}.bar-chart.dense .bar-col{min-width:0}.bar-chart.dense .bar{border-radius:2px 2px 0 0}
.sync-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.sync-grid div{background:var(--panel-alt);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.sync-grid span{display:block;font:600 10px Barlow,sans-serif;letter-spacing:1.4px;color:var(--muted);margin-bottom:5px}
.sync-grid strong{font:600 15px Barlow,sans-serif}
.others-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.others-grid .panel{margin:0}
.other-label{flex-direction:column;align-items:flex-start!important;gap:3px}
.other-label small{font-size:12px;color:var(--muted)}
.muted-cat .subtext{margin:0 0 14px}
.chip-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chip-list li{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted)}
@media(max-width:600px){.others-grid{grid-template-columns:1fr}}

/* Background sync: keep content on screen and show a slim progress bar. */
body.is-syncing::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:linear-gradient(90deg,transparent,var(--lime),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:sync-bar 1.1s ease-in-out infinite}
@keyframes sync-bar{from{background-position:-40% 0}to{background-position:140% 0}}

/* ===== Motion tokens. ===== */
:root{--t-fast:120ms;--t-default:200ms;--t-zoom:250ms;--t-flip:240ms;--t-tab:300ms;--t-sheet:150ms;--t-dial:900ms;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-emph:cubic-bezier(.05,.7,.1,1);--ease-std:cubic-bezier(.4,0,.2,1)}
main.enter-left{animation:enter-left var(--t-default) var(--ease-out)}
main.enter-right{animation:enter-right var(--t-default) var(--ease-out)}
main.enter-zoom{animation:enter-zoom var(--t-zoom) var(--ease-emph)}
main.enter-fade{animation:enter-fade var(--t-default) var(--ease-std)}
@keyframes enter-left{from{transform:translateX(28px);opacity:.2}to{transform:none;opacity:1}}
@keyframes enter-right{from{transform:translateX(-28px);opacity:.2}to{transform:none;opacity:1}}
@keyframes enter-zoom{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes enter-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.score-ring .progress{transition:none}

/* Sliding tab underline. */
.tabs{position:relative}
.tabs button.active:after{display:none}
.tab-ink{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--lime);border-radius:2px;transition:transform var(--t-tab) var(--ease-std),width var(--t-tab) var(--ease-std)}

/* Ring row. */
.ring-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:22px 10px 26px;border-radius:22px;background:radial-gradient(120% 90% at 50% 0%,#1d2024 0%,var(--bg) 70%);margin-bottom:18px}
.mini-ring{display:flex;flex-direction:column;align-items:center;gap:12px;border-radius:16px;padding:6px 0;transition:transform var(--t-fast) var(--ease-out)}
.mini-ring:active{transform:scale(.96)}
.mini-ring-dial{position:relative;width:min(150px,26vw);aspect-ratio:1}
.mini-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mini-ring circle{fill:none;stroke-width:9}
.mini-ring .track{stroke:#2a2d31}
.mini-ring .progress{stroke:var(--accent);stroke-linecap:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 50%,transparent))}
.mini-ring-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(24px,4.4vw,40px)/1 Barlow,sans-serif}
.mini-ring-value small{font-size:.5em;margin:6px 0 0 2px;align-self:center}
.mini-ring-label{font:600 13px Barlow,sans-serif;letter-spacing:2.4px;color:#e9ecef}

/* Monitor cards. */
.monitor-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.monitor-card{background:var(--panel-alt);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-align:left;display:flex;flex-direction:column;gap:14px;transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast)}
.monitor-card:hover{border-color:#3a3f45}.monitor-card:active{transform:scale(.98)}
.monitor-title{display:flex;justify-content:space-between;font:600 13px Barlow,sans-serif;letter-spacing:2px}
.monitor-title i{font-style:normal;color:var(--muted);font-size:18px;line-height:1}
.monitor-body{display:flex;align-items:center;gap:12px}
.monitor-body strong{display:block;font:700 13px Barlow,sans-serif;letter-spacing:1.6px}
.monitor-body small{color:var(--muted);font-size:13px}
.monitor-body .good{color:var(--lime)}.monitor-body .warn{color:var(--yellow)}
.monitor-badge{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font:700 16px Barlow,sans-serif;background:#23262a;flex-shrink:0}
.monitor-badge.good{background:color-mix(in srgb,var(--lime) 18%,transparent);color:var(--lime)}
.monitor-badge.warn{background:color-mix(in srgb,var(--yellow) 18%,transparent);color:var(--yellow)}
.monitor-badge.hr{background:color-mix(in srgb,var(--red) 16%,transparent);color:#ff8a95;font-size:14px}

/* My day: score pills. */
.day-panel .panel-heading{margin-bottom:12px}
.activity-pill-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;width:100%;background:#202327;border-radius:14px;padding:8px 16px 8px 8px;margin-bottom:10px;text-align:left;transition:transform var(--t-fast) var(--ease-out),background var(--t-fast)}
.activity-pill-row:hover{background:#25292d}.activity-pill-row:active{transform:scale(.985)}
.score-pill{display:flex;align-items:center;gap:10px;min-width:118px;border-radius:10px;padding:12px 16px;font:700 22px Barlow,sans-serif}
.score-pill .nav-icon{width:22px;height:22px;stroke-width:2}
.score-pill.sleep{background:#7f9bc4;color:#fff}.score-pill.workout{background:var(--blue);color:#fff}
.activity-name{font:600 15px Barlow,sans-serif;letter-spacing:2px}
.activity-name small{display:block;font:400 12px Figtree,sans-serif;letter-spacing:0;color:var(--muted);margin-top:3px}
.activity-times{display:flex;flex-direction:column;gap:8px;text-align:right;border-right:2px solid var(--blue);padding-right:10px}
.activity-times small{font:500 13px Barlow,sans-serif;color:#aab1b9}
.day-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.day-actions .secondary-button{justify-content:center;display:flex;align-items:center;gap:8px;letter-spacing:1.4px}
.day-actions .nav-icon{width:16px;height:16px}
.empty-state.small{padding:18px;margin-bottom:10px}

/* Tonight's sleep. */
.tonight .panel-heading{align-items:center}
.icon-tip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line)}
.icon-tip .nav-icon{width:16px;height:16px}
.tonight-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin:10px 0 4px}
.tonight-row small{display:block;font:600 11px Barlow,sans-serif;letter-spacing:1.8px;color:var(--muted);margin-bottom:6px}
.tonight-row strong{font:700 34px Barlow,sans-serif}
.tonight-line{height:2px;background:repeating-linear-gradient(90deg,var(--purple) 0 6px,transparent 6px 12px);opacity:.7}

/* Key statistics. */
.key-stats{display:grid;gap:10px;margin-bottom:26px}
.key-stat{display:grid;grid-template-columns:auto 1fr auto 18px;align-items:center;gap:14px;background:var(--panel-alt);border:1px solid var(--line);border-radius:14px;padding:14px 18px;cursor:help}
.key-stat .nav-icon{width:22px;height:22px;color:#aab1b9}
.key-name{font:600 13px Barlow,sans-serif;letter-spacing:1.8px;text-transform:uppercase}
.key-val{text-align:right;display:flex;flex-direction:column}
.key-val strong{font:700 26px Barlow,sans-serif;line-height:1.05}
.key-val strong small{font-size:13px;margin-left:3px;color:var(--muted)}
.key-val>small{color:var(--muted);font:500 13px Barlow,sans-serif}
.key-stat .trend{font-size:12px}

/* Strain & recovery chart. */
.sr-panel{padding-bottom:16px}
.sr-chart{width:100%;height:auto;display:block;overflow:visible}
.sr-chart .chart-grid{stroke:#2a2d31}
.sr-chart text{font:500 12px Barlow,sans-serif;fill:#8e969f}
.sr-chart .axis-l{text-anchor:end}.sr-chart .axis-x{text-anchor:middle}.sr-chart .axis-x.current{fill:#fff;font-weight:700}
.sr-line{fill:none;stroke-width:2.2;stroke-linejoin:round}
.sr-line.strain{stroke:var(--blue)}.sr-line.recovery{stroke:#8e969f;stroke-dasharray:1 0}
.sr-dot{fill:var(--bg);stroke-width:2.5}
.sr-val{font:700 13px Barlow,sans-serif!important;text-anchor:middle}
.chart-key i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* Flip card (score detail). */
.flip{display:block;position:relative;width:min(300px,78%);aspect-ratio:1;margin:18px auto 24px;perspective:1200px;border-radius:50%}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block}
.flip-face.back{transform:rotateY(180deg)}
.flip .score-ring{width:100%;margin:0;display:block}
.flip[aria-pressed="true"] .flip-inner{transform:rotateY(180deg)}
.flip.flip-to-back .flip-inner{animation:flip-back var(--t-flip) var(--ease-std) forwards}
.flip.flip-to-front .flip-inner{animation:flip-front var(--t-flip) var(--ease-std) forwards}
@keyframes flip-back{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(90deg) scale(.85)}100%{transform:rotateY(180deg) scale(1)}}
@keyframes flip-front{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(90deg) scale(.85)}100%{transform:rotateY(0) scale(1)}}
.flip-hint{display:block;margin-top:10px;font:600 10px Barlow,sans-serif;letter-spacing:2px;color:var(--muted)}
.bd{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,#1e2125 0%,#16181b 75%);border:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:16% 17%;gap:8px;text-align:left}
.bd .eyebrow{text-align:center;margin-bottom:4px}
.bd-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#d6dbe0}
.bd-row b{font:700 15px Barlow,sans-serif;color:#fff}
.bd small{font-size:11px;color:var(--muted);text-align:center;line-height:1.4}
.bd .flip-hint{text-align:center}

/* Tooltips revealed from the top centre. */
.metric-row[data-tip],.key-stat[data-tip]{cursor:help}
.tip{position:absolute;z-index:120;background:#f4f6f8;color:#111316;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.45;box-shadow:0 12px 40px #0009;transform-origin:var(--arrow,50%) 0;animation:tip-in var(--t-fast) var(--ease-out)}
.tip:before{content:"";position:absolute;top:-6px;left:calc(var(--arrow,50%) - 6px);border:6px solid transparent;border-top:0;border-bottom-color:#f4f6f8}
@keyframes tip-in{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* Loading throbber. */
.throb{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lime);margin-right:10px;vertical-align:-1px;animation:throb 1s ease-in-out infinite}
@keyframes throb{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.15);opacity:1}}

/* Dialogs: zoom on desktop, bottom sheet on phones. */
dialog[open]{animation:dialog-in var(--t-zoom) var(--ease-emph)}
@keyframes dialog-in{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}

/* Switch. */
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.setting-row strong{display:block;font-size:14px}.setting-row small{color:var(--muted);font-size:12px}
.switch{width:46px;height:28px;border-radius:14px;background:#3a3f45;position:relative;flex-shrink:0;transition:background var(--t-default)}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform var(--t-default) var(--ease-out)}
.switch[aria-checked="true"]{background:var(--lime)}.switch[aria-checked="true"] i{transform:translateX(18px)}

/* Vitals modal. */
.vital-ok,.vital-warn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:12px;margin-right:10px}
.vital-ok{background:color-mix(in srgb,var(--lime) 20%,transparent);color:var(--lime)}.vital-warn{background:color-mix(in srgb,var(--yellow) 20%,transparent);color:var(--yellow)}
.vital-detail{font-size:13px;color:#c9cfd5;text-align:right}

/* Quick actions + floating button. */
.fab{position:fixed;right:28px;bottom:28px;width:58px;height:58px;border-radius:50%;background:#fff;color:#0b0c0e;display:grid;place-items:center;box-shadow:0 10px 30px #000a;z-index:40;transition:transform var(--t-fast) var(--ease-out)}
.fab svg{width:26px;height:26px}.fab:active{transform:scale(.92)}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.quick{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--panel-alt);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left;font-weight:600}
.quick .nav-icon{color:var(--lime)}

/* Calendar. */
.date-label{display:flex;align-items:center;gap:7px;font:inherit;color:inherit;padding:2px 6px;border-radius:6px}
.date-label svg{width:14px;height:14px}
.calendar .cal-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px}
.calendar .cal-head strong{font:700 18px Barlow,sans-serif;letter-spacing:.5px}
.calendar .cal-head button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);font-size:20px}
.cal-metrics{display:flex;gap:8px;margin-bottom:14px}
.cal-metrics button{flex:1;border:1px solid var(--line);border-radius:999px;padding:8px;font:600 12px Barlow,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.cal-metrics button.active{background:#fff;color:#0b0c0e;border-color:#fff}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal-week span{font:600 11px Barlow,sans-serif;color:var(--muted);padding-bottom:4px}
.cal-day{aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;font:600 14px Barlow,sans-serif;transition:transform var(--t-fast) var(--ease-out)}
.cal-day i{position:absolute;inset:3px;border-radius:50%;border:3px solid var(--day);opacity:.95}
.cal-day.today span{color:var(--lime)}
.cal-day.selected{background:#2a2e33}
.cal-day:disabled{opacity:.25}
.cal-day:not(:disabled):active{transform:scale(.9)}
.cal-summary{text-align:center;margin:14px 0 0;font-size:13px}
.calendar.cal-left .cal-grid{animation:enter-left var(--t-default) var(--ease-out)}
.calendar.cal-right .cal-grid{animation:enter-right var(--t-default) var(--ease-out)}

/* Mobile: drawer, bottom sheet, layout. */
.menu-button,.scrim{display:none}
@media(max-width:600px){
 .menu-button{display:grid!important;place-items:center;width:38px;height:38px;margin-right:4px}
 .menu-button svg{width:22px;height:22px}
 .topbar{justify-content:flex-start;gap:6px}.topbar-right{margin-left:auto}
 .sidebar{display:flex!important;width:min(300px,84vw);padding:28px 16px 18px;transform:translateX(-105%);visibility:hidden;transition:transform var(--t-default) var(--ease-out),visibility 0s linear var(--t-default);z-index:80;box-shadow:20px 0 60px #000c}
 body.drawer-open .sidebar{transform:none;visibility:visible;transition:transform var(--t-default) var(--ease-out)}
 .sidebar .wordmark{font-size:24px!important;letter-spacing:5px!important;justify-content:flex-start!important;margin:0 12px 30px!important}
 .sidebar .wordmark img{width:28px;height:28px}
 .sidebar .workspace-label{display:block!important}.sidebar .nav-link span{display:inline!important}.sidebar .nav-link{padding:13px 14px}
 .sidebar-bottom{display:block!important}
 .scrim{display:block;position:fixed;inset:0;background:#000b;opacity:0;pointer-events:none;transition:opacity var(--t-default);z-index:75}
 body.drawer-open .scrim{opacity:1;pointer-events:auto}
 dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:20px 20px 0 0;border-bottom:0;max-height:88vh;padding:22px 18px 28px}
 dialog[open]{animation:sheet-in var(--t-sheet) var(--ease-out)}
 @keyframes sheet-in{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
 .fab{bottom:88px;right:18px;width:54px;height:54px}
 .ring-row{gap:6px;padding:16px 0 20px}
 .mini-ring-dial{width:min(110px,28vw)}
 .mini-ring-label{font-size:11px;letter-spacing:1.6px}
 .monitor-row{gap:10px}.monitor-card{padding:14px}
 .monitor-title{font-size:11px;letter-spacing:1.4px}.monitor-body small{font-size:12px}
 .score-pill{min-width:96px;padding:10px 12px;font-size:19px}
 .activity-name{font-size:13px;letter-spacing:1.4px}
 .key-stat{padding:12px 14px}.key-val strong{font-size:22px}
 .tonight-row strong{font-size:28px}
}
@media(prefers-reduced-motion:reduce){main[class*="enter-"],.tip,dialog[open],.flip .flip-inner,.cal-grid{animation:none!important}}
.day-panel,.tonight{margin-bottom:18px}
@media(min-width:900px){.key-stats{grid-template-columns:1fr 1fr}.monitor-row{gap:18px}}

/* Stress monitor. */
.stress-card{display:flex;flex-direction:column}
.stress-gauge{width:min(330px,88%);margin:6px auto 0;display:block;overflow:visible}
.gauge-val{font:700 64px Barlow,sans-serif;fill:#fff;text-anchor:middle}
.gauge-level{font:700 16px Barlow,sans-serif;letter-spacing:3px;text-anchor:middle}
.gauge-end{font:500 13px Barlow,sans-serif;fill:#8e969f;text-anchor:middle}
.gauge-knob{filter:drop-shadow(0 0 6px #0009)}
.stress-updated{text-align:center;color:var(--muted);font-size:13px;margin:0 0 18px}
.zone-bars{display:grid;gap:12px;background:#1b1d20;border-radius:14px;padding:16px}
.zone{display:grid;grid-template-columns:92px 1fr 64px;align-items:center;gap:12px}
.zone span{display:flex;align-items:center;gap:8px;font:600 12px Barlow,sans-serif;letter-spacing:1.6px;text-transform:uppercase}
.zone span i{width:9px;height:9px;border-radius:50%}
.zone-track{height:8px;border-radius:4px;background:#2a2d31;overflow:hidden}
.zone-track b{display:block;height:100%;border-radius:4px;transition:width var(--t-dial) var(--ease-emph)}
.zone strong{font:700 15px Barlow,sans-serif;text-align:right}
.stress-chart{width:100%;height:auto;display:block;overflow:visible}
.stress-chart text{font:500 12px Barlow,sans-serif;fill:#8e969f}
.stress-chart .axis-l{text-anchor:end}
.stress-chart .chart-grid{stroke:#25282c}
.stress-chart .band{fill:#ffffff0d}.stress-chart .band.exercise{fill:color-mix(in srgb,var(--blue) 16%,transparent)}
.stress-chart .band-label{fill:#c9cfd5;font-weight:600}
.band-key{display:inline-block;width:12px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.band-key.sleep{background:#ffffff26}.band-key.exercise{background:color-mix(in srgb,var(--blue) 45%,transparent)}

/* Brand. */
.wordmark{display:flex;align-items:center}
.wordmark .wordmark-full{width:150px;height:auto}
.wordmark .wordmark-mark{display:none;width:38px;height:auto}
@media(max-width:850px) and (min-width:601px){.wordmark .wordmark-full{display:none}.wordmark .wordmark-mark{display:block}}
.topbar-logo{display:none}
.topbar-logo img{height:20px;width:auto;display:block}

/* Top bar: centred date pill and device chip. */
.topbar{position:relative;display:flex;align-items:center;gap:12px}
.date-pill{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;background:#1a1d21;border:1px solid var(--line);border-radius:999px;padding:4px}
.date-pill button{display:grid;place-items:center;height:34px;color:#e9ecef;border-radius:999px;transition:background var(--t-fast),transform var(--t-fast) var(--ease-out)}
.date-pill button:active{transform:scale(.94)}
.date-pill>button:first-child,.date-pill>button:last-child{width:34px}
.date-pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.date-pill button:disabled{opacity:.3}
.date-pill-label{min-width:118px;padding:0 18px;background:#2a2e33;font:700 13px Barlow,sans-serif;letter-spacing:2.4px}
.date-pill-label:hover{background:#33383e}
.topbar-right{margin-left:auto}
.device-chip{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;border-radius:12px;color:#c9cfd5;transition:background var(--t-fast)}
.device-chip:hover{background:#1a1d21}
.chip-text{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.chip-pct{font:700 15px Barlow,sans-serif;color:#e9ecef}
.chip-sync{font:500 11px Barlow,sans-serif;color:var(--muted)}
.device-chip.low .chip-pct{color:var(--red)}
.device-icon{width:24px;height:32px;overflow:visible}
.device-icon .strap{stroke:#5d646c;stroke-width:3;stroke-linecap:round;fill:none}
.device-icon .body{fill:none;stroke:#e9ecef;stroke-width:2}
.device-icon .fill{fill:var(--lime);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--level,.5));transition:transform var(--t-dial) var(--ease-emph)}
.device-chip.low .device-icon .fill{fill:var(--red)}
.device-icon .pulse{fill:var(--lime);stroke:var(--bg);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:sync-pulse 2.4s ease-in-out infinite}
.device-chip.stale .device-icon .pulse{fill:var(--yellow);animation:none}
@keyframes sync-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
.device-hero{display:flex;align-items:center;gap:16px;margin:6px 0 18px}
.device-hero .device-icon{width:42px;height:56px}
.device-hero strong{display:block;font:700 30px Barlow,sans-serif}
.page-heading>div:last-child:empty{display:none}
@media(max-width:1000px){.breadcrumb{display:none}}
@media(max-width:600px){
 .topbar-logo{display:block}
 .topbar-logo img{height:16px}
 .topbar{padding:0 12px;gap:4px}
 .date-pill{position:static;transform:none;margin:0 auto;padding:3px}
 .date-pill button{height:30px}
 .date-pill>button:first-child,.date-pill>button:last-child{width:28px}
 .date-pill-label{min-width:0;padding:0 10px;font-size:11px;letter-spacing:1.6px}
 .topbar-right{margin-left:0}
 .chip-sync{display:none}
 .device-chip{padding:4px}
}

@media(max-width:600px){.sidebar .wordmark .wordmark-full{width:140px;height:auto}.sidebar .wordmark .wordmark-mark{display:none}}
.data-badge[hidden]{display:none!important}
.topbar-logo .logo-mark{display:none;height:14px;width:auto}
@media(max-width:400px){.topbar-logo .logo-full{display:none}.topbar-logo .logo-mark{display:block}}

/* ===== Phase 4: overview extras ===== */
.whats-new{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;border-radius:18px;padding:18px 20px;margin-bottom:18px;background:linear-gradient(#141619,#141619) padding-box,linear-gradient(120deg,var(--lime),var(--blue),var(--purple)) border-box;border:1.5px solid transparent;transition:opacity 180ms,transform 180ms}
.whats-new.leaving{opacity:0;transform:scale(.97)}
.whats-new h3{margin:6px 0 4px;font:600 18px Figtree,sans-serif}.whats-new p{margin:0;color:var(--muted);font-size:14px;max-width:560px}
.insight-stack{display:grid;gap:10px;margin-bottom:22px}
.insight-x{background:var(--panel-alt);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.insight-x summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
.insight-x summary::-webkit-details-marker{display:none}
.insight-x .insight-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#202327;color:var(--lime)}
.insight-x .insight-icon .nav-icon{width:18px;height:18px}
.insight-text strong{display:block;font-size:15px}.insight-text small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.insight-x .chev{font-style:normal;color:var(--muted);font-size:20px;transition:transform var(--t-default) var(--ease-std)}
.insight-x[open] .chev{transform:rotate(90deg)}
.insight-body{padding:0 16px 16px 66px;animation:enter-fade var(--t-default) var(--ease-std)}
.insight-body p{margin:0 0 12px;color:#d6dbe0;font-size:14px;line-height:1.55}
.streak-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.streak{position:relative;background:var(--panel-alt);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.streak:after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--c)}
.streak-flame{color:var(--c)}.streak-flame .nav-icon{width:20px;height:20px}
.streak b{font:700 40px Barlow,sans-serif;line-height:1;margin-top:6px}
.streak small{color:var(--muted);font-size:12px}
.streak-label{font:600 12px Barlow,sans-serif;letter-spacing:1.4px;text-transform:uppercase;margin-top:10px}
.streak em{font-style:normal;color:var(--muted);font-size:12px}
.records{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:26px}
.record{background:#16181b;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px;transition:transform var(--t-fast) var(--ease-out)}
.record:not(:disabled):active{transform:scale(.97)}
.record span{font:600 11px Barlow,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.record strong{font:700 22px Barlow,sans-serif}.record small{color:var(--muted);font-size:12px}
.type-row{display:grid;grid-template-columns:120px 1fr 40px;align-items:center;gap:12px;padding:8px 0;font-size:14px}
.type-bar{height:8px;border-radius:4px;background:#25282c;overflow:hidden}.type-bar b{display:block;height:100%;background:var(--blue);border-radius:4px}
.type-row strong{text-align:right;font-family:Barlow,sans-serif}
.summary-line{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:10px;padding-top:12px;font-size:14px}
.summary-line span{flex:1;color:#c9cfd5}.summary-line strong{font:700 20px Barlow,sans-serif}

/* ===== Phase 5: deep dive, doughnut, need, walkthrough ===== */
.deep-stats{grid-template-columns:repeat(3,1fr)}
.hr-chart{width:100%;height:auto;display:block;overflow:visible}
.hr-chart text{font:500 12px Barlow,sans-serif;fill:#8e969f}.hr-chart .axis-l{text-anchor:end}
.hr-chart .zone-lbl{fill:#c9cfd5;font-weight:600}
.hr-line{fill:none;stroke:#ff6b7a;stroke-width:2;stroke-linejoin:round}
.doughnut-wrap{display:flex;align-items:center;gap:22px;margin-bottom:16px}
.doughnut{width:150px;flex-shrink:0}
.doughnut circle{transition:stroke-dasharray var(--t-dial) var(--ease-emph)}
.d-val{font:700 20px Barlow,sans-serif;fill:#fff;text-anchor:middle}.d-lbl{font:600 9px Barlow,sans-serif;letter-spacing:2px;fill:var(--muted);text-anchor:middle}
.d-legend{list-style:none;padding:0;margin:0;display:grid;gap:8px;flex:1}
.d-legend li{display:grid;grid-template-columns:12px 1fr auto 40px;align-items:center;gap:8px;font-size:14px}
.d-legend i{width:10px;height:10px;border-radius:3px}.d-legend b{font:700 15px Barlow,sans-serif}.d-legend small{color:var(--muted);text-align:right}
.need-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.need-row strong{font:700 16px Barlow,sans-serif}
.need-row.total{border-bottom:0;font-weight:600}.need-row.total strong{font-size:22px;color:var(--purple)}
.need-panel .secondary-button{margin-top:8px}
.walk{min-height:120px;animation:enter-left var(--t-default) var(--ease-out)}
.walk-lead{font-size:16px!important;color:#e9ecef!important;line-height:1.6!important}
.walk-bd .bd{position:static;border-radius:16px;padding:16px;aspect-ratio:auto;inset:auto}
.walk-bd .bd .flip-hint{display:none}
.walk-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.walk-dots{display:flex;gap:6px}.walk-dots i{width:8px;height:8px;border-radius:50%;background:#3a3f45;transition:background var(--t-default),width var(--t-default)}
.walk-dots i.on{background:#fff;width:20px;border-radius:4px}

/* ===== Phase 6: trends ===== */
.trend-tabs{margin-bottom:20px}
.dist-row{display:grid;grid-template-columns:150px 1fr 64px;align-items:center;gap:12px;padding:9px 0;font-size:13px}
.dist-row span{display:flex;align-items:center;gap:8px}.dist-row i{width:10px;height:10px;border-radius:3px}
.dist-track{height:10px;border-radius:5px;background:#25282c;overflow:hidden}.dist-track b{display:block;height:100%;border-radius:5px;transition:width var(--t-dial) var(--ease-emph)}
.dist-row strong{text-align:right;font-family:Barlow,sans-serif}
.pager{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.pager::-webkit-scrollbar{display:none}
.metric-card{scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.metric-card header{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px}
.metric-card h3{margin:0;font:600 13px Barlow,sans-serif;letter-spacing:2px;text-transform:uppercase}
.metric-card header strong{font:700 30px Barlow,sans-serif;color:var(--accent);grid-row:span 2;align-self:center}
.metric-card header small{color:var(--muted);font-size:12px}
.mc-chart{position:relative}
.mc-line{position:absolute;left:0;right:0;border-top:1px dashed #5a616a;z-index:1;pointer-events:none}
.mc-line span{position:absolute;right:0;top:-18px;font:600 11px Barlow,sans-serif;color:#9aa3ad;background:var(--panel);padding:0 4px}
.mc-line.lo span{top:2px}.mc-line.ref{border-top-color:var(--accent)}.mc-line.ref span{color:var(--accent);right:auto;left:0}
.metric-card .bar-col .bar{background:var(--accent)}
.metric-card footer{color:var(--muted);font-size:13px;margin-top:10px}
.pager-dots{display:flex;justify-content:center;gap:8px;margin:14px 0 26px}
.pager-dots button{width:8px;height:8px;border-radius:4px;background:#3a3f45;transition:width var(--t-default),background var(--t-default)}
.pager-dots button.on{width:22px;background:#fff}

/* ===== Phase 7: coach ===== */
.coach-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;align-items:start}
.coach-grid .panel{margin:0}
.seg{display:flex;gap:6px;background:#16181b;border:1px solid var(--line);border-radius:999px;padding:4px}
.seg button{flex:1;border-radius:999px;padding:8px 12px;font:600 12px Barlow,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);transition:background var(--t-default),color var(--t-default)}
.seg button.active{background:#fff;color:#0b0c0e}
.coach-result{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:16px;margin:16px 0 10px}
.coach-result small{display:block;font:600 11px Barlow,sans-serif;letter-spacing:1.8px;color:var(--muted);margin-bottom:6px}
.coach-result strong{font:700 36px Barlow,sans-serif}
.coach-result .tonight-line{margin-bottom:16px}
.wake-input input{background:transparent;border:0;border-bottom:2px dashed #4a5058;color:#fff;font:700 34px Barlow,sans-serif;width:5.4ch;padding:0;color-scheme:dark}
.strain-meter{margin:18px 0 6px}
.sm-track{position:relative;height:14px;border-radius:7px;background:#25282c}
.sm-band{position:absolute;top:-4px;bottom:-4px;border-radius:8px;background:color-mix(in srgb,var(--blue) 22%,transparent);border:1px dashed color-mix(in srgb,var(--blue) 70%,transparent)}
.sm-fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 40%,#000),var(--blue));transition:width var(--t-dial) var(--ease-emph)}
.sm-dot{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;border:4px solid var(--blue);box-shadow:0 0 12px color-mix(in srgb,var(--blue) 60%,transparent);transition:left var(--t-dial) var(--ease-emph)}
.sm-scale{display:flex;justify-content:space-between;font:500 11px Barlow,sans-serif;color:var(--muted);margin-top:8px}
.coach-now{display:flex;align-items:center;gap:14px;margin:12px 0 4px}
.coach-now strong{font:700 40px Barlow,sans-serif;color:var(--blue)}
.coach-now span{font-size:14px;color:#d6dbe0;line-height:1.45}
.coach-curve{width:100%;height:auto;display:block;overflow:visible}
.coach-curve text{font:500 11px Barlow,sans-serif;fill:#8e969f}.coach-curve .axis-l{text-anchor:end}
.coach-curve .target-band{fill:color-mix(in srgb,var(--blue) 12%,transparent)}
.wake-settings{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.wake-settings label{display:flex;flex-direction:column;gap:6px;font:600 11px Barlow,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.wake-settings input{background:#16181b;border:1px solid var(--line);border-radius:10px;color:#fff;padding:9px 12px;font:600 16px Barlow,sans-serif;color-scheme:dark}
.schedule{display:grid;gap:6px}
.sched-row{display:grid;grid-template-columns:90px auto 1fr auto;align-items:center;gap:14px;padding:10px 14px;border-radius:12px;background:#16181b}
.sched-row.today{background:color-mix(in srgb,var(--purple) 14%,#16181b);border:1px solid color-mix(in srgb,var(--purple) 40%,transparent)}
.sched-row span{font:600 13px Barlow,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#c9cfd5}
.sched-row strong{font:700 18px Barlow,sans-serif}
.sched-row i{height:2px;background:repeating-linear-gradient(90deg,var(--purple) 0 5px,transparent 5px 10px);opacity:.6}

/* ===== Phase 9: profile, settings, help ===== */
.nav-sep{height:1px;background:var(--line);margin:14px 12px}
.nav-link.minor{font-size:13px;padding-top:10px;padding-bottom:10px}
.profile-hero{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.avatar.xl{width:84px;height:84px;font-size:30px;border-radius:50%;display:grid;place-items:center}
.profile-hero h2{margin:0 0 6px;font:700 28px Barlow,sans-serif}.profile-hero p{margin:0;color:var(--muted)}
.report-head,.report-row{display:grid;grid-template-columns:1fr 90px 90px 18px;align-items:center;gap:8px}
.report-head small{font:600 11px Barlow,sans-serif;letter-spacing:1.4px;color:var(--muted);text-align:right;text-transform:uppercase}
.report-row{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.report-row strong{font:700 17px Barlow,sans-serif;text-align:right}.report-row small{color:var(--muted);text-align:right;font:500 14px Barlow,sans-serif}
.settings .setting-line{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.settings .setting-line:last-child{border-bottom:0}
.settings .setting-line strong{display:block;font-size:14px}.settings .setting-line small{color:var(--muted);font-size:12px}
.settings .seg{min-width:240px}
.settings select{background:#16181b;color:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:600 14px Barlow,sans-serif}
.perm-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.perm-row b{font:600 12px Barlow,sans-serif;letter-spacing:1px}.perm-row b.on{color:var(--lime)}.perm-row b.off{color:var(--muted)}
.faq{display:grid;gap:10px;margin-bottom:18px}
.faq .insight-body{padding-left:16px}

@media(max-width:900px){.coach-grid{grid-template-columns:1fr}.records{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
 .streak-grid{gap:8px}.streak{padding:12px}.streak b{font-size:30px}.streak-label{font-size:10px;letter-spacing:1px}
 .deep-stats{grid-template-columns:1fr 1fr}
 .doughnut-wrap{flex-direction:column;align-items:stretch}.doughnut{margin:0 auto}
 .dist-row{grid-template-columns:118px 1fr 56px;font-size:12px}
 .type-row{grid-template-columns:100px 1fr 34px}
 .coach-result strong,.wake-input input{font-size:28px}
 .settings .setting-line{flex-direction:column;align-items:stretch}.settings .seg{min-width:0}
 .report-head,.report-row{grid-template-columns:1fr 70px 70px 16px}
 .insight-body{padding-left:16px}
}
.wake-input input{width:auto;min-width:3.4em;cursor:pointer}
.wake-input input::-webkit-calendar-picker-indicator{display:none}
.wake-input input::-webkit-datetime-edit{padding:0}

/* =====================================================================
   Design system layer: one type scale and one spacing scale for every screen.
   Kept last so it settles conflicts from earlier, screen-specific rules.
   ===================================================================== */
:root{--label:600 12px/1.25 Barlow,sans-serif;--label-ls:1.6px;--fs-caption:12px;--fs-note:13px;--fs-body:14px;--fs-title:16px;--fs-section:20px;--fs-h1:32px;--num-sm:18px;--num:24px;--num-lg:32px;--radius:16px;--radius-sm:12px;--pad:20px}
/* Labels */
.eyebrow,.page-heading .eyebrow,.panel-heading h3,.metric-name,.key-name,.monitor-title,.record span,.stat>span,.zone span,.streak-label,.mini-ring-label,.coach-result small,.tonight-row small,.sched-row span,.metric-card h3,.report-head small,.wake-settings label,.sync-grid span,.score-head,.impact-head,.impact-top,.d-lbl{font:var(--label)!important;letter-spacing:var(--label-ls)!important;text-transform:uppercase}
.eyebrow,.page-heading .eyebrow,.coach-result small,.tonight-row small,.report-head small,.wake-settings label,.sync-grid span{color:var(--muted)!important}
.panel-heading h3,.metric-name,.key-name,.monitor-title,.metric-card h3,.score-head{color:#e9ecef}
.page-heading .eyebrow{margin-bottom:6px}
/* Headings */
.page-heading h1{font:700 var(--fs-h1)/1.1 Barlow,sans-serif;letter-spacing:-.5px;margin:0 0 6px}
.section-title{margin:32px 0 14px!important}
.section-title h2{font:700 var(--fs-section)/1.2 Barlow,sans-serif!important;letter-spacing:.2px}
.panel-heading{margin-bottom:14px!important;gap:12px}
/* Text */
.subtext{font-size:var(--fs-body)!important;line-height:1.5;max-width:none!important;margin:0!important}
.info-note{font-size:var(--fs-note)!important;line-height:1.55;padding:12px 0!important}
.chart-legend,.monitor-body small,.insight-text small,.record small,.streak small,.streak em,.activity-name small,.activity-times small,.metric-card header small,.metric-card footer,.sm-scale,.cal-summary,.stress-updated,.vital-detail,.setting-line small,.profile-hero p{font-size:var(--fs-caption)!important}
.health-label,.need-row,.perm-row,.report-row,.type-row,.dist-row,.d-legend li,.insight-body p,.bd-row,.coach-now span,.summary-line,.sched-row,.settings .setting-line strong,.faq p{font-size:var(--fs-body)!important}
.insight-text strong,.profile-summary strong,.whats-new h3{font-size:var(--fs-title)!important;line-height:1.35}
/* Numbers */
.health-value,.metric-row strong,.need-row strong,.report-row strong,.sched-row strong,.monitor-badge{font-size:var(--num-sm)!important}
.key-val strong,.stat strong,.record strong,.summary-line strong{font-size:var(--num)!important;line-height:1.1}
.stat strong{margin:10px 0 0!important}
.metric-card header strong,.tonight-row strong,.coach-result strong,.wake-input input,.streak b,.coach-now strong,.device-hero strong{font-size:var(--num-lg)!important;line-height:1.05}
/* Surfaces and spacing */
.panel{padding:var(--pad);border-radius:var(--radius);margin-bottom:16px}
.content-grid{gap:16px!important;margin-bottom:16px!important}
.content-grid>.panel,.coach-grid>.panel,.others-grid>.panel{margin-bottom:0!important}
.stat-grid{gap:12px!important;margin-bottom:16px!important}
.stat{padding:16px!important;border-radius:var(--radius-sm)!important;background:var(--panel-alt)!important}
.ring-row,.monitor-row,.insight-stack,.key-stats,.streak-grid,.records,.whats-new,.score-layout{margin-bottom:16px!important}
.key-stats,.insight-stack{gap:10px!important}
.monitor-card,.key-stat,.streak,.record,.insight-x,.metric-card,.whats-new{border-radius:var(--radius)!important}
.sr-panel,.day-panel,.tonight,.need-panel,.report{margin-bottom:16px!important}
.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.primary-button,.secondary-button{font:700 13px/1 Figtree,sans-serif!important;letter-spacing:.2px!important;padding:12px 16px!important;border-radius:10px!important;min-height:42px}
.text-button{font-size:var(--fs-body)}
@media(max-width:600px){
 :root{--fs-h1:28px;--fs-section:18px;--num-lg:28px;--pad:16px}
 main{padding-left:16px!important;padding-right:16px!important}
 .page-heading{margin-bottom:20px!important}
 .streak b{font-size:26px!important}
}
/* Press feedback on every tappable card. */
.monitor-card,.key-stat,.record,.mini-ring,.activity-pill-row,.insight-x summary,.metric-card,.cal-day,.quick,.stat[role=button]{-webkit-tap-highlight-color:transparent}
.key-stat:active,.insight-x summary:active,.quick:active{transform:scale(.985)}
[data-longtip]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Chart scrubbing and long-press peek. */
svg.scrub{touch-action:pan-y;cursor:crosshair}
.scrub-host{position:relative}
.scrub-line{stroke:#fff;stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.scrub-dot{fill:#fff;stroke:var(--bg);stroke-width:2.5;opacity:0;pointer-events:none}
svg.scrubbing .scrub-line,svg.scrubbing .scrub-dot{opacity:1}
.scrub-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 6px));background:#f4f6f8;color:#111316;border-radius:9px;padding:6px 10px;font:600 12px Figtree,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--t-fast);box-shadow:0 8px 24px #0008;z-index:5}
.scrub-label.on{opacity:1}
.bar-col[data-tip]{cursor:pointer}
.bar-col[data-tip]:active .bar{filter:brightness(1.3)}
.mini-ring.peeking{transform:scale(.95)}
/* Scoop Age */
.age-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 56px;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);cursor:help}
.age-row:last-child{border-bottom:0}
.age-name{font-size:var(--fs-body);display:flex;flex-direction:column;gap:2px}
.age-name small{color:var(--muted);font-size:var(--fs-caption)}
.age-bar{position:relative;height:8px;border-radius:4px;background:#25282c}
.age-bar .mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#5a616a}
.age-bar b{position:absolute;top:0;bottom:0;border-radius:4px;transition:width var(--t-dial) var(--ease-emph)}
.age-bar b.good{background:var(--lime)}.age-bar b.bad{background:var(--amber)}
.age-row strong{font:700 var(--num-sm) Barlow,sans-serif;text-align:right}
.age-row strong.good{color:var(--lime)}.age-row strong.bad{color:var(--amber)}
.birth-year,.setting-input{display:flex;flex-direction:column;gap:6px;font:var(--label);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--muted);margin-top:14px}
.birth-year input,.setting-input{background:#16181b;border:1px solid var(--line);border-radius:10px;color:#fff;padding:10px 12px;font:600 16px Barlow,sans-serif;letter-spacing:0;width:140px;color-scheme:dark}
.setting-input{margin-top:0}
.panel-heading .chart-legend{white-space:nowrap;flex-shrink:0}.panel-heading h3{min-width:0}

/* ===== Motion pass: things grow, draw and settle into place ===== */
@keyframes grow-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop-in{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes spin-in{from{transform:rotate(-120deg) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes orb-spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes orb-breathe{0%,100%{filter:drop-shadow(0 0 16px rgba(31,227,95,.18))}50%{filter:drop-shadow(0 0 34px rgba(31,227,95,.45))}}
@keyframes marker-in{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
/* Bars grow from their baseline, staggered left to right. */
.bar-col .bar{transform-origin:50% 100%;animation:grow-y 650ms var(--ease-emph) both;animation-delay:calc(var(--i,0) * 22ms)}
.dist-track b,.zone-track b,.type-bar b,.sm-fill,.age-bar b.bad,.tri b,.impact-track i{transform-origin:0 50%;animation:grow-x 700ms var(--ease-emph) both}
.age-bar b.good{transform-origin:100% 50%;animation:grow-x 700ms var(--ease-emph) both}
.sm-dot{animation:pop-in 500ms var(--ease-emph) 450ms both}
.sm-band{animation:rise 400ms var(--ease-out) both}
/* Lines draw themselves; dots and knobs pop in after. */
.draw-line{stroke-dasharray:1;animation:draw 1000ms var(--ease-std) both}
.sr-dot,.sr-val{animation:pop-in 420ms var(--ease-emph) 700ms both;transform-box:fill-box;transform-origin:center}
.gauge-knob{animation:pop-in 520ms var(--ease-emph) 350ms both;transform-box:fill-box;transform-origin:center}
.stress-gauge path{stroke-dasharray:1;animation:draw 900ms var(--ease-std) both}
/* Sleep doughnut spins into place. */
.doughnut{animation:spin-in 800ms var(--ease-emph) both}
/* Healthspan orb: slow drift, twinkling particles, breathing glow. */
.orb-dots{transform-box:view-box;transform-origin:100px 100px;animation:orb-spin 120s linear infinite}
.orb-dots circle:nth-child(3n){animation:twinkle 3.4s ease-in-out infinite}
.orb-dots circle:nth-child(5n+1){animation:twinkle 4.6s ease-in-out 1.2s infinite}
.orb svg{animation:orb-breathe 6s ease-in-out infinite}
.pace-marker{transform-origin:50% 100%;animation:marker-in 600ms var(--ease-emph) 400ms both}
.healthspan-card.locked{display:block;width:100%;text-align:center;cursor:pointer;margin-bottom:16px;transition:transform var(--t-fast) var(--ease-out),border-color var(--t-default)}
.healthspan-card.locked:hover{border-color:#3a3f45}.healthspan-card.locked:active{transform:scale(.985)}
.healthspan-card.locked .orb{display:block}
.healthspan-card.locked .orb svg{opacity:.55}
.lock-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#ffffff14;margin-bottom:10px}
.lock-icon .nav-icon{width:22px;height:22px}
.lock-title{font:700 20px Barlow,sans-serif;max-width:160px;line-height:1.15}
.lock-note{display:block;color:var(--muted);font-size:var(--fs-note);max-width:360px;margin:0 auto}
/* Grid items rise in, one after another. */
.streak,.record,.key-stat,.stat,.age-row,.monitor-card,.metric-card,.insight-x,.sched-row,.type-row,.dist-row{animation:rise 420ms var(--ease-out) both}
.streak:nth-child(2),.record:nth-child(2),.key-stat:nth-child(2),.stat:nth-child(2),.age-row:nth-child(2),.monitor-card:nth-child(2),.metric-card:nth-child(2),.insight-x:nth-child(2),.sched-row:nth-child(2){animation-delay:50ms}
.streak:nth-child(3),.record:nth-child(3),.key-stat:nth-child(3),.stat:nth-child(3),.age-row:nth-child(3),.metric-card:nth-child(3),.insight-x:nth-child(3),.sched-row:nth-child(3){animation-delay:100ms}
.record:nth-child(4),.key-stat:nth-child(4),.stat:nth-child(4),.age-row:nth-child(4),.sched-row:nth-child(4){animation-delay:150ms}
.key-stat:nth-child(n+5),.stat:nth-child(n+5),.age-row:nth-child(n+5),.sched-row:nth-child(n+5){animation-delay:200ms}
/* Trends: cards stacked vertically. */
.metric-stack{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:1100px){.metric-stack{grid-template-columns:1fr 1fr}.metric-stack .metric-card:first-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.bar-col .bar,.dist-track b,.zone-track b,.type-bar b,.sm-fill,.age-bar b,.tri b,.impact-track i,.sm-dot,.sm-band,.draw-line,.sr-dot,.sr-val,.gauge-knob,.stress-gauge path,.doughnut,.orb-dots,.orb-dots circle,.orb svg,.pace-marker,.streak,.record,.key-stat,.stat,.age-row,.monitor-card,.metric-card,.insight-x,.sched-row,.type-row,.dist-row{animation:none!important}}
.metric-card footer{display:flex;flex-wrap:wrap;gap:6px 18px}
.metric-card footer span{display:flex;align-items:center;gap:6px}
.key-dash{display:inline-block;width:16px;border-top:1px dashed #8e969f}.key-dash.ref{border-top-color:var(--accent)}
/* Date pill keeps one width, sized to its widest label, so arrows never move. */
.date-pill-label{width:calc(var(--pill-label-w,96px) + 36px)!important;min-width:0!important;padding:0!important;text-align:center;white-space:nowrap}
@media(max-width:600px){.date-pill-label{width:calc(var(--pill-label-w,84px) + 20px)!important}}
/* Screen open/close: scale .85→1 open, 1.1→1 back, 300ms, brief fade. */
:root{--ease-extra-slow:cubic-bezier(.05,.7,.1,1)}
main.enter-zoom{animation:screen-open 300ms var(--ease-extra-slow)!important}
main.enter-close{animation:screen-close 300ms var(--ease-extra-slow)}
@keyframes screen-open{0%{transform:scale(.85);opacity:0}12%{opacity:0}29%{opacity:1}100%{transform:none;opacity:1}}
@keyframes screen-close{0%{transform:scale(1.1);opacity:0}22%{opacity:0}39%{opacity:1}100%{transform:none;opacity:1}}
/* Inflating check: answer grows when chosen. */
.choice.inflate{animation:inflate 220ms var(--ease-emph)}
@keyframes inflate{0%{transform:scale(.88)}60%{transform:scale(1.08)}100%{transform:none}}
/* Coach crossfade: 250ms when goal or times change. */
.crossfade{animation:crossfade 250ms ease-in-out}
@keyframes crossfade{0%{opacity:.15}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){main.enter-close,.choice.inflate,.crossfade{animation:none!important}}

/* Inline links: same size as the surrounding text, bold, blue, flush with it. */
.link,.text-button{display:inline;background:none!important;border:0;padding:0!important;margin:0!important;min-height:0!important;font:inherit!important;font-weight:700!important;color:var(--blue)!important;letter-spacing:inherit;cursor:pointer;text-align:left}
.link:hover,.text-button:hover{text-decoration:underline;filter:none}
.insight-card p .link{margin-top:8px!important;display:inline-block}
/* Buttons with icons: icon and label centred on one line. */
.primary-button,.secondary-button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;line-height:1}
.primary-button .nav-icon,.secondary-button .nav-icon{width:18px;height:18px;flex-shrink:0;margin:0}
/* Profile card. */
.profile-card .profile-summary{display:flex;align-items:center;gap:18px;margin:0 0 16px}
.profile-card h2{margin:0 0 6px;font:700 26px Barlow,sans-serif}
.profile-card .muted{margin:0;color:var(--muted);font-size:var(--fs-body);line-height:1.5}
.profile-card .sync-grid{margin:0}
/* Settings rows that open another page. */
.setting-link{display:flex;width:100%;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body);text-align:left}
.setting-link:last-child{border-bottom:0}
.setting-link span{display:flex;align-items:center;gap:10px}.setting-link .nav-icon{width:18px;height:18px;color:var(--muted)}
.setting-link i{font-style:normal;color:var(--muted);font-size:20px}
/* Drawer open: freeze the page behind it. */
body.drawer-open{position:fixed;left:0;right:0;overflow:hidden;overscroll-behavior:none}
.sidebar{overflow-y:auto;overscroll-behavior:contain}
/* Date pill: as wide as "YESTERDAY" and no wider. */
.date-pill-label{width:calc(var(--pill-label-w,90px) + 28px)!important}
@media(max-width:600px){.date-pill-label{width:calc(var(--pill-label-w,78px) + 18px)!important}}
.record{cursor:pointer}

/* Side menu: one account card. */
.sidebar-bottom{border-top:1px solid var(--line);padding-top:14px}
.account-card{display:flex;align-items:center;gap:6px;border-radius:14px;padding:6px;background:#16181b;border:1px solid var(--line);transition:border-color var(--t-default)}
.account-card.connected{border-color:rgba(31,227,95,.35);background:linear-gradient(135deg,rgba(31,227,95,.08),rgba(31,227,95,.01))}
.account-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:6px;border-radius:10px;text-align:left}
.account-main:hover{background:#ffffff08}
.account-main .avatar{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center}
.account-main .avatar .nav-icon{width:20px;height:20px}
.account-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.account-text strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-text small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-status{display:flex;align-items:center;gap:6px;color:#8ff0ad!important}
.account-status .live-dot{width:7px;height:7px;margin:0;box-shadow:0 0 0 3px rgba(31,227,95,.18)}
.account-gear{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.account-gear:hover{background:#ffffff0d;color:#fff}.account-gear .nav-icon{width:20px;height:20px}
@media(max-width:850px) and (min-width:601px){.account-text,.account-gear{display:none}.account-card{justify-content:center}}
/* Sticky top bar so the date switcher is always within reach. */
.topbar{position:sticky;top:0;z-index:50;background:rgba(9,10,12,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}