/* Online timer and stopwatch (static/js/tools/timer.js, stopwatch.js). Light mode only. */
.tm{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.tm-face{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.tm-disp{font-family:var(--font);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;color:var(--ink);font-size:clamp(56px,17vw,132px);max-width:100%;overflow-wrap:anywhere}
.sw-disp{font-size:clamp(46px,14vw,116px)}
.tm.run .tm-disp{color:var(--brand)}
.tm.up .tm-disp{color:var(--orange-ink);animation:tmPulse 1s ease-in-out infinite}
@keyframes tmPulse{50%{opacity:.35}}
.tm-bar{width:min(560px,100%);height:8px;border-radius:9px;background:var(--surface2);overflow:hidden}
.tm-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:9px;transition:width .2s linear}
.tm.up .tm-bar i{background:var(--orange)}
.tm-msg{margin:0;min-height:1.4em;font-size:17px;font-weight:600;color:var(--sub)}
.tm.up .tm-msg{color:var(--orange-ink)}
.tm-actions{justify-content:center;flex-wrap:wrap;margin:0}
.tm-opts{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.tm-chips{justify-content:flex-start}
.tm-set{display:flex;flex-wrap:wrap;gap:10px}
.tm-set label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.tm-set input{width:78px;font:inherit;font-size:17px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.tm-set input:disabled{opacity:.55}
.tm-keys{margin-top:10px}
.tm:fullscreen{justify-content:center;border-radius:0;border:0;padding:24px;background:#fff}
.tm:fullscreen .tm-disp{font-size:min(24vw,38vh)}
.tm:-webkit-full-screen{justify-content:center;border-radius:0;border:0;padding:24px;background:#fff;width:100%;height:100%}
.tm.fake-fs{position:fixed;inset:0;z-index:1000;border-radius:0;justify-content:center}
.tm.fake-fs .tm-disp{font-size:min(24vw,38vh)}
.sw-laps{margin-top:6px}
.sw-laps tr.sw-fast td{color:var(--ok)}
.sw-laps tr.sw-slow td{color:var(--err)}
@media (max-width:600px){
  .tm{padding:18px 12px 14px}
  .tm-actions .btn{flex:1 1 40%}
  .tm-set input{width:66px}
}