/* Countdown to a date - inputs, then a big ticking clock. Colors from theme tokens only. */

.cd-form { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.cd-field { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 14rem; }
.cd-field-label { font-size: 14px; color: var(--muted); font-weight: 600; }

.cd-display {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 28px 20px; text-align: center; margin-bottom: 16px;
}
.cd-heading { font-size: 18px; color: var(--muted); font-weight: 600; margin: 0 0 18px; }

.cd-clock { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cd-unit {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 4.5rem; padding: 14px 10px;
    background: var(--accent-weak); border-radius: 12px;
}
.cd-num {
    font-size: 44px; font-weight: 800; line-height: 1; color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
}
.cd-lbl { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.cd-suffix { margin: 16px 0 0; color: var(--muted); font-size: 15px; min-height: 1.2em; }

.cd-actions { display: flex; gap: 12px; margin-bottom: 8px; }

@media (max-width: 480px) {
    .cd-num { font-size: 34px; }
    .cd-unit { min-width: 3.6rem; }
}