/* ═══════════════════════════════════════════════════════════
   TREINO · RELÓGIO — ecrã redondo (Galaxy Watch 5 Pro, 450×450)
   Tudo em --u (1 % do mostrador) → escala sozinho em qualquer relógio.
   Fundo preto puro (OLED: poupa bateria) + lima do Treino.
   ═══════════════════════════════════════════════════════════ */
:root {
  --u: 1vmin;
  --bg: #000; --card: #15191e; --card2: #1d232a; --line: #2a323b;
  --tx: #f2f5f7; --tx2: #a4afba; --tx3: #6c7885;
  --acc: #c6f432; --ink: #10140a; --red: #ff5d6c; --blue: #5cc8ff; --ok: #34e0a1; --warn: #ffc24b;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); font-family: system-ui, -apple-system, 'SamsungOne', 'Segoe UI', Roboto, sans-serif; overscroll-behavior: none; }
body { display: grid; place-items: center; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }

/* mostrador: no relógio ocupa o ecrã todo; no computador/telemóvel aparece como um relógio redondo (pré-visualização) */
.face { position: relative; width: calc(var(--u) * 100); height: calc(var(--u) * 100); border-radius: 50%; overflow: hidden; background: var(--bg); }
@media (min-width: 520px) { .face { box-shadow: 0 0 0 calc(var(--u) * 2.5) #1a1d21, 0 0 0 calc(var(--u) * 3.2) #2a2f35, 0 30px 80px rgba(0, 0, 0, .6); } body { background: radial-gradient(circle at 50% 30%, #1a1e23, #050607); } }

.scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--u) * 11) calc(var(--u) * 12); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.scr::-webkit-scrollbar { display: none; }
.scr > * { flex: none; }
.scr.center { justify-content: center; }
.scr.list { padding: calc(var(--u) * 30) calc(var(--u) * 10) calc(var(--u) * 34); scroll-snap-type: y proximity; }
.scr.list > * { scroll-snap-align: center; flex: none; }

.big-emo { font-size: calc(var(--u) * 14); line-height: 1; }
.msg { font-size: calc(var(--u) * 5.6); color: var(--tx2); margin: calc(var(--u) * 3) 0 0; }
.spin { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; border: calc(var(--u) * 1.4) solid var(--line); border-top-color: var(--acc); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.clock { font-size: calc(var(--u) * 5); font-weight: 700; color: var(--tx2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.kicker { font-size: calc(var(--u) * 4.6); font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .1em; }
.dim { color: var(--tx3); }
.num { font-variant-numeric: tabular-nums; }

/* ── anel à volta do mostrador ── */
.ring { position: absolute; inset: 0; pointer-events: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-linecap: round; }
.ring .bg { stroke: #14181c; }
.ring .fg { stroke: var(--acc); transition: stroke-dashoffset .5s cubic-bezier(.2, .8, .2, 1); }

/* ── botões ── */
.go { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: var(--acc); color: var(--ink); display: grid; place-items: center; flex: none; box-shadow: 0 0 calc(var(--u) * 6) rgba(198, 244, 50, .35); transition: transform .12s; }
.go:active { transform: scale(.92); }
.go svg { width: 46%; height: 46%; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); min-height: calc(var(--u) * 12); padding: 0 calc(var(--u) * 5); border-radius: 99px; background: var(--card2); font-size: calc(var(--u) * 5.2); font-weight: 700; flex: none; }
.pill.acc { background: var(--acc); color: var(--ink); }
.pill.red { background: rgba(255, 93, 108, .16); color: var(--red); }
.pill:active { filter: brightness(1.3); }
.row { display: flex; gap: calc(var(--u) * 2.5); justify-content: center; align-items: center; }
.ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--card2); display: grid; place-items: center; flex: none; font-size: calc(var(--u) * 6); color: var(--tx2); }
.ic svg { width: 52%; height: 52%; }

/* ── início ── */
.home .day { font-size: calc(var(--u) * 5); font-weight: 700; color: var(--tx2); margin-top: calc(var(--u) * 2); }
.home .wname { font-size: calc(var(--u) * 9.5); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: calc(var(--u) * 1) 0 0; }
.home .wfocus { font-size: calc(var(--u) * 4.8); color: var(--tx2); margin: calc(var(--u) * .8) 0 calc(var(--u) * 3.5); max-width: calc(var(--u) * 66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .meta { margin-top: calc(var(--u) * 3.5); font-size: calc(var(--u) * 4.6); color: var(--tx2); font-weight: 600; }
.home .meta b { color: var(--acc); }
.home .more { margin-top: calc(var(--u) * 18); display: flex; flex-direction: column; gap: calc(var(--u) * 3); align-items: center; padding-bottom: calc(var(--u) * 16); }
.home .first { min-height: calc(var(--u) * 78); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }

/* ── lista (treinos / exercícios) ── */
.item { width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3.6) calc(var(--u) * 4.5); margin: calc(var(--u) * 1.2) 0; border-radius: calc(var(--u) * 7); background: var(--card); text-align: left; }
.item .dot { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; flex: none; }
.item .t { flex: 1; min-width: 0; }
.item b { display: block; font-size: calc(var(--u) * 5.6); font-weight: 750; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item small { display: block; font-size: calc(var(--u) * 4.2); color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .n { font-size: calc(var(--u) * 4.6); font-weight: 800; color: var(--tx2); font-variant-numeric: tabular-nums; }
.item.done .n { color: var(--acc); }
.item.cur { box-shadow: inset 0 0 0 calc(var(--u) * .7) var(--acc); }
.item.done b { color: var(--tx2); }
.list-h { font-size: calc(var(--u) * 5); font-weight: 800; color: var(--tx2); margin-bottom: calc(var(--u) * 2); }

/* ── série ── (cabe tudo no círculo, sem scroll) */
.set { padding: calc(var(--u) * 7.5) calc(var(--u) * 8) 0; overflow: hidden; }
.set .top { height: calc(var(--u) * 5); display: flex; align-items: center; justify-content: center; }
.set .top .clock { font-size: calc(var(--u) * 4.2); }
.set .ex { font-size: calc(var(--u) * 7); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin-top: calc(var(--u) * 1.2); max-width: calc(var(--u) * 72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set .ex.l { font-size: calc(var(--u) * 6); }
.set .ex.xl { font-size: calc(var(--u) * 5.2); }
.set .sn { display: flex; align-items: center; gap: calc(var(--u) * 1.6); height: calc(var(--u) * 8); font-size: calc(var(--u) * 4.4); color: var(--tx2); font-weight: 700; }
.set .sn button { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; color: var(--tx2); font-size: calc(var(--u) * 6); line-height: 1; }
.set .sn button:disabled { opacity: .15; }
.dots { display: inline-flex; gap: calc(var(--u) * 1); }
.dots i { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--acc); }
.dots i.cur { background: var(--tx); }
.vals { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1); width: calc(var(--u) * 78); }
.val { display: grid; grid-template-columns: calc(var(--u) * 13) 1fr calc(var(--u) * 13); align-items: center; height: calc(var(--u) * 15); border-radius: 99px; background: var(--card); padding: 0 calc(var(--u) * 1); transition: box-shadow .15s, background .15s; }
.val.sel { background: var(--card2); box-shadow: inset 0 0 0 calc(var(--u) * .6) rgba(198, 244, 50, .55); }
.val button { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; background: #262d35; font-size: calc(var(--u) * 8); font-weight: 600; line-height: 1; color: var(--tx); display: grid; place-items: center; }
.val button:active { background: var(--acc); color: var(--ink); }
.val .v { display: flex; align-items: baseline; justify-content: center; gap: calc(var(--u) * 1.2); height: 100%; align-content: center; flex-wrap: wrap; }
.val .v b { font-size: calc(var(--u) * 10); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.val .v small { font-size: calc(var(--u) * 4); color: var(--tx3); font-weight: 700; }
.set .actions { display: flex; align-items: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 2.4); }
.set .go { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.set .go.redo { background: var(--card2); color: var(--acc); box-shadow: none; }
.set .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.set .hint { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 3.8); color: var(--tx3); max-width: calc(var(--u) * 58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set .hint b { color: var(--acc); font-weight: 700; }

/* ── descanso ── */
.rest .t { font-size: calc(var(--u) * 24); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; margin-top: calc(var(--u) * 4); }
.rest .lbl { font-size: calc(var(--u) * 4.8); color: var(--tx2); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-top: calc(var(--u) * 5); }
.rest .next { font-size: calc(var(--u) * 4.8); color: var(--tx2); margin-top: calc(var(--u) * 3); max-width: calc(var(--u) * 64); line-height: 1.25; }
.rest .next b { color: var(--tx); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--u) * 5.4); }
.rest .row { margin-top: calc(var(--u) * 4); }
.rest.end .t { color: var(--acc); }

/* ── terminar ── */
.fin h2 { font-size: calc(var(--u) * 8.5); margin: calc(var(--u) * 6) 0 0; letter-spacing: -.02em; }
.stats { display: flex; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 3); }
.stats div { display: flex; flex-direction: column; }
.stats b { font-size: calc(var(--u) * 7.5); font-weight: 800; font-variant-numeric: tabular-nums; }
.stats small { font-size: calc(var(--u) * 3.8); color: var(--tx3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.feel { display: flex; gap: calc(var(--u) * 2.5); margin-top: calc(var(--u) * 5); }
.feel button { width: calc(var(--u) * 17); height: calc(var(--u) * 17); border-radius: 50%; background: var(--card); font-size: calc(var(--u) * 8.5); display: grid; place-items: center; }
.feel button.on { background: var(--card2); box-shadow: inset 0 0 0 calc(var(--u) * .8) var(--acc); }
.fin .q { font-size: calc(var(--u) * 4.6); color: var(--tx2); margin-top: calc(var(--u) * 4); font-weight: 600; }
.fin .pill.acc { margin-top: calc(var(--u) * 5); min-width: calc(var(--u) * 50); }
.xp { font-size: calc(var(--u) * 15); font-weight: 900; color: var(--acc); letter-spacing: -.03em; animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ── ligar ── */
.pair .code { font: 800 calc(var(--u) * 13)/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; color: var(--acc); margin: calc(var(--u) * 4) 0 calc(var(--u) * 3); }
.pair .code span { display: inline-block; width: calc(var(--u) * 3); }
.pair p { font-size: calc(var(--u) * 4.8); color: var(--tx2); margin: 0; line-height: 1.3; }
.pair .url { color: var(--tx); font-weight: 700; font-size: calc(var(--u) * 4.6); word-break: break-all; margin-top: calc(var(--u) * 1); }
.pair .wait { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 4.2); color: var(--tx3); }
.pair .wait .spin { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-width: calc(var(--u) * .8); }

/* ── avisos ── */
.toast { position: fixed; left: 50%; bottom: 12vmin; transform: translateX(-50%); background: #262d35; color: var(--tx); font-size: calc(var(--u) * 4.6); font-weight: 700; padding: calc(var(--u) * 2.4) calc(var(--u) * 5); border-radius: 99px; z-index: 9; max-width: 70vmin; text-align: center; animation: pop .25s ease; }
.toast.err { background: #3a1820; color: #ffb3ba; }
.sync { position: absolute; top: calc(var(--u) * 5.5); left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 3.6); font-weight: 800; color: var(--warn); display: flex; align-items: center; gap: calc(var(--u) * 1); z-index: 3; pointer-events: none; }
.sync i { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%; background: var(--warn); }
.confirm h3 { font-size: calc(var(--u) * 7); margin: 0 0 calc(var(--u) * 2); }
.confirm p { font-size: calc(var(--u) * 4.6); color: var(--tx2); margin: 0 0 calc(var(--u) * 5); }
.confirm .row { flex-direction: column; gap: calc(var(--u) * 2.5); }
.confirm .pill { min-width: calc(var(--u) * 52); }