.tm { display: grid; gap: 20px; }
.tm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tm-top .kv-tabs { flex: 1 1 240px; }
.tm-panel { display: grid; gap: 22px; justify-items: center; }
.tm .kv-msg { margin: 0; }

/* Mostrador com anel de progresso */
.tm-dial { position: relative; width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; }
.tm-dial--plain { aspect-ratio: auto; padding: 36px 0 12px; }
.tm-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tm-ring-track { fill: none; stroke: var(--line); stroke-width: 10; }
.tm-ring-bar { fill: none; stroke: var(--kit); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 578.05; stroke-dashoffset: 0; }
.tm-readout { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.tm-time {
  font-size: clamp(3rem, 2rem + 8vw, 5.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.tm-time small { font-size: 0.45em; font-weight: 700; color: var(--muted); }
.tm-up { margin: 0; font-size: 1.3rem; font-weight: 800; background: var(--kit); padding: 4px 14px; border-radius: 999px; color: #14213d; }
.tm.is-ringing .tm-time { animation: tm-blink 1s steps(2, start) infinite; }
@keyframes tm-blink { 50% { opacity: 0.2; } }

.tm-set { display: grid; gap: 14px; justify-items: center; }
.tm-fields { display: flex; align-items: flex-end; gap: 8px; }
.tm-num { width: 84px; text-align: center; font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; padding: 6px 4px; }
.tm-colon { font-size: 1.6rem; font-weight: 800; padding-bottom: 10px; color: var(--muted); }
.tm-presets { justify-content: center; max-width: 520px; }
.tm-set.is-locked { opacity: 0.45; pointer-events: none; }

.tm-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tm-buttons .kv-btn--big { min-width: 170px; }
.tm-sound { justify-self: center; }

/* Voltas */
.tm-laps { width: 100%; max-width: 520px; display: grid; gap: 8px; }
.tm-laps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-laps-head h2 { font-size: 1.1rem; font-weight: 720; }
.tm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tm-table th { text-align: left; font-size: 0.88rem; color: var(--muted); font-weight: 650; padding: 6px 8px; border-bottom: 2px solid var(--line); }
.tm-table td { padding: 8px; border-bottom: 1px solid var(--line); }
.tm-table td:first-child { font-weight: 700; }
.tm-table tr.is-best td:nth-child(2) { color: var(--ok); font-weight: 700; }
.tm-table tr.is-worst td:nth-child(2) { color: var(--err); font-weight: 700; }

/* Tela cheia (projetor) */
.tm:fullscreen { background: var(--surface); padding: 24px 32px; overflow: auto; align-content: center; }
.tm:fullscreen .tm-dial { width: min(80vw, 70vh); }
.tm:fullscreen .tm-time { font-size: min(18vw, 16vh); }
@media (max-width: 600px) { .tm-top [data-fs] { display: none; } }