/* ============================================================
   HANDSTAND PRO — "training instrument" design language
   Archivo (display) + JetBrains Mono (numerals/labels).
   Work = amber, Rest = ice, Done = green. Blueprint grid base.
   ============================================================ */

:root{
  /* base */
  --ink:#04060A;
  --ink-2:#070A11;
  --panel:#0B1017;
  --panel-2:#0F1620;
  --panel-3:#141D2A;
  --line:rgba(150,180,225,.09);
  --line-2:rgba(150,180,225,.18);
  --line-3:rgba(150,180,225,.30);

  /* text */
  --text:#EAF0F8;
  --dim:#8E9DB4;
  --faint:#5A677D;

  /* signals */
  --work:#FFB020;
  --work-2:#FFD37E;
  --work-ink:#1A1002;
  --work-soft:rgba(255,176,32,.10);
  --work-line:rgba(255,176,32,.32);
  --work-edge:#8A5C00;

  --rest:#4FD1FF;
  --rest-soft:rgba(79,209,255,.10);
  --rest-line:rgba(79,209,255,.32);
  --rest-edge:#1B6D8C;

  --done:#38E19A;
  --done-soft:rgba(56,225,154,.10);
  --done-line:rgba(56,225,154,.30);

  --danger:#FF5F56;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --r:12px;
  --r-sm:9px;
  --r-lg:16px;
  --pad:16px;
  --deck-h:0px; /* set by JS while a session is open */
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--display);
  font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overscroll-behavior-y:none;user-select:none;touch-action:manipulation;
}
input,textarea{user-select:text;font-family:inherit;}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
svg{display:block;}
svg.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
::selection{background:var(--work);color:var(--work-ink);}
::-webkit-scrollbar{width:0;height:0;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

/* blueprint grid + ambient light */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(150,180,225,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,180,225,.05) 1px,transparent 1px);
  background-size:26px 26px;background-position:center top;
  -webkit-mask-image:radial-gradient(130% 70% at 50% -5%,#000 10%,transparent 72%);
  mask-image:radial-gradient(130% 70% at 50% -5%,#000 10%,transparent 72%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 340px at 92% -6%, rgba(255,176,32,.12), transparent 64%),
    radial-gradient(520px 320px at -8% 4%, rgba(79,209,255,.07), transparent 62%);
}

.app{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100%;
  padding-bottom:calc(74px + 28px + env(safe-area-inset-bottom));}

/* ---------- header ---------- */
.app-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) var(--pad) 12px;
  background:linear-gradient(180deg,rgba(4,6,10,.97) 60%,rgba(4,6,10,.7) 86%,rgba(4,6,10,0));
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
}
.ah-left{display:flex;flex-direction:column;gap:0;min-width:0;}
.ah-hello{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.ah-date{font-size:21px;font-weight:800;letter-spacing:-.035em;line-height:1.15;white-space:nowrap;}
.streak-chip{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:7px 11px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line-2);
}
.streak-chip:active{background:var(--panel-3);}
.sc-num{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--work);line-height:1;}
.sc-lbl{
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);line-height:1.15;
}

/* ---------- pages ---------- */
.page{display:none;padding:4px var(--pad) 28px;}
.page.active{display:block;animation:pageIn .3s cubic-bezier(.16,1,.3,1);}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sec-head{display:flex;align-items:center;gap:10px;margin:24px 0 11px;}
.sec-head .t{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
.sec-head .t::before{content:"— ";color:var(--faint);}
.sec-head .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);}

/* ---------- hero : briefing panel ---------- */
.hero{
  position:relative;overflow:hidden;margin-top:6px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(150deg,#101822 0%,#0A0F17 55%,#080C13 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(180px 160px at 96% -10%,rgba(255,176,32,.22),transparent 70%);
}
.hero-ghost{
  position:absolute;right:-6px;top:-26px;
  font-family:var(--mono);font-size:132px;font-weight:800;line-height:1;
  color:rgba(150,180,225,.05);pointer-events:none;letter-spacing:-.06em;
}
.hero-in{position:relative;padding:16px 16px 15px;}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--work);
}
.hero-tag i{width:6px;height:6px;border-radius:50%;background:var(--work);animation:blip 2.4s infinite;}
.hero-tag.rest{color:var(--rest);}
.hero-tag.rest i{background:var(--rest);animation:none;}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
.hero-title{
  font-size:31px;font-weight:900;letter-spacing:-.045em;line-height:1.02;
  margin:9px 0 3px;
}
.hero-sub{font-size:14px;font-weight:600;color:var(--dim);letter-spacing:-.01em;}
.hero-focus{font-size:13.5px;color:var(--dim);line-height:1.45;margin-top:9px;}

