/* callcops.fun · app.css
   Dispatch: a dark console lit by a light bar. One stylesheet, no framework.
   Red is alarm and the main action, blue is information and links, amber is money at an exchange and the human review step, green is live and verified.
   Naming rule: every section and every block is named ABOVE its frame (section head .sh, block caption .cap). Nothing is titled inside a frame.
   Sections: 1 tokens · 2 fonts · 3 base · 4 graphic elements · 5 buttons · 6 header, footer · 7 heads · 8 hero and map · 9 wanted · 10 live cases
   11 check · 12 pipeline, answers, safety · 13 forms · 14 case · 15 track, pack · 16 docs pages · 17 modal, toast, states · 18 responsive */

/* ---------- 1 tokens ---------- */
:root {
  --bg: #090C11; --sf: #0F141B; --sf2: #151C25; --sf3: #1C2531; --ln: #222B37; --ln2: #313D4D;
  --fg: #E8EDF4; --fgl: #B8C2D0; --mu: #7D8899; --mu2: #5A6576;
  --red: #FF3B4E; --red-h: #FF5868; --blue: #3B82FF; --amber: #FFB020; --green: #34D399; --code: #05070A;
  --red-t: rgba(255,59,78,.12); --blue-t: rgba(59,130,255,.12); --amber-t: rgba(255,176,32,.12); --green-t: rgba(52,211,153,.12);
  --head: "Chakra Petch", system-ui, sans-serif; --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 3vw, 28px); --maxw: 1240px; --cut: 10px;
  color-scheme: dark;
}

/* ---------- 2 fonts (self-hosted, latin) ---------- */
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/chakra-petch-500.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/chakra-petch-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ---------- 3 base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }
code, kbd, pre { font-family: var(--mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.08; letter-spacing: .005em; text-wrap: balance; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--red); color: #FFF; padding: 8px 12px; font-weight: 600; } .skip:focus { left: 8px; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note { font-family: var(--mono); font-size: 12px; color: var(--mu); line-height: 1.6; }
.num { font-variant-numeric: tabular-nums; }
.page { max-width: var(--maxw); margin: 0 auto; padding: 44px var(--gutter) 72px; display: grid; gap: 64px; }
.page.tight { gap: 28px; }
section.sec { display: grid; gap: 22px; min-width: 0; align-content: start; scroll-margin-top: 90px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.col { display: grid; gap: 28px; min-width: 0; align-content: start; }

/* ---------- 4 graphic elements ---------- */
/* light bar: under the header, and as the tick in front of every section label */
.lbar { height: 3px; background: linear-gradient(90deg, var(--red) 0 25%, var(--blue) 25% 50%, var(--red) 50% 75%, var(--blue) 75%); background-size: 200% 100%; animation: lbar 2.4s linear infinite; box-shadow: 0 0 18px rgba(59,130,255,.45); }
@keyframes lbar { to { background-position: -200% 0; } }
.tick { display: inline-flex; gap: 2px; flex: none; } .tick::before, .tick::after { content: ""; width: 7px; height: 4px; border-radius: 1px; background: var(--red); } .tick::after { background: var(--blue); }
/* target brackets: around every suspect avatar and every highlighted object */
.tgt { --c: var(--mu2); --s: 10px; position: relative; display: inline-grid; padding: 6px; flex: none;
  background: linear-gradient(var(--c), var(--c)) top left / var(--s) 2px, linear-gradient(var(--c), var(--c)) top left / 2px var(--s), linear-gradient(var(--c), var(--c)) top right / var(--s) 2px, linear-gradient(var(--c), var(--c)) top right / 2px var(--s),
    linear-gradient(var(--c), var(--c)) bottom left / var(--s) 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--s), linear-gradient(var(--c), var(--c)) bottom right / var(--s) 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--s);
  background-repeat: no-repeat; transition: padding .2s ease; }
