/* /countdown-timer only: the countdown face and its full-screen state. Scoped under #cdtApp. */
#cdtApp .cdt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
#cdtApp .cdt-grid .is-wide { grid-column: 1 / -1; }
#cdtApp .cdt-face { padding: 18px 14px; border-radius: 16px; background: var(--bm-accent-soft); text-align: center; }
#cdtApp .cdt-title { margin: 0 0 10px; font-weight: 800; font-size: 1.15rem; color: var(--bm-ink); overflow-wrap: anywhere; }
#cdtApp .cdt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#cdtApp .cdt-tile { background: var(--bm-surface); border: 1px solid var(--bm-line); border-radius: 12px; padding: 10px 4px; min-width: 0; }
#cdtApp .cdt-tile strong { display: block; font-size: clamp(1.5rem, 7vw, 2.6rem); line-height: 1.1; color: var(--bm-accent-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#cdtApp .cdt-tile span { font-size: .78rem; color: var(--bm-ink-3); text-transform: uppercase; letter-spacing: .04em; }
#cdtApp .cdt-when { margin: 10px 0 0; color: var(--bm-ink-2); font-size: .9rem; }
#cdtApp .cdt-face.is-done .cdt-tile strong { color: var(--ic-ok); }
#cdtApp .cdt-exit { margin-top: 16px; }
#cdtApp .cdt-face:fullscreen, #cdtApp .cdt-face.is-full { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; justify-content: center; border-radius: 0; padding: 24px; background: var(--bm-bg); }
#cdtApp .cdt-face:fullscreen .cdt-tile strong, #cdtApp .cdt-face.is-full .cdt-tile strong { font-size: clamp(2.4rem, 11vw, 9rem); }
#cdtApp .cdt-face:fullscreen .cdt-title, #cdtApp .cdt-face.is-full .cdt-title { font-size: clamp(1.4rem, 4vw, 3rem); }
#cdtApp .cdt-face:fullscreen .cdt-tiles, #cdtApp .cdt-face.is-full .cdt-tiles { max-width: 1400px; width: 100%; margin: 0 auto; }
@media (forced-colors: active) { #cdtApp .cdt-tile { border: 1px solid CanvasText; } }