.hero-specs{display:flex;gap:0;margin:14px 0 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.spec{flex:1;padding:9px 0 8px;border-right:1px solid var(--line);}
.spec:last-child{border-right:0;}
.spec-v{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);display:block;line-height:1.25;}
.spec-v.work{color:var(--work);}
.spec-l{
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);display:block;margin-top:3px;
}

/* segmented progress rail */
.rail{display:flex;gap:3px;margin-bottom:14px;}
.rail i{flex:1;height:6px;border-radius:2px;background:rgba(150,180,225,.13);}
.rail i.on{background:var(--work);box-shadow:0 0 10px rgba(255,176,32,.45);}
.rail i.now{background:rgba(255,176,32,.45);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  border-radius:var(--r-sm);transition:transform .12s ease,background .2s,box-shadow .12s;
}
.btn:active{transform:translateY(1px);}
.btn .ic{width:17px;height:17px;}
.btn.primary{
  background:linear-gradient(180deg,var(--work-2),var(--work));
  color:var(--work-ink);
  box-shadow:0 3px 0 var(--work-edge);
}
.btn.primary:active{box-shadow:0 1px 0 var(--work-edge);}
.btn.ghost{background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);}
.btn.ghost:active{background:var(--panel-3);}
.btn.ghost.danger{color:var(--danger);border-color:rgba(255,95,86,.32);}
.btn.sm{padding:9px 14px;font-size:13px;}
.btn.lg{padding:15px 18px;font-size:15px;}
.btn.block{width:100%;}

.icon-btn{
  width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
}
.icon-btn:active{background:var(--panel-3);}
.icon-btn .ic{width:18px;height:18px;}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:var(--panel-3);border:1px solid var(--line);color:var(--dim);
}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:var(--panel-3);border:1px solid var(--line);color:var(--dim);
}
.pill.work{background:var(--work-soft);border-color:var(--work-line);color:var(--work);}
.pill.rest{background:var(--rest-soft);border-color:var(--rest-line);color:var(--rest);}
.pill.done{background:var(--done-soft);border-color:var(--done-line);color:var(--done);}
.pill.warn{background:rgba(255,95,86,.1);border-color:rgba(255,95,86,.3);color:var(--danger);}

/* ---------- week rail ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.wd{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 0 8px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);
}
.wd:active{background:var(--panel-2);}
.wd-d{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--faint);}
.wd-n{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--dim);}
.wd-k{
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.04em;
  width:15px;height:15px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:rgba(150,180,225,.08);color:var(--faint);
}
.wd-k .ic{width:9px;height:9px;stroke-width:3.4;}
.wd.work .wd-k{background:var(--work-soft);color:var(--work);}
.wd.rest .wd-n{color:var(--faint);}
.wd.today{
  background:linear-gradient(180deg,var(--work-2),var(--work));
  border-color:transparent;box-shadow:0 3px 0 var(--work-edge);
}
.wd.today .wd-d{color:rgba(26,16,2,.6);}
.wd.today .wd-n{color:var(--work-ink);}
.wd.today .wd-k{background:rgba(26,16,2,.18);color:var(--work-ink);}
.wd.past .wd-n{color:var(--faint);}

/* ---------- session rows ---------- */
.sxr{
  display:flex;align-items:center;gap:12px;
  padding:13px;margin-bottom:8px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);
}
.sxr:active{background:var(--panel-2);border-color:var(--line-2);}
.sxr-idx{
  width:34px;height:34px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;font-weight:800;
  background:var(--work-soft);border:1px solid var(--work-line);color:var(--work);
}
.sxr-idx.b{background:rgba(120,170,255,.1);border-color:rgba(120,170,255,.28);color:#84B4FF;}
.sxr-idx.c{background:var(--rest-soft);border-color:var(--rest-line);color:var(--rest);}
.sxr-body{flex:1;min-width:0;}
.sxr-tt{font-size:15px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.sxr-dur{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.sxr-meta{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-top:3px;
}
.sxr-pips{display:flex;gap:2px;margin-top:8px;}
.sxr-pips i{flex:1;height:4px;border-radius:1px;background:rgba(150,180,225,.14);}
.sxr-pips i.on{background:var(--work);}
.sxr-chev{width:16px;height:16px;color:var(--faint);flex-shrink:0;}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;}
.wp-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);}
.wp-row:last-child{border-bottom:0;padding-bottom:0;}
.wp-row:first-child{padding-top:0;}
.wp-day{width:36px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--faint);}
.wp-name{flex:1;font-size:13.5px;font-weight:700;}
.wp-focus{font-family:var(--mono);font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.wp-row.off .wp-name{color:var(--faint);font-weight:600;}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.stat{
  position:relative;padding:13px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);
}
.stat.hl{border-color:var(--work-line);background:linear-gradient(160deg,var(--work-soft),var(--panel) 70%);}
.st-v{display:block;font-family:var(--mono);font-size:27px;font-weight:800;line-height:1;letter-spacing:-.04em;}
.stat.hl .st-v{color:var(--work);}
.st-v.sm{font-size:15px;letter-spacing:-.02em;line-height:1.3;}
.st-l{
  display:block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:7px;
}

