:root{--bg:#0b0e17;--bg-elev:#141926;--fg:#e8ecf4;--fg-dim:#8b93a7;--accent:#4c8dff;--danger:#ff6b6b;--ok:#34c98e;--border:#232a3d;font-size:16px}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,PingFang SC,Segoe UI,Roboto,Helvetica Neue,sans-serif}.app-header{border-bottom:1px solid var(--border);background:var(--bg);z-index:10;align-items:center;gap:24px;padding:12px 20px;display:flex;position:sticky;top:0}.app-title{margin:0;font-size:18px;font-weight:600}.tabs{gap:4px;display:flex}.tab{color:var(--fg-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 16px;font-size:15px}.tab:hover{color:var(--fg);background:var(--bg-elev)}.tab.active{color:var(--fg);background:var(--bg-elev);font-weight:600}.page{padding:24px 20px;display:none}.page.active{display:block}.clock-display{flex-direction:column;align-items:center;gap:16px;padding-top:8vh;display:flex}.clock-time{letter-spacing:.02em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:clamp(56px,16vw,148px);font-weight:200;line-height:1.1}.clock-date{color:var(--fg-dim);font-size:clamp(15px,2.5vw,20px)}.sync-badge{border:1px solid var(--border);background:var(--bg-elev);color:var(--fg-dim);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:13px}.sync-badge.ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, transparent)}.sync-badge.bad{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent)}.world-layout{grid-template-columns:320px 1fr;align-items:start;gap:20px;display:grid}@media (max-width:860px){.world-layout{grid-template-columns:1fr}}.world-side{flex-direction:column;gap:12px;display:flex}.city-search{position:relative}#city-search-input{background:var(--bg-elev);border:1px solid var(--border);width:100%;color:var(--fg);border-radius:10px;outline:none;padding:10px 12px;font-size:15px}#city-search-input:focus{border-color:var(--accent)}.city-suggestions{background:var(--bg-elev);border:1px solid var(--border);z-index:20;border-radius:10px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden}.city-suggestion{cursor:pointer;justify-content:space-between;padding:10px 12px;font-size:14px;display:flex}.city-suggestion:hover{background:var(--border)}.city-suggestion .tz{color:var(--fg-dim);font-size:12px}.city-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.city-item{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;align-items:center;gap:12px;padding:10px 14px;display:flex}.city-item.hover{border-color:var(--accent)}.city-item .name{flex:none;font-weight:600}.city-item .day{color:var(--fg-dim);flex:auto;font-size:12px}.city-item .time{font-variant-numeric:tabular-nums;font-size:18px;font-weight:300}.city-item .remove{color:var(--fg-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 6px;font-size:16px}.city-item .remove:hover{color:var(--danger);background:var(--border)}.world-map-wrap{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;padding:8px}#world-map{border-radius:8px;width:100%;height:auto;display:block}.sw-display{flex-direction:column;align-items:center;gap:20px;padding-top:4vh;display:flex}.sw-time{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:clamp(48px,13vw,120px);font-weight:200;line-height:1.1}.sw-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn{background:var(--bg-elev);border:1px solid var(--border);color:var(--fg);cursor:pointer;border-radius:10px;padding:10px 22px;font-size:15px}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){filter:brightness(1.1)}.btn.active{border-color:var(--ok);color:var(--ok)}.sw-preview{color:var(--fg-dim);align-items:center;gap:10px;font-size:13px;display:flex}.sw-preview-host{border:1px dashed var(--border);border-radius:8px;justify-content:center;align-items:center;width:160px;height:90px;display:inline-flex;overflow:hidden}.sw-preview-host video{object-fit:cover;width:100%;height:100%;display:block}.pip-debug{background:var(--bg-elev);border:1px solid var(--border);width:min(420px,90vw);color:var(--fg-dim);border-radius:12px;padding:10px 14px;font-size:13px}.pip-debug summary{cursor:pointer;-webkit-user-select:none;user-select:none}.pip-debug pre{white-space:pre-wrap;word-break:break-all;max-height:220px;margin:10px 0;font-size:11px;line-height:1.5;overflow:auto}.pip-debug-actions{gap:8px;display:flex}.btn.small{padding:6px 12px;font-size:13px}.sw-laps{flex-direction:column;gap:6px;width:min(420px,90vw);margin:0;padding:0;list-style:none;display:flex}.sw-laps li{background:var(--bg-elev);border:1px solid var(--border);font-variant-numeric:tabular-nums;border-radius:10px;justify-content:space-between;padding:8px 14px;font-size:14px;display:flex}.sw-laps .lap-no{color:var(--fg-dim)}.pip-float{z-index:1000;background:var(--bg-elev);border:1px solid var(--border);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:14px;padding:14px 18px;position:fixed;bottom:16px;right:16px;box-shadow:0 8px 30px #00000080}.pip-float:active{cursor:grabbing}.pip-float-close{color:var(--fg-dim);cursor:pointer;background:0 0;border:none;font-size:14px;position:absolute;top:4px;right:8px}.pip-stopwatch{text-align:center;padding:12px 8px}.pip-time{font-variant-numeric:tabular-nums;font-size:34px;font-weight:300;line-height:1.2}.pip-state{color:var(--fg-dim);margin-top:4px;font-size:12px}.toast-root{z-index:2000;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-elev);border:1px solid var(--border);color:var(--fg);border-radius:10px;padding:10px 18px;font-size:14px;box-shadow:0 6px 24px #00000073}