.tgt.red { --c: var(--red); } .tgt.blue { --c: var(--blue); } .tgt.amber { --c: var(--amber); }
.av { display: block; width: 44px; height: 44px; border-radius: 4px; overflow: hidden; flex: none; } .av svg { width: 100%; height: 100%; }
.av.xs { width: 28px; height: 28px; border-radius: 3px; } .av.sm { width: 36px; height: 36px; } .av.md { width: 64px; height: 64px; } .av.lg { width: 112px; height: 112px; } .av.xl { width: 160px; height: 160px; border-radius: 6px; }
/* wallet plate */
.plate { display: inline-flex; align-items: stretch; max-width: 100%; font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--ln2); border-radius: 3px; background: var(--code); overflow: hidden; vertical-align: middle; }
.plate i { flex: none; font-style: normal; font-size: 9.5px; letter-spacing: .12em; color: var(--mu); background: var(--sf2); padding: 3px 6px; border-right: 1px solid var(--ln2); display: grid; place-items: center; }
.plate span { padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .plate.full span { white-space: normal; word-break: break-all; }
.plate .cp { border-left: 1px solid var(--ln2); border-radius: 0; }
.cno { font-family: var(--mono); font-size: 11.5px; color: var(--mu); letter-spacing: .04em; } .cno b { color: var(--fgl); font-weight: 500; }
.rk { font-family: var(--head); font-weight: 700; color: var(--red); }
/* status chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 2px; white-space: nowrap; line-height: 1.4; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.moving, .chip.alarm { color: var(--red); background: var(--red-t); } .chip.exchange, .chip.review, .chip.pending { color: var(--amber); background: var(--amber-t); }
.chip.dormant, .chip.closed { color: var(--mu); background: rgba(125,136,153,.14); } .chip.dispute, .chip.intake, .chip.tracing, .chip.info { color: var(--blue); background: var(--blue-t); }
.chip.board, .chip.ready, .chip.ok, .chip.clean { color: var(--green); background: var(--green-t); }
.chip.moving::before, .chip.tracing::before { animation: blink 1.2s ease-in-out infinite; } @keyframes blink { 50% { opacity: .3; } }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; box-shadow: 0 0 0 3px var(--green-t); }
.dot.pulse { animation: blink 1.6s ease-in-out infinite; }
.grid-bg { background-image: linear-gradient(var(--sf) 1px, transparent 1px), linear-gradient(90deg, var(--sf) 1px, transparent 1px); background-size: 30px 30px; }
.sb { display: block; height: 6px; background: var(--sf3); flex: 1; min-width: 40px; } .sb i { display: block; height: 100%; background: var(--red); }
.card { background: var(--sf); border: 1px solid var(--ln); padding: 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.card.hot { border-color: rgba(255,59,78,.55); } .card.gate { border-color: rgba(255,176,32,.5); }
.blk { display: grid; gap: 10px; min-width: 0; align-content: start; }
.cap { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.cap .ic { width: 15px; height: 15px; }
.cap small { margin-left: auto; letter-spacing: 0; text-transform: none; }

/* ---------- 5 buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.btn .ic { width: 17px; height: 17px; }
.btn.pri { background: var(--red); color: #FFF; } .btn.pri:hover { background: var(--red-h); }
.btn.sec { background: var(--sf2); color: var(--fg); border-color: var(--ln2); } .btn.sec:hover { border-color: var(--blue); background: var(--sf3); }
.btn.blue { background: var(--blue); color: #FFF; } .btn.blue:hover { background: #5A97FF; }
.btn.ghost { color: var(--fgl); padding-inline: 4px; clip-path: none; } .btn.ghost:hover { color: var(--fg); }
.btn.sm { padding: 9px 13px; font-size: 13px; --cut: 7px; } .btn.lg { padding: 15px 22px; font-size: 16px; --cut: 12px; } .btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[aria-busy="true"] { color: transparent !important; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -12px; border-radius: 50%; background: #FFF; box-shadow: 9px 0 0 #FFF, 18px 0 0 #FFF; animation: blink 1s ease-in-out infinite; }
.btn.sec[aria-busy="true"]::after { background: var(--fg); box-shadow: 9px 0 0 var(--fg), 18px 0 0 var(--fg); }
.lnk { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; font-size: 14.5px; } .lnk:hover { color: #7FAEFF; } .lnk .ic { width: 15px; height: 15px; }
.cp { display: inline-grid; place-items: center; width: 28px; color: var(--mu); border-radius: 3px; } .cp:hover { color: var(--fg); background: var(--sf2); } .cp .ic { width: 14px; height: 14px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button { font-family: var(--mono); font-size: 12.5px; padding: 7px 11px; border: 1px solid var(--ln); color: var(--fgl); background: var(--sf); border-radius: 2px; }
.seg button:hover { border-color: var(--ln2); color: var(--fg); } .seg button.on { border-color: var(--blue); color: var(--fg); background: var(--blue-t); }
.seg button .n { color: var(--mu); margin-left: 4px; }

/* ---------- 6 header, footer ---------- */
.hd { position: sticky; top: 0; z-index: 30; background: rgba(9,12,17,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hd-in { display: flex; align-items: center; gap: 10px 28px; max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand .mk { width: 38px; height: 21px; } .mk .lr { animation: mkr 1.1s steps(1) infinite; } .mk .lb { animation: mkb 1.1s steps(1) infinite; }
@keyframes mkr { 50% { opacity: .3; } } @keyframes mkb { 0%, 49% { opacity: .3; } 50% { opacity: 1; } }
.wm { font-family: var(--head); font-weight: 700; font-size: 20px; letter-spacing: .06em; line-height: 1; } .wm i { font-style: normal; font-weight: 500; color: var(--mu); letter-spacing: 0; }
.hn { display: flex; gap: 2px; align-items: center; }
.hn a { font-size: 14.5px; color: var(--fgl); padding: 8px 10px; position: relative; } .hn a:hover { color: var(--fg); }
.hn a.on { color: var(--fg); } .hn a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.hr { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.demo { border-bottom: 1px solid var(--ln); background: var(--sf); } .demo .wrap { max-width: var(--maxw); margin: 0 auto; padding: 6px var(--gutter); display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--mu); }
.demo b { color: var(--amber); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.ft { border-top: 1px solid var(--ln); background: var(--sf); margin-top: 24px; }
.ft-in { max-width: var(--maxw); margin: 0 auto; padding: 36px var(--gutter) 40px; display: grid; gap: 28px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.ft-top .about { display: grid; gap: 12px; align-content: start; } .ft-top .about p { color: var(--mu); font-size: 14px; max-width: 40ch; }
.ft-col { display: grid; gap: 8px; align-content: start; } .ft-col a { color: var(--fgl); font-size: 14.5px; } .ft-col a:hover { color: var(--fg); }
.ft .disc { color: var(--mu); font-size: 13px; max-width: 120ch; border-top: 1px solid var(--ln); padding-top: 18px; }

/* ---------- 7 heads: section head (.sh) and page head (.ph), always above the content ---------- */
.sh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: end; }
.sh > div { display: grid; gap: 8px; min-width: 0; }
.sl { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fgl); }
.sh h2 { font-size: clamp(26px, 3vw, 34px); }
.sh p { color: var(--mu); max-width: 70ch; }
.sh .more { white-space: nowrap; }
.sh.s h2 { font-size: 21px; } .sh.s p { font-size: 14.5px; }
.ph { display: grid; gap: 12px; padding-bottom: 8px; }
.ph h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; }
.ph .sub { color: var(--fgl); font-size: 17.5px; max-width: 64ch; }
.ph .ctas { margin-top: 4px; }
.crumb { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--mu); } .crumb a:hover { color: var(--fg); }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- 8 hero and the dispatch map ---------- */
.hero { border-bottom: 1px solid var(--ln); background: radial-gradient(60% 70% at 78% 40%, rgba(59,130,255,.1), transparent 70%), radial-gradient(40% 50% at 60% 80%, rgba(255,59,78,.07), transparent 70%); }
.hero-in { max-width: var(--maxw); margin: 0 auto; padding: 52px var(--gutter) 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; }
.hl { display: grid; gap: 20px; align-content: start; min-width: 0; }
.hero h1 { font-size: clamp(44px, 5.8vw, 78px); line-height: .98; }
.hero .sub { font-size: 18px; color: var(--fgl); max-width: 50ch; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ln); margin-top: 6px; }
.kpis div { padding: 12px 14px; border-right: 1px solid var(--ln); display: grid; gap: 2px; } .kpis div:last-child { border-right: 0; }
.kpis dd { font-family: var(--head); font-weight: 600; font-size: 22px; white-space: nowrap; } .kpis dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.screen { position: relative; border: 1px solid var(--ln2); background: #070A0F; min-width: 0; }
.screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0 46%, rgba(59,130,255,.08) 50%, transparent 54% 100%); background-size: 100% 240%; animation: sweep 6s linear infinite; z-index: 2; }
@keyframes sweep { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.screen svg.map { width: 100%; height: auto; }
.map .gl { stroke: #121A24; } .map .rt { fill: none; stroke: #2A3646; stroke-width: 2; } .map .rt.cex { stroke: var(--amber); } .map .rt.mv { stroke: var(--red); stroke-dasharray: 5 6; animation: flow .8s linear infinite; } .map .rt.vic { stroke: rgba(59,130,255,.55); stroke-width: 1.4; }
@keyframes flow { to { stroke-dashoffset: -11; } }
.map .pk { fill: var(--amber); } .map .pk.r { fill: var(--red); }
.map .vd { fill: var(--blue); } .map .nd { fill: var(--sf2); stroke: #3A475A; stroke-width: 1.5; } .map .nd.cex { fill: rgba(255,176,32,.12); stroke: var(--amber); } .map .nd.mv { fill: rgba(255,59,78,.1); stroke: var(--red); stroke-dasharray: 4 3; }
.map text { font-family: var(--mono); font-size: 11px; fill: var(--mu); } .map .t1 { font-family: var(--head); font-weight: 600; font-size: 13px; fill: var(--fg); letter-spacing: .04em; } .map .ta { fill: var(--amber); } .map .tr { fill: var(--red); }
.map .hud { font-family: var(--mono); font-size: 10.5px; fill: var(--mu); letter-spacing: .1em; }
.map-av { position: absolute; left: 21.5%; top: 26%; width: 22%; display: grid; justify-items: center; gap: 6px; z-index: 3; }
.map-av .tgt { --c: var(--red); --s: 14px; padding: 8px; animation: lock 2.8s ease-in-out infinite; } .map-av .av { width: 100%; height: auto; aspect-ratio: 1; }
@keyframes lock { 0%, 100% { padding: 8px; } 50% { padding: 12px; } }
.map-av .tag { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: #FFF; background: var(--red); padding: 2px 8px; white-space: nowrap; }
.map-av .who { font-family: var(--mono); font-size: 11.5px; color: var(--fgl); text-align: center; white-space: nowrap; } .map-av .who b { font-family: var(--head); color: var(--fg); font-size: 13px; display: block; letter-spacing: .04em; }

/* ---------- 9 most wanted ---------- */
.top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px; background: var(--sf); border: 1px solid var(--ln); transition: border-color .15s, background .15s; min-width: 0; }
.tcard:hover { border-color: var(--ln2); background: var(--sf2); } .tcard:hover .tgt { padding: 3px; }
.tcard .tgt { --c: var(--red); align-self: start; } .tcard .rkb { position: absolute; top: 12px; right: 14px; font-family: var(--head); font-weight: 700; font-size: 28px; line-height: 1; color: var(--red); }
.tcard .tc-b { display: grid; gap: 6px; align-content: start; min-width: 0; padding-right: 36px; }
.tcard .mt { color: var(--fgl); font-size: 14px; }
.tcard .code { font-family: var(--head); font-weight: 700; font-size: 20px; letter-spacing: .03em; line-height: 1.1; }
.tcard .tc-n { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ln); padding-top: 12px; gap: 8px; }
.tcard .tc-n div { display: grid; } .tcard .tc-n dd { font-family: var(--head); font-weight: 600; font-size: 22px; line-height: 1.1; } .tcard .tc-n div:first-child dd { color: var(--red); } .tcard .tc-n dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.tcard .tc-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13.5px; color: var(--fgl); }
.ranks { border: 1px solid var(--ln); background: var(--sf); display: grid; }
.wrow { display: grid; grid-template-columns: 34px minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.5fr) 72px 72px minmax(0, 1.5fr) 132px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ln); font-size: 14px; }
.wrow:last-child { border-bottom: 0; } a.wrow:hover { background: var(--sf2); }
.wrow.wh { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); background: var(--sf2); padding-block: 9px; }
.wrow .r { font-family: var(--head); font-weight: 600; font-size: 16px; color: var(--mu); }
.wrow .who { display: flex; gap: 10px; align-items: center; min-width: 0; } .wrow .who > span:last-child { display: grid; min-width: 0; }
.wrow .who b { font-family: var(--head); font-weight: 600; font-size: 15px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wrow .who small { font-family: var(--mono); font-size: 11.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .m, .wrow .f { color: var(--fgl); } .wrow .sol { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; white-space: nowrap; padding-right: 14px; } .wrow .v, .wrow .l { font-family: var(--mono); font-size: 13px; }
.wrow .u { display: none; color: var(--mu); }
.where { display: grid; gap: 10px; }
.wbar { display: flex; height: 14px; gap: 2px; } .wbar i { display: block; height: 100%; }
.wbar .exchange, .wleg .exchange i { background: var(--amber); } .wbar .moving, .wleg .moving i { background: var(--red); } .wbar .dormant, .wleg .dormant i { background: #4A5568; } .wbar .dispute, .wleg .dispute i { background: var(--blue); }
.wleg { display: flex; flex-wrap: wrap; gap: 6px 22px; } .wleg li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; } .wleg i { width: 10px; height: 10px; display: inline-block; } .wleg b { font-family: var(--mono); font-weight: 500; } .wleg span { color: var(--mu); }
.tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sel { font-family: var(--mono); font-size: 12.5px; padding: 7px 30px 7px 11px; background: var(--sf) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237D8899' stroke-width='1.5'/></svg>") right 10px center no-repeat; border: 1px solid var(--ln); border-radius: 2px; appearance: none; color: var(--fgl); }
.srch { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 280px; border: 1px solid var(--ln); background: var(--sf); padding: 0 10px; border-radius: 2px; }
.srch:focus-within { border-color: var(--blue); } .srch .ic { color: var(--mu); width: 16px; } .srch input { border: 0; outline: 0; background: transparent; padding: 9px 0; flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
.srch .x { color: var(--mu); display: none; } .srch.has .x { display: grid; } .srch kbd { font-size: 11px; color: var(--mu); border: 1px solid var(--ln2); padding: 0 5px; border-radius: 2px; }
.count { font-family: var(--mono); font-size: 12.5px; color: var(--mu); }
.morewrap { display: flex; justify-content: center; }

/* ---------- 10 live cases ---------- */
.live { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.feed { border: 1px solid var(--ln); background: var(--sf); display: grid; }
.ev { display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--ln); }
.ev:last-child { border-bottom: 0; } a.ev:hover { background: var(--sf2); }
.ev time { font-family: var(--mono); font-size: 12px; color: var(--mu); }
.ev .ei { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ln2); color: var(--blue); background: var(--sf2); } .ev .ei .av { width: 36px; height: 36px; border-radius: 0; } .ev .ei.w { border-color: rgba(255,59,78,.5); padding: 0; }
.ev .eb { display: grid; gap: 1px; min-width: 0; } .ev .eb b { font-family: var(--head); font-weight: 600; font-size: 15px; letter-spacing: .02em; } .ev .eb p { color: var(--fgl); font-size: 14px; }
.stages { display: grid; gap: 0; border: 1px solid var(--ln); background: var(--sf); }
.stg { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ln); position: relative; }
.stg:last-child { border-bottom: 0; } .stg .si { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ln2); color: var(--blue); }
.stg b { font-family: var(--head); font-weight: 600; font-size: 15px; } .stg p { font-size: 13px; color: var(--mu); } .stg .n { font-family: var(--head); font-weight: 700; font-size: 26px; }
.stg.gate .si { border-color: rgba(255,176,32,.6); color: var(--amber); } .stg.board .si { border-color: rgba(52,211,153,.5); color: var(--green); }
.stg:not(:last-child)::after { content: ""; position: absolute; left: 33px; bottom: -8px; width: 2px; height: 14px; background: var(--ln2); z-index: 1; }

/* ---------- 11 check a wallet ---------- */
.chk { display: flex; gap: 10px; }
.chk input { flex: 1; min-width: 0; background: var(--code); border: 1px solid var(--ln2); padding: 13px 14px; font-family: var(--mono); font-size: 14px; border-radius: 2px; }
.chk input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t); }
.chk.big input { font-size: 16px; padding: 17px 18px; } .chk.big .btn { padding-inline: 26px; }
.res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; background: var(--code); border: 1px solid var(--ln); border-left: 3px solid var(--red); }
.res.linked { border-left-color: var(--amber); } .res.dispute { border-left-color: var(--blue); } .res.clean { border-left-color: var(--green); grid-template-columns: auto minmax(0, 1fr); }
.res .rv { display: grid; gap: 4px; min-width: 0; }
.res .rl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); } .res.linked .rl { color: var(--amber); } .res.dispute .rl { color: var(--blue); } .res.clean .rl { color: var(--green); }
.res b { font-family: var(--head); font-size: 21px; letter-spacing: .03em; } .res p { color: var(--fgl); font-size: 14.5px; } .res .ctas { margin-top: 4px; }
.res .ri { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--ln2); color: var(--green); } .res .ri .ic { width: 28px; height: 28px; }
pre.api { background: var(--code); border: 1px solid var(--ln); padding: 16px 18px; font-size: 13px; line-height: 1.75; overflow-x: auto; color: #C9D3E0; }
.api .c { color: #5C6A7E; } .api .k { color: var(--green); } .api .p { color: #8FB4FF; } .api .s { color: var(--amber); } .api .b { color: var(--red); }
.means { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.means li { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--sf); border: 1px solid var(--ln); } .means p { color: var(--fgl); font-size: 14px; }

/* ---------- 12 pipeline, answers, safety ---------- */
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: p; }
.pipe li { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 16px 16px; background: var(--sf); border: 1px solid var(--ln); }
.pipe li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 34px; width: 12px; height: 2px; background: var(--ln2); }
.pipe .pi { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ln2); color: var(--blue); background: var(--sf2); } .pipe .pi .ic { width: 22px; height: 22px; }
.pipe .pn { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 12px; color: var(--mu); }
.pipe b { font-family: var(--head); font-weight: 600; font-size: 17px; letter-spacing: .02em; } .pipe p { color: var(--fgl); font-size: 14px; }
.pipe .by { font-family: var(--mono); font-size: 11.5px; color: var(--mu); border-top: 1px dashed var(--ln2); padding-top: 8px; margin-top: auto; }
.pipe .gate { border-color: rgba(255,176,32,.45); background: linear-gradient(180deg, rgba(255,176,32,.06), transparent 60%), var(--sf); } .pipe .gate .pi { color: var(--amber); border-color: rgba(255,176,32,.5); } .pipe .gate .by { color: var(--amber); }
.pipe .st-now { border-color: var(--blue); } .pipe .st-done .pi { color: var(--green); border-color: rgba(52,211,153,.5); } .pipe .st-todo { opacity: .55; }
.cc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.cc ul { display: grid; gap: 12px; } .cc li { display: flex; gap: 10px; align-items: flex-start; } .cc li .ic { margin-top: 3px; }
.cc .yes .ic { color: var(--green); } .cc .no .ic { color: var(--red); }
.safe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 22px; border: 1px solid rgba(255,59,78,.5); background: linear-gradient(90deg, rgba(255,59,78,.1), rgba(59,130,255,.06)); position: relative; overflow: hidden; }
.safe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--red) 50%, var(--blue) 50%); }
.safe .si { width: 52px; height: 52px; display: grid; place-items: center; color: var(--red); border: 1px solid rgba(255,59,78,.5); } .safe .si .ic { width: 26px; height: 26px; }
.safe b { font-family: var(--head); font-size: 22px; letter-spacing: .03em; text-transform: uppercase; display: block; } .safe p { color: var(--fgl); max-width: 90ch; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.duo .card p { color: var(--fgl); }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ln); }
.mini div { padding: 10px 12px; border-right: 1px solid var(--ln); display: grid; } .mini div:last-child { border-right: 0; } .mini dd { font-family: var(--head); font-weight: 600; font-size: 19px; } .mini dt { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mu); }
.uses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .uses li { padding: 12px; background: var(--sf2); display: grid; gap: 4px; align-content: start; } .uses b { font-family: var(--head); font-weight: 600; } .uses p { font-size: 13.5px; color: var(--mu); }