/* ---------- chart ---------- */
.ch-bars{display:flex;align-items:flex-end;gap:6px;height:104px;}
.ch-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;}
.ch-v{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--faint);}
.ch-v.on{color:var(--work);}
.ch-track{width:100%;max-width:26px;flex:1;display:flex;align-items:flex-end;background:rgba(150,180,225,.06);border-radius:3px;overflow:hidden;}
.ch-bar{width:100%;border-radius:3px;background:linear-gradient(180deg,var(--work-2),var(--work));transition:height .5s cubic-bezier(.16,1,.3,1);}
.ch-bar.empty{background:rgba(150,180,225,.1);}
.ch-d{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--faint);}
.ch-col.today .ch-d{color:var(--work);}

/* ---------- records ---------- */
.rec-row{
  display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:6px;
  border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
}
.rec-ic{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--work-soft);color:var(--work);}
.rec-ic .ic{width:14px;height:14px;}
.rec-nm{flex:1;font-size:13.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rec-val{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--work);}
.rec-dt{font-family:var(--mono);font-size:9px;color:var(--faint);display:block;margin-top:2px;}

/* ---------- history ---------- */
.hist{margin-bottom:7px;padding:13px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);}
.hist:active{background:var(--panel-2);}
.hist-top{display:flex;align-items:center;gap:11px;}
.hist-badge{
  width:34px;height:34px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:800;
  background:var(--work-soft);border:1px solid var(--work-line);color:var(--work);
}
.hist-badge.b{background:rgba(120,170,255,.1);border-color:rgba(120,170,255,.28);color:#84B4FF;}
.hist-badge.c{background:var(--rest-soft);border-color:var(--rest-line);color:var(--rest);}
.hist-tx{flex:1;min-width:0;}
.hist-tx b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hist-tx span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:3px;letter-spacing:.05em;}
.hist-act{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--dim);
}
.hist-act:active{background:var(--panel-3);}
.hist-act.danger{color:var(--danger);border-color:rgba(255,95,86,.32);}
.hist-act .ic{width:15px;height:15px;}
.hist-chev{width:16px;height:16px;color:var(--faint);flex-shrink:0;transition:transform .25s;}
.hist.open .hist-chev{transform:rotate(180deg);}
.hist-exs{display:none;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);}
.hist.open .hist-exs{display:block;}
.hx{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0;font-size:12.5px;}
.hx span{color:var(--dim);}
.hx b{font-family:var(--mono);font-weight:700;white-space:nowrap;}
.hist-empty{text-align:center;padding:30px 18px;color:var(--faint);font-size:13px;}
.hist-empty .ic{width:30px;height:30px;margin:0 auto 12px;opacity:.5;}

