*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0A0A0A;--white:#FFFFFF;--bg:#F4F5F7;--border:#E5E7EB;--border2:#D1D5DB;
  --muted:#6B7280;--muted2:#9CA3AF;--green:#a3c24d;--green-bg:#F4F9E8;--green-border:#D4E8A0;--green-dark:#5C7020;
  --amber:#B45309;--surface:#FFFFFF;--page:#FFFFFF;--soft:#F4F5F7;--ink:#0A0A0A;--ink-inv:#FFFFFF;--hero:#0A0A0A;--hero-line:#3A3A3A;
  --sans:'Inter',system-ui,-apple-system,sans-serif;--r:10px;--rl:16px;
  --safe-top:env(safe-area-inset-top,0px);--safe-bot:env(safe-area-inset-bottom,0px);
}
html.dark{
  --page:#111111;--surface:#1A1A1A;--soft:#161616;--ink:#F0F0F0;--ink-inv:#0A0A0A;--border:#2A2A2A;--border2:#3A3A3A;
  --muted:#9CA3AF;--muted2:#6B7280;--green-bg:#1C2800;--green-border:#3A5010;--green-dark:#a3c24d;--hero:#000000;--hero-line:#333;--amber:#F59E0B;
}
html,body{height:100%}
body{font-family:var(--sans);background:var(--page);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
#app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--page)}
.screen{flex:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:16px;padding:calc(var(--safe-top) + 24px) 20px 20px}
.screen.grey{background:var(--soft)}
.with-nav{padding-bottom:calc(84px + var(--safe-bot))}

/* type */
.eye{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eye.g{color:var(--green-dark)}
.h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.h2{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sub{font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.col{display:flex;flex-direction:column;gap:4px}
.grow{flex:1}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.card.pad{padding:16px}
.hero{background:var(--hero);color:#fff;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px}
.hero .sub{color:#D1D5DB}
.chip{font-size:12px;padding:4px 10px;border-radius:100px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap}
.pill.g{background:var(--green-bg);color:var(--green-dark);border:1px solid var(--green-border)}
.pill.n{background:var(--soft);color:var(--muted)}
.pill.k{background:var(--ink);color:var(--ink-inv)}
.notice{font-size:13px;line-height:1.5;border-radius:var(--r);padding:10px 12px;background:var(--green-bg);color:var(--green-dark);border:1px solid var(--green-border)}
.notice.warn{background:transparent;color:var(--amber);border-color:var(--amber)}

/* stat strip */
.stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.stats>div{padding:10px 12px;display:flex;flex-direction:column;gap:1px}
.stats>div+div{border-left:1px solid var(--border)}
.stats .k{font-size:11px;color:var(--muted)}
.stats .v{font-size:17px;font-weight:800}
.hero .stats{background:transparent;border-color:var(--hero-line)}
.hero .stats>div+div{border-color:var(--hero-line)}

/* buttons */
.btn{height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700;width:100%}
.btn.k{background:var(--ink);color:var(--ink-inv)}
.btn.g{background:var(--green);color:#0A0A0A;font-weight:800}
.btn.o{border:1px solid var(--border2);background:var(--surface)}
.btn.sm{height:44px;font-size:14px;border-radius:12px}
.btn:disabled{opacity:.4}
.iconbtn{width:44px;height:44px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.seg button{height:42px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--ink);color:var(--ink-inv)}
.seg button.on.pain{background:var(--amber);color:#fff}
.toggle{width:50px;height:30px;border-radius:100px;padding:3px;display:flex;background:var(--border2);transition:background .2s;flex-shrink:0}
.toggle span{width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle.on{background:var(--green)}
.toggle.on span{transform:translateX(20px)}

/* lists */
.list>.li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--border);font-size:14px}
.list>.li .n{color:var(--muted);font-size:12px}
.list>.li .t{color:var(--muted);font-size:13px;text-align:right}
.trow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--border);font-size:15px}
.trow:first-child{border-top:0}
.trow input,.trow select{background:var(--soft);border:0;border-radius:8px;padding:6px 10px;font-weight:700;font-size:15px;max-width:60%;text-align:right}

/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--border);padding:8px 8px calc(10px + var(--safe-bot))}
.nav>div{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.nav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;font-size:11px;font-weight:500;color:var(--muted)}
.nav a.on{color:var(--ink);font-weight:700}

/* home tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s}
.tile:active{border-color:var(--ink)}
.tile .ic{width:38px;height:38px;border-radius:10px;background:var(--green-bg);color:var(--green-dark);display:flex;align-items:center;justify-content:center}
.tile b{font-size:15px}
.tile small{font-size:12px;color:var(--muted)}

/* week strip */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.week>div{display:flex;flex-direction:column;align-items:center;gap:5px}
.week .d{font-size:11px;font-weight:600;color:var(--muted)}
.week .c{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--soft);color:var(--muted)}
.week .c.done{background:var(--green);color:#0A0A0A}
.week .c.today{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.week .c.missed{background:transparent;border:1px dashed var(--border2)}
.week .k{font-size:10px;color:var(--muted)}
.bar14{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
.bar14 span{height:6px;border-radius:3px;background:#2A2A2A}
.bar14 span.done{background:var(--green)}
.bar14 span.now{background:#fff}

/* go mode */
.progress{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.progress span{height:4px;border-radius:2px;background:var(--border)}
.progress span.done{background:var(--green)}
.progress span.now{background:var(--ink)}
.demo{background:var(--soft);border-radius:var(--rl);position:relative;overflow:hidden}
.demo svg{display:block;width:100%;height:auto}
.demo .tag{position:absolute;top:10px;right:12px;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface);border-radius:100px;padding:3px 9px}
.sets .hd,.sets .sr{display:grid;grid-template-columns:40px 58px minmax(0,1fr) 44px;align-items:center}
.sets .hd{font-size:11px;color:var(--muted);font-weight:600;padding-bottom:6px}
.sets .sr{padding:6px 0;border-top:1px solid var(--border);font-size:15px}
.sets .sr.cur{background:linear-gradient(var(--green-bg),var(--green-bg));margin:0 -8px;padding:6px 8px;border-radius:8px;border-top-color:transparent}
.step{display:flex;align-items:center;gap:8px}
.step button{width:38px;height:38px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);font-size:18px}
.step b{min-width:28px;text-align:center}
.step b.short{color:var(--amber)}
.tick{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--border2)}
.tick.on{background:var(--green);border-color:var(--green);color:#0A0A0A}
.rest{border-radius:var(--r);background:var(--hero);color:#fff;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.rest .sub{color:#9CA3AF}
.loadrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.loadrow .step button{width:34px;height:34px}
.footbar{position:sticky;bottom:0;background:var(--page);padding:12px 0 calc(12px + var(--safe-bot));display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;margin-top:auto}

/* pain picker */
.pain{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.pain button{height:44px;border-radius:8px;border:1px solid var(--border);font-size:14px;font-weight:700;background:var(--surface)}
.pain button.on{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
.pain button.on.hi{background:var(--amber);border-color:var(--amber);color:#fff}
.pinfield{-webkit-text-security:disc;text-security:disc;letter-spacing:.3em;font-size:20px}
textarea,.input{width:100%;font-size:15px;padding:12px;border:1px solid var(--border2);border-radius:var(--r);background:var(--surface);resize:none}

/* report */
.chart{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;align-items:end;height:120px;border-bottom:1px solid var(--border)}
.chart>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%}
.chart small{font-size:10px;font-weight:600;color:var(--muted)}
.chart i{display:block;width:100%;border-radius:3px 3px 0 0;background:var(--green)}
.chart i.hi{background:var(--ink)}
.chart i.none{background:var(--border);height:2px}
.chartx{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;font-size:10px;color:var(--muted);text-align:center}
.tbl .r{display:grid;align-items:center;padding:10px 0;border-top:1px solid var(--border);font-size:14px}
.tbl .h{display:grid;font-size:11px;font-weight:600;color:var(--muted);padding-bottom:6px}
details.sess{border-top:1px solid var(--border)}
details.sess summary{list-style:none;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;font-size:14px;cursor:pointer}
details.sess summary::-webkit-details-marker{display:none}
details.sess .body{padding:0 0 12px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}

/* login */
.pinpad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pinpad button{height:64px;border-radius:14px;background:var(--soft);font-size:22px;font-weight:700}
.dots{display:flex;gap:12px;justify-content:center}
.dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--border2)}
.dots span.on{background:var(--ink);border-color:var(--ink)}

.toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-bot));transform:translateX(-50%);background:var(--ink);color:var(--ink-inv);padding:10px 16px;border-radius:100px;font-size:14px;font-weight:600;z-index:50;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:14px}

/* print (Save as PDF) */
@media print{
  .nav,.noprint{display:none!important}
  html.dark{--page:#fff;--surface:#fff;--ink:#0A0A0A;--muted:#6B7280;--border:#E5E7EB}
  body{background:#fff}
  .screen{padding:0}
  details.sess .body{display:flex!important}
  details.sess{break-inside:avoid}
}