:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#dce9f7;background:#07111f}
*{box-sizing:border-box} body{margin:0}.app{max-width:1900px;margin:auto;padding:0 18px 14px}
header{height:68px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #263850;letter-spacing:.05em}
.brand-mark{color:#3de0bc;margin-right:12px}.subbrand{color:#9fb5cb;font-size:13px}.header-note{color:#8299af;font-size:12px}
.top-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:15px 0;min-width:0}
.top-navigation{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.top-counter{color:#dce9f7;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.top-event-link{color:#4bd8bd;font-size:13px;white-space:nowrap}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;padding:0;align-items:end;justify-content:flex-end;margin-left:auto}.toolbar label{display:flex;flex-direction:column;gap:5px;color:#8198b0;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.toolbar .dash-dropdown{min-width:150px}.toolbar label:first-child .dash-dropdown{min-width:260px}
.toolbar input{background:#142338;border:1px solid #344960;color:#ecf4fa;border-radius:5px;height:37px;padding:0 10px;width:125px}
.button{background:#1c2f47;border:1px solid #426079;color:#dce9f7;border-radius:5px;padding:9px 14px;cursor:pointer;white-space:nowrap}.button:hover{border-color:#49d6bd}.primary{background:#13836f;color:white;border-color:#149a81}
.main-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(330px,.95fr);grid-template-areas:'scene side' 'details details';gap:12px}
.panel{background:#0c1a2b;border:1px solid #243a50;border-radius:8px;min-width:0}.scene{grid-area:scene;display:flex;flex-direction:column;height:800px;min-height:800px;overflow:hidden}.scene-graph{flex:1;height:calc(100% - 40px)!important;min-height:0!important;width:100%}
.side{grid-area:side;display:flex;flex-direction:column;gap:12px;height:800px;min-height:800px}.projection{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.projection-graph{flex:1;height:calc(100% - 40px)!important;min-height:0!important;width:100%}.details{grid-area:details;width:100%}
.panel-heading{height:40px;min-height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#9bb0c8;font-size:11px;font-weight:750;letter-spacing:.12em;border-bottom:1px solid #20364d}
.badge{background:#19433f;color:#59e3c6;padding:3px 10px;border-radius:20px;letter-spacing:0;font-size:12px}
.info-grid{padding:12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.table-section{background:#102136;border-radius:6px;padding:10px 13px;min-width:0}.table-section h4{color:#3fdbbc;font-size:11px;letter-spacing:.1em;margin:0 0 8px}.table-section table{width:100%;font-size:12px;border-collapse:collapse}.table-section tr{border-bottom:1px solid #22364b}.table-section tr:last-child{border:0}.table-section th{text-align:left;color:#8ca3b9;font-weight:400;padding:5px 0}.table-section td{text-align:right;color:#e3ecf5;padding:5px 0;overflow-wrap:anywhere}
.orientation{flex:0 0 76px;padding:8px 14px;min-height:76px;font-size:12px;color:#a9bed1;overflow:hidden}.orientation-inline{height:100%;display:flex;align-items:center;gap:26px;min-width:0}.projection-slider-label{display:flex!important;flex:1;min-width:0;max-width:360px;flex-direction:column;gap:2px;margin:0!important;color:#a9bed1}.projection-slider-label>span{font-size:11px;color:#dce9f7;white-space:nowrap}.projection-slider-label .dash-slider{width:100%}
.hint{font-size:12px;line-height:1.5;color:#8299af}.error{color:#ffb2a4}.error:not(:empty){padding:12px;background:#442b34;margin:6px 0;border-radius:5px}footer{font-size:11px;color:#72869b;padding:16px 2px}
@media(max-width:1450px){.top-controls{align-items:flex-start;flex-wrap:wrap}.toolbar{width:100%;justify-content:flex-end}.info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1060px){.main-grid{grid-template-columns:1fr;grid-template-areas:'scene' 'side' 'details'}.scene,.side{height:auto;min-height:0}.scene-graph{height:760px!important;min-height:760px!important}.side{display:grid;grid-template-columns:1fr 1fr}.projection-graph{height:300px!important}.orientation{grid-column:1/-1}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.top-controls{display:block}.top-navigation{margin-bottom:12px;flex-wrap:wrap}.toolbar{justify-content:flex-start;margin-left:0}}
@media(max-width:620px){.side{display:flex}.header-note{display:none}.app{padding:0 8px}.toolbar label:first-child,.toolbar label:first-child .dash-dropdown{width:100%}.scene-graph{height:700px!important;min-height:700px!important}.info-grid{grid-template-columns:1fr}.orientation-inline{gap:12px}.projection-slider-label{max-width:none}.top-navigation{gap:7px}.top-counter,.top-event-link{font-size:12px}}
@media print{header,.top-controls,.orientation,footer{display:none!important}.app{padding:0}.main-grid{display:block}.panel{break-inside:avoid}.scene{height:auto;min-height:0}.scene .js-plotly-plot{height:60vh!important}}

/* Dash dropdown has several renderer versions. */
.dash-dropdown,.dash-dropdown *{color:#dce9f7}.dash-dropdown .Select-control,.dash-dropdown .Select-menu-outer{background:#142338;border-color:#344960}.dash-dropdown .Select-value-label,.dash-dropdown .Select-placeholder{color:#dce9f7!important}.dash-dropdown input{width:auto}

/* v3.1: projection left-drag rotates azimuth instead of Plotly zoom. */
.projection-graph{cursor:ew-resize}.projection-graph .nsewdrag,.projection-graph .drag{cursor:ew-resize!important}.projection-graph.projection-rotating{cursor:grabbing}


/* v3.2/v5.0: compact joint-rotation control. */
.follow-check{display:block!important}
.follow-check label{display:inline-flex!important;align-items:center!important;gap:9px!important;margin:0!important;color:#dce9f7!important;font-size:14px!important;font-weight:700!important;line-height:1.25!important;cursor:pointer!important;white-space:nowrap!important;opacity:1!important;visibility:visible!important}
.follow-check input[type=checkbox]{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;margin:0!important;accent-color:#4bd8bd;cursor:pointer}

/* v3.3 UI hotfix: dark dropdowns and deterministic event-index control. */
.toolbar .dash-dropdown,
.toolbar .dash-dropdown > div,
.toolbar .dash-dropdown .Select,
.toolbar .dash-dropdown .Select-control,
.toolbar .dash-dropdown .Select__control {
  background:#142338!important;
  color:#ecf4fa!important;
  border-color:#344960!important;
}
.toolbar .dash-dropdown .Select-control:hover,
.toolbar .dash-dropdown .Select__control:hover {
  border-color:#4c6884!important;
}
.toolbar .dash-dropdown .Select-value,
.toolbar .dash-dropdown .Select-value-label,
.toolbar .dash-dropdown .Select-placeholder,
.toolbar .dash-dropdown .Select-input,
.toolbar .dash-dropdown .Select-input input,
.toolbar .dash-dropdown .Select__single-value,
.toolbar .dash-dropdown .Select__placeholder,
.toolbar .dash-dropdown .Select__input-container,
.toolbar .dash-dropdown .Select__input,
.toolbar .dash-dropdown .Select__input input {
  color:#ecf4fa!important;
}
.toolbar .dash-dropdown .Select-menu-outer,
.toolbar .dash-dropdown .Select-menu,
.toolbar .dash-dropdown .Select__menu,
.toolbar .dash-dropdown .Select__menu-list {
  background:#142338!important;
  color:#ecf4fa!important;
  border-color:#344960!important;
}
.toolbar .dash-dropdown .Select-option,
.toolbar .dash-dropdown .VirtualizedSelectOption,
.toolbar .dash-dropdown .Select__option {
  background:#142338!important;
  color:#dce9f7!important;
}
.toolbar .dash-dropdown .Select-option.is-focused,
.toolbar .dash-dropdown .Select-option.is-selected,
.toolbar .dash-dropdown .VirtualizedSelectFocusedOption,
.toolbar .dash-dropdown .Select__option--is-focused,
.toolbar .dash-dropdown .Select__option--is-selected {
  background:#1c3952!important;
  color:#ffffff!important;
}
.toolbar .dash-dropdown .Select-arrow-zone,
.toolbar .dash-dropdown .Select__dropdown-indicator,
.toolbar .dash-dropdown .Select__indicator {
  color:#86a9c7!important;
}

.event-index-control{display:flex;align-items:stretch;height:37px}
.event-index-control #jump{
  width:108px!important;
  height:37px!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.event-index-step{
  width:49px;height:37px;padding:0;
  border:1px solid #344960;
  background:#142338;color:#ecf4fa;
  font-size:21px;font-weight:700;line-height:35px;
  cursor:pointer;
}
.event-index-step:first-child{border-radius:5px 0 0 5px}
.event-index-step:last-child{border-radius:0 5px 5px 0}
.event-index-step:hover{background:#1c3952;border-color:#4bd8bd;color:#ffffff}
.event-index-step:active{background:#24506e}


/* v3.4: Dash/React-Select may portal the open menu outside .toolbar.
   Style the portal globally so Dataset and Class stay dark when expanded. */
.Select-menu-outer,
.Select-menu,
.VirtualizedSelectMenu,
.Select__menu,
.Select__menu-list,
.Select-menu-outer > div {
  background:#142338!important;
  color:#dce9f7!important;
  border-color:#344960!important;
}
.Select-menu-outer .Select-option,
.Select-menu-outer .VirtualizedSelectOption,
.Select-menu-outer .VirtualizedSelectFocusedOption,
.Select-menu-outer .Select-noresults,
.Select__menu .Select__option {
  background:#142338!important;
  color:#dce9f7!important;
}
.Select-menu-outer .Select-option.is-focused,
.Select-menu-outer .Select-option.is-selected,
.Select-menu-outer .VirtualizedSelectFocusedOption,
.Select__menu .Select__option--is-focused,
.Select__menu .Select__option--is-selected {
  background:#1c3952!important;
  color:#ffffff!important;
}
.Select-menu-outer .Select-input,
.Select-menu-outer .Select-input input,
.Select-menu-outer .Select-search,
.Select-menu-outer .Select-search input,
.Select__menu input {
  background:#142338!important;
  color:#ecf4fa!important;
}
.Select-menu-outer,
.Select-menu-outer * {
  scrollbar-color:#7f8a94 #142338;
}
.Select-menu-outer *::-webkit-scrollbar-track {background:#142338!important}
.Select-menu-outer *::-webkit-scrollbar-thumb {background:#7f8a94!important;border-radius:8px}

/* v3.4.1: Dash 4 Dropdown popup uses a new renderer and can ignore the
   legacy React-Select classes above.  Target the semantic popup roles too. */
body [role="listbox"],
body [role="listbox"] > div,
body [role="option"] {
  background-color:#142338!important;
  color:#dce9f7!important;
  border-color:#344960!important;
}
body [role="option"]:hover,
body [role="option"][aria-selected="true"],
body [role="option"][data-combobox-selected="true"] {
  background-color:#1c3952!important;
  color:#ffffff!important;
}
body div:has(> [role="listbox"]),
body div:has(> div > [role="listbox"]),
body div:has(> input[placeholder="Search"]),
body div:has(> input[type="search"]) {
  background-color:#142338!important;
  color:#dce9f7!important;
  border-color:#344960!important;
}
body input[placeholder="Search"],
body input[type="search"] {
  background-color:#142338!important;
  color:#ecf4fa!important;
  border-color:#344960!important;
  caret-color:#ecf4fa!important;
}
body input[placeholder="Search"]::placeholder,
body input[type="search"]::placeholder {
  color:#8299af!important;
  opacity:1!important;
}

/* v4.0: compact colour-coded event summary pills in the 3D header. */
.event-badges{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  flex-wrap:wrap;min-width:0;letter-spacing:0;
}
.metric-badge{
  display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;
  border-radius:14px;border:1px solid rgba(255,255,255,.22);
  font-size:11px;font-weight:750;line-height:1;letter-spacing:0;
  white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.status-badge{background:#19433f;color:#59e3c6}
.status-1spot{background:#51421d;color:#ffd166}
.status-other{background:#33445a;color:#dce9f7}
.direction-badge{background:#26364b;color:#f3f7fb;border-color:#60758c}
@media(max-width:1250px){
  .metric-badge{font-size:10px;padding:3px 7px}
  .event-badges{gap:4px}
}
.scene>.panel-heading{height:auto;min-height:40px;gap:10px;padding-top:5px;padding-bottom:5px}


/* v5.0: navigation/filter toolbar redesign and full-width Event Data panel. */

/* v6.0: Mu-show controls and locked 3D playback. */
.mu-show-button{border-color:#b59a2c;color:#ffe45c;background:#2a2717}
.mu-show-button:hover{border-color:#ffe45c;color:#fff5a6}
.mu-show-button.active{background:#8b7014;border-color:#ffe45c;color:#fffbe4;box-shadow:0 0 0 1px rgba(255,228,92,.20)}
.sound-button{min-width:92px}
.sound-on{border-color:#39e6a2;color:#68f0bc;background:#153126}
.sound-off{border-color:#53687e;color:#9fb0c2;background:#182638}
.mu-rate-control{display:flex;flex-direction:column;justify-content:center;width:180px;min-width:150px;height:42px;margin-left:2px;color:#9db2c8}
.mu-rate-control>span{font-size:10px;line-height:12px;text-transform:uppercase;letter-spacing:.06em;color:#9db2c8;margin-bottom:-2px}
.mu-rate-control .dash-slider{width:100%;margin:0}
.mu-rate-control .rc-slider-mark-text{font-size:9px;color:#6f859b;white-space:nowrap}
.mu-rate-control .rc-slider-track{background:#ffe45c}
.mu-rate-control .rc-slider-handle{border-color:#ffe45c;background:#26354a}
/* v6.2: Mu-show keeps wheel/drag zoom and double-click camera reset.
   Rotation is disabled by Plotly dragmode='zoom', not by blocking pointer events. */
.scene-graph.mu-show-active{position:relative}
/* v6.4 whole-picture lightning exposure is compositor-driven in mu_show.js. */

@media(max-width:1450px){
  .mu-rate-control{width:160px}
}
@media(max-width:1060px){
  .mu-rate-control{width:190px}
}
@media(max-width:620px){
  .mu-rate-control{width:155px}
  .sound-button{min-width:82px}
}