/* ---------- history edit sheet ---------- */
.hedit-hint{font-size:12px;color:var(--faint);line-height:1.55;margin:0 2px;}
.hedit-hint b{color:var(--dim);font-family:var(--mono);}
.hedit-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);}
.hedit-row:last-child{border-bottom:0;}
.hedit-name{flex:1;min-width:0;font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hedit-name .hd-pending{color:var(--faint);font-size:10px;}
.hedit-row input{
  width:112px;flex-shrink:0;background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;
  color:var(--text);font-family:var(--mono);font-size:13.5px;font-weight:700;padding:8px 9px;outline:none;
}
.hedit-row input:focus{border-color:var(--work-line);background:var(--panel-3);}

/* ---------- sincronização ---------- */
.sync-in{
  width:100%;margin-top:9px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;
  color:var(--text);font-family:var(--mono);font-size:13px;padding:10px 11px;outline:none;
}
.sync-in:focus{border-color:var(--work-line);background:var(--panel-3);}
.sync-actions{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;}
.sync-status{margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint);line-height:1.5;}
.sync-status[data-kind="ok"]{color:var(--done);}
.sync-status[data-kind="busy"]{color:var(--rest);}
.sync-status[data-kind="off"]{color:var(--faint);}

/* ---------- settings ---------- */
.profile-card{display:flex;align-items:center;gap:12px;}
.avatar{
  width:42px;height:42px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--work-2),var(--work));color:var(--work-ink);
}
.avatar .ic{width:22px;height:22px;stroke-width:2.2;}
.profile-info{flex:1;min-width:0;}
.profile-info b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;}
.profile-info span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:3px;letter-spacing:.05em;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.set-row.col{flex-direction:column;align-items:stretch;gap:11px;}
.set-row:first-child{padding-top:0;}
.set-row.last,.set-row:last-child{border-bottom:0;padding-bottom:0;}
.sr-txt{flex:1;min-width:0;}
.lbl{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.desc{font-size:11.5px;color:var(--faint);margin-top:2px;line-height:1.4;}
.desc-danger{color:var(--danger);opacity:.9;}
.rowbtn{align-items:center;}
.range-wrap{display:flex;align-items:center;gap:12px;}
.slider{
  -webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--work) var(--fill,50%),rgba(150,180,225,.16) var(--fill,50%));
  outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:6px;
  background:var(--text);border:0;box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.slider::-moz-range-thumb{width:18px;height:18px;border-radius:6px;background:#fff;border:0;}
.range-val{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--work);min-width:52px;text-align:right;}
.toggle{position:relative;width:46px;height:26px;flex-shrink:0;border-radius:7px;background:var(--panel-3);border:1px solid var(--line-2);transition:background .2s,border-color .2s;}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:5px;background:var(--faint);transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s;}
.toggle.on{background:var(--work);border-color:var(--work);}
.toggle.on::after{transform:translateX(20px);background:var(--work-ink);}
.about{margin-top:20px;padding:0 2px;font-size:11.5px;line-height:1.65;color:var(--faint);}
.about b{color:var(--dim);}

/* ============================================================
   SESSION — the training console
   ============================================================ */
.session{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--ink);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.16,1,.3,1);will-change:transform;
}
.session.open{transform:translateY(0);}

.sx-top{
  flex-shrink:0;display:flex;align-items:center;gap:11px;
  padding:calc(12px + env(safe-area-inset-top)) var(--pad) 11px;
  background:var(--ink-2);border-bottom:1px solid var(--line);
}
.sx-id{flex:1;min-width:0;}
.sx-id b{display:block;font-size:16px;font-weight:800;letter-spacing:-.03em;}
.sx-id span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;margin-top:2px;}
.sx-clock{text-align:right;flex-shrink:0;}
.sx-clock .mono{font-size:17px;font-weight:800;color:var(--work);display:block;line-height:1.1;}
.sx-clock .lbl{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

.sx-rail{display:flex;gap:2px;padding:0 var(--pad);height:14px;align-items:center;flex-shrink:0;background:var(--ink-2);}
.sx-rail i{flex:1;height:3px;border-radius:1px;background:rgba(150,180,225,.14);transition:background .3s;}
.sx-rail i.on{background:var(--work);}
.sx-rail i.now{background:var(--work);box-shadow:0 0 8px rgba(255,176,32,.5);}
.sx-rail i.rest{background:var(--rest);}

.sx-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px var(--pad) calc(var(--deck-h) + 18px);
}

