/* LE OSINT Framework — Investigation Desk */
:root {
  --bg: #EEF1EF;
  --panel: #FFFFFF;
  --panel-2: #F5F7F6;
  --ink: #17211E;
  --muted: #5B6B66;
  --line: #D4DCD9;
  --rail: #13201C;
  --rail-2: #1B2B26;
  --rail-ink: #E6EEEB;
  --rail-muted: #8FA39C;
  --accent: #0E7C6B;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEFEA;
  --warn: #A7650A;
  --warn-soft: #F6E9D2;
  --ok: #1F7A4D;
  --bad: #B3261E;
  --chip: #E7ECEA;
  --web: #C6D2CE;
  --canvas: #F7F7F4;
  --dot: #CFD3D6;
  --conn: #5C6670;
  --edge: #9FB2AC;
  --display: "Archivo Narrow", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font: "Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C1412; --panel: #131D1A; --panel-2: #18241F; --ink: #E1EAE7; --muted: #92A59F; --line: #24332E;
    --rail: #08100E; --rail-2: #12201C; --rail-ink: #E1EAE7; --rail-muted: #7F958E;
    --accent: #3FBFA8; --accent-ink: #07201B; --accent-soft: #16352E; --warn: #E3A441; --warn-soft: #3A2C14;
    --ok: #5CC48E; --bad: #F2867D; --chip: #1E2B27; --web: #22332E; --edge: #3E5750; --canvas: #161B20; --dot: #2C343C; --conn: #8A96A2;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C1412; --panel: #131D1A; --panel-2: #18241F; --ink: #E1EAE7; --muted: #92A59F; --line: #24332E;
  --rail: #08100E; --rail-2: #12201C; --rail-ink: #E1EAE7; --rail-muted: #7F958E;
  --accent: #3FBFA8; --accent-ink: #07201B; --accent-soft: #16352E; --warn: #E3A441; --warn-soft: #3A2C14;
  --ok: #5CC48E; --bad: #F2867D; --chip: #1E2B27; --web: #22332E; --edge: #3E5750; --canvas: #161B20; --dot: #2C343C; --conn: #8A96A2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--ink); }
body { margin: 0; font: 15px/1.5 var(--font); }
a { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
abbr { text-decoration: none; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.rail {
  background: var(--rail); color: var(--rail-ink);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 20px 14px 18px; display: flex; flex-direction: column; gap: 10px;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 0 6px 8px; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--accent); position: relative;
}
.brand .mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--accent); }
.brand strong { display: block; font: 700 20px/1.1 var(--display); letter-spacing: .01em; }
.brand small { display: block; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rail-muted); }
.rail-label { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rail-muted); margin: 6px 6px 0; }
.lanes { display: flex; flex-direction: column; gap: 2px; }
.lane {
  display: grid; grid-template-columns: 1fr auto; gap: 0 8px; text-align: left; width: 100%;
  background: none; border: 0; color: var(--rail-ink); cursor: pointer; padding: 9px 10px; border-radius: 8px;
  font: inherit;
}
.lane:hover { background: var(--rail-2); }
.lane.on { background: var(--rail-2); box-shadow: inset 3px 0 0 var(--accent); }
.lane-name { font: 600 15px/1.25 var(--font); }
.lane-q { grid-column: 1 / -1; font-size: 12.5px; color: var(--rail-muted); line-height: 1.35; }
.lane-n { grid-row: 1; grid-column: 2; font: 11px var(--mono); color: var(--rail-muted); align-self: center; white-space: nowrap; }
.lane-n b { color: var(--accent); font-weight: 600; }
.rail-tools { display: grid; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rail-2); }
.rail-tools button {
  font: 500 14px var(--font); text-align: left; color: var(--rail-ink); background: var(--rail-2);
  border: 1px solid transparent; border-radius: 8px; padding: 9px 12px; cursor: pointer;
}
.rail-tools button.on, .rail-tools button:hover { border-color: var(--accent); }
.rail-stats { margin-top: auto; font: 11px/1.5 var(--mono); color: var(--rail-muted); padding: 10px 6px 0; }

