*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input  { font-family: inherit; }


[data-theme="light"] {
  --bg:          #f0efec;
  --surface:     #ffffff;
  --surface2:    #f7f6f3;
  --surface3:    #eeecе8;
  --border:      #e2dfd9;
  --border2:     #cbc8c1;
  --text:        #1a1916;
  --text2:       #5c5a55;
  --text3:       #9e9b94;
  --accent:      #1d4ed8;
  --accent-soft: #eff3ff;
  --accent-dim:  #dbeafe;
  --green:       #15803d;
  --green-bg:    #f0fdf4;
  --amber:       #b45309;
  --amber-bg:    #fffbeb;
  --red:         #b91c1c;
  --red-bg:      #fef2f2;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.07);
  --shadow:      0 2px 8px rgba(0,0,0,0.09);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
  --radius:      6px;
}

[data-theme="dark"] {
  --bg:          #0e0e0d;
  --surface:     #1a1916;
  --surface2:    #222120;
  --surface3:    #2a2926;
  --border:      #2d2b27;
  --border2:     #3a3835;
  --text:        #e6e3dc;
  --text2:       #8a8780;
  --text3:       #4e4b46;
  --accent:      #60a5fa;
  --accent-soft: #172033;
  --accent-dim:  #1e3a5f;
  --green:       #4ade80;
  --green-bg:    #0d2218;
  --amber:       #fbbf24;
  --amber-bg:    #1e1a0e;
  --red:         #f87171;
  --red-bg:      #200f0f;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow:      0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --radius:      6px;
}


html, body {
  height: 100%;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}


#app {
  display: flex;
  flex-direction: column;
  


  height: 100vh;
  height: 100dvh;
  width: 100vw;
}


#header {
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 1000;
  position: relative;   
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 1;    
  min-width: 0;      
  overflow: hidden;
}

#logo-wrap {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
#logo-upload { display: none; }
#logo-img    { width: 100%; height: 100%; object-fit: contain; display: none; }
#logo-svg    { width: 18px; height: 18px; color: var(--text3); }



#logo-wrap.logo-wrap--img {
  border: none;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

#inst-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
  display: block; line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#inst-sub {
  font-size: 10px; color: var(--text3);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

.header-mid {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  white-space: nowrap;     
  pointer-events: none;    
}
.header-mid.is-hidden { display: none; }

.dot-live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(0.8) } }

.header-label {
  font-size: 11.5px;
  color: var(--text2);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }


.clock-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
}
.clock-row {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.clock-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text2);
  opacity: 0.65;
  flex-shrink: 0;
}
.clock-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text2);
  min-width: 52px;
}
.clock-utc .clock-val   { color: var(--text2); }
.clock-local .clock-val { color: var(--accent, #38bdf8); font-weight: 600; }
.clock-local .clock-label { color: var(--accent, #38bdf8); opacity: 1; }

.clock-tz-btn {
  width: 16px; height: 16px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.clock-tz-btn:hover { opacity: 1; }


.clock-tz-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  width: 220px;
  padding: 6px 0 4px;
}
.clock-tz-picker.hidden { display: none; }
.tz-picker-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text2);
  text-transform: uppercase;
  padding: 2px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tz-picker-list { display: flex; flex-direction: column; }
.tz-opt-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  width: 100%;
}
.tz-opt-btn:hover  { background: var(--surface2); }
.tz-opt-btn.active { background: color-mix(in srgb, var(--accent,#38bdf8) 15%, transparent); }
.tz-opt-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  width: 34px;
  flex-shrink: 0;
}
.tz-opt-name {
  font-size: 10px;
  color: var(--text2);
  flex: 1;
}
.tz-opt-off {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--text2);
  opacity: 0.6;
  flex-shrink: 0;
}

#theme-toggle {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
#theme-toggle:hover { background: var(--border); color: var(--text); }


#body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}


#sidebar {
  width: var(--sidebar-w, 256px);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: width 0.22s cubic-bezier(0.4,0,0.2,1);
}
#sidebar.collapsed { width: 0; }
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }


#sidebar-toggle {
  position: absolute;
  left: var(--sidebar-w, 256px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 600;
  width: 16px; height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 5px 5px 0;
  color: var(--text3);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: left 0.22s cubic-bezier(0.4,0,0.2,1), color 0.15s;
}
#sidebar-toggle:hover { color: var(--text); }


.sidebar-section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 14px 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: block;
  user-select: none;
}


.accordion {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.accordion-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface2);
  border: none;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s;
  position: relative;
  border-left: 3px solid transparent;
}
.accordion-head:hover { background: var(--border); color: var(--text); }
.accordion-head.open  {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.acc-icon  {
    font-size: 14px; flex-shrink: 0;
    width: 18px; display: inline-flex;
    align-items: center; justify-content: center;
    line-height: 1; text-align: center;
}
.acc-title { flex: 1; letter-spacing: 0.04em; }
.acc-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
}
.acc-badge:empty { display: none; }

.accordion-arrow {
  font-size: 9px;
  color: var(--text3);
  flex-shrink: 0;
  transition: transform 0.22s;
}

.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--surface);
}
.accordion-body.open {
  max-height: 700px;
  overflow-y: auto;
}
.accordion-body.open::-webkit-scrollbar { width: 4px; }
.accordion-body.open::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.accordion-body > * {
  padding: 10px 14px 14px;
}

.accordion-body > #radar-panel,
.accordion-body > #satellite-panel,
.accordion-body > #boundary-layers {
  padding: 0;
}


.bmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.bmap-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 4px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
  transition: all 0.12s;
}
.bmap-btn:hover { border-color: var(--border2); background: var(--bg); color: var(--text); }
.bmap-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.bmap-icon { font-size: 14px; display: block; margin-bottom: 2px; }


.blayer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}
.blayer-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.blayer-name {
  flex: 1;
  font-size: 11.5px;
  color: var(--text2);
}
.blayer-op {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 6px 28px;
}
.blayer-op-label {
  font-size: 9.5px; color: var(--text3);
  width: 38px; flex-shrink: 0;
}
.op-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--text3);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}


.tog {
  width: 28px; height: 16px;
  border-radius: 8px;
  background: var(--border2);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tog::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: left 0.2s;
}
.tog.on               { background: var(--accent); }
.tog.on::after        { left: 14px; }


input[type=range].op-slider {
  flex: 1;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border2);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}
input[type=range].op-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}


.lp-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 4px;
}
.lp-group-head.lp-sep {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 9px;
}

.lp-group-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text3);
  text-transform: uppercase;
}
.lp-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 0 6px;
  line-height: 16px;
  font-weight: 600;
}

.lp-list {
  padding: 3px 8px 6px;
}




.lp-list.lp-inactive {
  max-height: 288px;
  overflow-y: auto;
  


  overscroll-behavior: auto;
  touch-action: pan-y;   
}
.lp-list.lp-inactive::-webkit-scrollbar { width: 6px; }
.lp-list.lp-inactive::-webkit-scrollbar-thumb {
  background: var(--border2, #ccc);
  border-radius: 3px;
}
.lp-list.lp-inactive::-webkit-scrollbar-track { background: transparent; }

.lp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: default;
  transition: background 0.1s;
  user-select: none;
  position: relative;
  border: 1px solid transparent;
}
.lp-item:hover          { background: var(--surface2); border-color: var(--border); }

.lp-item.focused        {
  background: var(--accent-soft);
  border-color: var(--accent-dim);
}
.lp-item.focused .lp-name { color: var(--accent); font-weight: 500; }


.lp-drag-handle {
  width: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  cursor: grab;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.lp-item:hover .lp-drag-handle:not(.invisible) { opacity: 1; }
.lp-drag-handle.invisible { pointer-events: none; visibility: hidden; }
.lp-drag-handle:active { cursor: grabbing; }


.lp-toggle-btn {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border2);
  border-radius: 5px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
}
.lp-toggle-btn:hover           { border-color: var(--accent); background: var(--accent-soft); }
.lp-toggle-btn.active          { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lp-toggle-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--text3);
  transition: background 0.15s;
}
.lp-toggle-btn.active .lp-toggle-dot { background: #fff; }


.lp-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.lp-name {
  display: block;
  font-size: 12px;
  color: var(--text);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.lp-meta {
  display: block;
  font-size: 10px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 1px;
}

.lp-empty {
  font-size: 10.5px;
  color: var(--text3);
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}


.badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  font-weight: 500;
  padding: 1.5px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.badge-live { background: var(--green-bg); color: var(--green); }
.badge-proc { background: var(--amber-bg); color: var(--amber); }
.badge-off  { background: var(--surface2); color: var(--text3); }


.drag-ghost {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface) !important;
  border: 1px solid var(--accent-dim) !important;
}
.drag-origin {
  opacity: 0.35;
}



.cbar {
  height: 10px;
  border-radius: 3px;
  width: 100%;
  border: 1px solid var(--border);
}
.cbar-lbl {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.cbar-lbl span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  color: var(--text3);
}
.cbar-unit {
  font-size: 10px;
  color: var(--text2);
  margin-top: 5px;
  text-align: center;
  line-height: 1.4;
}


.upload-zone {
  display: block;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  padding: 9px;
  text-align: center;
  cursor: pointer;
  font-size: 11px;
  color: var(--text3);
  transition: all 0.15s;
}
.upload-zone:hover   { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.upload-zone input   { display: none; }

.gjson-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: var(--radius);
  background: var(--surface2);
  border: 1px solid var(--border);
  margin-top: 4px;
  font-size: 11px;
  color: var(--text2);
}
.gjson-dot  { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.gjson-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gjson-btns { display: flex; gap: 2px; }
.gjson-btn {
  border: none; background: none;
  color: var(--text3); font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.12s;
}
.gjson-btn:hover     { background: var(--border); color: var(--text); }
.gjson-btn.rm:hover  { color: var(--red); }


#map-wrap { flex: 1; position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; }


.leaflet-control-zoom a {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
  font-size: 14px !important;
  line-height: 26px !important;
}
.leaflet-control-zoom a:hover { background: var(--surface2) !important; color: var(--text) !important; }



#app .leaflet-control-zoom { display: none !important; }



body.split-active .leaflet-control-zoom { display: none !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,0.65) !important;
  font-size: 9px !important;
  color: var(--text3) !important;
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .leaflet-control-attribution { background: rgba(0,0,0,0.55) !important; }
.leaflet-control-scale-line {
  background: rgba(255,255,255,0.75);
  border-color: var(--border2);
  font-size: 9.5px;
}
[data-theme="dark"] .leaflet-control-scale-line { background: rgba(0,0,0,0.5); }


.leaflet-popup-content-wrapper {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
}
.leaflet-popup-tip   { background: var(--surface) !important; }
.leaflet-popup-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  margin: 10px 13px;
}
.pop-title  { font-weight: 500; color: var(--text); margin-bottom: 6px; }
.pop-row    { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 11px; color: var(--text3); }
.pop-val    { color: var(--text2); font-family: 'IBM Plex Mono', monospace; }
.status-ok  { color: var(--green) !important; }


.station-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}


#statusbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--text3);
  z-index: 400;
  pointer-events: none;
}
.sb-item   { display: flex; gap: 5px; align-items: center; }
.sb-key    { color: var(--text3); }
.sb-val    { color: var(--accent); }
.sb-spacer { flex: 1; }


#timeline {
  height: 46px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
}

.tl-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}

.tl-wrap { flex: 1; position: relative; padding-bottom: 14px; }

.tl-track {
  height: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.tl-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.4;
  pointer-events: none;
  
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--tl-progress, 0.6));
  will-change: transform;
}
.tl-thumb {
  position: absolute;
  top: 50%;
  left: var(--tl-thumb-x, 60%);
  

  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow);
  pointer-events: none;
  will-change: left;
}

.tl-marks {
  position: absolute;
  left: 0; right: 0;
  top: 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.tl-mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: var(--text3);
}

.tl-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  transition: all 0.12s;
  flex-shrink: 0;
}
.tl-btn:hover { border-color: var(--accent); color: var(--accent); }
.tl-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.tl-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 52px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.tl-time--multi {
  align-items: center;
  gap: 4px;
}
.tl-time-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tl-time-row {
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}
.tl-time-icon {
  font-size: 11px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.tl-time-radar {
  filter: brightness(0); 
}
[data-theme="dark"] .tl-time-radar {
  filter: none; 
}
.tl-time-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.tl-time-utc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  white-space: nowrap;
  align-self: center;
}

.tl-speed {
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: var(--radius);
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
}
.tl-speed:focus { border-color: var(--accent); }


#toast {
  position: fixed;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
  z-index: 9990;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}







.lp-cat-icon {
    font-size: 10px;
    margin-right: 3px;
    opacity: 0.7;
}


.lp-empty-state {
    font-size: 11px;
    color: var(--text3);
    text-align: center;
    padding: 16px 14px;
    font-style: italic;
    background: var(--surface2);
    border-radius: var(--radius);
    margin: 8px;
    border: 1px dashed var(--border2);
}


.lp-split-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--text3);
    padding: 10px 14px;
    font-style: italic;
    background: var(--accent-soft);
    border-radius: 4px;
    margin: 6px;
    border: 1px solid var(--accent-dim);
}
.lp-split-notice-icon { font-size: 14px; flex-shrink: 0; }





.lp-order-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    color: var(--text3);
    margin-left: auto;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}


.accordion-body > #unified-active-panel,
.accordion-body > #radar-panel,
.accordion-body > #satellite-panel,
.accordion-body > #boundary-layers {
    padding: 0;
}



.split-btns {
    display: flex;
    gap: 3px;
    align-items: center;
}

.split-header-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 3px 8px;
    font-size: 10.5px;
    font-family: 'IBM Plex Mono', monospace;
    transition: all 0.13s;
    cursor: pointer;
    height: 26px;
}
.split-header-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}



.split-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}


.split-toolbar {
    height: 42px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 12px;
    flex-shrink: 0;
    z-index: 10;
}

.split-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    flex: 1;
}

.split-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.split-mode-btn { display: none; } 

.split-close {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 10.5px;
    cursor: pointer;
    transition: all 0.12s;
}
.split-close:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }



.split-grid-wrapper {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}


.split-panel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.split-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--border);
    pointer-events: none;
    z-index: 1;
}

.split-panel-empty {
    background: repeating-linear-gradient(
        45deg,
        var(--surface) 0px,
        var(--surface) 10px,
        var(--bg) 10px,
        var(--bg) 20px
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-panel-empty-label {
    font-size: 20px;
    opacity: 0.2;
    color: var(--text2);
}

.split-map-container {
    flex: 1;
    min-height: 0;
    width: 100%;
}


.split-divider-corner {
    background: var(--surface);
    width: 4px;
    height: 4px;
}



.split-toolbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.split-panel-info {
    font-size: 10.5px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text3, var(--text2));
    opacity: 0.55;
    white-space: nowrap;
    flex-shrink: 0;
}

.split-quick-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.split-quick-bar::-webkit-scrollbar { display: none; }

.split-quick-btn {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 3px 7px;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.split-quick-btn:hover { border-color: var(--accent); color: var(--accent); }
.split-quick-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.split-settings-btn {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 10.5px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.split-settings-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }


.split-panel-num {
    font-size: 9.5px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text3, var(--text2));
    opacity: 0.5;
    flex-shrink: 0;
    padding-right: 2px;
}



.split-settings-dialog {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-settings-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

.split-settings-close {
    background: none;
    border: none;
    color: var(--text2);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.12s;
}
.split-settings-close:hover { background: var(--red-bg); color: var(--red); }

.split-settings-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 60vh;
}

.split-settings-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.split-settings-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.split-settings-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.split-settings-input {
    width: 70px;
    padding: 5px 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
    text-align: center;
    outline: none;
}
.split-settings-input:focus { border-color: var(--accent); }

.split-settings-hint {
    font-size: 10px;
    color: var(--text2);
    opacity: 0.65;
    line-height: 1.4;
}

.split-settings-apply-btn {
    padding: 5px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
}
.split-settings-apply-btn:hover { background: var(--accent); color: #fff; }


.split-settings-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.split-settings-slider {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}

.split-settings-slider-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    min-width: 24px;
    text-align: center;
}


.split-settings-grid-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.split-picker-cell {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: 5px;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.split-picker-cell:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.split-picker-cell--active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
}
.split-picker-cell--disabled {
    opacity: 0.22;
    cursor: not-allowed;
    background: var(--surface);
}


.split-settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    gap: 8px;
}

.split-settings-reset-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 5px 10px;
    border-radius: var(--radius);
    font-size: 10.5px;
    cursor: pointer;
    transition: all 0.12s;
}
.split-settings-reset-btn:hover { border-color: var(--accent); color: var(--accent); }

.split-settings-done-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    padding: 5px 16px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}
.split-settings-done-btn:hover { opacity: 0.88; }


.split-config {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 5px 8px;
    background: rgba(var(--surface-rgb, 255,255,255), 0.88);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
    z-index: 500;
    pointer-events: auto;
}

[data-theme="dark"] .split-config {
    background: rgba(26, 25, 22, 0.88);
}

.split-product-select,
.split-basemap-select {
    flex: 1;
    font-size: 10.5px;
    font-family: 'IBM Plex Sans', sans-serif;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 3px 6px;
    outline: none;
    cursor: pointer;
    max-width: 200px;
}
.split-product-select { flex: 2; }
.split-product-select:focus,
.split-basemap-select:focus { border-color: var(--accent); }


.split-divider-v {
    width: 4px;
    background: var(--border);
    cursor: col-resize;
    transition: background 0.15s;
    z-index: 5;
}
.split-divider-h {
    height: 4px;
    background: var(--border);
    cursor: row-resize;
    transition: background 0.15s;
    z-index: 5;
}
.split-divider-v:hover,
.split-divider-h:hover { background: var(--accent); }



.map-cbar-control {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}


.map-cbar-show-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color 0.13s ease, color 0.13s ease, background-color 0.13s ease;
}
.map-cbar-show-btn:hover { border-color: var(--accent); color: var(--accent); }


.map-cbar {
    position: relative;
    display: flex;
    flex-direction: column;
    


    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--border2) 85%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(11px) saturate(0.55);
    -webkit-backdrop-filter: blur(11px) saturate(0.55);
    padding: 5px 7px;
    min-width: 200px;
    max-width: 560px;
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(--font-ui, 'IBM Plex Sans', system-ui, sans-serif);
    
}



.map-cbar--h { min-height: 72px; }


.map-cbar-resize {
    position: absolute;
    top: 0; left: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
    z-index: 2;
    border-top: 2px solid var(--text3);
    border-left: 2px solid var(--text3);
    border-top-left-radius: var(--radius);
    opacity: 0.45;
    transition: opacity 0.12s, border-color 0.12s;
}
.map-cbar-resize:hover { opacity: 1; border-color: var(--accent); }




.map-cbar-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    min-width: 0;
    flex: 0 0 auto;
}

.map-cbar-name {
    flex: 1;
    font-size: clamp(9px, calc(10px * var(--cbar-scale, 1)), 16px);
    font-weight: 600;
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-cbar-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.map-cbar-btn {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 3px;
    color: var(--text2);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
    line-height: 1;
}
.map-cbar-btn:hover { border-color: var(--accent); color: var(--accent); }

.map-cbar-bar {
    flex: 0 0 clamp(8px, calc(10px * var(--cbar-scale, 1)), 14px);
    height: clamp(8px, calc(10px * var(--cbar-scale, 1)), 14px);
    min-height: 8px;
    border-radius: 3px;
    width: 100%;
    border: 1px solid var(--border);
    box-sizing: border-box;
    overflow: hidden;
}

.map-cbar-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
    overflow: hidden;
    flex: 0 0 auto;
}
.map-cbar-labels span {
    min-width: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(7.5px, calc(8px * var(--cbar-scale, 1)), 14px);
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
}

