.class-timer{display:flex;align-items:center;gap:10px;background:#fffefa;border:1px solid var(--line);border-radius:18px;padding:8px 10px 8px 16px;box-shadow:0 1px 0 #243c3510}
.class-timer[hidden]{display:none}
.timer-header{margin-left:auto}
.timer-time{font:500 30px/1 'Fredoka',sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);min-width:3.1ch;letter-spacing:.5px;margin-right:4px}
.timer-stepper{display:inline-flex;align-items:center;height:40px;border:1px solid var(--line);border-radius:12px;background:#f6f7ef;overflow:hidden}
.timer-stepper button{border:0;background:transparent;width:36px;height:100%;padding:0;border-radius:0;font-size:18px;line-height:1;color:var(--ink)}
.timer-stepper button:hover:not(:disabled){background:#e9eddd}
.timer-stepper button:disabled{background:transparent;color:#a7b0a2;cursor:not-allowed;opacity:1}
.timer-minutes{min-width:56px;text-align:center;font-size:14px;color:#4c5a51;white-space:nowrap}
.timer-minutes b{font-weight:700;color:var(--ink)}
.class-timer .timer-go{height:40px;min-width:76px;padding:0 16px;border:0;border-radius:12px;background:var(--green);color:#fff;font-weight:600}
.class-timer .timer-go.running{background:#f6b595;color:#3b2417}
.class-timer .timer-reset{height:40px;width:40px;padding:0;border-radius:12px;font-size:18px;line-height:1}
.timer-status{font-size:13px;font-weight:700;color:#8a3f12}
.timer-status:empty{display:none}
.timer-finished{background:var(--lime);border-color:#c7d98a;animation:timer-pulse 1s ease-in-out 3}
@keyframes timer-pulse{50%{transform:scale(1.03)}}
.timer-close{display:none}
/* classroom view: large, floating bottom-right, readable across the room */
.timer-stage{position:fixed;right:22px;bottom:22px;z-index:70;padding:14px 14px 14px 22px;gap:12px;border:2px solid #3f6b50;box-shadow:0 10px 30px #1d443733;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 44px)}
.timer-stage .timer-time{font-size:clamp(44px,6vw,84px)}
.timer-stage .timer-close{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;padding:0;border-radius:12px;font-size:16px}
@media(max-width:1050px){header{flex-wrap:wrap;gap:15px}}
@media(max-width:560px){.timer-header{width:100%;justify-content:space-between}.timer-header .timer-time{font-size:26px}.timer-stage{left:12px;right:12px;bottom:12px;justify-content:space-between}.timer-stage .timer-time{font-size:44px}}
@media(prefers-reduced-motion:reduce){.timer-finished{animation:none}}

.stage-timer-open .stage{padding-bottom:var(--stage-timer-space,150px)}
.timer-stage .timer-status{font-size:clamp(18px,2vw,28px)}