@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap";:root{color:#f3f1ff;font-synthesis:none;text-rendering:optimizelegibility;--bg:#060711;--surface:#0c0d18;--surface-strong:#121321;--border:#25273a;--border-bright:#3a3d58;--text:#f3f1ff;--muted:#9899ad;--cyan:#8272ff;--cyan-strong:#6757ef;--green:#38d69b;--amber:#f0b95f;--red:#ff727c;--shadow:0 20px 56px #0000004d;background:#060711;font-family:IBM Plex Sans,system-ui,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px}body{background:radial-gradient(circle at 52% -16%, #715bff33, transparent 38rem), linear-gradient(180deg, #090a16 0, var(--bg) 30rem);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #8272ff7a}.app-shell{width:min(100%,1800px);min-height:100vh;margin:0 auto;padding:18px 22px 16px}.login-shell{place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{width:min(100%,420px);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#090a16f0;border:1px solid #3a3d58d1;border-radius:18px;padding:34px}.login-brand{align-items:center;gap:14px;margin-bottom:28px;display:flex}.login-brand h1{letter-spacing:-.04em;margin:0;font-size:28px}.login-form{gap:10px;display:grid}.login-form label{color:var(--muted);font-size:12px;font-weight:600}.login-form input{border:1px solid var(--border-bright);min-width:0;min-height:48px;color:var(--text);background:var(--surface-strong);border-radius:10px;padding:0 14px}.login-form input::placeholder{color:#707287}.login-form .button{width:100%;min-height:48px;margin-top:4px}.login-message{color:#ffe0a9;background:#5b3c0d52;border:1px solid #f0b95f57;border-radius:10px;margin-top:14px;padding:10px 12px;font-size:13px}.login-message.is-error{color:#ffc0c5;background:#5b192057;border-color:#ff727c52}.topbar{min-height:72px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#090a16e0;border:1px solid #3a3d58b8;border-radius:14px;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-bottom:14px;padding:10px 14px;display:grid}.brand,.connection-summary,.course-row,.panel-heading,.athlete-identity{align-items:center;display:flex}.brand{gap:12px}.brand-mark{width:46px;height:46px;color:var(--cyan);background:linear-gradient(145deg,#252145,#121326);border:1px solid #423d70;border-radius:12px;place-items:center;display:grid;box-shadow:inset 0 1px #ffffff0f}.brand h1,.panel-heading h2{margin:0}.brand h1{letter-spacing:-.04em;font-size:24px}.eyebrow{color:var(--muted);letter-spacing:.16em;margin-bottom:2px;font-size:10px;font-weight:700;display:block}.connection-summary{justify-content:center;gap:10px;min-width:235px}.connection-summary div{display:grid}.connection-summary strong{font-size:14px}.connection-summary span:last-child{color:var(--muted);font-size:12px}.live-dot{background:#686a7e;border:2px solid #ffffff1f;border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 1px #9899ad1f}.live-dot.state-online{background:var(--green);box-shadow:0 0 0 1px #38d69b1f,0 0 16px #38d69b66}.live-dot.state-delayed,.live-dot.state-waiting{background:var(--amber)}.button{border:1px solid #0000;border-radius:10px;justify-content:center;justify-self:end;align-items:center;gap:9px;min-height:44px;padding:0 18px;font-weight:700;transition:background-color .18s,border-color .18s;display:inline-flex}.button.primary{color:#fff;background:linear-gradient(135deg, var(--cyan), var(--cyan-strong));box-shadow:0 10px 24px #6757ef47}.button.primary:hover:not(:disabled){background:linear-gradient(135deg,#9588ff,#7565f5)}.button.secondary{border-color:var(--border-bright);color:var(--text);background:var(--surface-strong)}.button.secondary:hover:not(:disabled){border-color:var(--cyan)}.transport-message{color:#ffe0a9;background:#5b3c0d52;border:1px solid #f0b95f57;border-radius:10px;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;font-size:13px;display:flex}.transport-message.is-error{color:#ffc0c5;background:#5b192057;border:1px solid #ff727c52}.dashboard-grid{grid-template-columns:250px minmax(460px,1fr) 290px;gap:14px;min-height:calc(100vh - 146px);display:grid}.athlete-column,.telemetry-column,.map-column{align-content:start;gap:14px;min-width:0;display:grid}.map-column{grid-template-rows:minmax(530px,1fr) auto}.panel,.position-strip{border:1px solid var(--border);box-shadow:var(--shadow);background:linear-gradient(145deg,#11121ffc,#0a0b15fc);border-radius:14px}.panel{padding:16px}.panel-heading{justify-content:space-between;gap:12px;margin-bottom:18px}.panel-heading.compact{margin-bottom:12px}.panel-heading h2{font-size:16px}.health-pill{border:1px solid;border-radius:999px;align-items:center;min-height:25px;padding:0 9px;font-size:11px;font-weight:700;display:inline-flex}.tone-good{color:var(--green);background:#38d69b17}.tone-warn{color:var(--amber);background:#f0b95f17}.tone-bad{color:var(--red);background:#ff727c17}.tone-muted{color:var(--muted)}.athlete-identity{gap:12px;margin-bottom:16px}.athlete-avatar{color:#fff;background:linear-gradient(145deg,#8879ff,#5747dd);border:1px solid #554b99;border-radius:50%;flex:0 0 48px;place-items:center;width:48px;height:48px;font-weight:700;display:grid;box-shadow:0 8px 20px #6757ef4d}.athlete-identity>div:last-child{min-width:0}.athlete-identity label,.field-label{color:var(--muted);margin-bottom:5px;font-size:11px;display:block}.athlete-identity input,select{border:1px solid var(--border);width:100%;min-height:42px;color:var(--text);background:#10111d;border-radius:8px}.athlete-identity input{min-height:32px;padding:3px 8px;font-weight:600}select{margin-bottom:18px;padding:0 10px}.status-list{margin:0}.status-list div{border-top:1px solid #3a3d5880;grid-template-columns:1fr auto;gap:12px;padding:10px 0;display:grid}.status-list dt{color:var(--muted);font-size:12px}.status-list dd{text-align:right;margin:0;font-family:JetBrains Mono,monospace;font-size:11px}.quality-grid,.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.quality-grid div,.metrics-grid div{background:#07081185;border:1px solid #3a3d588c;border-radius:9px;gap:3px;min-width:0;padding:11px;display:grid}.quality-grid strong,.metrics-grid strong{text-overflow:ellipsis;font-family:JetBrains Mono,monospace;font-size:15px;overflow:hidden}.quality-grid span,.metrics-grid span{color:var(--muted);font-size:10px}.battery-value{color:var(--cyan);grid-template-columns:auto 1fr;align-items:center;column-gap:8px;display:grid}.battery-value svg{grid-row:span 2}.battery-value strong{font-family:JetBrains Mono,monospace;font-size:24px;line-height:1}.battery-value span{color:var(--muted);grid-column:2;font-size:11px}.battery-overview{justify-content:space-between;align-items:center;gap:12px;display:flex}.battery-meter{background:#3a3d5894;border-radius:999px;height:7px;margin:15px 0 10px;overflow:hidden}.battery-meter span{border-radius:inherit;background:linear-gradient(90deg, var(--cyan), #a395ff);min-width:0;height:100%;transition:width .24s;display:block}.battery-meta{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;font-size:10px;display:flex}.battery-meta strong{color:var(--text);font-family:JetBrains Mono,monospace;font-size:11px}.battery-meta span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.map-panel{border:1px solid var(--border-bright);min-height:530px;box-shadow:var(--shadow);background:#0c0d17;border-radius:14px;position:relative;overflow:hidden}.map-panel>.map-container{width:100%;height:100%;position:absolute;inset:0}.maplibregl-map{font-family:IBM Plex Sans,sans-serif}.maplibregl-ctrl-attrib{font-size:10px}.map-toolbar,.map-status{z-index:10;gap:7px;display:flex;position:absolute}.map-toolbar{top:12px;left:12px}.map-status{bottom:12px;right:12px}.map-tool,.map-status span{min-height:36px;color:var(--text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#090a14e6;border:1px solid #3a3d58e0;border-radius:8px;padding:0 12px}.map-tool{transition:border-color .18s,background-color .18s}.map-tool:hover:not(:disabled),.map-tool.is-active{border-color:var(--cyan);color:#ddd8ff;background:#292250f0}.map-status span{align-items:center;min-height:30px;font-size:11px;display:inline-flex}.map-vessel-marker{filter:drop-shadow(0 4px 9px #0000007a);width:26px;height:34px}.map-vessel-marker:before{content:"";clip-path:polygon(50% 0,88% 100%,50% 80%,12% 100%);background:linear-gradient(#fff 0 35%,#7565f5 36% 100%);position:absolute;inset:0}.map-error{z-index:11;color:#ffd0d4;text-align:center;background:#310d16eb;border:1px solid #ff727c70;border-radius:12px;gap:4px;width:min(280px,100% - 30px);padding:16px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.map-error span,.map-fallback span{color:var(--muted);font-size:12px}.map-loading,.map-fallback{color:var(--muted);text-align:center;place-content:center;gap:8px;display:grid}.position-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;display:grid;overflow:hidden}.position-strip>div{background:#0b0c16e6;grid-template-columns:auto 1fr;gap:2px 8px;padding:12px 14px;display:grid}.position-strip svg{color:var(--cyan);grid-row:1/3;align-self:center}.position-strip span{color:var(--muted);font-size:10px}.position-strip strong{font-family:JetBrains Mono,monospace;font-size:12px}.position-strip>div.is-alert{background:#49111bd1}.position-strip>div.is-alert svg,.position-strip>div.is-alert strong{color:var(--red)}.speed-value{align-items:baseline;gap:8px;margin:5px 0 18px;display:flex}.speed-value strong{letter-spacing:-.08em;font-family:JetBrains Mono,monospace;font-size:clamp(48px,5vw,68px);font-weight:600;line-height:.9}.speed-value span{color:var(--muted);font-size:13px}.course-row{border-top:1px solid #3a3d588c;gap:10px;padding-top:13px}.course-row svg{color:var(--cyan)}.course-row div{flex:1;display:grid}.course-row div span{color:var(--muted);font-size:10px}.course-row div strong{font-family:JetBrains Mono,monospace}.attitude-block{grid-template-columns:126px 1fr;align-items:center;gap:16px;display:grid}.attitude-indicator{background:#15374c;border:4px solid #30334a;border-radius:50%;width:126px;height:126px;position:relative;overflow:hidden}.attitude-horizon{background:linear-gradient(#4b9fcc 0 49.2%,#e4eef2 49.3% 50.7%,#795d3a 50.8% 100%);transition:transform .35s;position:absolute;inset:-40%}.horizon-line{background:#ffffffb3;height:1px;position:absolute;top:50%;left:0;right:0}.attitude-craft{width:62px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.attitude-craft:after{content:"";background:#ffcf5a;border-radius:4px;width:10px;height:3px;position:absolute;top:9px;left:26px}.attitude-craft i{background:#ffcf5a;border-radius:3px;width:24px;height:3px;position:absolute;top:9px}.attitude-craft i:first-child{left:0}.attitude-craft i:last-child{right:0}.attitude-values{gap:12px;display:grid}.attitude-values div{gap:2px;display:grid}.attitude-values span{color:var(--muted);font-size:11px}.attitude-values strong{font-family:JetBrains Mono,monospace;font-size:21px}footer{color:#74768d;letter-spacing:.04em;justify-content:space-between;gap:16px;padding:12px 4px 0;font-size:10px;display:flex}@media (width<=1180px){.dashboard-grid{grid-template-columns:220px minmax(420px,1fr)}.telemetry-column{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=820px){.app-shell{padding:10px}.topbar{grid-template-columns:1fr auto}.connection-summary{order:3;grid-area:2/1/auto/-1;justify-content:flex-start}.dashboard-grid{grid-template-columns:1fr}.athlete-column,.telemetry-column{grid-column:auto;grid-template-columns:1fr}.map-column{grid-row:1;grid-template-rows:auto auto}.map-panel{min-height:440px}.position-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=480px){.login-shell{padding:16px}.login-card{padding:26px 22px}.topbar{gap:12px}.brand-mark{width:40px;height:40px}.brand h1{font-size:20px}.button{padding:0 12px}.map-panel{min-height:390px}.map-status{display:none}.position-strip{grid-template-columns:1fr}.attitude-block{grid-template-columns:112px 1fr}.attitude-indicator{width:112px;height:112px}footer{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}