/* ---------- 13 forms ---------- */
.form { display: grid; gap: 28px; padding: 26px; background: var(--sf); border: 1px solid var(--ln); min-width: 0; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.form legend { display: flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 700; font-size: 19px; letter-spacing: .02em; margin-bottom: 14px; padding: 0; }
.form legend .sn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--blue); color: var(--blue); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.fld { display: grid; gap: 6px; min-width: 0; } .fld > span:first-child { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.fld input, .fld textarea, .fld select { width: 100%; min-width: 0; background: var(--code); border: 1px solid var(--ln2); padding: 12px 14px; font-family: var(--mono); font-size: 14px; border-radius: 2px; resize: vertical; }
.fld textarea { font-family: var(--sans); font-size: 15px; line-height: 1.55; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t); }
.fld .err { font-size: 13px; color: var(--red); min-height: 0; } .fld.bad input, .fld.bad textarea { border-color: var(--red); }
.fld .hint { font-size: 13px; color: var(--mu); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 9px 13px; background: var(--code); border: 1px solid var(--ln2); border-radius: 2px; color: var(--fgl); }
.pick:hover { border-color: var(--mu2); color: var(--fg); } .pick[aria-pressed="true"] { border-color: var(--red); background: var(--red-t); color: #FFF; } .pick .ic { width: 16px; height: 16px; }
.txs-in { display: grid; gap: 8px; } .txline { display: flex; gap: 8px; } .txline input { flex: 1; } .txline .x { width: 42px; border: 1px solid var(--ln2); color: var(--mu); display: grid; place-items: center; } .txline .x:hover { color: var(--red); border-color: var(--red); }
.add { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; font-size: 14px; justify-self: start; } .add .ic { width: 15px; height: 15px; }
.ack { display: flex; gap: 10px; align-items: flex-start; color: var(--fgl); font-size: 14.5px; } .ack input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); flex: none; }
.ack.bad { color: var(--red); }
.linkcase { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(255,59,78,.45); background: var(--red-t); } .linkcase .av { width: 36px; height: 36px; } .linkcase div { display: grid; min-width: 0; flex: 1; } .linkcase b { font-family: var(--head); } .linkcase small { font-family: var(--mono); font-size: 11.5px; color: var(--fgl); }
.linkcase .x { color: var(--mu); } .linkcase .x:hover { color: var(--fg); }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stepper li { display: grid; gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); } .stepper li::before { content: ""; height: 3px; background: var(--ln2); }
.stepper li.on { color: var(--fg); } .stepper li.on::before { background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.aside { display: grid; gap: 24px; min-width: 0; align-content: start; position: sticky; top: 92px; }
.f10 { display: grid; gap: 10px; counter-reset: f; } .f10 li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; counter-increment: f; }
.f10 li::before { content: counter(f); display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--amber); color: var(--amber); font-family: var(--mono); font-size: 12px; }
.f10 b { display: block; } .f10 p { font-size: 13.5px; color: var(--mu); }
.wyg { display: grid; gap: 12px; } .wyg li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; } .wyg .ic { color: var(--blue); margin-top: 2px; } .wyg b { display: block; font-family: var(--head); font-weight: 600; } .wyg p { font-size: 13.5px; color: var(--mu); }
.done { display: grid; gap: 22px; padding: 30px; background: var(--sf); border: 1px solid rgba(52,211,153,.45); }
.done .dh { display: flex; gap: 18px; align-items: center; } .done .dh .si { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(52,211,153,.5); color: var(--green); } .done .dh .si .ic { width: 28px; height: 28px; }
.done h2 { font-size: clamp(28px, 3.4vw, 40px); } .done p { color: var(--fgl); }
.trk { display: grid; gap: 8px; padding: 16px; background: var(--code); border: 1px dashed var(--ln2); } .trk .plate { font-size: 14px; } .trk .plate span { padding: 6px 10px; }
.wallet-box { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--ln2); background: var(--code); flex-wrap: wrap; } .wallet-box p { flex: 1; min-width: 180px; font-size: 14px; color: var(--fgl); }

