:root{--red:#d62839;--red-d:#a31621;--coral:#ff5a4e;--sun:#ffd23f;--teal:#0b6e78;--teal-l:#0fa3b1;--sand:#fff4dc;--sand-d:#f3dfb4;--ink:#1d2a33;--mute:#51606b;--card:#fff;--r:18px;--shadow:0 4px 0 rgba(29,42,51,.12),0 8px 20px rgba(29,42,51,.08)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--sand);color:var(--ink);font-size:16px;line-height:1.4;min-height:100vh}
h1,h2,h3{margin:.2em 0;line-height:1.15}
h2{font-size:1.4rem}h3{font-size:1.1rem}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
header.top{background:linear-gradient(135deg,var(--red),var(--coral));color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 22px;display:flex;align-items:center;gap:10px;position:relative}
header.top .logo{width:42px;height:42px;background:var(--sun);border-radius:50%;padding:3px;flex:none}
header.top .logo svg{width:100%;height:100%}
header.top h1{font-size:1.3rem;flex:1;text-shadow:0 2px 0 rgba(0,0,0,.15)}
header.top .who{background:rgba(255,255,255,.2);border:2px solid #fff;color:#fff;border-radius:999px;padding:8px 14px;min-height:44px;font-weight:700}
.wave{display:block;width:100%;height:22px;margin-top:-1px;color:var(--sand)}
.wave-wrap{background:var(--coral);margin-top:-22px;position:relative;height:22px;overflow:hidden}
.wave-wrap svg{position:absolute;bottom:-1px;left:0;width:100%;height:22px}
main{max-width:980px;margin:0 auto;padding:6px 14px 110px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin:14px 0;border:2px solid var(--sand-d)}
.card.teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media(min-width:700px){.grid.two{grid-template-columns:1fr 1fr}.grid.four{grid-template-columns:repeat(4,1fr)}}
.grid.four{grid-template-columns:repeat(2,1fr)}
.stat{background:var(--sand);border-radius:14px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.5rem;color:var(--red-d)}
.stat span{font-size:.8rem;color:var(--mute)}
.muted{color:var(--mute)}
.small{font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 18px;border:0;border-radius:14px;background:var(--red);color:#fff;font-weight:800;box-shadow:0 4px 0 var(--red-d);text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-d)}
.btn.alt{background:var(--teal);box-shadow:0 4px 0 #064a52}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:0 4px 0 #c79d00}
.btn.ghost{background:#fff;color:var(--red-d);border:2px solid var(--red);box-shadow:none}
.btn.small{min-height:44px;padding:6px 12px;font-size:.9rem}
.btn.block{display:flex;width:100%}
.btn:disabled{opacity:.6}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{width:100%;min-height:48px;padding:10px 12px;border:2px solid #c9b88f;border-radius:12px;background:#fff}
textarea{min-height:80px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--teal-l);outline-offset:2px}
label{display:block;font-weight:700;margin:10px 0 4px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;background:#fff;border:2px solid var(--teal);color:var(--teal);font-weight:700}
.chip.on{background:var(--teal);color:#fff}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--sun);font-weight:800;font-size:.8rem}
.chips{display:flex;gap:8px;flex-wrap:wrap}
/* Larry */
.larry{display:flex;gap:12px;align-items:flex-start}
.larry .av{width:96px;flex:none;background:var(--sun);border-radius:50%;padding:4px;border:3px solid var(--ink)}
.larry .av svg{width:100%;display:block}
.bubble{position:relative;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:12px 14px;flex:1}
.bubble:before{content:"";position:absolute;left:-14px;top:24px;border:8px solid transparent;border-right:14px solid var(--ink)}
.bubble h3{color:var(--red-d)}
.why{font-size:.9rem;color:var(--mute);margin-top:8px;border-top:2px dashed var(--sand-d);padding-top:6px}
@media(max-width:480px){.larry{flex-direction:column;align-items:center}.bubble:before{left:50%;top:-14px;margin-left:-8px;border:8px solid transparent;border-bottom:14px solid var(--ink)}}
/* exercise rows */
.ex{border:2px solid var(--sand-d);border-radius:14px;padding:12px;margin:10px 0;background:#fffdf7}
.ex h4{margin:0 0 4px;font-size:1.05rem}
.tag{font-size:.75rem;background:var(--sand-d);border-radius:8px;padding:1px 7px;margin-right:4px;display:inline-block}
.try{color:var(--teal);font-weight:800}
.step{display:flex;align-items:stretch;gap:0}
.step button{width:48px;min-height:48px;border:2px solid var(--teal);background:var(--teal);color:#fff;font-size:1.5rem;font-weight:800;border-radius:12px 0 0 12px}
.step button:last-child{border-radius:0 12px 12px 0}
.step input{border-radius:0;text-align:center;font-weight:800;font-size:1.15rem;min-width:0;border-left:0;border-right:0;padding:6px}
.setrow{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px;align-items:end;margin:8px 0}
.setrow .n{font-weight:900;color:var(--red-d);align-self:center}
.setrow small{display:block;color:var(--mute);font-size:.75rem}
.x{min-width:44px;min-height:44px;border:0;background:transparent;font-size:1.3rem;color:var(--red-d)}
/* tabs */
nav.tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:3px solid var(--ink);display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
nav.tabs button{flex:1;border:0;background:transparent;padding:6px 2px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--mute);gap:2px}
nav.tabs button span{font-size:1.4rem;line-height:1}
nav.tabs button.on{color:var(--red-d);background:var(--sand)}
nav.tabs button.on span{transform:scale(1.2)}
@media(min-width:900px){nav.tabs{position:static;max-width:980px;margin:0 auto;border:3px solid var(--ink);border-radius:18px;transform:translateY(-14px)}main{padding-bottom:40px}}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal .sheet{background:var(--sand);border-radius:22px 22px 0 0;width:100%;max-width:640px;max-height:88vh;overflow:auto;padding:16px}
@media(min-width:700px){.modal{align-items:center}.modal .sheet{border-radius:22px}}
.pick{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;text-align:left;background:#fff;border:2px solid var(--sand-d);border-radius:12px;padding:10px 12px;margin:6px 0;min-height:52px}
/* chat */
.chat{display:flex;flex-direction:column;gap:10px;min-height:260px;max-height:55vh;overflow:auto;padding:4px}
.msg{max-width:88%;padding:10px 14px;border-radius:16px;border:2px solid var(--ink);white-space:pre-wrap;word-wrap:break-word}
.msg.me{align-self:flex-end;background:var(--sun)}
.msg.larry{align-self:flex-start;background:#fff;display:flex;gap:8px}
.msg.larry .mini{width:34px;flex:none}
.msg.larry .mini svg{width:34px}
/* crew */
.member{border-top:6px solid var(--coral)}
.member.me{border-top-color:var(--teal-l)}
.bar{height:12px;background:var(--sand-d);border-radius:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-l),var(--sun))}
.rx{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rx button{min-height:44px;min-width:56px;border-radius:999px;border:2px solid var(--sand-d);background:#fff;font-size:1rem}
.rx button.on{background:var(--sun);border-color:var(--ink)}
canvas{width:100%;height:180px;display:block}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:90px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;z-index:90;max-width:90vw}
.toast.err{background:var(--red-d)}
.confetti{position:fixed;top:-30px;font-size:28px;z-index:99;pointer-events:none;animation:fall 2.4s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.8}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}}
.auth{max-width:420px;margin:0 auto;padding:20px 14px}
.auth .av{width:150px;margin:0 auto;display:block;background:var(--sun);border-radius:50%;padding:6px;border:3px solid var(--ink)}
table.hist{width:100%;border-collapse:collapse}
table.hist td{padding:8px 4px;border-bottom:1px solid var(--sand-d);vertical-align:top}
