/* ---------- Type ---------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); }

/* ---------- Tokens: dark gym-floor world, electric lime accent ---------- */
:root {
  --bg: #0a0a0b;
  --surface: #161618;
  --surface-2: #212124;
  --surface-3: #2c2c30;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f4f4f0;
  --text-2: rgba(244, 244, 240, 0.64);
  --text-3: rgba(244, 244, 240, 0.4);
  --lime: #d4ff3a;
  --lime-ink: #121600;
  --red: #ff453a;
  --scrim: rgba(0, 0, 0, 0.6);

  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(40, 40, 44, 0.86);
  --glass-rim: inset 0 1px 0.5px rgba(255, 255, 255, 0.22), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;

  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --smooth: cubic-bezier(0.2, 0.9, 0.3, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.3 var(--ui);
  letter-spacing: -0.4px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  caret-color: var(--lime);
}
::selection { background: var(--lime); color: var(--lime-ink); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
input, select { font: inherit; color: inherit; letter-spacing: inherit; }
svg { display: block; flex: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--glass-rim), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.press { transition: transform 0.35s var(--spring), background-color 0.2s; }
.press:active { transform: scale(0.94); }

.view {
  position: fixed; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg);
  padding-bottom: calc(40px + var(--safe-bottom));
  scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
}
.view.push { animation: push-in 0.45s var(--smooth); }
.view.pop { animation: pop-in 0.45s var(--smooth); }
.view.rise { animation: rise-in 0.45s var(--smooth); }
@keyframes push-in { from { transform: translateX(36%); opacity: 0; } }
@keyframes pop-in { from { transform: translateX(-20%); opacity: 0; } }
@keyframes rise-in { from { transform: translateY(5%); opacity: 0; } }

.content { max-width: 640px; margin: 0 auto; padding: 0 calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left)); }

/* ---------- Top bars ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  padding-top: var(--safe-top);
  background: linear-gradient(var(--bg) 60%, rgba(10, 10, 11, 0));
}
.bar-inner {
  max-width: 640px; margin: 0 auto; height: 64px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left));
}
.bar-title { flex: 1; text-align: center; font: 600 17px/1.2 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wordmark { flex: 1; font: 800 32px/1 var(--display); text-transform: uppercase; letter-spacing: -0.005em; display: flex; align-items: baseline; gap: 6px; }
.wordmark span { color: var(--lime); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--text); flex: none; }
.icon-btn.lime { background: var(--lime); color: var(--lime-ink); box-shadow: inset 0 1px 0.5px rgba(255,255,255,.6), 0 4px 12px rgba(0, 0, 0, 0.35); }

.section-title { margin: 28px 6px 10px; font: 600 15px/1.2 var(--ui); letter-spacing: -0.2px; color: var(--text-2); }

/* ---------- Pinned tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.tile {
  position: relative; aspect-ratio: 1 / 0.88;
  border-radius: 26px; padding: 16px 14px 14px 16px;
  background: var(--tc); color: var(--tf);
  display: flex; flex-direction: column; text-align: left;
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,.45), 0 10px 30px rgba(0,0,0,.35);
  transition: transform 0.4s var(--spring);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overflow: hidden;
}
.tile:active { transform: scale(0.96); }
.tile-name { font: 800 clamp(19px, 5.2vw, 24px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; padding-right: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-sub { margin-top: 6px; font-size: 13px; line-height: 1.25; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-time { margin-top: auto; font: 800 clamp(32px, 9.6vw, 46px)/0.85 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tile-play { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--tf); color: var(--tc); display: grid; place-items: center; transition: transform 0.35s var(--spring); }
.tile-play:active { transform: scale(0.9); }
.tile.ghost {
  aspect-ratio: auto; grid-column: 1 / -1; min-height: 96px;
  background: none; color: var(--text-2);
  border: 1.5px dashed var(--line-strong); box-shadow: none;
  flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px;
  font-size: 15px; line-height: 1.35;
}
.tile.ghost svg { color: var(--lime); }
.tile.enter { animation: tile-in 0.5s var(--spring); }
@keyframes tile-in { from { transform: scale(0.8); opacity: 0; } }

/* ---------- Lists & rows ---------- */
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 24px; overflow: hidden; }
.list + .list { margin-top: 14px; }
.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 8px 18px;
}
.row + .row::before, .swipe + .swipe::before {
  content: ""; position: absolute; z-index: 2; top: 0; right: 18px; left: var(--inset, 18px);
  border-top: 0.5px solid var(--line);
}
.row.tappable { cursor: pointer; transition: background-color 0.2s; }
.row.tappable:active { background: var(--surface-2); }
.row-label { flex: 1; }
.row-value { color: var(--text-2); font-variant-numeric: tabular-nums; display: inline-block; }
.row-value.accent { color: var(--lime); }
.footnote { margin: 10px 18px 0; font-size: 13px; line-height: 18px; color: var(--text-3); letter-spacing: -0.08px; }
.link { color: var(--lime); }