/* ---------- 14 case ---------- */
.chero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 32px; align-items: start; padding: 26px; background: var(--sf); border: 1px solid var(--ln); position: relative; overflow: hidden; }
.chero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#121A24 1px, transparent 1px), linear-gradient(90deg, #121A24 1px, transparent 1px); background-size: 28px 28px; opacity: .6; pointer-events: none; }
.chero > * { position: relative; }
.chero .tgt { --c: var(--red); --s: 18px; padding: 10px; }
.chero .ci { display: grid; gap: 10px; align-content: start; min-width: 0; }
.chero .ci .top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .chero .ci .rkt { font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: #FFF; background: var(--red); padding: 2px 8px; }
.chero h1 { font-size: clamp(36px, 4.6vw, 58px); letter-spacing: .03em; }
.chero .meth { color: var(--fgl); font-size: 16px; }
.chero .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chero .acts { display: grid; gap: 8px; min-width: 230px; }
.chero .acts .btn { justify-content: flex-start; }
.kstats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--ln); background: var(--sf); }
.kstats div { padding: 14px 16px; border-right: 1px solid var(--ln); display: grid; gap: 2px; } .kstats div:last-child { border-right: 0; }
.kstats dd { font-family: var(--head); font-weight: 600; font-size: 24px; white-space: nowrap; } .kstats dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.kstats .r dd { color: var(--red); } .kstats .a dd { color: var(--amber); }
.tracew { overflow-x: auto; border: 1px solid var(--ln); background: #070A0F; }
.trace { width: 100%; min-width: 860px; height: auto; }
.trace .gl { stroke: #111821; } .trace .te { fill: none; stroke: #33404F; stroke-width: 2; } .trace .te.cex { stroke: var(--amber); } .trace .te.moving { stroke: var(--red); stroke-dasharray: 5 6; animation: flow .8s linear infinite; }
.trace .tn rect { fill: var(--sf2); stroke: #3A475A; stroke-width: 1.5; } .trace .tn.bad rect { fill: rgba(255,59,78,.12); stroke: var(--red); } .trace .tn.cex rect { fill: rgba(255,176,32,.1); stroke: var(--amber); } .trace .tn.moving rect { fill: rgba(255,59,78,.06); stroke: var(--red); stroke-dasharray: 5 4; } .trace .tn.victim rect { fill: rgba(59,130,255,.1); stroke: var(--blue); }
.trace .t1 { font-family: var(--head); font-weight: 600; font-size: 14px; fill: var(--fg); } .trace .t2 { font-family: var(--mono); font-size: 12px; fill: var(--mu); } .trace .t0 { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; fill: var(--mu2); }
.trace .tl { font-family: var(--mono); font-size: 12px; fill: var(--amber); } .trace .tl.moving { fill: var(--red); }
.trace .pk { fill: var(--amber); } .trace .pk.r { fill: var(--red); }
.tlegend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--mu); } .tlegend span { display: inline-flex; gap: 8px; align-items: center; } .tlegend i { width: 18px; height: 2px; display: inline-block; background: #33404F; } .tlegend .c i { background: var(--amber); } .tlegend .m i { background: repeating-linear-gradient(90deg, var(--red) 0 4px, transparent 4px 7px); }
.sum { display: grid; gap: 12px; font-size: 16px; } .rev { display: inline-flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--green); } .rev .ic { width: 15px; height: 15px; }
.tline { display: grid; } .tline li { display: grid; grid-template-columns: 112px 18px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ln); align-items: baseline; font-size: 14.5px; }
.tline li:last-child { border-bottom: 0; } .tline time { font-family: var(--mono); font-size: 12px; color: var(--mu); } .tline .tk { width: 10px; height: 10px; border: 2px solid var(--ln2); border-radius: 50%; align-self: center; }
.tline .cex .tk { border-color: var(--amber); } .tline .moving .tk { border-color: var(--red); background: var(--red); } .tline b { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--amber); white-space: nowrap; } .tline .moving b { color: var(--red); } .tline .plain b { color: var(--fgl); }
.evid { display: grid; gap: 12px; } .evid li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .evid .ic { color: var(--green); margin-top: 3px; }
.disp { display: grid; gap: 6px; padding: 14px; border: 1px dashed rgba(59,130,255,.5); } .disp b { font-family: var(--head); font-weight: 600; } .disp p { font-size: 14px; color: var(--fgl); }
.linked { display: grid; } .linked li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ln); } .linked li:last-child { border-bottom: 0; }
.linked .ri { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ln2); color: var(--mu); } .linked .ri .ic { width: 15px; height: 15px; } .linked .cex .ri { color: var(--amber); border-color: rgba(255,176,32,.5); } .linked .moving .ri { color: var(--red); border-color: rgba(255,59,78,.5); }
.linked div { display: grid; min-width: 0; } .linked small { color: var(--mu); font-size: 13px; } .linked .amt { font-family: var(--mono); font-size: 13px; color: var(--fgl); white-space: nowrap; }
.clog { display: grid; } .clog li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--ln); font-size: 14px; } .clog li:last-child { border-bottom: 0; }
.clog time { font-family: var(--mono); font-size: 11.5px; color: var(--mu); grid-row: span 2; } .clog b { font-family: var(--head); font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--blue); } .clog .person b { color: var(--amber); }
.band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; padding: 22px 24px; background: var(--sf); border: 1px solid var(--ln); }
.band .bi { display: flex; gap: -8px; } .band p { color: var(--fgl); max-width: 70ch; } .band b { font-family: var(--head); font-size: 20px; display: block; margin-bottom: 4px; }
.docs3 { display: flex; gap: 6px; } .docs3 span { width: 42px; height: 54px; border: 1px solid var(--ln2); background: var(--sf2); display: grid; place-items: center; color: var(--blue); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); } .docs3 .ic { width: 20px; height: 20px; }
.nf { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 72px 0 40px; } .nf .tgt { --c: var(--red); --s: 16px; padding: 14px; } .nf .tgt .ic { width: 64px; height: 64px; color: var(--mu); stroke-width: 1.2; } .nf h1 { font-size: clamp(32px, 4vw, 48px); } .nf p { color: var(--fgl); max-width: 52ch; }

