: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}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;padding:15px 0;align-items:end}.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 controls';gap:12px}
.panel{background:#0c1a2b;border:1px solid #243a50;border-radius:8px;min-width:0}.scene{grid-area:scene;display:flex;flex-direction:column}.scene-graph{height:760px!important;min-height:760px!important;width:100%}.projection-graph{height:285px!important;width:100%}.side{grid-area:side;display:flex;flex-direction:column;gap:12px}.projection{flex:1}.details{grid-area:details}.controls{grid-area:controls;padding-bottom:12px}
.panel-heading{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(auto-fit,minmax(230px,1fr));gap:8px}.table-section{background:#102136;border-radius:6px;padding:10px 13px}.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{padding:13px 17px;min-height:95px;font-size:12px;color:#a9bed1}.orientation label{display:block;margin:8px 0 0}
.orientation details{margin-top:20px;border-top:1px solid #294057;padding-top:12px}.orientation summary{cursor:pointer;color:#51d9bd;font-weight:650}.geometry-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:6px 12px;margin-top:10px}.geometry-inputs label{font-size:11px;display:flex;flex-direction:column;gap:4px}.geometry-inputs input{width:100%;height:32px;background:#142338;border:1px solid #344960;border-radius:4px;padding:5px;color:#e3ecf5}
.nav-buttons{display:flex;flex-wrap:wrap;gap:8px;padding:14px}.controls p,.controls a{margin:4px 14px 12px}.controls a{color:#4bd8bd}.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}
/* 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}
@media(max-width:1060px){.main-grid{grid-template-columns:1fr;grid-template-areas:'scene' 'side' 'details' 'controls'}.side{display:grid;grid-template-columns:1fr 1fr}.orientation{grid-column:1/-1}.scene-graph{height:760px!important;min-height:760px!important}}
@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}}
@media print{header,.toolbar,.controls,.orientation,footer{display:none!important}.app{padding:0}.main-grid{display:block}.panel{break-inside:avoid}.scene .js-plotly-plot{height:60vh!important}}

/* 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: make the 3D-follow control obvious and always readable. */
.follow-row{display:flex;align-items:center;min-height:38px;margin:2px 0 8px}
.follow-check{display:block!important}
.follow-check label{display:inline-flex!important;align-items:center!important;gap:11px!important;margin:0!important;color:#dce9f7!important;font-size:15px!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;
}

/* v3.8: coordinate-system explanation directly under Follow 3D rotation. */
.axes-note {
  margin: 2px 0 12px 0;
  color: #91a6ba;
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
}