:root {
  color-scheme: dark;
  --bg:#020b14;
  --panel:#061d2c;
  --line:#16799a;
  --text:#f2fdff;
  --muted:#82b9c8;
  --cyan:#2eeeff;
  --lime:#32f5ad;
  --electric:#5f7dff;
  --magenta:#ff4fd8;
  --amber:#ffd34d;
}
* { box-sizing:border-box; }
body { margin:0; min-width:0; overflow-x:hidden; background:radial-gradient(circle at 76% 16%,#0a4260 0,#031522 42%,#01070d 100%); color:var(--text); font:13px/1.4 "Segoe UI",Arial,sans-serif; }
.shell { min-height:100vh; padding:8px; display:flex; flex-direction:column; gap:8px; }
.anchor-ticker-bar,.controls,.viewport-panel,footer { border:1px solid var(--line); background:linear-gradient(180deg,rgba(7,38,54,.98),rgba(2,15,25,.98)); box-shadow:0 18px 60px rgba(0,0,0,.38),0 0 20px rgba(46,238,255,.07),inset 0 1px rgba(111,244,255,.1); }
.topbar { min-height:70px; padding:10px 14px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand>span { width:45px; height:45px; display:grid; place-items:center; border:1px solid var(--cyan); color:var(--cyan); background:linear-gradient(145deg,rgba(46,238,255,.14),rgba(95,125,255,.08)); box-shadow:0 0 18px rgba(46,238,255,.22),inset 0 0 12px rgba(46,238,255,.08); font-weight:800; letter-spacing:1px; }
.brand strong,.brand small { display:block; }
.brand strong { letter-spacing:1.7px; font-size:16px; }
.brand small,.clock small { color:var(--muted); }
.module-nav { display:grid; grid-template-columns:1fr 1fr; border:1px solid #247b96; background:#03131f; box-shadow:0 0 15px rgba(46,238,255,.09); }
.module-nav a { padding:8px 6px; color:#8fb5c1; text-align:center; text-decoration:none; font-size:9px; font-weight:800; letter-spacing:.8px; border:1px solid #163b4b; }
.module-nav a[aria-current="page"],.module-nav a:hover { color:#011017; background:linear-gradient(110deg,var(--cyan),#64fbd1); box-shadow:0 0 18px rgba(46,238,255,.34); }
.clock { text-align:right; }
.clock b,.clock small { display:block; }
.anchor-ticker-bar { min-height:42px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; overflow:hidden; background:linear-gradient(90deg,#071e2b,#03141f 24%,#061f2c 78%,#071925); }
.anchor-ticker-title { height:100%; display:flex; align-items:center; gap:8px; padding:0 13px; color:#071216; background:linear-gradient(110deg,#ffd34d,#ff9d43); box-shadow:8px 0 20px rgba(255,190,64,.16); }
.anchor-ticker-title>.anchor-ticker-symbol { font-size:20px; line-height:1; }
.anchor-ticker-title strong { font-size:10px; letter-spacing:1.25px; }
.anchor-ticker-title b { min-width:22px; padding:2px 6px; border-radius:11px; color:#fff3be; background:#5d3108; text-align:center; font-size:10px; }
.anchor-ticker-summary { display:flex; align-items:center; gap:5px; margin-left:2px; padding-left:9px; border-left:1px solid rgba(93,49,8,.35); white-space:nowrap; }
.anchor-ticker-summary small { color:#5d3108; font-size:8px; font-weight:900; letter-spacing:.55px; }
.anchor-ticker-summary b { min-width:0; padding:2px 5px; color:#fff7d0; background:#8d4608; }
.anchor-ticker-window { min-width:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.anchor-ticker-track { --ticker-duration:72s; width:max-content; min-width:100%; display:flex; align-items:center; white-space:nowrap; animation:anchorTickerFlow var(--ticker-duration) linear infinite; will-change:transform; }
.anchor-ticker-track.is-empty { width:100%; animation:none; }
.anchor-ticker-window:hover .anchor-ticker-track { animation-play-state:paused; }
.anchor-ticker-set { display:flex; align-items:center; flex:0 0 auto; }
.anchor-ticker-item { display:inline-flex; align-items:center; gap:6px; padding:0 18px; color:#f5fdff; font-size:11px; font-weight:800; letter-spacing:.35px; }
.anchor-ticker-item:after { content:""; width:4px; height:4px; margin-left:18px; border-radius:50%; background:#2eeeff; box-shadow:0 0 8px #2eeeff; }
.anchor-ticker-item .anchor-icon { color:#ffd34d; font-size:15px; filter:drop-shadow(0 0 5px rgba(255,211,77,.52)); }
.anchor-ticker-item time { color:#ffd983; font-variant-numeric:tabular-nums; }
.anchor-ticker-item.is-long-stay time { color:#ffb347; text-shadow:0 0 8px rgba(255,154,55,.28); }
.anchor-ticker-empty { margin:auto; padding:0 18px; color:#7fa6b1; font-size:10px; font-weight:800; letter-spacing:.8px; }
.ticker-clock { min-width:132px; padding:0 12px; text-align:right; border-left:1px solid #1b5365; }
.ticker-clock b,.ticker-clock small { display:block; }
.ticker-clock b { font-size:10px; }
.ticker-clock small { color:var(--muted); font-size:8px; }
@keyframes anchorTickerFlow { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.workspace { position:relative; flex:none; height:calc(100vh - 110px); min-height:540px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:8px; transition:grid-template-columns .24s ease,gap .24s ease; }
.controls { min-width:0; min-height:0; overflow-y:auto; padding:12px; background:linear-gradient(180deg,rgba(5,37,52,.99),rgba(2,14,24,.99)); scrollbar-color:#2384a0 #04131d; transition:opacity .16s ease,padding .24s ease,border-width .24s ease; }
.workspace.controls-collapsed { grid-template-columns:minmax(0,1fr)!important; gap:0; }
.workspace.controls-collapsed .controls { display:none; }
.control-brand { display:flex; align-items:center; gap:9px; margin-bottom:9px; padding-right:24px; }
.control-brand>span { width:36px; height:36px; display:grid; place-items:center; flex:0 0 36px; border:1px solid var(--cyan); color:var(--cyan); background:rgba(46,238,255,.08); font-size:11px; font-weight:900; letter-spacing:.8px; }
.control-brand strong,.control-brand small { display:block; }
.control-brand strong { font-size:12px; letter-spacing:1.15px; }
.control-brand small { color:#74a9b6; font-size:8px; }
.surface-summary { margin:9px 0 12px; padding:9px 10px; border-left:3px solid var(--cyan); background:linear-gradient(90deg,rgba(8,46,60,.92),rgba(3,22,30,.88)); }
.surface-summary>span,.surface-summary>strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.surface-summary>span { color:var(--cyan); font-size:8px; font-weight:900; letter-spacing:.9px; }
.surface-summary>strong { margin-top:2px; font-size:12px; }
.eyebrow,.section-title,.readout span { color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:1.4px; }
h1 { margin:4px 0 10px; font-size:24px; }
.warning { margin:0 0 22px; padding:8px; border:1px solid #d68a24; background:linear-gradient(90deg,rgba(95,48,7,.8),rgba(48,28,7,.76)); color:#ffe6a3; box-shadow:inset 3px 0 var(--amber),0 0 14px rgba(255,211,77,.12); font-weight:800; font-size:10px; letter-spacing:.7px; }
.controls>label { display:block; margin:0 0 12px; color:#b9d0d7; font-weight:600; }
output { float:right; color:var(--text); }
input[type="range"] { width:100%; margin-top:8px; accent-color:var(--cyan); }
.toggles { display:grid; grid-template-columns:1fr 1fr; gap:9px 7px; padding:12px; border:1px solid #24586b; background:linear-gradient(145deg,#071820,#09232d); box-shadow:inset 0 0 28px rgba(31,167,190,.05); }
.toggles label { color:#c7dce2; font-size:11px; white-space:nowrap; }
.toggles input { accent-color:var(--cyan); }
.toggles .wave-effect-control { grid-column:1/-1; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px; padding-top:8px; border-top:1px solid #1f4d5d; }
.wave-effect-control span { color:#e0f4f7; font-weight:800; letter-spacing:.25px; }
.wave-effect-control select { min-width:0; padding:6px 7px; color:#dffcff; border-color:#2d6f82; background:#04131b; font-size:10px; }
.depth-settings { margin-top:9px; border:1px solid #28586a; background:linear-gradient(145deg,#071820,#09232d); }
.depth-settings summary { padding:10px 11px; color:#a7dce3; cursor:pointer; font-size:9px; font-weight:900; letter-spacing:1.15px; list-style:none; }
.depth-settings summary::-webkit-details-marker { display:none; }
.depth-settings summary:after { content:"＋"; float:right; color:#63bfcc; }
.depth-settings[open] summary:after { content:"−"; }
.depth-profile { display:grid; gap:4px; padding:0 8px 8px; }
.depth-profile label { --depth-color:#53d6df; display:grid; grid-template-columns:8px minmax(0,1fr) 55px 11px; align-items:center; gap:7px; min-height:34px; padding:4px 6px; border:1px solid rgba(73,128,143,.25); background:rgba(2,16,22,.5); }
.depth-profile label>i { width:8px; height:24px; background:var(--depth-color); box-shadow:0 0 9px color-mix(in srgb,var(--depth-color) 70%,transparent); }
.depth-profile label>span { min-width:0; color:#e5f6f8; font-size:10px; font-weight:800; text-transform:uppercase; }
.depth-profile label small { display:block; color:#7099a4; font-size:7px; font-weight:600; text-transform:none; }
.depth-profile input { width:55px; padding:5px 4px; color:#f4ffff; background:#04141b; border:1px solid color-mix(in srgb,var(--depth-color) 62%,#224755); text-align:right; font:700 11px "Segoe UI",Arial,sans-serif; outline:none; }
.depth-profile input:focus { box-shadow:0 0 0 2px color-mix(in srgb,var(--depth-color) 34%,transparent); }
.depth-profile label>b { color:#759ca7; font-size:8px; }
.depth-profile .shallow{--depth-color:#e14630}.depth-profile .alert{--depth-color:#f4a934}.depth-profile .limit{--depth-color:#a4d543}.depth-profile .safe{--depth-color:#26b88e}.depth-profile .deep{--depth-color:#204891}
.depth-profile-status { display:block; padding:0 10px 9px; color:#608b97; font-size:8px; letter-spacing:.25px; }
.navigation-settings { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; padding:10px; border:1px solid #183f4f; background:#06151d; }
.navigation-settings label { color:#8fb3be; font-size:10px; font-weight:700; }
.navigation-settings select { margin-top:5px; padding:7px; font-size:10px; }
.track-speed-legend { grid-column:1/-1; display:flex; align-items:center; gap:7px; padding-top:8px; border-top:1px solid #183f4f; color:#7fa7b3; font-size:8px; font-weight:800; white-space:nowrap; }
.track-speed-legend strong { margin-right:auto; color:#b8d9e0; font-size:8px; letter-spacing:.7px; }
.track-speed-legend span { display:inline-flex; align-items:center; gap:3px; }
.track-speed-legend i { width:7px; height:7px; border-radius:50%; background:var(--speed-color); box-shadow:0 0 6px color-mix(in srgb,var(--speed-color) 60%,transparent); }
.track-speed-legend .slow{--speed-color:#246bfe}.track-speed-legend .harbour{--speed-color:#12d8c4}.track-speed-legend .cruise{--speed-color:#63e65f}.track-speed-legend .fast{--speed-color:#ffd43b}.track-speed-legend .very-fast{--speed-color:#ff4d62}
.label-density,.render-quality,.surface-style { display:block; margin:8px 0 0; padding:8px 10px; color:#8fb3be; background:#06151d; border:1px solid #183f4f; font-size:9px; font-weight:800; letter-spacing:.35px; }
.label-density select,.render-quality select,.surface-style select { margin-top:5px; padding:7px; font-size:10px; }
.render-quality { border-color:#295b6d; background:linear-gradient(135deg,#06151d,#09232d); }
.render-quality select { color:#dffcff; border-color:#347183; }
.surface-style { border-color:#276e60; background:linear-gradient(135deg,#061a1b,#082a29); }
.surface-style select { color:#dbfff5; border-color:#358775; }
.surface-style small { display:block; min-height:12px; margin-top:5px; color:#6fa99d; font-size:8px; line-height:1.35; }
.surface-style small.is-ready { color:#6df4be; }
.surface-style small.is-error { color:#ffad86; }
.ais-legend { display:grid; grid-template-columns:1fr 1fr; gap:5px 9px; margin-top:9px; color:#9ab8c2; font-size:9px; text-transform:uppercase; }
.ais-legend span:before { content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--icon-color); box-shadow:0 0 7px var(--icon-color); }
.ais-legend .cargo{--icon-color:#29f2a3}.ais-legend .tanker{--icon-color:#ff4f79}.ais-legend .passenger{--icon-color:#35c7ff}.ais-legend .fishing{--icon-color:#ffd24a}.ais-legend .service{--icon-color:#ff9f43}.ais-legend .other{--icon-color:#a6b6ff}
.ais-status-legend { display:grid; grid-template-columns:1fr 1fr; gap:4px 7px; margin-top:7px; padding:7px; border:1px solid #224b5b; background:#06151d; color:#9ebbc4; font-size:8px; text-transform:uppercase; }
.ais-status-legend span { display:flex; align-items:center; gap:5px; min-width:0; }
.ais-status-legend i { width:17px; height:17px; display:grid; place-items:center; flex:0 0 17px; border:1px solid currentColor; border-radius:50%; font-style:normal; font-size:8px; font-weight:900; }
.ais-status-legend .underway{color:#55e5ff}.ais-status-legend .anchor{color:#ffc857}.ais-status-legend .moored{color:#6ca8ff}.ais-status-legend .restricted{color:#ff5bce}.ais-status-legend .fishing-status{color:#ffe45c}.ais-status-legend .unknown{color:#98a9af}
.section-title { margin:22px 0 9px; }
.coordinate-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.coordinate-grid label { color:var(--muted); font-size:10px; }
.coordinate-grid input { width:100%; margin-top:4px; padding:8px; color:var(--text); background:#06151d; border:1px solid #285264; }
.region-label { float:none!important; }
select { width:100%; margin-top:7px; padding:9px; color:var(--text); background:#06151d; border:1px solid #285264; }
.source-card { margin:10px 0; padding:10px; border:1px solid #1e4d5e; background:#071820; }
.source-card b,.source-card small { display:block; }
.source-card b { color:#86f0d0; font-size:11px; }
.source-card small { margin-top:3px; color:var(--muted); font-size:10px; }
.source-card.error b { color:#ff9a80; }
.manual-center { margin-top:10px; color:var(--muted); }
.manual-center summary { cursor:pointer; font-size:10px; letter-spacing:.5px; }
button { width:100%; margin-top:10px; padding:10px; border:1px solid var(--cyan); color:#011017; background:linear-gradient(110deg,var(--cyan),#68f7d2); box-shadow:0 0 14px rgba(46,238,255,.18); font-weight:900; letter-spacing:.7px; cursor:pointer; }
button:hover { filter:brightness(1.14); box-shadow:0 0 22px rgba(46,238,255,.34); }
button.secondary { color:#bdebf2; background:rgba(14,67,84,.22); border-color:#2b7890; box-shadow:none; }
.readout { margin-top:16px; padding:12px; border-left:3px solid var(--cyan); background:linear-gradient(90deg,rgba(6,35,47,.95),rgba(2,20,29,.9)); box-shadow:inset 0 0 18px rgba(46,238,255,.04),0 0 12px rgba(46,238,255,.06); }
.readout span,.readout strong,.readout small { display:block; }
.readout strong { margin:3px 0; font-size:23px; }
.readout small { color:var(--muted); }
.viewport-panel { min-width:0; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.controls-toggle { width:28px; height:30px; min-width:28px; margin:0; padding:0; display:grid; place-items:center; color:#aeeff3; background:#08232d; border:1px solid #39788a; border-radius:3px; font-size:22px; line-height:1; }
.controls-toggle:hover { color:#041116; background:var(--cyan); }
.controls-toggle span { width:9px; height:9px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; font-size:0; transform:rotate(45deg); transition:transform .2s ease; }
.controls-toggle:after { content:""; }
.controls-dock-toggle { position:absolute; z-index:12; left:265px; top:6px; box-shadow:0 0 16px rgba(46,238,255,.22); transition:left .24s ease,width .2s ease; }
.workspace.controls-collapsed .controls-toggle { width:76px; min-width:76px; display:flex; align-items:center; justify-content:center; gap:8px; }
.workspace.controls-collapsed .controls-dock-toggle { left:8px; }
.workspace.controls-collapsed .controls-toggle:after { content:"AYARLAR"; font-size:7px; font-weight:900; letter-spacing:.8px; }
.workspace.controls-collapsed .controls-toggle span { transform:rotate(225deg); }
.legend { display:flex; align-items:center; gap:5px; margin-top:7px; color:var(--muted); font-size:8px; }
.legend i { width:14px; height:5px; margin-left:7px; }
.legend .shallow { background:#e65338; }.legend .mid { background:#6bca62; }.legend .deep { background:#1e65a8; }
.seamark-layer-status { display:block; margin:5px 0 9px; padding:5px 7px; color:#a8f8ff; background:rgba(7,52,64,.56); border-left:2px solid #5ceaff; font-size:6.5px; font-weight:800; letter-spacing:.45px; }
.seamark-layer-status.is-error { color:#ffd39d; border-left-color:#ff9d55; background:rgba(74,41,16,.48); }
.viewport { flex:1 1 0; min-height:0; position:relative; overflow:hidden; cursor:grab; background:radial-gradient(circle at 50% 35%,#14627a,#020d16 72%); }
.viewport:after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:radial-gradient(ellipse at 52% 43%,transparent 42%,rgba(0,16,23,.08) 70%,rgba(0,8,13,.34) 100%); box-shadow:inset 0 0 74px rgba(0,8,13,.22); }
.viewport:active { cursor:grabbing; }
.viewport canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.ship-label-layer { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.ship-label-layer[hidden] { display:none; }
.airport-label-layer { position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none; }
.airport-marker[hidden] { display:none; }
.airport-marker { --airport:#ffd34d; --airport-anchor-x:-13.5px; position:absolute; left:0; top:0; width:auto; min-width:0; margin:0; padding:0; display:flex; align-items:center; gap:5px; color:#f8ffff; background:transparent; border:0; box-shadow:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.7)); pointer-events:auto; transform-origin:50% 100%; }
.airport-marker.is-label-left { --airport-anchor-x:calc(-100% + 13.5px); flex-direction:row-reverse; }
.airport-marker:hover { filter:brightness(1.12) drop-shadow(0 0 9px rgba(255,211,77,.55)); box-shadow:none; }
.airport-marker-icon { position:relative; width:27px; height:27px; display:grid; place-items:center; flex:0 0 27px; color:#09131a; background:linear-gradient(145deg,#fff4ad,var(--airport)); border:2px solid #fff8d6; border-radius:50%; box-shadow:0 0 0 2px rgba(3,21,28,.9),0 0 15px rgba(255,211,77,.62); font-size:15px; line-height:1; }
.airport-marker-icon:after { content:""; position:absolute; left:50%; bottom:-9px; width:2px; height:8px; background:var(--airport); box-shadow:0 0 7px var(--airport); transform:translateX(-50%); }
.airport-marker-text { min-width:0; max-width:125px; padding:4px 7px; text-align:left; background:linear-gradient(90deg,rgba(4,27,36,.96),rgba(3,18,27,.91)); border:1px solid rgba(255,211,77,.76); border-left:3px solid var(--airport); box-shadow:0 0 12px rgba(255,211,77,.13); }
.airport-marker-text strong,.airport-marker-text small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.airport-marker-text strong { color:#fff9d7; font-size:7px; letter-spacing:.35px; }
.airport-marker-text small { margin-top:1px; color:#9ed4de; font-size:6px; letter-spacing:.55px; }
.airport-marker.is-label-left .airport-marker-text { text-align:right; border-left-width:1px; border-right:3px solid var(--airport); }
.seamark-label-layer { position:absolute; inset:0; z-index:4; overflow:hidden; pointer-events:none; }
.seamark-label-layer[hidden],.seamark-marker[hidden] { display:none; }
.seamark-marker { --seamark-color:#5ceaff; position:absolute; left:0; top:0; width:14px; height:14px; min-width:14px; margin:0; padding:0; display:grid; place-items:center; color:#f6ffff; background:transparent; border:0; border-radius:50%; box-shadow:none; pointer-events:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.seamark-marker:hover { z-index:20!important; filter:brightness(1.24) drop-shadow(0 0 5px var(--seamark-color)); box-shadow:none; }
.seamark-marker-icon { width:6px; height:6px; display:block; background:var(--seamark-color); border:1px solid rgba(1,14,20,.94); border-radius:50%; box-shadow:0 0 3px color-mix(in srgb,var(--seamark-color) 60%,transparent); }
.seamark-marker.is-buoy_cardinal .seamark-marker-icon,.seamark-marker.is-beacon_cardinal .seamark-marker-icon { border-radius:1px; transform:rotate(45deg); }
.seamark-marker.is-buoy_special_purpose .seamark-marker-icon { border-radius:1px; }
.seamark-marker.is-buoy_isolated_danger .seamark-marker-icon { background:#ff394d; border-color:#050505; box-shadow:0 0 0 1px #ffdb54; }
.seamark-marker.is-lighthouse .seamark-marker-icon { width:7px; height:7px; background:#fff09b; border-color:#7b5b00; box-shadow:0 0 6px #ffe064; }
.seamark-marker-text { position:absolute; left:50%; bottom:13px; display:none; width:max-content; max-width:180px; padding:4px 6px; overflow:hidden; color:#eaffff; background:rgba(3,22,30,.96); border:1px solid color-mix(in srgb,var(--seamark-color) 62%,#173743); border-left:2px solid var(--seamark-color); font-size:7px; font-weight:800; letter-spacing:.2px; text-overflow:ellipsis; white-space:nowrap; transform:translateX(-50%); box-shadow:0 4px 10px rgba(0,0,0,.46); pointer-events:none; }
.seamark-marker:hover .seamark-marker-text,.seamark-marker:focus-visible .seamark-marker-text { display:block; }
.ship-label { --ship-color:#53d6df; position:absolute; left:0; top:0; display:flex; align-items:center; gap:4px; min-width:0; max-width:132px; padding:3px 6px 3px 3px; transform-origin:50% 100%; color:#eefcff; background:rgba(5,35,45,.84); border:1px solid rgba(205,244,247,.42); border-left:3px solid var(--ship-color); border-radius:6px; box-shadow:0 2px 7px rgba(0,10,16,.44); backdrop-filter:blur(3px); text-shadow:0 1px 2px rgba(0,0,0,.82); }
.ship-label { pointer-events:auto; cursor:pointer; }
.ship-label.is-selected { max-width:160px; padding:3px 7px 3px 3px; gap:4px; border-color:#fff; border-radius:6px; background:color-mix(in srgb,var(--ship-color) 42%,rgba(8,43,53,.82)); box-shadow:0 0 0 2px color-mix(in srgb,var(--ship-color) 38%,transparent),0 0 14px var(--ship-color); }
.ship-label:after { content:""; position:absolute; left:50%; bottom:-3px; width:1px; height:3px; background:var(--ship-color); opacity:.52; }
.ship-flag { position:relative; display:block; flex:0 0 21px; width:21px; height:14px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.ship-flag:before { content:""; position:absolute; z-index:2; left:0; top:0; width:1px; height:14px; border-radius:1px; background:#e7f5f6; }
.ship-flag img,.ship-flag:after { position:absolute; left:2px; top:0; width:19px; height:12px; border:1px solid rgba(255,255,255,.72); object-fit:cover; box-shadow:0 1px 2px rgba(0,0,0,.45); clip-path:polygon(0 0,100% 0,90% 50%,100% 100%,0 100%); }
.ship-flag img { display:block; }
.ship-flag:after { content:""; display:none; background:linear-gradient(135deg,#7e9298,#dce5e7); }
.ship-flag.is-unknown:after { display:block; }
.ship-label strong,.ship-label small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ship-label strong { max-width:94px; color:#f7ffff; font-size:10px; line-height:1.1; letter-spacing:.12px; text-transform:uppercase; }
.ship-label small { display:none; color:#c5e4e9; font-size:9px; letter-spacing:.2px; }
.ship-label.is-selected { flex-wrap:wrap; }
.ship-label.is-selected strong { max-width:120px; font-size:11px; }
.ship-label.is-selected small { display:block; flex-basis:100%; margin:-1px 0 0 25px; }
.ship-label.is-name-chip:hover { z-index:6!important; border-color:rgba(232,255,255,.7); background:rgba(9,54,65,.9); }
.ship-label.is-flag-only { width:25px; max-width:25px; min-width:25px; padding:1px; gap:0; border-radius:4px; background:rgba(5,34,43,.78); }
.ship-label.is-flag-only strong,.ship-label.is-flag-only small { display:none!important; }
.ship-label.is-flag-only .ship-flag { margin:auto; }
.ship-label.is-flag-only:hover { border-color:#e8ffff; filter:brightness(1.16); }
.ais-detail[hidden] { display:none; }
.ais-detail { position:absolute; z-index:8; top:12px; right:14px; width:282px; padding:0 12px 12px; color:#eaf9fb; background:linear-gradient(155deg,rgba(8,39,50,.94),rgba(4,22,30,.91)); border:1px solid #3a788b; box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 24px rgba(66,211,222,.1); backdrop-filter:blur(10px); }
.ais-detail>header { height:34px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #275464; color:var(--cyan); font-size:9px; font-weight:900; letter-spacing:1.3px; }
.ais-detail>header button { width:26px; height:26px; margin:0; padding:0; border:0; color:#b9d8df; background:transparent; font-size:20px; font-weight:400; }
.ais-detail>header button:hover { color:#fff; background:rgba(83,214,223,.15); }
.ais-detail-identity { display:flex; align-items:center; gap:10px; padding:13px 0 11px; }
.ais-detail-identity>div { min-width:0; }
.ais-detail-identity strong,.ais-detail-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ais-detail-identity strong { font-size:15px; letter-spacing:.45px; }
.ais-detail-identity small { margin-top:2px; color:#8fb5c0; font-size:9px; }
.ais-detail-flag { flex-basis:36px; width:36px; height:27px; }
.ais-detail-flag:before { left:1px; width:2px; height:27px; }
.ais-detail-flag img,.ais-detail-flag:after { left:4px; width:32px; height:22px; }
.ais-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ais-detail-grid div,.ais-detail-status { padding:7px 8px; background:rgba(16,63,76,.5); border:1px solid rgba(89,151,166,.28); }
.ais-detail-grid span,.ais-detail-status span { display:block; color:#78a8b4; font-size:7px; font-weight:800; letter-spacing:.75px; text-transform:uppercase; }
.ais-detail-grid b { display:block; margin-top:2px; font-size:10px; font-weight:700; }
.ais-detail-status { margin-top:6px; }
.ais-detail-status strong { display:block; margin-top:3px; color:#eaf9fb; font-size:10px; }
.viewport-panel.detail-open:not(.fleet-open) .north { right:314px; }
.scene-badges { position:absolute; top:14px; left:50%; z-index:4; display:flex; gap:5px; transform:translateX(-50%); pointer-events:none; }
.scene-badges span { padding:5px 8px; color:#d9fbff; background:rgba(2,20,29,.9); border:1px solid #2b8aa2; font-size:8px; font-weight:800; letter-spacing:.8px; box-shadow:0 5px 16px rgba(0,0,0,.28),0 0 12px rgba(46,238,255,.1); }
.live-dot { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#29f2a3; box-shadow:0 0 8px #29f2a3; animation:livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity:.38; transform:scale(.75); } }
.help { position:absolute; left:14px; bottom:12px; padding:7px 10px; background:rgba(3,13,18,.78); color:#8fb2bd; border:1px solid #1e4453; font-size:10px; }
.north { position:absolute; right:18px; top:14px; width:36px; height:36px; margin:0; padding:0; display:grid; place-items:center; border:1px solid var(--cyan); border-radius:50%; color:var(--cyan); background:rgba(3,16,22,.9); font-weight:900; z-index:4; }
.north:before { content:""; position:absolute; top:-7px; border:5px solid transparent; border-bottom-color:var(--cyan); }
.view-switch { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-top:7px; padding:4px; border:1px solid #2383a0; background:rgba(2,16,25,.94); box-shadow:0 0 18px rgba(46,238,255,.1); }
.view-switch button { width:100%; min-width:0; margin:0; padding:7px 5px; border:1px solid #163b4b; color:#8fb5c1; background:transparent; font-size:9px; }
.view-switch button[aria-pressed="true"] { color:#011017; background:linear-gradient(110deg,var(--cyan),#65f5cf); box-shadow:0 0 16px rgba(46,238,255,.36); }
.view-switch #toggleFullscreen { min-width:0; }
.north:hover { color:#041116; background:var(--cyan); }
.fleet-table-panel[hidden] { display:none; }
.fleet-table-panel { --fleet-width:238px; position:absolute; z-index:7; top:12px; right:12px; bottom:12px; width:var(--fleet-width); display:flex; flex-direction:column; overflow:hidden; color:#e9fcff; background:linear-gradient(180deg,rgba(3,27,39,.98),rgba(1,12,20,.97)); border:1px solid #28a6c2; box-shadow:0 18px 42px rgba(0,0,0,.5),0 0 24px rgba(46,238,255,.14),inset 0 1px rgba(111,244,255,.13); backdrop-filter:blur(8px); }
.fleet-table-panel>header { flex:0 0 42px; display:flex; align-items:center; justify-content:space-between; padding:5px 7px 5px 10px; border-bottom:1px solid #2487a0; background:linear-gradient(100deg,#073448,#061c2b 60%,#0b3e4a); }
.fleet-table-panel>header strong,.fleet-table-panel>header small { display:block; }
.fleet-table-panel>header strong { color:#bdf9fd; font-size:9px; letter-spacing:1px; }
.fleet-table-panel>header small { margin-top:2px; color:#6f9da8; font-size:7px; letter-spacing:.5px; }
.fleet-table-panel>header button { width:28px; height:28px; margin:0; padding:0; border:0; color:#9dc7d0; background:transparent; font-size:20px; }
.fleet-table-head,.fleet-table-row { display:grid; grid-template-columns:18px minmax(51px,1.2fr) 40px 24px 26px minmax(36px,.85fr); align-items:center; gap:2px; }
.fleet-table-head { flex:0 0 28px; padding:0 6px; color:#8eeef5; background:#031722; border-bottom:1px solid #246d83; font-size:6px; font-weight:900; letter-spacing:.45px; }
.fleet-table-head button { width:auto; min-width:0; margin:0; padding:0; overflow:hidden; color:inherit; background:transparent; border:0; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:6px; letter-spacing:.35px; }
.fleet-table-head button:hover,.fleet-table-head button[aria-sort] { color:#9ff7fd; background:transparent; }
.fleet-table-body { min-height:0; flex:1 1 auto; overflow:auto; scrollbar-width:none; scrollbar-color:#2e6b7b #061820; }
.fleet-table-body::-webkit-scrollbar { width:0; height:0; }
.fleet-table-row { --status-color:#53d6df; min-height:31px; padding:3px 5px; border-bottom:1px solid rgba(47,93,105,.28); background:rgba(6,25,33,.5); cursor:pointer; font-size:6.5px; }
.fleet-table-row:nth-child(even) { background:rgba(12,39,48,.48); }
.fleet-table-row.is-nuc { position:sticky; top:var(--nuc-top,0); z-index:6; color:#fff; background:linear-gradient(90deg,rgba(112,4,18,.98),rgba(50,8,16,.98)); border-top:1px solid #ff6678; border-bottom:1px solid #ff334f; box-shadow:inset 3px 0 #ff263f,0 3px 12px rgba(255,20,49,.32); }
.fleet-table-row.is-nuc .fleet-status { color:#fff; font-weight:900; text-shadow:0 0 5px #ff5b6e; }
.fleet-table-row.is-nuc .fleet-status:before { content:"● "; color:#ff3049; animation:nucPulse 1.15s ease-in-out infinite; }
@keyframes nucPulse { 50% { color:#fff; text-shadow:0 0 8px #ff203d; } }
.fleet-table-row:hover,.fleet-table-row.is-highlighted { position:relative; z-index:1; background:color-mix(in srgb,var(--status-color) 24%,#082733); box-shadow:inset 3px 0 var(--status-color),0 0 15px color-mix(in srgb,var(--status-color) 22%,transparent); }
.fleet-table-row.is-selected { background:color-mix(in srgb,var(--status-color) 30%,#09212a); box-shadow:inset 3px 0 #fff,0 0 12px color-mix(in srgb,var(--status-color) 25%,transparent); }
.fleet-table-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fleet-table-row .fleet-name { color:#effdff; font-size:7px; font-weight:800; }
.fleet-table-row .fleet-status { color:var(--status-color); font-weight:900; }
.fleet-table-row .fleet-speed,.fleet-table-row .fleet-course { text-align:right; font-variant-numeric:tabular-nums; }
.fleet-table-row .fleet-destination { color:#86aab3; }
.fleet-table-row .ship-flag { transform:scale(.78); transform-origin:left center; }
.fleet-focus-line { position:absolute; z-index:3; left:0; right:0; top:calc(50% + 35px); height:33px; transform:translateY(-50%); pointer-events:none; border-top:1px solid rgba(106,242,251,.92); border-bottom:1px solid rgba(106,242,251,.92); background:linear-gradient(90deg,rgba(83,214,223,.05),rgba(83,214,223,.17),rgba(83,214,223,.05)); box-shadow:inset 0 0 14px rgba(83,214,223,.08),0 0 16px rgba(83,214,223,.13); }
.fleet-focus-line span { position:absolute; right:5px; top:-10px; padding:1px 4px; color:#a9fbff; background:#07232c; border:1px solid rgba(83,214,223,.58); font-size:6px; font-weight:900; letter-spacing:.7px; }
.fleet-map-indicator[hidden] { display:none; }
.fleet-map-indicator { --status-color:#53d6df; position:absolute; z-index:6; width:22px; height:22px; transform:translate(-50%,-50%); pointer-events:none; filter:drop-shadow(0 0 7px var(--status-color)); }
.fleet-map-indicator:before,.fleet-map-indicator:after,.fleet-map-indicator>span { content:""; position:absolute; inset:0; border:2px solid var(--status-color); border-radius:50%; }
.fleet-map-indicator:before { animation:fleetMapPulse 1.5s ease-out infinite; }
.fleet-map-indicator:after { inset:5px; border-width:1px; background:color-mix(in srgb,var(--status-color) 34%,transparent); }
.fleet-map-indicator>span:before,.fleet-map-indicator>span:after { content:""; position:absolute; left:50%; top:50%; background:var(--status-color); transform:translate(-50%,-50%); }
.fleet-map-indicator>span:before { width:30px; height:1px; }
.fleet-map-indicator>span:after { width:1px; height:30px; }
.fleet-map-indicator b { position:absolute; left:27px; top:1px; max-width:112px; overflow:hidden; padding:3px 6px; color:#f5ffff; background:rgba(4,25,32,.9); border:1px solid var(--status-color); text-overflow:ellipsis; white-space:nowrap; font-size:7px; letter-spacing:.35px; }
.fleet-map-indicator.is-right-edge b { left:auto; right:27px; text-align:right; }
@keyframes fleetMapPulse { from { opacity:.95; transform:scale(.72); } to { opacity:0; transform:scale(2.25); } }
.viewport-panel.fleet-open .overview-map-panel,.viewport-panel.fleet-open .view-readout { right:264px; }
.viewport-panel.fleet-open .ais-detail { left:14px; right:auto; top:122px; }
.viewport-panel.fleet-open .north { right:264px; }
.viewport-panel.fleet-open .help { display:none; }
.overview-map-panel[hidden] { display:none!important; }
.overview-map-panel { position:absolute; right:14px; bottom:48px; z-index:6; width:192px; padding:5px; border:1px solid #2b6578; background:rgba(3,16,22,.94); box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 18px rgba(46,238,255,.08); backdrop-filter:blur(4px); }
.overview-map-panel header { display:flex; align-items:center; gap:6px; min-height:18px; margin:0 1px 4px; color:#78a9b5; font-size:6px; font-weight:800; letter-spacing:.45px; }
.overview-map-panel header strong { color:#c7edf1; font-size:7px; letter-spacing:.7px; }
.overview-map-panel header>span { min-width:0; flex:1 1 auto; overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.overview-map-panel:not(.is-expanded) header>span { display:none; }
.overview-measure-readout { color:#ffe07a!important; font-variant-numeric:tabular-nums; }
.overview-map-actions { display:flex; flex:0 0 auto; gap:3px; }
.overview-map-actions button { width:auto; min-width:0; height:18px; margin:0; padding:1px 4px; color:#9dd6df; background:#071c26; border:1px solid #2a6576; box-shadow:none; font-size:6px; letter-spacing:.3px; }
.overview-map-actions #closeOverviewMap { width:18px; padding:0; font-size:13px; line-height:1; }
.overview-map-actions button[aria-pressed="true"] { color:#031116; background:#ffe071; border-color:#ffe071; }
.overview-map-panel canvas { display:block; width:100%; height:108px; border:1px solid rgba(119,204,214,.32); background:#071820; cursor:crosshair; image-rendering:auto; }
.overview-map-panel canvas:hover { border-color:var(--cyan); box-shadow:0 0 10px rgba(73,215,225,.2); }
.overview-map-panel canvas.is-panning { cursor:grabbing; }
.overview-map-panel canvas.is-measuring { cursor:crosshair; box-shadow:inset 0 0 0 1px #ffe071,0 0 12px rgba(255,224,113,.2); }
.overview-map-panel.is-expanded { left:14px; right:14px; top:56px; bottom:48px; width:auto; display:flex; flex-direction:column; padding:7px; background:rgba(2,13,20,.97); box-shadow:0 18px 52px rgba(0,0,0,.62),0 0 28px rgba(46,238,255,.14); }
.viewport-panel.fleet-open .overview-map-panel.is-expanded { right:264px; }
.overview-map-panel.is-expanded header { min-height:24px; margin-bottom:6px; }
.overview-map-panel.is-expanded header strong { color:#bdfaff; font-size:10px; }
.overview-map-panel.is-expanded header>span { font-size:8px; }
.overview-map-panel.is-expanded .overview-map-actions button { height:22px; padding-inline:7px; font-size:7px; }
.overview-map-panel.is-expanded canvas { flex:1 1 auto; min-height:0; height:100%; }
.view-readout { position:absolute; right:14px; bottom:12px; z-index:4; padding:7px 10px; color:#a9c9d2; background:rgba(3,13,18,.82); border:1px solid #1e4453; font-size:10px; letter-spacing:.35px; }
.tooltip { position:absolute; z-index:5; pointer-events:none; padding:7px 9px; color:#dff8fa; background:#041218; border:1px solid #3a7182; font-size:11px; }
footer { min-height:36px; display:flex; align-items:center; justify-content:space-between; padding:8px 12px; color:#7397a3; font-size:10px; letter-spacing:.4px; }
body.bathy-fullscreen,body.bathy-focus-mode { overflow:hidden; background:#000; }
body.bathy-fullscreen .shell,body.bathy-focus-mode .shell { height:100vh; min-height:0; padding:0; gap:0; }
body.bathy-fullscreen .controls,body.bathy-fullscreen footer,
body.bathy-focus-mode .controls,body.bathy-focus-mode footer { display:none; }
body.bathy-fullscreen .workspace,body.bathy-focus-mode .workspace { flex:1 1 auto; height:auto; min-height:0; grid-template-columns:minmax(0,1fr)!important; gap:0; }
body.bathy-fullscreen .viewport-panel,body.bathy-focus-mode .viewport-panel { border:0; }
body.bathy-fullscreen .controls-toggle,body.bathy-focus-mode .controls-toggle { display:none; }
body.bathy-fullscreen .fleet-table-panel,body.bathy-focus-mode .fleet-table-panel { top:12px; bottom:12px; }
body.bathy-fullscreen .north,body.bathy-focus-mode .north { top:14px; }
body.bathy-fullscreen .scene-badges,body.bathy-focus-mode .scene-badges { top:14px; }
body.bathy-fullscreen .overview-map-panel.is-expanded,body.bathy-focus-mode .overview-map-panel.is-expanded { top:56px; }
@media(max-width:1200px){
  .workspace{grid-template-columns:264px minmax(0,1fr)}.controls{padding:10px}.controls-dock-toggle{left:231px}.scene-badges span:nth-child(n+2){display:none}
  .fleet-table-panel{--fleet-width:226px}.viewport-panel.fleet-open .overview-map-panel,.viewport-panel.fleet-open .view-readout{right:252px}.viewport-panel.fleet-open .ais-detail{left:14px;right:auto}.viewport-panel.fleet-open .north{right:252px}
}
@media(max-width:960px){
  .shell{padding:8px;gap:8px}
  .ticker-clock{display:none}.anchor-ticker-bar{grid-template-columns:auto minmax(0,1fr)}.anchor-ticker-summary{display:none}
  .workspace{height:calc(100vh - 66px);min-height:500px;grid-template-columns:230px minmax(0,1fr);gap:7px}
  .controls-dock-toggle{left:197px}
  .overview-map-panel{width:156px}.overview-map-panel canvas{height:88px}
  .controls{padding:10px}.controls h1{font-size:18px}.warning{margin-bottom:12px}
  .toggles{grid-template-columns:1fr;padding:9px}.navigation-settings{grid-template-columns:1fr}
  .legend{display:none}
  .fleet-table-panel{top:12px;--fleet-width:218px}.viewport-panel.fleet-open .overview-map-panel{display:none}.viewport-panel.fleet-open .view-readout{right:244px}.viewport-panel.fleet-open .ais-detail{left:14px;right:auto;top:64px}.viewport-panel.fleet-open .north{right:244px}
  .viewport-panel.fleet-open .overview-map-panel.is-expanded{display:flex;right:244px}
  footer{display:none}
}
@media(prefers-reduced-motion:reduce){.fleet-map-indicator:before{animation-duration:2.6s}.anchor-ticker-track{animation:none;justify-content:center}.anchor-ticker-set+.anchor-ticker-set{display:none}}