:root {
  --bg: #0b0f14;
  --bg-2: #10161d;
  --panel: #131b24;
  --panel-2: #18222d;
  --line: #233140;
  --line-2: #2e3f51;
  --text: #d7e1ea;
  --muted: #7f93a6;
  --dim: #56687a;
  --friendly: #4ea4ff;
  --friendly-bg: #0f2a45;
  --enemy: #ff5a5a;
  --enemy-bg: #3d1416;
  --contested: #f2b33d;
  --contested-bg: #3a2b0d;
  --neutral: #8a9bab;
  --neutral-bg: #1a232d;
  --hub: #e8c766;
  --ok: #3ccf8e;
  --warn: #f2b33d;
  --bad: #ff5a5a;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 var(--sans); }
a { color: var(--friendly); }
button { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.pad { padding: 14px; }
.error { color: var(--bad); min-height: 1em; margin: 6px 0 0; }

/* ---------- top bar ---------- */
.bar {
  height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.mark { width: 12px; height: 12px; border: 2px solid var(--friendly); transform: rotate(45deg); }
.clock { font-family: var(--mono); font-size: 15px; display: flex; gap: 6px; align-items: baseline; }
.clock .lbl, .hint { color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.sources { display: flex; gap: 10px; }
.src { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.src i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.src.ok i { background: var(--ok); } .src.warn i { background: var(--warn); } .src.bad i { background: var(--bad); }
.spacer { flex: 1; }
.toggle { color: var(--muted); font-size: 12px; display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.btn {
  background: var(--friendly); color: #04121f; border: 0; border-radius: 4px; padding: 6px 11px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn.danger { background: transparent; color: var(--bad); border: 1px solid #5a2427; }
.user { display: flex; align-items: center; gap: 8px; }
.role { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); padding: 1px 6px; border-radius: 3px; }
.logout { color: var(--muted); text-decoration: none; font-size: 15px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 300px 1fr 390px; height: calc(100% - 48px); }
.left, .right { background: var(--bg-2); overflow-y: auto; }
.left { border-right: 1px solid var(--line); }
.right { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.panel { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel h2, .detail h3 {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; align-items: baseline;
}

/* ---------- timers ---------- */
.timers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.timer { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 9px; background: var(--panel); border-left: 3px solid var(--neutral); border-radius: 3px; cursor: pointer; }
.timer.friendly { border-left-color: var(--friendly); } .timer.enemy { border-left-color: var(--enemy); } .timer.contested { border-left-color: var(--contested); }
.timer .sys { font-weight: 600; }
.timer .cd { font-family: var(--mono); font-size: 14px; text-align: right; }
.timer .cd.soon { color: var(--warn); } .timer .cd.now { color: var(--bad); }
.timer .what { color: var(--muted); font-size: 12px; grid-column: 1 / -1; }
.timer.past { opacity: .5; }

/* ---------- hole control ---------- */
.hc { margin-bottom: 10px; cursor: pointer; }
.hc .name { font-size: 12px; margin-bottom: 4px; display: flex; justify-content: space-between; }
.hc .gap { color: var(--warn); font-size: 11px; }
.hc-bar { position: relative; height: 16px; background: repeating-linear-gradient(90deg, #2a1d10 0 4px, #231a10 4px 8px); border-radius: 2px; overflow: hidden; }
.hc-seg { position: absolute; top: 0; bottom: 0; background: #1c3a5a; border-right: 1px solid var(--bg-2); color: #bcd7f2; font-size: 10px; line-height: 16px; padding-left: 3px; white-space: nowrap; overflow: hidden; }
.hc-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--hub); }
.hc-ticks { display: flex; justify-content: space-between; color: var(--dim); font: 9px var(--mono); margin-top: 2px; }

/* ---------- BDA ---------- */
.bda { width: 100%; border-collapse: collapse; font-size: 12px; }
.bda th { color: var(--dim); font-weight: 600; text-align: right; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 0; }
.bda th:first-child { text-align: left; }
.bda td { padding: 4px 0; text-align: right; font-family: var(--mono); border-top: 1px solid var(--line); }
.bda td:first-child { text-align: left; font-family: var(--sans); }
.bda .f { color: var(--friendly); } .bda .e { color: var(--enemy); }
.bda-note { color: var(--dim); font-size: 11px; margin-top: 6px; }

/* ---------- map ---------- */
.map-wrap { position: relative; overflow: hidden; background:
  radial-gradient(circle at 50% 40%, #0f1720 0, var(--bg) 70%); }
#map { width: 100%; height: 100%; display: block; cursor: grab; }
#map:active { cursor: grabbing; }
.legend { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; background: rgba(11,15,20,.8); padding: 6px 10px; border-radius: 4px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.sw { width: 10px; height: 10px; border-radius: 2px; border: 2px solid; }
.sw.friendly { border-color: var(--friendly); } .sw.enemy { border-color: var(--enemy); }
.sw.contested { border-color: var(--contested); } .sw.neutral { border-color: var(--neutral); border-style: dashed; }
.ln { width: 18px; height: 0; border-top: 2px solid; }
.ln.fresh { border-color: #5b7a99; } .ln.reduced { border-color: var(--warn); } .ln.crit { border-color: var(--bad); }
.ln.eol { border-color: #b07cff; border-top-style: dashed; }
.map-tools { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); }

/* holdings */
.holdings { position: absolute; left: 12px; top: 12px; width: 300px; background: rgba(16,22,29,.94); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.hold-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.seg-toggle { display: flex; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.seg-toggle button { background: none; border: 0; color: var(--muted); font-size: 10.5px; padding: 3px 8px; cursor: pointer; letter-spacing: .04em; text-transform: none; }
.seg-toggle button.on { background: var(--panel-2); color: var(--text); }
.hold-row { margin-bottom: 9px; }
.hold-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.hold-label b { font-family: var(--mono); }
.hold-label .muted { font-size: 11px; }
.hold-bar { display: flex; gap: 2px; height: 22px; }
.hold-seg { height: 100%; border-radius: 3px; min-width: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; font: 600 10.5px var(--mono); color: #0b0f14; overflow: hidden; }
.hold-seg.unknown { background: repeating-linear-gradient(45deg, #26313d 0 3px, #1a222b 3px 6px) !important; color: var(--muted); }
.hold-seg.other { color: #e6edf3; }
.hold-seg:hover { filter: brightness(1.15); }
.hold-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); }
.hold-legend span { display: flex; align-items: center; gap: 4px; }
.hold-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.hold-legend i.unknown { background: repeating-linear-gradient(45deg, #3a4654 0 2px, #1a222b 2px 4px); }
.tip { position: fixed; z-index: 50; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 6px 9px; font-size: 12px; pointer-events: none; max-width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }

/* nodes */
.node { cursor: pointer; }
.node rect.card { fill: var(--panel); stroke: var(--neutral); stroke-width: 1.5; }
.node.chain rect.card { stroke-dasharray: 4 3; fill: var(--bg-2); }
.node.kspace rect.card { fill: #10161d; }
.node.friendly rect.card { stroke: var(--friendly); fill: #0f1d2c; }
.node.enemy rect.card { stroke: var(--enemy); fill: #22121499; }
.node.contested rect.card { stroke: var(--contested); fill: #241c0e; }
.node.selected rect.card { stroke-width: 3; }
.node .glow { fill: none; stroke: var(--bad); stroke-width: 2; opacity: 0; }
.node.hot .glow { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0; } 50% { opacity: .7; } }
.node text { fill: var(--text); font-family: var(--sans); pointer-events: none; }
.node .nm { font-weight: 700; font-size: 14px; }
.node .sub { fill: var(--muted); font-size: 10.5px; }
.node .cls { font: 700 11px var(--mono); }
.node .tag { font: 700 10px var(--sans); letter-spacing: .06em; }
.node .stat { font: 600 12px var(--mono); }
.node .stat.f { fill: var(--friendly); } .node .stat.e { fill: var(--enemy); } .node .stat.k { fill: var(--text); } .node .stat.t { fill: var(--warn); }
.node .hub rect { fill: #2b2410; stroke: var(--hub); }
.node .hub text { fill: var(--hub); font: 700 11px var(--mono); }
.link { stroke: #3e5266; stroke-width: 1.5; fill: none; opacity: .8; }
.link.reduced { stroke: var(--warn); } .link.crit { stroke: var(--bad); }
.link.eol { stroke-dasharray: 6 4; }
.link.eol:not(.reduced):not(.crit) { stroke: #b07cff; }
.link-label { fill: var(--muted); font: 600 9px var(--mono); }

/* ---------- right panel ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-2); z-index: 1; }
.tabs button { flex: 1; background: none; border: 0; color: var(--muted); padding: 11px; cursor: pointer; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--text); border-bottom-color: var(--friendly); }
.tab { overflow-y: auto; }
.detail section { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.detail .head h1 { margin: 0; font-size: 20px; display: flex; gap: 8px; align-items: baseline; }
.detail .head .meta { color: var(--muted); margin-top: 2px; }
.pill { display: inline-block; font: 700 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--muted); }
.pill.friendly { color: var(--friendly); border-color: #1f4b77; background: var(--friendly-bg); }
.pill.enemy { color: var(--enemy); border-color: #6a2226; background: var(--enemy-bg); }
.pill.contested { color: var(--contested); border-color: #6a4f15; background: var(--contested-bg); }
.pill.rel { color: var(--hub); border-color: #5a4b1f; }
.pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.notes { white-space: pre-wrap; background: var(--panel); padding: 8px 10px; border-radius: 3px; margin-top: 8px; }
.route { padding: 7px 9px; background: var(--panel); border-radius: 3px; margin-bottom: 6px; }
.route .r1 { display: flex; justify-content: space-between; align-items: baseline; }
.route .hubname { font-weight: 700; color: var(--hub); }
.route .j { font: 700 16px var(--mono); }
.route .r2 { color: var(--muted); font-size: 12px; margin-top: 2px; }
.route .warnline { color: var(--warn); font-size: 11.5px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.list li:first-child { border-top: 0; }
.list .r { color: var(--muted); text-align: right; white-space: nowrap; }
.shipsum { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.shipsum span { background: var(--panel-2); border-radius: 3px; padding: 2px 7px; font-size: 12px; }
.shipsum b { font-family: var(--mono); }
.structure { padding: 7px 9px; background: var(--panel); border-radius: 3px; margin-bottom: 6px; }
.structure .top { display: flex; justify-content: space-between; }
.structure .cd { font-family: var(--mono); color: var(--warn); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.more { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 9px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 52px 1fr auto; gap: 2px 10px; cursor: pointer; }
.feed li:hover { background: var(--panel); }
.feed .t { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.feed .w { font-size: 12.5px; }
.feed .v { font-family: var(--mono); text-align: right; }
.feed .s { grid-column: 2 / -1; color: var(--muted); font-size: 11.5px; }
.feed li.friendly { border-left: 3px solid var(--friendly); }
.feed li.enemy { border-left: 3px solid var(--enemy); }
.feed li.other { border-left: 3px solid var(--line-2); }
.feed li.sighting { border-left: 3px solid var(--contested); }
.badge { font: 700 9px var(--sans); letter-spacing: .06em; padding: 1px 4px; border-radius: 2px; background: var(--panel-2); color: var(--muted); margin-right: 4px; }
.badge.cap { background: #3a1f45; color: #d6a6ff; } .badge.str { background: #3a2b0d; color: var(--contested); }

/* dialog */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; width: min(520px, 94vw); padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog form { padding: 18px; }
dialog h3 { margin: 0 0 14px; }
.field { display: grid; gap: 4px; margin-bottom: 10px; }
.field label { color: var(--muted); font-size: 12px; }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--line-2); color: var(--text); border-radius: 4px; padding: 7px 9px; font: inherit;
}
.field textarea { min-height: 70px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* intel overlay */
.intel { position: fixed; inset: 48px 0 0 0; background: var(--bg); z-index: 20; display: flex; flex-direction: column; }
.intel-head { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.intel-head h2 { margin: 0 8px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.intel-head input[type=search], .intel-head select { background: var(--bg); border: 1px solid var(--line-2); color: var(--text); border-radius: 4px; padding: 6px 9px; font: inherit; }
.intel-head input[type=search] { width: 260px; }
.intel-body { flex: 1; display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
.intel-groups { border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 0; background: var(--bg-2); }
.intel-groups h3 { margin: 0 14px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.intel-groups ol { list-style: none; margin: 0; padding: 0; }
.intel-groups li { display: grid; grid-template-columns: 1fr auto; padding: 6px 14px; cursor: pointer; border-left: 3px solid transparent; }
.intel-groups li:hover { background: var(--panel); }
.intel-groups li.active { background: var(--panel-2); }
.intel-groups li.enemy { border-left-color: var(--enemy); } .intel-groups li.friendly { border-left-color: var(--friendly); }
.intel-groups .counts { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.intel-groups .n { font-family: var(--mono); color: var(--muted); }
.intel-table-wrap { overflow: auto; }
.intel-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.intel-table th { position: sticky; top: 0; background: var(--bg-2); text-align: left; color: var(--muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.intel-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.intel-table tr:hover td { background: var(--panel); }
.intel-table .sys { font-weight: 600; white-space: nowrap; }
.intel-table .owner.enemy { color: var(--enemy); } .intel-table .owner.friendly { color: var(--friendly); }
.intel-table .unconf { color: var(--warn); font-weight: 700; }
.intel-table .notes { color: var(--muted); max-width: 360px; }
.intel-table .num { font-family: var(--mono); text-align: right; }
.intel-table .acts { white-space: nowrap; text-align: right; }
.intel-table .acts .btn { margin-left: 4px; }
.intel-table .uncat td { color: var(--muted); }
.intel-table .uncat .sys { color: var(--text); }
.ev { max-width: 380px; }
.ev .who { font-weight: 600; }
.ev .detail { color: var(--muted); font-size: 11.5px; }
.ev .st { font: 700 9px var(--sans); letter-spacing: .06em; padding: 1px 5px; border-radius: 2px; margin-right: 5px; text-transform: uppercase; }
.ev .st.unnamed { background: #13304f; color: #8cc4ff; }
.ev .st.conflict { background: #3d1416; color: #ff9a9a; }
.ev .st.agrees { background: #123324; color: #7fe0b0; }
.ev .conf { color: var(--muted); font-size: 11px; }
.intel-groups li.special { color: var(--hub); }
.intel-groups .sep { border-top: 1px solid var(--line); margin: 6px 0; padding: 0; cursor: default; }
.parse-preview { color: var(--muted); font-size: 12px; margin-top: -4px; margin-bottom: 10px; }

/* plain pages (login) */
body.plain { display: grid; place-items: center; }
.plain-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 28px 32px; max-width: 460px; }
.plain-card h1 { margin-top: 0; font-size: 20px; }
.sso { display: inline-block; background: var(--friendly); color: #04121f; font-weight: 700; padding: 9px 14px; border-radius: 4px; text-decoration: none; }

@media (max-width: 1200px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: 55vh auto auto; height: auto; }
  .map-wrap { order: 0; height: 55vh; }
  .right { order: 1; border-left: 0; border-top: 1px solid var(--line); }
  .left { order: 2; border-right: 0; }
  .bar { flex-wrap: wrap; height: auto; padding: 8px 14px; }
  .toggle { display: none; }
}

/* forces */
.force { padding: 8px 10px; background: var(--panel); border-radius: 3px; margin-bottom: 7px; border-left: 3px solid var(--neutral); }
.force.enemy { border-left-color: var(--enemy); } .force.friendly { border-left-color: var(--friendly); }
.force.tier-aging { opacity: .85; } .force.tier-old { opacity: .65; }
.force .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.force .r1 { display: flex; gap: 6px; align-items: baseline; }
.force .r1 .cert { margin-left: auto; }
.force .fp { font: 700 15px var(--mono); }
.force .actions { margin-top: 6px; }
.force select.btn { padding: 3px 6px; background: transparent; color: var(--text); }
.trail { font-size: 12px; margin-top: 4px; color: var(--muted); }
.trail a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--dim); }
.cert { font: 700 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--muted); }
.cert.c-conf { color: #e6edf3; background: #7a2a2e; border-color: #9a3a3e; }
.cert.c-rep { color: var(--enemy); border-color: #6a2226; }
.cert.c-last { color: var(--muted); border-style: dashed; }
.cert.c-poss { color: var(--warn); border-color: #6a4f15; border-style: dashed; }
.cert.c-dep { color: var(--dim); }
.force.friendly .cert.c-conf { background: #1f4b77; border-color: #2c63a0; }
.eyes-list { background: #241c0e; }
.eyes-list li { cursor: pointer; }
.badge-n { background: var(--warn); color: #111; border-radius: 8px; padding: 0 6px; font: 700 10px var(--mono); margin-left: 4px; }
.dscan-preview { background: var(--panel); border-radius: 3px; padding: 7px 9px; margin: -4px 0 10px; font-size: 12px; }
.dscan-preview .up { color: var(--enemy); } .dscan-preview .down { color: var(--ok); }
.dscan-preview .cd { font-family: var(--mono); color: var(--warn); }
textarea.mono { font-family: var(--mono); font-size: 11px; }
.warnline { color: var(--warn); }

/* map: aging, movement, needs eyes */
.node.tier-aging { opacity: .8; } .node.tier-old { opacity: .55; }
.node .eyes rect { fill: #3a2a08; stroke: var(--warn); }
.node .eyes text { fill: var(--warn); font: 700 10px var(--mono); letter-spacing: .04em; }
.move { fill: none; stroke-width: 2; stroke-dasharray: 5 4; opacity: .9; }
.move.enemy { stroke: var(--enemy); } .move.friendly { stroke: var(--friendly); } .move.unknown { stroke: var(--muted); }
.move.old { opacity: .45; }
.ln.mv { border-top: 2px dashed var(--enemy); }
.fade-key { color: var(--dim); }