/* exercise panel */
.ex-panel{border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(160deg,#0F1620,#0A0E15 70%);overflow:hidden;}
.ex-panel-in{padding:15px;}
.ex-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.ex-kicker .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--work);}
.ex-name{font-size:24px;font-weight:900;letter-spacing:-.045em;line-height:1.08;}
.ex-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.ex-cue{
  display:flex;gap:9px;margin-top:13px;padding:11px 12px;border-radius:var(--r-sm);
  background:var(--work-soft);border:1px solid var(--work-line);font-size:12.5px;line-height:1.5;color:var(--text);
}
.ex-cue .ic{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--work);}
.ex-cue.warn{background:rgba(255,95,86,.08);border-color:rgba(255,95,86,.3);}
.ex-cue.warn .ic{color:var(--danger);}

/* set ledger */
.ledger{margin-top:14px;}
.ledger-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.ledger-h .l{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
.ledger-h .r{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.08em;}
.ledger-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;}
.led{
  position:relative;padding:9px 10px;border-radius:var(--r-sm);text-align:left;
  background:var(--ink-2);border:1px solid var(--line);
}
.led.done{background:var(--done-soft);border-color:var(--done-line);}
.led.cur{border-color:var(--work);background:var(--work-soft);}
.led-n{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--faint);display:block;}
.led.done .led-n,.led.cur .led-n{color:inherit;opacity:.7;}
.led-v{font-family:var(--mono);font-size:15px;font-weight:800;display:block;margin-top:3px;}
.led.done .led-v{color:var(--done);}
.led.cur .led-v{color:var(--work);}
.led-v.empty{color:var(--faint);font-weight:600;font-size:13px;}
.led.note{grid-column:1/-1;}
.led.add{border-style:dashed;background:transparent;}
.led.add .led-v{color:var(--dim);font-size:12px;font-weight:700;}
.led.add:active{border-color:var(--work);background:var(--work-soft);}
.led.add:active .led-v{color:var(--work);}

/* media / help */
.ex-help{display:flex;gap:8px;margin-top:14px;}
.ex-help .btn{flex:1;}
.ex-media{margin-top:12px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:#05070C;position:relative;}
.ex-media svg{display:block;width:100%;height:auto;max-height:min(38vh,290px);}
.ex-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#05070C;}
.media-cap{
  position:absolute;left:9px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;border-radius:5px;background:rgba(4,6,10,.78);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.media-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,6,10,.35);}
.media-btn .play{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--work);color:var(--work-ink);box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.media-btn .play .ic{width:20px;height:20px;margin-left:2px;}
.media-btn.hide{opacity:0;pointer-events:none;}

