.city-reference-picker{max-width:650px;margin:24px auto 12px;text-align:left;border:1px solid var(--border);border-radius:8px;padding:12px 16px}.city-reference-picker summary{cursor:pointer;min-height:24px;font-size:14px;color:var(--text-secondary)}.city-reference-picker summary strong{color:var(--accent)}.city-reference-picker label{display:block;margin:16px 0 8px;font-size:14px}.city-reference-picker input{width:100%;min-height:46px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:6px;font:inherit;padding:10px 12px}.city-reference-picker p{font-size:12px;line-height:1.6;margin:10px 0 0;color:var(--text-secondary)}.city-reference-results{display:grid;gap:6px;margin-top:8px}.city-reference-results button{text-align:left;white-space:normal}.city-map-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 12px}.city-map-dialog{position:fixed;inset:0;margin:auto;width:min(960px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);overflow:auto}.city-map-dialog::backdrop{background:rgba(3,10,22,.76)}.city-map-dialog header{display:flex;align-items:start;justify-content:space-between;gap:18px}.city-map-dialog h2{font-size:24px;margin:0 0 6px}.city-map-dialog header p{font-size:13px;margin:0;color:var(--text-secondary)}.city-map-dialog #cityMapStatus{font-size:13px;line-height:1.5;margin:14px 0;min-height:20px;color:var(--text-secondary)}#cityMapCanvas{height:min(55dvh,500px);min-height:220px;border-radius:8px;background:var(--bg-alt)}.city-map-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px}.city-map-dialog footer span{font-size:12px;color:var(--text-secondary)}.city-map-dialog .leaflet-container{font-family:inherit;color:#152334}.city-map-dialog .leaflet-control-attribution{font-size:11px;background:#fff;color:#152334}.city-map-dialog .leaflet-control-attribution a{color:#245a96}.city-map-dialog .leaflet-bar a{color:#152334;background:#fff}.city-map-dialog .leaflet-tooltip{color:#152334;background:white;border-color:#245a96}.city-map-dialog :focus-visible,.city-reference-picker :focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:600px){.city-map-dialog{padding:16px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.city-map-dialog h2{font-size:20px}.city-map-dialog header{gap:10px}.city-map-dialog header button{padding-inline:12px}.city-map-dialog footer .btn{width:100%;white-space:normal}.city-map-actions .btn{flex:1;white-space:normal;text-align:center}.city-reference-picker{margin-top:20px}}
.city-clock-focus{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:80px max(16px,env(safe-area-inset-right)) 24px;border:0;background:var(--bg);color:var(--text);overflow:auto}
.city-clock-focus::backdrop{background:var(--bg)}
.city-clock-focus:fullscreen{height:100%;width:100%}
.city-focus-surface{height:100%;background:var(--bg);color:var(--text)}
.city-focus-surface:fullscreen{width:100%;height:100%;padding:80px max(16px,env(safe-area-inset-right)) 24px;background:var(--bg);color:var(--text);overflow:auto}
.city-focus-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));min-height:48px;display:flex;gap:12px;align-items:center;font-size:15px}
.city-focus-close span{font-size:24px;line-height:1}
.city-focus-content{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;text-align:center}
.city-focus-content h2{font-family:inherit;font-size:clamp(20px,3vw,40px);line-height:1.2;margin:0;overflow-wrap:anywhere}
.city-focus-time{font-size:min(25vw,32dvh);font-weight:500;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.city-focus-time .clock-seconds-part{font-size:.4em;letter-spacing:-.02em;color:var(--accent)}
.city-focus-date{font-size:clamp(15px,2.1vw,30px);line-height:1.4;color:var(--text-secondary);margin:0}
@media(max-height:420px){.city-clock-focus,.city-focus-surface:fullscreen{padding-top:64px;padding-bottom:12px}.city-focus-content{gap:8px}.city-focus-content h2{font-size:20px}.city-focus-date{font-size:16px}}