.world-clock.shell { width: calc(100% - 40px); max-width: 640px; margin: 32px auto 48px; padding: 22px 24px; border: 1px solid #49304e; border-radius: 20px; background: #211024; text-align: center; box-sizing: border-box; }
.world-clock h2 { margin: 0 0 5px; font: 700 20px Georgia, serif; color: #f4eaf4; }
.world-clock .clock-place, .world-clock .clock-date { color: #c5b4c7; font-size: 12px; }
.world-clock time { display: block; margin: 9px 0 5px; font: 500 clamp(30px, 5vw, 38px)/1.15 system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .025em; color: #f4cc79; }
.clock-countries { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #49304e; }
.clock-countries button { display: grid; justify-items: center; gap: 4px; min-width: 48px; min-height: 44px; padding: 6px 8px; border: 1px solid #49304e; border-radius: 9px; background: transparent; color: #e7dce9; cursor: pointer; font: 500 10px system-ui, sans-serif; }
.clock-countries svg { width: 24px; height: 16px; border-radius: 2px; overflow: hidden; }
.clock-countries button[aria-pressed="true"] { border-color: #f4cc79; background: #38233b; }
.clock-countries button:focus-visible { outline: 3px solid #f4cc79; outline-offset: 3px; }
html[data-theme="light"] .world-clock { background: #fffafc; border-color: #dfd0e1; }
html[data-theme="light"] .world-clock h2 { color: #32142d; }
html[data-theme="light"] .world-clock time { color: #754e16; }
html[data-theme="light"] .world-clock .clock-place, html[data-theme="light"] .world-clock .clock-date { color: #745f6e; }
html[data-theme="light"] .clock-countries button { color: #382a3b; border-color: #dfd0e1; }
html[data-theme="light"] .clock-countries button[aria-pressed="true"] { background: #fff0d4; border-color: #a87826; }
html[data-theme="light"] .clock-countries { border-top-color: #e9dfe9; }
@media (max-width: 600px) { .world-clock.shell { margin-top: 24px; padding: 18px 14px; } .clock-countries { gap: 6px; } .clock-countries button { min-width: 48px; } }