/* switch list (between exercises) */
.switch-list{margin-top:12px;}
.switch-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:6px;
  border-radius:var(--r-sm);background:var(--ink-2);border:1px solid var(--line);
}
.switch-row.cur{border-color:var(--work);background:var(--work-soft);}
.switch-row.done{opacity:.6;}
.switch-i{
  width:22px;height:22px;flex-shrink:0;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;font-weight:800;background:rgba(150,180,225,.1);color:var(--dim);
}
.switch-row.cur .switch-i{background:var(--work);color:var(--work-ink);}
.switch-row.done .switch-i{background:var(--done-soft);color:var(--done);}
.switch-nm{flex:1;font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.switch-tg{font-family:var(--mono);font-size:9.5px;color:var(--faint);white-space:nowrap;}

/* ============================================================
   CONSOLE — the fixed control deck
   ============================================================ */
.console{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(10,15,22,.97),rgba(7,10,16,.99));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  padding:12px var(--pad) calc(13px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 40px -20px rgba(0,0,0,.9);
}
.console[data-phase="exec"]{border-top-color:var(--work);}
.console[data-phase="rest"]{border-top-color:var(--rest);}
.console[data-phase="log"]{border-top-color:var(--text);}
.console[data-phase="ready"]{border-top-color:var(--line-2);}

.c-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.c-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.c-tag.work{color:var(--work);}
.c-tag.rest{color:var(--rest);}
.c-tag.done{color:var(--done);}
.c-hint{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.06em;text-align:right;}

/* big timer readout */
.c-readout{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;}
.c-time{
  font-family:var(--mono);font-size:46px;font-weight:800;line-height:.95;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.c-time.work{color:var(--work);}
.c-time.rest{color:var(--rest);}
.c-time.warn{color:var(--danger);}
.c-side{text-align:right;padding-bottom:3px;}
.c-side .v{font-family:var(--mono);font-size:14px;font-weight:700;display:block;}
.c-side .l{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-top:2px;}

/* gauge */
.c-gauge{height:5px;border-radius:2px;background:rgba(150,180,225,.14);overflow:hidden;margin-bottom:11px;}
.c-gauge i{display:block;height:100%;border-radius:2px;transition:width .25s linear;}
.c-gauge i.work{background:var(--work);}
.c-gauge i.rest{background:var(--rest);}

/* main action */
.c-main{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px 16px;border-radius:var(--r);font-weight:800;
  transition:transform .12s ease,box-shadow .12s;
}
.c-main:active{transform:translateY(2px);}
.c-main .mi{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.c-main .mi .ic{width:19px;height:19px;}
.c-main .mt{flex:1;min-width:0;}
.c-main .mt b{display:block;font-size:16px;font-weight:900;letter-spacing:-.02em;}
.c-main .mt i{display:block;font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:2px;}

.c-main.work{background:linear-gradient(180deg,var(--work-2),var(--work));color:var(--work-ink);box-shadow:0 4px 0 var(--work-edge);}
.c-main.work:active{box-shadow:0 2px 0 var(--work-edge);}
.c-main.work .mi{background:rgba(26,16,2,.16);}
.c-main.rest{background:linear-gradient(180deg,#7BDDFF,var(--rest));color:#04222E;box-shadow:0 4px 0 var(--rest-edge);}
.c-main.rest:active{box-shadow:0 2px 0 var(--rest-edge);}
.c-main.rest .mi{background:rgba(4,34,46,.16);}
.c-main.done{background:linear-gradient(180deg,#69F0BB,var(--done));color:#03271A;box-shadow:0 4px 0 #16724D;}
.c-main.done:active{box-shadow:0 2px 0 #16724D;}
.c-main.done .mi{background:rgba(3,39,26,.16);}
.c-main.ghost{background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);box-shadow:none;}
.c-main.ghost .mi{background:rgba(150,180,225,.1);}

/* secondary row */
.c-row{display:flex;gap:7px;margin-top:9px;}
.c-btn{
  flex:1;padding:11px 8px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.c-btn:active{background:var(--panel-3);color:var(--text);}
.c-btn .ic{width:14px;height:14px;}
.c-btn.danger{color:var(--danger);border-color:rgba(255,95,86,.24);}
.c-btn.wide{flex:1.6;}

/* log step */
.c-input{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.c-input input{
  flex:1;min-width:0;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line-2);color:var(--text);
  font-family:var(--mono);font-size:26px;font-weight:800;letter-spacing:-.03em;text-align:center;outline:none;
}
.c-input input:focus{border-color:var(--work);}
.c-input input::placeholder{color:var(--faint);font-size:16px;font-weight:600;}
.c-input .u{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);min-width:34px;}
.c-chips{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;}
.c-chips button{
  flex-shrink:0;padding:9px 12px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--dim);
}
.c-chips button:active{background:var(--work-soft);border-color:var(--work-line);color:var(--work);}

/* finish screen */
.finish{padding:26px 18px;text-align:center;border-radius:var(--r-lg);border:1px solid var(--done-line);background:linear-gradient(160deg,var(--done-soft),var(--panel) 65%);}
.finish-ic{width:62px;height:62px;margin:0 auto 15px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--done-soft);border:1px solid var(--done-line);color:var(--done);}
.finish-ic .ic{width:30px;height:30px;}
.finish h2{font-size:24px;font-weight:900;letter-spacing:-.04em;}
.finish p{font-size:13px;color:var(--dim);margin:8px 0 18px;line-height:1.5;}
.finish-grid{display:flex;justify-content:center;gap:0;margin-bottom:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.finish-grid>div{flex:1;padding:11px 0;border-right:1px solid var(--line);}
.finish-grid>div:last-child{border-right:0;}
.fg-v{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--done);display:block;}
.fg-l{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-top:4px;}

/* ============================================================
   SHEET
   ============================================================ */
.backdrop{position:fixed;inset:0;z-index:300;background:rgba(2,4,8,.72);opacity:0;pointer-events:none;transition:opacity .3s;}
.backdrop.open{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:301;max-width:520px;margin:0 auto;
  max-height:88vh;display:flex;flex-direction:column;background:var(--ink-2);
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-top:1px solid var(--line-2);
  box-shadow:0 -24px 60px -22px rgba(0,0,0,.95);
  transform:translateY(102%);transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.sheet.open{transform:translateY(0);}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--line-3);margin:9px auto 3px;flex-shrink:0;}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px var(--pad) calc(22px + env(safe-area-inset-bottom));}
.sheet-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.sheet-top .nm{font-size:20px;font-weight:900;letter-spacing:-.04em;line-height:1.15;}
.sheet-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.ref-card{margin-top:14px;padding:13px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);}
.ref-eyebrow{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--work);}
.ref-eyebrow .ic{width:12px;height:12px;}
.ref-title{font-size:14px;font-weight:800;margin-top:7px;letter-spacing:-.02em;}
.ref-desc{font-size:12px;color:var(--dim);line-height:1.5;margin-top:4px;}
.ref-actions{display:flex;gap:7px;margin-top:11px;}
.ref-actions .btn{flex:1;}
.ref-note{font-family:var(--mono);font-size:9.5px;color:var(--faint);line-height:1.5;margin-top:9px;}
.sheet-actor{display:flex;gap:7px;margin-top:14px;}
.sheet-actor .btn{flex:1;}
.rec-line{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.rec-line:last-child{border-bottom:0;}

/* ============================================================
   NAV + TOAST
   ============================================================ */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:100;max-width:520px;margin:0 auto;
  display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:rgba(6,9,14,.9);border-top:1px solid var(--line-2);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;color:var(--faint);}
.nav-pi{display:flex;align-items:center;justify-content:center;width:44px;height:26px;border-radius:6px;transition:background .2s,color .2s;}
.nav-pi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.nav-lb{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.nav-item.active{color:var(--work);}
.nav-item.active .nav-pi{background:var(--work-soft);}

.toast-wrap{
  position:fixed;left:0;right:0;bottom:calc(74px + 22px + env(safe-area-inset-bottom));z-index:500;
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;padding:0 18px;
}
.toast{
  display:flex;align-items:center;gap:9px;max-width:440px;padding:11px 15px;border-radius:var(--r-sm);
  background:rgba(15,22,32,.97);border:1px solid var(--line-2);box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  font-size:13px;font-weight:700;animation:toastIn .3s cubic-bezier(.16,1,.3,1);
}
.toast .ic{width:15px;height:15px;flex-shrink:0;color:var(--dim);}
.toast.ok{border-color:var(--done-line);} .toast.ok .ic{color:var(--done);}
.toast.warn{border-color:rgba(255,95,86,.35);} .toast.warn .ic{color:var(--danger);}
.toast.work{border-color:var(--work-line);} .toast.work .ic{color:var(--work);}
.toast.out{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================================================
   SVG FIGURE ANIMATION
   ============================================================ */
.demo-fig .pose{stroke:#CBD6E6;fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
.demo-fig .headc{fill:#EAF0F8;stroke:#CBD6E6;stroke-width:6;}
.demo-fig .joint{fill:#EAF0F8;}
.demo-fig .prop{stroke:#26303F;stroke-width:2;stroke-dasharray:4 6;fill:none;}
.demo-fig.anim .poseB,.demo-fig.anim .jB,.demo-fig.anim .hB{animation:poseFadeB 2.6s infinite;}
.demo-fig.anim .poseA,.demo-fig.anim .jA,.demo-fig.anim .hA{animation:poseFadeA 2.6s infinite;}
@keyframes poseFadeA{0%,46%{opacity:1}47%,100%{opacity:0}}
@keyframes poseFadeB{0%,46%{opacity:0}47%,100%{opacity:1}}
.demo-arrow{stroke:var(--work);stroke-width:3;fill:none;stroke-dasharray:6 9;stroke-linecap:round;marker-end:url(#arrowHead);animation:dashflow 1.1s linear infinite;}
@keyframes dashflow{to{stroke-dashoffset:-15;}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}