/* Clock colors stay independent of the surrounding site's light/dark theme. */
.clock-stage[data-theme="midnight"] {--clock-bg: #020617; --clock-ink: #e0f2fe; --clock-muted: #a5c9e9; --clock-dial: #0f172a; --clock-edge: #4b658c; --clock-ticks: #9db5d5; --clock-numbers: #dbeafe; --clock-accent: #38bdf8;}
.clock-stage[data-theme="graphite"] {--clock-bg: #202124; --clock-ink: #f9fafb; --clock-muted: #d1d5db; --clock-dial: #323438; --clock-edge: #74777e; --clock-ticks: #b6b9c0; --clock-numbers: #e5e7eb; --clock-accent: #fbbf24;}
.clock-stage[data-theme="violet"] {--clock-bg: #24123d; --clock-ink: #faf5ff; --clock-muted: #d8b4fe; --clock-dial: #392154; --clock-edge: #9470ba; --clock-ticks: #c4a2e7; --clock-numbers: #f3e8ff; --clock-accent: #f0abfc;}
.clock-stage[data-theme="sunset"] {--clock-bg: #431d25; --clock-ink: #fff7ed; --clock-muted: #fed7aa; --clock-dial: #60313c; --clock-edge: #c58d77; --clock-ticks: #f2bc9b; --clock-numbers: #ffedd5; --clock-accent: #fbbf24;}
.clock-stage[data-theme="terminal"] {--clock-bg: #071b12; --clock-ink: #86efac; --clock-muted: #a7d9b9; --clock-dial: #102a1b; --clock-edge: #4a8561; --clock-ticks: #8bb99c; --clock-numbers: #bbf7d0; --clock-accent: #bef264;}
.clock-stage[data-theme="terminal"] .time-display-value {font-family: ui-monospace, SFMono-Regular, Consolas, monospace;}
.clock-stage[data-theme="paper"] {--clock-bg: #f6f5f1; --clock-ink: #292d33; --clock-muted: #5b616b; --clock-dial: #fff; --clock-edge: #bbbcb8; --clock-ticks: #737974; --clock-numbers: #39413d; --clock-accent: #b45309; box-shadow: inset 0 0 0 1px #d7d7d0;}

#online-clock .clock-control-grid {grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));}
#online-clock .tool-select {height: auto; min-height: 46px; appearance: none; padding-inline-end: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: right 12px center;}
html[dir="rtl"] #online-clock .tool-select:not([dir="ltr"]) {background-position: left 12px center;}
#online-clock .tool-select[dir="ltr"] {padding-left: 12px; padding-right: 34px; background-position: right 12px center;}
.clock-stage #clock-zone-label {unicode-bidi: plaintext;}
@media (max-width: 760px) {
    #online-clock .clock-control-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
    #online-clock .clock-control-grid > .tool-form-field:first-child {grid-column: 1 / -1;}
}
@media (max-width: 520px) {
    #online-clock .clock-control-grid {grid-template-columns: 1fr;}
}