.main { min-width: 0; }
main { padding-inline: 28px; padding-block: 8px 64px; max-width: 1180px; }

/* ---------- command bar ---------- */
.cmd-wrap {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg);
  padding: 22px 28px 12px; max-width: 1180px; border-bottom: 1px solid var(--line);
}
.cmd {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 6px 6px 8px;
}
.cmd:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cmd input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink);
  font: 500 18px/1.2 var(--mono); padding: 12px 4px;
}
.cmd input::placeholder { font-family: var(--font); font-size: 15px; color: var(--muted); }
.type-chip {
  flex: 0 0 auto; font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  padding: 9px 12px; border-radius: 8px; border: 1px dashed var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer;
}
.type-chip.set { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.type-chip.forced::after { content: " ✎"; }
.cmd-clear { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 24px; cursor: pointer; }
.cmd-clear:hover { background: var(--chip); }
.type-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(560px, 100%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.type-menu button { font: 13px var(--font); text-align: left; background: none; border: 0; color: var(--ink); padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.type-menu button:hover { background: var(--accent-soft); }
.examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.examples button { font: 12px var(--mono); border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.examples button:hover { border-color: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.legend li { display: flex; gap: 5px; align-items: center; }

.flag { display: inline-block; font: 600 10.5px/1 var(--mono); padding: 3px 4px; border-radius: 3px; background: var(--chip); color: var(--muted); min-width: 16px; text-align: center; }
.flag.f-L { background: var(--ink); color: var(--bg); }
.flag.f-A, .flag.f-P { background: var(--warn-soft); color: var(--warn); }
.leplus { font: 600 10px/1 var(--mono); letter-spacing: .06em; padding: 3px 5px; border-radius: 3px; background: var(--warn-soft); color: var(--warn); vertical-align: middle; }

/* ---------- desk ---------- */
.desk-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin: 22px 0 18px; }
.eyebrow { margin: 0 0 2px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.desk-head h2 { margin: 0; font: 700 30px/1.1 var(--display); text-wrap: balance; }
.desk-head h2.sel { font: 600 24px/1.2 var(--mono); overflow-wrap: anywhere; }
.desk-head input[type="search"] {
  font: 14px var(--font); padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); width: min(320px, 100%);
}
.cats { columns: 2 380px; column-gap: 20px; }
.cat { break-inside: avoid; margin: 0 0 22px; }
.cat h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--ink);
  font: 700 18px/1.2 var(--display);
}
.cat-n { margin-left: auto; font: 11px var(--mono); color: var(--muted); }
.note { font-size: 12.5px; color: var(--muted); background: var(--panel-2); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.srcs { list-style: none; margin: 0; padding: 0; }
.src {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px;
  min-width: 0;
}
.src:last-child { border-bottom: 0; }
.src-name { font-weight: 500; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.src-name:hover { color: var(--accent); text-decoration: underline; }
.src-where { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.src .flags { margin-left: auto; display: inline-flex; gap: 3px; flex: 0 0 auto; }
.filled { font: 600 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 3px; flex: 0 0 auto; }
.empty { color: var(--muted); padding: 24px 0; max-width: 60ch; }

/* run sheet */
.run-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.progress { width: 160px; height: 8px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.prog-txt { font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.btn { font: 500 13px var(--font); padding: 7px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tip { margin: -6px 0 18px; font-size: 13.5px; }
.run-lane { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 10px; margin-bottom: 16px; scroll-margin-top: 190px; }
.run-lane > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; font: 700 20px var(--display); }
.run-lane > h3 small { font: 13px var(--font); color: var(--muted); }
.run-group h4 { margin: 12px 0 2px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.run-group { columns: 1; }
.tick { display: inline-flex; flex: 0 0 auto; }
.tick input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.src.done .src-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.log-btn { flex: 0 0 auto; font: 600 11px var(--mono); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; }
.log-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- toolbox ---------- */
.tb-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tb-nav a { font-size: 13px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--panel); color: var(--ink); }
.tb-nav a:hover { border-color: var(--accent); }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.tool { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; scroll-margin-top: 190px; min-width: 0; }
.tool.wide { grid-column: 1 / -1; }
.tool h2 { font: 700 20px var(--display); margin: 0 0 4px; }
.tool > p { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.form { display: grid; gap: 8px; }
.form .row { display: flex; flex-wrap: wrap; gap: 8px; }
.form .row > * { flex: 1 1 160px; min-width: 0; }
.form label { font-size: 12px; color: var(--muted); display: grid; gap: 3px; }
.form input, .form textarea, .form select {
  font: 14px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--ink); width: 100%;
}
.form textarea { font-family: var(--mono); font-size: 13px; min-height: 80px; resize: vertical; }
.out { font: 13px/1.55 var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 2.6em; margin: 0; }
.out .ok { color: var(--ok); font-weight: 600; }
.out .bad { color: var(--bad); font-weight: 600; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--panel-2); }
td.mono { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hint { font-size: 13px; color: var(--muted); }
.tool .btn { background: var(--panel); color: var(--ink); border-color: var(--line); }
.tool .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- about ---------- */
.about { max-width: 760px; padding-top: 12px; }
.about h2 { font: 700 30px var(--display); margin: 14px 0 8px; }
.about h3 { font: 700 19px var(--display); margin: 22px 0 6px; }
.about p, .about li { max-width: 68ch; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 8px; font-size: 13px; z-index: 50;
}

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; padding: 14px 16px; }
  .lanes { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .lane { flex: 0 0 auto; width: auto; background: var(--rail-2); grid-template-columns: auto auto; }
  .lane-q { display: none; }
  .rail-tools { grid-template-columns: 1fr 1fr; margin-top: 4px; }
  .rail-stats { display: none; }
  .cmd-wrap { padding: 12px 16px 10px; }
  main { padding-inline: 16px; }
  .cmd input { font-size: 16px; }
  .src-where { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- playbooks ---------- */
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.pb-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; cursor: pointer; display: grid; gap: 6px; font: inherit; color: var(--ink); }
.pb-card:hover { border-color: var(--accent); }
.pb-card h3 { margin: 0; font: 700 19px/1.2 var(--display); }
.pb-card p { margin: 0; font-size: 13.5px; color: var(--muted); }
.pb-card .pb-meta { font: 11px var(--mono); color: var(--accent); }
.pb-back { background: none; border: 0; color: var(--accent); cursor: pointer; font: 600 13px var(--font); padding: 0; margin-top: 18px; }
.pb-phase { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.pb-phase > h3 { margin: 0 0 6px; font: 700 20px var(--display); display: flex; gap: 10px; align-items: baseline; }
.pb-phase > h3 small { font: 600 11px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pb-step { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pb-step:first-of-type { border-top: 0; }
.pb-step .tick { grid-row: span 3; padding-top: 2px; }
.pb-step .t { font-weight: 600; }
.pb-step.done .t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.pb-step .why { font-size: 13px; color: var(--muted); }
.pb-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-links a { font-size: 13px; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--ink); background: var(--panel-2); }
.pb-links a:hover { border-color: var(--accent); color: var(--accent); }
.pb-links a.tool-link { border-style: dashed; color: var(--accent); }
.profile-frame { width: 100%; height: calc(100vh - 230px); min-height: 640px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: block; }

/* ---------- spider-web map ---------- */
.web-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 16px 0 10px; }
.web-bar input[type="search"] { font: 14px var(--font); padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); flex: 1 1 240px; max-width: 340px; }
.web-btns { display: flex; gap: 6px; }
.web-btns .btn { min-width: 38px; }
.web-wrap {
  position: relative; height: calc(100vh - 250px); min-height: 520px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, var(--panel) 0%, var(--bg) 75%); touch-action: none; cursor: grab;
}
.web-wrap.dragging { cursor: grabbing; }
#web { width: 100%; height: 100%; display: block; user-select: none; }
#web .thread { fill: none; stroke: var(--web); stroke-width: 1; }
#web .anchor { stroke: var(--web); stroke-width: 1; }
#web .edge { fill: none; stroke: var(--edge); stroke-width: 1.3; }
#web .edge.l2 { stroke-width: 1; }
#web .node { cursor: pointer; }
#web .node circle { stroke-width: 2; }
#web .n0 circle { fill: var(--ink); stroke: var(--accent); stroke-width: 4; }
#web .n0 text { fill: var(--bg); stroke: none; font: 700 15px var(--display); letter-spacing: .04em; }
#web .n1 circle { fill: var(--accent); stroke: var(--panel); }
#web .n1.open circle { fill: var(--panel); stroke: var(--accent); stroke-width: 3; }
#web .n2 circle { fill: var(--panel); stroke: var(--accent); }
#web .n2.closed circle { fill: var(--accent-soft); }
#web .n2.le circle { stroke: var(--warn); }
#web .n3 circle { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5; }
#web .n3.filled circle { fill: var(--accent); stroke: var(--accent); }
#web text { fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
#web .n1 text { font: 700 16px var(--display); }
#web .n2 text { font: 600 13.5px var(--font); }
#web .n3 text { font: 500 12.5px var(--font); fill: var(--accent); }
#web .n3.filled text { font-weight: 700; }
#web .node:hover text, #web .node:focus text { text-decoration: underline; }
#web .hit circle { stroke: var(--warn) !important; stroke-width: 4 !important; }
#web .hit text { fill: var(--warn) !important; font-weight: 700; }
#web .badge { fill: var(--accent-ink); font: 700 10px var(--mono); stroke: none; }
#web .flagtxt { font: 600 10px var(--mono); fill: var(--warn); stroke-width: 3px; }

/* ---------- Mural-style flow chart ---------- */
.flow-wrap {
  position: relative; height: calc(100vh - 250px); min-height: 520px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background-color: var(--canvas); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.3px); background-size: 22px 22px;
  touch-action: none; cursor: grab;
}
.flow-wrap.dragging { cursor: grabbing; }
#flow { width: 100%; height: 100%; display: block; user-select: none; }
#flow .conn { fill: none; stroke: var(--conn); stroke-width: 2; }
#flow .conn.c3 { stroke-width: 1.5; }
#flow .card { cursor: pointer; }
#flow .card rect.body { stroke: rgba(0,0,0,.08); stroke-width: 1; }
#flow .card text { fill: #1E2328; font-family: var(--font); pointer-events: none; }
#flow .card .t1 { font: 700 17px var(--font); }
#flow .card .t2 { font: 600 14px var(--font); }
#flow .card .t3 { font: 500 13.5px var(--font); }
#flow .card .sub { font: 500 11.5px var(--mono); fill: #4A525A; }
#flow .card .plus { font: 700 16px var(--font); fill: #1E2328; }
#flow .card .flg { font: 700 10.5px var(--mono); fill: #8A4B00; }
#flow .card:hover rect.body, #flow .card:focus rect.body { stroke: #1E2328; stroke-width: 2; }
#flow .card.hit rect.body { stroke: #D9480F; stroke-width: 3.5; }
#flow .card.filled rect.body { stroke: #0E7C6B; stroke-width: 3; }
#flow .shadow { fill: rgba(0,0,0,.10); }

/* notes, new badge, F flag */
.src { flex-wrap: wrap; }
.src-note { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); line-height: 1.4; padding-left: 0; }
.run-lane .src-note { padding-left: 28px; }
.newb { font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); background: var(--warn-soft); padding: 2px 5px; border-radius: 3px; flex: 0 0 auto; }
.flag.f-F { background: var(--accent-soft); color: var(--accent); }

/* ---------- ports directory ---------- */
.ports-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 12px; }
.pf { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.pf input { font: 14px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); width: min(260px, 100%); }
.pf .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pf .chips button { font: 13px var(--font); border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.pf .chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pchk { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink); padding-bottom: 8px; }
.ports-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.ports-actions { display: flex; gap: 6px; }
.ports-tbl td { font-size: 13.5px; }
.ports-tbl .mono { font-family: var(--mono); font-size: 12.5px; }
.code-btn { font: 600 13px var(--mono); letter-spacing: .04em; background: var(--accent-soft); color: var(--ink); border: 0; border-radius: 6px; padding: 3px 7px; cursor: pointer; }
.code-btn:hover { outline: 1px solid var(--accent); }
.sz { font: 600 11px var(--mono); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.sz-L { background: var(--ink); color: var(--bg); }
.sz-M { background: var(--accent-soft); color: var(--accent); }
.sz-S, .sz-VS { background: var(--chip); color: var(--muted); }

/* ---------- top navigation ---------- */
.topnav { display: flex; gap: 4px; overflow-x: auto; margin: -8px 0 12px; padding-bottom: 2px; scrollbar-width: thin; }
.topnav button { flex: 0 0 auto; font: 600 13.5px var(--font); color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.topnav button:hover { color: var(--ink); border-color: var(--accent); }
.topnav button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rail-tools.top { margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--rail-2); }
@media (max-width: 900px) { .rail-tools.top { display: none; } }

/* ---------- HS codes ---------- */
.pf select { font: 14px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); max-width: 100%; width: min(340px, 100%); }
.hs-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.hs-crumb button, .hs-open { font: 600 12.5px var(--font); background: none; border: 0; color: var(--accent); cursor: pointer; padding: 2px 0; text-align: left; }
.hs-crumb button:hover, .hs-open:hover { text-decoration: underline; }
.hs-l2 td { background: var(--panel-2); font-weight: 600; }
.hs-l6 td:first-child { padding-left: 22px; }
.hs-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hs-tag { font: 600 10.5px var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--chip); color: var(--muted); }
.hs-P, .hs-D { background: #F8D7D3; color: #8A1C12; }
.hs-W { background: var(--ink); color: var(--bg); }
.hs-C { background: var(--warn-soft); color: var(--warn); }
.hs-V { background: #E8DDF6; color: #4B2A7A; }
.hs-X, .hs-M { background: var(--accent-soft); color: var(--accent); }
.topnav .theme-btn { margin-left: auto; border-style: dashed; }

/* Shipping lines */
.ln-combo { position: relative; }
.ln-inputwrap { display: flex; }
.ln-inputwrap input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ln-toggle { border: 1px solid var(--line); border-left: 0; background: var(--panel-2); color: var(--ink); padding: 0 12px; border-radius: 0 8px 8px 0; cursor: pointer; font-size: 14px; }
.ln-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 340px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ln-list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.ln-list li small { color: var(--muted); font-size: 12px; }
.ln-list li code { font: 600 12px var(--mono); color: var(--muted); }
.ln-list li[aria-selected="true"], .ln-list li:hover { background: var(--accent-soft); }
.ln-list li.ln-old span { color: var(--muted); }
.ln-ident { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 14px; line-height: 1.6; }
.ln-ident .ok { color: var(--ok); font-weight: 700; } .ln-ident .bad { color: var(--bad); font-weight: 700; }
.ln-note { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 60ch; }
.ln-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
.ln-al { font-size: 12px; color: var(--accent); font-weight: 600; }
tr.ln-old td { opacity: .78; }
.ln-combo .ln-inputwrap input { width: auto; }
@media (min-width: 900px) { .topnav { flex-wrap: wrap; overflow: visible; row-gap: 6px; } }

/* Flight tracker */
.fl-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 8px; }
.fl-bar .pf input { width: 100%; font-family: var(--mono); letter-spacing: .02em; }
.fl-bar .pf select { font: 14px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.fl-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
.fl-status { font-size: 13px; font-weight: 600; color: var(--muted); }
.fl-status.ok { color: var(--ok); } .fl-status.bad { color: var(--bad); } .fl-status.warn { color: #B26B00; }
.fl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
.fl-map { height: min(68vh, 620px); min-height: 380px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-2); z-index: 0; }
.fl-info { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; max-height: min(68vh, 620px); overflow: auto; }
.fl-title { margin: 0 0 2px; font: 700 22px var(--mono); letter-spacing: .02em; }
.fl-airline { margin: 0 0 10px; font-weight: 600; }
.fl-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.fl-route b { display: block; font: 700 20px var(--mono); } .fl-route small { color: var(--muted); font-size: 12px; } .fl-route > span { color: var(--muted); font-size: 18px; }
.fl-route div:last-child { text-align: right; }
.fl-prog { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 6px 0 4px; } .fl-prog span { display: block; height: 100%; background: var(--accent); }
.fl-tbl { width: 100%; border-collapse: collapse; margin: 8px 0; } .fl-tbl th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 8px 4px 0; width: 42%; vertical-align: top; } .fl-tbl td { padding: 4px 0; }
.fl-tbl .bad { color: var(--bad); }
.fl-alert { background: var(--bad); color: #fff; font-weight: 700; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; }
.fl-photo { width: 100%; border-radius: 8px; margin: 6px 0; display: block; }
.fl-links { line-height: 1.8; } .fl-actions { margin: 8px 0; }
.fl-pick { list-style: none; margin: 0; padding: 0; } .fl-pick button { width: 100%; text-align: left; font: 13.5px var(--font); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 6px; color: var(--ink); cursor: pointer; }
.fl-plane svg { fill: #1B6FD1; stroke: #fff; stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.fl-plane.sel svg { fill: #E0761F; } .fl-plane.emerg svg { fill: #D62B1F; }
.fl-ap span { display: inline-block; transform: translate(-50%, -50%); background: #1c2a26; color: #fff; font: 700 11px var(--mono); padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.leaflet-container { font: 12px var(--font); }
@media (max-width: 900px) { .fl-grid { grid-template-columns: 1fr; } .fl-info { max-height: none; } .fl-map { height: 58vh; } }
.fl-tabs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
.fl-tabs button { font: 600 13px var(--font); border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.fl-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fl-tabs .hint { font-size: 12.5px; }
.fl-mapbox { min-width: 0; }
.fl-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.fl-set { margin-top: 14px; font-size: 13.5px; } .fl-set summary { cursor: pointer; font-weight: 600; }
.fl-set .pf input { width: 100%; }
.fl-launch { background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.fl-launch-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-launch .btn { text-decoration: none; display: inline-flex; align-items: center; }
.fl-launch .fl-go { font-size: 15px; padding: 9px 16px; }
.fl-launch .hint { margin: 8px 0 0; }
.fl-alt { margin: 8px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.fl-pick-map { margin-left: auto; font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.fl-pick-map select { font: 13px var(--font); padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }

/* Stolen vehicles */
.mono-in { font-family: var(--mono) !important; letter-spacing: .04em; text-transform: uppercase; }
#stolen .ports-bar .pf input { width: 100%; }
.sv-dec { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.sv-dec-main { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 8px; }
.sv-vin { font: 700 22px var(--mono); letter-spacing: .08em; }
.sv-vin span, .sv-legend span { border-radius: 3px; padding: 0 1px; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; }
.sv-legend span { padding: 1px 6px; }
.pw { background: #DCEBF8; color: #18456E; } .pd { background: #E7F2E4; color: #2D5A24; } .pc { background: #FBE3C8; color: #8A4B06; } .py { background: #EEDFF7; color: #5B2C7A; } .pp { background: #F9DDE3; color: #8A2238; } .ps { background: #ECEEEE; color: #3C4643; }
:root[data-theme="dark"] .pw, :root[data-theme="dark"] .pd, :root[data-theme="dark"] .pc, :root[data-theme="dark"] .py, :root[data-theme="dark"] .ps, :root[data-theme="dark"] .pp { filter: invert(.88) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pw, :root:not([data-theme="light"]) .pd, :root:not([data-theme="light"]) .pc, :root:not([data-theme="light"]) .py, :root:not([data-theme="light"]) .ps, :root:not([data-theme="light"]) .pp { filter: invert(.88) hue-rotate(180deg); } }
.sv-tbl { border-collapse: collapse; font-size: 13.5px; width: 100%; max-width: 860px; }
.sv-tbl th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 14px 4px 0; width: 240px; vertical-align: top; }
.sv-tbl td { padding: 4px 0; }
.sv-dec .ok, #sv-count .ok { color: var(--ok); font-weight: 700; } .sv-dec .bad, #sv-count .bad { color: var(--bad); font-weight: 700; }
.sv-table td { vertical-align: top; }
.sv-table tr.sv-first td { border-top: 2px solid var(--line); }
.sv-cc-td b { font-size: 13px; }
.sv-name { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
.sv-name:hover { text-decoration: underline; }
.sv-need, .sv-unv { font: 600 11px var(--mono); padding: 2px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.sv-need.plate { background: var(--chip, #E8ECEA); color: var(--muted); }
.sv-unv { background: var(--warn-soft); color: var(--warn); }
.sv-who { margin: 2px 0; font-size: 12.5px; color: var(--muted); }
.sv-note { font-size: 13px; max-width: 70ch; }
.sv-act { white-space: nowrap; } .sv-act .btn { text-decoration: none; display: inline-block; }
.sv-sel { font: 13px var(--font); padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); max-width: 100%; }
.sv-table tr.r-clear .sv-sel { border-color: var(--ok); color: var(--ok); font-weight: 600; }
.sv-table tr.r-hit td { background: color-mix(in srgb, var(--bad) 10%, transparent); } .sv-table tr.r-hit .sv-sel { border-color: var(--bad); color: var(--bad); font-weight: 700; }
.sv-warn { background: var(--warn-soft); color: var(--ink); border-left: 4px solid var(--warn); border-radius: 8px; padding: 12px 14px; margin: 16px 0; font-size: 13.5px; line-height: 1.55; }
.sv-h { margin: 18px 0 2px; font-size: 16px; }
.sv-ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.sv-cc { font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; }
#stolen .ports-bar select { font: 14px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }

/* Precursors */
#precursors .ports-bar .pf input { width: 100%; }
#precursors .ports-bar select { font: 14px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.pc-count { font-weight: 600; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.pc-card { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--muted); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; }
.pc-card.t-I { border-left-color: var(--bad); } .pc-card.t-II { border-left-color: var(--warn); }
.pc-status { font: 700 12.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pc-card.t-I .pc-status { color: var(--bad); } .pc-card.t-II .pc-status { color: var(--warn); }
.pc-name { margin: 4px 0 2px; font-size: 21px; }
.pc-syn { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; font-size: 14px; }
.pc-k { display: block; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.pc-drugs { display: flex; flex-wrap: wrap; gap: 5px; }
.pc-drug { font: 600 13px var(--font); border: 1px solid var(--line); background: var(--accent-soft); color: var(--ink); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.pc-drug:hover { border-color: var(--accent); }
.pc-note { margin: 10px 0 4px; font-size: 13.5px; }
.pc-links { margin: 6px 0 0; font-size: 13px; }
.pc-badge { font: 600 11.5px var(--mono); padding: 2px 7px; border-radius: 5px; white-space: nowrap; background: var(--chip, #E8ECEA); color: var(--muted); }
.pc-badge.t-I { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); } .pc-badge.t-II { background: var(--warn-soft); color: var(--warn); }
.pc-open { font: 600 14px var(--font); background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-align: left; }
.pc-open:hover { color: var(--accent); text-decoration: underline; }
.pc-table td { vertical-align: top; font-size: 13.5px; }
.pc-miss { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--muted); border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.pc-miss ul { margin: 8px 0; padding-left: 18px; }
.pc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 16px; }
.pc-info > div { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.pc-related { font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sv-fix { background: var(--warn-soft); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sv-how { margin: 6px 0 14px; padding: 10px 14px 10px 34px; background: var(--accent-soft); border-radius: 10px; font-size: 13.5px; line-height: 1.6; }
.flow-wrap, .web-wrap { position: relative; touch-action: none; }
.zoom-fab { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.15); overflow: hidden; z-index: 5; }
.zoom-fab button { width: 48px; height: 48px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 24px/1 var(--font); cursor: pointer; }
.zoom-fab button:last-child { border-bottom: 0; font-size: 20px; }
.zoom-fab button:hover, .zoom-fab button:active { background: var(--accent-soft); }

/* ---- Air cargo tab ---- */
.ac-box { margin: 0 0 22px; }
.ac-box h3 { margin: 0 0 8px; font-size: 17px; }
.ac-box .tbl-wrap { max-height: 520px; overflow: auto; }

/* ---- Risk checklist ---- */
.rk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-sum { position: sticky; top: 0; z-index: 2; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; margin-bottom: 12px; font-size: 14px; }
.rk-sum.has { border-color: var(--accent); }
.rk-sum.has-strong { border-color: var(--warn); background: var(--warn-soft); }
.rk-group h3 { font-size: 15px; margin: 16px 0 6px; }
.rk-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rk-item label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font-size: 14px; line-height: 1.45; }
.rk-item input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); }
.rk-item.on label { border-color: var(--accent); background: var(--accent-soft); }
.rk-strong { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); background: var(--warn-soft); border: 1px solid var(--warn); padding: 1px 6px; border-radius: 4px; }
.rk-src { margin-top: 10px; font-size: 13px; }
.rk-src li { margin: 3px 0; }

/* ---- Case summary ---- */
.cs-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; margin: 0 0 14px; background: var(--panel); min-width: 0; }
.cs-group legend { font-weight: 600; padding: 0 6px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px 14px; }
.cs-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.cs-f.wide { grid-column: 1 / -1; }
.cs-f input, .cs-f select, .cs-f textarea { font: 15px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0; }
.cs-f textarea { resize: vertical; }
#case-print { display: none; }
@media print {
  body.print-case > *:not(#case-print) { display: none !important; }
  body.print-case { background: #fff !important; }
  body.print-case #case-print { display: block; color: #000; font: 11pt/1.4 Verdana, Arial, sans-serif; }
  #case-print h1 { font-size: 16pt; margin: 0 0 2pt; }
  #case-print h2 { font-size: 12pt; margin: 12pt 0 4pt; border-bottom: 1px solid #000; }
  #case-print table { width: 100%; border-collapse: collapse; }
  #case-print th { text-align: left; width: 32%; vertical-align: top; padding: 3pt 6pt 3pt 0; font: 600 10pt Verdana, Arial, sans-serif; text-transform: none; letter-spacing: 0; color: #000; background: none; }
  #case-print td { padding: 3pt 0; vertical-align: top; }
  #case-print tr { break-inside: avoid; }
  #case-print .cp-meta { font-size: 9pt; color: #444; margin: 0; }
  #case-print .cp-foot { margin-top: 30pt; }
}