@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root { --bone:#e8e3d8; --paper:#f5f1e8; --ink:#171815; --muted:#6d6b62; --line:#bdb8aa; --acid:#c7ee38; --rust:#ad4c3c; --white:#fffdf7; --display:'Barlow Condensed', Impact, sans-serif; --body:'Manrope', Helvetica, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bone); font-family:var(--body); font-size:14px; touch-action:manipulation; overscroll-behavior-y:none; }
button, input, select { font:inherit; }
button { color:inherit; cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--rust); outline-offset:2px; }
.app-shell { min-height:100vh; padding-bottom:80px; }
.topbar { border-bottom:1px solid var(--ink); display:flex; justify-content:space-between; align-items:center; padding:18px 20px 15px; }
.brand { font:700 28px/1 var(--display); letter-spacing:.02em; text-transform:uppercase; }
.brand span { color:var(--rust); }
.eyebrow, .mono, .label { font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.eyebrow { color:var(--muted); margin:0 0 7px; }
.page { max-width:1220px; margin:0 auto; padding:28px 20px 48px; }
.page-grid { display:grid; gap:22px; }
.primary { background:var(--acid); border:1px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:14px 18px; font-weight:800; min-height:48px; }
.primary:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.quiet { background:transparent; border:1px solid var(--ink); padding:12px 15px; min-height:44px; font-weight:700; }
.text-button { border:0; background:none; padding:8px 0; text-decoration:underline; }
h1, h2, h3 { margin:0; font-family:var(--display); text-transform:uppercase; letter-spacing:.01em; }
h1 { font-size:clamp(45px,10vw,86px); line-height:.86; max-width:700px; }
h2 { font-size:38px; line-height:.95; }
h3 { font-size:25px; }
p { line-height:1.55; }
.intro { display:flex; gap:24px; justify-content:space-between; align-items:end; border-bottom:1px solid var(--ink); padding-bottom:24px; }
.intro-copy { max-width:730px; }
.intro .primary { flex-shrink:0; }
.session-strip { background:var(--ink); color:var(--white); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 16px; margin:-8px 0 0; }
.session-strip strong { color:var(--acid); font-family:var(--mono); font-weight:500; }
.session-strip button { color:var(--white); border-color:var(--white); }
.section-head { border-bottom:1px solid var(--ink); display:flex; align-items:end; justify-content:space-between; padding-bottom:10px; margin-bottom:0; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--ink); }
.stat { padding:17px 14px 17px 0; border-right:1px solid var(--line); }
.stat:not(:first-child) { padding-left:14px; }
.stat:last-child { border-right:0; }
.stat-value { display:block; font:600 clamp(36px,6vw,59px)/.9 var(--display); margin:8px 0 5px; }
.stat small { color:var(--muted); }
.ruled-list { border-top:1px solid var(--ink); }
.list-row { display:flex; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); padding:13px 0; }
.list-row strong { font-size:15px; }
.list-row span { color:var(--muted); text-align:right; }
.list-row > div { display:grid; gap:4px; }
.delete-button { align-self:center; background:transparent; border:1px solid var(--rust); color:var(--rust); padding:8px 10px; min-height:40px; font-size:12px; font-weight:700; }
.workbench { display:grid; gap:22px; }
.panel { background:var(--paper); border-top:4px solid var(--ink); padding:18px; }
.panel + .panel { margin-top:22px; }
.panel-title { display:flex; justify-content:space-between; gap:10px; align-items:start; margin-bottom:17px; }
.empty { color:var(--muted); border:1px dashed var(--line); padding:22px 16px; }
.selection-panel { margin-top:22px; }
.coach-panel { display:grid; gap:16px; border-left:5px solid var(--rust); background:var(--paper); padding:18px; margin-bottom:24px; }
.coach-panel h2 { font-size:32px; }
.coach-panel p { max-width:680px; margin-bottom:0; }
.coach-exercises { border-top:1px solid var(--line); padding-top:12px; display:grid; gap:7px; }
.day-picker { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin:14px 0; }
.day-picker label { border:1px solid var(--line); padding:10px 3px; text-align:center; font:10px var(--mono); cursor:pointer; }
.day-picker input { position:absolute; opacity:0; }
.day-picker label:has(input:checked) { background:var(--acid); border-color:var(--ink); }
.toggle-row { display:flex; gap:9px; align-items:center; margin:12px 0; }
.field-note { color:var(--muted); font-size:12px; margin:7px 0 0; }
.field:has(#p-visionEndpoint), .field-note { display:none; }
.camera-drop { display:grid; gap:7px; border:1px dashed var(--ink); background:var(--acid); padding:18px; cursor:pointer; }
.camera-drop span { color:var(--muted); font-size:12px; line-height:1.45; }
.camera-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.vision-result { border:1px solid var(--ink); padding:16px; margin-bottom:16px; background:var(--white); }
.session-head { display:flex; justify-content:space-between; align-items:end; gap:16px; border-bottom:1px solid var(--ink); padding-bottom:20px; }
.timer { font:500 52px/1 var(--mono); letter-spacing:0; }
.exercise-tabs { display:flex; gap:8px; overflow:auto; padding:16px 0; border-bottom:1px solid var(--line); }
.exercise-tab { background:transparent; border:1px solid var(--line); padding:10px 13px; white-space:nowrap; }
.exercise-tab.active { background:var(--ink); color:var(--white); border-color:var(--ink); }
.metric-line { display:flex; justify-content:space-between; gap:10px; color:var(--muted); border-bottom:1px solid var(--line); padding:9px 0; }
.metric-line strong { color:var(--ink); }
.set-table { width:100%; border-collapse:collapse; margin:15px 0; }
.set-table th { text-align:left; color:var(--muted); font:10px var(--mono); text-transform:uppercase; padding:7px 4px; }
.set-table td { border-top:1px solid var(--line); padding:10px 4px; }
.composer { border-top:1px solid var(--ink); padding-top:15px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field label { display:block; margin-bottom:6px; }
.field input, .field select { width:100%; border:1px solid var(--ink); background:var(--white); padding:11px 10px; min-height:44px; }
.stepper { display:flex; align-items:center; gap:8px; min-width:0; }
.stepper button { width:44px; height:44px; background:var(--bone); border:1px solid var(--ink); font-size:22px; }
.stepper input { flex:1; text-align:center; min-width:0; }
.full { width:100%; margin-top:14px; }
.modal-backdrop { position:fixed; inset:0; background:#171815cc; display:grid; place-items:end center; z-index:10; }
.modal { background:var(--paper); width:min(620px,100%); padding:22px 20px 28px; border-top:5px solid var(--acid); max-height:90vh; overflow:auto; }
.modal-head { display:flex; justify-content:space-between; border-bottom:1px solid var(--ink); padding-bottom:14px; margin-bottom:15px; }
.close { background:none; border:0; font-size:25px; line-height:1; }
.exercise-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.exercise-picker button { text-align:left; background:var(--white); border:1px solid var(--line); padding:14px 10px; min-height:52px; font-weight:700; }
.exercise-picker button:hover { border-color:var(--ink); background:var(--acid); }
.bottom-nav { position:fixed; z-index:5; bottom:0; left:0; right:0; background:var(--ink); display:grid; grid-template-columns:repeat(5,1fr); padding:7px 5px max(7px, env(safe-area-inset-bottom)); }
.nav-link { background:none; border:0; color:#aaa99f; font:10px var(--mono); padding:8px 3px; min-height:52px; }
.nav-link.active { color:var(--acid); }
.nav-icon { display:block; font-size:17px; margin-bottom:4px; }
.goal { border-bottom:1px solid var(--line); padding:14px 0; }
.progress-track { height:8px; background:var(--bone); margin-top:9px; }
.progress-track i { display:block; height:100%; background:var(--rust); }
.chart { width:100%; height:180px; display:block; border-bottom:1px solid var(--ink); margin-top:10px; }
.chart polyline { fill:none; stroke:var(--rust); stroke-width:3; }
.chart line { stroke:var(--line); stroke-width:1; }
.onboarding { min-height:100vh; display:grid; place-items:center; padding:24px 20px; }
.onboarding-box { width:min(700px,100%); }
.onboarding-planner { border-top:1px solid var(--ink); margin-top:24px; padding-top:18px; }
.onboarding-planner h2 { font-size:32px; }
.onboarding-planner p { max-width:560px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
.form-grid .wide { grid-column:1/-1; }
.danger { color:var(--rust); border-color:var(--rust); }
@media (min-width:760px) { .page { padding:42px 34px; } .page-grid { grid-template-columns:1.1fr .9fr; align-items:start; } .page-grid > .wide { grid-column:1/-1; } .workbench { grid-template-columns:1.2fr .8fr; } .bottom-nav { position:static; max-width:1220px; margin:0 auto; background:transparent; border-top:1px solid var(--ink); } .nav-link { color:var(--muted); } .nav-link.active { color:var(--rust); } .app-shell { padding-bottom:0; } .modal-backdrop { place-items:center; } }
@media (max-width:600px) { .intro { display:block; } .intro .primary { margin-top:20px; width:100%; } .session-head { display:block; } .session-head .primary { margin-top:16px; width:100%; } .form-grid { grid-template-columns:1fr; } .form-grid .wide { grid-column:auto; } h1 { font-size:56px; } }