/* ---------- 15 track and the report pack ---------- */
.private { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid rgba(255,176,32,.45); background: var(--amber-t); color: #FFD38A; font-size: 14px; } .private .ic { color: var(--amber); }
.letter { background: #F4F5F7; color: #14171C; padding: 26px 28px; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; border: 1px solid var(--ln2); max-height: 440px; overflow: auto; }
.letter .fill { word-break: break-all; } .letter h4 { font-family: var(--sans); font-size: 15px; margin: 0 0 10px; } .letter p { margin: 0 0 10px; } .letter .fill { background: #FFE7A8; padding: 0 3px; } .letter table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 6px 0 12px; } .letter td, .letter th { border: 1px solid #C9CED6; padding: 4px 6px; text-align: left; }
.files { display: grid; gap: 8px; } .files li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; background: var(--sf2); }
.files .fi { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ln2); color: var(--blue); } .files b { font-family: var(--head); font-weight: 600; display: block; } .files p { font-size: 13px; color: var(--mu); }
.locked { display: grid; justify-items: start; gap: 10px; padding: 22px; border: 1px dashed var(--ln2); background: var(--sf); } .locked .ic { color: var(--amber); width: 26px; height: 26px; } .locked p { color: var(--fgl); }
.filed { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; border: 1px solid var(--ln); background: var(--sf); } .filed dt, .filed dd { padding: 10px 14px; border-bottom: 1px solid var(--ln); } .filed dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mu); } .filed dd { font-size: 14.5px; overflow-wrap: anywhere; } .filed dt:last-of-type, .filed dd:last-of-type { border-bottom: 0; }

