:root{
  --bg:#14161c;
  --panel:#1d2029;
  --panel-2:#252935;
  --line:#31364433;
  --text:#eef0f4;
  --muted:#8b91a1;
  --prepare:#ffb020;
  --work:#ff5a4e;
  --rest:#3ec6a8;
  --done:#7aa2ff;
  --radius:14px;
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;   /* no pull-to-refresh reload in the middle of a set */
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}

/* svh is the viewport with the browser bars shown, the smallest it ever gets, so
   a screen cannot come out taller than what is on display. dvh and lvh both can,
   which leaves an otherwise empty page scrollable by the height of the bars.
   Installed there are no bars and all three are the same. */
.screen{display:none;min-height:100svh}
.screen.active{display:flex;flex-direction:column}
.wrap{width:100%;max-width:640px;margin:0 auto;padding:20px 18px 40px;flex:1}

/* ---------- header ---------- */
.eyebrow{
  letter-spacing:.22em;text-transform:uppercase;font-size:.68rem;
  color:var(--muted);margin-bottom:6px;
}
h1{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.home-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px}

.btn{
  background:var(--panel-2);border:1px solid var(--line);
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:.9rem;
  transition:background .15s;
}
.btn:hover{background:#2d3240}
.btn.primary{background:var(--work);border-color:transparent;color:#fff}
.btn.primary:hover{background:#ff6e63}
.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible{
  outline:2px solid var(--done);outline-offset:2px;
}

/* ---------- workout cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;
  display:flex;align-items:center;gap:14px;
}
.card .info{flex:1;min-width:0}
.card .name{font-weight:700;font-size:1.05rem;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .meta{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.icon-btn{
  width:38px;height:38px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line);font-size:.95rem;
}
.icon-btn:hover{background:#2d3240}
.icon-btn.play{background:var(--rest);border:none;color:#0c221d;font-weight:800}
.icon-btn.play:hover{filter:brightness(1.1)}
.empty{
  text-align:center;color:var(--muted);padding:60px 20px;
  border:1px dashed #3a4050;border-radius:var(--radius);line-height:1.6;font-size:.92rem;
}

.home-tools{display:flex;gap:10px;margin-top:22px}
.home-tools .btn{flex:1;color:var(--muted)}

/* ---------- editor ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
input[type=text]{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:1rem;
}
input[type=number]{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:11px 8px;font-size:1rem;text-align:center;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.stepper{display:flex;align-items:stretch;gap:6px}
.stepper button{
  flex:none;width:40px;border-radius:10px;background:var(--panel-2);
  border:1px solid var(--line);font-size:1.15rem;font-weight:700;
}
.stepper button:hover{background:#2d3240}

.exercise{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:12px;
}
.exercise-top{display:flex;gap:8px;margin-bottom:12px}
.exercise-top input{flex:1}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:8px}
.grid4 .field{margin-bottom:0}
.grid4 .field label{font-size:.62rem;letter-spacing:.08em;white-space:nowrap}
input::placeholder{color:#5a6070}
.editor-actions{display:flex;gap:10px;margin-top:22px}
.editor-actions .btn{flex:1;padding:13px}
.add-row{display:flex;gap:10px}
.add-row .btn{flex:1;border-style:dashed;color:var(--muted)}

.summary{color:var(--muted);font-size:.82rem;margin-top:8px;font-variant-numeric:tabular-nums}

/* ---------- player ---------- */
#player{
  background:var(--phase,var(--panel));
  transition:background .45s ease;
  color:#101318;
  text-align:center;
  justify-content:space-between;
}
#player .p-top{padding:22px 18px 0;display:flex;justify-content:space-between;align-items:center;max-width:640px;margin:0 auto;width:100%}
#player .p-top .btn,#player .p-top .icon-btn{
  background:#00000022;border-color:transparent;color:inherit;
}
.phase-label{
  letter-spacing:.3em;text-transform:uppercase;font-weight:800;font-size:.95rem;
}
.p-count{font-weight:700;font-size:.85rem;opacity:.7;font-variant-numeric:tabular-nums}
.p-mid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 18px}
/* Read from across the room, so it scales with the screen like the clock does. */
.p-exname{
  font-size:clamp(1.75rem,min(9vw,6vh),3.25rem);
  font-weight:800;letter-spacing:-.01em;line-height:1.15;
  min-height:1.5em;text-wrap:balance;
}
.p-clock{
  font-size:clamp(6rem,28vw,11rem);
  font-weight:800;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  font-family:"Avenir Next Condensed","Arial Narrow","Segoe UI",sans-serif;
}
.p-set{font-weight:700;font-size:1rem;opacity:.75;font-variant-numeric:tabular-nums;min-height:1.3em}
.p-next{margin-top:14px;font-size:.85rem;opacity:.65;min-height:1.2em}

.p-progress{height:6px;background:#00000026;width:100%}
.p-progress i{display:block;height:100%;background:#101318;width:0%;transition:width .3s linear}

.p-controls{
  display:flex;gap:12px;justify-content:center;padding:22px 18px 34px;
  max-width:640px;margin:0 auto;width:100%;
}
.p-controls .btn{
  background:#00000022;border:none;color:inherit;font-weight:700;
  padding:15px 0;flex:1;font-size:1rem;border-radius:12px;
}
.p-controls .btn.big{background:#101318;color:#fff}

.paused-veil{opacity:.55}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* safe areas for standalone/PWA mode */
.wrap{padding-top:calc(20px + env(safe-area-inset-top))}
#player .p-top{padding-top:calc(22px + env(safe-area-inset-top))}
.p-controls{padding-bottom:calc(34px + env(safe-area-inset-bottom))}