.map-cbar-unit {
    font-size: clamp(8px, calc(9px * var(--cbar-scale, 1)), 15px);
    color: var(--text2);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    margin-top: 2px;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.map-cbar--h .map-cbar-unit {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}






.map-cbar-extra {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    flex: 0 0 auto;
}





.map-cbar-control .map-cbar-extra .hs-shape-legend {
    font-size: clamp(7px, calc(8px * var(--cbar-scale, 1)), 13px);
    gap: 6px;
}
.map-cbar-control .map-cbar-extra .hs-leg-item svg {
    width: 1em;
    height: 1em;
}





.map-cbar--swatch.map-cbar--h { min-width: 168px; max-width: 260px; }
.map-cbar-swatch-body { margin: 2px 0 1px; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.map-cbar-swatch-body--v { margin: 4px 0 2px; }
.map-cbar-control .map-cbar-swatch-body .hs-cbar-swatches {
    font-size: clamp(8px, calc(9px * var(--cbar-scale, 1)), 15px);
    gap: 8px 10px;
}
.map-cbar-swatch-body--v .hs-cbar-swatches { flex-direction: column; align-items: flex-start; }
.map-cbar-control .map-cbar-swatch-body .hs-cbar-swatch i {
    width: calc(11px * var(--cbar-scale, 1));
    height: calc(11px * var(--cbar-scale, 1));
}




.map-cbar--hotspot {
    min-width: 190px;
    max-width: 300px;
    height: auto;
    min-height: 0;
    padding: 7px 8px 6px;
    --cbar-scale: 1;
}
.map-cbar--hotspot .map-cbar-resize { display: none; }
.map-cbar--hotspot .map-cbar-swatch-body .hs-cbar-swatches,
.map-cbar--hotspot .map-cbar-swatch-body--v .hs-cbar-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 5px 7px;
    width: 100%;
}
.map-cbar--hotspot .hs-cbar-swatch {
    justify-content: center;
    gap: 4px;
    min-width: 0;
    font-size: clamp(8px, calc(9px * var(--cbar-scale, 1)), 12px);
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}
.map-cbar-control .map-cbar--hotspot .map-cbar-extra .hs-shape-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 5px 8px;
    width: 100%;
}
.map-cbar--hotspot .hs-leg-item {
    align-items: flex-start;
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.map-cbar--hotspot .hs-firms-credit {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}





.map-cbar--v {
    min-width: 78px;
    max-width: 180px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    

    align-items: stretch;
    padding: 5px;
}

.map-cbar-actions--v {
    align-self: flex-end;
    margin-bottom: 2px;
    flex: 0 0 auto;
}

.map-cbar-name--v {
    




    flex: 0 0 auto;
    font-size: clamp(8px, calc(9px * var(--cbar-scale, 1)), 14px);
    font-weight: 600;
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    text-align: center;
    margin-bottom: 3px;
    writing-mode: horizontal-tb;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-cbar-v-wrap {
    display: flex;
    gap: 3px;
    align-items: stretch;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 100px;
    overflow: hidden;
}

.map-cbar-labels--v {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    

    width: max-content;
    max-width: calc(100% - 9px);
    margin-top: 0;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.map-cbar-labels--v span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(6.5px, calc(7.5px * var(--cbar-scale, 1)), 13px);
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    line-height: 1;
}

.map-cbar-bar--v {
    

    flex: 0 0 auto;
    width: clamp(5px, 12%, 14px);
    min-width: 5px;
    max-width: 14px;
    min-height: 0;
    max-height: none;
    height: 100%;
    align-self: stretch;
    border-radius: 3px;
    border: 1px solid var(--border);
}

.map-cbar-unit--v {
    font-size: clamp(5px, calc(5.5px * var(--cbar-scale, 1)), 11px);
    color: var(--text2);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 3px;
    text-align: center;
    line-height: 1.2;
    writing-mode: horizontal-tb;
    word-break: break-word;
    max-width: 100%;
    max-height: 3.6em;
    overflow: hidden;
}
.map-cbar--v.map-cbar--hotspot {
    min-height: 0;
}


.map-cbar-btn--picker.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}


.map-cbar-picker {
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.map-cbar-picker-header {
    font-size: 8.5px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.map-cbar-picker-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
}
.map-cbar-picker-item:hover {
    background: var(--surface2);
}
.map-cbar-picker-item--active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.map-cbar-picker-swatch {
    width: 36px;
    height: 7px;
    border-radius: 2px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.map-cbar-picker-auto-icon {
    width: 36px;
    font-size: 11px;
    color: var(--text3);
    text-align: center;
    flex-shrink: 0;
}

.map-cbar-picker-label {
    flex: 1;
    font-size: 9px;
    color: var(--text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.map-cbar-picker-check {
    font-size: 9px;
    color: var(--accent);
    flex-shrink: 0;
}



.leaflet-bottom.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 6px;
    padding-right: 6px;
}




body.split-active .split-win-body .leaflet-bottom.leaflet-right {
    padding-bottom: 4px;
    padding-right: 4px;
    gap: 2px;
}





body.embed-mode .leaflet-bottom.leaflet-right {
    padding-bottom: 2px;
    padding-right: 2px;
}
body.embed-mode .leaflet-bottom.leaflet-left {
    padding-bottom: 2px;
    padding-left: 2px;
}



body.embed-mode.embed-header-off #header { display:none !important; }
body.embed-mode.embed-header-compact #header {
    height:26px;
    min-height:26px;
    padding:0 7px;
    gap:4px;
    background:color-mix(in srgb, var(--surface) 38%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--border) 42%, transparent);
    box-shadow:0 1px 5px color-mix(in srgb, #0f172a 4%, transparent);
    backdrop-filter:blur(8px) saturate(1.03);
    -webkit-backdrop-filter:blur(8px) saturate(1.03);
}
body.embed-mode.embed-header-compact #header::before {
    content:"";
    order:0;
    width:16px;
    height:16px;
    flex:0 0 16px;
    background:center/contain no-repeat url("./assets/images/logo.png");
}
body.embed-mode.embed-header-compact #header::after {
    content:"AERIS";
    order:1;
    color:var(--text);
    font-family:'Sora','IBM Plex Sans',sans-serif;
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
}
body.embed-mode.embed-header-compact #header .brand,
body.embed-mode.embed-header-compact #header .sep,
body.embed-mode.embed-header-compact #header .header-mid { display:none !important; }
body.embed-mode.embed-header-compact #header .header-right {
    order:2;
    margin-left:auto;
}
body.embed-mode.embed-header-compact #header .clock-wrap {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    min-height:18px;
    padding:0 6px;
    border:1px solid color-mix(in srgb, var(--border) 38%, transparent);
    border-radius:999px;
    background:color-mix(in srgb, var(--surface) 30%, transparent);
}
body.embed-mode.embed-header-compact #header .clock-row {
    display:flex;
    align-items:center;
    gap:5px;
    height:13px;
    line-height:1;
}
body.embed-mode.embed-header-compact #header .clock-utc { display:none !important; }
body.embed-mode.embed-header-compact #header .clock-local { display:flex !important; }
body.embed-mode.embed-header-compact #header .clock-val {
    display:block;
    min-width:0;
    font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;
    font-weight:600;
    line-height:1;
    letter-spacing:.01em;
}
body.embed-mode.embed-header-compact #header .clock-label {
    display:block;
    font-family:'IBM Plex Sans',sans-serif;
    font-size:7.5px;
    font-weight:700;
    line-height:1;
    letter-spacing:.055em;
    color:var(--text3);
}
body.embed-mode.embed-header-compact #header .clock-tz-btn { display:none !important; }
@media (max-width:420px) {
    body.embed-mode.embed-header-compact #header { height:25px; min-height:25px; padding:0 6px; }
    body.embed-mode.embed-header-compact #header::before { width:15px; height:15px; flex-basis:15px; }
    body.embed-mode.embed-header-compact #header::after { font-size:8.5px; }
}





.leaflet-control-attribution .bmap-attr {
    cursor: help;
    border-bottom: 1px dotted currentColor;
}


.leaflet-tile {
    outline: 1px solid transparent;
}





.leaflet-tile-container {
    
}


.split-win .leaflet-container {
    image-rendering: auto;
    backface-visibility: hidden;
}








#map-wrap { position: relative !important; overflow: hidden !important; flex: 1; }
#map      { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }


body.split-active #timeline { display: none !important; }




body:not(.split-active) .split-win--primary .win-tl { display: none !important; }


.split-float-toolbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 10px; gap: 8px;
    z-index: 900; flex-shrink: 0;
    transition: transform 0.2s, opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.split-float-toolbar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.split-float-title { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.split-float-toolbar-mid { flex: 1; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.split-float-toolbar-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.split-quick-bar  { display: flex; gap: 3px; }
.split-quick-btn  {
    padding: 3px 9px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.12s; min-width: 26px;
}
.split-quick-btn:hover  { background: var(--accent-dim); color: var(--accent); }
.split-quick-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.split-arrange-btn {
    padding: 4px 10px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); white-space: nowrap; cursor: pointer; transition: all 0.12s;
}
.split-arrange-btn:hover { background: var(--accent-dim); color: var(--accent); }

.split-exit-btn {
    padding: 4px 10px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--red); cursor: pointer; white-space: nowrap; transition: all 0.12s;
}
.split-exit-btn:hover { background: var(--red-bg); }


.split-sync-step-btn,
.split-sync-map-btn {
    padding: 4px 10px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); white-space: nowrap; cursor: pointer; transition: all 0.15s;
}
.split-sync-step-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.split-sync-map-btn:hover  { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

.split-sync-step-btn--on {
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent);
}
.split-sync-map-btn--on {
    background: color-mix(in srgb, #22c55e 18%, transparent) !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
    box-shadow: 0 0 0 1px #22c55e;
}


.split-win {
    position: absolute;
    min-width: 200px; min-height: 140px;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border-radius: 0; border: none; box-shadow: none;
    transition: box-shadow 0.15s, border-color 0.15s;
}
#map-wrap.split-mode .split-win {
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13) !important;
}
#map-wrap.split-mode .split-win--active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.22), 0 4px 18px rgba(0,0,0,0.18) !important;
}


.split-win-titlebar {
    display: none; 
    align-items: center; height: 34px;
    padding: 0 6px 0 10px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    gap: 5px; flex-shrink: 0;
    user-select: none; cursor: grab;
}
.split-win-titlebar.visible { display: flex; }
.split-win-titlebar:active  { cursor: grabbing; }
.split-win-icon  { font-size: 12px; flex-shrink: 0; }
.split-win-label {
    flex: 1; font-size: 11px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
}
.split-win-title-actions { display: flex; gap: 2px; margin-left: 4px; }
.split-win-time {
    display: flex; align-items: center; gap: 3px;
    white-space: nowrap; margin-left: auto;
    flex-shrink: 0;
}
.swt-icon {
    font-size: 13px; line-height: 1; flex-shrink: 0; width: 18px; text-align: center;
}
.swt-icon.swt-radar {
    filter: brightness(0); 
}
[data-theme="dark"] .swt-icon.swt-radar {
    filter: none; 
}
.swt-time-val {
    font-size: 11px; font-weight: 600; color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.01em;
}
.swt-utc {
    font-size: 11px; font-weight: 600; color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
}
.swt-sep {
    color: var(--text3); font-size: 10px; font-weight: 400;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; text-align: center; flex-shrink: 0;
}

.split-win-time.swt-preloading {
    gap: 4px;
    flex-wrap: nowrap;
    
    min-width: 0;
    overflow: hidden;
}
.swt-preload-bar {
    display: flex; align-items: center; gap: 2px;
    flex-shrink: 1;
    min-width: 0;
}
.swt-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text3);
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.swt-dot--on {
    background: var(--accent);
    transform: scale(1.15);
}

.swt-preloading .swt-dot--on:last-of-type {
    animation: swt-dot-pulse 0.8s ease-in-out infinite;
}
@keyframes swt-dot-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}
.swt-preload-pct {
    font-size: 10px; font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
    letter-spacing: 0.02em;
    min-width: 26px; text-align: right;
    flex-shrink: 0;
}
[data-theme="dark"] .swt-dot { background: var(--text3); }
[data-theme="dark"] .swt-dot--on { background: var(--accent); }


@media (max-width: 639px) {
    
    .split-win-titlebar {
        height: auto;
        min-height: 34px;
        padding: 4px 6px 4px 10px;
        flex-wrap: nowrap;
    }

    
    .split-win-time {
        max-width: 50%;
        flex-shrink: 1;
        overflow: hidden;
    }

    

    .swt-dot {
        width: 6px; height: 6px;
    }
    .swt-preload-pct {
        font-size: 11px;
        min-width: 28px;
    }

    
    .split-win-label {
        min-width: 0;
        flex: 1;
    }
}


@media (max-width: 379px) {
    .split-win-time {
        max-width: 44%;
    }
    
    .swt-dot {
        width: 5px; height: 5px;
    }
    .swt-preload-bar {
        gap: 1px;
    }
    .swt-preload-pct {
        font-size: 10px;
        min-width: 24px;
    }
}


@media (max-height: 500px) and (orientation: landscape) {
    .split-win-titlebar {
        height: 30px;
        min-height: 30px;
        padding: 2px 6px 2px 8px;
    }
    .swt-dot {
        width: 4px; height: 4px;
    }
    .swt-preload-pct {
        font-size: 9px;
        min-width: 22px;
    }
}

.split-win-btn {
    width: 22px; height: 22px; border-radius: 4px;
    border: none; background: transparent; color: var(--text3);
    font-size: 10px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.12s, color 0.12s; flex-shrink: 0;
}
.split-win-btn:hover       { background: var(--border); color: var(--text); }
.split-win-btn.active      { background: var(--accent-dim); color: var(--accent); }
.split-win-close:hover     { background: var(--red-bg); color: var(--red); }
.split-win-legend.active   { background: var(--accent-dim); color: var(--accent); }

.wt-spacer { flex: 1; }


.split-win-body      { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.split-win-map       { position: absolute; inset: 0; width: 100%; height: 100%; }


.split-win-drop-overlay {
    position: absolute; inset: 0;
    background: rgba(59,130,246,0.10);
    border: 2px dashed var(--accent); border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 80;
}
.split-win-drop-overlay.visible { opacity: 1; }
.split-win-drop-overlay.hover   { background: rgba(59,130,246,0.22); border-style: solid; opacity: 1; }
.split-drop-label {
    font-size: 12px; font-weight: 600; color: var(--accent);
    background: var(--surface); padding: 4px 12px;
    border-radius: 20px; pointer-events: none; box-shadow: var(--shadow);
}









.win-lp {
    position: absolute;
    left: 0; top: 6px;
    bottom: 0;          
    z-index: 600;
    pointer-events: none;    
    display: flex;
    align-items: flex-start; 
}


.win-lp-strip {
    width: 22px;
    height: auto;
    min-height: unset;
    pointer-events: all;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 5px 3px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.12);
    transition: background 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
    align-self: flex-start; 
}
.win-lp-strip:hover { background: var(--surface2); box-shadow: 2px 2px 10px rgba(0,0,0,0.18); }
.win-lp-strip-icon { font-size: 13px; line-height: 1; }
.win-lp-badge {
    background: var(--accent); color: #fff;
    border-radius: 8px; padding: 0 3px; font-size: 9px; font-weight: 700;
    min-width: 13px; text-align: center; line-height: 13px; height: 13px;
}


.win-lp-drawer {
    width: 190px;
    max-height: calc(100% - 12px);
    height: auto;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 7px 7px 0;
    box-shadow: 4px 4px 18px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: translateX(-10px) scaleX(0.96);
    transform-origin: left center;

    transition:
        transform 180ms ease,
        opacity 150ms ease;

    


    contain: layout paint style;
}

.win-lp:not(.win-lp--collapsed) .win-lp-drawer {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    pointer-events: auto;
}


.win-lp-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 8px; background: var(--surface2);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.win-lp-drawer-title { font-size: 10.5px; font-weight: 700; color: var(--accent); }
.win-lp-drawer-close {
    border: none; background: transparent; color: var(--text3);
    cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1;
    border-radius: 3px; transition: color 0.1s, background 0.1s;
}
.win-lp-drawer-close:hover { color: var(--text); background: var(--border); }


.win-lp-scroll {
    overflow-y: auto; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    


    overscroll-behavior: contain;
    touch-action: pan-y;
}


.win-lp-sec-head {
    font-size: 9px; font-weight: 700; color: var(--text3);
    padding: 5px 8px 3px; text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--surface2); border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border); flex-shrink: 0;
    white-space: nowrap; overflow: hidden;
}


