:root{
  --concrete:#E8E9E6;
  --card:#FFFFFF;
  --ink:#14181C;
  --steel:#8D9499;
  --hair:#D2D5D1;
  --graphite:#1C1F22;
  --signal:#E8412B;
  --pad:16px;
  --r:4px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--concrete);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.35;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
  overscroll-behavior-y:contain;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}

/* ── header ── */
header{
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 12px;
  display:flex;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--hair);
  background:var(--concrete);
}
header h1{
  margin:0;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
header .date{margin-left:auto;}
.wbtn{
  border:1px solid var(--ink);border-radius:100px;padding:5px 11px;
  font-size:12px;font-weight:700;letter-spacing:.04em;
}

/* ── tabs ── */
nav{display:flex;border-bottom:1px solid var(--hair);background:var(--concrete);
  position:sticky;top:0;z-index:30}
nav button{
  flex:1;padding:13px 0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);border-bottom:2px solid transparent;
}
nav button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--signal)}

/* ── console (signature) ── */
.console{
  position:sticky;top:44px;z-index:20;
  background:var(--graphite);color:#fff;
  padding:14px var(--pad) 16px;
  box-shadow:0 10px 24px rgba(20,24,28,.22);
}
.console .cname{
  font-size:19px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;margin:2px 0 0;
  display:flex;align-items:center;gap:9px;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--signal);flex:0 0 auto;
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.console .row{display:flex;align-items:flex-end;gap:18px;margin-top:8px}
.bigtime{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:.95}
.bigkcal{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.6;color:#fff}
.bigkcal small{font-size:11px;font-weight:700;letter-spacing:.12em;color:#9AA1A6;margin-left:3px}
.console .eyebrow{color:#7F878C}
.chips{display:flex;gap:6px;margin-top:14px}
.chips button{
  flex:1;padding:11px 0;border:1px solid #3A3F44;border-radius:var(--r);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B7BEC3;
}
.chips button[aria-pressed="true"]{background:#fff;color:var(--graphite);border-color:#fff}
.stop{
  width:100%;margin-top:10px;padding:17px 0;background:var(--signal);color:#fff;border-radius:var(--r);
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.stop:active{transform:translateY(1px)}

/* ── machine list ── */
.group{padding:0 var(--pad)}
.group h2{
  display:flex;align-items:center;gap:10px;
  margin:26px 0 8px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
.group h2::after{content:"";flex:1;height:1px;background:var(--hair)}
.m{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:13px 14px;margin-bottom:6px;min-height:58px;
}
.m:active{background:#F7F7F5}
.m.on{background:var(--graphite);border-color:var(--graphite);color:#fff}
.m .mn{font-size:15px;font-weight:700;letter-spacing:-.01em}
.m .ms{font-size:11px;color:var(--steel);letter-spacing:.02em}
.m.on .ms{color:#9AA1A6}
.m .meta{margin-left:auto;text-align:right;flex:0 0 auto}
.m .mt{font-size:14px;font-weight:700}
.star{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  font-size:15px;color:var(--hair);margin:-6px -6px -6px 0;
}
.star.f{color:var(--signal)}
.fav{color:var(--signal);font-size:11px;margin-left:6px}

/* ── картинки тренажерів ── */
.ic{display:block;width:100%;height:100%}
.tile{
  flex:0 0 auto;width:42px;height:42px;padding:5px;
  background:#F0F1EE;border:1px solid var(--hair);border-radius:var(--r);
  color:var(--graphite);display:grid;place-items:center;
}
.m.on .tile{background:rgba(255,255,255,.09);border-color:#3A3F44;color:#fff}
.m .txt{min-width:0;flex:1 1 auto}
.chead{display:flex;align-items:center;gap:11px}
.chead .tile{width:50px;height:50px;padding:7px;background:rgba(255,255,255,.09);border-color:#3A3F44;color:#fff}
.logrow .tile{width:28px;height:28px;padding:3px}

/* ── log ── */
.logrow{
  display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair);
  font-size:14px;
}
.logrow b{font-weight:700}
.logrow .k{margin-left:auto;font-weight:700}
.del{color:var(--steel);font-size:18px;padding:0 2px 0 8px;line-height:1}
.empty{
  border:1px dashed var(--hair);border-radius:var(--r);padding:22px 16px;text-align:center;
  color:var(--steel);font-size:14px;margin-top:10px;
}

/* ── bottom bar ── */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--card);border-top:1px solid var(--hair);
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:16px;
}
.bar .v{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bar .done{
  margin-left:auto;background:var(--ink);color:#fff;border-radius:var(--r);
  padding:14px 20px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.bar .done[disabled]{background:var(--hair);color:#fff}

/* ── sheet ── */
.veil{position:fixed;inset:0;background:rgba(20,24,28,.5);z-index:50;display:none}
.veil.open{display:block}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--concrete);
  border-radius:14px 14px 0 0;padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));
  max-height:88vh;overflow:auto;transform:translateY(100%);transition:transform .24s ease;
}
.sheet.open{transform:none}
.sheet h3{margin:6px 0 16px;font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.total{display:flex;gap:22px;align-items:flex-end;padding:14px 0 16px;border-bottom:1px solid var(--hair)}
.total .v{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:.95}
label.f{display:block;margin:14px 0 6px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
input[type=number],input[type=text]{
  width:100%;padding:14px;font-size:17px;font-weight:600;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--r);color:var(--ink);
}
.btn{
  display:block;width:100%;margin-top:10px;padding:16px 0;text-align:center;border-radius:var(--r);
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:#fff;
}
.btn.ghost{background:none;border:1px solid var(--ink);color:var(--ink)}
.btn.danger{background:none;border:1px solid var(--signal);color:var(--signal)}
.note{font-size:12px;color:var(--steel);margin-top:14px;line-height:1.5}

/* ── перемикач мови (у шторці ваги) ── */
.langs{display:flex;gap:6px}
.langs button{
  flex:1;padding:13px 0;border:1px solid var(--hair);border-radius:var(--r);
  background:var(--card);color:var(--steel);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.langs button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── history ── */
.hcard{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:14px;margin-bottom:8px}
.hcard .top{display:flex;align-items:baseline;gap:10px}
.hcard .kc{margin-left:auto;font-size:20px;font-weight:800;letter-spacing:-.03em}
.hcard .det{font-size:12px;color:var(--steel);margin-top:6px;line-height:1.5}
.spark{display:flex;align-items:flex-end;gap:5px;height:56px;margin:12px 0 22px}
.spark i{flex:1;background:var(--graphite);min-height:3px;display:block}
.spark i:last-child{background:var(--signal)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}