@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');
:root { --ink:#10251f; --surface:#f7f8f4; --card:#fff; --muted:#64706a; --line:#dce4dd; --orange:#e85d13; --lime:#c8f15a; --success:#207a4a; --shadow:0 10px 30px rgba(16,37,31,.09); }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); font:16px/1.45 Barlow, system-ui, sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,select:focus-visible { outline:3px solid #1c75bc; outline-offset:3px; }
.shell { max-width:680px; margin:auto; padding:20px 16px 110px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.brand { font:700 26px/1 'Barlow Condensed',sans-serif; letter-spacing:.4px; }.brand span { color:var(--orange); }
.avatar { width:42px; height:42px; border:0; border-radius:50%; background:var(--lime); color:var(--ink); font-weight:700; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--success); margin:0 0 5px; }
h1,h2,h3 { font-family:'Barlow Condensed',sans-serif; margin:0; line-height:1; } h1 { font-size:42px; } h2 { font-size:28px; } h3 { font-size:22px; }
.hero { padding:22px; border-radius:24px; background:var(--ink); color:white; position:relative; overflow:hidden; }.hero:after { content:''; width:160px; height:160px; background:var(--lime); opacity:.9; border-radius:50%; position:absolute; right:-55px; top:-70px; }.hero p { max-width:350px; color:#d7e2d9; margin:10px 0 0; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 24px; }.stat { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; }.stat strong { display:block; font:700 25px/1 'Barlow Condensed',sans-serif; }.stat span { color:var(--muted); font-size:13px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }.link-button { border:0; color:var(--orange); background:transparent; font-weight:700; padding:10px 0; }
.routine-list { display:grid; gap:10px; }.exercise { text-align:left; border:1px solid var(--line); background:var(--card); border-radius:18px; padding:14px; width:100%; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; box-shadow:0 2px 0 rgba(16,37,31,.02); }.exercise:hover { border-color:#90a69a; }.number { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#edf4e9; font-weight:700; }.exercise p { margin:3px 0 0; color:var(--muted); font-size:14px; }.pill { background:#fff2e9; color:#9d3d0a; border-radius:99px; padding:5px 8px; font-size:12px; font-weight:700; }
.primary { width:100%; min-height:52px; background:var(--orange); color:white; border:0; border-radius:16px; font-weight:700; margin-top:18px; box-shadow:0 5px 0 #b84509; }.primary:active { transform:translateY(3px); box-shadow:0 2px 0 #b84509; }.secondary { border:1px solid var(--line); border-radius:12px; background:white; min-height:44px; padding:0 14px; font-weight:600; }
.bottom-nav { position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line); display:flex; justify-content:center; gap:8px; padding:10px max(16px,calc((100vw - 680px)/2)); }.tab { border:0; background:transparent; color:var(--muted); padding:10px 15px; font-weight:600; border-radius:10px; }.tab.active { color:var(--ink); background:#e9f1e8; }
.sheet { position:fixed; inset:0; background:rgba(16,37,31,.48); display:flex; align-items:end; z-index:2; }.sheet[hidden] { display:none; }.sheet-body { background:var(--surface); padding:24px 16px max(28px, env(safe-area-inset-bottom)); width:100%; border-radius:26px 26px 0 0; max-height:92dvh; overflow:auto; }.sheet-body > div { max-width:680px; margin:auto; }.sheet-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }.close { width:44px; height:44px; border:0; border-radius:50%; background:#e6ece6; color:var(--ink); font-size:24px; }.detail-meta { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }.detail-meta span { background:#eaf2e8; border-radius:999px; padding:6px 10px; font-size:14px; }.exercise-gif { display:block; width:100%; max-width:420px; aspect-ratio:1/1; object-fit:contain; background:#eaf2e8; border:1px solid var(--line); border-radius:18px; margin:18px auto; }.steps { padding-left:22px; }.steps li { margin:10px 0; }
.setting { border:1px solid var(--line); border-radius:16px; padding:14px; background:white; margin-top:12px; }.setting label { font-weight:700; display:block; margin-bottom:8px; }.chips { display:flex; flex-wrap:wrap; gap:8px; }.chip { border:1px solid #b6c6ba; padding:8px 11px; border-radius:999px; background:white; color:var(--ink); }.chip[aria-pressed=true] { background:var(--ink); color:white; border-color:var(--ink); }.history-item { background:white; border:1px solid var(--line); padding:14px; border-radius:14px; margin:8px 0; }.empty { color:var(--muted); background:#edf3ec; border-radius:14px; padding:16px; }.loading { padding:32px; text-align:center; }
@media (prefers-reduced-motion:no-preference) { .exercise,.primary,.chip { transition:transform .18s ease, background .18s ease, border-color .18s ease; } .exercise:active { transform:scale(.985); } }
@media (min-width:700px) { .shell { padding-top:38px; }.sheet-body { align-self:center; max-width:600px; margin:auto; border-radius:24px; padding:28px; } .sheet { align-items:center; padding:16px; } }