:root {
  color-scheme: dark;
  --bg: #07131b;
  --panel: rgba(8, 27, 37, .94);
  --panel-strong: #0a202b;
  --line: #1c4657;
  --muted: #88a7b4;
  --text: #f5fbfd;
  --cyan: #19c8ec;
  --green: #13d99b;
  --amber: #f5ad2f;
  --red: #ff5570;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
button, input { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

.replay-shell {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: var(--replay-shell-height, 100%);
  max-height: var(--replay-shell-height, 100%);
  min-height: 0;
  overflow: hidden;
}

.replay-toolbar {
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(200px, .65fr) minmax(500px, 1.65fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 4px 9px;
  background: #081722;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: #021119;
  background: var(--cyan);
  border: 1px solid #6ee7ff;
  border-radius: 6px;
  font-weight: 900;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; line-height: 1.05; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 700; }

.range-fields {
  display: grid;
  grid-template-columns: minmax(104px, .48fr) minmax(165px, 1fr) minmax(165px, 1fr) auto;
  gap: 6px;
  min-width: 0;
}
.range-fields label, .jump-control label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.range-fields label span, .jump-control label span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}
input[type="datetime-local"], .range-fields select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  color: var(--text);
  background: #06131c;
  border: 1px solid #285264;
  border-radius: 5px;
  outline: none;
}
input[type="datetime-local"]:focus, .range-fields select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(25, 200, 236, .18); }
.range-fields select { cursor: pointer; }

