:root{--world-clocks-height:calc(48px + env(safe-area-inset-bottom,0px))}
body.has-world-clocks{padding-bottom:var(--world-clocks-height)}
body.has-world-clocks>.workspace,body.has-world-clocks>.login-page,body.has-world-clocks>.boot{min-height:calc(100dvh - var(--world-clocks-height))}
.has-world-clocks .toast{bottom:calc(20px + var(--world-clocks-height))}
body .world-clocks{position:fixed;inset:auto 0 0;z-index:20;height:var(--world-clocks-height);box-sizing:border-box;padding:8px 24px calc(8px + env(safe-area-inset-bottom,0px));margin:0;border-top:1px solid var(--cx-line,#485145);background:var(--cx-surface,#272e28);color:var(--cx-ink,#f2f5ee);font-family:Inter,'Segoe UI',Arial,sans-serif;box-shadow:0 -2px 12px #00000004}
.world-clocks-inner{height:100%;max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:22px}
.world-clocks-heading{display:none}
.world-clocks-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;min-width:0;height:100%}
.world-clocks .world-clock{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;min-width:0;padding:0 7px;border-left:1px solid var(--cx-line,#485145);border-radius:3px;outline-offset:1px}
.world-clocks .world-clock:first-child{border-left:0}
.world-clocks .world-clock-name{font-size:11px;line-height:1.2;color:var(--cx-muted,#b8c3b2);white-space:nowrap}
.world-clock-name .clock-short-name{display:none}
.world-clocks .world-clock-time{font-size:14px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--cx-ink,#f2f5ee)}
.world-clocks .world-clock.is-home .world-clock-time{color:var(--cx-accent,#c5ee8a)}
.world-clocks .world-clock-date{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:7px 9px;white-space:nowrap;background:var(--cx-ink,#f2f5ee);color:var(--cx-bg,#1b201c);border-radius:7px;font-size:11px;line-height:1.3;pointer-events:none;visibility:hidden;box-shadow:0 4px 12px #0002}
.world-clock:hover .world-clock-date,.world-clock:focus .world-clock-date{visibility:visible}
.world-clock:focus-visible{outline:2px solid var(--cx-accent,#c5ee8a)}
@media(min-width:781px){.has-world-clocks .sidebar{height:calc(100dvh - var(--world-clocks-height))}}
@media(max-width:960px){body .world-clocks{padding-inline:12px}.world-clocks .world-clock{gap:6px;padding-inline:4px}.world-clock-name .clock-full-name{display:none}.world-clock-name .clock-short-name{display:inline}}
@media(max-width:760px){:root{--world-clocks-height:calc(74px + env(safe-area-inset-bottom,0px))}body .world-clocks{padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px))}.world-clocks-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}.world-clocks .world-clock:nth-child(3n+1){border-left:0}.world-clocks .world-clock{gap:6px;padding-inline:3px}.world-clocks .world-clock-time{font-size:13px}}
@media(max-width:355px){body .world-clocks{padding-inline:7px}.world-clocks .world-clock-name{font-size:10px}.world-clocks .world-clock{gap:5px}}
@media print{body.has-world-clocks{padding-bottom:0}body .world-clocks{display:none}}