:root{--bg: #0b1e26;--panel: #0e2530;--panel-2: #123240;--line: #16404f;--cyan: #00e5ff;--ink: #003b46;--text: #dbeef2;--muted: #7fa6b0}*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;font-family:system-ui,sans-serif;background:var(--bg)}#map{position:absolute;top:0;bottom:0;left:320px;right:0}.vessel-marker{width:12px;height:12px;border-radius:50%;background:var(--cyan);border:2px solid var(--ink);box-shadow:0 0 6px var(--cyan);cursor:pointer}.vessel-fleet{width:16px;height:16px;background:#ffd24a;border:2px solid #6b4e00;box-shadow:0 0 9px #ffd24a;z-index:2}.dash-fleet{border-bottom:1px solid var(--line);padding:8px 0 6px}.dash-fleet[hidden]{display:none}.dash-fleet .dash-lay-title{padding:0 16px 6px}.dash-fleet-list{flex:none;max-height:172px}.dash-item-off{opacity:.5;cursor:default}.dash-item-off:hover{background:transparent}.dash-traffic-title{padding:8px 16px 4px}#dashboard{position:absolute;top:0;left:0;width:320px;height:100%;background:var(--panel);color:var(--text);display:flex;flex-direction:column;border-right:1px solid var(--line);z-index:2}.dash-header{padding:16px;border-bottom:1px solid var(--line)}.dash-header h1{margin:0;font-size:17px;color:var(--cyan);letter-spacing:.3px}.dash-sub{font-size:12px;color:var(--muted);margin-top:2px}.dash-stat{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}.dash-stat-n{font-size:22px;font-weight:700;color:var(--text)}.dash-list{list-style:none;margin:0;padding:4px 0;overflow-y:auto;flex:1}.dash-item{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;font-size:13px;border-bottom:1px solid rgba(22,64,79,.4)}.dash-item:hover{background:var(--panel-2)}.dash-dot{width:8px;height:8px;border-radius:50%;background:#3a5b66;flex:none}.dash-dot-on{background:var(--cyan);box-shadow:0 0 5px var(--cyan)}.dash-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dash-sog{color:var(--muted);font-variant-numeric:tabular-nums}.dash-footer{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.dash-btn{padding:10px;border-radius:6px;border:none;cursor:pointer;font-size:14px;background:var(--cyan);color:var(--ink);font-weight:600;text-align:left}.dash-btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line);text-align:center;font-weight:500}#settings{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg);color:var(--text);z-index:4;overflow-y:auto}#settings[hidden]{display:none}.set-bar{padding:14px 20px;border-bottom:1px solid var(--line)}.set-back{background:transparent;color:var(--cyan);border:1px solid var(--line);padding:8px 12px;border-radius:6px;cursor:pointer;font-size:14px}.set-body{display:flex;gap:24px;padding:24px;max-width:1100px}.set-nav{display:flex;flex-direction:column;gap:6px;width:200px;flex:none}.set-nav-btn{text-align:left;padding:10px 12px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:14px}.set-nav-btn.active{background:var(--panel-2);color:var(--text);border-color:var(--line)}.set-content{flex:1}.set-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}.set-card h3{margin:0 0 14px;color:var(--cyan);font-size:16px}.set-fields{display:grid;gap:10px}.set-field{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(22,64,79,.4);font-size:14px}.set-field-l{color:var(--muted)}.set-field-v{text-align:right}.set-note{color:var(--muted);font-size:12px;margin-top:14px}.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.conn-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px}.conn-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.conn-name{font-weight:600;font-size:14px}.conn-badge{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}.conn-badge-ok{background:#00e5ff1f;color:var(--cyan);border-color:#00e5ff66}.conn-cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.conn-desc{font-size:13px;color:var(--text);margin:2px 0 6px;opacity:.9}.conn-btn{padding:7px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:not-allowed;font-size:13px}.auto-builder{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin:8px 0 14px}.auto-kw{font-weight:700;color:var(--cyan);font-size:13px}.auto-select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:13px;max-width:100%}.auto-add{padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:not-allowed;font-size:13px}.auto-empty{color:var(--muted);font-size:13px;padding:6px 0 4px}.auto-h{color:var(--text);font-size:14px;margin:14px 0 12px}.login-box{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--bg);z-index:5}.login-box form{display:flex;flex-direction:column;gap:10px;width:280px}.login-box h1{color:var(--cyan);text-align:center;font-size:20px}.login-box input,.login-box button{padding:10px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.login-box button{background:var(--cyan);color:var(--ink);font-weight:600;cursor:pointer;border:none}.login-error{color:#ff6b6b;font-size:13px;min-height:16px;text-align:center}.dash-layers{padding:10px 16px;border-bottom:1px solid var(--line)}.dash-lay-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}.dash-toggle{display:inline-block;margin:0 6px 6px 0;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:13px}.dash-toggle.on{background:#00e5ff24;color:var(--cyan);border-color:#00e5ff80}.dash-mode{display:inline-flex;margin-top:2px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.dash-mode-btn{padding:5px 12px;background:transparent;color:var(--muted);border:none;cursor:pointer;font-size:12px}.dash-mode-btn.on{background:var(--panel-2);color:var(--text)}.flow-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.readout{position:absolute;top:12px;left:336px;z-index:3;background:#0b1e26eb;border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--text);font-family:system-ui,sans-serif;font-size:13px;pointer-events:none;min-width:236px}.readout[hidden]{display:none}.readout-row{display:flex;justify-content:space-between;gap:14px;padding:3px 0}.readout-val{font-variant-numeric:tabular-nums}.readout-sub{color:var(--muted)}.vec{pointer-events:none}.vec-arrow{display:block;font-size:19px;line-height:1;font-weight:700;text-shadow:0 0 3px rgba(0,0,0,.7)}.legend{position:absolute;bottom:14px;right:14px;z-index:3;background:#0b1e26e6;border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);font-size:13px;font-family:system-ui,sans-serif}.legend[hidden]{display:none}.legend-row{display:flex;align-items:center;gap:8px}.legend-sw{font-weight:700}.legend-attr{margin-top:6px;font-size:11px;color:var(--muted)}@media (max-width: 640px){#dashboard{width:100%}#map{left:0;top:55%}#dashboard{height:55%}}