/* Swipeable timer rows */
.swipe { position: relative; overflow: hidden; --inset: 72px; }
.swipe-content {
  position: relative; z-index: 1; background: var(--surface);
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; padding: 10px 12px 10px 18px;
  touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 0.45s var(--spring), background-color 0.2s;
}
.swipe-content:active { background: var(--surface-2); }
.swipe-act {
  position: absolute; top: 0; bottom: 0; width: 100%;
  display: flex; align-items: center; padding: 0 26px; gap: 8px;
  font-weight: 600; font-size: 15px;
  visibility: hidden;
}
.swipe.swiping .swipe-act { visibility: visible; }
.swipe[data-dir="right"] .swipe-act.del, .swipe[data-dir="left"] .swipe-act.pin { visibility: hidden; }
.swipe-act.pin { left: 0; padding: 0; background: var(--lime); color: var(--lime-ink); justify-content: flex-start; }
.swipe-act.del { right: 0; background: var(--red); color: #fff; justify-content: flex-end; }
.swipe-act.del { padding: 0; }
.swipe-act button { height: 100%; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 600; }
.chip-dot { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--tc); color: var(--tf); box-shadow: inset 0 1px 0.5px rgba(255,255,255,.4); }
.item-text { flex: 1; min-width: 0; }
.item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.item-title svg { color: var(--lime); }
.item-sub { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.15px; }
.item-time { font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text-2); }
.play-btn { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--lime-ink); background: var(--lime); }

.row-enter { animation: row-in 0.45s var(--smooth); }
@keyframes row-in { from { max-height: 0; min-height: 0; padding-block: 0; opacity: 0; } to { max-height: 90px; } }
.row-leave { overflow: hidden; transition: height 0.3s var(--smooth), opacity 0.25s, padding 0.3s var(--smooth), min-height 0.3s var(--smooth); }
.stagger > * { animation: stagger-in 0.5s var(--smooth) backwards; }
.stagger > :nth-child(2) { animation-delay: 0.05s; }
.stagger > :nth-child(3) { animation-delay: 0.1s; }
.stagger > :nth-child(n + 4) { animation-delay: 0.15s; }
@keyframes stagger-in { from { opacity: 0; transform: translateY(12px); } }

.roll-up { animation: roll-up 0.3s var(--smooth); }
.roll-down { animation: roll-down 0.3s var(--smooth); }
@keyframes roll-up { from { transform: translateY(60%); opacity: 0; } }
@keyframes roll-down { from { transform: translateY(-60%); opacity: 0; } }
.pop { animation: pop 0.45s var(--spring); }
@keyframes pop { 40% { transform: scale(1.15); } }

