.timers-page .editor-panel form { display: grid; gap: 1rem; max-width: 42rem; }
.timers-page label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.timer-image-picker { display: grid; gap: .7rem; }
.timer-list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); }
.timer-card { margin: 0; min-width: 0; }
.timer-board { --child-color: var(--st-primary); text-align: center; overflow-wrap: anywhere; }
.timer-board h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 750; }
.timer-image { width: min(100%, 12rem); height: 10rem; object-fit: contain; margin-bottom: 1rem; border-radius: 1rem; }
.timer-image[hidden] { display: none; }
.timer-countdown { display: flex; flex-direction: column; align-items: center; font-variant-numeric: tabular-nums; }
.timer-countdown strong { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.2; }
.timer-countdown span, .timer-deadline { color: var(--st-muted); }
.timer-board .elapsed-track { height: 2rem; margin: 1.5rem 0; }
.timer-message { color: var(--st-primary); font-weight: 750; font-size: 1.5rem; }
.timer-due { --child-color: var(--st-primary); }
.timer-tv { min-height: 75vh; display: grid; align-items: center; max-width: 1600px; margin: auto; padding: clamp(1rem, 3vw, 3rem); }
.timer-tv .timer-board h2 { font-size: clamp(2rem, 5vw, 5rem); }
.timer-tv .timer-countdown strong { font-size: clamp(4rem, 12vw, 12rem); }
.timer-tv .timer-countdown span, .timer-tv .timer-deadline { font-size: clamp(1.1rem, 2vw, 2rem); }
.timer-tv .timer-message { font-size: clamp(1.5rem, 4vw, 4rem); }
.timer-tv .elapsed-track { height: clamp(2.5rem, 5vw, 5rem); }
.timer-tv .timer-image { width: min(40vw, 20rem); height: min(25vh, 16rem); }
.timer-clock { width: 14rem; max-width: 100%; margin: 1rem auto; color: var(--st-primary); }
.timer-clock svg { display: block; width: 100%; height: auto; overflow: visible; }
.timer-clock-face { fill: var(--st-bg); stroke: var(--st-line); stroke-width: 2; }
.timer-clock-track { fill: none; stroke: var(--st-line); stroke-width: 12; }
.timer-clock-dial .timer-clock-track { fill: var(--st-wash); stroke: none; }
.timer-clock-ring-fill { fill: none; stroke: var(--st-primary); stroke-width: 12; }
.timer-clock-sector { fill: var(--st-wash); }
.timer-clock-step { stroke: var(--st-primary); stroke-width: 4; stroke-linecap: round; }
.timer-clock-tick { stroke: var(--st-muted); stroke-width: 2; stroke-linecap: round; }
.timer-clock-hand { stroke: var(--st-ink); stroke-width: 4; stroke-linecap: round; }
.timer-clock-hub { fill: var(--st-ink); }
.timer-clock-number { fill: var(--st-ink); font: 600 15px sans-serif; }
.timer-clock-hour-hand { stroke: var(--st-ink); stroke-width: 6; stroke-linecap: round; }
.timer-clock-deadline-marker { stroke: var(--st-terra); fill: var(--st-terra); stroke-width: 2; }
.timer-clock-deadline-marker line { stroke-dasharray: 4 3; }
.timer-clock-times { margin-top: .4rem; color: var(--st-ink); font-size: .95rem; font-variant-numeric: tabular-nums; }
.timer-clock-end-label { color: var(--st-terra); font-weight: 700; }
.timer-tv .timer-clock-times { font-size: 1.25rem; }
.timer-due .timer-clock-ring-fill, .timer-due .timer-clock-step { stroke: var(--st-primary); }
.timer-due .timer-clock-sector { fill: var(--st-wash); }
.timer-tv .timer-board-clock .timer-countdown strong { font-size: clamp(3rem, 7vw, 6rem); }
.timer-tv .timer-clock { width: min(36vh, 26rem); }
.timer-design-picker { border: 0; padding: 0; min-width: 0; }
.timer-design-picker legend { font-size: 1.1rem; font-weight: 700; }
.timer-design-picker p { color: var(--st-muted); font-size: .9rem; margin: .5rem 0 .8rem; }
.timer-design-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.timers-page .timer-design-option { display: flex; position: relative; flex-direction: column; align-items: center; text-align: center; border: 2px solid var(--st-line); border-radius: 1rem; padding: .8rem .4rem; gap: .3rem; cursor: pointer; }
.timer-design-option.selected { border-color: var(--st-primary); background: var(--st-wash); }
.timer-design-option:focus-within { outline: 3px solid var(--st-gold); outline-offset: 3px; }
.timers-page .timer-design-option input[type=radio] { accent-color: var(--st-primary); width: 1.2rem; height: 1.2rem; min-height: 1.2rem; padding: 0; margin: 0; }
.timer-design-preview { display: block; width: 100%; max-width: 8rem; }
.timer-design-preview .timer-clock { width: 100%; margin: .3rem auto; }
.timer-design-option > span:last-child { font-size: .85rem; color: var(--st-muted); }
@media (max-width: 420px) {
    .timer-design-option > span:last-child { display: none; }
    .timer-design-options { gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .elapsed-track > div { transition: none; } }