.win-lp-list { padding: 3px 0; }
.win-lp-empty {
    font-size: 9.5px; color: var(--text3); text-align: center;
    padding: 7px 8px; font-style: italic;
}
.win-lp-row {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 8px; transition: background 0.1s;
}
.win-lp-row:hover { background: var(--surface2); }
.win-lp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.win-lp-name {
    flex: 1; font-size: 10.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-lp-remove {
    width: 15px; height: 15px; border: none; background: transparent;
    color: var(--text3); cursor: pointer; border-radius: 3px;
    font-size: 13px; line-height: 1; padding: 0; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    transition: color 0.1s, background 0.1s;
}
.win-lp-remove:hover { color: var(--red, #ef4444); background: rgba(239,68,68,0.1); }




.win-lp-catalog {
    padding: 3px 0;
    

}
.win-lp-catalog::-webkit-scrollbar { width: 6px; }
.win-lp-catalog::-webkit-scrollbar-thumb { background: var(--border2, #ccc); border-radius: 3px; }
.win-lp-catalog::-webkit-scrollbar-track { background: transparent; }
.win-lp-cat-btn {
    display: flex; align-items: center; gap: 5px;
    width: 100%; padding: 3px 8px;
    border: none; background: transparent; cursor: pointer;
    text-align: left; transition: background 0.1s;
}
.win-lp-cat-btn:hover { background: var(--surface2); }
.win-lp-cat-btn--active { background: var(--accent-dim, rgba(59,130,246,0.08)); }
.win-lp-cat-btn--active:hover { background: var(--accent-dim, rgba(59,130,246,0.14)); }
.win-lp-cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.win-lp-cat-name {
    flex: 1; font-size: 10.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-lp-cat-action {
    font-size: 13px; font-weight: 700; color: var(--text3);
    flex-shrink: 0; width: 14px; text-align: center; line-height: 1;
}
.win-lp-cat-btn--active .win-lp-cat-action { color: var(--red, #ef4444); }


.win-lp-bmap-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; padding: 5px 7px 8px;
}
.win-lp-bmap-btn {
    padding: 4px 3px; font-size: 9.5px;
    border-radius: 4px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text2);
    cursor: pointer; text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-lp-bmap-btn:hover { background: var(--surface); border-color: var(--accent); color: var(--text); }
.win-lp-bmap-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }


.win-lp-boundary { padding: 4px 0 6px; }

.win-lp-blayer-row {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 8px 0;
}
.win-lp-blayer-row--disabled { opacity: 0.4; pointer-events: none; }

.win-lp-blayer-color {
    width: 20px; height: 20px; border-radius: 4px;
    border: 1px solid var(--border); padding: 0;
    background: none; cursor: pointer; flex-shrink: 0;
}
.win-lp-blayer-color::-webkit-color-swatch-wrapper { padding: 1px; }
.win-lp-blayer-color::-webkit-color-swatch { border-radius: 3px; border: none; }

.win-lp-blayer-name {
    flex: 1; font-size: 10px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.win-lp-blayer-tog-wrap { margin-left: auto; flex-shrink: 0; }

.win-lp-blayer-sliders { padding: 2px 8px 4px 10px; }

.win-lp-blayer-slider-row {
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
}
.win-lp-blayer-slider-lbl {
    font-size: 9px; color: var(--text3); width: 34px; flex-shrink: 0;
}
.win-lp-blayer-slider-row .win-lp-op-slider { flex: 1; }
.win-lp-blayer-val {
    font-size: 9px; color: var(--text3); width: 28px;
    text-align: right; flex-shrink: 0;
}

.tog--disabled { opacity: 0.4; pointer-events: none; }



#sidebar.split-mode .accordion[data-id="active-layers"] .accordion-head {
    opacity: 0.9;
}

.lp-split-hint {
    font-size: 9px; color: var(--accent); margin-left: auto;
    font-weight: 500; white-space: nowrap;
}


.lp-win-status {
    margin: 4px 0; border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
}
.lp-win-status-head {
    background: var(--surface2); padding: 3px 8px;
    font-size: 10px; font-weight: 600; color: var(--text2);
    border-bottom: 1px solid var(--border);
}
.lp-win-status-empty { font-size: 10px; color: var(--text3); padding: 4px 8px; font-style: italic; }
.lp-win-status-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 8px;
}
.lp-win-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lp-win-status-name { flex: 1; font-size: 10.5px; color: var(--text2); }
.lp-win-status-badge { font-size: 8.5px !important; padding: 1px 4px !important; }


.lp-item--split { flex-wrap: wrap; gap: 4px; align-items: flex-start; padding: 5px 6px; }
.lp-item--split .lp-info--draggable { cursor: grab; flex: 1; min-width: 100px; }
.lp-item--split .lp-info--draggable:active { cursor: grabbing; }
.lp-win-btns { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; margin-top: 2px; }
.lp-win-add-btn {
    font-size: 9.5px; padding: 2px 6px; border-radius: 3px;
    border: 1px solid var(--border2); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.12s;
    font-weight: 500;
}
.lp-win-add-btn:hover:not([disabled]) {
    background: var(--accent-dim, rgba(59,130,246,0.15));
    border-color: var(--accent); color: var(--accent);
}
.lp-win-add-btn--has {
    background: var(--accent-dim, rgba(59,130,246,0.12));
    border-color: var(--accent); color: var(--accent);
    cursor: pointer;
    font-weight: 600;
}
.lp-win-add-btn--has:hover {
    background: rgba(239,68,68,0.12);
    border-color: var(--red, #ef4444); color: var(--red, #ef4444);
}


.split-win-resize-br, .split-win-resize-r, .split-win-resize-b { display: none; }
.split-win-resize-br.active { display: block; position: absolute; bottom:0; right:0; width:16px; height:16px; cursor:nwse-resize; z-index:30; }
.split-win-resize-r.active  { display: block; position: absolute; top:34px; right:0; width:5px; bottom:0; cursor:ew-resize; z-index:25; }
.split-win-resize-b.active  { display: block; position: absolute; left:0; right:0; bottom:0; height:5px; cursor:ns-resize; z-index:25; }
.split-win-resize-br::after {
    content:''; position:absolute; bottom:3px; right:3px;
    width:8px; height:8px; border-right:2px solid var(--border2); border-bottom:2px solid var(--border2);
}
.split-win-resize-r:hover,
.split-win-resize-b:hover { background: rgba(59,130,246,0.12); }










.split-win-legend-box {
    position: absolute;
    z-index: 650;
    pointer-events: none;
    display: none;
    gap: 4px;
    align-items: flex-end;
}







.split-win-legend-box[data-orient="h"] {
    bottom: 26px;
    right: 8px;
    left: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;       
    justify-content: flex-end;
}
.split-win-legend-box[data-orient="h"] .win-legend-item {
    flex: 0 1 auto;
    min-width: 110px;
    
    max-width: 340px;
}


.split-win-legend-box[data-orient="v"] {
    bottom: 26px;
    right: 8px;
    left: auto;
    flex-direction: column;
    align-items: flex-end;
    max-height: calc(100% - 60px);
    
    max-width: 150px;
    overflow: visible;         
}
.split-win-legend-box[data-orient="v"] .win-legend-item--v {
    flex: 0 0 auto;
}






.win-legend-actions {
    display: flex;
    gap: 2px;
    pointer-events: all;
    flex-shrink: 0;
}



.win-legend-actions--h {
    flex-direction: column;
    justify-content: center;   
    align-self: stretch;       
    margin-right: 2px;
}


.win-legend-v-outer {
    display: flex;
    flex-direction: column;
    align-items: center;       
    gap: 2px;
}
.win-legend-actions--v {
    flex-direction: row;
    justify-content: center;   
    width: 100%;               
}

.win-legend-rotate-btn,
.win-legend-picker-btn {
    pointer-events: all;
    width: 18px; height: 18px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    box-shadow: var(--shadow-sm);
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
}
.win-legend-rotate-btn:hover,
.win-legend-picker-btn:hover { background: var(--surface2); color: var(--accent); }



.win-legend-picker-menu {
    pointer-events: all;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 700;
    overflow: hidden;
    min-width: 130px;
}

.split-win-legend-box .win-legend-picker-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
}

.split-win-body > .win-legend-picker-menu {
    position: absolute;
}
.win-legend-picker-menu-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 9px;
    font-size: 10px;
    color: var(--text2);
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}
.win-legend-picker-menu-item:hover { background: var(--surface2); color: var(--text); }
.win-legend-picker-menu-item.active {
    color: var(--accent);
    background: var(--accent-dim);
}
.win-legend-picker-menu-item .lpm-swatch {
    width: 18px; height: 8px;
    border-radius: 2px;
    border: 1px solid var(--border2);
    flex-shrink: 0;
}


.win-legend-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 6px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-height: 44px;
    
}


.win-legend-item--v {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 3px;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    flex-direction: row;       
    align-items: stretch;
    gap: 1px;
    

    width: 56px;
    max-width: 140px;
    min-width: 52px;
    min-height: 100px;
    box-sizing: border-box;
    overflow: hidden;
}
.win-legend-item--hotspot {
    min-width: 0;
    min-height: 0;
    padding: 8px 9px 7px;
    gap: 3px;
    overflow: visible;
    
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(8px) saturate(.7);
    -webkit-backdrop-filter: blur(8px) saturate(.7);
}
.win-legend-item--hotspot.win-legend-item--v {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.win-legend-hotspot-title { color:var(--text); font-size:12px; font-weight:750; line-height:1.1; }
.win-legend-hotspot-subtitle { color:var(--text3); font-size:8px; line-height:1.2; }
.win-legend-swatch-body { margin-top:1px; font-size:10px; }
.win-legend-extra { margin-top:2px; padding-top:4px; border-top:1px solid var(--border); font-size:9px; line-height:1.25; }
.win-legend-item--hotspot .hs-cbar-swatches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:initial; gap:4px; }
.win-legend-item--hotspot .hs-cbar-swatch { gap:3px; font-size:9px; white-space:nowrap; }
.win-legend-item--hotspot .hs-cbar-swatch i { width:9px; height:9px; }
.win-legend-item--hotspot .hs-shape-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 6px; font-size:8px; }
.win-legend-item--hotspot .hs-leg-item { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.win-legend-item--hotspot .hs-firms-credit { margin-top:3px; font-size:7px; }

.win-legend-resize {
    position: absolute;
    top: 0; left: 0;
    width: 12px; height: 12px;
    cursor: nwse-resize;
    z-index: 2;
    pointer-events: all;
    border-top: 2px solid var(--text3);
    border-left: 2px solid var(--text3);
    border-top-left-radius: 4px;
    opacity: 0.45;
    transition: opacity 0.12s, border-color 0.12s;
}
.win-legend-resize:hover { opacity: 1; border-color: var(--accent); }


.win-legend-v-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1px;
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.win-legend-gradient {
    flex: 0 0 clamp(6px, calc(7px * var(--cbar-scale, 1)), 10px);
    width: 100%;
    height: clamp(6px, calc(7px * var(--cbar-scale, 1)), 10px);
    min-height: 6px;
    border-radius: 3px; margin-bottom: 2px;
    border: 1px solid var(--border2);
    min-width: 60px;
}
.win-legend-gradient--v {
    
    flex: 0 0 auto;
    width: clamp(5px, 12%, 12px);
    min-width: 5px;
    max-width: 12px;
    min-height: 0;
    max-height: none;
    height: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
    align-self: stretch;
    border-radius: 3px;
    border: 1px solid var(--border2);
}
.win-legend-labels {
    display: flex; justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(6.5px, calc(7.5px * var(--cbar-scale, 1)), 13px);
    color: var(--text2);
    overflow: hidden;
    min-width: 60px;
}
.win-legend-labels span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 32px;
}
.win-legend-labels--v {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(5.5px, calc(6px * var(--cbar-scale, 1)), 11px);
    color: var(--text2);
    min-height: 0;
    height: 100%;
    max-height: none;
    text-align: right;
    line-height: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.win-legend-labels--v span { white-space: nowrap; line-height: 1; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.win-legend-unit {
    font-size: clamp(7px, calc(8px * var(--cbar-scale, 1)), 14px);
    color: var(--text);
    margin-top: 2px;
    font-family: 'IBM Plex Mono', monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
}
.win-legend-unit--v {
    font-size: clamp(5px, calc(5.5px * var(--cbar-scale, 1)), 10px);
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100%;
    width: 9px;            
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    text-align: center;
    line-height: 1;
}


.win-legend-item--tiny { padding: 3px 4px; }
.win-legend-item--v.win-legend-item--tiny { width: 52px; min-width: 52px; min-height: 90px; }
.win-legend-item--tiny .win-legend-gradient   { height: 6px; margin-bottom: 2px; min-width: 44px; }
.win-legend-item--tiny .win-legend-gradient--v { width: 5px !important; min-width: 5px !important; max-width: 5px !important; flex: 0 0 5px !important; min-height: 60px; }
.win-legend-item--tiny .win-legend-labels     { font-size: 6px; min-width: 44px; }
.win-legend-item--tiny .win-legend-labels--v  { font-size: 5.5px; min-height: 60px; max-height: 100px; }
.win-legend-item--tiny .win-legend-unit       { font-size: 7px; }
.win-legend-item--tiny .win-legend-unit--v    { font-size: 5.5px; max-height: 80px; }







.win-tl {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 5;
}


.win-tl-scrubber {
    padding: 6px 10px 4px;
}
.win-tl-track {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: height 0.15s;
}
.win-tl:hover .win-tl-track { height: 6px; }
.win-tl-fill {
    position: absolute; left:0; top:0; bottom:0;
    background: var(--accent); border-radius: 2px;
    pointer-events: none;
    

    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--tl-progress, 0.6));
    will-change: transform;
}
.win-tl-thumb {
    position: absolute; top: 50%;
    







    left: var(--tl-thumb-x, 60%);
    transform: translateX(-50%) translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    pointer-events: none;
    opacity: 0; transition: opacity 0.15s;
    will-change: transform;
}
.win-tl:hover .win-tl-thumb,
.win-tl--expanded .win-tl-thumb { opacity: 1; }


.win-tl-controls {
    display: flex; align-items: center; gap: 4px;
    padding: 0 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.18s ease, padding 0.2s ease;
}
.win-tl:hover .win-tl-controls,
.win-tl--expanded .win-tl-controls {
    max-height: 34px;
    opacity: 1;
    padding: 4px 8px 5px;
}

.wt-btn {
    width: 22px; height: 22px; border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text2);
    font-size: 9px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.12s; flex-shrink: 0;
}
.wt-btn:hover  { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.wt-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.wt-play-btn   { width: 24px; height: 24px; border-radius: 50%; font-size: 10px; }
.wt-time {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    color: var(--accent); white-space: nowrap; flex: 1; text-align: center;
    font-weight: 600;
}
body.split-active .wt-time { display: none; }
.wt-speed {
    font-size: 10px; background: var(--surface);
    border: 1px solid var(--border); color: var(--text2);
    border-radius: 3px; padding: 2px 4px; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; flex-shrink: 0;
}
.wt-sync-btn { font-size: 12px; }
.wt-sync-btn.wt-sync--on {
    background: rgba(34,197,94,0.15); border-color: #22c55e; color: #22c55e;
}
.wt-mapsync-btn { font-size: 11px; }
.wt-mapsync-btn.wt-mapsync--on {
    background: rgba(99,102,241,0.15); border-color: #6366f1; color: #6366f1;
}


.split-layer-ghost {
    position: fixed; padding: 5px 12px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 600; border-radius: 20px;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}


.split-arrange-panel {
    position: absolute; top: 44px; right: 10px; width: 252px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 950; overflow: hidden;
}
.split-arrange-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; font-size: 12px; font-weight: 600;
    border-bottom: 1px solid var(--border); background: var(--surface2);
}
.split-arrange-close { background:none; border:none; color:var(--text3); font-size:13px; cursor:pointer; padding:2px 6px; border-radius:4px; }
.split-arrange-close:hover { background: var(--border); color: var(--text); }
.split-arrange-body  { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.split-arrange-hint  { font-size: 11px; color: var(--text3); }
.split-arrange-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.split-arrange-preset {
    padding: 7px 8px; font-size: 11px; border: 1px solid var(--border);
    border-radius: 5px; background: var(--surface2); color: var(--text2);
    cursor: pointer; text-align: left; transition: all 0.12s;
}
.split-arrange-preset:hover   { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.split-arrange-preset.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.split-arrange-nums { display: flex; gap: 4px; flex-wrap: wrap; }
.split-arrange-num-btn {
    padding: 4px 9px; font-size: 11px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface2); color: var(--text2); cursor: pointer; transition: all 0.12s;
}
.split-arrange-num-btn:hover { background: var(--accent); color: #fff; }


.lp-split-actions { display:flex; align-items:center; gap:2px; opacity:0; transition:opacity 0.15s; flex-shrink:0; margin-left:2px; }
.lp-item:hover .lp-split-actions { opacity: 1; }
.lp-split-btn {
    width:20px; height:20px; border-radius:4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.12s; line-height:1;
}
.lp-split-overlay:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.lp-split-newwin:hover  { background:var(--green-bg); color:var(--green); border-color:var(--green); }
.lp-drag-to-win {
    width:20px; height:20px; display:flex; align-items:center; justify-content:center;
    font-size:14px; color:var(--text3); cursor:grab;
    border-radius:4px; border:1px solid transparent; transition:all 0.12s; user-select:none;
}
.lp-drag-to-win:hover  { background:var(--amber-bg); color:var(--amber); border-color:var(--amber); }
.lp-drag-to-win:active { cursor: grabbing; }


.lp-from-split .lp-toggle-btn { opacity: 0.6; }
.lp-split-badge { font-size: 10px; margin-left: 4px; opacity: 0.7; }


#statusbar {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 50; top: auto !important;
}


.split-btns { display: flex; gap: 4px; }
.split-header-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 11px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.15s;
}
.split-header-btn:hover       { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.split-header-btn.split-active{ background: var(--accent); color: #fff; border-color: var(--accent); }





.data-info-wrap {
    position: relative;
}

.data-info-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
}

.data-info-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    z-index: 9998;
    overflow: hidden;
    font-size: 11.5px;
    color: var(--text);
    animation: dimFadeIn 0.12s ease;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.data-info-menu::-webkit-scrollbar { width: 3px; }
.data-info-menu::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

@keyframes dimFadeIn {
    from { opacity:0; transform: translateY(-4px); }
    to   { opacity:1; transform: translateY(0); }
}

.data-info-menu.hidden { display: none; }

.dim-section {
    padding: 10px 12px 9px;
}

.dim-section-title {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text3);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

.dim-latest-rows {
    display: flex; flex-direction: column; gap: 4px;
}

.dim-latest-row {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; border-radius: 6px;
    background: var(--surface2);
    border: 1px solid transparent;
    min-height: 30px;
    transition: border-color 0.2s;
}

.dim-cat-icon {
    font-size: 13px; flex-shrink: 0; width: 18px; text-align: center;
}

.dim-cat-name {
    font-size: 11px; font-weight: 600; color: var(--text2);
    white-space: nowrap; flex: 0 0 52px;
}

.dim-cat-time {
    font-size: 10.5px; font-family: monospace;
    color: var(--accent); white-space: nowrap;
    margin-left: auto;
}

.dim-cat-time.dim-stale { color: var(--text3); }


.dim-product-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 6px; border-radius: 4px;
    background: var(--surface2);
}

.dim-product-name {
    font-size: 11px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 120px;
}

.dim-product-time {
    font-size: 10.5px; font-family: monospace;
    color: var(--accent); white-space: nowrap;
}

.dim-product-time.dim-stale { color: var(--text3); }

.dim-loading {
    font-size: 10.5px; color: var(--text3); padding: 2px 6px;
}

.dim-no-data {
    font-size: 10.5px; color: var(--text3); font-style: italic; padding: 2px 6px;
}

.dim-divider {
    height: 1px; background: var(--border); margin: 0 12px;
}


.dim-cache-summary {
    font-size: 10.5px; color: var(--text2);
    padding: 2px 6px 6px;
    display: flex; gap: 12px;
}

.dim-cache-stat { color: var(--text3); }
.dim-cache-stat span { color: var(--text); font-weight: 600; }

.dim-cache-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 140px; overflow-y: auto;
}

.dim-cache-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 6px; border-radius: 4px;
    background: var(--surface2);
    gap: 6px;
}

.dim-cache-prod {
    font-size: 10.5px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
}

.dim-cache-frames {
    font-size: 10.5px; font-family: monospace;
    color: var(--text3); white-space: nowrap;
}

.dim-cache-bar-wrap {
    width: 40px; height: 4px;
    background: var(--surface3, var(--border));
    border-radius: 2px; overflow: hidden;
}

.dim-cache-bar {
    height: 100%; border-radius: 2px;
    background: var(--accent);
    transition: width 0.3s;
}

.dim-cache-reload {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px;
    background: transparent; color: var(--text3); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dim-cache-reload:hover { background: var(--surface3, var(--border)); color: var(--accent); }
.dim-cache-reload:disabled { cursor: default; opacity: 0.6; }
.dim-cache-reload.spinning svg { animation: dim-cache-spin 0.8s linear infinite; }
@keyframes dim-cache-spin { to { transform: rotate(360deg); } }

.dim-cache-badge {
    font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
    font-weight: 600;
}

.dim-cache-badge.active {
    background: rgba(99,180,99,0.18); color: #5cba5c;
}

.dim-cache-badge.inactive {
    background: var(--surface3, var(--border)); color: var(--text3);
}

.dim-empty { font-size: 10.5px; color: var(--text3); padding: 4px 6px; font-style: italic; }

.dim-cache-actions {
    display: flex; justify-content: flex-end;
    padding: 6px 6px 2px;
    gap: 6px;
}

.dim-action-btn {
    font-size: 10.5px; padding: 3px 10px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.12s;
}

.dim-action-btn:hover {
    background: var(--accent-dim); color: var(--accent); border-color: var(--accent);
}







:root {
    --pm-green     : #22c55e;
    --pm-red       : #ef4444;
    --pm-amber     : #f59e0b;
    --pm-blue      : var(--accent);
    --pm-bar-bg    : var(--surface3, var(--border));
    --pm-card-bg   : var(--surface2);
    --pm-card-bdr  : var(--border);
    --pm-row-enter-dur : 0.22s;
    --pm-fade-dur  : 0.55s;
}


.dim-section-processing .dim-section-title {
    position: relative;
}

.pm-active-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px;
    background: var(--accent); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    margin-left: auto;
    transition: opacity 0.2s, transform 0.2s;
}
.pm-active-badge.hidden { opacity: 0; pointer-events: none; transform: scale(0.7); }


