: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}