.classroom-timer{max-width:1050px;margin:auto}.timer-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.timer-tabs button,.timer-controls button,.timer-settings button{min-height:48px;padding:11px 16px;border:1px solid #c7d2fe;border-radius:12px;background:#fff;color:#334155;font-size:.95rem;font-weight:800;cursor:pointer}.timer-tabs button[aria-selected=true],.timer-controls button:first-child{background:var(--primary,#6366f1);color:#fff}.timer-settings{display:grid;gap:14px}.timer-settings label{display:grid;gap:6px;font-weight:700}.timer-settings input,.timer-settings select{min-height:48px;padding:10px;border:1px solid #cbd5e1;border-radius:10px}.timer-panel,.timer-audio,.timer-presets{display:flex;flex-wrap:wrap;align-items:end;justify-content:center;gap:10px}.timer-panel[hidden]{display:none}.timer-check{display:flex!important;align-items:center;gap:8px}.timer-check input{min-height:auto}.timer-display{--timer-color:#16a34a;position:relative;min-width:0;margin-top:20px;padding:20px;border-radius:24px;background:#f8fafc;text-align:center;transition:background .25s}.timer-display[data-state=yellow]{--timer-color:#d97706}.timer-display[data-state=red]{--timer-color:#dc2626}.timer-display.is-finished{background:#fee2e2}.timer-display-title,.timer-stage-name{margin:4px;font-weight:900}.timer-display-title{font-size:clamp(1.1rem,3vw,2rem)}.timer-stage-name{font-size:clamp(1rem,2.5vw,1.6rem);color:#475569}.timer-ring{position:relative;width:min(66vh,560px);max-width:100%;aspect-ratio:1;margin:auto}.timer-ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}.timer-ring circle{fill:none;stroke-width:12}.ring-bg{stroke:#e2e8f0}.ring-progress{stroke:var(--timer-color);stroke-linecap:round;stroke-dasharray:603.19;stroke-dashoffset:0;transition:stroke .2s}.timer-ring output{position:absolute;inset:0;display:grid;place-items:center;color:var(--timer-color);font-size:clamp(3rem,15vw,10rem);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}.timer-display[data-urgent=true] output{animation:timer-pulse .8s ease-in-out infinite}.timer-finished{font-size:clamp(2rem,7vw,5rem);font-weight:950;color:#b91c1c}.timer-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;transition:opacity .25s}.timer-help{position:relative}.timer-help summary{display:grid;place-items:center;min-width:48px;min-height:48px;border:1px solid #c7d2fe;border-radius:12px;background:#fff;font-weight:900;cursor:pointer}.timer-help p{position:absolute;right:0;bottom:52px;z-index:5;width:min(340px,80vw);padding:12px;border-radius:10px;background:#0f172a;color:#fff}.lap-list{max-width:440px;margin:15px auto;text-align:left}.sequence-row{display:grid;grid-template-columns:28px 1fr 100px 52px;gap:8px;align-items:center;margin:7px 0}.sequence-row[draggable=true]{cursor:grab}.classroom-timer:fullscreen{overflow:auto;background:#0f172a;color:#fff;padding:2vh}.classroom-timer:fullscreen .card-header,.classroom-timer:fullscreen .timer-tabs,.classroom-timer:fullscreen .timer-settings,.classroom-timer:fullscreen~*{display:none}.classroom-timer:fullscreen .timer-display{margin:0;min-height:96vh;display:grid;align-content:center;background:#0f172a}.classroom-timer:fullscreen .timer-controls.controls-hidden{opacity:0;pointer-events:none}@keyframes timer-pulse{50%{opacity:.55;transform:scale(1.02)}}@media(prefers-reduced-motion:reduce){.timer-display[data-urgent=true] output{animation:none}}@media(max-width:650px){.timer-tabs{grid-template-columns:1fr 1fr}.timer-display{padding:12px 10px 16px;border-radius:18px}.timer-ring{width:min(100%,360px)}.timer-ring output{font-size:clamp(2.8rem,17vw,5.2rem)}.timer-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:8px}.timer-controls>button{width:100%;min-height:54px;padding:12px 8px;font-size:1rem}.timer-controls>button:first-child,.timer-controls>#timerFullscreen{grid-column:span 2}.timer-help{width:100%}.timer-help summary{width:100%;min-height:52px}.timer-help p{right:0;bottom:58px;width:100%}.sequence-row{grid-template-columns:24px 1fr 78px 48px}.classroom-timer:fullscreen{padding:0}.classroom-timer:fullscreen .timer-display{min-height:100dvh;padding:10px}.classroom-timer:fullscreen .timer-ring{width:min(52dvh,86vw,420px)}}