/* ---------- 16 docs pages: how it works, api, terms, detectives, $COP ---------- */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; }
.dnav { position: sticky; top: 92px; display: grid; gap: 2px; } .dnav .cap { padding: 0 10px 10px; } .dnav a { font-size: 14.5px; color: var(--mu); padding: 7px 10px; border-left: 2px solid var(--ln); } .dnav a:hover { color: var(--fg); } .dnav a.on { color: var(--fg); border-left-color: var(--red); }
.art { display: grid; gap: 52px; min-width: 0; } .art > section { display: grid; gap: 16px; scroll-margin-top: 92px; } .art p, .art li { color: var(--fgl); max-width: 72ch; } .art h3 { font-size: 18px; margin-top: 6px; }
.art .dl { display: grid; gap: 10px; } .art .dl li { padding-left: 18px; position: relative; } .art .dl li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 3px; background: var(--red); box-shadow: 0 4px 0 var(--blue); } .art .dl b { color: var(--fg); }
.tblw { overflow-x: auto; border: 1px solid var(--ln); } .dtable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; } .dtable th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); background: var(--sf2); padding: 9px 12px; border-bottom: 1px solid var(--ln); } .dtable td { padding: 10px 12px; border-bottom: 1px solid var(--ln); color: var(--fgl); vertical-align: top; } .dtable tr:last-child td { border-bottom: 0; } .dtable code { color: #8FB4FF; font-size: 13px; }
.faq { display: grid; gap: 8px; } .faq details { border: 1px solid var(--ln); background: var(--sf); } .faq summary { cursor: pointer; padding: 14px 16px; font-family: var(--head); font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--blue); font-family: var(--mono); } .faq details[open] summary::after { content: "-"; } .faq details p { padding: 0 16px 16px; }
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ln); background: var(--sf); }
.kv div { padding: 16px 18px; border-right: 1px solid var(--ln); display: grid; gap: 2px; } .kv div:last-child { border-right: 0; } .kv dd { font-family: var(--head); font-weight: 600; font-size: 26px; white-space: nowrap; } .kv dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.tips { display: grid; } .tips li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ln); } .tips li:last-child { border-bottom: 0; } .tips .cno { font-size: 12px; } .tips p { font-size: 14.5px; color: var(--fgl); } .tips .amt { font-family: var(--mono); font-size: 13px; color: var(--green); white-space: nowrap; }
.dboard { display: grid; } .dboard li { display: grid; grid-template-columns: 30px 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ln); } .dboard li:last-child { border-bottom: 0; } .dboard .r { font-family: var(--head); font-weight: 600; color: var(--mu); } .dboard .n { font-family: var(--mono); font-size: 13px; color: var(--fgl); white-space: nowrap; } .dboard .amt { font-family: var(--mono); font-size: 13px; color: var(--green); white-space: nowrap; }
.dodont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; }
.flow .fn { padding: 18px; background: var(--sf); border: 1px solid var(--ln); display: grid; gap: 8px; align-content: start; } .flow .fn .ic { color: var(--blue); width: 24px; height: 24px; } .flow .fn b { font-family: var(--head); font-size: 17px; } .flow .fn p { font-size: 14px; color: var(--fgl); }
.flow .fa { display: grid; place-items: center; color: var(--mu2); } .flow .fa .ic { width: 22px; height: 22px; }
.flow .fn.split2 { gap: 10px; } .flow .fn .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .flow .fn .pair span { padding: 10px; background: var(--sf2); font-size: 13.5px; color: var(--fgl); } .flow .fn .pair b { display: block; font-size: 14px; color: var(--fg); }
.boost { display: grid; gap: 14px; }
.votes { display: grid; gap: 10px; } .votes li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--sf); border: 1px solid var(--ln); }
.votes .vb { display: grid; gap: 6px; min-width: 0; } .votes .bar { height: 5px; background: var(--sf3); } .votes .bar i { display: block; height: 100%; background: var(--blue); } .votes small { font-family: var(--mono); font-size: 11.5px; color: var(--mu); } .votes .voted { font-family: var(--mono); font-size: 12px; color: var(--green); }
.endpoint { display: grid; gap: 10px; } .endpoint .verb { display: inline-flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 14px; } .endpoint .verb b { color: var(--green); font-weight: 500; padding: 2px 7px; border: 1px solid rgba(52,211,153,.5); font-size: 12px; } .endpoint .verb b.post { color: var(--blue); border-color: rgba(59,130,255,.5); }