/* ---------- Welcome (first run) ---------- */
.welcome {
  min-height: 100%; max-width: 460px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(56px + var(--safe-top)) 28px calc(28px + var(--safe-bottom));
}
.welcome-mark { width: 72px; height: 72px; border-radius: 20px; background: var(--lime); color: var(--lime-ink); display: grid; place-items: center; box-shadow: inset 0 1px 0.5px rgba(255,255,255,.6); }
.welcome h1 { margin: 26px 0 34px; font: 800 52px/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.005em; }
.welcome h1 span { color: var(--lime); }
.feature { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
.feature svg { color: var(--lime); margin-top: 2px; }
.feature b { display: block; font-weight: 600; }
.feature span { color: var(--text-2); font-size: 15px; line-height: 1.35; }
.welcome .big-btn { margin-top: auto; }

/* ---------- Buttons & controls ---------- */
.big-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 60px; border-radius: 999px;
  background: var(--lime); color: var(--lime-ink);
  font: 700 18px/1 var(--ui); letter-spacing: -0.2px;
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,.65), 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--spring), opacity 0.2s;
}
.big-btn:active { transform: scale(0.97); }
.big-btn:disabled { opacity: 0.35; box-shadow: none; }
.dock {
  position: sticky; bottom: 0; z-index: 5;
  padding: 18px 0 calc(14px + var(--safe-bottom));
  background: linear-gradient(rgba(10, 10, 11, 0), var(--bg) 40%);
  margin-top: 8px;
}
.pill-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.pill-btn {
  height: 50px; border-radius: 999px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600;
  transition: transform 0.35s var(--spring), background-color 0.2s;
}
.pill-btn:active { transform: scale(0.96); background: var(--surface-3); }
.pill-btn .dot { width: 12px; height: 12px; }
.destructive { color: var(--red); flex: 1; text-align: center; min-height: 36px; }

.name-input { flex: 1; border: 0; background: none; padding: 10px 0; outline: none; font: 700 22px/1.2 var(--ui); letter-spacing: -0.4px; min-width: 0; }
.name-input::placeholder, .int-name::placeholder { color: var(--text-3); }
.row.interval { --inset: 58px; padding-left: 14px; gap: 10px; }
.del-btn { width: 28px; height: 28px; display: grid; place-items: center; flex: none; color: var(--red); }
.del-btn:disabled { opacity: 0.25; cursor: default; }
.dot { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 0.5px rgba(255,255,255,.5), inset 0 0 0 0.5px rgba(0,0,0,.2); }
.int-name { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 8px 0; }
.int-name.rest { color: var(--text-2); }
.time-btn { font: 700 22px/1 var(--display); font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 8px 14px; min-width: 74px; text-align: center; transition: transform 0.35s var(--spring), background-color 0.2s; }
.time-btn:active { background: var(--surface-3); transform: scale(0.95); }
.time-btn.lime { color: var(--lime); }

.stepper { display: flex; align-items: center; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.stepper button { width: 46px; height: 40px; display: grid; place-items: center; font-size: 24px; font-weight: 400; transition: background-color 0.15s; }
.stepper button:active { background: var(--surface-3); }
.stepper button:disabled { color: var(--text-3); }
.stepper .num { min-width: 46px; text-align: center; font-size: 24px; font-weight: 700; background: var(--bg); align-self: stretch; display: grid; place-items: center; overflow: hidden; }

.seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr);
  background: var(--surface); border-radius: 999px; padding: 4px;
}
.seg button { position: relative; z-index: 1; font: 600 15px/1 var(--ui); letter-spacing: -0.2px; padding: 12px 0; color: var(--text-2); transition: color 0.3s; }
.seg button[aria-selected="true"] { color: var(--lime-ink); }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 3)); transition: transform 0.5s var(--spring); }
.seg-thumb::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--lime); box-shadow: inset 0 1px 0.5px rgba(255,255,255,.6), 0 2px 8px rgba(0, 0, 0, 0.3); }
.seg-thumb.moving::before { animation: lens 0.5s var(--smooth); }
@keyframes lens { 35% { transform: scale(1.12, 1.2); } }
.panel.from-right, .panel.from-left { animation: panel-in 0.2s ease-out; }
@keyframes panel-in { from { opacity: 0; } }

