* { margin: 0px; padding: 0px; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", sans-serif; background: rgb(13, 13, 26); }
body.no-transition, body.no-transition * { transition: none !important; }
button:focus, button:focus-visible, .mapboxgl-canvas:focus, .mapboxgl-canvas:focus-visible, .mapboxgl-map:focus, .mapboxgl-map:focus-visible { outline: none; }
.mapboxgl-user-location-dot::before { display: none; }
.side-panel { position: absolute; top: 0px; left: 0px; bottom: 0px; width: var(--panel-width, 280px); background: rgb(19, 22, 30); backdrop-filter: blur(20px); border-right: 1px solid rgba(255, 255, 255, 0.08); z-index: 20; display: flex; flex-direction: column; transition: transform 0.25s, opacity 0.25s; overflow: hidden auto; }
.side-panel.collapsed { transform: translate(-100%); opacity: 0; pointer-events: none; }
.panel-resize-handle { position: absolute; top: 0px; bottom: 0px; left: calc(var(--panel-width, 280px) - 3px); width: 6px; cursor: ew-resize; z-index: 25; background: transparent; }
.panel-resize-handle:hover, .panel-resize-handle.dragging { background: rgba(65, 139, 185, 0.4); }
body.panel-resizing, body.panel-resizing * { cursor: ew-resize !important; user-select: none !important; }
body.panel-resizing .pane-container, body.panel-resizing .side-panel, body.panel-resizing #timeline, body.panel-resizing .outlook-bar { transition: none !important; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.panel-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.account-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0px 10px 0px 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: rgb(255, 255, 255); cursor: pointer; transition: background 0.15s, border-color 0.15s; min-width: 0px; max-width: 100%; }
.account-chip:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); }
.account-chip-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, rgb(31, 111, 182), rgb(24, 73, 160)); display: inline-flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; padding-top: 1px; box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset; flex: 0 0 24px; overflow: hidden; }
.account-chip-brand-logo { width: 26px; height: 26px; object-fit: contain; display: block; flex: 0 0 26px; }
.account-chip-label { font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; }
.account-chip-caret { color: rgba(255, 255, 255, 0.45); flex: 0 0 10px; }
.panel-gear-btn { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgb(136, 136, 136); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.panel-gear-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); color: rgb(204, 204, 204); }
.panel-gear-btn.active { background: transparent; border-color: rgba(143, 184, 220, 0.5); color: rgb(143, 184, 220); }
.panel-close-btn { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgb(136, 136, 136); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.panel-close-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255); }
.user-menu { position: absolute; top: 48px; right: 12px; background: rgba(24, 26, 32, 0.97); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 6px; min-width: 200px; z-index: 100; backdrop-filter: blur(20px); box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 32px; }
.user-menu-header { padding: 10px 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 4px; }
.user-menu-name { font-size: 13px; font-weight: 600; color: rgb(255, 255, 255); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-email { font-size: 11px; color: rgb(102, 102, 102); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.user-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; color: rgb(170, 170, 170); font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; text-align: left; }
.user-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); }
.user-menu-item.danger { color: rgb(248, 113, 113); }
.user-menu-item.danger:hover { background: rgba(248, 113, 113, 0.1); color: rgb(248, 113, 113); }
.user-menu-login { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: transparent; border: 1px solid rgba(143, 184, 220, 0.5); border-radius: 8px; color: rgb(143, 184, 220); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.user-menu-login:hover { background: rgba(143, 184, 220, 0.08); border-color: rgba(143, 184, 220, 0.7); }
.user-menu-note { padding: 8px 10px 6px; font-size: 11px; color: rgb(85, 85, 85); line-height: 1.4; }
.user-menu-orgs { padding: 4px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 2px; }
.user-menu-orgs-label { padding: 4px 10px; font-size: 10px; font-weight: 600; color: rgb(85, 85, 85); text-transform: uppercase; letter-spacing: 0.6px; }
.user-menu-org { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 10px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; cursor: pointer; text-align: left; transition: background 0.15s; }
.user-menu-org:hover { background: rgba(255, 255, 255, 0.08); }
.user-menu-org.active { background: rgba(65, 139, 185, 0.08); }
.user-menu-org-name { font-size: 12px; font-weight: 500; color: rgb(187, 187, 187); }
.user-menu-org.active .user-menu-org-name { color: rgb(65, 139, 185); font-weight: 600; }
.user-menu-org.active svg { color: rgb(65, 139, 185); }
.sidebar-tabs-group { display: flex; flex-direction: column; gap: 0px; padding: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.sidebar-tabs-row { display: flex; gap: 0px; }
.sidebar-tabs-row + .sidebar-tabs-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.sidebar-tabs-row .sidebar-tab { flex: 1 1 0%; flex-direction: column; gap: 0px; line-height: 1.1; white-space: normal; text-align: center; padding-top: 6px; padding-bottom: 6px; min-height: 35px; justify-content: center; }
.sidebar-tabs { display: flex; padding: 8px 12px; gap: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow-x: auto; scrollbar-width: none; }
.sidebar-tabs::-webkit-scrollbar { display: none; }
.sidebar-tab { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 11px 8px; background: none; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; border-radius: 0px; color: rgb(170, 176, 184); font-size: 11px; font-weight: 600; cursor: pointer; outline: none; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; }
.sidebar-tab:hover { background: rgba(255, 255, 255, 0.04); color: rgb(228, 231, 235); }
.sidebar-tab.active { background: transparent; border-bottom: 2px solid rgb(65, 139, 185); color: rgb(240, 242, 245); }
.sidebar-tab.compact { flex-direction: column; gap: 0px; line-height: 1.2; }
.sidebar-tab-sub { display: block; font-size: 10px; font-weight: 500; opacity: 0.85; margin-left: 0px; line-height: 1.1; }
.broadcast-overlays-panel { flex: 1 1 0%; overflow-y: auto; padding: 0px 0px 14px; color: rgb(221, 227, 238); }
.broadcast-overlays-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px; }
.broadcast-overlay-modes-card { background: rgba(255, 255, 255, 0.043); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 8px 10px 4px; margin: 8px 10px 12px; }
.broadcast-overlay-modes-header { font-size: 11px; font-weight: 700; color: rgb(143, 154, 170); text-transform: uppercase; letter-spacing: 0.9px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 8px; }
.broadcast-overlay-modes-header .settings-link-btn { margin-left: auto; }
.broadcast-overlay-mode-list { margin-top: 0px; }
.broadcast-reset-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(102, 102, 102); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; transition: 0.15s; }
.broadcast-reset-btn:hover { color: rgb(170, 170, 170); background: rgba(255, 255, 255, 0.06); }
.broadcast-master-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; margin: 0px 10px 6px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.broadcast-master-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.broadcast-master-label { font-size: 11px; font-weight: 600; color: rgb(136, 136, 136); text-transform: uppercase; letter-spacing: 0.5px; }
.broadcast-toggle { width: 38px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, 0.15); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; position: relative; transition: background 0.2s; flex-shrink: 0; padding: 0px; }
.broadcast-toggle.on { background: rgb(65, 139, 185); }
.broadcast-toggle-knob { width: 18px; height: 18px; border-radius: 50%; background: rgb(255, 255, 255); position: absolute; top: 2px; left: 2px; transition: 0.2s; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px; }
.broadcast-toggle.on .broadcast-toggle-knob { transform: translate(16px); background: rgb(255, 255, 255); }
.broadcast-overlay-list { padding: 0px 10px; }
.broadcast-overlay-item { border-radius: 8px; margin-bottom: 4px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.broadcast-overlay-item.expanded { background: rgba(255, 255, 255, 0.043); border-color: rgba(255, 255, 255, 0.075); }
.broadcast-overlay-row { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; }
.broadcast-overlay-expand { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(141, 150, 168); cursor: pointer; padding: 2px; display: flex; align-items: center; flex-shrink: 0; }
.broadcast-overlay-expand.hidden { opacity: 0; cursor: default; }
.broadcast-overlay-item.enabled .broadcast-overlay-expand { color: rgb(177, 186, 200); }
.broadcast-overlay-info { flex: 1 1 0%; min-width: 0px; }
.broadcast-overlay-name { font-size: 13px; font-weight: 600; color: rgb(168, 176, 189); transition: color 0.15s; }
.broadcast-overlay-item.enabled .broadcast-overlay-name { color: rgb(228, 232, 239); }
.broadcast-overlay-settings { padding: 2px 10px 12px 28px; }
.broadcast-overlay-desc { font-size: 10px; color: rgb(102, 102, 102); line-height: 1.4; margin-bottom: 10px; }
.broadcast-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 6px 0px; margin-bottom: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
.broadcast-setting-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.broadcast-setting-label { font-size: 12px; font-weight: 600; color: rgb(215, 220, 229); letter-spacing: 0.05px; }
.broadcast-position-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 72px; }
.broadcast-position-btn { width: 22px; height: 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0px; transition: 0.15s; }
.broadcast-position-btn:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.2); }
.broadcast-position-btn.active { background: rgba(65, 139, 185, 0.26); border-color: rgba(65, 139, 185, 0.58); }
.broadcast-position-dot { width: 4px; height: 4px; border-radius: 50%; background: rgb(138, 148, 164); }
.broadcast-position-btn.active .broadcast-position-dot { background: rgb(65, 139, 185); }
.broadcast-setting-row.slider-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 7px 0px 9px; }
.broadcast-slider-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.broadcast-slider-group { display: flex; align-items: center; gap: 8px; }
.broadcast-slider { flex: 1 1 0%; height: 6px; appearance: none; background: rgba(255, 255, 255, 0.15); border-radius: 999px; outline: none; cursor: pointer; }
.broadcast-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); background: rgb(65, 139, 185); cursor: pointer; }
.broadcast-slider-value { font-size: 12px; font-weight: 600; color: rgb(65, 139, 185); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.broadcast-hint { padding: 12px 14px; font-size: 10px; color: rgb(85, 85, 85); line-height: 1.4; border-top: 1px solid rgba(255, 255, 255, 0.04); margin-top: 8px; }
.broadcast-map-overlays { pointer-events: none; z-index: 6; }
.broadcast-overlay { position: absolute; background: rgba(10, 12, 18, 0.75); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: rgb(224, 224, 224); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; }
.broadcast-data-readout { display: inline-flex; align-items: stretch; padding: 0px; border-radius: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; overflow: hidden; background: none; }
.broadcast-data-readout-logo { flex-shrink: 0; }
.broadcast-logo-badge { width: 60px; align-self: stretch; display: flex; align-items: center; justify-content: center; background: rgba(12, 14, 24, 0.96); position: relative; }
.broadcast-logo-badge::after { content: ""; position: absolute; right: 0px; top: 6px; bottom: 6px; width: 2px; background: rgba(0, 150, 255, 0.8); }
.broadcast-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.broadcast-data-readout-content { display: flex; flex-direction: column; min-width: 0px; }
.broadcast-data-readout-top { display: flex; align-items: center; padding: 0px 20px 0px 14px; flex: 1 1 0%; background: rgba(10, 12, 22, 0.96); }
.broadcast-data-readout-product { font-size: 22px; font-weight: 800; color: rgb(255, 255, 255); letter-spacing: 0.8px; line-height: 1; white-space: nowrap; }
.broadcast-data-readout-bottom { display: flex; align-items: center; padding: 0px 20px 0px 14px; height: 24px; background: rgba(40, 48, 68, 0.94); }
.broadcast-data-readout-time { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; width: 180px; }
.broadcast-data-readout-time.has-tz { width: 215px; }
.broadcast-data-readout::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 2px; background: linear-gradient(90deg, rgb(0, 140, 255), rgba(0, 80, 200, 0.6), transparent); }
.broadcast-sleek-readout { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: rgba(8, 10, 18, 0.92); backdrop-filter: blur(12px); box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 20px; }
.broadcast-sleek-accent { height: 3px; background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 102, 221) 40%, rgb(68, 0, 204)); }
.broadcast-sleek-main { display: flex; align-items: center; padding: 10px 0px 10px 20px; gap: 0px; }
.broadcast-sleek-product-col { display: flex; flex-direction: column; gap: 2px; padding-right: 18px; }
.broadcast-sleek-product { font-size: 20px; font-weight: 800; color: rgb(255, 255, 255); letter-spacing: 1px; line-height: 1.1; white-space: nowrap; }
.broadcast-sleek-source { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); letter-spacing: 1.5px; text-transform: uppercase; }
.broadcast-sleek-sep { width: 1px; align-self: stretch; margin: 2px 0px; background: rgba(255, 255, 255, 0.12); }
.broadcast-sleek-time-col { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0px 20px 0px 18px; }
.broadcast-sleek-clock { font-size: 20px; font-weight: 700; color: rgb(255, 255, 255); white-space: nowrap; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; width: 104px; text-align: center; }
.broadcast-sleek-clock.has-tz { width: 142px; }
.broadcast-sleek-date { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.65); white-space: nowrap; letter-spacing: 0.3px; font-variant-numeric: tabular-nums; }
.broadcast-sleek-region-wrap { display: flex; align-items: center; max-width: 0px; opacity: 0; overflow: hidden; transition: max-width 0.35s ease-in-out, opacity 0.35s ease-in-out; }
.broadcast-sleek-region-wrap.visible { max-width: 300px; opacity: 1; }
.broadcast-sleek-region-col { display: flex; align-items: center; padding: 0px 20px 0px 18px; white-space: nowrap; }
.broadcast-sleek-region { font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, 0.85); letter-spacing: 2px; white-space: nowrap; }
.broadcast-sleek-colorbar { height: 8px; width: 100%; }
.broadcast-style-select { min-width: 128px; height: 30px; padding: 0px 30px 0px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%) calc(100% - 16px) 12px / 6px 6px no-repeat, linear-gradient(135deg, rgba(255, 255, 255, 0.72) 50%, transparent 50%) calc(100% - 11px) 12px / 6px 6px no-repeat, rgba(255, 255, 255, 0.08); color: rgb(65, 139, 185); font-size: 12px; font-weight: 600; outline: none; cursor: pointer; appearance: none; transition: border-color 0.15s, background-color 0.15s; }
.broadcast-style-select:hover { border-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.1); }
.broadcast-style-select:focus { border-color: rgba(65, 139, 185, 0.5); }
.broadcast-style-select option { background: rgb(26, 26, 46); color: rgb(255, 255, 255); }
.broadcast-camera-viewer { padding: 0px; border-radius: 4px; border: 1px solid rgba(76, 168, 220, 0.48); background: linear-gradient(rgba(3, 5, 10, 0.98), rgba(7, 10, 17, 0.96)); box-shadow: rgba(0, 0, 0, 0.58) 0px 18px 42px, rgba(0, 0, 0, 0.82) 0px 0px 0px 2px, rgba(255, 255, 255, 0.08) 0px 1px inset; overflow: hidden; pointer-events: auto; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.broadcast-camera-viewer::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 34px; height: 34px; border-right: 3px solid rgba(75, 188, 255, 0.92); border-bottom: 3px solid rgba(75, 188, 255, 0.92); pointer-events: none; }
.broadcast-camera-viewer.compact .broadcast-camera-media-wrap { padding-bottom: 8px; }
.broadcast-camera-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 9px 14px; background: radial-gradient(circle at 10% 0%, rgba(32, 183, 164, 0.14), transparent 38%), rgba(2, 4, 9, 0.98); cursor: move; user-select: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.broadcast-camera-title-group { min-width: 0px; display: flex; flex-direction: column; gap: 5px; }
.broadcast-camera-title-row { min-width: 0px; display: flex; align-items: center; gap: 10px; }
.broadcast-camera-live { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0px 10px 1px; border-radius: 3px; background: linear-gradient(rgb(234, 61, 40), rgb(169, 31, 20)); border: 1px solid rgba(255, 157, 137, 0.54); color: rgb(255, 255, 255); font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 1.3px; box-shadow: rgba(226, 45, 30, 0.26) 0px 0px 14px; }
.broadcast-camera-title { min-width: 0px; color: rgb(255, 255, 255); font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.55) 0px 1px 0px; }
.broadcast-camera-subrow { min-width: 0px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.broadcast-camera-location { color: rgb(87, 191, 245); font-size: 12px; font-weight: 850; line-height: 1; letter-spacing: 1.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broadcast-camera-header-tabs { display: flex; align-items: center; gap: 5px; }
.broadcast-camera-header-tabs button { min-width: 27px; height: 27px; padding: 0px 7px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; background: rgba(12, 21, 32, 0.52); color: rgba(239, 247, 255, 0.88); font-size: 12px; font-weight: 900; line-height: 1; cursor: pointer; }
.broadcast-camera-header-tabs button.active { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.94); color: rgb(37, 50, 68); }
.broadcast-camera-header-tabs button:disabled { opacity: 0.42; cursor: default; }
.broadcast-camera-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.broadcast-camera-action { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(83, 168, 224, 0.32); background: rgba(8, 19, 31, 0.76); color: rgb(116, 207, 255); font-size: 15px; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; }
.broadcast-camera-action:hover { border-color: rgba(100, 205, 255, 0.62); background: rgba(24, 48, 70, 0.82); color: rgb(199, 240, 255); }
.broadcast-camera-media-wrap { position: relative; background: rgb(3, 5, 9); border-top: 1px solid rgba(255, 255, 255, 0.04); }
.broadcast-camera-media { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: min(58vh, 620px); object-fit: contain; background: rgb(3, 5, 9); border: 0px; }
.broadcast-camera-viewer.expanded .broadcast-camera-media { max-height: min(calc(100vh - 124px - (var(--wf-camera-expanded-margin-y, 32px) * 2)),900px); }
.broadcast-camera-empty { min-height: 230px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 20px; box-sizing: border-box; color: rgba(232, 241, 252, 0.78); text-align: center; font-size: 13px; font-weight: 650; line-height: 1.35; }
.broadcast-camera-status { position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 24px); padding: 6px 9px; border-radius: 4px; background: rgba(3, 6, 10, 0.78); color: rgba(239, 247, 255, 0.9); font-size: 12px; font-weight: 700; line-height: 1.2; }
.broadcast-camera-provider-link { color: rgb(117, 214, 255); font-weight: 800; text-decoration: none; }
.broadcast-camera-provider-link:hover { color: rgb(199, 241, 255); text-decoration: underline; }
.chaser-stream-viewer { max-width: calc(-32px + 100vw); background: rgba(20, 22, 28, 0.97); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px; overflow: hidden; pointer-events: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: rgb(255, 255, 255); }
.chaser-stream-resize-grip { position: absolute; right: 0px; bottom: 0px; width: 18px; height: 18px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0.35) 62%, transparent 62%, transparent 70%, rgba(255, 255, 255, 0.35) 70%, rgba(255, 255, 255, 0.35) 77%, transparent 77%); }
.chaser-stream-resize-grip:hover { background: linear-gradient(135deg, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.55) 62%, transparent 62%, transparent 70%, rgba(255, 255, 255, 0.55) 70%, rgba(255, 255, 255, 0.55) 77%, transparent 77%); }
.chaser-stream-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(12, 14, 18, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.08); cursor: move; user-select: none; }
.chaser-stream-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: rgb(42, 44, 48); border: 1px solid rgba(255, 255, 255, 0.1); }
.chaser-stream-titles { min-width: 0px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.chaser-stream-name { font-size: 13px; font-weight: 700; color: rgb(255, 255, 255); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chaser-stream-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chaser-stream-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgb(255, 59, 48); box-shadow: rgba(255, 59, 48, 0.6) 0px 0px 6px; }
.chaser-stream-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.chaser-stream-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: rgba(255, 255, 255, 0.85); font-size: 14px; line-height: 1; cursor: pointer; }
.chaser-stream-action:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.chaser-stream-media-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: rgb(0, 0, 0); }
.chaser-stream-media { width: 100%; height: 100%; display: block; object-fit: contain; }
.chaser-stream-status { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.55); pointer-events: none; }
@property --wf-style3-edge-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.broadcast-warning-banner { display: flex; flex-direction: column; padding: 0px; border-radius: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; overflow: hidden; background: rgba(10, 12, 22, 0.96); min-width: 320px; max-width: 460px; pointer-events: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 24px, rgba(0, 0, 0, 0.3) 0px 0px 12px; }
.broadcast-warning-banner-style3 { position: absolute; border-radius: 8px; clip-path: inset(0px round 8px); border: 1px solid color-mix(in srgb,var(--wf-wb-accent, #ff5252) 48%,rgba(255,255,255,.18)); box-shadow: inset 0 1px #ffffff21,inset 0 -1px #00000080,0 0 0 1px #0000006b,0 10px 30px #00000085,0 0 12px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 18%,transparent); }
.broadcast-warning-banner-style4 { position: absolute; min-width: 360px; max-width: 430px; border-radius: 8px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--wf-wb-accent, #ff5252) 62%,rgba(255,255,255,.34)); background: radial-gradient(circle at 18% 10%,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 92%,#ffffff 8%) 0%,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 58%,transparent) 34%,transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 76%,#12060a),color-mix(in srgb,var(--wf-wb-accent, #ff5252) 58%,#12080f) 45%,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 24%,#070912)); box-shadow: inset 0 1px #ffffff2e,inset 0 -18px 42px #0000006b,0 10px 30px #0000008a,0 0 18px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 34%,transparent); }
.broadcast-warning-banner-style3::before { content: ""; position: absolute; inset: 0px; z-index: 2; padding: 3px; pointer-events: none; background: conic-gradient(from calc(var(--wf-style3-edge-a) - 9deg) at 50% 50%,transparent 0deg,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 10%,transparent) 5deg,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 88%,#ffffff) 9deg,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 16%,transparent) 14deg,transparent 20deg,transparent 360deg); filter: drop-shadow(0 0 7px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 34%,transparent)); opacity: 0.82; clip-path: inherit; mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); animation: 6.8s linear 0s infinite normal none running wb-style3-edge-race; }
.broadcast-warning-banner-style3::after { content: ""; position: absolute; inset: 2px; z-index: 1; border-radius: 6px; pointer-events: none; border: 1px solid color-mix(in srgb,var(--wf-wb-accent, #ff5252) 32%,rgba(255,255,255,.2)); box-shadow: rgba(255, 255, 255, 0.1) 0px 1px inset, rgba(0, 0, 0, 0.52) 0px -1px inset; }
@keyframes wb-style3-edge-race { 
  0% { --wf-style3-edge-a: 0deg; }
  100% { --wf-style3-edge-a: 360deg; }
}
.broadcast-wb-accent { height: 3px; width: 100%; background: var(--wf-wb-accent, #ff5252); box-shadow: 0 0 8px var(--wf-wb-accent, #ff5252),0 1px 4px var(--wf-wb-accent, #ff5252); animation: 2.5s ease-in-out 0s infinite normal none running wb-accent-pulse; }
.broadcast-warning-banner-style3 .broadcast-wb-accent { height: 3px; background: linear-gradient(90deg,transparent 0%,var(--wf-wb-accent, #ff5252) 12%,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 78%,#ffffff) 50%,var(--wf-wb-accent, #ff5252) 88%,transparent 100%); box-shadow: 0 0 10px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 45%,transparent); animation: auto ease 0s 1 normal none running none; }
.broadcast-warning-banner-style4 .broadcast-wb-accent { height: 4px; background: linear-gradient(90deg,#fffffff2,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 68%,#ffffff),#ffffff61); box-shadow: 0 0 14px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 58%,transparent); animation: auto ease 0s 1 normal none running none; }
@keyframes wb-accent-pulse { 
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--wf-wb-accent, #ff5252),0 1px 4px var(--wf-wb-accent, #ff5252); }
  50% { opacity: 0.7; box-shadow: 0 0 14px var(--wf-wb-accent, #ff5252),0 1px 8px var(--wf-wb-accent, #ff5252); }
}
.broadcast-wb-title-row { display: flex; align-items: flex-start; padding: 14px 18px 8px; background: rgba(10, 12, 22, 0.96); }
.broadcast-wb-title { min-width: 0px; font-size: 22px; font-weight: 800; letter-spacing: 0.8px; line-height: 1.15; }
.broadcast-wb-close { position: absolute; top: 6px; right: 6px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0px; border-radius: 50%; background: rgba(0, 0, 0, 0.14); color: rgba(255, 255, 255, 0.42); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; pointer-events: auto; }
.broadcast-wb-close:hover, .broadcast-wb-close:focus-visible { background: rgba(0, 0, 0, 0.34); color: rgba(255, 255, 255, 0.86); outline: none; }
.broadcast-warning-banner-style3 .broadcast-wb-title { filter: brightness(.98) drop-shadow(0 0 4px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 16%,transparent)); animation: 4.4s ease-in-out 0s infinite normal none running wb-style3-title-pulse; }
@keyframes wb-style3-title-pulse { 
  0%, 100% { opacity: 0.97; filter: brightness(.99) drop-shadow(0 0 4px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 16%,transparent)); }
  50% { opacity: 1; filter: brightness(1.08) drop-shadow(0 0 10px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 36%,transparent)); }
}
.broadcast-warning-banner-style4 .broadcast-wb-title-row { padding: 18px 22px 8px; background: transparent; }
.broadcast-warning-banner-style4 .broadcast-wb-title { color: rgb(255, 255, 255); font-size: 25px; font-weight: 900; letter-spacing: 1.3px; line-height: 1.02; text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 8px, rgba(255, 255, 255, 0.12) 0px 0px 18px; }
.broadcast-wb-expires { padding: 0px 18px 10px; background: rgba(10, 12, 22, 0.96); }
.broadcast-wb-expires-label { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.55); letter-spacing: 1px; display: block; margin-bottom: 5px; }
.broadcast-wb-progress { height: 3px; width: 100%; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.broadcast-wb-progress-fill { height: 100%; border-radius: 2px; transition: width 1s linear; }
.broadcast-warning-banner-style3 .broadcast-wb-progress { position: relative; overflow: visible; }
.broadcast-warning-banner-style4 .broadcast-wb-progress { position: relative; height: 4px; overflow: visible; background: rgba(0, 0, 0, 0.28); box-shadow: rgba(255, 255, 255, 0.035) 0px 0px 0px 1px inset; }
.broadcast-warning-banner-style3 .broadcast-wb-progress-streak-clip, .broadcast-warning-banner-style4 .broadcast-wb-progress-streak-clip { position: absolute; inset: 50% auto auto 0px; height: 14px; overflow: hidden; pointer-events: none; transform: translateY(-50%); }
.broadcast-warning-banner-style3 .broadcast-wb-progress-streak { position: absolute; top: 50%; left: -58px; width: calc(100% + 58px); height: 3px; border-radius: 2px; pointer-events: none; transform: translate3d(0px, -50%, 0px); animation: 3.8s linear 0s infinite normal none running wb-style3-progress-streak; opacity: 0.96; will-change: transform, opacity; }
.broadcast-warning-banner-style4 .broadcast-wb-progress-streak { position: absolute; top: 50%; left: -58px; width: calc(100% + 58px); height: 3px; border-radius: 2px; pointer-events: none; transform: translate3d(0px, -50%, 0px); animation: 3.8s linear 0s infinite normal none running wb-style3-progress-streak; opacity: 0.98; will-change: transform, opacity; }
.broadcast-warning-banner-style3 .broadcast-wb-progress-streak::before { content: ""; position: absolute; inset: 0px auto 0px 0px; width: 58px; border-radius: 2px; background: linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 62%,#ffffff) 12px,#ffffff 28px,#ffffff 36px,rgba(255,255,255,.62) 46px,transparent 58px); box-shadow: 0 0 3px #ffffffa3,0 0 7px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 38%,transparent); }
.broadcast-warning-banner-style4 .broadcast-wb-progress-streak::before { content: ""; position: absolute; inset: 0px auto 0px 0px; width: 58px; border-radius: 2px; background: linear-gradient(90deg, transparent 0px, rgba(255, 255, 255, 0.84) 12px, rgb(255, 255, 255) 28px, rgb(255, 255, 255) 36px, rgba(255, 255, 255, 0.58) 46px, transparent 58px); box-shadow: 0 0 7px #fffc,0 0 12px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 55%,transparent); }
@keyframes wb-style3-progress-streak { 
  0% { transform: translate3d(0px, -50%, 0px); opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translate3d(100%, -50%, 0px); opacity: 0; }
}
.broadcast-wb-chips { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 6px; padding: 8px 18px 12px; background: linear-gradient(rgba(28, 32, 48, 0.94), rgba(20, 24, 38, 0.96)); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.broadcast-wb-chips.broadcast-wb-chips-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.broadcast-wb-chips.broadcast-wb-chips-md { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.broadcast-wb-chips.broadcast-wb-chips-md .broadcast-wb-chip-full { grid-column: 1 / -1; }
.broadcast-wb-chips.broadcast-wb-chips-md .broadcast-wb-chip-half { grid-column: auto; }
.broadcast-wb-chip { min-width: 0px; display: flex; flex-direction: column; gap: 2px; padding: 5px 10px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; }
.broadcast-wb-chip-label { font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.1; }
.broadcast-wb-chip-value { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.92); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broadcast-warning-banner-style3 .broadcast-wb-chips-style3-other { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; padding: 10px 18px 14px; background: radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 8%,transparent),transparent 34%),linear-gradient(180deg,#22263cfa,#111424fa); }
.broadcast-warning-banner-style4 .broadcast-wb-chips-style3-other { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; padding: 0px 22px 18px; background: transparent; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
.broadcast-wb-report-time { padding: 0px 22px 4px; font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.7px; text-transform: uppercase; }
.broadcast-wb-chips.broadcast-wb-chips-storm-report { display: flex; flex-direction: column; gap: 10px; padding: 10px 22px 18px; background: transparent; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
.broadcast-warning-banner-style4 .broadcast-wb-chips.broadcast-wb-chips-storm-report { padding-top: 6px; }
.broadcast-wb-report-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; }
.broadcast-wb-report-stat-row > .broadcast-wb-report-stat:only-child { grid-column: 1 / -1; }
.broadcast-warning-banner-style3 .broadcast-wb-expires-label { font-size: 15px; font-weight: 900; color: rgba(255, 255, 255, 0.95); letter-spacing: 1.3px; margin-bottom: 7px; }
.broadcast-warning-banner-style4 .broadcast-wb-expires { padding: 0px 22px 13px; background: transparent; }
.broadcast-warning-banner-style4 .broadcast-wb-expires-label { font-size: 14px; font-weight: 900; color: rgba(255, 255, 255, 0.98); letter-spacing: 1.5px; text-shadow: rgba(0, 0, 0, 0.42) 0px 2px 8px; margin-bottom: 8px; }
.broadcast-warning-banner-style3 .broadcast-wb-area { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0px; padding: 8px 18px 9px 38px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.016)); border-top: 1px solid rgba(255, 255, 255, 0.043); border-bottom: 1px solid rgba(255, 255, 255, 0.043); }
.broadcast-warning-banner-style4 .broadcast-wb-area { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0px; margin: 0px 22px 12px; padding: 10px 14px 10px 34px; border-radius: 5px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.06)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(255, 255, 255, 0.08) 0px 1px inset; }
.broadcast-warning-banner-style3 .broadcast-wb-area::before { content: ""; position: absolute; left: 18px; top: 50%; width: 6px; height: 6px; border-radius: 999px; transform: translateY(-50%); background: color-mix(in srgb,var(--wf-wb-accent, #ff5252) 72%,#ffffff); opacity: 0.85; box-shadow: 0 0 10px color-mix(in srgb,var(--wf-wb-accent, #ff5252) 42%,transparent); }
.broadcast-warning-banner-style4 .broadcast-wb-area::before { content: ""; position: absolute; left: 15px; top: 50%; width: 7px; height: 7px; border-radius: 999px; transform: translateY(-50%); background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.74) 0px 0px 10px; }
.broadcast-warning-banner-style3 .broadcast-wb-area-group, .broadcast-warning-banner-style4 .broadcast-wb-area-group { min-width: 0px; display: flex; align-items: center; gap: 8px; line-height: 1.15; }
.broadcast-warning-banner-style3 .broadcast-wb-area-counties, .broadcast-warning-banner-style4 .broadcast-wb-area-counties { flex: 1 1 0px; }
.broadcast-warning-banner-style3 .broadcast-wb-area-states, .broadcast-warning-banner-style4 .broadcast-wb-area-states { flex: 0 0 auto; gap: 0px; align-items: center; line-height: 1; }
.broadcast-warning-banner-style3 .broadcast-wb-area-states::before { content: ""; display: block; width: 1px; height: 22px; margin-right: 16px; background: rgba(255, 255, 255, 0.13); }
.broadcast-warning-banner-style4 .broadcast-wb-area-states::before { content: ""; display: block; width: 1px; height: 26px; margin-right: 16px; background: rgba(255, 255, 255, 0.22); }
.broadcast-warning-banner-style3 .broadcast-wb-area-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.44); letter-spacing: 1.1px; line-height: 1; text-transform: uppercase; }
.broadcast-warning-banner-style4 .broadcast-wb-area-label { flex: 0 0 auto; font-size: 11px; font-weight: 900; color: rgba(255, 255, 255, 0.68); letter-spacing: 1.1px; line-height: 1; text-transform: uppercase; }
.broadcast-warning-banner-style3 .broadcast-wb-area-value { min-width: 0px; font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, 0.84); letter-spacing: 0.2px; line-height: 1.18; white-space: normal; overflow: hidden; text-overflow: clip; }
.broadcast-warning-banner-style4 .broadcast-wb-area-value { min-width: 0px; font-size: 14px; font-weight: 900; color: rgba(255, 255, 255, 0.96); letter-spacing: 0.2px; line-height: 1.18; white-space: normal; overflow: hidden; text-overflow: clip; text-shadow: rgba(0, 0, 0, 0.32) 0px 1px 5px; }
.broadcast-warning-banner-style3 .broadcast-wb-area-counties .broadcast-wb-area-value, .broadcast-warning-banner-style4 .broadcast-wb-area-counties .broadcast-wb-area-value { overflow-wrap: normal; word-break: normal; }
.broadcast-warning-banner-style3 .broadcast-wb-area-states .broadcast-wb-area-value, .broadcast-warning-banner-style4 .broadcast-wb-area-states .broadcast-wb-area-value { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: nowrap; overflow: visible; overflow-wrap: normal; word-break: normal; }
.broadcast-warning-banner-style3 .broadcast-wb-chip { position: relative; min-height: 58px; align-items: center; justify-content: center; gap: 5px; padding: 10px 14px 11px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.094); overflow: hidden; text-align: center; background: var(--wf-style3-card-bg, rgba(255, 255, 255, .045)); box-shadow: rgba(255, 255, 255, 0.094) 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 8px 18px; }
.broadcast-warning-banner-style4 .broadcast-wb-chip { position: relative; min-height: 54px; align-items: center; justify-content: center; gap: 5px; padding: 10px 14px 11px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; text-align: center; background: linear-gradient(180deg,#ffffff18,#ffffff09),linear-gradient(135deg,color-mix(in srgb,var(--wf-wb-accent, #ff5252) 34%,rgba(0,0,0,.3)),#00000057); box-shadow: rgba(255, 255, 255, 0.12) 0px 1px inset, rgba(0, 0, 0, 0.24) 0px -1px inset, rgba(0, 0, 0, 0.18) 0px 8px 16px; }
.broadcast-warning-banner-style3 .broadcast-wb-chip::before { content: ""; position: absolute; inset: 0px auto 0px 0px; width: 5px; background: var(--wf-style3-card-accent, var(--wf-wb-accent, #ff5252)); box-shadow: 0 0 18px var(--wf-style3-card-accent, var(--wf-wb-accent, #ff5252)); opacity: 0.86; }
.broadcast-warning-banner-style4 .broadcast-wb-chip::before { content: ""; position: absolute; inset: 0px auto 0px 0px; width: 4px; background: rgba(255, 255, 255, 0.88); box-shadow: rgba(255, 255, 255, 0.55) 0px 0px 16px; opacity: 0.92; }
.broadcast-warning-banner-style3 .broadcast-wb-chip::after { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; background: var(--wf-style3-card-bg-pulse, transparent); opacity: 0; }
.broadcast-warning-banner-style4 .broadcast-wb-chip::after { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; background: var(--wf-style3-card-bg-pulse, transparent); opacity: 0; }
.broadcast-warning-banner-style3 .broadcast-wb-chip > * { position: relative; z-index: 1; }
.broadcast-warning-banner-style4 .broadcast-wb-chip > * { position: relative; z-index: 1; }
.broadcast-warning-banner-style3 .broadcast-wb-chip-pulse { animation: 4.2s cubic-bezier(0.45, 0, 0.2, 1) 0s infinite normal none running wb-style3-card-pulse; }
.broadcast-warning-banner-style3 .broadcast-wb-chip-pulse::after { animation: 4.2s cubic-bezier(0.45, 0, 0.2, 1) 0s infinite normal none running wb-style3-card-fill-pulse; }
.broadcast-warning-banner-style3 .broadcast-wb-chip-pulse::before { animation: 4.2s cubic-bezier(0.45, 0, 0.2, 1) 0s infinite normal none running wb-style3-card-rail-pulse; }
.broadcast-warning-banner-style3 .broadcast-wb-chip-pulse-strong { animation-name: wb-style3-card-pulse-strong; animation-duration: 3.4s; }
.broadcast-warning-banner-style3 .broadcast-wb-chip-pulse-strong::before { animation-name: wb-style3-card-rail-pulse-strong; animation-duration: 3.4s; }
@keyframes wb-style3-card-fill-pulse { 
  0%, 100% { opacity: 0; }
  45%, 55% { opacity: 0.86; }
}
@keyframes wb-style3-card-pulse { 
  0%, 100% { border-color: rgba(255, 255, 255, 0.094); }
  45%, 55% { border-color: color-mix(in srgb,var(--wf-style3-card-accent, var(--wf-wb-accent, #ff5252)) 50%,rgba(255,255,255,.14)); }
}
@keyframes wb-style3-card-pulse-strong { 
  0%, 100% { border-color: color-mix(in srgb,var(--wf-style3-card-accent, var(--wf-wb-accent, #ff5252)) 24%,rgba(255,255,255,.1)); }
  45%, 55% { border-color: color-mix(in srgb,var(--wf-style3-card-accent, var(--wf-wb-accent, #ff5252)) 54%,rgba(255,255,255,.16)); }
}
@keyframes wb-style3-card-rail-pulse { 
  0%, 100% { width: 5px; opacity: 0.72; }
  45%, 55% { width: 5px; opacity: 1; }
}
@keyframes wb-style3-card-rail-pulse-strong { 
  0%, 100% { width: 6px; opacity: 0.86; }
  45%, 55% { width: 6px; opacity: 1; }
}
.broadcast-warning-banner-style3 .broadcast-wb-chip-full, .broadcast-warning-banner-style4 .broadcast-wb-chip-full { grid-column: 1 / -1; }
.broadcast-warning-banner-style3 .broadcast-wb-chip-half, .broadcast-warning-banner-style4 .broadcast-wb-chip-half { grid-column: auto; }
.broadcast-warning-banner-style4 .broadcast-wb-chip-style3-tornado, .broadcast-warning-banner-style4 .broadcast-wb-chip-style3-wind, .broadcast-warning-banner-style4 .broadcast-wb-chip-style3-hail, .broadcast-warning-banner-style4 .broadcast-wb-chip-style3-threat, .broadcast-warning-banner-style4 .broadcast-wb-chip-style3-other { --wf-style3-card-accent: color-mix(in srgb, var(--wf-wb-accent, #ff5252) 68%, #ffffff); --wf-style3-card-bg-pulse: linear-gradient(135deg, rgba(255, 255, 255, .18), color-mix(in srgb, var(--wf-wb-accent, #ff5252) 34%, transparent)); }
.broadcast-warning-banner-style3 .broadcast-wb-chip-style3-tornado { --wf-style3-card-accent: #ff2d55; --wf-style3-card-bg: linear-gradient(135deg, rgba(255, 45, 85, .09), rgba(96, 30, 130, .055) 58%, rgba(255, 255, 255, .045)); --wf-style3-card-bg-pulse: linear-gradient(135deg, rgba(255, 45, 85, .18), rgba(96, 30, 130, .095) 58%, rgba(255, 255, 255, .065)); }
.broadcast-warning-banner-style3 .broadcast-wb-chip-style3-wind { --wf-style3-card-accent: #00c2ff; --wf-style3-card-bg: linear-gradient(135deg, rgba(0, 194, 255, .085), rgba(46, 88, 255, .05) 62%, rgba(255, 255, 255, .045)); --wf-style3-card-bg-pulse: linear-gradient(135deg, rgba(0, 194, 255, .17), rgba(46, 88, 255, .09) 62%, rgba(255, 255, 255, .065)); }
.broadcast-warning-banner-style3 .broadcast-wb-chip-style3-hail { --wf-style3-card-accent: #62f26f; --wf-style3-card-bg: linear-gradient(135deg, rgba(98, 242, 111, .08), rgba(0, 196, 170, .045) 62%, rgba(255, 255, 255, .045)); --wf-style3-card-bg-pulse: linear-gradient(135deg, rgba(98, 242, 111, .16), rgba(0, 196, 170, .085) 62%, rgba(255, 255, 255, .065)); }
.broadcast-warning-banner-style3 .broadcast-wb-chip-style3-threat { --wf-style3-card-accent: #ffb000; --wf-style3-card-bg: linear-gradient(135deg, rgba(255, 176, 0, .09), rgba(255, 59, 48, .052) 60%, rgba(255, 255, 255, .045)); --wf-style3-card-bg-pulse: linear-gradient(135deg, rgba(255, 176, 0, .18), rgba(255, 59, 48, .095) 60%, rgba(255, 255, 255, .065)); }
.broadcast-warning-banner-style3 .broadcast-wb-chip-style3-other { --wf-style3-card-accent: var(--wf-wb-accent, #ff5252); --wf-style3-card-bg: linear-gradient(135deg, color-mix(in srgb, var(--wf-wb-accent, #ff5252) 8%, transparent), rgba(255, 255, 255, .045)); --wf-style3-card-bg-pulse: linear-gradient(135deg, color-mix(in srgb, var(--wf-wb-accent, #ff5252) 16%, transparent), rgba(255, 255, 255, .065)); }
.broadcast-warning-banner-style3 .broadcast-wb-chip-label { font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, 0.72); text-align: center; }
.broadcast-warning-banner-style4 .broadcast-wb-chip-label { font-size: 12px; font-weight: 900; color: rgba(255, 255, 255, 0.76); text-align: center; letter-spacing: 1px; }
.broadcast-warning-banner-style3 .broadcast-wb-chip-value { font-size: 15px; color: rgba(255, 255, 255, 0.96); text-align: center; max-width: 100%; }
.broadcast-warning-banner-style4 .broadcast-wb-chip-value { font-size: 15px; color: rgba(255, 255, 255, 0.98); text-align: center; max-width: 100%; text-shadow: rgba(0, 0, 0, 0.35) 0px 1px 6px; }
.broadcast-warning-banner-style3 .broadcast-wb-report-details, .broadcast-warning-banner-style4 .broadcast-wb-report-details { align-items: stretch; }
.broadcast-wb-report-details .broadcast-wb-chip-value { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.broadcast-warning-banner-style3 .broadcast-wb-report-details .broadcast-wb-chip-value, .broadcast-warning-banner-style4 .broadcast-wb-report-details .broadcast-wb-chip-value { text-align: left; }
.broadcast-warning-banner::after { content: ""; height: 2px; width: 100%; background: linear-gradient(90deg,var(--wf-wb-accent, #ff5252),transparent); }
.broadcast-warning-banner-style3::after { height: auto; width: auto; background: transparent; box-shadow: rgba(255, 255, 255, 0.12) 0px 1px inset, rgba(0, 0, 0, 0.55) 0px -1px inset; }
.broadcast-warning-banner.broadcast-warning-banner-style4::after { content: ""; position: absolute; inset: 1px; height: auto; width: auto; border-radius: 7px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 22%, transparent 72%, rgba(255, 255, 255, 0.16)); box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.18) 0px -22px 36px inset; }
.broadcast-warning-banner-style5 .broadcast-wb-alarm-bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 18px 14px; color: rgb(255, 255, 255); font-size: 13px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; background: linear-gradient(90deg, rgb(90, 2, 2), rgb(196, 0, 0), rgb(90, 2, 2)); text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 6px, rgba(0, 0, 0, 0.8) 0px 1px 2px; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px inset, rgba(0, 0, 0, 0.45) 0px -1px inset; overflow: hidden; isolation: isolate; animation: 2.2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running wb-style5-alarm-pulse; will-change: filter, box-shadow; }
.broadcast-warning-banner-style5 .broadcast-wb-alarm-bar > * { position: relative; z-index: 3; }
.broadcast-warning-banner-style5 .broadcast-wb-alarm-sep { opacity: 0.7; font-weight: 700; }
.broadcast-warning-banner-style5 .broadcast-wb-alarm-bar::after { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 35%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%); transform: translate(-100%); will-change: transform; animation: 3.4s linear 0s infinite normal none running wb-style5-alarm-sweep; }
@keyframes wb-style5-alarm-sweep { 
  0% { transform: translate(-100%); }
  100% { transform: translate(286%); }
}
.broadcast-warning-banner-destructive-active .broadcast-wb-alarm-bar, .broadcast-warning-banner-pds-active .broadcast-wb-alarm-bar { border-top-left-radius: 7px; border-top-right-radius: 7px; }
.broadcast-warning-banner-pds-active .broadcast-wb-alarm-bar { background: linear-gradient(90deg, rgb(106, 20, 82), rgb(196, 0, 122) 28%, rgb(196, 0, 122) 72%, rgb(106, 20, 82)); font-size: 14.5px; animation: 2.2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running wb-style5-pds-alarm-pulse; will-change: box-shadow; }
.broadcast-warning-banner-pds-active .broadcast-wb-alarm-bar::after { display: none; }
@keyframes wb-style5-pds-alarm-pulse { 
  0%, 100% { box-shadow: rgba(255, 255, 255, 0.18) 0px 1px inset, rgba(0, 0, 0, 0.45) 0px -1px inset, rgba(255, 0, 180, 0.42) 0px 0px 14px; }
  50% { box-shadow: rgba(255, 255, 255, 0.3) 0px 1px inset, rgba(0, 0, 0, 0.45) 0px -1px inset, rgba(255, 30, 200, 0.95) 0px 0px 34px, rgba(255, 0, 180, 0.65) 0px 0px 64px; }
}
@keyframes wb-style5-alarm-pulse { 
  0%, 100% { filter: brightness(0.98) saturate(1); box-shadow: rgba(255, 255, 255, 0.18) 0px 1px inset, rgba(0, 0, 0, 0.45) 0px -1px inset, rgba(255, 0, 0, 0.35) 0px 0px 10px; }
  50% { filter: brightness(1.22) saturate(1.18); box-shadow: rgba(255, 255, 255, 0.3) 0px 1px inset, rgba(0, 0, 0, 0.45) 0px -1px inset, rgba(255, 30, 30, 0.92) 0px 0px 26px, rgba(255, 0, 0, 0.55) 0px 0px 48px; }
}
.broadcast-warning-banner-style5 .broadcast-wb-chip-destructive-storm { border-color: rgba(255, 60, 60, 0.55); animation: 2.2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running wb-style5-destructive-card-pulse; }
.broadcast-warning-banner-style5 .broadcast-wb-chip-destructive-storm::before { background: rgb(255, 42, 42); box-shadow: rgba(255, 30, 30, 0.85) 0px 0px 18px; opacity: 1; }
.broadcast-warning-banner-style5 .broadcast-wb-chip-destructive-storm .broadcast-wb-chip-value { color: rgb(255, 234, 234); font-weight: 900; text-shadow: rgba(255, 0, 0, 0.5) 0px 0px 4px; }
@keyframes wb-style5-destructive-card-pulse { 
  0%, 100% { border-color: rgba(255, 60, 60, 0.45); box-shadow: rgba(255, 255, 255, 0.1) 0px 1px inset, rgba(0, 0, 0, 0.24) 0px -1px inset, rgba(255, 0, 0, 0.18) 0px 0px 0px 1px inset, rgba(255, 0, 0, 0.3) 0px 0px 8px; }
  50% { border-color: rgba(255, 90, 90, 0.95); box-shadow: rgba(255, 255, 255, 0.18) 0px 1px inset, rgba(0, 0, 0, 0.24) 0px -1px inset, rgba(255, 0, 0, 0.45) 0px 0px 0px 1px inset, rgba(255, 30, 30, 0.7) 0px 0px 22px; }
}
.broadcast-wb-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 18px; background: rgba(16, 18, 30, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.broadcast-wb-nav { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.6); font-size: 18px; font-weight: 700; cursor: pointer; padding: 0px 6px; line-height: 1; }
.broadcast-wb-nav:hover { color: rgb(255, 255, 255); }
.broadcast-wb-page { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.5px; }
.broadcast-wb-classic { display: flex; flex-direction: row; align-items: stretch; min-width: 520px; max-width: min(1100px, -32px + 100vw); background: rgba(12, 14, 24, 0.98); box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 32px, rgba(0, 0, 0, 0.35) 0px 0px 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: auto; overflow: hidden; }
.broadcast-wb-classic-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0px; }
.broadcast-wb-classic-top { display: flex; align-items: center; padding: 10px 20px; gap: 14px; min-height: 46px; position: relative; background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); background-blend-mode: overlay; }
.broadcast-wb-classic-product { flex: 1 1 auto; font-size: 26px; font-weight: 900; letter-spacing: 1.4px; line-height: 1.02; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.35) 0px 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broadcast-wb-classic-top-divider { flex: 0 0 auto; width: 2px; height: 24px; opacity: 0.45; }
.broadcast-wb-classic-states { flex: 0 0 auto; font-size: 20px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.02; }
.broadcast-wb-classic-close { top: 4px; right: 4px; color: currentcolor; opacity: 0.42; background: rgba(0, 0, 0, 0.1); }
.broadcast-wb-classic-close:hover, .broadcast-wb-classic-close:focus-visible { opacity: 0.82; background: rgba(0, 0, 0, 0.22); }
.broadcast-wb-classic-middle { display: flex; align-items: center; padding: 7px 20px; gap: 12px; min-height: 30px; background: rgba(18, 20, 34, 0.98); border-top: 1px solid rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; }
.broadcast-wb-classic-meta { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; letter-spacing: 1.1px; color: rgba(255, 255, 255, 0.95); text-transform: uppercase; white-space: nowrap; }
.broadcast-wb-classic-pipe { flex: 0 0 auto; width: 1px; height: 16px; background: rgba(255, 255, 255, 0.25); }
.broadcast-wb-classic-counties { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; letter-spacing: 0.9px; color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.broadcast-wb-classic-counties-label { font-weight: 700; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.8px; margin-right: 4px; }
.broadcast-wb-classic-progress { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.broadcast-wb-classic-progress-fill { height: 100%; transition: width 1s linear; }
.broadcast-wb-classic-bottom { display: flex; flex-wrap: wrap; align-items: center; padding: 6px 20px; gap: 2px 0px; min-height: 28px; background: rgba(10, 12, 22, 0.98); border-top: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; max-height: 34px; }
.broadcast-wb-classic-bottom.has-corner-pager { padding-right: 68px; }
.broadcast-wb-classic-report { display: flex; flex-direction: column; background: rgba(10, 12, 22, 0.98); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.broadcast-wb-classic-report-stats { display: flex; align-items: center; flex-wrap: wrap; padding: 8px 20px 6px; row-gap: 4px; }
.broadcast-wb-classic-report-details { display: flex; align-items: baseline; gap: 8px; padding: 0px 20px 9px; min-width: 0px; }
.broadcast-wb-classic-report-details .broadcast-wb-classic-haz-label { flex: 0 0 auto; }
.broadcast-wb-classic-report-details .broadcast-wb-classic-haz-value { min-width: 0px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.broadcast-wb-classic-haz { display: inline-flex; align-items: baseline; gap: 7px; padding: 0px 14px; border-right: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap; }
.broadcast-wb-classic-haz:first-child { padding-left: 0px; }
.broadcast-wb-classic-haz:last-child { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
.broadcast-wb-classic-haz-label { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; }
.broadcast-wb-classic-haz-value { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.96); letter-spacing: 0.3px; }
.broadcast-wb-classic-corner-pager { position: absolute; right: 8px; bottom: 6px; display: flex; align-items: center; gap: 1px; padding: 1px 4px; background: rgba(0, 0, 0, 0.35); border-radius: 3px; opacity: 0.55; transition: opacity 0.15s; pointer-events: auto; z-index: 2; }
.broadcast-wb-classic-corner-pager:hover { opacity: 1; }
.broadcast-wb-classic-corner-nav { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; padding: 1px 4px; }
.broadcast-wb-classic-corner-nav:hover { color: rgb(255, 255, 255); }
.broadcast-wb-classic-corner-page { font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.7); padding: 0px 2px; }
.broadcast-mapping-panel { flex: 1 1 0%; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.broadcast-section-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; }
.broadcast-section-label { font-size: 11px; font-weight: 600; color: rgb(204, 204, 204); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px 2px; }
.broadcast-mapping-section-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.broadcast-mapping-section-header.clickable { cursor: pointer; user-select: none; }
.broadcast-mapping-section-header.clickable:hover .broadcast-mapping-section-label { color: rgb(170, 170, 170); }
.broadcast-section-header-left { display: flex; align-items: center; gap: 6px; color: rgb(136, 136, 136); }
.broadcast-section-header-right { display: flex; align-items: center; gap: 6px; }
.broadcast-mapping-section-label { font-size: 11px; font-weight: 700; color: rgb(204, 204, 204); text-transform: uppercase; letter-spacing: 0.8px; }
.broadcast-mapping-content { padding: 0px 14px 12px; }
.broadcast-mapping-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.broadcast-mapping-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.broadcast-mapping-row.slider-row { flex-direction: column; align-items: stretch; gap: 4px; }
.broadcast-mapping-label { font-size: 13px; font-weight: 500; color: rgb(221, 221, 221); flex-shrink: 0; }
.broadcast-select { background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%234fc3f7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center no-repeat rgba(255, 255, 255, 0.08); color: rgb(65, 139, 185); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 5px 26px 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; outline: none; transition: border-color 0.15s; appearance: none; min-width: 90px; }
.broadcast-select:hover { border-color: rgba(255, 255, 255, 0.2); }
.broadcast-select:focus { border-color: rgba(65, 139, 185, 0.5); }
.broadcast-select option { background: rgb(26, 26, 46); color: rgb(255, 255, 255); }
.broadcast-swatch-selector { display: flex; gap: 4px; }
.broadcast-swatch { width: 24px; height: 24px; border-radius: 4px; cursor: pointer; transition: 0.15s; padding: 0px; }
.broadcast-swatch:hover { transform: scale(1.1); }
.broadcast-county-select-hint { font-size: 10px; color: rgb(119, 119, 119); line-height: 1.4; padding: 4px 0px 2px; font-style: italic; }
.broadcast-selected-counties { margin-top: 8px; border: 1px solid rgba(65, 139, 185, 0.15); border-radius: 8px; overflow: hidden; background: rgba(65, 139, 185, 0.03); }
.broadcast-selected-counties-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; cursor: pointer; transition: background 0.15s; }
.broadcast-selected-counties-header:hover { background: rgba(255, 255, 255, 0.03); }
.broadcast-selected-count { font-size: 11px; font-weight: 600; color: rgb(65, 139, 185); }
.broadcast-selected-regions { font-weight: 400; color: rgb(119, 119, 119); font-size: 10px; }
.broadcast-selected-actions { display: flex; align-items: center; gap: 8px; }
.broadcast-clear-btn { font-size: 10px; color: rgb(229, 115, 115); background: rgba(229, 115, 115, 0.1); border: 1px solid rgba(229, 115, 115, 0.2); border-radius: 4px; padding: 2px 6px; cursor: pointer; font-weight: 600; transition: 0.15s; }
.broadcast-clear-btn:hover { background: rgba(229, 115, 115, 0.2); }
.broadcast-selected-county-list { max-height: 200px; overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.broadcast-selected-county-item { display: flex; align-items: center; padding: 4px 8px; gap: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.03); font-size: 10px; }
.broadcast-selected-county-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.broadcast-county-name { flex: 1 1 0%; color: rgb(204, 204, 204); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broadcast-county-region { color: rgb(102, 102, 102); font-size: 9px; flex-shrink: 0; }
.broadcast-county-remove { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(136, 136, 136); cursor: pointer; font-size: 14px; padding: 0px 2px; line-height: 1; flex-shrink: 0; }
.broadcast-county-remove:hover { color: rgb(229, 115, 115); }
.broadcast-road-classes { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); }
.broadcast-road-class-row { background: rgba(255, 255, 255, 0.03); }
.broadcast-road-class-row.expanded { background: rgba(255, 255, 255, 0.05); }
.broadcast-road-class-header { display: flex; align-items: center; gap: 8px; padding: 7px 8px; cursor: pointer; transition: background 0.15s; }
.broadcast-road-class-header:hover { background: rgba(255, 255, 255, 0.04); }
.broadcast-road-vis-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 2px; cursor: pointer; color: rgb(170, 170, 170); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.broadcast-road-class-info { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
.broadcast-road-class-title { font-size: 11px; font-weight: 600; color: rgb(204, 204, 204); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broadcast-road-class-subtitle { font-size: 9px; color: rgb(102, 102, 102); white-space: nowrap; }
.broadcast-road-class-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.12); }
.broadcast-road-class-body { padding: 4px 8px 8px 30px; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.broadcast-scenes-panel { flex: 1 1 0%; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.broadcast-scene-save-btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 10px; font-weight: 600; color: rgb(65, 139, 185); background: rgba(65, 139, 185, 0.1); border: 1px solid rgba(65, 139, 185, 0.25); border-radius: 7px; cursor: pointer; transition: 0.15s; }
.broadcast-scene-save-btn:hover { background: rgba(65, 139, 185, 0.2); }
.broadcast-scenes-list { padding: 4px 10px; }
.broadcast-scene-item { border-radius: 8px; margin-bottom: 2px; transition: background 0.15s; }
.broadcast-scene-item:hover { background: rgba(255, 255, 255, 0.04); }
.broadcast-scene-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; cursor: pointer; }
.broadcast-scene-info { display: flex; flex-direction: column; gap: 2px; min-width: 0px; flex: 1 1 0%; }
.broadcast-scene-name { font-size: 12px; font-weight: 500; color: rgb(204, 204, 204); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broadcast-scene-name-input { font-size: 12px; font-weight: 500; color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(65, 139, 185, 0.4); border-radius: 4px; padding: 2px 6px; outline: none; width: 100%; }
.broadcast-scene-meta { font-size: 10px; color: rgb(102, 102, 102); white-space: nowrap; }
.broadcast-scene-actions { display: flex; align-items: center; gap: 4px; color: rgb(85, 85, 85); flex-shrink: 0; }
.broadcast-scene-action-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(196, 196, 196); cursor: pointer; padding: 3px; border-radius: 4px; display: flex; align-items: center; transition: 0.15s; }
.broadcast-scene-action-btn:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.08); }
.broadcast-scene-action-btn.delete:hover { color: rgb(255, 82, 82); background: rgba(255, 82, 82, 0.1); }
.broadcast-present-panel { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.broadcast-present-header { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; }
.broadcast-present-header .broadcast-mapping-section-label { flex: 1 1 0%; }
.broadcast-present-back { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.7); cursor: pointer; padding: 4px 6px; border-radius: 4px; display: inline-flex; align-items: center; }
.broadcast-present-back:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.06); }
.broadcast-present-title { flex: 1 1 0%; font-size: 13px; font-weight: 700; color: rgb(255, 255, 255); letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.broadcast-present-title-input { flex: 1 1 0%; font-size: 13px; font-weight: 700; }
.broadcast-present-empty { padding: 18px 14px; color: rgba(255, 255, 255, 0.45); text-align: center; font-size: 12px; line-height: 1.5; }
.broadcast-present-empty strong { color: rgba(255, 255, 255, 0.85); font-weight: 700; }
.broadcast-present-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0px 10px; padding: 6px 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; }
.broadcast-present-nav { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: rgba(255, 255, 255, 0.85); padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s; }
.broadcast-present-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); }
.broadcast-present-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.broadcast-present-counter { flex: 1 1 0%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.6px; }
.broadcast-present-slides { display: flex; flex-direction: column; gap: 6px; padding: 0px 10px; }
.broadcast-present-slide { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; cursor: pointer; transition: background 0.12s, border-color 0.12s; position: relative; }
.broadcast-present-slide:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
.broadcast-present-slide.active { background: rgba(65, 139, 185, 0.1); border-color: rgba(65, 139, 185, 0.4); }
.broadcast-present-slide.drop-before::before, .broadcast-present-slide.drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; background: rgb(65, 139, 185); border-radius: 2px; }
.broadcast-present-slide.drop-before::before { top: -2px; }
.broadcast-present-slide.drop-after::after { bottom: -2px; }
.broadcast-present-slide-header { display: flex; align-items: center; gap: 8px; min-width: 0px; }
.broadcast-present-slide-index { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.65); }
.broadcast-present-slide-info { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0px; gap: 1px; }
.broadcast-present-slide-info .broadcast-scene-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broadcast-present-panel .broadcast-scene-meta { font-size: 12.5px; font-weight: 500; color: rgb(168, 168, 168); }
.broadcast-present-slide-meta-row { font-size: 12.5px; font-weight: 500; color: rgb(168, 168, 168); line-height: 1.2; margin-top: -6px; }
.broadcast-present-slide-notes { font-size: 12px; color: rgb(196, 196, 196); line-height: 1.4; white-space: pre-wrap; padding: 6px 8px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid rgba(65, 139, 185, 0.5); border-radius: 2px; }
.broadcast-present-panel .broadcast-scene-action-btn { color: rgb(196, 196, 196); padding: 8px; }
.broadcast-present-panel .broadcast-scene-action-btn svg { width: 17px; height: 17px; }
.broadcast-present-panel .broadcast-scene-action-btn:hover { color: rgb(255, 255, 255); }
.broadcast-present-panel .broadcast-scene-action-btn.delete:hover { color: rgb(255, 82, 82); }
.broadcast-present-slide-actions { flex: 0 0 auto; display: flex; flex-direction: row; gap: 4px; }
.broadcast-present-slide-more { flex: 0 0 auto; }
.broadcast-present-context-menu { position: fixed; z-index: 10000; min-width: 140px; background: rgb(31, 33, 36); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 4px; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px; display: flex; flex-direction: column; gap: 1px; }
.broadcast-present-context-item { display: flex; align-items: center; gap: 10px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; text-align: left; color: rgb(224, 224, 224); font-size: 13px; font-family: inherit; padding: 7px 12px 7px 10px; border-radius: 4px; cursor: pointer; }
.broadcast-present-context-item svg { flex: 0 0 auto; color: rgb(196, 196, 196); }
.broadcast-present-context-item.danger svg { color: rgb(255, 133, 133); }
.broadcast-present-context-item:hover { background: rgba(255, 255, 255, 0.08); }
.broadcast-present-context-item.danger { color: rgb(255, 133, 133); }
.broadcast-present-context-item.danger:hover { background: rgba(255, 82, 82, 0.15); color: rgb(255, 82, 82); }
.broadcast-present-context-sep { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0px; }
.broadcast-present-slide-editor { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; }
.broadcast-present-field { display: flex; flex-direction: column; gap: 4px; }
.broadcast-present-field-label { font-size: 11px; font-weight: 600; color: rgb(168, 168, 168); letter-spacing: 0.04em; text-transform: uppercase; }
.broadcast-present-field-input, .broadcast-present-field-textarea { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; color: rgb(238, 238, 238); font-size: 13px; font-family: inherit; padding: 6px 8px; outline: none; width: 100%; box-sizing: border-box; }
.broadcast-present-field-input:focus, .broadcast-present-field-textarea:focus { border-color: rgba(65, 139, 185, 0.7); }
.broadcast-present-field-textarea { resize: vertical; min-height: 56px; line-height: 1.4; }
.broadcast-present-editor-actions { display: flex; justify-content: flex-end; gap: 6px; }
.broadcast-present-editor-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: rgb(221, 221, 221); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 4px; cursor: pointer; }
.broadcast-present-editor-btn:hover { background: rgba(255, 255, 255, 0.14); }
.broadcast-present-editor-btn.primary { background: rgba(65, 139, 185, 0.3); border-color: rgba(65, 139, 185, 0.6); color: rgb(255, 255, 255); }
.broadcast-present-editor-btn.primary:hover { background: rgba(65, 139, 185, 0.45); }
.broadcast-present-thumb-wrap { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, 0.4); }
.broadcast-present-thumb { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.broadcast-present-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.5px; }
.simple-weather-panel { flex: 1 1 0%; overflow-y: auto; }
.simple-data-types { display: flex; gap: 4px; }
.simple-data-type-btn { flex: 1 1 0%; height: 28px; padding: 0px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; color: rgb(155, 162, 173); font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.simple-data-type-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgb(223, 227, 234); }
.simple-data-type-btn.active { background: rgb(65, 139, 185); border-color: rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); }
.simple-radar-mode { display: flex; gap: 4px; margin-bottom: 4px; }
.simple-radar-mode-btn { flex: 1 1 0%; height: 28px; padding: 0px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; color: rgb(155, 162, 173); font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.simple-radar-mode-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgb(223, 227, 234); }
.simple-radar-mode-btn.active { background: rgb(65, 139, 185); border-color: rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); }
.locations-panel { flex: 1 1 0%; display: flex; flex-direction: column; }
.locations-org-header { padding: 12px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.locations-org-name { font-size: 13px; font-weight: 600; color: rgb(204, 204, 204); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.locations-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: background 0.15s; }
.locations-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.locations-filter-label { font-size: 12px; font-weight: 600; color: rgb(153, 153, 153); }
.locations-toggle-row:hover { background: rgba(255, 255, 255, 0.04); }
.locations-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgb(153, 153, 153); }
.loc-toggle { width: 32px; height: 18px; background: rgba(255, 255, 255, 0.15); border-radius: 9px; position: relative; transition: background 0.2s; }
.loc-toggle.on { background: rgb(65, 139, 185); }
.loc-toggle-knob { width: 14px; height: 14px; background: rgb(255, 255, 255); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px; }
.loc-toggle.on .loc-toggle-knob { transform: translate(14px); }
.range-rings-row { padding: 8px 16px; cursor: default; gap: 8px; }
.range-rings-label { flex: 0 0 auto; }
.range-rings-thresholds-btn { margin-left: auto; padding: 0px 8px 0px 0px; font-size: 12px; font-weight: 500; color: rgb(136, 136, 136); font-variant-numeric: tabular-nums; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; transition: color 0.12s; }
.range-rings-thresholds-btn:hover { color: rgb(204, 204, 204); }
.range-rings-toggle-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; cursor: pointer; display: flex; align-items: center; }
.range-rings-editor { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 12px 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); }
.range-rings-editor-row { display: flex; align-items: center; gap: 8px; }
.range-rings-mini-toggle { --ring-color: #888; width: 28px; height: 16px; border-radius: 8px; flex: 0 0 auto; padding: 0px; cursor: pointer; position: relative; background: rgba(255, 255, 255, 0.08); border: 1.5px solid var(--ring-color); transition: background 0.15s; }
.range-rings-mini-toggle.on { background: var(--ring-color); }
.range-rings-mini-toggle-knob { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: rgb(255, 255, 255); transition: transform 0.15s; }
.range-rings-mini-toggle.on .range-rings-mini-toggle-knob { transform: translate(12px); }
.range-rings-editor-row.disabled .range-rings-input { opacity: 0.4; }
.range-rings-input { width: 64px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: rgb(221, 221, 221); font-size: 12px; font-family: inherit; padding: 4px 6px; outline: none; }
.range-rings-input:focus { border-color: rgba(65, 139, 185, 0.7); }
.range-rings-unit { font-size: 11px; color: rgb(119, 119, 119); }
.locations-search { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: rgb(85, 85, 85); }
.locations-search-input { flex: 1 1 0%; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; color: rgb(204, 204, 204); font-size: 12px; font-family: inherit; }
.locations-search-input::placeholder { color: rgb(68, 68, 68); }
.locations-list { flex: 1 1 0%; overflow-y: auto; }
.location-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: none; border-width: medium medium 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.04); border-image: initial; cursor: pointer; transition: background 0.15s; text-align: left; }
.location-item:hover { background: rgba(255, 255, 255, 0.06); }
.location-item-icon { flex-shrink: 0; color: rgb(65, 139, 185); opacity: 0.7; }
.location-item:hover .location-item-icon { opacity: 1; }
.location-item-info { min-width: 0px; }
.location-item-name { font-size: 13px; font-weight: 500; color: rgb(221, 221, 221); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.location-item-address { font-size: 11px; color: rgb(102, 102, 102); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.locations-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; color: rgb(85, 85, 85); font-size: 12px; text-align: center; }
.locations-empty-hint { font-size: 11px; color: rgb(68, 68, 68); max-width: 200px; line-height: 1.4; }
.locations-spinner { width: 18px; height: 18px; border-width: 2px; border-style: solid; border-color: rgb(65, 139, 185) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1); border-image: initial; border-radius: 50%; animation: 0.8s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.locations-section-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 4px 0px; }
.user-location-icon { color: rgb(102, 187, 106); }
.public-location-icon { color: rgb(255, 183, 77); }
.storm-chaser-location-icon { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; color: rgb(79, 195, 247); opacity: 1; border: 2px solid rgba(79, 195, 247, 0.75); background: rgba(10, 12, 20, 0.9); display: flex; align-items: center; justify-content: center; }
.storm-chaser-location-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.storm-chaser-location-item { padding: 0px; gap: 0px; align-items: stretch; }
.storm-chaser-location-main { flex: 1 1 0%; min-width: 0px; padding: 10px 0px 10px 16px; display: flex; align-items: center; gap: 10px; border: 0px; background: none; color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.storm-chaser-stream-btn { flex: 0 0 auto; align-self: center; margin: 0px 12px 0px 8px; padding: 4px 8px; border: 1px solid rgba(79, 195, 247, 0.35); border-radius: 4px; color: rgb(155, 220, 255); font-size: 11px; font-weight: 600; text-decoration: none; background: rgba(79, 195, 247, 0.08); font-family: inherit; line-height: 1.2; cursor: pointer; }
.storm-chaser-stream-btn:hover { background: rgba(79, 195, 247, 0.16); border-color: rgba(79, 195, 247, 0.6); }
.public-report-message { white-space: normal; line-height: 1.35; margin-top: 3px; color: rgb(136, 136, 136); }
.locations-segmented { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.locations-section { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.storm-chaser-map-marker { position: relative; width: 0px; height: 0px; overflow: visible; z-index: 0; }
.storm-chaser-map-marker.has-stream { z-index: 1; }
.storm-chaser-marker-hit { position: absolute; left: 0px; top: 0px; width: 38px; height: 38px; padding: 0px; border: 0px; background: transparent; cursor: pointer; transform-origin: center center; transform: translate(-50%,-50%) scale(var(--storm-chaser-marker-scale, 1)); overflow: visible; appearance: none; }
.storm-chaser-marker-ring { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: rgba(8, 11, 19, 0.92); border: 1px solid rgba(235, 248, 255, 0.92); box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 1px, rgba(0, 0, 0, 0.45) 0px 3px 12px; z-index: 2; }
.storm-chaser-map-marker.has-stream .storm-chaser-marker-ring { box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 1px, rgba(79, 195, 247, 0.72) 0px 0px 0px 5px, rgba(0, 0, 0, 0.45) 0px 3px 12px; }
.storm-chaser-marker-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.storm-chaser-marker-dir { position: absolute; left: 50%; top: 50%; width: 32px; height: 34px; display: none; background: rgba(31, 161, 255, 0.88); clip-path: polygon(50% 0px, 100% 100%, 50% 78%, 0px 100%); filter: drop-shadow(rgb(255, 255, 255) 0px 0px 0px) drop-shadow(rgba(255, 255, 255, 0.9) 0px 0px 2px) drop-shadow(rgba(0, 0, 0, 0.55) 0px 3px 5px); transform: translate(-50%,-100%) rotate(var(--storm-chaser-dir, 0deg)); transform-origin: 50% 100%; z-index: 1; }
.storm-chaser-map-marker.has-dir .storm-chaser-marker-dir { display: block; }
.storm-chaser-overlay-html, .storm-chaser-overlay-body { width: 100%; height: 100%; margin: 0px; overflow: hidden; background: transparent; }
.storm-chaser-overlay-body #root { width: 100%; min-height: 100vh; background: transparent; }
.storm-chaser-overlay-root { width: 100vw; height: 100vh; background: transparent; overflow: hidden; }
.storm-chaser-overlay-frame { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border: var(--storm-chaser-overlay-border-width, 8px) solid var(--storm-chaser-overlay-border-color, #94a3b8); border-radius: var(--storm-chaser-overlay-radius, 32px); background: rgba(8, 12, 18, 0.82); transition: border-color 0.22s; box-shadow: rgba(0, 0, 0, 0.48) 0px 12px 32px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
.storm-chaser-overlay-frame-no-shadow { box-shadow: none; }
.storm-chaser-overlay-map { position: absolute; inset: 0px; }
.storm-chaser-overlay-map .mapboxgl-canvas { outline: none; }
.storm-chaser-overlay-state { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; padding: 18px; pointer-events: none; color: rgb(237, 247, 255); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 700; text-align: center; text-shadow: rgba(0, 0, 0, 0.82) 0px 1px 3px; }
.storm-chaser-overlay-state span { max-width: min(360px, 80vw); padding: 8px 12px; border: 1px solid rgba(207, 234, 255, 0.25); border-radius: 8px; background: rgba(8, 12, 18, 0.72); box-shadow: rgba(0, 0, 0, 0.32) 0px 8px 22px; }
.storm-chaser-overlay-marker { --storm-chaser-marker-scale: 1.18; }
.storm-chaser-overlay-marker .storm-chaser-marker-hit { cursor: default; }
.locations-overlay-hint { font-size: 11px; color: rgb(68, 68, 68); line-height: 1.5; }
.data-type-toggle { display: flex; gap: 3px; margin-bottom: 10px; }
.data-type-btn { flex: 1 1 0%; padding: 6px 0px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: rgb(136, 136, 136); font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.15s; }
.data-type-btn:hover { background: rgba(255, 255, 255, 0.12); color: rgb(204, 204, 204); }
.data-type-btn.active { background: rgba(65, 139, 185, 0.15); border-color: rgba(65, 139, 185, 0.4); color: rgb(65, 139, 185); }
.panel-section { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.section-label { font-size: 11px; font-weight: 600; color: rgb(102, 102, 102); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.tool-buttons { display: flex; justify-content: center; gap: 4px; }
.panel-section--tools { padding-top: 8px; padding-bottom: 8px; }
.tool-btn { position: relative; height: 28px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; background: rgba(255, 255, 255, 0.035); color: rgb(124, 136, 145); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 650; transition: 0.15s; }
.tool-btn-icon { flex: 1 1 0px; min-width: 0px; width: auto; gap: 0px; padding: 0px; }
.tool-icon-image { width: 14px; height: 14px; object-fit: contain; opacity: 0.92; pointer-events: none; }
.tool-btn:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: rgb(172, 185, 195); }
.tool-btn.active { background: rgba(255, 255, 255, 0.035); border-color: rgba(143, 184, 220, 0.5); color: rgb(143, 184, 220); }
.tool-btn.error { border-color: rgba(214, 84, 84, 0.55); color: rgb(229, 141, 141); }
.tool-btn.active .tool-icon-image { opacity: 1; }
.tool-btn:disabled { opacity: 0.55; cursor: default; }
.storm-track-controls, .draw-tool-controls, .layout-tool-controls { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.storm-track-controls { display: flex; flex-direction: column; gap: 10px; }
.storm-track-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.storm-track-title { color: rgb(200, 209, 224); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.storm-track-field { display: flex; flex-direction: column; gap: 5px; }
.storm-track-label-row { display: flex; align-items: center; justify-content: space-between; }
.storm-track-label { color: rgb(200, 209, 224); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.storm-track-group { display: flex; flex-direction: column; gap: 10px; padding: 10px 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.storm-track-pill-row { display: flex; padding: 2px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; gap: 0px; }
.storm-track-pill { flex: 1 1 0%; min-width: 0px; height: 26px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; background: transparent; color: rgb(214, 222, 235); font-size: 11px; font-weight: 700; letter-spacing: 0.15px; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s; }
.storm-track-pill:hover { color: rgb(255, 255, 255); }
.storm-track-pill.active { background: rgb(65, 139, 185); color: rgb(255, 255, 255); }
.storm-track-pill:disabled { opacity: 0.42; cursor: not-allowed; }
.storm-track-pill-row--sm .storm-track-pill { height: 24px; font-size: 10.5px; }
.storm-track-size-slider { width: 100%; appearance: none; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); outline: none; }
.storm-track-size-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); background: rgba(200, 210, 228, 0.9); cursor: pointer; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px; }
.storm-track-value { color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.storm-track-color-input { width: 22px; height: 22px; padding: 0px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; background: transparent; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 0px 2px, rgba(0, 0, 0, 0.35) 0px 1px 3px; overflow: hidden; }
.storm-track-color-input::-webkit-color-swatch-wrapper { padding: 0px; }
.storm-track-color-input::-webkit-color-swatch { border: 0px; border-radius: 50%; }
.draw-tool-color-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.draw-tool-label { color: rgb(174, 184, 207); font-size: 12px; font-weight: 700; }
.draw-tool-width-row { display: flex; align-items: center; justify-content: space-between; margin: 6px 0px 5px; }
.draw-tool-value { color: rgb(143, 155, 176); font-size: 11px; font-weight: 700; }
.draw-tool-icon-actions { display: flex; align-items: center; gap: 6px; }
.draw-tool-icon-btn { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; background: rgba(255, 255, 255, 0.06); color: rgb(207, 217, 238); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; transition: 0.15s; }
.draw-tool-icon-btn--subtle { background: transparent; border-color: rgba(255, 255, 255, 0.08); color: rgb(112, 123, 142); }
.draw-tool-icon-btn--subtle:hover:not(:disabled) { background: rgba(255, 90, 90, 0.12); border-color: rgba(255, 90, 90, 0.32); color: rgb(255, 179, 179); }
.draw-tool-icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
.draw-tool-icon-btn:disabled { opacity: 0.4; cursor: default; }
.draw-tool-icon-btn:focus-visible { border-color: rgba(65, 139, 185, 0.5); box-shadow: rgba(65, 139, 185, 0.28) 0px 0px 0px 2px; }
.draw-tool-slider { width: 100%; margin: 3px 0px 8px; appearance: none; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgb(255, 255, 255), rgb(136, 136, 136), rgb(0, 0, 0) 10%, rgb(255, 61, 61) 11.5%, rgb(255, 255, 61) 25%, rgb(61, 255, 61), rgb(61, 255, 255), rgb(61, 61, 255), rgb(255, 61, 255), rgb(255, 61, 61)); outline: none; }
.draw-tool-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.95); background: var(--draw-thumb-color, #74d0ff); cursor: pointer; }
.draw-tool-size-slider { width: 100%; margin: 0px 0px 2px; appearance: none; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); outline: none; }
.draw-tool-size-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.95); background: rgb(207, 217, 238); cursor: pointer; }
.layout-buttons { display: flex; gap: 6px; }
.forecast-hour-dd { position: relative; }
.forecast-hour-dd.open .init-time-btn { border-color: rgba(65, 139, 185, 0.55); }
.forecast-hour-dd .init-time-label { font-variant-numeric: tabular-nums; }
.forecast-hour-dd-popover { margin-top: 6px; }
.forecast-hour-dd-popover .forecast-hour-grid { max-height: 260px; }
.forecast-hour-grid { display: grid; grid-template-columns: repeat(8, minmax(0px, 1fr)); gap: 4px; max-height: 205px; overflow-y: auto; padding: 1px; scrollbar-width: thin; }
.forecast-hour-btn { width: 100%; height: 25px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; background: rgb(65, 139, 185); color: rgb(241, 249, 255); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: 0.12px; text-shadow: rgba(0, 0, 0, 0.18) 0px 1px 0px; cursor: pointer; box-shadow: rgba(255, 255, 255, 0.18) 0px 1px inset; transition: 0.14s; }
.forecast-hour-btn:hover { background: rgb(88, 148, 195); border-color: rgba(255, 255, 255, 0.28); color: rgb(255, 255, 255); }
.forecast-hour-btn.active { background: rgb(42, 92, 132); border-color: rgba(255, 255, 255, 0.35); color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; }
.forecast-hour-btn.unavailable, .forecast-hour-btn:disabled { background: rgb(132, 139, 150); border-color: rgb(148, 155, 166); color: rgb(32, 37, 47); text-shadow: none; cursor: default; box-shadow: none; }
.forecast-hour-btn.unavailable:hover, .forecast-hour-btn:disabled:hover { background: rgb(132, 139, 150); border-color: rgb(148, 155, 166); color: rgb(32, 37, 47); }
.layout-btn { flex: 1 1 0%; height: 28px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; color: rgb(124, 136, 145); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.15s; }
.layout-btn:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: rgb(172, 185, 195); }
.layout-btn.active { background: rgba(255, 255, 255, 0.035); border-color: rgba(143, 184, 220, 0.5); color: rgb(143, 184, 220); }
.lock-btn { gap: 2px; }
.lock-menu-wrap { position: relative; }
.lock-menu { position: absolute; top: calc(100% + 4px); right: 0px; min-width: 200px; background: rgb(27, 30, 36); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 6px; z-index: 50; box-shadow: rgba(0, 0, 0, 0.45) 0px 4px 18px; display: flex; flex-direction: column; gap: 2px; }
.lock-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: rgb(204, 204, 204); font-size: 12px; cursor: pointer; user-select: none; }
.lock-menu-item:hover { background: rgba(255, 255, 255, 0.06); color: rgb(255, 255, 255); }
.lock-menu-item input[type="checkbox"] { accent-color: rgb(65, 139, 185); margin: 0px; }
.sampler-menu-wrap { position: relative; flex: 1 1 0px; min-width: 0px; display: flex; }
.sampler-menu-wrap > .tool-btn { flex: 1 1 0px; min-width: 0px; width: 100%; }
.sampler-menu { position: absolute; top: calc(100% + 4px); left: 50%; transform: translate(-50%); min-width: 200px; background: rgb(27, 30, 36); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; padding: 6px; z-index: 50; box-shadow: rgba(0, 0, 0, 0.45) 0px 4px 18px; display: flex; flex-direction: column; gap: 2px; }
.pane-jump-widget { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 6px; }
.pane-jump-widget.awips { grid-template-columns: 1.7fr 1fr; grid-template-rows: repeat(4, 24px); gap: 4px; }
.pane-jump-widget.awips .pane-jump-btn { height: 24px; }
.pane-jump-btn { height: 28px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; background: rgba(255, 255, 255, 0.05); color: rgb(155, 167, 197); font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.15s; }
.pane-jump-btn:hover { border-color: rgba(255, 255, 255, 0.28); color: rgb(213, 222, 245); background: rgba(255, 255, 255, 0.1); }
.pane-jump-btn.active { border-color: rgba(143, 184, 220, 0.5); color: rgb(143, 184, 220); background: transparent; }
.pane-jump-widget.awips .pane-jump-btn.awips-main { grid-area: 1 / 1 / span 4; height: auto; font-size: 16px; }
.pane-control-group { padding: 12px 16px; }
.pane-subsection + .pane-subsection { margin-top: 10px; padding-top: 10px; }
.panel-select { width: 100%; background: rgba(255, 255, 255, 0.06); color: rgb(221, 221, 221); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 8px 26px 8px 10px; font-size: 13px; cursor: pointer; outline: none; margin-bottom: 10px; transition: border-color 0.15s; appearance: none; text-align-last: right; }
.panel-select option { text-align: left; }
.data-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 5px; margin: 0px -16px 10px; padding: 0px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.data-type-btn { height: 28px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; background: rgba(255, 255, 255, 0.03); color: rgb(155, 162, 173); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.data-type-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgb(223, 227, 234); }
.data-type-btn.active { background: rgb(65, 139, 185); border-color: rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); }
.pane-mapping-note { font-size: 12px; color: rgb(136, 146, 160); line-height: 1.4; padding: 10px 2px; }
.panel-field { position: relative; margin-bottom: 8px; }
.panel-field::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: rgb(221, 221, 221); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); mask-repeat: no-repeat; mask-position: center center; mask-size: 10px 10px; pointer-events: none; }
.panel-field-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 600; color: rgb(136, 146, 160); letter-spacing: 0.6px; text-transform: uppercase; pointer-events: none; z-index: 1; white-space: nowrap; }
.panel-field > .panel-select, .panel-field .init-time-btn { padding-left: 84px; }
.panel-field--compact > .panel-select, .panel-field--compact .init-time-btn { padding-left: 48px; }
.panel-field > .panel-select { margin-bottom: 0px; }
.panel-field > .init-time-selector { margin-bottom: 0px; }
.panel-select:hover { border-color: rgba(255, 255, 255, 0.2); }
.panel-select:focus { border-color: rgba(65, 139, 185, 0.5); }
.panel-select option { background: rgb(26, 26, 46); color: rgb(255, 255, 255); }
.model-compare-mode-row { display: flex; padding: 3px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; gap: 0px; }
.model-compare-mode-btn { flex: 1 1 0%; min-width: 0px; height: 26px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; background: transparent; color: rgb(170, 170, 170); font-size: 10.5px; font-weight: 700; letter-spacing: 0.15px; line-height: 1.1; white-space: pre-line; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s; }
.model-compare-mode-btn:hover { color: rgb(221, 221, 221); }
.model-compare-mode-btn.blocked { color: rgba(255, 255, 255, 0.34); cursor: not-allowed; }
.model-compare-mode-btn.blocked:hover { color: rgba(255, 255, 255, 0.5); }
.model-compare-mode-btn.active { background: rgb(65, 139, 185); color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.18) 0px 1px 0px; box-shadow: rgba(255, 255, 255, 0.24) 0px 1px inset; }
.model-compare-mode-hint { margin: 7px 8px 0px; color: rgba(198, 217, 232, 0.86); font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; }
.init-time-selector { position: relative; margin-bottom: 10px; }
.init-time-btn { display: flex; align-items: center; gap: 6px; width: 100%; background: rgba(255, 255, 255, 0.06); color: rgb(221, 221, 221); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 8px 26px 8px 10px; font-size: 13px; cursor: pointer; transition: border-color 0.15s; box-sizing: border-box; }
.init-time-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.init-time-btn .init-time-label { flex: 1 1 0%; text-align: right; }
.init-time-btn .init-time-status { font-size: 12px; font-weight: 600; }
.init-time-btn .init-time-arrow { flex-shrink: 0; opacity: 0.5; }
.init-time-dropdown { position: absolute; top: calc(100% + 4px); left: 0px; right: 0px; background: rgb(28, 33, 39); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 8px; max-height: 280px; overflow-y: auto; z-index: 100; box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 44px, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px; }
.init-time-item { position: relative; display: flex; align-items: center; gap: 6px; padding: 9px 12px; cursor: pointer; font-size: 13px; color: rgb(221, 221, 221); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.1s; }
.init-time-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.init-time-item:hover { background: rgba(255, 255, 255, 0.08); }
.init-time-item.active { color: rgb(240, 242, 245); background: rgba(65, 139, 185, 0.18); font-weight: 500; }
.init-time-item.active::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 2px; background: rgb(65, 139, 185); }
.init-time-item .init-time-label { flex: 1 1 0%; }
.init-time-item .init-time-status { font-size: 12px; font-weight: 600; }
.model-selector-dropdown { max-height: 420px; }
.model-selector-category { padding: 6px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: rgb(196, 202, 210); background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.model-selector-category + .model-selector-category, .init-time-item + .model-selector-category { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dropdown-filter-pills { position: sticky; top: 0px; z-index: 1; display: flex; gap: 6px; padding: 8px; background: rgb(28, 33, 39); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.dropdown-filter-pill { flex: 1 1 0%; padding: 6px 10px; font-size: 12px; font-weight: 600; color: rgb(196, 202, 210); background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.dropdown-filter-pill:hover { background: rgba(255, 255, 255, 0.06); }
.dropdown-filter-pill.active { color: rgb(143, 184, 220); border-color: rgba(143, 184, 220, 0.5); background: transparent; }
.model-selector-category:first-child { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
.var-category { background: rgba(255, 255, 255, 0.035); border-top: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-left: -16px; margin-right: -16px; transition: background 0.12s; }
.var-category + .var-category { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
.var-category:first-child { margin-top: 16px; }
.pane-subsection .var-category:first-child { margin-top: 0px; }
.var-category.open { background: rgba(255, 255, 255, 0.05); }
.var-category-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: rgb(29, 29, 40); cursor: pointer; user-select: none; transition: background 0.12s; }
.var-category-header:hover { background: rgb(37, 37, 50); }
.var-category-arrow { width: 13px; height: 13px; color: rgb(144, 149, 160); transition: transform 0.15s, color 0.12s; flex-shrink: 0; }
.var-category.open .var-category-arrow { transform: rotate(90deg); color: rgb(196, 200, 207); }
.var-category-name { font-size: 12.5px; font-weight: 600; color: rgb(208, 212, 219); letter-spacing: 0.1px; }
.var-category-items { display: none; padding: 4px 16px 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.var-category.open .var-category-items { display: block; }
.var-tilt-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px 10px; margin-bottom: 6px; }
.var-tilt-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(136, 136, 136); flex-shrink: 0; }
.var-tilt-buttons { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 3px; min-width: 0px; }
.var-tilt-btn { flex: 1 1 0px; min-width: 0px; height: 28px; padding: 0px 2px; font-size: 11px; color: rgb(170, 170, 170); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; cursor: pointer; font-family: inherit; text-align: center; white-space: nowrap; transition: 0.12s; }
.var-tilt-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: rgb(221, 221, 221); }
.var-tilt-btn.active { background: rgb(65, 139, 185); border-color: transparent; color: rgb(255, 255, 255); }
.var-tilt-btn.active:hover:not(:disabled) { background: rgb(65, 139, 185); color: rgb(255, 255, 255); }
.var-tilt-btn.placeholder { flex: 0 0 auto; padding: 3px 8px; color: rgb(102, 102, 102); cursor: default; opacity: 0.6; }
.var-item { position: relative; padding: 5px 24px 5px 23px; margin-right: -16px; font-size: 12.5px; color: rgb(165, 171, 180); border-radius: 2px; cursor: pointer; transition: color 0.12s, background 0.12s; line-height: 1.35; }
.var-item:hover { color: rgb(228, 231, 235); background: linear-gradient(to right, transparent 0px, transparent 14px, rgba(255, 255, 255, 0.024) 14px, rgba(255, 255, 255, 0.024) 100%); }
.var-item.active { color: rgb(240, 242, 245); background: linear-gradient(to right, transparent 0px, transparent 14px, rgba(65, 139, 185, 0.2) 14px, rgba(65, 139, 185, 0.2) 100%); font-weight: 500; }
.var-item.active::before { content: ""; position: absolute; left: 14px; top: 0px; bottom: 0px; width: 2px; background: rgb(65, 139, 185); }
.var-subcategory-header { padding: 8px 4px 3px; font-size: 10px; color: rgb(164, 170, 180); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
.toggle-panel-btn { position: absolute; top: 10px; left: 12px; width: 40px; height: 40px; background: rgba(16, 16, 28, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: rgb(204, 204, 204); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 15; transition: 0.15s; }
.toggle-panel-btn:hover { background: rgba(30, 30, 50, 0.9); color: rgb(255, 255, 255); }
.toggle-panel-btn.hidden { display: none; }
.top-bar { position: absolute; top: 0px; left: 0px; right: 0px; pointer-events: none; z-index: 10; padding: 10px 10px 10px 60px; display: flex; justify-content: flex-end; gap: 8px; }
.top-bar.hidden { display: none; }
.top-bar-select { pointer-events: auto; background: rgba(16, 16, 28, 0.85); backdrop-filter: blur(12px); color: rgb(221, 221, 221); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; outline: none; transition: border-color 0.15s; }
.top-bar-select:hover { border-color: rgba(255, 255, 255, 0.3); }
.top-bar-select option { background: rgb(26, 26, 46); color: rgb(255, 255, 255); }
.pane-header { position: absolute; top: 0px; left: 0px; right: 0px; pointer-events: none; z-index: 10; padding: 10px; display: flex; justify-content: flex-end; gap: 8px; }
.map-pane.primary-pane .pane-header { padding-left: 60px; }
.layout-dual .pane-header { padding: 8px; }
.layout-quad .pane-header, .layout-awips .pane-header { padding: 6px; }
.pane-header .top-bar-select { box-sizing: border-box; height: 32px; padding: 0px 10px; font-size: 13px; font-weight: 600; line-height: 1; max-width: 200px; }
.layout-dual .pane-header .top-bar-select { height: 28px; padding: 0px 8px; font-size: 12px; border-radius: 7px; max-width: 180px; }
.layout-quad .pane-header .top-bar-select, .layout-awips .pane-header .top-bar-select { height: 26px; padding: 0px 8px; font-size: 11px; border-radius: 6px; max-width: 150px; }
.pane-container { position: absolute; inset: 0px; display: grid; transition: left 0.25s; }
.pane-container.panel-open { left: var(--panel-width, 280px); }
.pane-container.timeline-open { bottom: 52px; }
.pane-container.timeline-open.model-compare-open { bottom: 106px; }
.pane-container.layout-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.pane-container.layout-dual { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 1px; }
.pane-container.layout-quad { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; }
.pane-container.layout-awips { grid-template-columns: 3fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 1px; }
.pane-container.layout-awips .map-pane.awips-main { grid-area: 1 / 1 / -1; }
.pane-container.layout-awips .map-pane:not(.awips-main) { grid-column: 2; }
.pane-container.layout-awips .map-pane:not(.awips-main) .mapboxgl-canvas-container { pointer-events: none; }
.map-pane { position: relative; overflow: hidden; border: 1px solid transparent; transition: border-color 0.15s; }
.map-pane.active-pane { border-color: rgba(65, 139, 185, 0.4); }
.map-pane .mapboxgl-map { width: 100%; height: 100%; }
.city-data-overlay { position: absolute; inset: 0px; pointer-events: none; z-index: 4; }
.pane-label { position: absolute; top: 10px; right: 10px; box-sizing: border-box; height: 40px; display: none; align-items: center; background: rgba(16, 16, 28, 0.82); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 0px 14px; font-size: 16px; color: rgb(255, 255, 255); font-weight: 600; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 5; pointer-events: none; }
.layout-dual .pane-label, .layout-quad .pane-label, .layout-awips .pane-label { display: inline-flex; }
.pane-container:not(.panel-open) .pane-label { display: none; }
.layout-dual .pane-label { top: 8px; right: 8px; height: 34px; padding: 0px 12px; font-size: 14px; border-radius: 7px; }
.layout-quad .pane-label, .layout-awips .pane-label { top: 6px; right: 6px; height: 26px; padding: 0px 10px; font-size: 12px; border-radius: 6px; }
.pane-container.layout-awips .map-pane.awips-main .pane-label { top: 8px; right: 8px; height: 34px; padding: 0px 12px; font-size: 14px; border-radius: 7px; }
.pane-awips-side-header { position: absolute; top: 4px; left: 4px; right: auto; box-sizing: border-box; max-width: calc(100% - 8px); min-height: 34px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; background: rgba(16, 16, 28, 0.82); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; padding: 3px 6px; color: rgb(255, 255, 255); font-variant-numeric: tabular-nums; z-index: 5; pointer-events: none; }
.pane-awips-side-time, .pane-awips-side-product { display: block; min-width: 0px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.05; }
.pane-awips-side-time { font-size: 11px; font-weight: 700; }
.pane-awips-side-product { font-size: 11px; font-weight: 650; opacity: 0.95; }
.pane-container:not(.panel-open) .map-pane.primary-pane .pane-time-label { left: 60px; }
.pane-time-label { position: absolute; top: 10px; left: 10px; box-sizing: border-box; height: 40px; display: inline-flex; align-items: center; background: rgba(16, 16, 28, 0.82); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 0px 14px; font-size: 16px; color: rgb(255, 255, 255); font-weight: 600; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 5; pointer-events: none; }
.layout-dual .pane-time-label { top: 8px; left: 8px; height: 34px; padding: 0px 12px; font-size: 14px; border-radius: 7px; }
.layout-quad .pane-time-label, .layout-awips .pane-time-label { top: 6px; left: 6px; height: 26px; padding: 0px 10px; font-size: 12px; border-radius: 6px; }
.pane-container.layout-awips .map-pane.awips-main .pane-time-label { top: 8px; left: 8px; height: 34px; padding: 0px 12px; font-size: 14px; border-radius: 7px; }
.map-context-menu { position: absolute; min-width: 210px; background: rgba(16, 16, 28, 0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 20px; z-index: 10; overflow: hidden; }
.warning-choice-menu { width: max-content; min-width: 240px; max-width: min(380px, 100% - 24px); overflow-y: auto; border-color: rgba(154, 190, 255, 0.2); background: linear-gradient(rgba(22, 25, 38, 0.96), rgba(14, 16, 26, 0.94)), rgba(16, 16, 28, 0.94); box-shadow: rgba(0, 0, 0, 0.55) 0px 14px 32px, rgba(255, 255, 255, 0.06) 0px 1px inset; }
.settings-select.active { border-color: rgba(65, 139, 185, 0.6); background: rgba(65, 139, 185, 0.22); color: rgb(214, 236, 255); }
.settings-row-hint { padding-top: 4px; padding-bottom: 8px; }
.settings-row-hint-text { font-size: 12px; line-height: 1.4; color: rgb(138, 148, 163); font-style: italic; }
.storm-track-widget { --wf-storm-color: #3dd1ff; position: absolute; right: 8px; bottom: 78px; width: min(320px, 100% - 16px); padding: 12px; border: 1px solid color-mix(in srgb,var(--wf-storm-color) 38%,transparent); border-radius: 12px; background: linear-gradient(rgba(18, 22, 30, 0.94), rgba(12, 15, 22, 0.92)), rgba(12, 15, 22, 0.92); box-shadow: rgba(0, 0, 0, 0.38) 0px 18px 34px; backdrop-filter: blur(10px); z-index: 7; }
.storm-track-widget-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; cursor: grab; user-select: none; }
.storm-track-widget-header:active { cursor: grabbing; }
.storm-track-widget-title { color: rgb(255, 242, 222); font-size: 14px; font-weight: 800; }
.storm-track-widget-subtitle { margin-top: 2px; color: rgb(155, 167, 188); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.storm-track-widget-speed { color: var(--wf-storm-color); font-size: 18px; font-weight: 800; line-height: 1; white-space: nowrap; }
.storm-track-widget-phase { margin-top: 10px; color: rgb(212, 222, 238); font-size: 12px; line-height: 1.45; }
.storm-track-widget-phase:empty { display: none; }
.storm-track-widget-error { margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(255, 120, 120, 0.26); border-radius: 10px; background: rgba(255, 92, 92, 0.12); color: rgb(255, 208, 208); font-size: 12px; line-height: 1.4; }
.storm-track-impact-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.storm-track-impact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.043); }
.storm-track-impact-city { color: rgb(247, 251, 255); font-size: 13px; font-weight: 700; }
.storm-track-impact-meta { display: flex; align-items: center; gap: 8px; color: var(--wf-storm-color); font-size: 13px; font-weight: 700; white-space: nowrap; }
.map-context-item { width: 100%; display: block; text-align: left; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.08); border-image: initial; background: transparent; color: rgb(220, 228, 255); padding: 10px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.map-context-item:last-child { border-bottom: 0px; }
.map-context-item:hover { background: rgba(65, 139, 185, 0.14); }
.warning-choice-item { display: grid; grid-template-columns: 16px max-content; align-items: center; gap: 11px; padding: 12px 14px; }
.warning-choice-item:hover { background: rgba(108, 169, 232, 0.16); }
.warning-choice-swatch { width: 14px; height: 14px; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 0px 1px, color-mix(in srgb, currentcolor 18%, transparent) 0px 0px 12px; }
.warning-choice-copy { min-width: 0px; max-width: 320px; display: flex; flex-direction: column; gap: 2px; }
.warning-choice-title { color: rgb(241, 245, 255); font-size: 14px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warning-choice-meta { color: rgba(210, 219, 240, 0.66); font-size: 11px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-context-item:disabled { color: rgb(128, 137, 168); cursor: default; background: transparent; }
.wf-warning-popup { --wf-popup-fill: rgba(50, 50, 50, .95); --wf-popup-border: rgb(128, 128, 128); }
.warning-popup-card { position: relative; width: fit-content; min-width: min(320px, -24px + 100vw); max-width: min(500px, -24px + 100vw); background: var(--wf-popup-fill); border: 1px solid var(--wf-popup-border); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 8px; color: rgb(239, 242, 250); padding: 10px 14px 8px; font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.wf-warning-popup .mapboxgl-popup-content { background: transparent; padding: 0px; border-radius: 0px; box-shadow: none; }
.wf-warning-popup { z-index: 50; }
.wf-warning-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { position: relative; border-top-color: var(--wf-popup-border, rgba(178, 184, 199, .55)); border-top-width: 16px; border-left-width: 14px; border-right-width: 14px; }
.wf-warning-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip::after { content: ""; position: absolute; left: -12px; top: -16px; width: 0px; height: 0px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid var(--wf-popup-fill, rgba(62, 64, 73, .92)); }
.wf-warning-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .wf-warning-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .wf-warning-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--wf-popup-fill, rgba(62, 64, 73, .92)); border-bottom-width: 14px; border-left-width: 12px; border-right-width: 12px; }
.wf-warning-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .wf-warning-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--wf-popup-fill, rgba(62, 64, 73, .92)); border-top-width: 14px; border-left-width: 12px; border-right-width: 12px; }
.wf-warning-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip, .wf-warning-popup.mapboxgl-popup-anchor-left-top .mapboxgl-popup-tip, .wf-warning-popup.mapboxgl-popup-anchor-left-bottom .mapboxgl-popup-tip { border-right-color: var(--wf-popup-fill, rgba(62, 64, 73, .92)); border-right-width: 14px; border-top-width: 12px; border-bottom-width: 12px; }
.wf-warning-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip, .wf-warning-popup.mapboxgl-popup-anchor-right-top .mapboxgl-popup-tip, .wf-warning-popup.mapboxgl-popup-anchor-right-bottom .mapboxgl-popup-tip { border-left-color: var(--wf-popup-fill, rgba(62, 64, 73, .92)); border-left-width: 14px; border-top-width: 12px; border-bottom-width: 12px; }
.wf-warning-popup .mapboxgl-popup-tip { filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 1px 2px); }
.warning-popup-title { color: var(--wf-warning-accent, #89c9ff); font-size: 17px; line-height: 1.18; letter-spacing: -0.2px; font-weight: 800; text-shadow: rgba(0, 0, 0, 0.45) 0px 1px 3px; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.warning-popup-publoc-close { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0px; border: 0px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); color: rgba(255, 255, 255, 0.5); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; pointer-events: auto; }
.warning-popup-publoc-close:hover, .warning-popup-publoc-close:focus-visible { background: rgba(0, 0, 0, 0.36); color: rgba(255, 255, 255, 0.9); outline: none; }
.warning-popup-publoc-time { margin-top: 2px; font-size: 12px; line-height: 1.18; font-weight: 500; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.warning-popup-publoc-name { color: rgba(255, 255, 255, 0.85); font-size: 17px; line-height: 1.18; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.45) 0px 1px 3px; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.warning-popup-body { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.warning-popup-chaser-card { display: flex; align-items: center; gap: 12px; min-width: 260px; margin-top: 4px; }
.warning-popup-chaser-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgb(42, 42, 42); border: 1px solid rgba(255, 255, 255, 0.12); }
.warning-popup-chaser-titles { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; gap: 2px; }
.warning-popup-chaser-name { font-size: 15px; font-weight: 700; color: rgb(245, 179, 77); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px; }
.warning-popup-chaser-reported { font-size: 12px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warning-popup-chaser-reported-label { color: rgba(255, 255, 255, 0.55); margin-right: 2px; }
.warning-popup-chaser-reported-value { color: rgb(255, 255, 255); font-weight: 600; }
.warning-popup-chaser-play { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0px 0px 0px 2px; border-radius: 50%; background: linear-gradient(rgb(59, 143, 213), rgb(42, 111, 174)); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.15); font-size: 11px; line-height: 1; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 4px; transition: filter 0.15s, transform 0.05s; }
.warning-popup-chaser-play:hover:not(:disabled) { filter: brightness(1.1); }
.warning-popup-chaser-play:active:not(:disabled) { transform: scale(0.96); }
.warning-popup-chaser-play.is-offline { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.4); cursor: default; box-shadow: none; }
.warning-popup-chaser-play.is-loading { opacity: 0.7; cursor: progress; }
.warning-popup-custom-description { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: rgba(230, 240, 255, 0.92); white-space: pre-wrap; max-width: 280px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.warning-popup-custom-media { margin-top: 8px; max-width: 280px; }
.warning-popup-custom-media img, .warning-popup-custom-media video { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; background: rgb(0, 0, 0); }
.warning-popup-custom-media a { color: rgb(116, 198, 255); font-size: 12.5px; text-decoration: underline; }
.warning-popup-info-btn { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(87, 173, 255, 0.85); background: rgba(20, 30, 45, 0.55); color: rgba(91, 174, 255, 0.98); font-size: 14.5px; font-weight: 600; font-style: italic; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0px 0px 0px 0.5px; margin-left: auto; }
.warning-popup-info-btn:hover { background: rgba(31, 45, 66, 0.75); }
.wf-oktraffic-popup { z-index: 55; }
.wf-oktraffic-popup .mapboxgl-popup-content { background: transparent; padding: 0px; border-radius: 0px; box-shadow: none; }
.wf-oktraffic-popup .mapboxgl-popup-close-button { width: 26px; height: 26px; color: rgba(238, 247, 255, 0.92); font-size: 20px; line-height: 24px; z-index: 2; }
.wf-oktraffic-popup .mapboxgl-popup-tip { border-top-color: rgba(20, 184, 166, 0.88); border-bottom-color: rgba(20, 184, 166, 0.88); }
.oktraffic-popup-card { width: min(390px, -24px + 100vw); background: rgba(23, 28, 36, 0.95); border: 1px solid rgba(20, 184, 166, 0.48); border-radius: 8px; color: rgba(238, 247, 255, 0.96); box-shadow: rgba(0, 0, 0, 0.46) 0px 14px 36px; overflow: hidden; font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.oktraffic-popup-header { padding: 10px 32px 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.oktraffic-popup-title { font-size: 15px; font-weight: 800; line-height: 1.2; }
.oktraffic-popup-meta, .oktraffic-popup-details, .oktraffic-popup-status { font-size: 11px; line-height: 1.35; color: rgba(226, 235, 245, 0.72); }
.oktraffic-popup-meta { margin-top: 3px; }
.oktraffic-popup-video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 230px; object-fit: contain; background: rgb(5, 8, 13); }
.oktraffic-popup-video-empty { display: flex; min-height: 160px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 16px; text-align: center; color: rgba(226, 235, 245, 0.78); box-sizing: border-box; }
.oktraffic-popup-status { min-height: 18px; padding: 5px 12px 0px; }
.oktraffic-popup-directions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
.oktraffic-popup-directions button { min-width: 38px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: rgba(236, 245, 255, 0.85); font-size: 11px; font-weight: 750; cursor: pointer; }
.oktraffic-popup-directions button.active { border-color: rgba(20, 184, 166, 0.9); background: rgba(20, 184, 166, 0.22); color: rgb(255, 255, 255); }
.oktraffic-popup-directions button:disabled { opacity: 0.42; cursor: default; }
.oktraffic-popup-details { padding: 0px 12px 8px; }
.oktraffic-popup-link { display: block; padding: 8px 12px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgb(112, 216, 255); font-size: 12px; font-weight: 750; text-decoration: none; }
.oktraffic-popup-link:hover { color: rgb(166, 236, 255); text-decoration: underline; }
.warning-popup-time-list { margin-top: 0px; display: flex; flex-direction: column; gap: 0px; flex: 0 1 auto; min-width: 0px; }
.warning-popup-time-row { padding: 0px; display: flex; align-items: baseline; gap: 6px; }
.warning-popup-time-key { color: rgb(174, 181, 196); font-size: 13px; font-weight: 700; letter-spacing: 0.02px; white-space: nowrap; flex-shrink: 0; }
.warning-popup-time-value { color: rgb(241, 244, 252); font-size: 13px; font-weight: 700; line-height: 1.22; flex: 1 1 auto; min-width: 0px; text-align: left; }
.warning-popup-pager { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0px 2px; }
.warning-popup-pager-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0px 0px 1px; border: 0px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s; }
.warning-popup-pager-arrow:hover { background: rgba(255, 255, 255, 0.18); color: rgb(255, 255, 255); }
.warning-popup-dots { display: flex; align-items: center; gap: 6px; }
.warning-popup-dot { width: 6px; height: 6px; padding: 0px; border: 0px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.warning-popup-dot:hover { background: rgba(255, 255, 255, 0.6); }
.warning-popup-dot.active { background: rgb(255, 255, 255); transform: scale(1.18); }
.overlay-type-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(255, 255, 255, 0.2); }
.sounding-viewer-backdrop { position: fixed; inset: 0px; background: rgba(4, 6, 12, 0.68); backdrop-filter: blur(3px); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 18px; }
.sounding-viewer-card { width: min(1200px, -36px + 100vw); height: min(900px, -36px + 100vh); background: rgba(14, 16, 32, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 42px; display: grid; grid-template-rows: 38px minmax(0px, 1fr); overflow: hidden; }
.sounding-viewer-header { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0px 8px 0px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(8, 10, 22, 0.9); }
.sounding-viewer-title { color: rgb(219, 227, 255); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.65) 0px 1px 2px; }
.sounding-viewer-close { width: 28px; height: 28px; border: 0px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: rgb(219, 227, 255); font-size: 20px; line-height: 1; cursor: pointer; }
.sounding-viewer-close:hover { background: rgba(255, 255, 255, 0.16); }
.sounding-viewer-body { width: 100%; height: 100%; min-height: 0px; display: grid; place-items: center; overflow: hidden; background: rgb(9, 13, 24); }
.sounding-viewer-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.sounding-viewer-loading, .sounding-viewer-error { color: rgb(219, 227, 255); font-size: 14px; padding: 14px; }
.sounding-viewer-error { color: rgb(255, 183, 192); }
.warning-text-backdrop { position: fixed; inset: 0px; background: rgba(4, 6, 12, 0.72); backdrop-filter: blur(3px); z-index: 81; display: flex; align-items: center; justify-content: center; padding: 18px; }
.warning-text-card { width: min(980px, -36px + 100vw); height: min(760px, -36px + 100vh); background: rgba(12, 15, 30, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 42px; display: flex; flex-direction: column; overflow: hidden; }
.warning-text-card > .warning-text-header { flex: 0 0 44px; }
.warning-text-card > .warning-text-subtitle { flex: 0 0 auto; }
.warning-text-card > .warning-text-details { flex: 0 0 auto; }
.warning-text-card > .warning-text-images { flex: 0 0 auto; }
.warning-text-card > .warning-text-body { flex: 1 1 auto; min-height: 0px; }
.warning-text-header { display: flex; align-items: center; justify-content: space-between; padding: 0px 8px 0px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(7, 9, 20, 0.9); }
.warning-text-title-wrap { min-width: 0px; display: flex; align-items: center; gap: 8px; }
.warning-text-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.warning-text-title { color: rgb(219, 227, 255); font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warning-text-close { width: 30px; height: 30px; border: 0px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: rgb(219, 227, 255); font-size: 22px; line-height: 1; cursor: pointer; }
.warning-text-close:hover { background: rgba(255, 255, 255, 0.16); }
.warning-text-subtitle { border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: rgb(186, 201, 239); font-size: 12px; padding: 8px 12px; }
.warning-text-details { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, 0.02); }
.warning-text-details-row { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.4; }
.warning-text-details-label { color: rgb(159, 176, 214); flex: 0 0 auto; }
.warning-text-details-value { color: rgb(255, 255, 255); font-weight: 600; flex: 1 1 auto; word-break: break-word; }
.warning-text-images { display: flex; gap: 8px; padding: 10px 12px; overflow: auto hidden; justify-content: safe center; background: rgb(9, 14, 26); border-bottom: 1px solid rgba(255, 255, 255, 0.06); height: 280px; min-height: 280px; max-height: 280px; box-sizing: border-box; }
.warning-text-image-item { flex: 0 0 auto; display: block; padding: 0px; margin: 0px; border-radius: 6px; overflow: hidden; background: rgb(0, 0, 0); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; }
.warning-text-image-item:hover { border-color: rgba(255, 255, 255, 0.25); }
.image-lightbox-backdrop { position: fixed; inset: 0px; background: rgba(4, 6, 12, 0.88); backdrop-filter: blur(4px); z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.image-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; box-shadow: rgba(0, 0, 0, 0.6) 0px 20px 60px; border-radius: 6px; }
.image-lightbox-img.is-zoomed { max-width: none; max-height: none; width: 200%; height: auto; cursor: zoom-out; }
.image-lightbox-close { position: fixed; top: 16px; right: 20px; width: 38px; height: 38px; border: 0px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); font-size: 26px; line-height: 1; cursor: pointer; z-index: 121; }
.image-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.warning-text-image-item img { display: block; height: 260px; width: auto; max-width: 480px; object-fit: contain; }
.warning-text-body { margin: 0px; padding: 12px; color: rgb(219, 227, 255); font-size: 12px; line-height: 1.38; overflow: auto; white-space: pre-wrap; background: rgb(9, 14, 26); }
.pane-colorbar-card { position: absolute; right: 8px; top: 44px; bottom: 14px; display: flex; flex-direction: column; align-items: center; z-index: 5; pointer-events: none; }
.pane-colorbar { width: 22px; flex: 1 1 0%; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; overflow: visible; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; background-clip: padding-box; pointer-events: auto; touch-action: none; cursor: ns-resize; }
.pane-colorbar-probe-line { position: absolute; left: -3px; right: -3px; height: 2px; margin-bottom: -1px; box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 0px 1px; pointer-events: none; z-index: 2; }
.pane-colorbar-probe-readout { position: absolute; right: calc(100% + 10px); transform: translateY(50%); display: flex; align-items: center; padding: 4px 8px; background: rgba(16, 16, 28, 0.92); border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 8px; white-space: nowrap; pointer-events: none; z-index: 3; }
.pane-colorbar-probe-value { color: rgb(255, 255, 255); font-size: 12px; font-weight: 700; letter-spacing: -0.2px; }
.pane-colorbar-labels { position: absolute; inset: 0px; pointer-events: none; }
.pane-colorbar-label { position: absolute; left: -6px; right: -6px; color: rgb(255, 255, 255); font-size: 10px; font-weight: 700; text-align: center; text-shadow: rgba(0, 0, 0, 0.75) 0px 1px 2px, rgba(0, 0, 0, 0.75) 0px 0px 2px; transform: translateY(-50%); white-space: nowrap; pointer-events: none; line-height: 1; letter-spacing: -0.3px; }
.pane-colorbar-label-long { font-size: 9px; letter-spacing: -0.6px; }
.pane-colorbar-label-xlong { font-size: 8px; letter-spacing: -0.7px; }
.pane-colorbar-unit { color: rgb(187, 187, 187); font-size: 11px; font-weight: 600; margin-top: 6px; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.8) 0px 1px 3px; }
#timeline { position: absolute; bottom: 0px; left: 0px; right: 0px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 16px; background: rgb(19, 22, 30); backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.06); z-index: 20; transition: left 0.25s; }
#timeline.panel-open { left: var(--panel-width, 280px); }
.timeline-main-row { display: flex; align-items: center; gap: 8px; }
.model-compare-strip-wrap { display: grid; grid-template-columns: 28px minmax(0px, 1fr) 28px; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 10px; background: rgba(255, 255, 255, 0.024); }
.model-compare-strip { min-width: 0px; overflow: auto hidden; scrollbar-width: none; padding-bottom: 1px; scroll-behavior: smooth; }
.model-compare-strip::-webkit-scrollbar { display: none; }
.model-compare-strip-track { display: flex; justify-content: center; gap: 8px; width: max-content; min-width: 100%; }
.model-compare-strip-track.scrubbing { cursor: grabbing; }
.model-compare-scroll-btn { width: 28px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; background: rgba(255, 255, 255, 0.055); color: rgb(197, 210, 232); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s; }
.model-compare-scroll-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.26); color: rgb(255, 255, 255); }
.model-compare-scroll-btn:disabled { opacity: 0.36; cursor: default; }
.model-compare-scroll-btn.hidden { visibility: hidden; }
.model-compare-chip { flex: 0 0 auto; min-width: 86px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: rgb(215, 227, 250); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 8px; cursor: pointer; transition: 0.15s; }
.model-compare-chip:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.model-compare-chip.selected { background: rgb(65, 139, 185); border-color: rgba(255, 255, 255, 0.28); color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(255, 255, 255, 0.24) 0px 1px inset; }
.model-compare-chip-title { font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.model-compare-chip-subtitle { font-size: 11px; font-weight: 600; color: rgb(182, 196, 223); line-height: 1; white-space: nowrap; }
.model-compare-chip.selected .model-compare-chip-subtitle { color: rgba(255, 255, 255, 0.78); }
.model-compare-empty { color: rgb(143, 154, 180); font-size: 12px; font-weight: 600; padding: 8px 2px 6px; white-space: nowrap; }
.outlook-bar { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 90px; display: grid; grid-template-rows: 45px 45px; background: rgb(0, 0, 0); border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 20; transition: left 0.25s; }
.outlook-bar.panel-open { left: var(--panel-width, 280px); }
.outlook-bar.embedded { z-index: 8; transition: none; }
.outlook-top-row { display: flex; min-width: 0px; overflow: auto hidden; scrollbar-width: none; background: rgb(5, 5, 6); }
.outlook-top-row::-webkit-scrollbar { display: none; }
.outlook-field-btn, .outlook-field-empty { flex: 1 1 0px; min-width: 96px; height: 45px; border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgba(255, 255, 255, 0.16) currentcolor currentcolor; border-image: initial; background: rgb(0, 0, 0); color: rgb(213, 217, 226); padding: 5px 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; cursor: pointer; }
.outlook-field-btn.discussion { min-width: 96px; flex: 1 1 0px; background: linear-gradient(rgba(74, 74, 74, 0.42), rgba(0, 0, 0, 0.95)); color: rgb(216, 216, 220); font-size: 11px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; }
.outlook-field-btn.selected { background: linear-gradient(180deg,#00000029,#00000070 56%,#00000029),var(--outlook-field-color, #7ea9ff); }
.outlook-field-title { color: rgb(242, 244, 249); font-size: 16px; font-weight: 700; line-height: 1.05; white-space: nowrap; }
.outlook-field-btn:not(.selected) .outlook-field-title { color: var(--outlook-field-color, #9cb6ff); }
.outlook-field-subtitle { color: rgb(242, 244, 249); font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: 0.15px; white-space: nowrap; }
.outlook-field-empty { color: rgb(141, 149, 168); font-size: 12px; font-weight: 600; cursor: default; }
.outlook-period-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(145px, calc(33.3333%)); overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: rgb(0, 0, 0); }
.outlook-period-row::-webkit-scrollbar { display: none; }
.outlook-period-card, .outlook-period-empty { height: 45px; border-width: 1px 1px 0px 0px; border-style: solid solid none none; border-color: rgba(255, 255, 255, 0.16) rgba(255, 255, 255, 0.16) currentcolor currentcolor; border-image: initial; background: rgb(5, 5, 6); color: rgb(239, 241, 247); padding: 3px 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; cursor: pointer; scroll-snap-align: start; }
.outlook-period-card.selected { background: linear-gradient(180deg,#00000029,#00000070 56%,#00000029),var(--outlook-threat-color, #d0c78f); }
.outlook-period-label { color: rgb(246, 248, 253); font-size: 15px; font-weight: 500; line-height: 1.05; white-space: nowrap; }
.outlook-period-threat { color: var(--outlook-threat-color, #f2c46e); font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; }
.outlook-period-card.selected .outlook-period-threat { color: rgb(255, 255, 255); }
.outlook-period-empty { grid-column: 1 / -1; color: rgb(141, 149, 168); font-size: 12px; font-weight: 600; cursor: default; }
@media (max-width: 900px) {
  .outlook-period-row { grid-auto-columns: minmax(130px, calc(38.4615%)); }
}
.timeline-btn { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: rgb(204, 204, 204); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; }
.timeline-btn:hover { background: rgba(255, 255, 255, 0.15); color: rgb(255, 255, 255); }
.timeline-btn:active { background: rgba(255, 255, 255, 0.2); }
.loop-bar { flex: 1 1 0%; padding: 0px 4px; transition: opacity 0.2s; }
.loop-bar.hidden { display: none; }
.loop-track { position: relative; height: 30px; cursor: pointer; }
.loop-track::before { content: ""; position: absolute; top: 50%; left: 0px; right: 0px; height: 6px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.08); border-radius: 3px; pointer-events: none; }
.loop-progress { display: none; }
.loop-thumb { position: absolute; top: 50%; width: 16px; height: 16px; background: rgb(65, 139, 185); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: auto; cursor: grab; box-shadow: rgba(65, 139, 185, 0.5) 0px 0px 6px; z-index: 10; }
.loop-thumb:active { cursor: grabbing; }
.loop-dot { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: background 0.3s; }
.loop-dot.loaded { background: rgba(76, 175, 80, 0.8); }
.loop-dot.pending { background: rgba(255, 255, 255, 0.15); }
.status-text { color: rgb(85, 85, 85); font-size: 11px; white-space: nowrap; }
.mapboxgl-ctrl-top-left { display: none !important; }
.side-panel::-webkit-scrollbar { width: 4px; }
.side-panel::-webkit-scrollbar-track { background: transparent; }
.side-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
.side-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
.settings-panel { padding: 0px 16px 16px; }
.overlay-modal-backdrop { position: fixed; inset: 0px; z-index: 60; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.overlay-modal-card { width: min(680px, 100%); max-height: min(82vh, 860px); overflow: hidden; display: flex; flex-direction: column; background: rgba(16, 16, 28, 0.98); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; box-shadow: rgba(0, 0, 0, 0.55) 0px 16px 38px; }
.overlay-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.overlay-modal-title { color: rgb(255, 255, 255); font-size: 21px; font-weight: 750; letter-spacing: -0.2px; }
.overlay-modal-close { width: 32px; height: 32px; border: 0px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: rgb(200, 208, 228); font-size: 25px; line-height: 0.9; cursor: pointer; }
.overlay-modal-close:hover { background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); }
.overlay-sections { flex: 1 1 0%; overflow: auto; padding: 10px 14px 14px; }
.overlay-section { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.03); margin-bottom: 10px; }
.overlay-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; }
.overlay-bucket-settings { margin: 4px 10px 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0px; overflow: hidden; }
.overlay-bucket-settings-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; gap: 12px; }
.overlay-bucket-settings-row + .overlay-bucket-settings-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.overlay-bucket-settings-label { font-size: 11px; color: rgb(141, 150, 168); white-space: nowrap; flex-shrink: 0; }
.overlay-display-style-select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3 4l2 2 2-2' fill='none' stroke='%23888' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") right 4px center no-repeat rgba(255, 255, 255, 0.1); color: rgb(204, 204, 204); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 5px; padding: 3px 18px 3px 6px; font-size: 11px; cursor: pointer; outline: none; appearance: none; }
.overlay-display-style-select:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.22); }
.overlay-display-style-select option { background: rgb(26, 29, 36); color: rgb(221, 221, 221); }
.overlay-slider-control { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0px; justify-content: flex-end; }
.overlay-slider { width: 100px; height: 3px; appearance: none; background: rgba(255, 255, 255, 0.18); border-radius: 2px; outline: none; cursor: pointer; flex-shrink: 1; min-width: 60px; }
.overlay-slider::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: rgb(65, 139, 185); border: 1.5px solid rgba(255, 255, 255, 0.9); cursor: pointer; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; }
.overlay-slider-value { font-size: 10px; color: rgb(110, 119, 136); min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.custom-alerts-panel, .field-reports-panel { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0px; padding: 6px 8px; gap: 6px; overflow-y: auto; }
.alerts-panel { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0px; }
.broadcast-alerts-panel { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0px; padding: 6px 8px; gap: 6px; overflow: hidden; }
.ba-content-stack { position: relative; flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; margin: 0px -8px; }
.ba-scroll { flex: 1 1 0%; min-height: 0px; overflow: hidden auto; display: flex; flex-direction: column; gap: 6px; padding: 0px 8px; }
.ba-scroll::-webkit-scrollbar { width: 4px; }
.ba-scroll::-webkit-scrollbar-track { background: transparent; }
.ba-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
.ba-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
.ba-inline-info-overlay { position: absolute; inset: 0px; display: flex; background: rgba(12, 15, 30, 0.98); z-index: 2; padding: 0px 8px; }
.ba-inline-info-overlay > .ba-inline-info { flex: 1 1 0%; border: 0px; border-radius: 0px; background: transparent; }
.ba-top-row { display: flex; align-items: center; gap: 6px; }
.ba-preset-dropdown { flex: 1 1 0%; min-width: 0px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3 4l2 2 2-2' fill='none' stroke='%23888' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") right 8px center no-repeat rgba(255, 255, 255, 0.08); color: rgb(221, 221, 221); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 5px 24px 5px 10px; font-size: 13px; cursor: pointer; outline: none; appearance: none; }
.ba-preset-dropdown:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
.ba-preset-dropdown option, .ba-preset-dropdown optgroup { background: rgb(26, 29, 36); color: rgb(221, 221, 221); }
.ba-settings-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: rgb(153, 153, 153); padding: 5px 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ba-settings-btn:hover { background: rgba(255, 255, 255, 0.14); color: rgb(204, 204, 204); }
.ba-settings-btn.active { color: rgb(101, 205, 255); }
.ba-audio-modal { width: min(380px, 100%); max-height: min(60vh, 500px); }
.ba-audio-modal-body { padding: 16px 20px 20px; overflow-y: auto; }
.ba-audio-settings-row { display: flex; align-items: center; gap: 10px; padding: 7px 0px; }
.ba-audio-settings-label { flex: 1 1 0%; min-width: 0px; font-size: 12.5px; color: rgb(192, 198, 208); display: flex; align-items: center; gap: 8px; }
.ba-audio-settings-row > .settings-toggle { flex-shrink: 0; }
.ba-audio-settings-row.indented { padding-left: 22px; }
.ba-audio-settings-row.indented .ba-audio-settings-label { font-size: 12px; color: rgb(154, 163, 174); }
.ba-audio-settings-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ba-audio-settings-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 10px 0px; }
.ba-audio-settings-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: rgb(125, 132, 143); margin-bottom: 4px; }
.ba-summary-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; font-size: 11px; font-weight: 700; line-height: 1; color: rgb(42, 36, 16); background: rgb(237, 193, 85); border: 1.5px solid rgb(58, 46, 16); border-radius: 10px; padding: 0px 6px; letter-spacing: 0.2px; }
.ba-scope-select { font-size: 11px; font-weight: 600; color: rgb(198, 208, 220); background: linear-gradient(45deg, transparent 50%, rgb(136, 146, 160) 50%) calc(100% - 10px) 50% / 4px 4px no-repeat, linear-gradient(135deg, rgb(136, 146, 160) 50%, transparent 50%) calc(100% - 6px) 50% / 4px 4px rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 2px 20px 2px 8px; cursor: pointer; outline: none; appearance: none; transition: border-color 0.15s, background-color 0.15s; }
.ba-scope-select:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); }
.ba-scope-select option { background: rgb(26, 26, 46); color: rgb(221, 221, 221); }
.ba-summary-list { padding: 0px; }
.ba-summary-row { display: flex; align-items: center; gap: 8px; padding: 3px 0px; }
.ba-summary-color { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ba-summary-name { flex: 1 1 0%; font-size: 12px; color: rgb(176, 184, 201); }
.ba-summary-count { font-size: 11px; color: rgb(125, 133, 150); font-weight: 600; min-width: 16px; text-align: right; }
.ba-products { padding: 0px 10px 8px; }
.ba-bucket-group { padding-top: 2px; }
.ba-bucket-group + .ba-bucket-group { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 6px; }
.ba-bucket-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(107, 115, 133); padding: 2px 2px 4px; }
.ba-product-card { position: relative; display: block; width: 100%; text-align: left; background: rgba(255, 255, 255, 0.03); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; padding: 7px 10px; margin-top: 3px; cursor: pointer; transition: background 0.1s; }
.ba-product-card:hover { background: rgba(255, 255, 255, 0.07); }
.ba-product-card.selected { background: rgba(65, 139, 185, 0.12); box-shadow: rgb(65, 139, 185) 2px 0px inset; }
@keyframes ba-product-card-pulse { 
  0% { opacity: 1; }
  50% { opacity: 0.65; }
  100% { opacity: 1; }
}
.ba-product-card.pulsing { animation: 1.5s ease-in-out 0s infinite normal none running ba-product-card-pulse; }
@keyframes ba-product-card-flash { 
  0%, 100% { background: rgba(255, 255, 255, 0.04); box-shadow: rgba(255, 235, 170, 0) 0px 0px; }
  50% { background: rgba(255, 220, 140, 0.22); box-shadow: rgba(255, 215, 120, 0.85) 0px 0px 0px 2px; }
}
.ba-product-card.flashing { animation: 0.85s ease-in-out 0s 3 normal none running ba-product-card-flash; }
.ba-product-card.flashing.flashing-long { animation: 0.85s ease-in-out 0s 17 normal none running ba-product-card-flash; }
.ba-product-card.flashing.pulsing { animation: 0.85s ease-in-out 0s 3 normal none running ba-product-card-flash; }
.ba-product-card.flashing.flashing-long.pulsing { animation: 0.85s ease-in-out 0s 17 normal none running ba-product-card-flash; }
.ba-product-card-top { display: flex; align-items: baseline; gap: 8px; }
.ba-product-card-label { font-size: 12.5px; font-weight: 600; color: rgb(224, 228, 238); flex: 1 1 0%; min-width: 0px; }
.ba-product-card-area { font-size: 11px; color: rgb(141, 150, 168); margin-top: 2px; line-height: 1.3; }
.ba-product-card-state { font-size: 12px; color: rgb(200, 205, 216); margin-top: 2px; line-height: 1.3; }
.ba-product-card-county { font-size: 11px; color: rgb(145, 153, 171); margin-top: 1px; line-height: 1.3; }
.ba-product-card-meta { display: flex; gap: 4px; font-size: 10px; color: rgb(94, 102, 119); margin-top: 2px; }
.ba-product-card-countdown { font-size: 11px; color: rgb(153, 170, 170); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; }
.ba-product-card-countdown.expired { color: rgb(255, 179, 179); }
.ba-product-card-right { display: contents; }
.ba-product-card-right .ba-product-card-info-btn { position: absolute; top: 24px; right: 10px; }
.ba-product-card.has-info .ba-product-card-state, .ba-product-card.has-info > .ba-product-card-state:first-of-type { padding-right: 30px; }
.ba-product-card.has-info { min-height: 48px; }
.ba-product-card-info-btn { appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); color: rgb(216, 223, 240); font-size: 11px; font-weight: 700; font-style: italic; line-height: 1; padding: 0px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.ba-product-card-info-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: rgb(255, 255, 255); }
.ba-product-card-tags { display: flex; flex-direction: column; gap: 1px; }
.ba-product-card-tag { font-size: 11px; line-height: 1.25; color: rgb(212, 216, 226); text-align: left; }
.ba-product-card-tag-label { color: rgb(145, 153, 171); font-weight: 600; margin-right: 4px; }
.ba-product-card-tag-value { color: rgb(230, 234, 242); font-weight: 500; }
.ba-empty-inline { padding: 8px 0px; font-size: 12px; color: rgb(94, 102, 119); text-align: center; }
.ba-inline-info { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0px; background: rgba(12, 15, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; overflow: hidden; }
.ba-inline-info-header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(7, 9, 20, 0.85); flex: 0 0 auto; }
.ba-inline-info-back { appearance: none; display: flex; align-items: center; gap: 3px; background: rgba(255, 255, 255, 0.08); color: rgb(219, 227, 255); border: 0px; border-radius: 5px; padding: 3px 8px 3px 6px; font-size: 11px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.ba-inline-info-back:hover { background: rgba(255, 255, 255, 0.16); }
.ba-inline-info-title-wrap { display: flex; align-items: center; gap: 6px; min-width: 0px; flex: 1 1 auto; }
.ba-inline-info-color { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ba-inline-info-title { color: rgb(219, 227, 255); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-inline-info-subtitle { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: rgb(186, 201, 239); font-size: 11px; line-height: 1.35; flex: 0 0 auto; }
.ba-inline-info-details { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.ba-inline-info-details-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; line-height: 1.35; }
.ba-inline-info-details-label { color: rgb(159, 176, 214); flex: 0 0 auto; }
.ba-inline-info-details-value { color: rgb(255, 255, 255); font-weight: 600; flex: 1 1 auto; word-break: break-word; }
.ba-inline-info-body { margin: 0px; padding: 10px; color: rgb(219, 227, 255); font-size: 11.5px; line-height: 1.4; white-space: pre-wrap; overflow: auto; background: rgb(9, 14, 26); flex: 1 1 auto; min-height: 0px; }
.ba-zone-picker { position: relative; flex-shrink: 0; }
.ba-zone-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 5px 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ba-zone-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ba-zone-mini-grid { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); gap: 1px; }
.ba-zone-mini-cell { border-radius: 0.5px; background: rgba(255, 255, 255, 0.12); }
.ba-zone-mini-cell.active { background: rgba(65, 139, 185, 0.65); }
.ba-zone-dropdown { position: absolute; top: calc(100% + 4px); right: 0px; z-index: 50; background: rgba(22, 24, 32, 0.97); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 6px; min-width: 160px; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px; }
.ba-zone-dropdown-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(107, 115, 133); padding: 2px 6px 6px; }
.ba-zone-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 5px; color: rgb(192, 199, 214); font-size: 12px; cursor: pointer; text-align: left; }
.ba-zone-option:hover { background: rgba(255, 255, 255, 0.08); }
.ba-zone-option.selected { background: rgba(65, 139, 185, 0.15); color: rgb(141, 193, 251); }
.ba-zone-option .ba-zone-mini-grid { grid-template-columns: repeat(3, 6px); grid-template-rows: repeat(3, 6px); }
.overlay-section-expand { flex: 1 1 0%; border: 0px; background: transparent; color: rgb(235, 239, 250); font-size: 14px; font-weight: 700; text-align: left; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.overlay-section-items { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.overlay-section-items.dimmed { opacity: 0.58; }
.overlay-type-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.overlay-type-row:first-child { border-top: 0px; }
.overlay-subcategory-label { font-size: 10px; font-weight: 600; color: rgb(125, 133, 150); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px 2px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.overlay-type-label { flex: 1 1 0%; min-width: 0px; border: 0px; background: transparent; color: rgb(206, 214, 235); font-size: 13px; text-align: left; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.overlay-type-color { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.45); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px; flex-shrink: 0; }
.overlay-outlook-period-header { font-size: 13px; font-weight: 700; color: rgb(227, 233, 245); letter-spacing: 0.2px; padding: 10px 10px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.overlay-section-items > .overlay-outlook-period-header:first-child { border-top: 0px; padding-top: 6px; }
.overlay-outlook-period-header + .overlay-type-row { border-top: 0px; }
.overlay-type-style-toggle { border: 0px; background: transparent; color: rgb(125, 133, 150); padding: 0px 2px; margin-right: 2px; display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.overlay-type-style-toggle:hover { color: rgb(206, 214, 235); }
.overlay-type-customized { color: rgb(93, 173, 255); font-size: 16px; line-height: 1; margin-left: 4px; }
.overlay-type-style-panel { background: rgba(0, 0, 0, 0.18); padding: 6px 10px 8px 22px; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.overlay-variant-block { padding: 6px 0px 8px; }
.overlay-variant-block + .overlay-variant-block { border-top: 1px dashed rgba(255, 255, 255, 0.07); }
.overlay-variant-row { display: flex; align-items: center; gap: 8px; padding: 0px; }
.overlay-variant-label { display: flex; align-items: center; gap: 8px; min-width: 0px; }
.overlay-variant-color { width: 22px; height: 18px; padding: 0px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px; background: transparent; cursor: pointer; flex-shrink: 0; overflow: hidden; }
.overlay-variant-color::-webkit-color-swatch-wrapper { padding: 0px; }
.overlay-variant-color::-webkit-color-swatch { border: 0px; border-radius: 0px; }
.overlay-variant-name { font-size: 12px; color: rgb(206, 214, 235); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 0%; min-width: 0px; }
.overlay-variant-control { display: flex; align-items: center; gap: 8px; padding: 3px 0px 3px 30px; }
.overlay-variant-control-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: rgb(125, 133, 150); width: 32px; flex-shrink: 0; }
.overlay-variant-select { flex: 1 1 0%; min-width: 0px; font-size: 11px; padding: 3px 6px; }
.overlay-variant-slider { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0px; }
.overlay-variant-slider .overlay-slider { flex: 1 1 0%; min-width: 0px; }
.overlay-variant-slider .overlay-slider-value { font-size: 11px; color: rgb(154, 163, 182); flex-shrink: 0; min-width: 36px; text-align: right; }
.overlay-variant-reset { margin-top: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgb(206, 214, 235); font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.overlay-variant-reset:hover { background: rgba(255, 255, 255, 0.06); }
.overlay-outlook-group { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.overlay-outlook-group:first-child { border-top: 0px; }
.overlay-outlook-group-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: rgba(255, 255, 255, 0.02); }
.overlay-outlook-group-title { color: rgb(217, 226, 247); font-size: 13px; font-weight: 700; }
.overlay-outlook-group-expand { flex: 1 1 0%; min-width: 0px; border: 0px; background: transparent; color: rgb(235, 239, 250); text-align: left; display: flex; align-items: center; gap: 8px; padding: 0px; cursor: pointer; }
.settings-header { display: flex; align-items: center; gap: 8px; padding: 10px 0px 6px; }
.settings-back-btn { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.08); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; color: rgb(170, 170, 170); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.settings-back-btn:hover { background: rgba(255, 255, 255, 0.15); color: rgb(255, 255, 255); }
.settings-title { font-size: 15px; font-weight: 600; color: rgb(255, 255, 255); }
.settings-tabs { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 5px; margin-bottom: 8px; }
.settings-tab { height: 28px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; background: rgba(255, 255, 255, 0.03); color: rgb(155, 162, 173); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.settings-tab:hover { background: rgba(255, 255, 255, 0.06); color: rgb(223, 227, 234); }
.settings-tab.active { background: rgb(65, 139, 185); border-color: rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); }
.settings-section { margin-bottom: 18px; }
.settings-section-label { font-size: 11px; font-weight: 600; color: rgb(102, 102, 102); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.settings-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.settings-row-label { font-size: 13px; color: rgb(221, 221, 221); }
.settings-row-value { font-size: 12px; font-weight: 600; color: rgb(65, 139, 185); cursor: pointer; }
.settings-select { background: rgba(255, 255, 255, 0.08); color: rgb(65, 139, 185); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer; outline: none; transition: border-color 0.15s; field-sizing: content; max-width: 100%; }
.settings-select:hover { border-color: rgba(255, 255, 255, 0.2); }
.settings-select:focus { border-color: rgba(65, 139, 185, 0.5); }
.settings-select option { background: rgb(26, 26, 46); color: rgb(255, 255, 255); }
.settings-small-btn { background: rgba(255, 255, 255, 0.08); color: rgb(187, 187, 187); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; width: 26px; height: 26px; font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.settings-small-btn:hover { background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.2); }
.settings-card-btn { display: block; width: 100%; margin: 2px 0px 4px; padding: 7px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); border-radius: 7px; font-size: 13px; font-weight: 600; letter-spacing: 0.15px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.settings-card-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: rgb(255, 255, 255); }
.settings-card-btn:active { background: rgba(255, 255, 255, 0.14); }
.custom-colormaps-body { flex: 1 1 0%; overflow: auto; padding: 14px 18px 18px; }
.custom-colormaps-hint { color: rgb(154, 163, 181); font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
.custom-colormaps-hint code { background: rgba(255, 255, 255, 0.08); padding: 1px 5px; border-radius: 4px; font-size: 11px; color: rgb(200, 208, 228); }
.custom-colormap-section { display: flex; flex-direction: column; gap: 6px; padding: 10px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.custom-colormap-section:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.custom-colormap-section-label { color: rgb(230, 232, 239); font-size: 13px; font-weight: 600; letter-spacing: 0.1px; }
.custom-colormap-section-controls { display: flex; align-items: center; gap: 6px; }
.custom-colormap-select { flex: 1 1 0%; min-width: 0px; }
.keyboard-settings-body, .radar-sources-settings-body { flex: 1 1 0%; overflow: auto; padding: 14px 18px 18px; }
.radar-source-select { min-width: 92px; }
.settings-toggle { width: 38px; height: 22px; background: rgba(255, 255, 255, 0.15); border-radius: 11px; position: relative; transition: background 0.2s; cursor: pointer; }
.settings-toggle.on { background: rgb(65, 139, 185); }
.settings-toggle.disabled { opacity: 0.45; cursor: default; }
.settings-toggle-knob { width: 18px; height: 18px; background: rgb(255, 255, 255); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px; }
.settings-toggle.on .settings-toggle-knob { transform: translate(16px); }
.settings-slider { width: 100%; appearance: none; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); outline: none; cursor: pointer; }
.settings-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); background: rgb(65, 139, 185); cursor: pointer; }
.settings-row:has(.settings-slider) { padding: 2px 0px 6px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.reflectivity-filter-row, .settings-slider-label-row { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 2px; }
.settings-slider-label-row:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 7px; }
.settings-reset-btn { display: block; width: calc(100% - 24px); margin: 10px 12px 14px; padding: 10px 14px; background: rgba(220, 80, 80, 0.12); border: 1px solid rgba(220, 80, 80, 0.4); color: rgb(240, 140, 140); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.settings-reset-btn:hover { background: rgba(220, 80, 80, 0.22); border-color: rgba(220, 80, 80, 0.7); }
.settings-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 6px 12px 2px; margin-bottom: 12px; }
.settings-card-header { font-size: 11px; font-weight: 700; color: rgb(141, 150, 168); text-transform: uppercase; letter-spacing: 0.9px; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 8px; }
.settings-subgroup { padding: 4px 0px 2px; }
.settings-subgroup + .settings-subgroup { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 6px; }
.settings-subgroup-label { font-size: 10px; font-weight: 600; color: rgb(110, 119, 136); text-transform: uppercase; letter-spacing: 0.6px; margin: 2px 0px; }
.settings-subgroup-content.dimmed { opacity: 0.45; pointer-events: none; }
.keyboard-settings-summary { display: grid; gap: 14px; padding: 10px 0px 6px; }
.keyboard-shortcut-group { display: grid; gap: 8px; }
.keyboard-shortcut-group-label { font-size: 10px; font-weight: 700; color: rgb(110, 119, 136); text-transform: uppercase; letter-spacing: 1.8px; padding-top: 2px; }
.keyboard-shortcut-row { display: grid; grid-template-columns: minmax(82px, 42%) minmax(0px, 1fr); align-items: center; gap: 10px; min-height: 34px; }
.keyboard-shortcut-action { min-width: 0px; font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, 0.84); overflow-wrap: anywhere; }
.keyboard-shortcut-key { display: flex; align-items: center; justify-content: stretch; min-width: 0px; }
.keyboard-shortcut-key kbd { display: block; width: 100%; min-width: 0px; padding: 7px 6px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: clamp(10px, 3.2vw, 12px); font-weight: 700; line-height: 1.2; text-align: center; box-shadow: rgba(255, 255, 255, 0.08) 0px -1px inset; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .keyboard-shortcut-row { grid-template-columns: minmax(72px, 38%) minmax(0px, 1fr); gap: 8px; }
  .keyboard-shortcut-action { font-size: 11px; }
}
.settings-road-row { align-items: center; }
.settings-road-text { display: flex; flex-direction: column; min-width: 0px; flex: 1 1 0%; }
.settings-road-title { font-size: 13px; color: rgb(221, 221, 221); line-height: 1.2; }
.settings-road-subtitle { font-size: 10px; color: rgb(110, 119, 136); line-height: 1.2; margin-top: 1px; }
.settings-road-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.settings-color-picker { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.settings-color-swatch { width: 26px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 5px; background: transparent; cursor: pointer; padding: 0px; }
.settings-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.settings-color-swatch::-webkit-color-swatch { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 3px; }
.settings-color-swatch-btn { width: 28px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; cursor: pointer; padding: 0px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset; transition: border-color 0.12s, transform 80ms; }
.settings-color-swatch-btn:hover { border-color: rgba(255, 255, 255, 0.4); }
.settings-color-swatch-btn:active { transform: scale(0.96); }
.settings-color-swatch-popover { position: absolute; top: calc(100% + 4px); right: 0px; z-index: 50; display: grid; grid-template-columns: repeat(6, 24px); gap: 6px; padding: 8px; background: rgba(28, 30, 34, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px; }
.settings-color-swatch-option { width: 24px; height: 20px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; cursor: pointer; padding: 0px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset; transition: transform 80ms, border-color 0.12s; position: relative; }
.settings-color-swatch-option:hover { border-color: rgba(255, 255, 255, 0.5); transform: scale(1.08); }
.settings-color-swatch-option.selected { border-color: rgb(78, 161, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset, rgb(78, 161, 255) 0px 0px 0px 1px; }
.settings-color-swatch-custom { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, rgb(85, 85, 85), rgb(136, 136, 136), rgb(187, 187, 187)); }
.settings-color-swatch-custom-glyph { font-size: 14px; line-height: 1; color: rgb(255, 255, 255); font-weight: 600; text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 1px; pointer-events: none; }
.settings-color-swatch-custom input[type="color"] { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; background: transparent; }
.settings-row.disabled { opacity: 0.4; pointer-events: none; }
.settings-row-controls { display: flex; align-items: center; gap: 8px; }
.settings-inline-segmented { display: inline-flex; gap: 3px; padding: 3px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; }
.settings-inline-segmented-btn { min-width: 64px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.58); font-size: 11px; font-weight: 700; letter-spacing: 0.2px; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.settings-inline-segmented-btn:hover { color: rgba(255, 255, 255, 0.85); }
.settings-inline-segmented-btn.active { background: rgba(65, 139, 185, 0.88); color: rgb(255, 255, 255); }
.settings-map-source-value { font-size: 12px; font-weight: 600; color: rgb(65, 139, 185); }
.settings-map-actions-row { align-items: flex-start; }
.settings-map-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.settings-select-inline { max-width: 130px; font-size: 11px; }
.settings-filter-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0px; transition: background 0.15s, color 0.15s; }
.settings-filter-btn:hover { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8); }
.settings-filter-btn.active { background: rgba(65, 139, 185, 0.2); color: rgb(65, 139, 185); }
.settings-filter-panel { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-left: 12px; background: rgba(0, 0, 0, 0.15); border-radius: 0px 0px 8px 8px; }
.settings-view-switch { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 3px; margin: 2px 0px 6px; }
.settings-view-btn { flex: 1 1 0%; background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.settings-view-btn:hover { color: rgba(255, 255, 255, 0.95); }
.settings-view-btn.active { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px; }
.settings-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.settings-link-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.settings-link-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }
.settings-maplook-row { gap: 8px; }
.settings-maplook-row.selected { background: rgba(65, 139, 185, 0.22); border-radius: 6px; margin: 0px -6px; padding-left: 10px; padding-right: 6px; box-shadow: rgb(65, 139, 185) 3px 0px inset; }
.settings-maplook-name { flex: 1 1 0%; min-width: 0px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(221, 221, 221); font-size: 13px; text-align: left; padding: 2px 0px; cursor: pointer; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-maplook-name:hover { color: rgb(255, 255, 255); }
.settings-maplook-row.selected .settings-maplook-name { color: rgb(255, 255, 255); font-weight: 600; }
.settings-maplook-name-input { flex: 1 1 0%; min-width: 0px; font-size: 13px; padding: 2px 6px; }
.settings-maplook-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); border-radius: 3px; padding: 1px 5px; }
.settings-maplook-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.settings-icon-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; color: rgba(255, 255, 255, 0.55); font-size: 13px; cursor: pointer; padding: 0px; transition: background 0.15s, color 0.15s; }
.settings-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
.settings-icon-btn-danger:hover { background: rgba(220, 70, 70, 0.2); color: rgb(255, 120, 120); }
.settings-maplook-editor-header { font-size: 11px; color: rgb(141, 150, 168); text-transform: uppercase; letter-spacing: 0.8px; padding: 2px 4px 4px; }
.settings-maplook-editor-header strong { color: rgb(221, 221, 221); text-transform: none; letter-spacing: 0px; font-size: 12px; font-weight: 600; }
.login-backdrop { position: fixed; inset: 0px; z-index: 1000; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; animation: 0.2s ease 0s 1 normal none running loginFadeIn; }
@keyframes loginFadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.login-modal { position: relative; width: 360px; max-width: calc(-40px + 100vw); background: rgba(22, 22, 38, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 36px 32px 32px; box-shadow: rgba(0, 0, 0, 0.5) 0px 24px 80px; animation: 0.25s ease 0s 1 normal none running loginSlideUp; }
@keyframes loginSlideUp { 
  0% { opacity: 0; transform: translateY(20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
.login-close { position: absolute; top: 12px; right: 16px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.4); font-size: 22px; cursor: pointer; padding: 4px; line-height: 1; }
.login-close:hover { color: rgba(255, 255, 255, 0.8); }
.login-logo-img { display: block; margin: 0px auto 24px; max-width: 80%; height: auto; user-select: none; }
.login-logo { font-size: 22px; font-weight: 800; color: rgb(255, 255, 255); text-align: center; margin-bottom: 24px; letter-spacing: -0.5px; }
.login-heading { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-bottom: 16px; text-align: center; }
.login-input { display: block; width: 100%; padding: 10px 14px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: rgb(255, 255, 255); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; }
.login-input:focus { border-color: rgba(65, 139, 185, 0.5); background: rgba(255, 255, 255, 0.08); }
.login-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.login-submit { display: block; width: 100%; padding: 11px; margin-top: 4px; background: rgb(65, 139, 185); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; color: rgb(255, 255, 255); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.login-submit:hover { background: rgb(88, 148, 195); }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.login-links { display: flex; justify-content: space-between; margin-top: 16px; gap: 8px; }
.login-link { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(65, 139, 185, 0.8); font-size: 12px; font-family: inherit; cursor: pointer; padding: 0px; }
.login-link:hover { color: rgb(65, 139, 185); text-decoration: underline; }
.login-error { background: rgba(244, 67, 54, 0.12); border: 1px solid rgba(244, 67, 54, 0.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; color: rgb(239, 154, 154); font-size: 12.5px; line-height: 1.4; }
.login-message { background: rgba(65, 139, 185, 0.1); border: 1px solid rgba(65, 139, 185, 0.2); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; color: rgb(143, 184, 220); font-size: 12.5px; line-height: 1.4; }
.login-note { color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 16px; text-align: center; line-height: 1.4; }
.ca-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.ca-header-title, .ca-header-org { flex: 1 1 0%; min-width: 0px; font-size: 11px; color: rgb(153, 170, 170); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; word-break: break-word; }
.ca-header-btn { padding: 5px 12px; background: rgba(65, 139, 185, 0.18); border: 1px solid rgba(65, 139, 185, 0.5); border-radius: 7px; color: rgb(143, 184, 220); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ca-header-btn:hover { background: rgba(65, 139, 185, 0.3); }
.ca-error { margin: 8px 12px; padding: 8px 10px; background: rgba(255, 60, 60, 0.12); border: 1px solid rgba(255, 60, 60, 0.35); border-radius: 6px; color: rgb(255, 179, 179); font-size: 12px; }
.ca-composer { margin: 6px 12px 12px; padding: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; }
.ca-composer-title { font-size: 13px; font-weight: 600; color: rgb(238, 238, 238); margin: 0px 0px 12px; }
.ca-field { margin-top: 12px; }
.ca-field:first-of-type { margin-top: 0px; }
.ca-label { display: block; font-size: 11px; font-weight: 600; color: rgb(153, 170, 170); text-transform: uppercase; letter-spacing: 0.4px; margin: 0px 0px 5px; }
.ca-input, .ca-textarea, .ca-select { width: 100%; padding: 7px 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; color: rgb(238, 238, 238); font-size: 13px; font-family: inherit; box-sizing: border-box; outline: none; }
.ca-input:focus, .ca-textarea:focus, .ca-select:focus { border-color: rgba(116, 196, 255, 0.6); background: rgba(0, 0, 0, 0.5); }
.ca-textarea { resize: vertical; min-height: 60px; }
.ca-row { display: flex; gap: 8px; }
.ca-row > * { flex: 1 1 0%; }
.ca-check-row { display: flex; align-items: center; gap: 8px; margin: 0px; font-size: 12px; color: rgb(221, 221, 221); cursor: pointer; }
.ca-check-row input[type="checkbox"] { accent-color: rgb(64, 148, 230); }
.ca-cluster-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ca-cluster-list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 5px; font-size: 12px; color: rgb(221, 221, 221); cursor: pointer; }
.ca-cluster-list label:hover { background: rgba(0, 0, 0, 0.4); }
.ca-empty, .ca-muted { font-size: 11px; color: rgb(119, 119, 119); padding: 4px 0px; }
.ca-file-input { font-size: 11px; color: rgb(170, 170, 170); }
.ca-file-input::file-selector-button { padding: 4px 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; color: rgb(221, 221, 221); font-size: 11px; cursor: pointer; margin-right: 8px; }
.ca-preset-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ca-input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; opacity: 0.7; }
.ca-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.ca-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 16px -12px 14px; }
.ca-subopt { margin-top: 10px; padding-left: 2px; color: rgb(170, 170, 187); font-size: 12px; }
.ca-countdown { margin-top: 6px; font-size: 11px; color: rgb(153, 170, 170); font-variant-numeric: tabular-nums; }
.ca-countdown.expired { color: rgb(255, 179, 179); }
.ca-chip { padding: 4px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; color: rgb(187, 187, 187); font-size: 11px; font-weight: 500; cursor: pointer; }
.ca-chip:hover { background: rgba(65, 139, 185, 0.2); border-color: rgba(65, 139, 185, 0.5); color: rgb(201, 220, 236); }
.ca-btn-block { display: block; width: 100%; text-align: center; padding: 9px 14px; }
.ca-hint { margin-top: 6px; font-size: 11px; color: rgb(153, 170, 170); text-align: center; }
.ca-hint.active { color: rgb(143, 184, 220); }
.ca-hint.ready { color: rgb(116, 255, 158); }
.ca-btn { padding: 6px 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; color: rgb(221, 221, 221); font-size: 12px; font-weight: 500; cursor: pointer; }
.ca-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ca-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ca-btn-primary { background: rgba(65, 139, 185, 0.25); border-color: rgba(65, 139, 185, 0.6); color: rgb(201, 220, 236); }
.ca-btn-primary:hover { background: rgba(65, 139, 185, 0.4); }
.ca-btn-mini { padding: 3px 10px; font-size: 11px; border-radius: 4px; }
.ca-btn-danger { color: rgb(255, 179, 179); border-color: rgba(255, 100, 100, 0.35); }
.ca-btn-danger:hover { background: rgba(255, 60, 60, 0.18); }
.ca-composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ca-upload-progress { margin-top: 12px; font-size: 12px; color: rgb(200, 211, 223); }
.ca-upload-progress-label { margin-bottom: 4px; }
.ca-upload-progress-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.ca-upload-progress-fill { height: 100%; background: rgb(78, 163, 255); transition: width 0.12s linear; }
.ca-alert-card .ba-product-card-top { display: flex; align-items: center; gap: 8px; }
.ca-alert-card .ba-product-card-label { flex: 1 1 0%; min-width: 0px; }
.ca-card-menu { position: relative; margin-left: auto; align-self: center; }
.ca-alert-card .ba-product-card-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.ca-card-menu-btn { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(200, 211, 223); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }
.ca-card-menu-btn:hover { background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); }
.ca-card-menu-popup { position: absolute; top: 100%; right: 0px; margin-top: 4px; background: rgb(26, 31, 39); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.45) 0px 6px 18px; min-width: 120px; z-index: 20; overflow: hidden; }
.ca-card-menu-item { display: block; width: 100%; text-align: left; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(227, 232, 239); padding: 8px 12px; font-size: 13px; cursor: pointer; }
.ca-card-menu-item:hover { background: rgba(255, 255, 255, 0.08); }
.ca-card-menu-item-danger { color: rgb(255, 107, 107); }
.ca-alert-desc { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.ca-view-cluster { padding: 0px 12px 6px; }
.ca-toolbar { padding: 10px 12px 6px; }
.ca-toolbar-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ca-toolbar-top .ca-label { flex: 1 1 auto; margin: 0px; min-width: 0px; }
.ca-toolbar-btn { flex: 0 0 auto; padding: 6px 14px; background: rgba(65, 139, 185, 0.32); border: 1px solid rgba(65, 139, 185, 0.65); border-radius: 7px; color: rgb(241, 247, 252); font-size: 12px; font-weight: 600; letter-spacing: 0.15px; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ca-toolbar-btn:hover { background: rgba(65, 139, 185, 0.5); border-color: rgba(65, 139, 185, 0.85); color: rgb(255, 255, 255); }
.ca-toolbar-btn:active { background: rgba(65, 139, 185, 0.62); }
.ca-alert-media { margin-top: 8px; border-radius: 5px; overflow: hidden; }
.ca-alert-media img, .ca-alert-media video { width: 100%; display: block; }
.ca-card-actions { margin-top: 8px; display: flex; gap: 6px; }
@media (max-width: 768px) {
  .side-panel, .toggle-panel-btn, .top-bar, #timeline { display: none !important; }
  .pane-container.mobile-layout { position: absolute; top: 0px; right: 0px; left: 0px !important; bottom: 0px !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
  .pane-label, .pane-time-label, .pane-colorbar-card { display: none !important; }
  .mobile-time-pill { position: fixed; top: calc(12px + env(safe-area-inset-top,0px)); left: 50%; transform: translate(-50%); z-index: 25; display: flex; flex-direction: column; align-items: center; padding: 6px 16px; background: rgba(20, 20, 24, 0.85); backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); pointer-events: none; user-select: none; }
  .mobile-time-pill-time { color: rgb(255, 255, 255); font-size: 14px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
  .mobile-time-pill-updated { color: rgba(255, 255, 255, 0.55); font-size: 11px; margin-top: 1px; white-space: nowrap; }
  .mobile-bottom-chrome { position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 42; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom,0px); background: rgba(16, 16, 20, 0.95); backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .mobile-product-strip { display: flex; align-items: stretch; height: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .mobile-product-strip-section { display: flex; flex-direction: column; align-items: center; justify-content: center; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(255, 255, 255); cursor: pointer; padding: 4px 12px; -webkit-tap-highlight-color: transparent; min-width: 0px; }
  .mobile-product-strip-section:active { background: rgba(255, 255, 255, 0.08); }
  .mobile-product-strip-left { flex: 0 0 25%; max-width: 25%; }
  .mobile-product-strip-middle { flex: 0 0 50%; max-width: 50%; }
  .mobile-product-strip-middle.no-right { flex: 0 0 75%; max-width: 75%; }
  .mobile-product-strip-right { flex: 0 0 25%; max-width: 25%; }
  .mobile-product-strip-full { flex: 1 1 0%; max-width: 100%; }
  .mobile-product-strip-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: rgba(255, 255, 255, 0.9); }
  .mobile-product-strip-sublabel { font-size: 10px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; margin-top: 1px; }
  .mobile-product-strip-divider { width: 1px; align-self: stretch; margin: 8px 0px; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; }
  .mobile-scrubber { display: flex; align-items: center; padding: 0px 12px; height: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .mobile-scrubber-cancel { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; cursor: pointer; margin-right: 8px; }
  .mobile-scrubber-track { flex: 1 1 0%; position: relative; height: 36px; touch-action: none; cursor: pointer; }
  .mobile-scrubber-dot { position: absolute; top: 50%; width: 3px; height: 14px; border-radius: 1.5px; transform: translate(-50%, -50%); transition: background 0.15s; }
  .mobile-scrubber-dot.loaded { background: rgba(100, 200, 255, 0.7); }
  .mobile-scrubber-dot.pending { background: rgba(255, 255, 255, 0.15); }
  .mobile-scrubber-thumb { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: rgb(65, 139, 185); border: 2px solid rgb(255, 255, 255); transform: translate(-50%, -50%); box-shadow: rgba(65, 139, 185, 0.5) 0px 0px 6px; pointer-events: none; }
  .mobile-toolbar { display: flex; align-items: center; justify-content: space-around; height: 56px; }
  .mobile-toolbar-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.7); cursor: pointer; border-radius: 12px; transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; }
  .mobile-toolbar-btn:active { background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
  .mobile-toolbar-play { width: 52px; height: 52px; background: rgb(25, 118, 210); color: rgb(255, 255, 255); border-radius: 50%; box-shadow: rgba(25, 118, 210, 0.4) 0px 2px 10px; }
  .mobile-toolbar-play:active { background: rgb(21, 101, 192); color: rgb(255, 255, 255); }
  .mobile-toolbar-btn.active { color: rgb(65, 139, 185); }
  .mobile-toolbar-spacer { width: 44px; height: 44px; flex-shrink: 0; }
  .mobile-popover-backdrop { position: fixed; inset: 0px; z-index: 40; }
  .mobile-popover { position: fixed; z-index: 43; max-height: 50vh; min-width: unset; max-width: calc(-24px + 100vw); background: rgba(50, 50, 50, 0.88); backdrop-filter: blur(20px); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: rgba(0, 0, 0, 0.6) 0px 4px 24px; display: flex; flex-direction: column; overflow: hidden; transform-origin: center bottom; }
  .mobile-popover-left { left: 8px; right: auto; width: min(28vw, 130px); min-width: 90px; max-height: 345px; }
  .mobile-popover-center { left: 50%; transform: translate(-50%); width: min(50vw, 220px); min-width: 120px; max-height: 345px; }
  .mobile-popover-right { right: 8px; left: auto; width: min(28vw, 130px); min-width: 90px; max-height: 345px; }
  .mobile-popover-full { left: 8px; right: 8px; width: auto; }
  .mobile-popover.no-anim { animation: auto ease 0s 1 normal none running none !important; }
  .mobile-popover-left, .mobile-popover-right, .mobile-popover-full { animation: 0.2s ease 0s 1 normal none running mobilePopoverSlideIn; }
  .mobile-popover-left.closing, .mobile-popover-right.closing, .mobile-popover-full.closing { animation: 0.25s ease 0s 1 normal forwards running mobilePopoverSlideOut; }
  .mobile-popover-center { animation: 0.2s ease 0s 1 normal none running mobilePopoverSlideInCenter; }
  .mobile-popover-center.closing { animation: 0.25s ease 0s 1 normal forwards running mobilePopoverSlideOutCenter; }
  @keyframes mobilePopoverSlideIn { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
  @keyframes mobilePopoverSlideOut { 
  0% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(20px); }
}
  @keyframes mobilePopoverSlideInCenter { 
  0% { opacity: 0; transform: translate(-50%) translateY(20px); }
  100% { opacity: 1; transform: translate(-50%) translateY(0px); }
}
  @keyframes mobilePopoverSlideOutCenter { 
  0% { opacity: 1; transform: translate(-50%) translateY(0px); }
  100% { opacity: 0; transform: translate(-50%) translateY(20px); }
}
  .mobile-popover-handle { display: flex; justify-content: center; padding: 6px 0px 3px; cursor: grab; touch-action: none; flex-shrink: 0; }
  .mobile-popover-handle-bar { width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
  .mobile-popover-content { flex: 1 1 0%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(6px,env(safe-area-inset-bottom,6px)); }
  .mobile-popover .mobile-tilt-picker-item, .mobile-popover .mobile-site-picker-item, .mobile-popover .mobile-sat-picker-item, .mobile-popover .mobile-satview-picker-item, .mobile-popover .mobile-obstype-picker-item, .mobile-popover .mobile-outlook-picker-item, .mobile-popover .mobile-model-picker-item { background: rgba(160, 210, 246, 0.85); border-color: rgba(180, 180, 180, 0.6); color: rgb(17, 17, 17); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; }
  .mobile-popover .mobile-tilt-picker-item.active, .mobile-popover .mobile-site-picker-item.active, .mobile-popover .mobile-sat-picker-item.active, .mobile-popover .mobile-satview-picker-item.active, .mobile-popover .mobile-obstype-picker-item.active, .mobile-popover .mobile-outlook-picker-item.active, .mobile-popover .mobile-model-picker-item.active { background: rgba(50, 90, 125, 0.95); border-color: rgba(80, 130, 180, 0.7); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px; }
  .mobile-popover .mobile-site-picker-name, .mobile-popover .mobile-sat-picker-desc, .mobile-popover .mobile-satview-picker-step, .mobile-popover .mobile-obstype-picker-desc { color: rgba(0, 0, 0, 0.5); }
  .mobile-popover .mobile-site-picker-item.active .mobile-site-picker-name, .mobile-popover .mobile-sat-picker-item.active .mobile-sat-picker-desc, .mobile-popover .mobile-satview-picker-item.active .mobile-satview-picker-step, .mobile-popover .mobile-obstype-picker-item.active .mobile-obstype-picker-desc, .mobile-popover .mobile-outlook-picker-group-label { color: rgba(255, 255, 255, 0.6); }
  .mobile-sheet-backdrop { position: fixed; inset: 0px; z-index: 50; background: rgba(0, 0, 0, 0.5); animation: 0.2s ease 0s 1 normal none running mobileSheetBackdropIn; }
  .mobile-sheet-backdrop.closing { animation: 0.2s ease 0s 1 normal forwards running mobileSheetBackdropOut; }
  @keyframes mobileSheetBackdropIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
  @keyframes mobileSheetBackdropOut { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}
  .mobile-sheet { position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 51; background: rgba(28, 28, 32, 0.98); backdrop-filter: blur(20px); border-radius: 16px 16px 0px 0px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: 0.25s ease 0s 1 normal none running mobileSheetSlideIn; padding-bottom: env(safe-area-inset-bottom,0px); }
  .mobile-sheet.closing { animation: 0.2s ease 0s 1 normal forwards running mobileSheetSlideOut; }
  .mobile-sheet-auto { max-height: 50vh; }
  .mobile-sheet-half { height: 55vh; }
  .mobile-sheet-full { height: 90vh; }
  @keyframes mobileSheetSlideIn { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0px); }
}
  @keyframes mobileSheetSlideOut { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(100%); }
}
  .mobile-sheet-handle { display: flex; justify-content: center; padding: 10px 0px 6px; cursor: grab; touch-action: none; }
  .mobile-sheet-handle-bar { width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
  .mobile-sheet-title { text-align: center; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85); padding: 0px 16px 10px; }
  .mobile-sheet-content { flex: 1 1 0%; overflow-y: auto; }
  .mobile-data-type-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 16px; justify-content: center; }
  .mobile-data-type-btn { padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; }
  .mobile-data-type-btn.active { background: rgba(65, 139, 185, 0.15); border-color: rgb(65, 139, 185); color: rgb(65, 139, 185); }
  .mobile-data-type-btn:active { background: rgba(255, 255, 255, 0.12); }
  .mobile-site-picker { display: flex; flex-direction: column; padding: 0px 6px 8px; }
  .mobile-site-picker-item { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; box-sizing: border-box; padding: 0px 6px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; margin-bottom: 3px; background: rgba(255, 255, 255, 0.04); color: rgb(255, 255, 255); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s; overflow: hidden; }
  .mobile-site-picker-item.active { background: rgba(65, 139, 185, 0.12); border-color: rgb(65, 139, 185); }
  .mobile-site-picker-item:active { background: rgba(255, 255, 255, 0.1); }
  .mobile-site-picker-id { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.1; }
  .mobile-site-picker-name { font-size: 9px; color: rgba(255, 255, 255, 0.5); margin-top: 1px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mobile-tilt-picker { display: flex; flex-direction: column; padding: 0px 6px 8px; }
  .mobile-tilt-picker-item { display: flex; align-items: center; justify-content: center; height: 36px; box-sizing: border-box; padding: 0px 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; margin-bottom: 3px; background: rgba(255, 255, 255, 0.04); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
  .mobile-tilt-picker-item.active { background: rgba(65, 139, 185, 0.12); border-color: rgb(65, 139, 185); color: rgb(65, 139, 185); }
  .mobile-tilt-picker-item:active { background: rgba(255, 255, 255, 0.1); }
  .mobile-tilt-picker-empty { padding: 20px; text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 14px; }
  .mobile-product-picker { padding: 0px 12px 16px; }
  .mobile-product-picker-category { margin-bottom: 4px; }
  .mobile-product-picker-category-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.06); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mobile-product-picker-category-header:active { background: rgba(255, 255, 255, 0.1); }
  .mobile-product-picker-expand-icon { width: 20px; text-align: center; font-size: 16px; color: rgba(65, 139, 185, 0.8); }
  .mobile-product-picker-items { padding: 6px 0px 6px 12px; }
  .mobile-product-picker-item { display: block; width: 100%; text-align: left; padding: 11px 16px; border-width: medium medium 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.05); border-image: initial; background: none; color: rgba(255, 255, 255, 0.8); font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.1s; }
  .mobile-product-picker-item.active { color: rgb(65, 139, 185); }
  .mobile-product-picker-item:active { background: rgba(255, 255, 255, 0.06); }
  .mobile-product-picker-empty { padding: 20px; text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 14px; }
  .mobile-colorbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px 4px; pointer-events: auto; }
  .mobile-colorbar-bar { flex: 1 1 0%; height: 18px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; touch-action: none; cursor: pointer; }
  .mobile-colorbar-value { position: absolute; bottom: 100%; transform: translate(-50%); margin-bottom: 6px; padding: 4px 10px; background: rgba(20, 20, 24, 0.92); backdrop-filter: blur(8px); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 10; }
  .mobile-colorbar-unit { color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
  .mobile-model-picker { display: flex; flex-direction: column; padding: 0px 6px 8px; gap: 3px; }
  .mobile-model-picker-item { display: flex; align-items: center; justify-content: center; height: 36px; box-sizing: border-box; padding: 0px 6px; border-radius: 8px; border: 1px solid rgba(180, 180, 180, 0.5); background: rgba(160, 210, 246, 0.85); color: rgb(17, 17, 17); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; }
  .mobile-model-picker-item.active { background: rgba(50, 90, 125, 0.95); border-color: rgba(80, 130, 180, 0.7); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px; }
  .mobile-model-picker-item-label { font-size: 12px; font-weight: 600; }
  .mobile-fhour-grid { padding: 6px 8px 12px; }
  .mobile-fhour-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
  .mobile-fhour-date-label { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
  .mobile-fhour-date { font-size: 11px; font-weight: 700; color: rgb(65, 139, 185); }
  .mobile-fhour-day { font-size: 10px; color: rgba(255, 255, 255, 0.5); }
  .mobile-fhour-cells { flex: 1 1 0%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .mobile-fhour-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; border-radius: 6px; border: 1px solid rgba(180, 180, 180, 0.5); background: rgba(160, 210, 246, 0.85); color: rgb(17, 17, 17); font-size: 11px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 36px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; }
  .mobile-fhour-cell.active { background: rgba(50, 90, 125, 0.95); border-color: rgba(80, 130, 180, 0.7); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px; }
  .mobile-fhour-cell.cached { border-color: rgba(100, 160, 200, 0.6); }
  .mobile-fhour-cell:not(.cached):not(.active) { opacity: 0.55; }
  .mobile-fhour-cell-hour { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
  .mobile-fhour-cell-z { font-size: 9px; font-weight: 500; margin-top: 1px; opacity: 0.7; }
  .mobile-fhour-picker-empty { padding: 20px; text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 14px; }
  .mobile-modelrun-picker { display: flex; flex-direction: column; padding: 0px 8px 12px; gap: 4px; }
  .mobile-modelrun-picker-item { display: flex; align-items: center; justify-content: space-between; height: 36px; box-sizing: border-box; padding: 0px 8px; border-radius: 8px; border: 1px solid rgba(180, 180, 180, 0.5); background: rgba(160, 210, 246, 0.85); color: rgb(17, 17, 17); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; }
  .mobile-modelrun-picker-item.active { background: rgba(50, 90, 125, 0.95); border-color: rgba(80, 130, 180, 0.7); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px; }
  .mobile-modelrun-picker-label { font-size: 12px; font-weight: 600; }
  .mobile-modelrun-picker-pct { font-size: 10px; opacity: 0.7; }
  .mobile-modelrun-picker-empty { padding: 16px; text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 13px; }
  .mobile-sat-picker { display: flex; flex-direction: column; gap: 3px; padding: 0px 6px 8px; }
  .mobile-sat-picker-item { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; box-sizing: border-box; padding: 0px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgb(255, 255, 255); cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; }
  .mobile-sat-picker-item.active { background: rgba(65, 139, 185, 0.12); border-color: rgb(65, 139, 185); color: rgb(65, 139, 185); }
  .mobile-sat-picker-label { font-size: 12px; font-weight: 600; line-height: 1.1; }
  .mobile-sat-picker-desc { font-size: 9px; color: rgba(255, 255, 255, 0.45); margin-top: 1px; line-height: 1; }
  .mobile-satview-picker { display: flex; flex-direction: column; gap: 3px; padding: 0px 6px 8px; }
  .mobile-satview-picker-item { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; box-sizing: border-box; padding: 0px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgb(255, 255, 255); cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; }
  .mobile-satview-picker-item.active { background: rgba(65, 139, 185, 0.12); border-color: rgb(65, 139, 185); color: rgb(65, 139, 185); }
  .mobile-satview-picker-label { font-size: 12px; font-weight: 600; line-height: 1.1; }
  .mobile-satview-picker-step { font-size: 9px; color: rgba(255, 255, 255, 0.45); margin-top: 1px; line-height: 1; }
  .mobile-obstype-picker { display: flex; flex-direction: column; gap: 3px; padding: 0px 6px 8px; }
  .mobile-obstype-picker-item { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; box-sizing: border-box; padding: 0px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgb(255, 255, 255); cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; }
  .mobile-obstype-picker-item.active { background: rgba(65, 139, 185, 0.12); border-color: rgb(65, 139, 185); color: rgb(65, 139, 185); }
  .mobile-obstype-picker-label { font-size: 12px; font-weight: 600; line-height: 1.1; }
  .mobile-obstype-picker-desc { font-size: 9px; color: rgba(255, 255, 255, 0.45); margin-top: 1px; line-height: 1; }
  .mobile-outlook-picker { padding: 0px 12px 16px; }
  .mobile-outlook-picker-group { margin-bottom: 12px; }
  .mobile-outlook-picker-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.45); padding: 0px 8px 6px; }
  .mobile-outlook-picker-item { display: block; width: 100%; text-align: left; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; margin-bottom: 4px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.8); font-size: 15px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mobile-outlook-picker-item.active { background: rgba(65, 139, 185, 0.12); border-color: rgb(65, 139, 185); color: rgb(65, 139, 185); }
  .mobile-settings-content { padding: 0px 0px 16px; }
  .mobile-settings-tabs { display: flex; gap: 4px; padding: 0px 12px 12px; overflow-x: auto; }
  .mobile-settings-tab { padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
  .mobile-settings-tab.active { background: rgba(65, 139, 185, 0.15); border-color: rgb(65, 139, 185); color: rgb(65, 139, 185); }
  .mobile-settings-section { padding: 0px 12px; margin-bottom: 8px; }
  .mobile-settings-section-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: rgba(255, 255, 255, 0.06); border-radius: 10px; color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: 600; }
  .mobile-settings-section-controls { display: flex; align-items: center; gap: 10px; }
  .mobile-settings-filter-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; color: rgba(255, 255, 255, 0.5); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mobile-settings-filter-btn.active { color: rgb(65, 139, 185); background: rgba(65, 139, 185, 0.15); }
  .mobile-settings-filter-panel { padding: 8px 8px 4px; }
  .mobile-settings-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px; min-height: 40px; }
  .mobile-settings-row-label { font-size: 14px; color: rgba(255, 255, 255, 0.7); flex: 1 1 0%; min-width: 0px; }
  .mobile-settings-row-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .mobile-settings-toggle { width: 44px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, 0.15); position: relative; cursor: pointer; transition: background 0.2s; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
  .mobile-settings-toggle.on { background: rgb(65, 139, 185); }
  .mobile-settings-toggle-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgb(255, 255, 255); transition: transform 0.2s; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px; }
  .mobile-settings-toggle.on .mobile-settings-toggle-knob { transform: translate(18px); }
  .mobile-settings-select { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-size: 13px; min-width: 100px; -webkit-tap-highlight-color: transparent; }
  .mobile-settings-subgroup-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.35); padding: 8px 8px 4px; }
  .mobile-radar-source-list { padding-bottom: 4px; }
  .mobile-radar-source-list .radar-source-select { min-width: 96px; }
  .mobile-settings-type-label { display: flex; align-items: center; gap: 8px; }
  .mobile-settings-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
}
.data-sampler-crosshair { position: absolute; left: 0px; top: 0px; width: 25px; height: 25px; pointer-events: none; z-index: 8; will-change: transform; opacity: 0; background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\"><path d=\"M12.5 0v25M0 12.5h25\" stroke=\"%23000\" stroke-width=\"3.5\"/><path d=\"M12.5 1.5v22M1.5 12.5h22\" stroke=\"%23fff\" stroke-width=\"1.5\"/></svg>") center center no-repeat; }
.data-sampler-label { position: absolute; left: 0px; top: 0px; will-change: transform; background: rgba(14, 20, 32, 0.88); color: rgb(232, 236, 244); padding: 4px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.12); letter-spacing: 0.02em; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; z-index: 8; }
.mobile-bottom-chrome, .mobile-time-pill, .mobile-sheet-backdrop { display: none; }
@media (max-width: 768px) {
  .mobile-bottom-chrome, .mobile-time-pill { display: flex; }
  .mobile-sheet-backdrop { display: block; }
}