.pipe.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ucards li { gap: 10px; } .ucards .ui { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ln2); color: var(--blue); background: var(--sf2); } .ucards b { font-family: var(--head); font-weight: 600; font-size: 17px; } .ucards p { font-size: 14.5px; }
.form.bare { padding: 0; border: 0; background: none; gap: 16px; }
.card > p { color: var(--fgl); }
.evid li.no .ic { color: var(--red); }

/* ---------- 17 modal, toast, data states ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(5,7,10,.72); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal .box { width: min(460px, 100%); background: var(--sf); border: 1px solid var(--ln2); display: grid; gap: 16px; padding: 22px; max-height: calc(100vh - 32px); overflow: auto; position: relative; }
.modal .box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.mh { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .mh h2 { font-size: 20px; } .mh .x { color: var(--mu); width: 30px; height: 30px; display: grid; place-items: center; } .mh .x:hover { color: var(--fg); }
.wlist { display: grid; gap: 8px; } .wlist button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ln2); background: var(--sf2); text-align: left; font-weight: 600; } .wlist button:hover { border-color: var(--blue); } .wlist i { width: 30px; height: 30px; display: grid; place-items: center; background: var(--sf3); font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--fgl); } .wlist small { margin-left: auto; font-family: var(--mono); color: var(--mu); font-weight: 400; }
.txs { display: grid; gap: 10px; } .txs > div { display: flex; gap: 10px; align-items: center; color: var(--mu); font-size: 14.5px; } .txs > div.now { color: var(--fg); } .txs > div.now .ic { color: var(--blue); animation: blink 1s ease-in-out infinite; } .txs > div.ok { color: var(--fgl); } .txs > div.ok .ic { color: var(--green); }
.chan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .chan button { padding: 10px; border: 1px solid var(--ln2); background: var(--sf2); font-family: var(--mono); font-size: 13px; color: var(--fgl); } .chan button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-t); color: var(--fg); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .2s; z-index: 70; background: var(--sf3); border: 1px solid var(--ln2); border-left: 3px solid var(--green); padding: 11px 16px; font-size: 14.5px; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.bad { border-left-color: var(--red); }
.skel { display: block; background: linear-gradient(90deg, var(--sf2), var(--sf3), var(--sf2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 2px; height: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-rows { display: grid; gap: 12px; padding: 16px; } .skel-rows .skel:nth-child(2n) { width: 70%; }
.empty, .errb { display: grid; gap: 6px; justify-items: start; padding: 22px; border: 1px dashed var(--ln2); background: var(--sf); } .empty b, .errb b { font-family: var(--head); font-size: 17px; } .empty span, .errb span { color: var(--mu); font-size: 14.5px; } .errb { border-color: rgba(255,59,78,.5); } .empty .btn, .errb .btn { margin-top: 8px; }

/* ---------- 18 responsive ---------- */
@media (max-width: 1100px) {
  .hn a { padding-inline: 7px; font-size: 14px; } .top3 { grid-template-columns: minmax(0, 1fr); } .pipe, .pipe.four { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pipe li::after { display: none; }
  .wrow { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "r who s" "r m sol" "r f l"; gap: 6px 12px; } .wrow.wh { display: none; }
  .wrow .r { grid-area: r; align-self: start; padding-top: 6px; } .wrow .who { grid-area: who; } .wrow .s { grid-area: s; justify-self: end; } .wrow .m { grid-area: m; } .wrow .sol { grid-area: sol; justify-self: end; } .wrow .f { grid-area: f; } .wrow .l { grid-area: l; justify-self: end; } .wrow .v { display: none; } .wrow .sol .sb { width: 80px; flex: none; } .wrow .u { display: inline; }
  .kstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kstats div:nth-child(3) { border-right: 0; } .kstats div:nth-child(-n+3) { border-bottom: 1px solid var(--ln); }
  .means { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft-top .about { grid-column: 1 / -1; }
  .chero { grid-template-columns: auto minmax(0, 1fr); } .chero .acts { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 960px) {
  .hd-in { flex-wrap: wrap; } .hn { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); } .hn::-webkit-scrollbar { display: none; } .hn a { white-space: nowrap; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } .live, .two, .split, .cc, .duo, .docs, .dodont { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; } .dnav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dnav .cap { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis div:nth-child(2) { border-right: 0; } .kpis div:nth-child(-n+2) { border-bottom: 1px solid var(--ln); }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv div:nth-child(2) { border-right: 0; } .kv div:nth-child(-n+2) { border-bottom: 1px solid var(--ln); }
  .flow { grid-template-columns: minmax(0, 1fr); } .flow .fa { height: 36px; } .flow .fa .ic { transform: rotate(90deg); }
  .srch { margin-left: 0; width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  body { font-size: 15px; } .page { padding-top: 32px; gap: 52px; } .page.tight { gap: 24px; }
  .hd-in { gap: 10px; } .wm { font-size: 17px; } .brand .mk { width: 32px; height: 18px; } .hr .btn { padding: 9px 11px; }
  .sh { grid-template-columns: minmax(0, 1fr); } .sh .more { justify-self: start; }
  .tcard { grid-template-columns: auto minmax(0, 1fr); } .tcard .av.lg { width: 84px; height: 84px; }
  .pipe, .pipe.four { grid-template-columns: minmax(0, 1fr); } .means, .uses, .row2 { grid-template-columns: minmax(0, 1fr); }
  .ev { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "i b" "i c"; gap: 6px 12px; } .ev time { grid-column: 2; grid-row: 1; justify-self: end; } .ev .ei { grid-area: i; align-self: start; } .ev .eb { grid-area: b; padding-right: 36px; } .ev .chip { grid-area: c; justify-self: start; }
  .chk { flex-direction: column; } .chk .btn { width: 100%; }
  .res { grid-template-columns: minmax(0, 1fr); } .res .av, .res .ri { width: 52px; height: 52px; }
  .kstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kstats div { border-right: 1px solid var(--ln) !important; border-bottom: 1px solid var(--ln); } .kstats div:nth-child(2n) { border-right: 0 !important; }
  .chero { grid-template-columns: minmax(0, 1fr); padding: 18px; } .chero .av.xl { width: 120px; height: 120px; } .chero .acts { grid-template-columns: minmax(0, 1fr); }
  .tline li { grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "tk time time" "tk text amt"; gap: 2px 10px; } .tline time { grid-area: time; } .tline .tk { grid-area: tk; align-self: start; margin-top: 4px; } .tline li > span { grid-area: text; } .tline li > b { grid-area: amt; }
  .wrow { grid-template-areas: "r who who" "r s sol" "r f l"; } .wrow .m { display: none; } .wrow .s { justify-self: start; }
  .band { grid-template-columns: minmax(0, 1fr); } .form { padding: 18px; gap: 24px; } .done { padding: 20px; } .stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stepper li { font-size: 10px; }
  .filed { grid-template-columns: minmax(0, 1fr); } .filed dt { border-bottom: 0; padding-bottom: 0; }
  .safe { grid-template-columns: minmax(0, 1fr); } .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clog li { grid-template-columns: minmax(0, 1fr); } .clog time { grid-row: auto; }
  .tips li { grid-template-columns: minmax(0, 1fr) auto; } .tips .cno { grid-column: 1 / -1; } .dboard li { grid-template-columns: 24px 32px minmax(0, 1fr) auto; } .dboard .n { display: none; }
  .letter { padding: 18px; font-size: 12.5px; } .votes li { grid-template-columns: 36px minmax(0, 1fr); } .votes li .btn { grid-column: 1 / -1; }
  .mini dd { font-size: 16px; } .kv dd { font-size: 21px; } .kpis dd { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .map .pk { display: none; } .lbar, .mk rect, .screen::before, .map .rt.mv, .trace .te.moving, .map-av .tgt, .chip::before, .dot.pulse, .skel, .txs .ic, .btn[aria-busy="true"]::after { animation: none !important; } .tgt { transition: none; } }

/* callcops.fun: the longer wordmark keeps File a report on the logo row down to 320 px */
@media (max-width: 400px) { .hd-in { column-gap: 8px; } .brand { gap: 8px; } .brand .mk { width: 28px; height: 16px; } .wm { font-size: 15.5px; letter-spacing: .05em; } }
@media (max-width: 350px) { .hr .btn.pri.sm .ic { display: none; } }