.switch {
  appearance: none; -webkit-appearance: none;
  width: 64px; height: 28px; border-radius: 999px; flex: none; margin: 0;
  background: var(--surface-3); position: relative; cursor: pointer;
  transition: background-color 0.3s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 38px; height: 24px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.45s var(--spring), width 0.3s var(--spring), background-color 0.2s;
}
.switch:checked { background: var(--lime); }
.switch:checked::after { transform: translateX(22px); }
.switch:active::after { width: 44px; }
.switch:checked:active::after { transform: translateX(16px); }
.swatch-btn { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.swatch-btn .dot { width: 28px; height: 28px; }

/* ---------- Sheets, popovers, alerts, toasts ---------- */
.backdrop { position: fixed; inset: 0; z-index: 50; background: var(--scrim); animation: fade 0.3s; }
@keyframes fade { from { opacity: 0; } }
.backdrop.closing { animation: fade-out 0.3s forwards; }
@keyframes fade-out { to { opacity: 0; } }
.sheet {
  position: fixed; z-index: 51;
  left: max(8px, var(--safe-left)); right: max(8px, var(--safe-right)); bottom: max(8px, var(--safe-bottom));
  margin: 0 auto; max-width: 560px;
  border-radius: 36px; padding-bottom: 14px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: var(--glass-rim), 0 20px 60px rgba(0,0,0,.5);
  max-height: calc(100dvh - 40px - var(--safe-top)); overflow-y: auto;
  animation: slide-up 0.5s var(--smooth);
}
.sheet.closing { animation: slide-down 0.32s var(--smooth) forwards; }
@keyframes slide-up { from { transform: translateY(110%); } }
@keyframes slide-down { to { transform: translateY(110%); } }
.sheet .bar-inner { height: 68px; padding: 0 12px; }
.sheet .list { background: rgba(255,255,255,0.05); }
.sheet .content { padding-bottom: 6px; }
.sheet .section-title { margin-top: 18px; }

.type-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.type-card {
  aspect-ratio: 1 / 1.05; border-radius: 22px; padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  background: var(--tc); color: var(--tf);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,.45);
  transition: transform 0.35s var(--spring);
}
.type-card:active { transform: scale(0.95); }
.type-card b { font: 800 clamp(18px, 5.6vw, 26px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }

.wheel {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 4px;
  height: 220px; margin: 4px 16px 0;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.wheel-band { position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; background: rgba(255,255,255,.08); border-radius: 999px; pointer-events: none; }
.wheel-col { position: relative; height: 220px; width: 72px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 88px 0; text-align: right; }
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-item { height: 44px; line-height: 44px; scroll-snap-align: center; font: 700 30px/44px var(--display); font-variant-numeric: tabular-nums; padding-right: 6px; color: var(--text-3); cursor: pointer; transition: color 0.15s; }
.wheel-item.sel { color: var(--text); }
.wheel-unit { width: 44px; font: 600 15px var(--ui); color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 16px 6px; }
.chip { background: rgba(255,255,255,.07); border-radius: 999px; padding: 8px 16px; font: 600 15px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--lime); transition: transform 0.35s var(--spring); }
.chip:active { transform: scale(1.08); }

.popover-backdrop { position: fixed; inset: 0; z-index: 70; }
.popover {
  position: fixed; z-index: 71; border-radius: 28px; padding: 14px;
  display: grid; grid-template-columns: repeat(6, 38px); gap: 10px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: var(--glass-rim), 0 20px 50px rgba(0,0,0,.5);
  animation: pop-in-menu 0.4s var(--spring);
}
.popover.closing { animation: pop-out 0.2s forwards; }
@keyframes pop-in-menu { from { opacity: 0; transform: scale(0.4); } }
@keyframes pop-out { to { opacity: 0; transform: scale(0.7); } }
.swatch { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 1px 0.5px rgba(255,255,255,.5); transition: transform 0.35s var(--spring); }
.swatch:active { transform: scale(1.15); }
.swatch[aria-checked="true"] { outline: 2.5px solid var(--text); outline-offset: 2px; }

/* Alerts slide up from the bottom and slide back down, like an iOS action sheet. */
.backdrop.alert-bg { z-index: 80; }
.alert {
  position: fixed; z-index: 81;
  top: 50%; left: 50%; width: min(340px, calc(100vw - 40px));
  transform: translate(-50%, -50%);
  border-radius: 34px; padding: 24px 18px 18px; text-align: center;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: var(--glass-rim), 0 20px 60px rgba(0,0,0,.5);
  animation: alert-up 0.45s var(--smooth);
}
.alert.closing { animation: alert-down 0.3s var(--smooth) forwards; }
@keyframes alert-up { from { transform: translate(-50%, calc(-50% + 60px)); opacity: 0; } }
@keyframes alert-down { to { transform: translate(-50%, calc(-50% + 60px)); opacity: 0; } }
.alert-title { font: 700 20px/1.2 var(--ui); letter-spacing: -0.4px; }
.alert-msg { font-size: 15px; margin-top: 8px; color: var(--text-2); }
.alert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.alert-actions button { height: 54px; border-radius: 999px; background: var(--surface-3); font-weight: 600; transition: transform 0.35s var(--spring); }
.alert-actions button:active { transform: scale(0.96); }
.alert-actions button.primary { background: var(--lime); color: var(--lime-ink); }
.alert-actions button.danger { background: var(--red); color: #fff; }

.toast {
  position: fixed; z-index: 90; left: 50%; top: calc(12px + var(--safe-top));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 22px; border-radius: 999px; white-space: nowrap;
  font-weight: 600; font-size: 15px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: var(--glass-rim), 0 12px 40px rgba(0,0,0,.5);
  animation: toast-in 0.45s var(--spring);
}
.toast:not(:has(button)) { padding-right: 22px; }
.toast button { color: var(--lime-ink); background: var(--lime); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
@keyframes toast-in { from { transform: translate(-50%, -150%); opacity: 0; } }
.toast.closing { animation: toast-out 0.3s var(--smooth) forwards; }
@keyframes toast-out { to { transform: translate(-50%, -150%); opacity: 0; } }

/* ---------- Run screen ---------- */
.timer {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--c); color: var(--fg);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  user-select: none; -webkit-user-select: none; overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.t-glass { background: rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 0.5px rgba(255,255,255,.35); }
.t-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.t-round-btn { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; transition: transform 0.35s var(--spring); }
.t-round-btn:active { transform: scale(0.92); }
.t-name { flex: 1; font: 600 17px/1.2 var(--ui); letter-spacing: -0.3px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding-right: 60px; }

.t-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; text-align: center; }
.t-label { font: 800 clamp(48px, 15vw, 120px)/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.01em; max-width: 100%; overflow-wrap: anywhere; }
.t-label.enter { animation: label-in 0.3s ease-out; }
@keyframes label-in { from { opacity: 0; } }
.t-time { font: 800 min(44vw, 50vh)/0.86 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: 0.02em 0 0.04em; white-space: nowrap; }
.timer.paused .t-time { opacity: 0.4; }
.t-meta { font: 600 clamp(17px, 4.4vw, 26px)/1.2 var(--ui); letter-spacing: -0.3px; opacity: 0.75; min-height: 1.2em; font-variant-numeric: tabular-nums; }

/* Signature: the whole workout as a segmented timeline */
.t-line { display: flex; align-items: center; gap: var(--gap, 3px); height: 14px; margin: 0 20px; }
.t-line span { position: relative; height: 8px; min-width: 1px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 20%, transparent); overflow: hidden; transition: height 0.25s ease; }
.t-line span.work { height: 12px; }
.t-line span.done { background: var(--fg); }
.t-line span.now { background: color-mix(in srgb, var(--fg) 30%, transparent); height: 14px; }
.t-line span i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fg); }
.t-line-meta { display: flex; justify-content: center; margin: 12px 20px 0; min-height: 1.2em; font: 600 clamp(16px, 4.2vw, 22px)/1.2 var(--ui); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.t-next { text-align: center; font: 500 14px/1.2 var(--ui); letter-spacing: -0.1px; opacity: 0.75; margin: 6px 16px 0; min-height: 1.2em; }

.t-count {
  align-self: center; margin: 14px 16px 0;
  display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 24px; border-radius: 999px;
  font: 600 18px var(--ui); letter-spacing: -0.3px;
  transition: transform 0.35s var(--spring);
}
.t-count b { font-family: var(--display); font-size: 40px; font-variant-numeric: tabular-nums; min-width: 1.1em; display: inline-block; }
.t-count .plus1 { background: var(--fg); color: var(--c); border-radius: 999px; padding: 10px 22px; }
.t-count:active { transform: scale(0.96); }

.t-controls { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 10vw, 64px); padding: 18px 16px 22px; }
.t-btn { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; transition: transform 0.35s var(--spring); }
.t-btn:active { transform: scale(0.92); }
.t-btn.main { width: 96px; height: 96px; background: var(--fg); color: var(--c); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.t-pill { height: 60px; padding: 0 32px; border-radius: 999px; font: 700 18px/1 var(--ui); letter-spacing: -0.3px; transition: transform 0.35s var(--spring); }
.t-pill:active { transform: scale(0.96); }
.t-pill.main { background: var(--fg); color: var(--c); }

/* Landscape (phone propped sideways, laptop or TV): time owns the left, everything else stacks on the right. */
@media (orientation: landscape) and (max-height: 600px) {
  .timer:not(.done) {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto auto auto auto 1fr;
    column-gap: 8px;
  }
  .timer:not(.done) .t-top { grid-column: 1 / -1; grid-row: 1; padding: 6px 16px; }
  .timer:not(.done) .t-main { grid-column: 1; grid-row: 2 / -1; padding: 0 0 12px 16px; }
  .timer:not(.done) .t-line { grid-column: 2; grid-row: 3; margin: 0 20px 0 0; }
  .timer:not(.done) .t-line-meta { grid-column: 2; grid-row: 4; margin: 10px 20px 0 0; justify-content: flex-start; }
  .timer:not(.done) .t-next { grid-column: 2; grid-row: 5; margin: 14px 20px 0 0; text-align: left; }
  .timer:not(.done) .t-count { grid-column: 2; grid-row: 6; align-self: start; justify-self: start; margin: 12px 0 0; }
  .timer:not(.done) .t-controls { grid-column: 2; grid-row: 7; justify-content: flex-start; gap: 20px; padding: 14px 20px 0 0; }
  .t-label { font-size: clamp(28px, 11vh, 64px); }
  .t-meta { font-size: clamp(16px, 6vh, 28px); }
  .t-btn { width: 54px; height: 54px; }
  .t-btn.main { width: 72px; height: 72px; }
  .t-name { padding-right: 0; text-align: left; }
}
@media (min-width: 700px) {
  .tiles { gap: 16px; }
}
/* Wide screens and phones on their side: one row of four tiles instead of giant squares. */
@media (orientation: landscape) and (min-width: 600px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .content, .bar-inner { max-width: 960px; }
  .tile-name { font-size: 21px; -webkit-line-clamp: 2; }
  .tile-time { font-size: clamp(32px, 4.4vw, 44px); }
  .tile.ghost { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}