:root { --teal:#087f80; --teal-dark:#07585c; --orange:#e87525; --ink:#183436; --muted:#5d7172; --paper:#f5f8f6; --line:#d7e2df; --white:#fff; --danger:#a83232; font-family:system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; padding-bottom:76px; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.topbar { color:var(--white); background:var(--teal-dark); padding:18px max(18px,calc((100% - 1050px)/2)); display:flex; justify-content:space-between; align-items:center; gap:12px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:1.35rem; margin:0; } h2 { font-size:1.2rem; margin-bottom:6px; } h3 { font-size:1rem; margin-bottom:8px; }.eyebrow { letter-spacing:.1em; font-size:.7rem; margin:0 0 5px; opacity:.75; }
.status { font-size:.78rem; border:1px solid rgba(255,255,255,.5); padding:7px 10px; border-radius:99px; white-space:normal; text-align:right; }.status.error { background:#ffd9d4; border-color:#ffd9d4; color:#5b1d1d; max-width:440px; }
#app { max-width:1050px; margin:0 auto; padding:20px 16px; }.view-head { margin:4px 0 18px; }.subtle { color:var(--muted); font-size:.9rem; }.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }.card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 2px 8px #1834360b; margin-bottom:14px; }.card.accent { border-top:4px solid var(--orange); }.wide { grid-column:1/-1; }
label { display:block; font-size:.82rem; font-weight:650; margin:10px 0 5px; } input,select,textarea { display:block; width:100%; min-height:44px; border:1px solid #b7ccca; border-radius:8px; padding:9px 10px; background:#fff; color:var(--ink); } textarea { min-height:70px; resize:vertical; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; } .form-grid .full { grid-column:1/-1; }
button { min-height:44px; border:0; border-radius:8px; padding:9px 14px; background:var(--teal); color:#fff; font-weight:700; } button.secondary { color:var(--teal-dark); background:#e0efec; } button.warn { background:var(--orange); } button.ghost { background:transparent; border:1px solid var(--line); color:var(--teal-dark); } button.danger { background:#f9e7e5; color:var(--danger); }.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.set-row { display:grid; grid-template-columns:32px 1fr 1fr 1fr auto; align-items:center; gap:7px; padding:7px 0; border-bottom:1px solid var(--line); }.set-row input { min-height:38px; padding:6px; }.set-row button { min-height:36px; padding:5px 8px; }.set-head { font-size:.75rem; color:var(--muted); font-weight:700; }.exercise-block { margin-top:16px; }.notice { padding:12px; background:#eaf5f2; border-radius:8px; font-size:.9rem; }.error { color:var(--danger); }.metric-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }.metric { background:#edf5f2; padding:13px; border-radius:9px; }.metric strong { display:block; font-size:1.4rem; color:var(--teal-dark); }.table-wrap { overflow-x:auto; } table { border-collapse:collapse; width:100%; font-size:.9rem; } th,td { text-align:left; padding:9px 7px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:.75rem; text-transform:uppercase; }.bar { height:10px; background:var(--orange); border-radius:10px; margin:4px 0 12px; max-width:100%; }.empty { color:var(--muted); text-align:center; padding:22px 8px; }.bottom-nav { position:fixed; z-index:2; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); display:flex; justify-content:center; gap:3px; padding:8px max(6px,calc((100% - 700px)/2)); }.bottom-nav button { flex:1; max-width:180px; min-height:52px; color:var(--muted); background:transparent; border-radius:8px; }.bottom-nav button.active { background:#e0efec; color:var(--teal-dark); }
@media (min-width:700px) { .topbar { padding-top:24px; padding-bottom:24px; } #app { padding:30px 22px; } }.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:520px) { .topbar { align-items:flex-start; } .topbar > div { min-width:0; } .status { max-width:170px; } }