:root { color-scheme: dark; font-family: 'DM Sans', Arial, sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
html, body, #app { margin: 0; width: 100%; height: 100%; min-height: 650px; overflow: hidden; background: #081722; }
#app { position: relative; color: #e5f1f1; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid #64d2d8; outline-offset: 4px; }
.viewport, .viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.noise-overlay { position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg,rgba(5,18,27,.45),transparent 25%,transparent 74%,rgba(5,18,27,.45)), linear-gradient(0deg,rgba(5,17,26,.78),transparent 30%,transparent 75%,rgba(5,17,26,.36)); }
.topbar { position: absolute; z-index: 4; top: 0; left: 0; right: 0; padding: 23px 29px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(130,202,215,.17); background: linear-gradient(180deg, rgba(4,15,22,.89), rgba(4,15,22,.35)); }
.brand { display:flex; align-items:center; gap:15px; }
.brand-symbol { font-family:'Barlow Condensed',Impact,sans-serif; width:44px; height:44px; display:grid; place-items:center; font-size:31px; font-weight:700; border:1px solid #61c7d0; color:#77dce0; position:relative; line-height:1; }
.brand-symbol span { font-family:Arial; font-size:10px; position:absolute; right:2px; top:2px; }
.eyebrow { font-family:'Barlow Condensed',Arial,sans-serif; font-size:12px; font-weight:600; letter-spacing:.18em; color:#75b7c5; }
h1,h2,h3,p { margin:0; }
h1 { font-family:'Barlow Condensed',Impact,sans-serif; font-size:30px; letter-spacing:.075em; line-height:1.0; font-weight:700; }
h1 span { color:#75b9c3; font-weight:400; }
.top-meta { display:flex; align-items:center; gap:11px; }
.tag { font-family:'Barlow Condensed',Arial,sans-serif; border:1px solid rgba(152,204,213,.26); padding:7px 11px; font-size:12px; letter-spacing:.11em; color:#b0c5cc; }
.live-indicator { font-size:10px; font-weight:700; letter-spacing:.1em; margin-left:12px; white-space:nowrap; color:#bfe9de; }
.live-indicator i, .pulse-dot, .badge-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:#66dfac; box-shadow:0 0 10px #66dfac; margin-right:8px; }
.panel { position: absolute; z-index: 4; top: 113px; bottom: 76px; width: 292px; padding: 22px 20px 18px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#315665 transparent; background:rgba(8,27,37,.86); border:1px solid rgba(132,204,211,.20); box-shadow:0 10px 55px rgba(0,0,0,.19); backdrop-filter:blur(17px); }
.control-panel { left:24px; }
.telemetry-panel { right:24px; width:290px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.tiny-id { color:#688994; font-size:8px; letter-spacing:.08em; text-align:right; }
.panel h2 { font-family:'Barlow Condensed',Impact,sans-serif; font-size:30px; font-weight:600; letter-spacing:.025em; margin:9px 0 21px; }
.panel h3 { font-family:'Barlow Condensed',Impact,sans-serif; font-size:19px; font-weight:600; margin:4px 0 14px; letter-spacing:.025em; }
.range-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 11px; }
.range-row label { font-size:11px; color:#aec9cd; font-weight:500; }
.range-row output { color:#defcff; font-family:'Barlow Condensed',Arial,sans-serif; font-size:20px; font-weight:600; }
input[type=range] { display:block; width:100%; margin:4px 0 0; appearance:none; background:transparent; height:18px; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { background:linear-gradient(90deg,#1a7686,#34606d); height:4px; border-radius:4px; }
input[type=range]::-moz-range-track { background:#278697; height:4px; border-radius:4px; }
input[type=range]::-webkit-slider-thumb { appearance:none; width:15px; height:15px; background:#b6fbf8; border:3px solid #2b788a; border-radius:2px; margin-top:-5px; box-shadow:0 0 10px #1f929c; }
input[type=range]::-moz-range-thumb { width:12px; height:12px; background:#b6fbf8; border:3px solid #2b788a; border-radius:2px; }
input[type=range]:disabled { cursor:not-allowed; opacity:.5; }
.ruler { display:flex; justify-content:space-between; color:#668b96; font-size:9px; letter-spacing:.06em; margin:3px 0 20px; }
.quick-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
.quick-actions button { min-height:37px; font-family:'Barlow Condensed',Arial,sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; border:1px solid #406775; background:#172c37; color:#d5eced; padding:6px 3px; transition:background .2s; }
.quick-actions button:hover,.reset-btn:hover,.camera-nav button:hover { background:#245267; }
.quick-actions .primary-btn { color:#10262d; background:#83d5d3; border-color:#83d5d3; }
.quick-actions .primary-btn:hover { background:#aeefec; }
.divider { height:1px; background:rgba(146,212,217,.16); margin:19px 0; }
.dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:1px; }
.upstream-dot { background:#5bd5c9; }.downstream-dot { background:#f9a567; }
.water-range { margin-top:16px; }
.switch-row { display:flex; justify-content:space-between; align-items:center; gap:13px; padding:9px 0; }
.switch-row strong { display:block; color:#cfe3e5; font-size:11px; font-weight:600; }
.switch-row small { display:block; font-size:9px; color:#789aa6; margin-top:5px; }
.switch { position:relative; width:35px; height:20px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.switch-ui { position:absolute; inset:0; background:#24404a; border:1px solid #486570; border-radius:13px; transition:.2s; cursor:pointer; }
.switch-ui::before { content:''; position:absolute; height:12px; width:12px; background:#b1c4c7; border-radius:100%; left:3px; top:3px; transition:.2s; }
.switch input:checked + .switch-ui { background:#277b82; border-color:#64c7bd; }
.switch input:checked + .switch-ui::before { transform:translateX(14px); background:#d6fff4; }
.toggle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:13px 0 18px; }
.toggle-grid label { font-size:10px; color:#aac4c9; display:flex; align-items:center; gap:5px; cursor:pointer; }
.toggle-grid input { accent-color:#70c9cb; }
.reset-btn { width:100%; height:35px; border:1px solid #42616d; background:rgba(32,59,69,.52); color:#bcd5d8; font-size:11px; font-weight:600; }
.status-banner { display:flex; align-items:center; gap:9px; color:#98f6c6; font-size:10px; letter-spacing:.08em; font-weight:700; margin-top:-6px; margin-bottom:17px; border:1px solid #245e51; padding:11px; background:rgba(25,88,62,.12); }
.status-banner .indicator { height:8px; width:8px; background:#5ee5a1; border-radius:50%; box-shadow:0 0 10px #3be89c; flex:0 0 auto; }
.status-banner.fault { border-color:#8d503f; color:#ffac8d; background:#4b261e50; }.status-banner.fault .indicator { background:#ff835e; box-shadow:0 0 10px #ff835e; }
.status-banner.moving { color:#87d7fa; border-color:#337c9c; }.status-banner.moving .indicator { background:#66b9fc; }
.measure-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
.measure { border-left:1px solid #325969; padding-left:10px; min-height:60px; }
.measure span { display:block; font-size:9px; color:#85a7b2; letter-spacing:.02em; line-height:1.5; }
.measure strong { display:block; margin-top:4px; font-family:'Barlow Condensed',Arial,sans-serif; font-size:31px; font-weight:600; color:#e9f4f4; line-height:1.1; }
.measure strong small { margin-left:3px; font-size:16px; color:#7ab3bd; font-weight:500; }
.clearance-label { display:flex; justify-content:space-between; font-size:8px; letter-spacing:.045em; color:#9bbec3; margin:19px 0 10px; gap:10px; }
.clearance-label span { white-space:nowrap; color:#d1f8f3; }
.clearance-track { background:#173541; height:6px; border:1px solid #1b4957; }
.clearance-track div { background:linear-gradient(90deg,#178a91,#7addd2); height:100%; width:45%; transition:width .12s linear; }
.module-description { color:#91afb7; font-size:11px; line-height:1.75; min-height:80px; }
.asset-stats { display:grid; grid-template-columns:1fr 1fr; row-gap:12px; }
.asset-stats span { color:#7796a1; font-size:8px; letter-spacing:.08em; display:block; }
.asset-stats strong { font-family:'Barlow Condensed',Arial,sans-serif; font-size:21px; color:#d5ecee; font-weight:600; }
.technical-note { font-size:9px; color:#698c94; line-height:1.6; margin-top:19px; }
.camera-nav { position:absolute; z-index:4; bottom:90px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:0; border:1px solid rgba(140,200,205,.2); background:rgba(6,27,36,.85); backdrop-filter:blur(12px); padding:6px; white-space:nowrap; }
.camera-nav span { color:#77a1aa; font-size:9px; font-weight:700; padding:0 13px 0 7px; }
.camera-nav button { border:0; background:transparent; padding:10px 12px; color:#a6c3ca; font-family:'Barlow Condensed',Arial,sans-serif; font-size:12px; letter-spacing:.09em; }
.camera-nav button.active { background:#285866; color:#e1fbfa; }
.bottom-strip { position:absolute; z-index:3; bottom:0; left:0; right:0; height:54px; display:flex; justify-content:space-between; align-items:center; gap:15px; padding:0 28px; background:rgba(4,16,23,.91); border-top:1px solid rgba(134,200,210,.15); font-family:'Barlow Condensed',Arial,sans-serif; font-size:11px; letter-spacing:.09em; color:#87b9c2; }
.bottom-strip .badge-dot { width:6px; height:6px; background:#7bcad3; box-shadow:none; margin-right:5px; }
.sep { color:#426d76; margin:0 12px; }
.help { color:#527b87; }.bottom-strip #pauseLabel { color:#bee6d4; white-space:nowrap; }
.labels { position:absolute; z-index:2; inset:0; pointer-events:none; overflow:hidden; }
.world-label { position:absolute; border:1px solid rgba(101,208,220,.58); background:rgba(9,43,55,.68); color:#a4e4e6; padding:7px 10px; font-size:9px; letter-spacing:.08em; white-space:nowrap; backdrop-filter:blur(5px); box-shadow:0 3px 13px #03131870; }
.world-label::before { content:''; position:absolute; height:8px; width:1px; background:#60b7bb; left:50%; top:100%; }
@media (max-width:1260px) { .top-meta .tag { display:none; }.panel { width:245px; padding:18px 15px; }.control-panel {left:12px;}.telemetry-panel {right:12px;}.help {display:none;} }
@media (max-width:900px) { .topbar { padding:12px 16px; }.brand-symbol {height:37px;width:37px;font-size:27px;}.top-meta {display:none;}.panel {top:85px;width:225px;bottom:108px;}.panel h2 {font-size:25px;}.camera-nav {bottom:64px;}.bottom-strip {height:49px;padding:0 15px;}.bottom-strip #pauseLabel {display:none;} }
@media (max-width:690px) { html,body,#app { min-height:730px; }.control-panel {top:76px;left:8px;width:210px;bottom:130px;}.telemetry-panel {top:auto;right:8px;left:auto;bottom:130px;width:calc(100% - 235px);height:260px;padding:10px 10px;}.telemetry-panel .divider,.telemetry-panel .asset-stats,.telemetry-panel .module-description,.telemetry-panel h3,.technical-note,.clearance-label,.clearance-track { display:none; }.telemetry-panel h2 {margin:7px 0;font-size:23px;}.measure-grid {gap:6px;}.measure {min-height:42px;padding-left:4px;}.measure span {font-size:7px;}.measure strong {font-size:20px;}.measure strong small {font-size:11px;}.status-banner {margin:0 0 8px;padding:6px;font-size:8px;}.camera-nav {bottom:72px;left:8px;right:8px;transform:none;justify-content:space-between;}.camera-nav span {display:none;}.camera-nav button {font-size:10px;padding:7px 3px;}.bottom-strip {font-size:9px;}.bottom-strip .sep {margin:0 4px;} }