.clock-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 12px 20px;
    border-bottom: 1px solid #303942;
    background: #11171d;
    flex-wrap: wrap;
}
.clock-face { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.clock-label { color: #78ccec; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.utc-time { color: #f4f8fb; font: 600 30px/1.15 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.utc-date { color: #95a7b6; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.clock-status { font-size: 11px; color: #8da7b8; margin-top: 5px; }
.clock-status[data-state="pending"] { color: #e8bb77; }
.clock-detail { font-size: 12px; color: #cad6df; line-height: 1.65; }
.clock-note { font-size: 11px; color: #91a4b2; }
.clock-note a { color: #78ccec; }
.clock-only { margin: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.clock-only .clock-bar { display: inline-flex; border: 1px solid #303942; border-radius: 8px; background: #11171df5; }
.clock-only .utc-time { font-size: 40px; }
@media (max-width: 600px) {
    .clock-bar { padding: 10px 12px; gap: 8px; }
    .utc-time { font-size: 25px; }
}