.clock-grid { margin-top: 20px; }
#world-clock-tool .toolbar .segmented { margin-bottom: 0; }
.clock-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, .9fr); gap: 22px; align-items: center; padding: 24px 0; border-top: 1px solid var(--border, #dee6e1); }
.clock-row > div { min-width: 0; }
.clock-city { margin: 0 0 3px; font-size: 1.1rem; }
.clock-time { margin: 0; font-size: clamp(1.9rem, 3.8vw, 2.75rem); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.06em; overflow-wrap: anywhere; }
.clock-meta { margin: 5px 0 0; font-size: .875rem; color: var(--muted, #617271); overflow-wrap: anywhere; }
.clock-zone { font-size: .8125rem; }
.clock-hours { text-align: right; }
.clock-hours .badge { white-space: normal; text-align: center; }
.clock-customize { margin-top: 12px; font-size: .875rem; }
.clock-customize summary { color: var(--accent, #14685d); cursor: pointer; width: fit-content; padding: 10px 2px; min-height: 44px; }
.clock-customize[open] .field { margin-top: 12px; }
.clock-customize .actions { margin-top: 10px; gap: 4px; }
.clock-customize .button { font-size: .8125rem; padding: 8px 10px; min-height: 44px; }
.clock-customize input { max-width: 100%; }
.clock-summary-bar { padding-top: 20px; border-top: 1px solid var(--border, #dee6e1); }
.clock-summary-bar .actions { margin-top: 0; }
.clock-settings-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 20px; }
.city-search-results { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 5px; }
.city-search-results .button { width: 100%; text-align: left; justify-content: flex-start; font-size: .85rem; }
.outside-hours { background: var(--warning-bg, #fbf0df) !important; color: var(--warning-text, #89591e) !important; }
#clock-compare-form { margin-top: 20px; align-items: end; }
#clock-compare-form .button { align-self: end; }
.countdown-display { text-align: center; }
.countdown-display .toolbar { text-align: left; }
.countdown-display h2 { overflow-wrap: anywhere; }
#countdown-event-title:focus { outline: 2px solid var(--accent, #14685d); outline-offset: 5px; border-radius: 3px; }
.countdown-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px auto 28px; max-width: 780px; gap: 16px; }
.countdown-unit { min-width: 0; }
.countdown-unit > span { display: block; font-size: clamp(2.4rem, 6vw, 4.8rem); letter-spacing: -.055em; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.countdown-unit > small { display: block; margin-top: 9px; font-size: .875rem; color: var(--muted, #617271); }
.countdown-event-time { font-size: .97rem; overflow-wrap: anywhere; }
.countdown-actions { justify-content: center; margin-top: 24px; }
.countdown-help, #countdown-editor { margin-top: 20px; }
#countdown-form > .field { margin-bottom: 18px; }
#countdown-form .actions { margin-top: 20px; }
#countdown-occurrence-field { margin-top: 16px; }
#world-clock-tool [aria-invalid="true"], #countdown-tool [aria-invalid="true"] { border: 2px solid var(--danger, #a43131); }
#world-clock-tool .badge { font-size: .8125rem; }
#countdown-display:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 5vw, 80px); }
#countdown-display:fullscreen .countdown-units { width: 100%; }
@media (max-width: 760px) {
    .clock-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
    .clock-hours { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
    .clock-hours .clock-meta { margin: 0; }
    .clock-settings-grid { grid-template-columns: 1fr; }
    .clock-time { font-size: clamp(1.6rem, 5vw, 2.2rem); }
}
@media (max-width: 460px) {
    .clock-row { grid-template-columns: minmax(0, 1fr); }
    .clock-time { font-size: clamp(1.9rem, 9vw, 2.5rem); }
    .clock-hours { display: block; }
    .clock-hours .clock-meta { margin-top: 7px; }
    .countdown-units { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 25px; margin-top: 26px; }
    .countdown-unit > span { font-size: clamp(1.85rem, 8vw, 3rem); }
}