.pm-summary {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-right: 2px;
}
.pm-summary::-webkit-scrollbar { width: 3px; }
.pm-summary::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.pm-empty {
    font-size: 10.5px; color: var(--text3);
    font-style: italic; padding: 4px 6px;
    transition: opacity 0.2s;
}


.pm-group-label {
    display: flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text3);
    padding: 3px 4px 2px;
    margin-top: 3px;
}
.pm-group-label:first-child { margin-top: 0; }
.pm-group-icon { font-size: 11px; }

.pm-group-sep {
    height: 1px; background: var(--border);
    margin: 4px 0;
}


@keyframes pmRowEnter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-row {
    display: flex; align-items: flex-start; gap: 5px;
    padding: 5px 7px; border-radius: 6px;
    background: var(--pm-card-bg);
    transition: opacity var(--pm-fade-dur) ease, background 0.25s ease;
    animation: pmRowEnter var(--pm-row-enter-dur) ease-out;
}
.pm-row-running {
    background: var(--accent-soft);
}
.pm-row-done {
    background: rgba(34, 197, 94, 0.06);
}
.pm-row-error {
    background: rgba(239, 68, 68, 0.06);
}
.pm-row-waiting {
    background: rgba(148, 163, 184, 0.05);  
}
.pm-row-fade {
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity var(--pm-fade-dur) ease, transform var(--pm-fade-dur) ease;
}
.pm-row-enter {
    animation: pmRowEnter var(--pm-row-enter-dur) ease-out;
}

.pm-dot {
    font-size: 8px; flex-shrink: 0;
    margin-top: 3px; line-height: 1;
    transition: color 0.3s ease;
}
.pm-row-running .pm-dot {
    will-change: opacity;
    animation: pmPulse 1.4s ease-in-out infinite;
}
@keyframes pmPulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.pm-row-body   { flex: 1; min-width: 0; }
.pm-row-top    { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; flex-wrap: wrap; }

.pm-row-key {
    font-size: 10px; font-weight: 600; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 3px;
    transition: color 0.25s;
}

.pm-row-done    .pm-row-key { color: var(--pm-green); }
.pm-row-error   .pm-row-key { color: var(--pm-red); }
.pm-row-running .pm-row-key { color: var(--text2); }
.pm-row-waiting .pm-row-key { color: var(--text3); }

.pm-row-band {
    font-size: 8.5px; font-weight: 700;
    background: rgba(99, 165, 250, 0.12);
    color: var(--accent);
    border: 1px solid rgba(99, 165, 250, 0.2);
    border-radius: 3px; padding: 0 3px;
    white-space: nowrap; flex-shrink: 0;
    font-family: monospace;
    transition: background 0.25s, color 0.25s;
}
.pm-row-done  .pm-row-band  { background: rgba(34,197,94,0.1); color: var(--pm-green); border-color: rgba(34,197,94,0.2); }
.pm-row-error .pm-row-band  { background: rgba(239,68,68,0.1); color: var(--pm-red);   border-color: rgba(239,68,68,0.2); }

.pm-row-stage {
    font-size: 9.5px; color: var(--text3);
    white-space: nowrap; flex-shrink: 0;
    transition: color 0.25s;
}
.pm-row-done    .pm-row-stage { color: var(--pm-green); }
.pm-row-error   .pm-row-stage { color: var(--pm-red); }
.pm-row-waiting .pm-row-stage { color: var(--text3); }

.pm-row-elapsed {
    font-size: 9px; color: var(--text3);
    font-family: monospace; flex-shrink: 0;
    white-space: nowrap;
}

.pm-progress-wrap {
    height: 3px; border-radius: 2px;
    background: var(--pm-bar-bg);
    overflow: hidden;
}
.pm-progress-bar {
    height: 100%; border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1), background 0.3s ease;
    will-change: width;
}


.pm-actions {
    display: flex; justify-content: flex-end;
    padding: 5px 0 2px;
}
.pm-detail-btn {
    display: flex; align-items: center; gap: 4px;
    font-size: 10.5px;
}





.pm-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.48);
    z-index: 19999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: pmOverlayIn 0.18s ease;
}
.pm-modal-overlay.hidden { display: none; }

@keyframes pmOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pm-modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex; flex-direction: column;
    animation: pmBoxIn 0.2s cubic-bezier(0.34,1.4,0.64,1);
}

@keyframes pmBoxIn {
    from { opacity: 0; transform: scale(0.93) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pm-modal-header {
    display: flex; align-items: center;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
}

.pm-modal-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700;
    color: var(--text); flex: 1;
}

.pm-modal-close {
    width: 22px; height: 22px;
    border: none; border-radius: 5px;
    background: transparent; color: var(--text3);
    cursor: pointer; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
    flex-shrink: 0;
}
.pm-modal-close:hover {
    background: var(--surface2); color: var(--text);
}


.pm-modal-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.pm-modal-body::-webkit-scrollbar { width: 4px; }
.pm-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.pm-modal-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 32px 0;
    color: var(--text3); font-size: 11.5px;
}


.pm-modal-group { display: flex; flex-direction: column; gap: 8px; }

.pm-modal-group-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text3);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.pm-modal-group-icon { font-size: 13px; }
.pm-modal-group-count {
    margin-left: auto;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 0 5px;
    font-size: 9px; font-weight: 700;
    color: var(--text2);
}


@keyframes pmCardEnter {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-card {
    border: 1px solid var(--pm-card-bdr);
    border-radius: 8px;
    background: var(--pm-card-bg);
    overflow: hidden;
    transition: opacity var(--pm-fade-dur) ease, border-color 0.3s ease, box-shadow 0.3s ease;
    animation: pmCardEnter 0.2s ease-out;
}

.pm-card:has(.pm-badge-running) {
    border-color: rgba(96,165,250,0.25);
    box-shadow: 0 0 0 1px rgba(96,165,250,0.08) inset;
}
.pm-card:has(.pm-badge-done) {
    border-color: rgba(34,197,94,0.3);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.06) inset;
}
.pm-card:has(.pm-badge-error) {
    border-color: rgba(239,68,68,0.3);
    box-shadow: 0 0 0 1px rgba(239,68,68,0.06) inset;
}
.pm-card:has(.pm-badge-waiting) {
    border-color: rgba(148,163,184,0.2);
    box-shadow: 0 0 0 1px rgba(148,163,184,0.04) inset;
}

.pm-card-fade  { opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity var(--pm-fade-dur) ease, transform var(--pm-fade-dur) ease; }
.pm-card-enter { animation: pmCardEnter 0.2s ease-out; }

.pm-card-header {
    padding: 10px 12px 7px;
    border-bottom: 1px solid var(--pm-card-bdr);
}

.pm-card-title {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 5px;
}
.pm-card-key {
    font-size: 11px; font-weight: 700; color: var(--text);
    word-break: break-all; flex: 1;
}


.pm-badge {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 4px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    flex-shrink: 0; white-space: nowrap;
    transition: background 0.3s, color 0.3s;
}
.pm-badge-running {
    will-change: opacity, transform;
    background: rgba(96,165,250,0.15); color: var(--accent);
    animation: pmBadgePulse 1.8s ease-in-out infinite;
}
.pm-badge-done {
    background: rgba(34,197,94,0.14); color: var(--pm-green);
}
.pm-badge-error {
    background: rgba(239,68,68,0.14); color: var(--pm-red);
}
.pm-badge-waiting {
    background: rgba(148,163,184,0.14); color: var(--text3);
    animation: pmBadgePulse 2.4s ease-in-out infinite;  
}
@keyframes pmBadgePulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.pm-card-meta {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.pm-card-stage-cur {
    font-size: 10.5px; font-weight: 600; color: var(--text2);
    display: flex; align-items: center; gap: 4px;
    transition: color 0.25s;
}
.pm-card-step {
    font-size: 9.5px; color: var(--text3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 3px; padding: 0 4px;
}
.pm-card-elapsed {
    font-size: 10px; color: var(--text3);
    font-family: monospace; margin-left: auto;
    white-space: nowrap;
}


.pm-card-progress {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--pm-card-bdr);
}
.pm-card-bar-wrap {
    flex: 1; height: 6px; border-radius: 4px;
    background: var(--pm-bar-bg); overflow: hidden;
}
.pm-card-bar {
    height: 100%; border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1), background 0.3s ease;
    position: relative;
    will-change: width;
}
.pm-bar-animated {
    will-change: background-position;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.22) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: pmShimmer 1.8s linear infinite;
}
@keyframes pmShimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}
.pm-card-pct {
    font-size: 10px; font-weight: 700;
    font-family: monospace; color: var(--text2);
    white-space: nowrap; flex-shrink: 0; min-width: 30px;
    text-align: right;
    transition: color 0.3s;
}


.pm-steps-bar {
    display: flex; align-items: flex-start;
    gap: 0; padding: 9px 12px 7px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--pm-card-bdr);
}
.pm-steps-bar::-webkit-scrollbar { display: none; }

.pm-step-item {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; min-width: 30px; gap: 3px;
    position: relative;
    transition: opacity 0.25s;
}

.pm-step-item:not(:last-child)::after {
    content: '';
    position: absolute; top: 4px; left: 50%;
    width: 100%; height: 2px;
    background: var(--pm-bar-bg);
    z-index: 0;
    transition: background 0.35s ease;
}
.pm-step-item:not(:last-child).pm-step-done-connector::after {
    background: var(--pm-green);
}

.pm-step-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--pm-bar-bg);
    border: 1.5px solid var(--border);
    z-index: 1; flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pm-step-done  .pm-step-dot { background: var(--pm-green); border-color: var(--pm-green); }
.pm-step-active .pm-step-dot {
    will-change: opacity, transform;
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    animation: pmStepPulse 1.3s ease-in-out infinite;
}
.pm-step-error .pm-step-dot { background: var(--pm-red); border-color: var(--pm-red); }
@keyframes pmStepPulse {
    0%,100% { box-shadow: 0 0 0 2px var(--accent-soft); }
    50%      { box-shadow: 0 0 0 5px var(--accent-soft); }
}

.pm-step-lbl {
    font-size: 10px; font-weight: 500;
    color: var(--text3);
    text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 42px; line-height: 1.2;
    letter-spacing: 0.02em;
    transition: color 0.3s ease, font-weight 0.2s;
}
.pm-step-active .pm-step-lbl { color: var(--accent); font-weight: 600; letter-spacing: 0.03em; }
.pm-step-done   .pm-step-lbl { color: var(--pm-green); }
.pm-step-error  .pm-step-lbl { color: var(--pm-red); }


.pm-card-details {
    display: grid; grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 8px 12px 7px;
    border-bottom: 1px solid var(--pm-card-bdr);
}
.pm-detail-row { display: contents; }
.pm-detail-label {
    font-size: 10px; color: var(--text3);
    white-space: nowrap; padding: 1.5px 0;
}
.pm-detail-value {
    font-size: 10px; color: var(--text2); font-family: monospace;
    word-break: break-all; padding: 1.5px 0;
}


.pm-card-msg {
    font-size: 10px; color: var(--text3);
    padding: 6px 12px 7px;
    font-style: italic;
    border-bottom: 1px solid var(--pm-card-bdr);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity 0.3s;
}
.pm-card-msg:empty { display: none; }