.primary-btn, .icon-btn, .transport-btn, .play-btn, .speed-btn {
  display: inline-grid;
  place-items: center;
  border: 1px solid #285264;
  border-radius: 5px;
  color: var(--text);
  background: linear-gradient(180deg, #173a48 0%, #0a202b 58%, #06141c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 #031018, 0 6px 13px rgba(0,0,0,.28);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  cursor: pointer;
}
.primary-btn:hover, .icon-btn:hover, .transport-btn:hover, .speed-btn:hover { border-color: var(--cyan); background: linear-gradient(180deg, #1b4a5d, #0c2b39 62%, #071820); transform: translateY(-1px); }
.primary-btn:active, .icon-btn:active, .transport-btn:active, .play-btn:active, .speed-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 #031018; }
.primary-btn { grid-auto-flow: column; gap: 6px; min-width: 74px; height: 32px; padding: 0 10px; background: #087d9a; border-color: #27d8ff; font-weight: 900; }
.primary-btn svg, .icon-btn svg, .transport-btn svg, .play-btn svg { width: 18px; height: 18px; }
.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.icon-btn { width: 32px; height: 32px; padding: 0; text-decoration: none; }
.zoom-group { display: grid; grid-template-columns: repeat(2, 32px); gap: 3px; margin-right: 2px; padding-right: 6px; border-right: 1px solid #234b5a; }
.zoom-group .icon-btn { width: 32px; height: 34px; }
.live-link { color: var(--green); border-color: rgba(19, 217, 155, .58); }
.live-link:hover { color: #03141c; background: var(--green); border-color: #7ef4ce; }

.map-stage { position: relative; min-height: 0; overflow: hidden; isolation: isolate; }
#map { position: absolute; inset: 0; background: #0b1e27; }
.leaflet-control-attribution { color: #6f8c98; background: rgba(4, 15, 22, .72); }
.leaflet-control-attribution a { color: #70dff5; }
.smc-map-scale.leaflet-control {
  min-width: 112px;
  margin: 0 0 12px 12px;
  padding: 7px 9px 8px;
  pointer-events: none;
  color: #eaffff;
  background: rgba(4,17,24,.92);
  border: 1px solid #285264;
  border-radius: 5px;
  box-shadow: 0 10px 26px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.scale-caption { display: block; margin-bottom: 3px; color: #7899a6; font: 900 7px ui-monospace,Consolas,monospace; letter-spacing: .08em; }
.scale-values { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.scale-values strong { color: #f5fdff; font: 900 11px ui-monospace,Consolas,monospace; }
.scale-values em { color: var(--cyan); font: 900 9px ui-monospace,Consolas,monospace; font-style: normal; }
.scale-ruler { position: relative; height: 6px; margin-top: 5px; border: solid var(--cyan); border-width: 0 2px 2px; filter: drop-shadow(0 0 4px rgba(25,200,236,.42)); }
.scale-ruler::before,.scale-ruler::after,.scale-ruler i { content: ''; position: absolute; bottom: -2px; width: 2px; height: 5px; background: var(--cyan); }
.scale-ruler::before { left: 25%; }
.scale-ruler i { left: 50%; }
.scale-ruler::after { left: 75%; }

.map-toolbar {
  position: absolute;
  z-index: 730;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background: rgba(5, 19, 27, .94);
  border: 1px solid #285264;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  backdrop-filter: blur(10px);
  transition: right .2s ease;
}
.replay-detail-open .map-toolbar { right: 12px; }
.map-style-control { display: flex; align-items: center; gap: 5px; min-width: 108px; height: 32px; padding: 0 7px; color: var(--cyan); background: #071820; border: 1px solid #234b5a; border-radius: 4px; }
.map-style-control svg { width: 14px; height: 14px; }
.map-style-control select { width: 82px; color: #e8f8fc; background: transparent; border: 0; outline: 0; font-size: 10px; font-weight: 900; cursor: pointer; }
.map-style-control option { color: #e8f8fc; background: #071820; }
.map-style-control { background: linear-gradient(180deg,#173a48,#081b25 62%,#06131c); box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 3px 0 #031018,0 6px 12px rgba(0,0,0,.25); }
.map-tool-btn, .panel-close { display: grid; place-items: center; padding: 0; color: #8ea9b4; background: linear-gradient(180deg,#173a48,#0a202b 62%,#06131c); border: 1px solid #285264; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 #031018,0 6px 12px rgba(0,0,0,.26); transform: translateY(0); transition: transform .12s ease,box-shadow .12s ease,border-color .12s ease; cursor: pointer; }
.map-tool-btn { width: 32px; height: 32px; }
.map-tool-btn svg, .panel-close svg { width: 15px; height: 15px; }
.map-tool-btn:hover, .map-tool-btn.active, .panel-close:hover { color: #eaffff; border-color: var(--cyan); background: #0c3443; }
.map-tool-btn:hover, .panel-close:hover { transform: translateY(-1px); }
.map-tool-btn:active, .panel-close:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.48),0 1px 0 #031018; }
.analysis-tool-btn { position: relative; color: #91f6ff; }
.analysis-tool-btn b { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; color: #04131a; background: var(--amber); border: 2px solid #07131b; border-radius: 10px; box-shadow: 0 0 10px rgba(245,173,47,.6); font: 900 8px ui-monospace,Consolas,monospace; }
.analysis-tool-btn b.alert { color: #fff; background: var(--red); box-shadow: 0 0 12px rgba(255,85,112,.72); }
.zone-tool-btn { position: relative; color: #6ee7ff; }
.zone-tool-btn b { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; color: #02151c; background: var(--green); border: 2px solid #07131b; border-radius: 10px; box-shadow: 0 0 10px rgba(19,217,155,.58); font: 900 7px ui-monospace,Consolas,monospace; }
.zone-tool-btn b.alert { color: #fff; background: var(--red); box-shadow: 0 0 12px rgba(255,85,112,.72); }

.measure-panel {
  position: absolute;
  z-index: 740;
  top: 54px;
  right: 12px;
  width: 276px;
  padding: 9px;
  background: rgba(5, 19, 27, .96);
  border: 1px solid #2c6376;
  border-top: 3px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  transition: right .2s ease;
}
.replay-detail-open .measure-panel { right: 12px; }
.analysis-panel-open .measure-panel { right: 12px; }
.measure-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.measure-head > span { display: flex; align-items: center; gap: 7px; color: var(--cyan); font: 900 10px ui-monospace,Consolas,monospace; }
.measure-head > span svg { width: 15px; height: 15px; }
.measure-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.measure-mode-btn,.measure-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px;
  color: #b7cdd5; background: linear-gradient(180deg,#173a48,#0a202b 62%,#06131c);
  border: 1px solid #285264; border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 3px 0 #031018,0 6px 12px rgba(0,0,0,.24);
  transform: translateY(0); transition: transform .12s ease,box-shadow .12s ease,border-color .12s ease; cursor: pointer;
  font: 900 9px ui-monospace,Consolas,monospace;
}
.measure-mode-btn svg,.measure-action-btn svg { width: 14px; height: 14px; }
.measure-mode-btn:hover,.measure-action-btn:hover { color: #fff; border-color: var(--cyan); transform: translateY(-1px); }
.measure-mode-btn:active,.measure-action-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.5),0 1px 0 #031018; }
.measure-mode-btn.active { color: #02151c; background: linear-gradient(180deg,#72f0ff,#19c8ec 62%,#0b91ad); border-color: #adf7ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.65),0 3px 0 #075568,0 7px 14px rgba(25,200,236,.3); }
.measure-guide { min-height: 28px; margin: 9px 0 7px; color: #a8c0ca; font-size: 9px; line-height: 1.45; }
.measure-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.measure-results div { min-width: 0; padding: 7px 8px; background: #071820; border: 1px solid #1b4554; border-radius: 4px; }
.measure-results span,.measure-results strong { display: block; }
.measure-results span { color: var(--muted); font: 900 7px ui-monospace,Consolas,monospace; }
.measure-results strong { margin-top: 3px; color: #effcff; font: 900 13px ui-monospace,Consolas,monospace; }
.measure-results div:first-child strong { color: var(--cyan); font-size: 16px; }
.measure-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 7px; }
.measure-action-btn:disabled { opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
.measure-action-btn.danger { color: #ff8b9d; border-color: rgba(255,85,112,.45); }
.measure-cursor { cursor: crosshair !important; }
.measure-cursor .leaflet-interactive,.measure-cursor .leaflet-marker-icon { cursor: crosshair !important; }
.measure-map-label { overflow: visible !important; background: transparent; border: 0; pointer-events: none; }
.measure-map-label > span { display: block; width: max-content; min-width: 88px; padding: 5px 8px; color: #eaffff; text-align: center; background: rgba(4,17,24,.94); border: 1px solid var(--cyan); border-radius: 4px; box-shadow: 0 7px 18px rgba(0,0,0,.45),0 0 12px rgba(25,200,236,.2); }
.measure-map-label > span.green { border-color: var(--green); box-shadow: 0 7px 18px rgba(0,0,0,.45),0 0 12px rgba(19,217,155,.24); }
.measure-map-label > span.amber { border-color: var(--amber); box-shadow: 0 7px 18px rgba(0,0,0,.45),0 0 12px rgba(245,173,47,.28); }
.measure-map-label small,.measure-map-label b { display: block; white-space: nowrap; }
.measure-map-label small { color: #8faab5; font: 900 7px ui-monospace,Consolas,monospace; }
.measure-map-label b { margin-top: 1px; font: 900 11px ui-monospace,Consolas,monospace; }
.leaflet-overlay-pane path.measure-line,.leaflet-overlay-pane path.measure-range-circle { filter: drop-shadow(0 0 3px rgba(25,200,236,.58)); }

.status-strip {
  position: absolute;
  z-index: 700;
  top: 12px;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(7, minmax(82px, auto));
  gap: 0;
  max-width: calc(100% - 510px);
  transform: translateX(-50%);
  background: rgba(5, 19, 27, .93);
  border: 1px solid #285264;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
  backdrop-filter: blur(10px);
}
.status-strip .status-close { position: absolute; top: -9px; right: -9px; }
.status-strip div { min-width: 0; padding: 8px 11px; border-right: 1px solid #183c4a; }
.status-strip div:last-child { border-right: 0; }
.status-strip span, .status-strip strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-strip span { color: var(--muted); font-size: 8px; font-weight: 900; }
.status-strip strong { margin-top: 2px; color: #dff9ff; font: 800 11px ui-monospace, SFMono-Regular, Consolas, monospace; }

.layer-panel {
  position: absolute;
  z-index: 710;
  top: 12px;
  left: 12px;
  bottom: 10px;
  width: 210px;
  padding: 9px;
  background: var(--panel);
  border: 1px solid #285264;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  backdrop-filter: blur(10px);
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2f6a7d #071820;
}
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 7px; color: var(--cyan); font-size: 11px; }
.panel-title > span { display: flex; align-items: center; gap: 7px; }
.panel-title svg { width: 15px; }
.panel-close { flex: 0 0 26px; width: 26px; height: 26px; }
.layer-panel > label, .vessel-filter label { display: flex; align-items: center; gap: 7px; min-height: 26px; color: #c6dbe3; font-size: 11px; font-weight: 700; }
.layer-panel input { accent-color: var(--cyan); }
.layer-section-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 7px -2px 2px; padding: 7px 2px 3px; color: #67e8f9; border-top: 1px solid #1c4657; font: 900 8px ui-monospace,Consolas,monospace; letter-spacing: .06em; }
.layer-section-title i { color: #13d99b; font-style: normal; font-size: 7px; }
.detached-zone-control,.zone-replay-detached { display: none !important; }
.layer-panel .track-mode-field { display: grid; gap: 4px; margin-top: 6px; padding-top: 7px; border-top: 1px solid #1c4657; }
.track-mode-field > span { color: var(--muted); font: 900 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
.track-mode-field select { width: 100%; height: 30px; padding: 0 7px; color: #e7f7fb; background: #06131c; border: 1px solid #285264; border-radius: 4px; outline: 0; font-size: 10px; font-weight: 900; cursor: pointer; }
.track-mode-field select:focus { border-color: var(--cyan); }
.ais-replay-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.ais-replay-selects .track-mode-field { min-width: 0; }
.replay-speed-scale {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 7px;
  margin-top: 8px; padding: 7px; border: 1px solid #1c4657; border-radius: 5px; background: rgba(2, 13, 20, .62);
}
.replay-speed-scale.hidden { display: none; }
.replay-speed-scale > strong { grid-column: 1 / -1; color: #7dd3fc; font: 900 8px ui-monospace, monospace; letter-spacing: .07em; }
.replay-speed-scale > strong small { color: #7596a2; }
.replay-speed-scale span { display: grid; grid-template-columns: 22px 1fr; gap: 5px; align-items: center; color: #d8edf2; font: 800 8px ui-monospace, monospace; }
.replay-speed-scale i { width: 22px; height: 7px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: var(--speed); box-shadow: 0 0 7px color-mix(in srgb, var(--speed) 70%, transparent); }
.ais-heat-legend {
  display: grid;
  gap: 4px;
  margin-top: 7px;
  padding: 7px;
  background: rgba(2, 13, 20, .62);
  border: 1px solid #1c4657;
  border-radius: 5px;
}
.ais-heat-legend.hidden { display: none; }
.ais-heat-legend > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ais-heat-legend strong { color: #7dd3fc; font: 900 8px ui-monospace, monospace; letter-spacing: .07em; }
.ais-heat-legend small { min-width: 0; overflow: hidden; color: #7596a2; font: 700 7px ui-monospace, monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ais-heat-gradient { display: block; height: 5px; background: linear-gradient(90deg, #2583ff 0%, #13d9b0 35%, #facc15 68%, #ff5a36 100%); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; box-shadow: 0 0 8px rgba(19,217,176,.26); }
.ais-heat-labels { display: flex; justify-content: space-between; color: #789aa7; font: 800 7px ui-monospace, monospace; }
.leaflet-aisHeat-pane canvas { mix-blend-mode: screen; }
.vessel-filter { margin-top: 7px; padding-top: 7px; border-top: 1px solid #1c4657; }
.vessel-filter i { width: 8px; height: 8px; border-radius: 50%; background: var(--vessel-color); box-shadow: 0 0 10px var(--vessel-color); }

.replay-shell .detail-panel {
  position: absolute;
  z-index: 720 !important;
  top: 54px;
  right: 12px;
  bottom: 10px;
  width: min(340px, calc(100% - 24px));
  max-height: none;
  overflow: auto;
  background: var(--panel) !important;
  border: 1px solid #285264;
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  backdrop-filter: blur(12px);
}
.detail-panel.hidden { display: none; }
.detail-panel header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #0a202b; border-bottom: 1px solid #1c4657; }
.detail-panel header span, .detail-panel header strong { display: block; }
.detail-panel header span { color: var(--cyan); font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.detail-panel header strong { margin-top: 2px; font-size: 18px; line-height: 1.2; }
.detail-panel header button { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #d9edf3; background: #102d39; border: 1px solid #285264; border-radius: 50%; cursor: pointer; }
.detail-panel header svg { width: 17px; }
.detail-body { padding: 12px 14px 14px; }
.empty-state { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin: 0; }
.detail-grid div { min-width: 0; padding: 7px 0; border-bottom: 1px solid #153743; }
.detail-grid dt { color: var(--muted); font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.detail-grid dd { margin: 3px 0 0; color: var(--text); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.detail-grid dd.accent { color: var(--green); }
.detail-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid #285264; }
.detail-section h4 { margin: 0 0 8px; color: var(--cyan); font: 900 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.speed-band { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 9px; background: #071820; border: 1px solid #1c4657; border-radius: 4px; }
.speed-band i { width: 10px; height: 10px; border-radius: 50%; background: var(--band-color); box-shadow: 0 0 12px var(--band-color); }
.speed-band strong { font-size: 11px; }

.analysis-panel {
  position: absolute;
  z-index: 725;
  top: 54px;
  right: 12px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  width: min(410px, calc(100% - 24px));
  max-height: none;
  overflow: hidden;
  background: rgba(6, 23, 32, .97);
  border: 1px solid #2a5f71;
  border-left: 3px solid var(--cyan);
  border-radius: 7px;
  box-shadow: 0 22px 58px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}
.analysis-panel-open .map-toolbar { right: 12px; }
.analysis-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; padding: 11px 12px; background: linear-gradient(180deg,#103645,#0a202b); border-bottom: 1px solid #285264; }
.analysis-head span,.analysis-head strong { display: block; }
.analysis-head span { color: var(--cyan); font: 900 8px ui-monospace,Consolas,monospace; letter-spacing: 1px; }
.analysis-head strong { margin-top: 2px; font-size: 16px; }
.analysis-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; flex: 0 0 auto; padding: 7px; background: #071820; border-bottom: 1px solid #1b4554; }
.analysis-tab,.analysis-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; color: #97b1bb; background: linear-gradient(180deg,#173a48,#0a202b 60%,#06131c); border: 1px solid #285264; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 3px 0 #031018,0 6px 12px rgba(0,0,0,.23); transform: translateY(0); transition: transform .12s ease,box-shadow .12s ease,border-color .12s ease; cursor: pointer; }
.analysis-tab { height: 32px; padding: 0 4px; font-size: 9px; font-weight: 900; }
.analysis-tab svg,.analysis-action svg { flex: 0 0 auto; width: 14px; height: 14px; }
.analysis-tab:hover,.analysis-action:hover { color: #f2fdff; border-color: var(--cyan); transform: translateY(-1px); }
.analysis-tab:active,.analysis-action:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.5),0 1px 0 #031018; }
.analysis-tab.active { color: #03141b; background: linear-gradient(180deg,#6beeff,#19c8ec 62%,#0b91ad); border-color: #a2f4ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 #075568,0 7px 14px rgba(25,200,236,.28); }
.analysis-body { min-height: 0; overflow: auto; scrollbar-color: #2f6a7d #071820; }
.analysis-view { display: none; padding: 10px; }
.analysis-view.active { display: block; }
.analysis-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 9px; }
.analysis-summary article { min-width: 0; padding: 7px; background: #0a202b; border: 1px solid #214a5a; border-radius: 5px; }
.analysis-summary article.critical { border-top: 2px solid var(--red); }
.analysis-summary article.warning { border-top: 2px solid var(--amber); }
.analysis-summary span,.analysis-summary strong { display: block; }
.analysis-summary span { overflow: hidden; color: var(--muted); font: 800 7px ui-monospace,Consolas,monospace; white-space: nowrap; text-overflow: ellipsis; }
.analysis-summary strong { margin-top: 2px; color: #fff; font-size: 17px; }
.analysis-filter,.note-form label { display: grid; gap: 4px; }
.analysis-filter { grid-template-columns: auto minmax(0,1fr); align-items: center; margin-bottom: 8px; }
.analysis-filter span,.note-form label>span { color: var(--muted); font: 900 8px ui-monospace,Consolas,monospace; }
.analysis-filter select,.note-form select,.note-form textarea { width: 100%; color: #effbfe; background: #06131c; border: 1px solid #285264; border-radius: 4px; outline: 0; }
.analysis-filter select,.note-form select { height: 30px; padding: 0 7px; font-size: 10px; font-weight: 800; }
.analysis-filter select:focus,.note-form select:focus,.note-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(25,200,236,.16); }
.event-list,.note-list { display: grid; gap: 6px; }
.event-row { display: grid; grid-template-columns: 4px 74px minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; padding: 7px; color: #e8f8fc; text-align: left; background: #0a202b; border: 1px solid #214a5a; border-radius: 5px; cursor: pointer; }
.event-row:hover { border-color: #4b8ca3; background: #0d2a36; }
.event-row>i { align-self: stretch; background: var(--cyan); border-radius: 3px; box-shadow: 0 0 8px rgba(25,200,236,.45); }
.event-row.warning>i { background: var(--amber); box-shadow: 0 0 8px rgba(245,173,47,.45); }
.event-row.critical>i { background: var(--red); box-shadow: 0 0 8px rgba(255,85,112,.52); }
.event-time { color: #a9c2cb; font: 800 8px/1.25 ui-monospace,Consolas,monospace; }
.event-copy { min-width: 0; }
.event-copy b,.event-copy small { display: block; }
.event-copy b { font-size: 10px; }
.event-copy small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; }
.event-row em { color: #7dd3fc; font: normal 900 7px ui-monospace,Consolas,monospace; }
.event-row.warning em { color: var(--amber); }.event-row.critical em { color: var(--red); }
.analysis-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 7px; color: var(--muted); font: 900 8px ui-monospace,Consolas,monospace; }
.analysis-section-title strong { color: #bfeef8; font-size: 9px; }
.fleet-compare-grid,.route-analysis-grid,.quality-grid { display: grid; gap: 7px; }
.fleet-compare-grid { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 13px; }
.fleet-compare-grid article,.route-analysis-grid article,.quality-grid article { min-width: 0; padding: 8px; background: #0a202b; border: 1px solid #214a5a; border-top: 2px solid var(--vessel-color); border-radius: 5px; }
.fleet-compare-grid header { display: flex; gap: 4px; align-items: baseline; overflow: hidden; }
.fleet-compare-grid header span { color: var(--vessel-color); font: 900 12px ui-monospace,Consolas,monospace; }
.fleet-compare-grid header strong { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.fleet-compare-grid dl,.quality-grid dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin: 7px 0; }
.fleet-compare-grid dl div,.quality-grid dl div { padding: 5px; background: #071820; border: 1px solid #183c4a; }
.fleet-compare-grid dt,.quality-grid dt { color: var(--muted); font: 800 7px ui-monospace,Consolas,monospace; }
.fleet-compare-grid dd,.quality-grid dd { margin: 2px 0 0; font-size: 10px; font-weight: 900; }
.fleet-compare-grid article>small,.quality-grid article>small { display: block; overflow: hidden; color: var(--muted); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.route-analysis-grid article header,.quality-grid article header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.route-analysis-grid article header b,.quality-grid article header b { color: var(--vessel-color); font: 900 11px ui-monospace,Consolas,monospace; }
.route-analysis-grid article header span { overflow: hidden; color: #dceef3; font-size: 9px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.route-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-top: 7px; }
.route-kpis span { padding: 5px; background: #071820; border: 1px solid #183c4a; }
.route-kpis small,.route-kpis strong { display: block; }
.route-kpis small { color: var(--muted); font: 800 6px ui-monospace,Consolas,monospace; }
.route-kpis strong { margin-top: 2px; font-size: 9px; }
.route-analysis-grid article p,.quality-grid article p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.route-disclaimer,.analysis-disclaimer { margin: 8px 0 0; padding: 7px; color: #9eb7c1; background: rgba(245,173,47,.08); border: 1px solid rgba(245,173,47,.3); border-radius: 4px; font-size: 8px; line-height: 1.4; }
.quality-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 8px; }
.quality-overview span { padding: 8px; background: #0a202b; border: 1px solid #214a5a; border-radius: 5px; }
.quality-overview small,.quality-overview strong { display: block; }.quality-overview small { color: var(--muted); font-size: 7px; font-weight: 900; }.quality-overview strong { margin-top: 2px; color: var(--green); font-size: 16px; }
.quality-meter { height: 7px; margin-top: 6px; overflow: hidden; background: #06131c; border: 1px solid #183c4a; border-radius: 5px; }
.quality-meter i { display: block; width: var(--score); height: 100%; background: linear-gradient(90deg,var(--red),var(--amber) 55%,var(--green)); }
.note-form { display: grid; gap: 8px; margin-bottom: 10px; padding: 9px; background: #0a202b; border: 1px solid #214a5a; border-radius: 5px; }
.note-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.note-form textarea { min-height: 64px; padding: 7px; resize: vertical; font-size: 10px; }
.analysis-action { min-height: 32px; padding: 0 9px; font-size: 9px; font-weight: 900; }
.analysis-action.primary { color: #02131a; background: linear-gradient(180deg,#69f0c7,#13d99b 62%,#079b6f); border-color: #8af7d7; }
.note-row { display: grid; grid-template-columns: minmax(0,1fr) 31px; gap: 5px; padding: 7px; background: #0a202b; border: 1px solid #214a5a; border-radius: 5px; }
.note-row>button:first-child { min-width: 0; padding: 0; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.note-row span,.note-row b { display: block; }.note-row span { color: var(--cyan); font: 800 8px ui-monospace,Consolas,monospace; }.note-row b { margin-top: 2px; font-size: 10px; }.note-row p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.note-delete { display: grid; place-items: center; width: 31px; height: 31px; color: var(--red); background: #071820; border: 1px solid rgba(255,85,112,.45); border-radius: 4px; cursor: pointer; }.note-delete svg { width: 14px; }
.analysis-empty { margin: 10px 0; padding: 14px; color: var(--muted); text-align: center; border: 1px dashed #285264; border-radius: 5px; font-size: 10px; }
.analysis-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; flex: 0 0 auto; padding: 8px; background: #071820; border-top: 1px solid #1b4554; }

.map-notice {
  position: absolute;
  z-index: 750;
  left: 50%;
  bottom: 16px;
  max-width: min(520px, calc(100% - 32px));
  padding: 9px 13px;
  transform: translateX(-50%);
  color: #e8f9fd;
  background: rgba(7, 27, 37, .95);
  border: 1px solid var(--amber);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
}
.hidden { display: none !important; }

.loading-overlay {
  position: absolute;
  z-index: 900;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  background: rgba(3, 13, 19, .76);
  backdrop-filter: blur(5px);
}
.loading-overlay strong { font-size: 18px; }
.loading-overlay small { color: var(--muted); }
.loader { width: 38px; height: 38px; border: 3px solid #234b5a; border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.zone-replay-panel {
  position: absolute;
  z-index: 708;
  left: 230px;
  right: 12px;
  bottom: 12px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  height: 158px;
  overflow: hidden;
  color: #e9fbff;
  background: rgba(4,17,24,.96);
  border: 1px solid #2b6072;
  border-top: 2px solid var(--cyan);
  border-radius: 7px;
  box-shadow: 0 18px 46px rgba(0,0,0,.48),0 0 22px rgba(25,200,236,.08);
  backdrop-filter: blur(12px);
}
.zone-replay-head { display: grid; grid-template-columns: minmax(210px,1fr) auto auto; align-items: center; gap: 9px; min-height: 47px; padding: 5px 7px 5px 10px; background: linear-gradient(180deg,rgba(17,54,68,.94),rgba(6,25,34,.94)); border-bottom: 1px solid #245160; }
.zone-replay-title { min-width: 0; }
.zone-replay-title > span { display: flex; align-items: center; gap: 7px; color: #6ee7ff; font: 900 10px ui-monospace,Consolas,monospace; }
.zone-replay-title svg { width: 15px; height: 15px; }
.zone-replay-title small { display: block; margin: 2px 0 0 22px; overflow: hidden; color: #82a6b3; font: 700 7px ui-monospace,Consolas,monospace; white-space: nowrap; text-overflow: ellipsis; }
.zone-replay-stats { display: grid; grid-template-columns: repeat(5,minmax(44px,auto)); gap: 3px; }
.zone-replay-stats > span { min-width: 48px; padding: 4px 6px; text-align: center; background: rgba(2,14,21,.78); border: 1px solid #214956; border-radius: 4px; }
.zone-replay-stats small,.zone-replay-stats b { display: block; }
.zone-replay-stats small { color: #7598a5; font: 900 6px ui-monospace,Consolas,monospace; }
.zone-replay-stats b { margin-top: 1px; color: #f4fdff; font: 900 10px ui-monospace,Consolas,monospace; }
.zone-replay-stats .mail-ok b { color: var(--green); }
.zone-replay-stats .mail-warn b { color: var(--red); }
.zone-replay-filters { display: flex; align-items: end; gap: 4px; }
.zone-replay-filters label { display: grid; gap: 2px; min-width: 92px; }
.zone-replay-filters label span { color: #7e9ca7; font: 900 6px ui-monospace,Consolas,monospace; }
.zone-replay-filters select { width: 112px; height: 28px; padding: 0 6px; color: #e9fbff; background: #06131c; border: 1px solid #285264; border-radius: 4px; outline: 0; font: 800 8px ui-monospace,Consolas,monospace; }
.zone-replay-filters select:focus { border-color: var(--cyan); }
.zone-mini-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #8fb1bd; background: linear-gradient(180deg,#173a48,#071821); border: 1px solid #285264; border-radius: 4px; cursor: pointer; }
.zone-mini-btn:hover { color: #fff; border-color: var(--cyan); }
.zone-mini-btn svg { width: 13px; height: 13px; }
.zone-replay-body { position: relative; min-height: 0; overflow: hidden; background: #041119; }
.zone-replay-axis,.zone-replay-row { display: grid; grid-template-columns: 92px minmax(0,1fr); }
.zone-replay-axis { height: 20px; border-bottom: 1px solid #153a48; }
.zone-replay-axis > strong { display: flex; align-items: center; padding-left: 9px; color: #668995; border-right: 1px solid #1a4351; font: 900 6px ui-monospace,Consolas,monospace; }
.zone-replay-axis > div,.zone-replay-track { position: relative; min-width: 0; }
.zone-replay-axis i { position: absolute; top: 0; bottom: 0; width: 1px; background: #1a4351; }
.zone-replay-axis i span { position: absolute; top: 4px; left: 3px; color: #7598a5; font: 800 6px ui-monospace,Consolas,monospace; white-space: nowrap; }
.zone-replay-axis i:last-child span { left: auto; right: 3px; }
.zone-replay-rows { height: calc(100% - 20px); }
.zone-replay-row { height: 22px; border-bottom: 1px solid rgba(24,60,73,.7); }
.zone-replay-row > div:first-child { display: grid; align-content: center; padding: 1px 7px 1px 9px; border-right: 1px solid #1a4351; }
.zone-replay-row strong { color: #dff9ff; font: 900 7px ui-monospace,Consolas,monospace; }
.zone-replay-row small { overflow: hidden; color: #648895; font: 700 5.8px ui-monospace,Consolas,monospace; white-space: nowrap; text-overflow: ellipsis; }
.zone-replay-track { background-image: linear-gradient(90deg,transparent 16.55%,rgba(28,70,87,.45) 16.66%,transparent 16.77%,transparent 33.22%,rgba(28,70,87,.45) 33.33%,transparent 33.44%,transparent 49.88%,rgba(28,70,87,.45) 50%,transparent 50.12%,transparent 66.55%,rgba(28,70,87,.45) 66.66%,transparent 66.77%,transparent 83.22%,rgba(28,70,87,.45) 83.33%,transparent 83.44%); }
.zone-replay-band { position: absolute; top: 5px; height: 11px; min-width: 3px; padding: 0; background: color-mix(in srgb,var(--zone-color) 66%,#07131b); border: 1px solid color-mix(in srgb,var(--zone-color) 88%,#fff); border-radius: 3px; box-shadow: 0 0 7px color-mix(in srgb,var(--zone-color) 38%,transparent); cursor: pointer; }
.zone-replay-band.area { background: repeating-linear-gradient(135deg,color-mix(in srgb,var(--zone-color) 62%,#06131c) 0 5px,color-mix(in srgb,var(--zone-color) 24%,#06131c) 5px 9px); }
.zone-replay-band.open { border-style: dashed; animation: zoneBandFlow 1.2s linear infinite; }
.zone-replay-band.movement { top: 7px; height: 7px; border-radius: 7px; opacity: .9; }
@keyframes zoneBandFlow { 50% { filter: brightness(1.35); } }
.zone-replay-point { position: absolute; z-index: 2; top: 3px; display: grid; place-items: center; width: 14px; height: 14px; padding: 0; transform: translateX(-50%) rotate(45deg); color: #03131a; background: var(--zone-color); border: 1px solid #eaffff; border-radius: 3px; box-shadow: 0 0 8px color-mix(in srgb,var(--zone-color) 66%,transparent); cursor: pointer; }
.zone-replay-point span { transform: rotate(-45deg); font: 900 5px ui-monospace,Consolas,monospace; }
.zone-replay-point.exit { background: var(--cyan); }
.zone-replay-point.crossing { background: var(--amber); }
.zone-replay-point.mail.sent { color: #03150f; background: var(--green); }
.zone-replay-point.mail.attention { color: #fff; background: var(--red); animation: zoneMailPulse 1s ease-in-out infinite alternate; }
.zone-replay-point.mail.pending { color: #04131a; background: var(--amber); }
.zone-replay-point.movement { width: 6px; height: 6px; top: 8px; border: 0; border-radius: 50%; transform: translateX(-50%); }
.zone-replay-point.movement span { display: none; }
@keyframes zoneMailPulse { to { box-shadow: 0 0 13px rgba(255,85,112,.95); } }
.zone-replay-playhead { position: absolute; z-index: 8; top: 0; bottom: 0; width: 1px; background: #fff; box-shadow: 0 0 7px var(--cyan); pointer-events: none; }
.zone-replay-playhead::before { content:''; position: absolute; top: 0; left: -3px; border: 4px solid transparent; border-top-color: var(--cyan); }
.zone-replay-playhead span { position: absolute; top: 2px; left: 5px; padding: 2px 4px; color: #02131a; background: var(--cyan); border-radius: 2px; font: 900 5.5px ui-monospace,Consolas,monospace; white-space: nowrap; }
.zone-replay-empty { position: absolute; inset: 20px 0 0 92px; z-index: 5; display: grid; place-items: center; color: #6f919e; background: rgba(4,17,25,.86); font: 800 8px ui-monospace,Consolas,monospace; }
.zone-replay-tooltip { color: #eaffff; background: #061821; border: 1px solid #2b6072; box-shadow: 0 8px 20px rgba(0,0,0,.42); }

.playback-console {
  z-index: 1000;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) minmax(230px, 330px);
  align-items: center;
  gap: 16px;
  height: 84px;
  min-height: 84px;
  padding: 5px 12px 6px;
  background: #081722;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .24);
}
.transport { display: flex; align-items: center; gap: 7px; }
.transport-btn { width: 38px; height: 38px; }
.play-btn { width: 46px; height: 46px; color: #021119; background: var(--green); border-color: #7ef4ce; }
.play-btn svg { width: 22px; height: 22px; fill: currentColor; }
.speed-control { display: grid; grid-template-columns: repeat(4, 36px); gap: 3px; margin-left: 5px; }
.speed-btn { height: 32px; padding: 0; color: var(--muted); font-size: 11px; font-weight: 900; }
.speed-btn.active { color: #03141c; background: var(--amber); border-color: #ffd07c; }
.timeline-wrap { display: grid; min-width: 0; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 15px; color: var(--muted); font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
.timeline-head strong { color: var(--cyan); font-size: 9px; }
.coverage-canvas {
  display: block;
  width: 100%;
  height: 24px;
  margin-bottom: 1px;
  background: #06131c;
  border: 1px solid #183c4a;
  border-radius: 4px;
}
#timelineInput { width: 100%; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
#timelineInput::-webkit-slider-runnable-track { height: 7px; background: #102f3d; border: 1px solid #3a6878; border-radius: 7px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); }
#timelineInput::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; appearance: none; -webkit-appearance: none; background: var(--cyan); border: 2px solid #dffbff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(25, 200, 236, .2), 0 0 12px rgba(25, 200, 236, .72); }
#timelineInput::-moz-range-track { height: 7px; background: #102f3d; border: 1px solid #3a6878; border-radius: 7px; }
#timelineInput::-moz-range-progress { height: 7px; background: linear-gradient(90deg, #0ea5e9, #13d99b); border-radius: 7px; }
#timelineInput::-moz-range-thumb { width: 16px; height: 16px; background: var(--cyan); border: 2px solid #dffbff; border-radius: 50%; box-shadow: 0 0 12px rgba(25, 200, 236, .72); }
#timelineInput:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 7px; }
.timeline-labels { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 3px; color: var(--muted); font: 700 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.timeline-labels strong { color: var(--text); font-size: 12px; }
.timeline-labels span:last-child { text-align: right; }
.jump-control { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: end; gap: 7px; }

/* Keep the global assistant clear of replay transport and timeline controls. */
body #umayLauncher { right: 14px !important; bottom: 96px !important; }

@media (min-width: 1101px) and (max-width: 1480px) {
  .replay-toolbar { grid-template-columns: minmax(168px, .48fr) minmax(500px, 1.7fr) auto; gap: 7px; }
  .brand strong { font-size: 15px; }
  .range-fields { grid-template-columns: 104px minmax(150px, 1fr) minmax(150px, 1fr) auto; }
  .status-strip { grid-template-columns: repeat(4, minmax(86px, auto)); max-width: calc(100% - 470px); }
  .status-strip div:nth-child(n+5) { display: none; }
  .zone-replay-panel { left: 224px; }
  .zone-replay-title small { display: none; }
  .zone-replay-stats > span:nth-child(4),.zone-replay-stats > span:nth-child(5) { display: none; }
}

.replay-vessel-icon, .wind-marker { overflow: visible !important; background: transparent; border: 0; }
.vessel-symbol {
  position: absolute;
  left: 3px;
  top: 0;
  width: 32px;
  height: 38px;
  transform: rotate(var(--vessel-heading));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 3px #020617) drop-shadow(0 0 5px color-mix(in srgb, var(--vessel-color) 58%, transparent));
  transition: opacity .18s ease;
}
.fleet-vessel-symbol { left: 7px; top: 1px; width: 36px; height: 43px; }
.vessel-symbol svg { width: 100%; height: 100%; overflow: visible; }
.vessel-symbol .vessel-hull {
  fill: var(--vessel-color);
  stroke: #f8fafc;
  stroke-width: 1.25;
  stroke-linejoin: round;
}
.vessel-symbol .vessel-deck {
  fill: color-mix(in srgb, var(--vessel-color) 40%, #07111f);
  stroke: rgba(255, 255, 255, .72);
  stroke-width: .75;
}
.vessel-symbol .vessel-centerline { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: .7; }
.fleet-vessel-symbol .vessel-hull { stroke-width: 1.7; }

.fleet-vessel-label, .ais-vessel-label {
  position: absolute;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 5px;
  max-width: 132px;
  padding: 2px 4px;
  overflow: hidden;
  color: #f8fafc;
  background: rgba(2, 13, 23, .88);
  border: 1px solid color-mix(in srgb, var(--vessel-color, #94a3b8) 55%, #64748b);
  border-radius: 4px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .36);
  font: 800 8px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
.fleet-vessel-label { left: 37px; top: 9px; color: #fff; border-color: rgba(255, 255, 255, .55); }
.fleet-vessel-label b { color: var(--vessel-color, #fff); }
.fleet-vessel-label em, .ais-vessel-label em { color: #7dd3fc; font-style: normal; }
.ais-vessel-label { left: 34px; top: 7px; max-width: 104px; opacity: .78; }
.ais-vessel-label b { display: block; max-width: 68px; overflow: hidden; text-overflow: ellipsis; }
.fleet-labels-on .fleet-vessel-label, .ais-labels-on .ais-vessel-label { display: flex; }
.replay-vessel-icon:hover .ais-vessel-label, .replay-vessel-icon:hover .fleet-vessel-label { z-index: 5; max-width: 220px; opacity: 1; }
.replay-vessel-icon:hover .ais-vessel-label b { max-width: 160px; }
.replay-true-scale .has-true-scale .vessel-symbol { opacity: 0; }
.replay-anchor-symbol { width: 32px; height: 32px; margin: 3px; transform: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--vessel-color) 60%, transparent)); }
.replay-anchor-symbol .anchor-disc { fill: color-mix(in srgb, var(--vessel-color) 78%, #07111f); stroke: #f8fafc; stroke-width: 1.35; }
.replay-anchor-symbol .anchor-eye { fill: none; stroke: #fff; stroke-width: 1.8; }
.replay-anchor-symbol .anchor-mark { fill: none; stroke: #fff; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.is-at-anchor .ais-vessel-label::before { content:'ANCHOR'; color:#facc15; font-size:7px; font-weight:900; }

.leaflet-navigation-pane path.replay-course-vector {
  animation: replayVectorFlow 1.4s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7));
}
.replay-true-scale-footprint { filter: drop-shadow(0 0 4px rgba(0, 0, 0, .82)); }
@keyframes replayVectorFlow { to { stroke-dashoffset: -26; } }
.wind-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: rgba(10, 32, 43, .8);
  border: 1px solid var(--cyan);
  border-radius: 50%;
  transform: rotate(var(--wind-dir));
  box-shadow: 0 0 12px rgba(25, 200, 236, .35);
  font-size: 15px;
  font-weight: 900;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--text); background: #081b25; }
.leaflet-popup-content { margin: 10px 12px; font-size: 12px; line-height: 1.45; }

@media (max-width: 1100px) {
  .replay-toolbar { grid-template-columns: auto minmax(470px, 1fr) auto; }
  .brand small { display: none; }
  .range-fields label span { display: none; }
  .range-fields label { display: block; }
  .status-strip { left: 230px; right: 300px; max-width: none; transform: none; grid-template-columns: repeat(3, minmax(80px, 1fr)); }
  .status-strip div:nth-child(n+4) { display: none; }
  .playback-console { grid-template-columns: auto minmax(220px, 1fr); }
  .jump-control { display: none; }
  .analysis-panel { width: min(380px,calc(100% - 24px)); }
  .analysis-panel-open .map-toolbar { right: 12px; }
  .analysis-panel-open .measure-panel { right: 12px; }
  .zone-replay-panel { left: 8px; right: 8px; }
  .zone-replay-stats { display: none; }
  body #umayLauncher { bottom: 106px !important; }
}

@media (max-width: 760px) {
  .replay-shell { min-height: 0; }
  .replay-toolbar { grid-template-columns: 1fr auto; min-height: 54px; padding: 6px 8px; }
  .brand { gap: 7px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .brand strong { font-size: 16px; }
  .range-fields { grid-column: 1 / -1; grid-template-columns: 82px 1fr 1fr 38px; order: 3; }
  .range-fields input { height: 36px; padding: 0 6px; font-size: 11px; }
  .range-fields select { height: 36px; padding: 0 5px; font-size: 10px; }
  .range-fields label span { display: none; }
  .primary-btn { min-width: 38px; width: 38px; height: 36px; padding: 0; }
  .primary-btn span { display: none; }
  .toolbar-actions .icon-btn { width: 34px; height: 34px; }
  .toolbar-actions { gap: 3px; }
  .zoom-group { grid-template-columns: repeat(2, 31px); gap: 2px; padding-right: 4px; }
  .zoom-group .icon-btn { width: 31px; }
  .toolbar-actions #copyBtn, .toolbar-actions #exportBtn { display: none; }
  .map-toolbar { top: 8px; right: 8px; }
  .smc-map-scale.leaflet-control { min-width: 102px; margin: 0 0 8px 8px; padding: 6px 8px 7px; }
  .replay-detail-open .map-toolbar { right: 8px; }
  .analysis-panel-open .map-toolbar { right: 8px; }
  .measure-panel,.replay-detail-open .measure-panel,.analysis-panel-open .measure-panel { top: 94px; right: 8px; width: min(276px,calc(100% - 16px)); }
  .map-style-control { min-width: 96px; }
  .map-style-control select { width: 68px; }
  .status-strip { top: 60px; left: 8px; right: 8px; max-width: none; transform: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-strip div { padding: 6px 8px; }
  .status-strip div:nth-child(n+3) { display: none; }
  .layer-panel { top: 108px; left: 8px; bottom: 8px; width: min(210px, calc(100% - 16px)); max-height: none; padding: 8px; }
  .layer-panel > label, .vessel-filter label { min-height: 23px; font-size: 10px; }
  .zone-replay-panel { left: 8px; right: 8px; bottom: 8px; height: 150px; }
  .zone-replay-head { grid-template-columns: minmax(94px,1fr) auto; min-height: 44px; padding-left: 7px; }
  .zone-replay-title small { display: none; }
  .zone-replay-filters label:first-child { display: none; }
  .zone-replay-filters label { min-width: 82px; }
  .zone-replay-filters select { width: 92px; }
  .zone-replay-axis,.zone-replay-row { grid-template-columns: 74px minmax(0,1fr); }
  .zone-replay-empty { left: 74px; }
  .detail-panel { top: auto; right: 8px; bottom: 8px; width: calc(100% - 16px); max-height: 48%; }
  .detail-panel header { padding: 9px 11px; }
  .detail-panel header strong { font-size: 15px; }
  .detail-body { padding: 9px 11px 11px; }
  .analysis-panel { top: auto; right: 8px; bottom: 8px; width: calc(100% - 16px); max-height: 68%; border-left-width: 1px; border-top: 3px solid var(--cyan); }
  .analysis-head { padding: 8px 10px; }
  .analysis-head strong { font-size: 14px; }
  .analysis-tabs { padding: 5px; }
  .analysis-tab { height: 30px; font-size: 8px; }
  .analysis-tab span { display: none; }
  .analysis-view { padding: 7px; }
  .fleet-compare-grid { grid-template-columns: 1fr; }
  .route-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .event-row { grid-template-columns: 4px 60px minmax(0,1fr); }
  .event-row em { display: none; }
  .analysis-actions { padding: 6px; }
  .analysis-action { padding: 0 5px; font-size: 8px; }
  .playback-console { grid-template-columns: 1fr; gap: 5px; height: 112px; min-height: 112px; padding: 7px 9px 8px; }
  .transport { justify-content: flex-start; }
  .transport-btn { width: 34px; height: 34px; }
  .play-btn { width: 40px; height: 40px; }
  .speed-control { grid-template-columns: repeat(3, 32px); }
  .speed-btn[data-speed="10"] { display: none; }
  .speed-btn { height: 29px; }
  .timeline-wrap { grid-row: 1; }
  .timeline-head span { display: none; }
  .coverage-canvas { height: 24px; }
  .timeline-labels { font-size: 8px; }
  .timeline-labels strong { font-size: 10px; }
  body #umayLauncher { right: 8px !important; bottom: 120px !important; width: 52px !important; height: 48px !important; }
  body #umayLauncher > span:nth-child(2) { display: none !important; }
}