.pm-card-hist-wrap {
    padding: 7px 12px 9px;
}
.pm-card-hist-title {
    font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text3); margin-bottom: 5px;
}
.pm-card-hist {
    display: flex; flex-direction: column; gap: 1px;
}
.pm-hist-row {
    display: grid; grid-template-columns: 52px 74px 1fr;
    gap: 4px; align-items: baseline;
    padding: 2px 0;
    border-bottom: 1px solid var(--border);
    transition: opacity 0.2s;
}
.pm-hist-row:last-child { border-bottom: none; }
.pm-hist-time {
    font-size: 9px; color: var(--text3);
    font-family: monospace; white-space: nowrap;
}
.pm-hist-stage {
    font-size: 9.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-hist-msg {
    font-size: 9.5px; color: var(--text3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}






@media (max-width: 639px) {
    .pm-modal-box { max-height: 90vh; border-radius: 8px; }
    .pm-hist-row  { grid-template-columns: 48px 64px 1fr; }
    .pm-card-details { font-size: 9.5px; }
}
@media (max-width: 479px) {
    .pm-modal-box  { max-width: 100%; margin: 0; border-radius: 8px 8px 0 0; align-self: flex-end; }
    .pm-modal-overlay { align-items: flex-end; padding: 0; }
    .pm-modal-body { max-height: 70vh; }
}






.preset-header-btn {
    background: var(--surface2);
    color: var(--text2);
    border-color: var(--border);
    margin-left: 4px;
}
.preset-header-btn:hover {
    background: var(--accent-dim, rgba(99,102,241,0.12));
    color: var(--accent);
    border-color: var(--accent);
}


.preset-panel {
    position: absolute;
    top: 50px;
    right: 14px;
    width: 380px;
    max-height: calc(100vh - 260px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    font-size: 12px;
}
.preset-panel.hidden { display: none !important; }


.preset-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.preset-panel-title {
    font-size: 13px; font-weight: 600; color: var(--text1);
}
.preset-panel-close {
    background: none; border: none; color: var(--text3);
    cursor: pointer; font-size: 14px; padding: 2px 5px;
    border-radius: 4px; line-height: 1;
}
.preset-panel-close:hover { background: var(--red-bg, rgba(239,68,68,0.12)); color: var(--red, #ef4444); }


.preset-save-area {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.preset-name-input,
.preset-desc-input {
    padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface);
    color: var(--text1); font-size: 12px; outline: none;
    transition: border-color 0.15s;
}
.preset-name-input:focus, .preset-desc-input:focus {
    border-color: var(--accent);
}
.preset-save-btn {
    padding: 6px 12px; border-radius: 6px;
    background: var(--accent); color: #fff; border: none;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: opacity 0.15s;
}
.preset-save-btn:hover { opacity: 0.88; }


.preset-list-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px 4px;
    font-size: 11px; color: var(--text3);
    font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    flex-shrink: 0;
}
.preset-count {
    background: var(--accent-dim, rgba(99,102,241,0.15));
    color: var(--accent); border-radius: 10px;
    padding: 1px 7px; font-size: 11px; font-weight: 700;
}


.preset-list {
    flex: 1; overflow-y: auto; padding: 4px 8px 8px;
}
.preset-empty {
    color: var(--text3); text-align: center; padding: 20px 0;
    font-size: 12px;
}
.preset-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 6px;
    background: var(--surface2);
    transition: border-color 0.12s, background 0.12s;
}
.preset-item:hover {
    border-color: var(--accent);
    background: var(--accent-dim, rgba(99,102,241,0.07));
}
.preset-item-main {
    display: flex; align-items: flex-start; gap: 8px;
}
.preset-item-icon {
    font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px;
}
.preset-item-info {
    display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.preset-item-name {
    font-size: 12px; font-weight: 600; color: var(--text1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: default; outline: none; border-radius: 3px;
    padding: 0 2px;
}
.preset-item-name[contenteditable="true"] {
    cursor: text;
    border: 1px solid var(--accent);
    background: var(--surface);
    white-space: normal; overflow: visible;
}
.preset-item-meta {
    font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preset-item-desc {
    font-size: 11px; color: var(--text2); font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preset-item-actions {
    display: flex; gap: 5px; justify-content: flex-end; flex-shrink: 0;
}
.preset-apply-btn,
.preset-rename-btn,
.preset-delete-btn {
    padding: 3px 9px; border-radius: 5px; border: 1px solid var(--border);
    font-size: 11px; cursor: pointer; background: var(--surface); color: var(--text2);
    transition: all 0.12s;
}
.preset-apply-btn  { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.preset-apply-btn:hover  { opacity: 0.85; }
.preset-rename-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.preset-delete-btn:hover { background: var(--red-bg, rgba(239,68,68,0.12)); color: var(--red, #ef4444); border-color: var(--red, #ef4444); }


.preset-panel-footer {
    display: flex; gap: 8px; padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.preset-export-btn,
.preset-import-btn {
    flex: 1; padding: 5px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text2); font-size: 11px; cursor: pointer;
    text-align: center; transition: all 0.12s; display: flex;
    align-items: center; justify-content: center; gap: 4px;
}
.preset-export-btn:hover,
.preset-import-btn:hover {
    background: var(--accent-dim); color: var(--accent); border-color: var(--accent);
}
.preset-export-btn .dw-download-icon {
    width: 14px; height: 14px; flex: 0 0 14px;
}


@media (max-width: 480px) {
    
    .preset-panel { left: 8px; right: 8px; width: auto; }
}











.split-win {
    contain: layout paint style;
    backface-visibility: hidden;
}








.split-win.is-dragging,
.split-win.is-resizing {
    will-change: transform;
}


.split-win-body {
    contain: strict;
}







.split-win-loading {
    display: none; align-items: center; justify-content: center;
    flex-shrink: 0; width: 14px; height: 14px; margin-left: 4px;
    color: var(--text3, var(--muted));
}
.split-win-loading.show { display: inline-flex; }
.split-win-loading .win-load-spin { width: 100%; height: 100%; }

.win-load-overlay {
    position: absolute; inset: 0; z-index: 8000;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg, #0e0e0d) 38%, transparent);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.win-load-overlay.show { opacity: 1; visibility: visible; }
.win-load-overlay .win-load-spin {
    width: 30px; height: 30px; color: var(--accent, #60a5fa);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

.split-win-loading .win-load-spin,
.win-load-overlay .win-load-spin {
    animation: winLoadSpin 2.4s linear infinite;
}
@keyframes winLoadSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .split-win-loading .win-load-spin,
    .win-load-overlay .win-load-spin { animation: none; }
}



.leaflet-overlay-pane,
.leaflet-tile-pane {
    isolation: isolate;
}






.leaflet-image-layer {
    
    backface-visibility: hidden;
}







.win-tl {
    contain: layout paint style;
}


.win-lp-drawer {
    contain: layout paint style;
}


.split-float-toolbar {
    contain: layout paint style;
}


#sidebar, .sidebar {
    contain: layout paint style;
}










.leaflet-image-layer.radar-img {
    image-rendering: pixelated;
    image-rendering: crisp-edges; 
}








.leaflet-overlay-pane > div[class*="radar-"] {
    contain: size layout;
}


@media (prefers-reduced-motion: reduce) {
    .split-win, .win-tl, .win-lp-drawer, .split-float-toolbar,
    .split-win-titlebar, .win-lp-strip {
        transition: none !important;
        animation: none !important;
    }
}


.leaflet-tile {
    image-rendering: auto;
    
}


.split-active * {
    user-select: none;
}
.split-active input,
.split-active textarea,
.split-active select {
    user-select: text;
}


.lp-opacity-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 2px 0 0 26px;
    margin-top: 2px;
}

.lp-item.is-active {
    flex-wrap: wrap;
}

.lp-opacity-icon {
    font-size: 10px;
    color: var(--text3);
    min-width: 14px;
    text-align: center;
    cursor: default;
    user-select: none;
}

.lp-op-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    min-width: 60px;
}
.lp-op-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lp-op-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

.lp-op-val {
    font-size: 10px;
    color: var(--text3);
    min-width: 30px;
    text-align: right;
}


.blayer-color-pick {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.blayer-color-pick::-webkit-color-swatch-wrapper { padding: 2px; }
.blayer-color-pick::-webkit-color-swatch { border-radius: 2px; border: none; }
.blayer-color-pick::-moz-color-swatch { border-radius: 2px; border: none; }


.win-lp-row {
    flex-wrap: wrap;
}

.win-lp-opacity-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 3px 0 2px 20px;
}

.win-lp-opacity-icon {
    font-size: 10px;
    color: var(--text3);
    min-width: 14px;
    text-align: center;
    user-select: none;
}

.win-lp-op-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.win-lp-op-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}
.win-lp-op-slider::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

.win-lp-op-val {
    font-size: 10px;
    color: var(--text3);
    min-width: 28px;
    text-align: right;
}


.dim-label {
    font-size: 11px; font-weight: 600; color: var(--text1);
    white-space: nowrap; min-width: 52px;
}















:root {
    --sidebar-w: 272px;
}





@media (max-width: 1023px) {
    :root { --sidebar-w: 216px; }

    #sidebar { width: var(--sidebar-w); }
    #sidebar.collapsed { width: 0; }

    #sidebar-toggle { left: var(--sidebar-w); }
    #sidebar.collapsed ~ #sidebar-toggle { left: 0; }

    
    #sidebar.collapsed ~ #sidebar-toggle { border-left: 1px solid var(--border); }

    
    #inst-sub { font-size: 9px; }

    
    .preset-header-btn .preset-label,
    .data-info-btn .data-info-label { display: none; }

    
    .clock-val  { font-size: 10.5px; }
    .clock-label { font-size: 8.5px; }
}




@media (max-width: 767px) {
    :root { --sidebar-w: 240px; }

    
    #header { height: 44px; padding: 0 10px; gap: 8px; }

    
    #inst-name { font-size: 11px; }
    #inst-sub  { font-size: 9px; }
    .sep        { display: none; }

    
    .header-label { font-size: 10.5px; }

    
    .header-right { gap: 5px; }

    
    .split-header-btn { padding: 3px 7px; font-size: 10px; }
    #theme-toggle     { width: 26px; height: 26px; font-size: 12px; }

    
    .split-header-btn span:not(svg) { display: none; }

    
    .clock-local { display: none; }
    .clock-val   { font-size: 10.5px; min-width: 44px; }

    
    #sidebar {
        position: fixed;
        top: 44px;
        left: 0;
        bottom: 0;
        z-index: 1100;
        width: var(--sidebar-w);
        transform: translateX(0);
        transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }
    #sidebar.collapsed {
        width: var(--sidebar-w);   
        transform: translateX(calc(-1 * var(--sidebar-w)));
    }

    



    #sidebar-toggle {
        position: fixed;
        left: var(--sidebar-w);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1200;
        transition: left 0.22s cubic-bezier(0.4,0,0.2,1);
    }
    #sidebar.collapsed ~ #sidebar-toggle {
        left: 0;
    }

    
    #body.sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1050;
        backdrop-filter: blur(1px);
    }

    
    #map-wrap { flex: 1; }

    
    #timeline { height: 42px; padding: 0 8px; gap: 6px; }
    .tl-label { display: none; }
    .tl-speed { padding: 2px 4px; font-size: 9.5px; }
    .tl-btn   { width: 24px; height: 24px; font-size: 7.5px; }
    .tl-time  { font-size: 10px; min-width: 44px; }

    
    #statusbar { font-size: 8.5px; padding: 0 8px; gap: 10px; }

    
    .preset-panel { width: calc(100vw - 20px); right: 10px; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }

    
    .data-info-menu { width: 260px; }
}




@media (max-width: 639px) {
    :root { --sidebar-w: min(288px, 88vw); }

    
    html, body { font-size: 13px; }

    
    #header { height: 42px; padding: 0 8px; gap: 6px; }

    
    #logo-wrap  { width: 30px; height: 30px; }
    #logo-svg   { width: 16px; height: 16px; }

    
    #inst-name { font-size: 10.5px; }
    #inst-sub  { font-size: 8.5px; }

    
    .header-label { display: none; }

    
    .split-btns { display: none; }

    
    .split-header-btn { padding: 3px 6px; font-size: 10px; height: 28px; }
    #theme-toggle     { width: 28px; height: 28px; }

    
    .clock-utc   { display: none; }
    .clock-local { display: flex; }
    .clock-local .clock-val { font-size: 11px; color: var(--text2); }
    .clock-tz-btn { display: none; } 

    
    #sidebar {
        top: 42px;
        width: var(--sidebar-w);
    }
    #sidebar-toggle {
        top: 50%;
        transform: translateY(-50%);
        width: 20px; height: 38px;
    }

    
    .accordion-head { padding: 12px 14px; }

    
    .lp-item { padding: 8px 8px; }

    
    #timeline { height: 48px; padding: 0 8px; gap: 6px; }
    .tl-track { height: 5px; }
    .tl-btn   {
        width: 32px; height: 32px;
        border-radius: 50%;
        font-size: 9px;
    }
    .tl-time  { font-size: 10.5px; min-width: 48px; }
    .tl-speed { font-size: 10px; padding: 3px 5px; }

    
    .tl-marks { display: none; }
    .tl-wrap  { padding-bottom: 0; }

    
    .sb-item:has(#sb-layer),
    .sb-item:has(.sb-key:not(:is([data-key="lat"],[data-key="lon"]))) {
        display: none;
    }

    
    #toast { bottom: 64px; }

    




    .preset-panel {
        position: fixed;
        top: calc(44px + 6px);   
        right: 8px;
        left: 8px;
        width: auto;
        
        max-height: calc(100vh  - 44px - 6px - 48px - 8px);
        

        max-height: calc(100dvh - 44px - 6px - 48px - max(8px, env(safe-area-inset-bottom)));
    }

    






    .data-info-menu {
        position: fixed;
        top: calc(44px + 6px); 
        right: 12px;
        left: 12px;
        width: auto;
        transform: none;
    }

    




    .map-cbar:not(.map-cbar--v) { min-width: 140px; padding: 5px 6px; }
    .map-cbar-bar:not(.map-cbar-bar--v) { height: 8px; }

    
    .split-win-titlebar { cursor: default; }
    .split-win-resize-br, .split-win-resize-r, .split-win-resize-b { display: none !important; }

    
    .win-tl-controls {
        max-height: 34px !important;
        opacity: 1 !important;
        padding: 4px 8px 5px !important;
    }
    .win-tl-thumb { opacity: 1 !important; }

    
    .split-float-toolbar { height: 36px; padding: 0 8px; gap: 5px; }
    .split-float-title   { font-size: 11px; }
    .split-quick-btn     { padding: 2px 6px; font-size: 10px; }
    .split-sync-step-btn,
    .split-sync-map-btn  { padding: 3px 7px; font-size: 10px; }
    .split-arrange-btn   { padding: 3px 7px; font-size: 10px; }
    .split-exit-btn      { padding: 3px 7px; font-size: 10px; }
}




@media (max-width: 379px) {
    :root { --sidebar-w: 92vw; }

    #header { height: 40px; padding: 0 6px; gap: 4px; }

    
    #preset-manager-btn { display: none; }

    
    .clock-local .clock-val { font-size: 10.5px; min-width: 40px; }

    
    #timeline  { height: 44px; padding: 0 6px; gap: 4px; }
    .tl-btn    { width: 28px; height: 28px; }
    .tl-time   { font-size: 9.5px; min-width: 40px; }

    
    .data-info-menu { left: 6px; right: 6px; width: auto; }
}





@media (hover: none) and (pointer: coarse) {
    
    .lp-toggle-btn  { width: 24px; height: 24px; }
    .split-win-btn  { width: 28px; height: 28px; }
    .gjson-btn      { padding: 3px 7px; }
    .wt-btn         { width: 28px; height: 28px; }
    .wt-play-btn    { width: 30px; height: 30px; }

    
    input[type=range].op-slider {
        height: 4px;
    }
    input[type=range].op-slider::-webkit-slider-thumb {
        width: 16px; height: 16px;
    }
    .lp-op-slider {
        height: 4px;
    }
    .lp-op-slider::-webkit-slider-thumb {
        width: 18px; height: 18px;
    }

    
    .accordion-head { padding: 13px 14px; }

    
    .lp-drag-handle { display: none; }
    .lp-split-actions { display: none; }
}




@media (max-height: 500px) and (orientation: landscape) {
    
    #header { height: 38px; }

    
    #timeline { height: 38px; }
    .tl-marks { display: none; }
    .tl-wrap  { padding-bottom: 0; }

    
    #sidebar { top: 38px; }
    

    
    #statusbar { display: none; }
}




@supports (padding: max(0px)) {
    #header {
        padding-left:  max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    


    #timeline {
        padding-left:   max(14px, env(safe-area-inset-left));
        padding-right:  max(14px, env(safe-area-inset-right));
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    


    .win-tl {
        padding-bottom: env(safe-area-inset-bottom);
    }

    

    .win-tl-controls {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    #sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    @media (max-width: 767px) {
        #header {
            padding-left:  max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
        }

        



        .win-tl {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}







.rcs-sidebar {
    width: 270px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4,0,0.2,1),
                transform 0.22s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    z-index: 500;
}

.rcs-sidebar.rcs-closed {
    width: 0;
    border-left-width: 0;
}

.rcs-sidebar.rcs-open {
    width: 270px;
    border-left: 1px solid var(--border);
}

.rcs-sidebar.rcs-always-visible {
    width: 270px !important;
    border-left: 1px solid var(--border) !important;
}


.rcs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    gap: 6px;
}

.rcs-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.rcs-header-icon { font-size: 14px; flex-shrink: 0; }

.rcs-header-title {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcs-rain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red, #ef4444);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    flex-shrink: 0;
    animation: rcs-pulse 1.5s infinite;
}

@keyframes rcs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.rcs-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.rcs-sort-btn,
.rcs-settings-btn,
.rcs-audio-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.rcs-sort-btn:hover,
.rcs-settings-btn:hover,
.rcs-audio-btn:hover {
    color: var(--text);
    background: var(--surface2);
}

.rcs-sort-btn.rcs-sort-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft, var(--accent-dim));
}

.rcs-audio-btn.rcs-audio-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}


.rcs-settings-panel {
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    flex-shrink: 0;
}

.rcs-setting-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.rcs-setting-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.rcs-setting-note {
    font-size: 10.5px;
    color: var(--text2);
    margin-top: 6px;
    line-height: 1.5;
}


.rcs-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.rcs-list::-webkit-scrollbar { width: 4px; }
.rcs-list::-webkit-scrollbar-thumb { background: var(--border2, var(--border)); border-radius: 2px; }


.rcs-item {
    border-bottom: 1px solid var(--border);
    padding: 7px 10px 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.rcs-item:last-child { margin-bottom: 0; }

.rcs-item:hover {
    background: var(--surface2);
}


.rcs-item.rcs-item-raining {
    background: var(--red-bg, rgba(239,68,68,0.08));
    border-left: 2px solid var(--red, #ef4444);
    padding-left: 8px;
}

[data-theme="dark"] .rcs-item.rcs-item-raining {
    background: rgba(248, 113, 113, 0.09);
}


[data-theme="dark"] .rcs-item {
    border-bottom-color: var(--border);
}


[data-theme="dark"] .rcs-modal-events-title {
    color: var(--text2, #c9c5bc);
    background: var(--surface2);
}




[data-theme="dark"] .rcs-events-table tbody tr:hover td {
    background: var(--surface2);
}

.rcs-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 4px;
}

.rcs-item-title {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.rcs-type-badge {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
    text-transform: uppercase;
}


.rcs-type-arg  { background: var(--accent-dim, rgba(99,102,241,0.12)); color: var(--accent, #6366f1); }
.rcs-type-aws  { background: var(--amber-bg, rgba(245,158,11,0.1)); color: var(--amber, #d97706); }
.rcs-type-aaws { background: var(--green-bg, rgba(16,185,129,0.1)); color: var(--green, #059669); }
.rcs-type-awsd { background: color-mix(in srgb, var(--amber-bg, rgba(245,158,11,0.1)) 60%, transparent); color: var(--amber, #d97706); }


[data-theme="dark"] .rcs-type-arg  { background: rgba(99,102,241,0.18); color: #a5b4fc; }
[data-theme="dark"] .rcs-type-aws  { background: rgba(245,158,11,0.18); color: #fbbf24; }
[data-theme="dark"] .rcs-type-aaws { background: rgba(16,185,129,0.18); color: #34d399; }
[data-theme="dark"] .rcs-type-awsd { background: rgba(245,158,11,0.12); color: #fbbf24; }

.rcs-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rcs-item-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.rcs-accum {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text2);
    white-space: nowrap;
}

.rcs-accum.rcs-accum-active {
    color: var(--red, #ef4444);
    font-weight: 600;
}

.rcs-signal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border2, #ccc);
    flex-shrink: 0;
    transition: background 0.3s;
}

.rcs-dot-ok        { background: var(--green, #059669); }
.rcs-dot-rain      { background: var(--red, #ef4444); animation: rcs-pulse 1s infinite; }
.rcs-dot-rain-flat { background: var(--amber, #d97706); }  



[data-theme="dark"] .rcs-sidebar .rcs-header-title,
[data-theme="dark"] .rcs-sidebar .rcs-name { color: #f1ede6; }
[data-theme="dark"] .rcs-sidebar .rcs-accum,
[data-theme="dark"] .rcs-sidebar .rcs-setting-note { color: #c8c2b8; }
[data-theme="dark"] .rcs-sidebar :is(.rcs-sort-btn, .rcs-settings-btn, .rcs-audio-btn) {
    color: #d4cec5;
    border-color: #5e5952;
}
[data-theme="dark"] .rcs-sidebar .rcs-signal-dot:not(.rcs-dot-ok):not(.rcs-dot-rain):not(.rcs-dot-rain-flat) {
    background: #777168;
}


.rcs-chart-wrap {
    height: 100px;  
    position: relative;
}

.rcs-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}


.rcs-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 600;
    width: 16px;
    height: 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 5px 0 0 5px;
    color: var(--text3);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, right 0.22s cubic-bezier(0.4,0,0.2,1);
}

.rcs-toggle:hover { color: var(--text); }


#rcs-open-tab, #rcs-collapse { display: none; }



.rcs-toggle.rcs-toggle-active {
    color: var(--accent);
    right: 270px;
}





.rcs-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.rcs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.rcs-modal-box {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    width: min(680px, 100%);
    max-height: min(90vh, 700px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.3));
    overflow: hidden;
}

.rcs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 10px;
}

.rcs-modal-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.rcs-modal-header-left h3 {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcs-modal-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
}

.rcs-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.rcs-modal-close {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--text3);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.rcs-modal-close:hover { color: var(--text); background: var(--surface2); }

.rcs-modal-download {
    min-height: 28px;
    padding: 0 9px;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--accent, #2563eb);
    font: 700 10.5px/1 'IBM Plex Sans', system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.rcs-modal-download .dw-download-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.rcs-modal-download:hover { color: var(--accent, #2563eb); background: var(--surface2); border-color: var(--accent, #2563eb); }
.rcs-modal-download:active { transform: scale(.97); }





.rcs-modal-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.rcs-modal-accum {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
}

.rcs-modal-accum-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
}

.rcs-modal-accum-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    transition: color 0.15s;
}

.rcs-modal-accum-value.rcs-modal-accum-active { color: var(--accent, #2563eb); }

.rcs-modal-date-picker {
    display: flex;
    align-items: center;
    gap: 6px;
}


.rcs-modal-date-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    padding: 4px 8px;
    height: 26px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.rcs-modal-date-trigger:hover { border-color: var(--accent, #2563eb); }
.rcs-modal-date-trigger svg { flex-shrink: 0; opacity: 0.65; }


.rcs-cal-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2000;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius, 5px) + 3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
    padding: 12px;
    width: 240px;
    user-select: none;
}
[data-theme="dark"] .rcs-cal-popup {
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
}
.rcs-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.rcs-cal-nav {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--text2, var(--text));
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.rcs-cal-nav:hover:not(:disabled) { background: var(--surface2, var(--border)); color: var(--text); }
.rcs-cal-nav:disabled,
.rcs-cal-nav-disabled { opacity: 0.3; cursor: default; }
.rcs-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.rcs-cal-weekdays span {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text3, #9e9b94);
    text-align: center;
    padding: 2px 0;
}
.rcs-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.rcs-cal-day {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    text-align: center;
    padding: 4px 0;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    line-height: 1.4;
}
.rcs-cal-day.rcs-cal-empty { cursor: default; }
.rcs-cal-day:not(.rcs-cal-empty):not(.rcs-cal-disabled):hover {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-day.rcs-cal-today {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
    font-weight: 600;
}
.rcs-cal-day.rcs-cal-selected {
    background: var(--accent, #2563eb);
    color: #fff !important;
    border-color: var(--accent, #2563eb);
    font-weight: 600;
}
.rcs-cal-day.rcs-cal-disabled {
    color: var(--text3, #9e9b94);
    opacity: 0.35;
    cursor: default;
}


.rcs-cal-month-label {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    padding: 2px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, border-color 0.12s;
}
.rcs-cal-month-label:hover {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-month-label.rcs-cal-label-active {
    background: var(--surface2, var(--border));
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.rcs-cal-caret {
    flex-shrink: 0;
    transition: transform 0.15s;
}
.rcs-cal-month-label.rcs-cal-label-active .rcs-cal-caret {
    transform: rotate(180deg);
}


.rcs-cal-ym-panel {
    display: none;
    gap: 8px;
    min-height: 160px;
}

.rcs-cal-ym-years {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    max-height: 168px;
    min-width: 64px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.rcs-cal-ym-years::-webkit-scrollbar { width: 4px; }
.rcs-cal-ym-years::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.rcs-cal-ym-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    align-content: start;
    flex: 1;
}

.rcs-cal-ym-year {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    padding: 4px 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    white-space: nowrap;
}
.rcs-cal-ym-year:hover {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-ym-year.rcs-cal-ym-active {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: var(--accent, #2563eb);
    font-weight: 600;
}

.rcs-cal-ym-month {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    padding: 5px 2px;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.rcs-cal-ym-month:hover:not(:disabled) {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-ym-month.rcs-cal-ym-active {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: var(--accent, #2563eb);
    font-weight: 600;
}
.rcs-cal-ym-month.rcs-cal-ym-disabled {
    color: var(--text3, #9e9b94);
    opacity: 0.35;
    cursor: default;
}

.rcs-modal-date-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    padding: 4px 9px;
    height: 26px;
    box-sizing: border-box;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.rcs-modal-date-live:hover { color: var(--text); background: var(--surface3, var(--border)); }
.rcs-modal-date-live.rcs-date-live-active {
    color: #fff;
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
}
.rcs-modal-date-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    flex-shrink: 0;
}
.rcs-modal-date-live.rcs-date-live-active .rcs-modal-date-live-dot {
    opacity: 1;
    animation: rcs-pulse 1.4s ease-in-out infinite;
}



.display-mode .rcs-modal-toolbar { display: none !important; }


.rcs-modal-body {
    flex-shrink: 0;
    height: clamp(180px, 30vh, 280px);
    padding: 14px 16px 10px;
    position: relative;
}

.rcs-modal-body canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}



.rcs-modal-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    z-index: 2;
}

.rcs-modal-spinner {
    display: inline-block;
    width: 22px; height: 22px;
    border: 2.5px solid var(--border2, var(--border));
    border-top-color: var(--accent, #2563eb);
    border-radius: 50%;
    animation: rcs-modal-spin 0.7s linear infinite;
}
@keyframes rcs-modal-spin { to { transform: rotate(360deg); } }

.rcs-modal-loading-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text3);
}


.rcs-modal-events {
    border-top: 1px solid var(--border);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rcs-modal-events-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
    padding: 7px 16px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    text-align: center;
}

.rcs-modal-events-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: clamp(120px, 22vh, 220px);
}

.rcs-modal-events-scroll::-webkit-scrollbar { width: 5px; }
.rcs-modal-events-scroll::-webkit-scrollbar-thumb { background: var(--border2, var(--border)); border-radius: 3px; }


.rcs-events-table {
    width: auto;
    min-width: 60%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    margin: 0 auto; 
}

.rcs-events-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    
}

[data-theme="dark"] .rcs-events-table thead {
    background: var(--surface);
}

[data-theme="dark"] .rcs-events-table th {
    color: var(--text2, #c9c5bc);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .rcs-events-table td {
    color: var(--text, #e8e4dc);
    border-bottom-color: var(--border);
}

.rcs-events-table th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    padding: 5px 16px 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    border-bottom: 1px solid var(--border);
}

.rcs-events-table td {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text2);
    padding: 5px 16px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.rcs-events-table tr:last-child td { border-bottom: none; }

.rcs-events-table tbody tr:hover td {
    background: var(--surface2);
}

.rcs-events-empty {
    text-align: center;
    color: var(--text3) !important;
    font-style: italic;
    padding: 14px 16px !important;
}


.rcs-cat-light     { color: var(--accent, #6366f1); }
.rcs-cat-moderate  { color: var(--amber, #d97706); font-weight: 500; }
.rcs-cat-heavy     { color: var(--red, #ef4444); font-weight: 600; }
.rcs-cat-very-heavy { color: var(--red, #ef4444); font-weight: 700; }
.rcs-cat-extreme   { color: var(--red, #ef4444); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

[data-theme="dark"] .rcs-cat-light    { color: #a5b4fc; }
[data-theme="dark"] .rcs-cat-moderate { color: #fbbf24; }
[data-theme="dark"] .rcs-cat-heavy    { color: #f87171; }
[data-theme="dark"] .rcs-cat-very-heavy { color: #f87171; }
[data-theme="dark"] .rcs-cat-extreme  { color: #f87171; }





.rcs-notif-container {
    position: fixed;
    bottom: 72px;
    right: 16px;
    z-index: 1800;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 300px;
}

.rcs-notif {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red, #ef4444);
    border-radius: var(--radius, 5px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,0.2));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    pointer-events: all;
    cursor: pointer;
    animation: rcs-notif-in 0.25s ease-out;
    transition: transform 0.15s;
}

.rcs-notif:hover { transform: translateX(-3px); }

@keyframes rcs-notif-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rcs-notif.rcs-notif-out {
    animation: rcs-notif-out 0.3s ease-in forwards;
}

@keyframes rcs-notif-out {
    to { opacity: 0; transform: translateX(24px); }
}

.rcs-notif-icon  { font-size: 18px; flex-shrink: 0; }
.rcs-notif-body  { flex: 1; min-width: 0; }

.rcs-notif-title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcs-notif-sub {
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text2);
    margin-top: 1px;
}

.rcs-notif-close {
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 2px;
    cursor: pointer;
    transition: color 0.15s;
}
.rcs-notif-close:hover { color: var(--text); }






@media (min-width: 1280px) {
    .rcs-toggle.rcs-toggle-active { right: 270px; }
}


@media (min-width: 1024px) and (max-width: 1279px) {
    .rcs-sidebar, .rcs-sidebar.rcs-open, .rcs-sidebar.rcs-always-visible {
        width: 250px;
    }
    .rcs-toggle.rcs-toggle-active { right: 250px; }
}


@media (min-width: 768px) and (max-width: 1023px) {
    .rcs-sidebar.rcs-open,
    .rcs-sidebar.rcs-always-visible { width: 230px !important; }
    .rcs-toggle.rcs-toggle-active   { right: 230px; }
    .rcs-modal-box { width: min(95vw, 600px); }
}


@media (max-width: 767px) {
    .rcs-sidebar {
        width: 100% !important;
        height: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        transition: height 0.22s cubic-bezier(0.4,0,0.2,1);
        z-index: 700;
    }

    .rcs-sidebar.rcs-open,
    .rcs-sidebar.rcs-always-visible {
        

        height: 190px;
        width: 100% !important;
    }

    


    #timeline { transition: margin-bottom 0.22s cubic-bezier(0.4,0,0.2,1); }
    body.rcs-mobile-open #timeline { margin-bottom: 190px; }

    .rcs-sidebar.rcs-closed {
        height: 0;
        width: 100% !important;
        border-top-width: 0;
    }

    .rcs-list {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 6px;
        gap: 8px;
        scroll-snap-type: x mandatory;
    }

    .rcs-item {
        flex-shrink: 0;
        width: 200px;
        border-right: 1px solid var(--border);
        border-bottom: none;
        scroll-snap-align: start;
        margin-bottom: 0;
    }

    .rcs-item.rcs-item-raining {
        border-left: 2px solid var(--red, #ef4444);
        border-top: none;
        padding-left: 8px;
    }

    .rcs-toggle {
        position: fixed;
        right: auto;
        bottom: 16px;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    .rcs-toggle.rcs-toggle-active {
        right: auto;
        bottom: calc(190px + 8px);
        left: 50%;
    }

    
    .rcs-toggle { display: none !important; }

    .rcs-header { position: relative; }

    
    #rcs-collapse {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 46px; height: 26px;
        display: none;
        align-items: center; justify-content: center;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 7px;
        color: var(--text2);
        cursor: pointer;
        z-index: 3;
    }
    #rcs-collapse:active { background: var(--border); }
    body.rcs-mobile-open #rcs-collapse { display: flex; }

    
    #rcs-open-tab {
        position: fixed;
        left: 50%;
        bottom: 56px;            
        transform: translateX(-50%);
        z-index: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.18);
        color: var(--text2);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
    }
    #rcs-open-tab:active { background: var(--surface2); }
    #rcs-open-tab .rcs-open-tab-chev { color: var(--text3); }
    body.rcs-mobile-open #rcs-open-tab { display: none; }

    
    .rcs-modal { padding: 0; align-items: flex-end; }
    .rcs-modal-box {
        width: 100%;
        max-height: 90vh;
        border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
    }
    .rcs-modal-body { height: clamp(160px, 28vw, 220px); }
    .rcs-modal-events-scroll { max-height: clamp(130px, 30vh, 200px); }

    
    .rcs-modal-toolbar { padding: 6px 10px; gap: 8px; }
    .rcs-modal-date-trigger { font-size: 10.5px; padding: 3px 6px; }
    .rcs-modal-date-live { font-size: 10px; padding: 3px 8px; }

    .rcs-notif-container {
        bottom: 60px;
        right: 8px;
        max-width: 90vw;
    }
}


@media (max-width: 399px) {
    .rcs-item { width: 180px; }
    .rcs-modal-body { height: 150px; }
    .rcs-modal-toolbar { justify-content: flex-start; }
    .rcs-modal-date-picker { width: 100%; justify-content: space-between; }
    .rcs-cal-popup { right: auto; left: 0; width: 220px; }
}


.rcs-sidebar.rcs-portrait:not(.rcs-always-visible) {
    
}


#body:not(.split-active) .rcs-sidebar {
    
}




.boundary-tooltip.leaflet-tooltip {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border2);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    font-size: 11px;
    padding: 3px 7px;
    font-family: 'IBM Plex Sans', sans-serif;
}
.boundary-tooltip.leaflet-tooltip b { font-weight: 600; }
.boundary-tooltip.leaflet-tooltip-top:before { border-top-color: var(--border2); }





.lp-vcut-btn {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text2);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    margin-right: 2px;
}
.lp-vcut-btn:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.lp-vcut-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }


.win-lp-vcut {
    position: absolute; left: 0; top: 48px;
    width: 22px;
    pointer-events: all;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 5px 3px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text2);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.12);
    transition: background 0.12s, color 0.12s;
    z-index: 601;
}
.win-lp-vcut:hover { background: var(--surface2); color: var(--accent); }
.win-lp-vcut--active { background: var(--accent); color: #fff; }


.vcut-draw-cursor { cursor: crosshair !important; }
.vcut-draw-cursor .leaflet-interactive { cursor: crosshair !important; }
.vcut-pan-cursor, .vcut-pan-cursor .leaflet-interactive { cursor: grab !important; }
.vcut-pan-cursor:active, .vcut-pan-cursor:active .leaflet-interactive { cursor: grabbing !important; }




.vcut-endpoint {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ff3b30; color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font: 700 11px/14px 'IBM Plex Mono', monospace;
    text-align: center;
    cursor: grab;
}
.vcut-endpoint--sel { background: #ffcc00; color: #1a1916; }




.vcut-toolbar {
    position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 1200;
    display: flex; align-items: center; gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 5px 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    font-size: 11px;
    max-width: 92%;
}
.vcut-tb-title { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.vcut-tb-status {
    color: var(--text2);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vcut-tb-btn {
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 10.5px; font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vcut-tb-btn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.vcut-tb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.vcut-tb-btn--close { color: var(--text2); padding: 3px 7px; }
.vcut-tb-btn--close:hover { background: #ef4444; color: #fff; border-color: #ef4444; }




.vcut-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.vcut-modal {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.4);
    width: min(900px, 96vw);
    max-height: 92vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.vcut-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}
.vcut-modal-title { font-weight: 700; font-size: 13px; color: var(--text); }
.vcut-modal-close {
    border: none; background: transparent; color: var(--text2);
    font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 5px;
}
.vcut-modal-close:hover { background: #ef4444; color: #fff; }
.vcut-modal-body {
    display: flex; gap: 14px; padding: 14px;
    overflow: auto;
}
.vcut-modal-img-wrap {
    flex: 1 1 auto; min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
}
.vcut-modal-img { max-width: 100%; max-height: 64vh; object-fit: contain; }
.vcut-modal-meta {
    flex: 0 0 230px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px;
}
.vcut-meta-head { font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.vcut-meta-row {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 3px 0; border-bottom: 1px dashed var(--border);
}
.vcut-meta-row span:first-child { color: var(--text2); }
.vcut-meta-row span:last-child {
    color: var(--text); font-family: 'IBM Plex Mono', monospace;
    text-align: right; word-break: break-word;
}
.vcut-modal-dl {
    margin-top: 8px;
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--accent); color: #fff;
    border: 1px solid var(--accent); border-radius: 6px; text-decoration: none;
    font-weight: 700; font-size: 11px; line-height: 1;
}
.vcut-modal-dl .dw-download-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.vcut-modal-dl:hover { filter: brightness(1.08); }
.vcut-modal-dl:active { transform: scale(.98); }
@media (max-width: 640px) {
    .vcut-modal-body { flex-direction: column; }
    .vcut-modal-meta { flex-basis: auto; }
}


.vcut-spinner {
    display: inline-block;
    width: 11px; height: 11px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: vcut-spin 0.7s linear infinite;
}
@keyframes vcut-spin { to { transform: rotate(360deg); } }
.vcut-toolbar--busy { box-shadow: 0 0 0 2px var(--accent), 0 3px 12px rgba(0,0,0,0.25); }
.vcut-tb-status--busy { color: var(--accent); font-weight: 700; }



.vcut-draw-cursor .leaflet-zoom-box { display: none !important; }





.leaflet-interactive:focus,
.leaflet-interactive:focus-visible {
    outline: none !important;
}
.leaflet-container svg path:focus,
.leaflet-container svg path:focus-visible,
.leaflet-container svg g:focus {
    outline: none !important;
}
.leaflet-container:focus,
.leaflet-pane:focus { outline: none !important; }


.vcut-modal-notice {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 176, 0, 0.12);
    border: 1px solid rgba(255, 176, 0, 0.45);
    color: #8a5a00;
    font-size: 12px;
    line-height: 1.4;
}
.vcut-modal-toggle {
    display: block;
    width: 100%;
    margin: 4px 0 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--accent, #2f6fed);
    background: transparent;
    color: var(--accent, #2f6fed);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.vcut-modal-toggle:hover:not(:disabled) { background: var(--accent, #2f6fed); color: #fff; }
.vcut-modal-toggle:disabled { opacity: .6; cursor: default; }








.display-mode #sidebar,
.display-mode #sidebar-toggle,
.display-mode #statusbar,
.display-mode #timeline,
.display-mode #admin-ws-bar,
.display-mode #account-card {
    display: none !important;
}
.display-mode #header .split-btns,
.display-mode #header .data-info-wrap,
.display-mode #header #data-info-btn,
.display-mode #header #preset-manager-btn,
.display-mode #header #theme-toggle,
.display-mode #header #acct-wrap,
.display-mode #header #acct-btn { display: none !important; }


#dwv-state-overlay { display: none; }
#dwv-state-overlay.dwv-state-empty,
#dwv-state-overlay.dwv-state-deactivated,
#dwv-state-overlay.dwv-state-unavailable {
    display: flex; align-items: center; justify-content: center;
    position: fixed; inset: 0;
    background: var(--bg);
}
#dwv-state-overlay.dwv-state-empty        { z-index: 900; }    
#dwv-state-overlay.dwv-state-deactivated  { z-index: 3000; }   
#dwv-state-overlay.dwv-state-unavailable  { z-index: 3000; }   
.dwv-state-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: 24px; }
.dwv-state-logo { object-fit: contain; display: block; }
#dwv-state-overlay.dwv-state-empty .dwv-state-logo       { width: 132px; height: 132px; opacity: .95; }
#dwv-state-overlay.dwv-state-deactivated .dwv-state-logo { width: min(40vmin, 340px); height: min(40vmin, 340px); }
#dwv-state-overlay.dwv-state-unavailable .dwv-state-logo { width: min(18vmin, 150px); height: min(18vmin, 150px); }
.dwv-state-text { font-weight: 700; color: var(--text2); }
#dwv-state-overlay.dwv-state-empty .dwv-state-text       { font-size: 30px; letter-spacing: 5px; }
#dwv-state-overlay.dwv-state-deactivated .dwv-state-text { font-size: 50px; letter-spacing: 9px; color: var(--text); }
#dwv-state-overlay.dwv-state-unavailable .dwv-state-text { font-size: 34px; letter-spacing: 7px; color: var(--text); }
.dwv-state-sub { display: none; }
#dwv-state-overlay.dwv-state-unavailable .dwv-state-sub {
    display: block; margin-top: -8px;
    font-size: 18px; font-weight: 500; letter-spacing: 3px;
    text-transform: uppercase; color: var(--text2); opacity: .85;
}

.display-deactivated #header,
.display-unavailable #header { display: none !important; }


.display-mode:not(.display-rain) #rcs-sidebar,
.display-mode:not(.display-rain) #rcs-toggle,
.display-mode:not(.display-rain) #rcs-open-tab { display: none !important; }
.display-mode.display-rain #rcs-toggle,
.display-mode.display-rain #rcs-open-tab,
.display-mode.display-rain #rcs-collapse,
.display-mode.display-rain #rcs-settings-btn { display: none !important; }



.display-mode.display-rain #rcs-sidebar { display: flex !important; }

.display-mode.display-rain.rcs-pos-left #rcs-sidebar { order: -1; border-left: none; border-right: 1px solid var(--border); }



.display-mode.display-rain.rcs-pos-top #body,
.display-mode.display-rain.rcs-pos-bottom #body { flex-direction: column; }


.display-mode.display-rain.rcs-pos-top #rcs-sidebar,
.display-mode.display-rain.rcs-pos-bottom #rcs-sidebar {
    width: 100% !important;
    height: 190px;
    border-left: none;
    flex-direction: row !important;   
    overflow: hidden;
}
.display-mode.display-rain.rcs-pos-top #rcs-sidebar {
    order: -1;
    border-bottom: 1px solid var(--border);
}
.display-mode.display-rain.rcs-pos-bottom #rcs-sidebar {
    order: 1;
    border-top: 1px solid var(--border);
}


.display-mode.display-rain.rcs-pos-top .rcs-header,
.display-mode.display-rain.rcs-pos-bottom .rcs-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px;
    min-width: 48px;
    height: 100%;
    padding: 8px 4px !important;
    border-bottom: none !important;
    border-right: 1px solid var(--border);
    gap: 8px !important;
    flex-shrink: 0;
}

.display-mode.display-rain.rcs-pos-top .rcs-header-left,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    writing-mode: horizontal-tb !important;  
    transform: none !important;
    min-width: 0;
    flex: 1;
    width: 100%;
}

.display-mode.display-rain.rcs-pos-top .rcs-header-icon,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-icon {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 16px;
    align-self: center;
    flex-shrink: 0;
}

.display-mode.display-rain.rcs-pos-top .rcs-header-title,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-title {
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 80px;
    align-self: center;
}

.display-mode.display-rain.rcs-pos-top .rcs-header .rcs-rain-badge,
.display-mode.display-rain.rcs-pos-bottom .rcs-header .rcs-rain-badge {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    align-self: center;
    margin-top: 2px;
    flex-shrink: 0;
}

.display-mode.display-rain.rcs-pos-top .rcs-header-actions,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-actions {
    flex-direction: column !important;
    gap: 4px !important;
    flex-shrink: 0;
}


.display-mode.display-rain.rcs-pos-top .rcs-list,
.display-mode.display-rain.rcs-pos-bottom .rcs-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    flex: 1;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 8px;
    gap: 0;
    scroll-snap-type: none !important;   
    scroll-behavior: auto;
    
    scrollbar-width: none;
}
.display-mode.display-rain.rcs-pos-top .rcs-list::-webkit-scrollbar,
.display-mode.display-rain.rcs-pos-bottom .rcs-list::-webkit-scrollbar { display: none; }


.display-mode.display-rain.rcs-pos-top .rcs-item,
.display-mode.display-rain.rcs-pos-bottom .rcs-item {
    flex: 0 0 auto;
    width: 280px;
    min-width: 280px;
    height: 100%;
    border-bottom: none !important;
    border-right: 1px solid var(--border);
    margin-bottom: 0;
    scroll-snap-align: none;
    display: flex;
    flex-direction: column;
    padding: 6px 8px 4px;
    box-sizing: border-box;
}

.display-mode.display-rain.rcs-pos-top .rcs-chart-wrap,
.display-mode.display-rain.rcs-pos-bottom .rcs-chart-wrap {
    flex: 1;
    height: auto !important;
    min-height: 0;
}

.display-mode.display-rain.rcs-pos-top .rcs-item.rcs-item-raining,
.display-mode.display-rain.rcs-pos-bottom .rcs-item.rcs-item-raining {
    border-top: 2px solid var(--red, #ef4444) !important;
    border-left: none;
    padding-left: 8px;
    padding-top: 4px;
}


.display-mode #rcs-modal-download { display: none !important; }



.display-mode .win-lp,
.display-mode .win-lp-vcut { display: none !important; }
.display-mode #map { width: 100% !important; height: 100% !important; }


.display-mode { overflow: hidden !important; }


#account-card {
    margin: 10px 12px 2px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
#account-card .acct-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 9px;
}
#account-card .acct-user {
    font-size: 12.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#account-card .acct-role {
    flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; padding: 2px 7px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
}
#account-card .acct-actions { display: flex; flex-direction: column; gap: 6px; }
#account-card .acct-btn {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    font: 500 12px/1.2 inherit; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text); cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
#account-card .acct-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#account-card .acct-logout { color: var(--red); }
#account-card .acct-logout:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }


.display-mode .win-lp-drawer,
.display-mode .win-lp-catalog,
.display-mode #split-float-toolbar,
.display-mode .split-float-toolbar { display: none !important; }


#acct-wrap { position: relative; display: inline-flex; align-items: center; }
#acct-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; }
#acct-btn .acct-ava { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#acct-btn .acct-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.acct-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 4000; min-width: 226px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 7px; display: flex; flex-direction: column; gap: 3px;
}
.acct-menu[hidden] { display: none; }
.acct-menu .am-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.acct-menu .am-name { font-size: 12.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu .am-role { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; padding: 2px 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.acct-menu .am-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; box-sizing: border-box; font: 500 12.5px/1.2 inherit;
    padding: 9px 10px; border: none; border-radius: 7px; background: transparent; color: var(--text);
    cursor: pointer; text-decoration: none; transition: background .14s, color .14s;
}
.acct-menu .am-icon { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.acct-menu .am-item:hover { background: var(--accent-soft); color: var(--accent); }
.acct-menu .am-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.acct-menu .am-logout { color: var(--red); }
.acct-menu .am-logout:hover { background: var(--red-bg); color: var(--red); }


#hs-alert-wrap{ position:relative; display:inline-flex; }
.hs-alert-bell{ display:block; }
.hs-alert-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:#ef4444; color:#fff; font-size:10px; font-weight:700; border-radius:999px; line-height:1; }
.hs-alert-badge[hidden]{ display:none; }
.hs-alert-menu{ position:absolute; top:calc(100% + 8px); right:0; width:min(310px, calc(100vw - 24px)); max-height:380px; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); z-index:9000; overflow:hidden; }
.hs-alert-menu[hidden]{ display:none; }
.hs-alert-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px 9px 12px; color:var(--text); border-bottom:1px solid var(--border); }
.hs-alert-head-title{ overflow:hidden; font-size:12px; font-weight:700; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.hs-alert-dl{ display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:28px; padding:5px 8px; color:var(--accent, #2563eb); background:var(--surface2, #f3f6f8); border:1px solid var(--border); border-radius:6px; font-size:10.5px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; transition:transform 140ms cubic-bezier(.23,1,.32,1), border-color 150ms ease, background-color 150ms ease; }
.hs-alert-dl-icon{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 14px; width:14px; height:14px; color:currentColor; font-size:13px; font-weight:800; line-height:1; }
.hs-alert-dl-icon svg{ width:14px; height:14px; }
.hs-alert-dl:active{ transform:scale(.97); }
.hs-alert-dl.is-loading{ cursor:wait; pointer-events:none; }
.hs-alert-dl.is-loading .hs-alert-dl-icon{ width:13px; height:13px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:btn-loading-spin-rot .7s linear infinite; }
.hs-alert-dl.is-error{ color:var(--danger, #dc2626); border-color:currentColor; background:var(--surface); }
.hs-alert-dl.is-success{ color:#15803d; border-color:#86c89b; background:#edf8f0; pointer-events:none; }
@media (hover:hover) and (pointer:fine){
  .hs-alert-dl:hover{ border-color:var(--accent, #2563eb); background:var(--surface); }
}
.hs-alert-list{ overflow-y:auto; max-height:320px; }
.hs-alert-empty{ padding:18px 12px; text-align:center; font-size:12px; color:var(--text3, var(--text2)); }
.hs-alert-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:9px 12px; background:none; border:0; border-bottom:1px solid var(--border); font-size:12px; color:var(--text); text-align:left; cursor:pointer; transition:background .15s; }
.hs-alert-item:last-child{ border-bottom:0; }
.hs-alert-item:hover{ background:var(--surface2, var(--surface)); }
.hs-alert-item-loc{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-alert-item-time{ font-size:10.5px; color:var(--text3, var(--text2)); white-space:nowrap; }
.hs-alert-item-update{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:8px 12px; border-bottom:1px solid var(--border); font-size:11.5px; color:var(--text2, var(--text)); cursor:default; }
.hs-alert-item-update:last-child{ border-bottom:0; }
.hs-alert-item-update-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-alert-item-update-label i{ font-style:normal; opacity:.75; margin-right:4px; }


.hs-alert-modal-overlay{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.hs-alert-modal-box{ width:min(920px, 92vw); max-height:88vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden; }
.hs-alert-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; font-size:14px; font-weight:600; color:var(--text); border-bottom:1px solid var(--border); }
.hs-alert-modal-close{ background:none; border:0; font-size:20px; line-height:1; color:var(--text2); cursor:pointer; padding:2px 8px; }
.hs-alert-modal-close:hover{ color:var(--text); }
.hs-alert-modal-body{ display:flex; gap:0; flex:1; min-height:0; }
#hs-alert-modal-map{ flex:1.4; min-height:420px; }
.hs-alert-modal-panel{ flex:1; min-width:260px; max-width:340px; padding:14px; overflow-y:auto; border-left:1px solid var(--border); font-size:12px; color:var(--text); }
.hs-alert-modal-loading, .hs-alert-modal-error{ color:var(--text3, var(--text2)); font-size:12px; padding:8px 0; }
.hs-alert-leg{ display:flex; gap:14px; margin-bottom:10px; font-size:11.5px; }
.hs-alert-leg-item{ display:inline-flex; align-items:center; gap:5px; }
.hs-alert-leg-item i{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.hs-alert-region-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
.hs-alert-region-table th, .hs-alert-region-table td{ padding:5px 6px; text-align:left; border-bottom:1px solid var(--border); }
.hs-alert-region-table th{ color:var(--text3, var(--text2)); font-weight:600; }
.hs-alert-empty-row{ text-align:center; color:var(--text3, var(--text2)); }
@media (max-width: 720px){
  .hs-alert-modal-body{ flex-direction:column; }
  #hs-alert-modal-map{ min-height:260px; }
  .hs-alert-modal-panel{ max-width:none; border-left:0; border-top:1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce){
  .hs-alert-dl.is-loading .hs-alert-dl-icon{ animation:none; opacity:.58; }
  .hs-alert-dl{ transition:background-color 160ms ease; }
  .hs-alert-dl:hover,.hs-alert-dl:active{ transform:none; }
}



.hs-infographic-overlay{ position:fixed; inset:0; z-index:9600; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(8,14,26,.58); backdrop-filter:blur(3px); }
.hs-infographic-dialog{ width:min(820px, 92vw); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); }
.hs-infographic-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid var(--border); }
.hs-infographic-heading{ display:flex; align-items:center; gap:10px; min-width:0; }
.hs-infographic-heading-icon{ display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; color:var(--accent,#2563eb); background:var(--surface2,#f3f6f8); border:1px solid var(--border); border-radius:9px; }
.hs-infographic-heading-icon svg{ width:18px; height:18px; }
.hs-infographic-heading h2{ margin:0; font-size:14px; font-weight:700; line-height:1.2; }
.hs-infographic-heading p{ margin:3px 0 0; color:var(--text3,var(--text2)); font-size:11.5px; line-height:1.35; }
.hs-infographic-close{ flex:0 0 auto; width:30px; height:30px; padding:0; color:var(--text2); background:transparent; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:22px; line-height:1; }
.hs-infographic-close:hover{ color:var(--text); background:var(--surface2,#f3f6f8); border-color:var(--border); }
.hs-infographic-body{ min-height:0; padding:14px 16px 10px; overflow:auto; background:var(--surface2,var(--surface)); }
.hs-infographic-stage{ position:relative; display:grid; min-height:260px; place-items:center; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.hs-infographic-image{ display:block; width:auto; max-width:100%; max-height:68vh; object-fit:contain; transition:opacity 220ms cubic-bezier(.23,1,.32,1),transform 220ms cubic-bezier(.23,1,.32,1); }
.hs-infographic-stage.is-interactive{ overflow:hidden; cursor:grab; touch-action:none; user-select:none; }
.hs-infographic-stage.is-interactive .hs-infographic-image{ transition:none; will-change:transform; }
.hs-infographic-stage.is-dragging{ cursor:grabbing; }
.hs-infographic-stage.is-dragging .hs-infographic-image{ pointer-events:none; }
.hs-infographic-image.is-entering{ opacity:0; transform:scale(.985); }
.hs-infographic-stage.is-refreshing .hs-infographic-image{ opacity:.42; transform:scale(.985); }
.hs-infographic-refreshing{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px; color:var(--text); background:color-mix(in srgb,var(--surface) 58%,transparent); font-size:12px; font-weight:600; opacity:0; transform:translateY(4px); transition:opacity 180ms cubic-bezier(.23,1,.32,1),transform 180ms cubic-bezier(.23,1,.32,1); }
.hs-infographic-refreshing.is-visible{ opacity:1; transform:translateY(0); }
.hs-infographic-refresh-spinner{ width:16px; height:16px; border:2px solid var(--accent,#2563eb); border-top-color:transparent; border-radius:50%; animation:btn-loading-spin-rot .7s linear infinite; }
.hs-infographic-loading,.hs-infographic-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:220px; padding:28px; color:var(--text3,var(--text2)); font-size:12px; text-align:center; }
.hs-infographic-loading{ flex-direction:row; }
.hs-infographic-loading span{ width:16px; height:16px; border:2px solid var(--accent,#2563eb); border-top-color:transparent; border-radius:50%; animation:btn-loading-spin-rot .7s linear infinite; }
.hs-infographic-empty strong{ color:var(--text); font-size:13px; }
.hs-infographic-empty span{ max-width:440px; line-height:1.5; }
.hs-infographic-empty--error strong{ color:var(--danger,#dc2626); }
.hs-infographic-status{ min-height:17px; margin:8px 1px 0; color:var(--text3,var(--text2)); font-size:11.5px; line-height:1.4; }
.hs-infographic-gesture-hint{ margin:3px 1px 0; color:var(--text3,var(--text2)); font-size:10.5px; line-height:1.4; }
.hs-infographic-actions{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border); }
.hs-infographic-action{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font:700 12px/1 inherit; cursor:pointer; transition:background-color .15s,border-color .15s,opacity .15s; }
.hs-infographic-action svg{ width:15px; height:15px; }
.hs-infographic-generate{ color:var(--accent,#2563eb); background:var(--surface); }
.hs-infographic-generate:hover{ background:var(--surface2,#f3f6f8); border-color:var(--accent,#2563eb); }
.hs-infographic-download{ color:#fff; background:var(--accent,#2563eb); border-color:var(--accent,#2563eb); }
.hs-infographic-download:hover{ filter:brightness(.95); }
.hs-infographic-action:disabled{ cursor:not-allowed; opacity:.55; }
@media (max-width:640px){
  .hs-infographic-overlay{ align-items:flex-end; padding:10px; }
  .hs-infographic-dialog{ width:100%; max-height:94vh; }
  .hs-infographic-head,.hs-infographic-actions{ padding:12px; }
  .hs-infographic-body{ padding:10px 12px 8px; }
  .hs-infographic-stage{ min-height:180px; }
  .hs-infographic-image{ max-height:62vh; }
  .hs-infographic-actions{ justify-content:stretch; }
  .hs-infographic-action{ flex:1; padding:9px 8px; }
}
@media (prefers-reduced-motion:reduce){
  .hs-infographic-loading span,.hs-infographic-refresh-spinner{ animation:none; opacity:.65; }
  .hs-infographic-image,.hs-infographic-refreshing{ transition:opacity 180ms cubic-bezier(.23,1,.32,1); transform:none; }
  .hs-infographic-stage.is-interactive .hs-infographic-image{ transition:none; }
}

#dcfg-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center;
    justify-content: center; background: rgba(8,14,26,.5); backdrop-filter: blur(3px); padding: 20px; }
#dcfg-modal .dcfg-box { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
#dcfg-modal .dcfg-h { font-size: 15px; font-weight: 600; color: var(--text); padding: 16px 20px; border-bottom: 1px solid var(--border); }
#dcfg-modal .dcfg-body { padding: 16px 20px; overflow-y: auto; }
#dcfg-modal .dcfg-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--accent); margin: 18px 0 8px; }
#dcfg-modal .dcfg-lab { display: block; font-size: 12px; color: var(--text); opacity: .8; margin: 8px 0 5px; }
#dcfg-modal .dcfg-hint { font-size: 11px; opacity: .6; margin: 4px 0 8px; line-height: 1.4; }
#dcfg-modal .dcfg-inp { width: 100%; box-sizing: border-box; font: 400 13.5px/1.2 inherit; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
#dcfg-modal .dcfg-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#dcfg-modal .dcfg-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); margin: 8px 0; cursor: pointer; }
#dcfg-modal .dcfg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 4px 0 2px; }
#dcfg-modal .dcfg-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; }
#dcfg-modal .dcfg-chip.on { border-color: var(--accent); background: var(--accent-soft); }
#dcfg-modal .dcfg-bulk { display: flex; gap: 6px; margin: 2px 0 8px; }
#dcfg-modal .dcfg-mini { font: 600 11.5px/1 inherit; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
#dcfg-modal .dcfg-mini.ghost { background: transparent; color: var(--text); border-color: var(--border); }
#dcfg-modal .dcfg-linkrow { display: flex; justify-content: center; margin: 12px 0; }
#dcfg-modal .dcfg-link { font: 600 11.5px/1 inherit; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: pointer; }
#dcfg-modal .dcfg-link.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#dcfg-modal .dcfg-wins { display: flex; flex-direction: column; gap: 8px; }
#dcfg-modal .dcfg-win { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--bg); }
#dcfg-modal .dcfg-win-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#dcfg-modal .dcfg-win-h b { font-size: 12.5px; color: var(--text); }
#dcfg-modal .dcfg-win-p { font-size: 11px; color: var(--text); opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
#dcfg-modal .dcfg-flags { display: flex; flex-wrap: wrap; gap: 14px; }
#dcfg-modal .dcfg-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
#dcfg-modal .dcfg-boundary-note{margin:0 0 8px;color:var(--muted);font-size:11px;line-height:1.4}
#dcfg-modal .dcfg-boundary-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(264px,1fr));gap:8px}
#dcfg-modal .dcfg-boundary-row{display:grid;grid-template-columns:minmax(88px,1fr) 56px 64px;gap:6px;align-items:start;padding:9px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
#dcfg-modal .dcfg-boundary-toggle{display:flex;align-items:center;gap:5px;min-width:0;min-height:45px;color:var(--text);font-size:11.5px;line-height:1.25;cursor:pointer}
#dcfg-modal .dcfg-boundary-toggle input{flex:0 0 auto}
#dcfg-modal .dcfg-boundary-row>label:not(.dcfg-boundary-toggle){display:grid;grid-template-rows:13px 31px;gap:3px;align-items:start;color:var(--muted);font-size:9.5px;line-height:13px}
#dcfg-modal .dcfg-boundary-row input[type="color"]{width:100%;height:31px;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}
#dcfg-modal .dcfg-boundary-row input[type="number"]{width:100%;height:31px;padding:6px 4px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;text-align:center}
#dcfg-modal .dcfg-result { margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--accent-soft, var(--bg)); }
.dcfg-url { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; word-break:break-all; background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:8px 10px; margin:6px 0 10px; color:var(--text); }
.dcfg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }
#dcfg-modal .dcfg-btn { font: 600 12.5px/1 inherit; padding: 10px 18px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); }
#dcfg-modal .dcfg-btn.ghost { background: var(--bg); color: var(--text); }
#dcfg-modal .dcfg-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
#dcfg-modal .dcfg-btn:disabled { opacity: .6; cursor: progress; }
@media(max-width:640px){#dcfg-modal{padding:10px}#dcfg-modal .dcfg-body{padding:14px}#dcfg-modal .dcfg-boundary-list{grid-template-columns:1fr}}


.seq-divicon { background: none !important; border: none !important; }
.seq-marker {
    position: relative; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    transform: scale(var(--seq-scale, 1)); transform-origin: center center;
}
.seq-svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); transition: transform .12s ease; }
.seq-marker:hover .seq-svg { transform: scale(1.2); }




.seq-alert {
    position: absolute; left: 50%; bottom: calc(100% - 1px); top: auto;
    width: var(--seq-alert-size, 18px); height: var(--seq-alert-size, 18px);
    transform: translateX(-50%); transform-origin: 50% 100%;
    pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
    animation: seqAlertPulse 1.05s ease-in-out infinite;
    z-index: 2;
}
@keyframes seqAlertPulse {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 1;   }
    50%      { transform: translateX(-50%) scale(1.18); opacity: .85; }
}


.seq-tip {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    font: 600 11px/1.2 'IBM Plex Sans', system-ui; padding: 3px 7px;
    box-shadow: var(--shadow);
}
.seq-tip::before { display: none; }


.seq-popup .leaflet-popup-content-wrapper {
    overflow: hidden;
    padding: 0;
    background: var(--surface); color: var(--text);
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .20), 0 3px 10px rgba(15, 23, 42, .12);
}
.seq-popup .leaflet-popup-content { margin: 0; width: min(306px, calc(100vw - 54px)) !important; }
.seq-popup .leaflet-popup-tip { background: var(--surface); }
.seq-popup .leaflet-popup-close-button {
    top: 11px; right: 11px; width: 25px; height: 25px;
    border-radius: 999px; color: var(--text2); font: 500 20px/22px system-ui;
    transition: background 150ms ease, color 150ms ease, transform 150ms cubic-bezier(.23, 1, .32, 1);
}
.seq-popup .leaflet-popup-close-button:hover { background: color-mix(in srgb, var(--surface2) 80%, transparent); color: var(--text); }
.seq-popup .leaflet-popup-close-button:active { transform: scale(.94); }
.seq-pop-card { overflow: hidden; }
.seq-pop-head {
    --seq-accent: #475569;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 13px 46px 10px 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--seq-accent) 14%, var(--surface)) 0%, var(--surface) 72%);
    border-bottom: 1px solid var(--border);
}
.seq-pop-ARG  { --seq-accent: #2563eb; }
.seq-pop-AWS  { --seq-accent: #0891b2; }
.seq-pop-AWSD { --seq-accent: #0d9488; }
.seq-pop-AAWS { --seq-accent: #7c3aed; }
.seq-pop-identity { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.seq-pop-identity > div { min-width: 0; display: grid; gap: 2px; }
.seq-pop-identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.2; letter-spacing: -.01em; }
.seq-pop-eyebrow { color: var(--text3); font-size: 9px; font-weight: 700; letter-spacing: .085em; line-height: 1; text-transform: uppercase; }
.seq-pop-type {
    display: grid; place-items: center; flex: 0 0 auto; min-width: 35px; height: 23px;
    font: 700 10px/1 'IBM Plex Mono', monospace; letter-spacing: .35px;
    border-radius: 7px; color: #fff; background: var(--seq-accent); box-shadow: 0 3px 8px color-mix(in srgb, var(--seq-accent) 28%, transparent);
}
.seq-pop-state { flex: 0 0 auto; margin-top: 2px; color: #15803d; font-size: 9px; font-weight: 750; white-space: nowrap; }
.seq-pop-state::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 0; border-radius: 50%; background: currentColor; }
.seq-pop-state.is-idle { color: var(--text3); }
.seq-pop-captured { display: flex; align-items: center; gap: 5px; padding: 7px 13px; color: var(--text3); background: color-mix(in srgb, var(--surface2) 56%, transparent); font: 500 10.5px/1.25 'IBM Plex Mono', monospace; }
.seq-pop-captured-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--seq-accent); }
.seq-pop-body { padding: 11px 13px 13px; }
.seq-pop-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 6px; }
.seq-pop-metric { min-width: 0; padding: 8px 8px 7px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--surface2) 62%, transparent); }
.seq-pop-metric span { display: block; overflow: hidden; color: var(--text3); font-size: 9px; font-weight: 700; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.seq-pop-metric strong { display: block; margin-top: 4px; color: var(--text); font: 700 15px/1 'IBM Plex Mono', monospace; letter-spacing: -.035em; white-space: nowrap; }
.seq-pop-metric strong small { color: var(--text2); font: 600 9px/1 'IBM Plex Sans', sans-serif; letter-spacing: 0; }
.seq-pop-metric--rain { border-color: color-mix(in srgb, #2563eb 35%, var(--border)); }
.seq-pop-metric--wind { border-color: color-mix(in srgb, #0891b2 35%, var(--border)); }
.seq-pop-metric--temp { border-color: color-mix(in srgb, #f97316 35%, var(--border)); }
.seq-pop-alert { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 9px; border: 1px solid color-mix(in srgb, #ef4444 45%, var(--border)); border-radius: 9px; color: #b91c1c; background: color-mix(in srgb, #ef4444 9%, var(--surface)); }
.seq-pop-alert > span { font-size: 14px; }
.seq-pop-alert div { display: grid; gap: 1px; }
.seq-pop-alert b { font-size: 10px; line-height: 1.1; }
.seq-pop-alert div span { color: var(--text2); font-size: 11px; font-weight: 600; }
.seq-pop-details { margin-top: 9px; padding-top: 2px; }
.seq-pop-row {
    display: flex; justify-content: space-between; gap: 12px;
    align-items: baseline; padding: 5px 0; font-size: 11px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.seq-pop-row:last-child { border-bottom: none; }
.seq-pop-row span { color: var(--text3); }
.seq-pop-row b { overflow: hidden; color: var(--text); font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.seq-cat-chip {
    padding: 2px 7px; border-radius: 999px; font-weight: 800; font-size: 10px;
    letter-spacing: .02em; line-height: 1.45;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.seq-pop-sub { display: grid; gap: 2px; margin-top: 9px; padding: 8px 9px; border-radius: 8px; color: var(--text2); background: color-mix(in srgb, var(--surface2) 62%, transparent); font-size: 10.5px; line-height: 1.35; }
.seq-pop-sub b { color: var(--text3); font-size: 9px; letter-spacing: .055em; text-transform: uppercase; }
.seq-pop-coordinates { display: grid; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--border); }
.seq-pop-coordinates .seq-pop-row { padding: 2px 0; border: 0; color: var(--text3); font: 500 9.5px/1.3 'IBM Plex Mono', monospace; }
.seq-pop-coordinates .seq-pop-row b { color: var(--text2); font-weight: 500; }
.seq-pop-empty { display: grid; gap: 4px; padding: 3px 0 7px; color: var(--text3); font-size: 11px; line-height: 1.4; }
.seq-pop-empty b { color: var(--text); font-size: 12px; }


.lp-eq-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; cursor: pointer; border-radius: 6px;
    box-sizing: border-box; width: 100%; min-width: 0;
    transition: background .12s;
}
.lp-eq-row:hover { background: var(--surface2, rgba(127,127,127,.08)); }
.lp-eq-shapes { display: inline-flex; gap: 2px; flex-shrink: 0; align-items: center; }
.lp-eq-shapes svg { display: block; width: 12px; height: 12px; }
.lp-eq-label {
    flex: 1 1 auto; min-width: 0;
    font-size: 10.5px; font-weight: 500; line-height: 1.2; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-eq-sub {
    display: block; font-size: 9px; font-weight: 400; color: var(--text3);
    line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-eq-row .tog-wrap { flex-shrink: 0; }


.seq-modal {
    position: fixed; inset: 0; z-index: 12000;
    display: flex; align-items: center; justify-content: center;
}
.seq-modal-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.seq-modal-box {
    position: relative; z-index: 1; width: min(340px, 92vw); max-height: 86vh;
    overflow: auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-lg);
}
.seq-modal-box .seq-pop-head { border-radius: 14px 14px 0 0; padding-right: 46px; }
.seq-modal-close {
    position: absolute; top: 7px; right: 9px; z-index: 2;
    width: 24px; height: 24px; padding: 0; background: none; border: none;
    font-size: 20px; line-height: 1; color: var(--text3); cursor: pointer; border-radius: 6px;
}
.seq-modal-close:hover { color: var(--text); background: var(--surface2, rgba(127,127,127,.12)); }
.seq-modal-close:active { transform: scale(.94); }
@media (max-width: 420px) {
    .seq-popup .leaflet-popup-content { width: min(286px, calc(100vw - 40px)) !important; }
    .seq-pop-head { padding-left: 11px; }
    .seq-pop-body { padding-left: 11px; padding-right: 11px; }
}


.embed-time-badge {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 1200; display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(11, 22, 34, .82); color: #fff;
  font: 600 13px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none; white-space: nowrap;
}
.embed-time-badge .tl-time-icon { font-size: 13px; }
.embed-time-badge .tl-time-val { color: #fff; font-weight: 700; }
.embed-time-badge .tl-time-utc { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 500; margin-left: 2px; }
.embed-time-badge .tl-time-rows { display: flex; flex-direction: column; gap: 1px; }
.embed-time-badge .tl-time-row { display: flex; align-items: center; gap: 5px; }





.btn-loading-spin {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .85;
    vertical-align: -1px;
    margin-right: 7px;
    animation: btn-loading-spin-rot .7s linear infinite;
}
@keyframes btn-loading-spin-rot { to { transform: rotate(360deg); } }
.btn.ico .btn-loading-spin { margin-right: 0; width: 13px; height: 13px; }


.acc-letter-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(37,99,235,.12); color: var(--acc, #2563eb);
    white-space: nowrap;
}
.acc-letter-badge.none { background: transparent; color: var(--muted, #94a3b8); font-weight: 500; }


.acc-upload-box {
    margin: 14px 0 4px; padding: 12px 13px; border-radius: 10px;
    border: 1px dashed var(--inpbd, #dde4ee); background: var(--inp, #f7f9fc);
}
.acc-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-upload-row input[type="file"] { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 0; border: 0; background: transparent; }
.acc-upload-status { font-size: 11.5px; margin-top: 8px; }
.acc-upload-status.ok { color: #059669; }
.acc-upload-status.err { color: #dc2626; }




#sidebar {
    --ws-card: var(--surface);
    --ws-card-hover: var(--surface2);
    --ws-rule: color-mix(in srgb, var(--border) 88%, transparent);
    --ws-icon-bg: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
    padding: 10px 10px 16px;
    gap: 8px;
    background: linear-gradient(180deg, var(--surface2), var(--surface));
}

[data-theme="dark"] #sidebar {
    --ws-card: color-mix(in srgb, var(--surface) 92%, #000 8%);
    --ws-card-hover: var(--surface2);
    --ws-rule: color-mix(in srgb, var(--border2) 82%, transparent);
}

#sidebar.collapsed {
    padding: 0;
    gap: 0;
    border-right-width: 0;
}

#sidebar .sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 3px 0;
    border: 0;
    background: transparent;
    color: var(--text3);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.2;
}

#sidebar .sidebar-section-label::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--ws-rule);
}

#sidebar .accordion {
    overflow: hidden;
    border: 1px solid var(--ws-rule);
    border-radius: 10px;
    background: var(--ws-card);
    box-shadow: 0 1px 1px rgba(15, 23, 42, .025);
}

#sidebar .accordion-head {
    min-height: 48px;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    color: var(--text2);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

#sidebar .accordion-head:not(.open):hover { background: transparent; color: var(--text2); }

#sidebar .accordion-head.open {
    color: var(--text);
    background: color-mix(in srgb, var(--accent-soft) 64%, var(--ws-card));
    box-shadow: inset 3px 0 0 var(--accent);
}

#sidebar .accordion-head:active { transform: scale(.985); }
#sidebar .acc-title { letter-spacing: -.01em; }

#sidebar .acc-icon {
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--border));
    border-radius: 8px;
    background: var(--ws-icon-bg);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#sidebar .acc-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

#sidebar .accordion-head.open .acc-icon {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}

#sidebar .accordion-arrow {
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

#sidebar .accordion-head.open .accordion-arrow {
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--accent);
}

#sidebar .accordion-body { background: var(--ws-card); }

#sidebar .accordion-body.open {
    border-top: 1px solid var(--ws-rule);
}

#sidebar .accordion-body > * { padding: 10px 11px 12px; }

#sidebar-toggle {
    left: var(--sidebar-w);
    width: 22px;
    height: 46px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: var(--surface);
    color: var(--text3);
    box-shadow: 2px 3px 10px rgba(15, 23, 42, .1);
    transition: left 220ms cubic-bezier(.23, 1, .32, 1), color 150ms ease, background-color 150ms ease;
}

#sidebar-toggle:active { transform: translateY(-50%) scale(.95); }

@media (hover: hover) and (pointer: fine) {
    #sidebar .accordion-head:not(.open):hover {
        background: var(--ws-card-hover);
        color: var(--text);
    }
    #sidebar-toggle:hover { background: var(--surface2); color: var(--accent); }
}

@media (max-width: 767px) {
    #sidebar { padding: 10px 8px 14px; gap: 8px; }
    #sidebar .accordion-head { min-height: 48px; padding: 10px 11px; }
    #sidebar-toggle { width: 24px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar .accordion-head,
    #sidebar .accordion-arrow,
    #sidebar-toggle { transition-duration: 0ms; }
}




#header {
    height: 54px;
    padding: 0 16px;
    gap: 14px;
    background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft));
    border-bottom-color: color-mix(in srgb, var(--border) 88%, transparent);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .025);
}

#header .brand { gap: 11px; }

#header #logo-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
    background: var(--accent-soft);
}

#header #logo-svg { width: 19px; height: 19px; color: var(--accent); }
#header .brand-text { gap: 2px; }

#header #inst-name {
    font-family: 'Sora', 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.02em;
}

#header #inst-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .025em;
}

#header .sep {
    height: 26px;
    background: color-mix(in srgb, var(--border) 86%, transparent);
}

#header .header-mid {
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 86%, var(--surface2));
}

#header .dot-live {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
}

#header .header-label {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
}

#header .header-right { gap: 6px; }

#header .split-btns { gap: 5px; }

#header .split-header-btn,
#header #theme-toggle {
    min-height: 30px;
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 1px rgba(15, 23, 42, .025);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

#header .split-header-btn { padding: 4px 9px; font-size: 10.5px; }
#header #theme-toggle { width: 30px; height: 30px; }

#header .split-header-btn:active,
#header #theme-toggle:active { transform: scale(.96); }

#header .split-header-btn.split-active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 24%, transparent);
}

#header .clock-wrap {
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 8px;
    background: var(--surface);
}

#header .clock-val { font-size: 10.5px; }
#header .clock-label { font-size: 8px; }

#header .clock-tz-btn {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    #header .split-header-btn:hover,
    #header #theme-toggle:hover {
        border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
        background: var(--accent-soft);
        color: var(--accent);
    }
    #header .clock-tz-btn:hover { background: var(--surface2); color: var(--accent); opacity: 1; }
}

#timeline {
    height: 52px;
    padding: 0 16px;
    gap: 8px;
    background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
    border-top-color: color-mix(in srgb, var(--border) 88%, transparent);
}

#timeline .tl-label { display: none; }
#timeline .tl-wrap { padding: 0 0 14px; }

#timeline .tl-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border2) 58%, var(--surface2));
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .08);
}

#timeline .tl-fill {
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, #38bdf8), var(--accent));
    opacity: .8;
}

#timeline .tl-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid var(--surface);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 42%, transparent);
}

#timeline .tl-marks { top: 10px; }
#timeline .tl-mark { font-size: 8px; letter-spacing: .01em; }

#timeline .tl-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    background: var(--surface);
    color: var(--text2);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

#timeline .tl-btn:active { transform: scale(.95); }

#timeline #tl-play {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 24%, transparent);
}

#timeline .tl-btn.active:not(#tl-play) {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
    background: var(--accent-soft);
    color: var(--accent);
}

#timeline .tl-time {
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}

#timeline .tl-time-val { font-size: 10px; }

#timeline .tl-speed {
    height: 30px;
    padding: 3px 7px;
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 8px;
    background: var(--surface);
    font-size: 9.5px;
}

#timeline .tl-speed:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

@media (hover: hover) and (pointer: fine) {
    #timeline .tl-btn:not(#tl-play):hover {
        border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
        background: var(--accent-soft);
        color: var(--accent);
    }
    #timeline #tl-play:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
}

@media (max-width: 767px) {
    #header { height: 44px; padding: 0 10px; gap: 8px; }
    #header #logo-wrap { width: 30px; height: 30px; border-radius: 8px; }
    #header #inst-name { font-size: 10.5px; }
    #header .header-mid { padding: 4px 7px; }
    #header .header-label { font-size: 9.5px; }
    #header .clock-wrap { padding: 3px 6px; }
    #header .split-header-btn { min-height: 28px; padding: 3px 7px; }
    #header #theme-toggle { width: 28px; height: 28px; }
    #timeline { height: 48px; padding: 0 8px; gap: 6px; }
    #timeline .tl-marks { display: none; }
    #timeline .tl-wrap { padding-bottom: 0; }
    #timeline .tl-btn { width: 30px; height: 30px; }
    #timeline .tl-time { padding: 4px 6px; }
    #timeline .tl-speed { height: 30px; padding: 3px 5px; }
}

@media (max-width: 639px) {
    #header { height: 42px; padding: 0 8px; gap: 6px; }
    #header .header-mid { display: none; }
    #header .clock-wrap { border-color: transparent; background: transparent; padding: 0; }
}



:root { --sidebar-w: 260px; }

#sidebar {
    --ws-card: var(--surface);
    --ws-card-hover: var(--surface2);
    --ws-rule: var(--border);
    --ws-icon-bg: transparent;
    padding: 4px 0 12px;
    gap: 0;
    background: var(--surface);
}

[data-theme="dark"] #sidebar { --ws-card: var(--surface); --ws-card-hover: var(--surface2); --ws-rule: var(--border); }

#sidebar .sidebar-section-label {
    min-height: 28px;
    padding: 13px 14px 4px;
    color: var(--text3);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .1em;
}

#sidebar .sidebar-section-label::after { display: none; }

#sidebar .accordion {
    border: 0;
    border-bottom: 1px solid var(--ws-rule);
    border-radius: 0;
    background: var(--ws-card);
    box-shadow: none;
}

#sidebar .accordion-head {
    min-height: 43px;
    padding: 8px 14px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

#sidebar .accordion-head.open {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
}

#sidebar .accordion-head:active { transform: none; }

#sidebar .acc-icon {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text3);
}

#sidebar .acc-icon svg { width: 15px; height: 15px; stroke-width: 1.6; }
#sidebar .accordion-head.open .acc-icon { border: 0; background: transparent; color: var(--accent); }

#sidebar .accordion-arrow {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 8px;
}

#sidebar .accordion-head.open .accordion-arrow { border: 0; background: transparent; color: var(--accent); }
#sidebar .accordion-body { background: var(--surface); }
#sidebar .accordion-body.open { border-top-color: var(--border); }
#sidebar .accordion-body > * { padding: 9px 14px 12px; }

#sidebar-toggle {
    width: 18px;
    height: 38px;
    border-radius: 0 5px 5px 0;
    background: var(--surface);
    box-shadow: none;
}

#header {
    height: 48px;
    padding: 0 14px;
    gap: 12px;
    background: var(--surface);
    border-bottom-color: var(--border);
    box-shadow: none;
}

#header .brand { gap: 10px; }
#header #logo-wrap { width: 32px; height: 32px; border-radius: 6px; border-color: var(--border); background: var(--surface2); }
#header #logo-svg { width: 18px; height: 18px; color: var(--text3); }
#header #inst-name { font-size: 12px; font-weight: 600; letter-spacing: -.015em; }
#header #inst-sub { font-size: 8.5px; letter-spacing: .02em; }
#header .sep { height: 22px; background: var(--border); }

#header .header-mid {
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#header .dot-live { width: 6px; height: 6px; box-shadow: none; }
#header .header-label { font-size: 10px; color: var(--text2); }
#header .header-right { gap: 5px; }
#header .split-btns { gap: 3px; }

#header .split-header-btn,
#header #theme-toggle {
    min-height: 27px;
    border-color: var(--border);
    border-radius: 5px;
    background: var(--surface2);
    box-shadow: none;
}

#header .split-header-btn { padding: 3px 8px; font-size: 10px; }
#header #theme-toggle { width: 27px; height: 27px; }
#header .split-header-btn.split-active { box-shadow: none; }
#header .clock-wrap { gap: 1px; padding: 0; border: 0; border-radius: 0; background: transparent; }
#header .clock-val { font-size: 10px; }
#header .clock-label { font-size: 8px; }
#header .clock-tz-btn { width: 16px; height: 16px; border-radius: 3px; }

#timeline {
    height: 46px;
    padding: 0 14px;
    gap: 8px;
    background: var(--surface);
    border-top-color: var(--border);
}

#timeline .tl-wrap { padding-bottom: 13px; }
#timeline .tl-track { height: 4px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface2); box-shadow: none; }
#timeline .tl-fill { border-radius: 2px; background: var(--accent); opacity: .5; }
#timeline .tl-thumb { width: 12px; height: 12px; border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
#timeline .tl-marks { top: 8px; }
#timeline .tl-mark { font-size: 8px; }

#timeline .tl-btn {
    width: 27px;
    height: 27px;
    border-radius: 5px;
    border-color: var(--border);
    background: var(--surface2);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

#timeline .tl-btn:active { transform: none; }
#timeline #tl-play { border-color: var(--accent); background: var(--accent); box-shadow: none; }
#timeline .tl-time { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); }
#timeline .tl-time-val { font-size: 10px; }
#timeline .tl-speed { height: 27px; padding: 2px 5px; border-color: var(--border); border-radius: 5px; background: var(--surface2); font-size: 9px; }

@media (max-width: 767px) {
    #sidebar { padding: 4px 0 10px; }
    #sidebar .accordion-head { min-height: 44px; padding: 9px 12px; }
    #sidebar .accordion-body > * { padding-left: 12px; padding-right: 12px; }
    #header { height: 44px; padding: 0 10px; gap: 8px; }
    #header #logo-wrap { width: 30px; height: 30px; }
    #timeline { height: 46px; padding: 0 8px; gap: 6px; }
    #timeline .tl-wrap { padding-bottom: 0; }
    #timeline .tl-marks { display: none; }
    #timeline .tl-btn { width: 28px; height: 28px; }
    #timeline .tl-speed { height: 28px; }
}

@media (max-width: 639px) {
    #header { height: 42px; padding: 0 8px; gap: 6px; }
}