@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600&family=Space+Mono:wght@400;700&family=VT323&display=swap');

/* Open Jobs: a modular rack. Brushed-aluminium faceplates with screws and black silkscreen, a dark readout console,
   signal orange for anything open, blue in progress, green when the swarm delivered. In the spirit of IMD's control
   rooms, drawn our own way. */
:root {
  --bg: #1a1b1d; --rail: #2a2b2e; --plate: #dcdad3; --plate-2: #cfccc3; --plate-hi: #ecebe6; --ink: #17181a; --muted: #55575c; --faint: #85878c;
  --line: #b5b2a8; --screen: #121314; --orange: #ff5a1f; --orange-soft: #ffe0d1; --blue: #3d7bff; --green: #2bd96b; --green-ink: #17803f; --red: #e0453a; --amber: #ffb020;
  --cond: "Barlow Condensed", system-ui, sans-serif; --sans: "Barlow", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace; --seg: "VT323", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--plate-hi); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 74px 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

/* top rail */
header.top { background: #0e0f10; border-bottom: 1px solid #000; }
header.top .wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
.brand { font: 800 22px var(--cond); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.brand span { background: var(--orange); color: #fff; padding: 0 8px; }
nav.links { margin-left: auto; display: flex; gap: 18px; font: 600 15px var(--cond); text-transform: uppercase; letter-spacing: .1em; }
nav.links a { text-decoration: none; color: #9a9ca1; } nav.links a:hover, nav.links a.on { color: var(--orange); }

/* ---------- the rack wall + console ---------- */
.rackwall { position: relative; background: #0e0f10; border-bottom: 6px solid var(--rail); }
.rack { width: 100%; }
.rack-svg { display: block; width: 100%; }
.m-panel { fill: var(--plate); stroke: #0e0f10; stroke-width: 1.5; }
.m-screw { fill: #9c998f; }
.m-knob { fill: var(--plate-hi); stroke: var(--ink); stroke-width: 1.4; }
.m-ink { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.m-cap { fill: var(--ink); }
.m-screen { fill: var(--screen); }
.m-lit-g { fill: var(--green); } .m-lit-o { fill: var(--orange); }
.m-wave-g { stroke: var(--green); stroke-width: 1.6; fill: none; } .m-wave-o { stroke: var(--orange); stroke-width: 1.6; fill: none; }
.m-dot { fill: #a3a097; } .m-dot.on { fill: var(--orange); }
.m-led { fill: #bdbab0; stroke: var(--ink); stroke-width: 1; } .m-led.on { fill: var(--green); }
.m-label { font: 700 9px var(--mono); fill: #8a8d92; letter-spacing: .08em; text-transform: uppercase; }
.m-digits { font: 30px var(--seg); fill: var(--orange); }

.console { position: relative; margin: -56px auto 0; max-width: 980px; background: var(--screen); border: 1px solid #000; box-shadow: 0 0 0 6px var(--rail), 0 30px 60px -20px #000; color: #d7d9dc; font: 13px var(--mono); }
@media (max-width: 760px) { .console { margin-top: -40px; } }
.console .stat { display: flex; gap: 6px 18px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid #26282b; color: #8a8d92; }
.console .stat b { color: #fff; }
.console .stat .o { color: var(--orange); } .console .stat .bl { color: var(--blue); } .console .stat .g { color: var(--green); }
.console .title { padding: 26px 16px 8px; text-align: center; }
.console h1 { font: 400 clamp(56px, 10vw, 112px)/.8 var(--seg); letter-spacing: .04em; color: var(--orange); text-shadow: 0 0 22px rgba(255, 90, 31, .45); margin: 0; text-transform: uppercase; }
.console .sub { color: #8a8d92; margin: 10px 0 0; font-size: 13px; }
.console .cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 16px; }
.console .log { border-top: 1px solid #26282b; padding: 10px 16px; display: grid; gap: 4px; min-height: 60px; }
.console .log div { display: grid; grid-template-columns: 52px 92px 1fr; gap: 10px; white-space: nowrap; overflow: hidden; }
.console .log span:last-child { overflow: hidden; text-overflow: ellipsis; color: #b7b9bd; }
.console .log .t { color: #6d7075; } .console .log .open { color: var(--orange); } .console .log .taken { color: var(--blue); } .console .log .done { color: var(--green); }
@media (max-width: 560px) { .console .log div { grid-template-columns: 76px 1fr; } .console .log .t { display: none; } }

/* ---------- buttons, fields ---------- */
.btn { font: 700 15px var(--cond); text-transform: uppercase; letter-spacing: .1em; padding: 10px 18px; border: 1px solid var(--orange); background: var(--orange); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: 0; }
.btn:hover { filter: brightness(1.1); box-shadow: 0 0 18px rgba(255, 90, 31, .45); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--orange); }
.plate .btn.ghost, .ticket .btn.ghost { color: var(--ink); border-color: var(--ink); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
input, select, textarea { font: 15px var(--sans); padding: 9px 11px; border: 1px solid var(--ink); background: #f7f6f2; color: var(--ink); outline: none; border-radius: 0; width: 100%; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15); }
textarea { min-height: 86px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-soft); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.msg { font: 13px var(--mono); color: var(--muted); }
.msg.err { color: #c0392b; }

/* a faceplate: brushed aluminium with four screws */
.plate, .ticket { position: relative; color: var(--ink); background:
  radial-gradient(circle at 10px 10px, #8d8a80 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 10px) 10px, #8d8a80 2.5px, transparent 3px),
  radial-gradient(circle at 10px calc(100% - 10px), #8d8a80 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #8d8a80 2.5px, transparent 3px),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--plate-hi), var(--plate) 40%, var(--plate-2));
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #000; }
.silk { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* how it works + post a job */
.bench { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 18px; margin: 34px 0; align-items: start; }
@media (max-width: 900px) { .bench { grid-template-columns: 1fr; } }
.plate { padding: 24px 24px 22px; }
.plate h2 { font: 800 30px var(--cond); text-transform: uppercase; letter-spacing: .02em; margin: 4px 0 10px; }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.how li { counter-increment: s; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start; font-size: 15px; }
.how li::before { content: counter(s, decimal-leading-zero); font: 30px/1 var(--seg); color: var(--orange); background: var(--screen); text-align: center; padding: 2px 0; }
.how b { font-family: var(--cond); font-size: 17px; text-transform: uppercase; letter-spacing: .04em; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.kinds button { font: 700 14px var(--cond); text-transform: uppercase; letter-spacing: .08em; padding: 7px 12px 7px 26px; border: 1px solid var(--ink); background: var(--plate-hi); color: var(--ink); cursor: pointer; position: relative; box-shadow: 0 2px 0 var(--ink); }
.kinds button::before { content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #9c998f; }
.kinds button.on { transform: translateY(2px); box-shadow: none; }
.kinds button.on::before { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fields label { display: grid; gap: 4px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fields .wide { grid-column: 1 / -1; }

/* board controls */
.boardbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0 16px; }
.boardbar h2 { font: 800 34px var(--cond); text-transform: uppercase; margin: 0 auto 0 0; color: var(--plate-hi); letter-spacing: .02em; }
.tabs { display: flex; gap: 4px; }
.tabs button { font: 700 13px var(--cond); text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border: 1px solid #000; background: var(--rail); color: #b7b9bd; cursor: pointer; box-shadow: 0 2px 0 #000; }
.tabs button.on { background: var(--orange); color: #fff; transform: translateY(2px); box-shadow: none; }
.board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); align-items: start; }

/* a job = one module */
.ticket .stub { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 26px 8px; border-bottom: 1px solid var(--line); font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ticket .body { padding: 14px 26px; }
.ticket h3 { font: 700 23px/1.12 var(--cond); margin: 0 0 6px; word-break: break-word; }
.ticket .ref { font: 12px var(--mono); color: var(--muted); word-break: break-all; }
.ticket .ref a { color: var(--ink); }
.ticket .note { font-size: 14px; color: #3d3f43; margin: 10px 0 0; white-space: pre-wrap; max-height: 110px; overflow: auto; background: rgba(255, 255, 255, .45); padding: 8px 10px; border: 1px solid var(--line); }
.ticket .foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 26px 16px; border-top: 1px solid var(--line); }
.kindtag { color: var(--ink); }
.kindtag::before { content: "■ "; } .k-proposal::before { color: var(--blue); } .k-token::before { color: var(--amber); } .k-wallet::before { color: var(--green-ink); } .k-custom::before { color: var(--ink); }

/* status pilot lamp (was a rubber stamp) */
.stamp { position: absolute; top: 44px; right: 24px; display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); pointer-events: none; }
.stamp::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #000; background: #7d7a72; }
.st-open::before { background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: pulse 1.6s infinite; }
.st-taken::before { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.st-done::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
@keyframes pulse { 50% { opacity: .45; } }
.ticket h3 { padding-right: 96px; }

/* votes on a 7-segment readout */
.want { font: 22px/1 var(--seg); display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 2px; border: 1px solid #000; background: var(--screen); color: var(--orange); cursor: pointer; box-shadow: 0 2px 0 #000; }
.want:hover { box-shadow: 0 0 12px rgba(255, 90, 31, .5); }
.want.voted { color: var(--green); cursor: default; transform: translateY(2px); box-shadow: none; }

.doneby { margin-top: 12px; padding: 10px 12px; background: var(--screen); color: #c9cbce; font: 13px var(--mono); border-left: 4px solid var(--green); }
.doneby b { color: #fff; } .doneby a { color: var(--green); }
.result { font: 34px/1 var(--seg); text-transform: uppercase; margin-bottom: 4px; }
.r-for, .r-low { color: var(--green); } .r-against, .r-high { color: var(--red); } .r-abstain, .r-medium { color: var(--amber); }

/* take panel: a patch card slid into the module */
.take { border-top: 1px dashed var(--muted); padding: 14px 26px 18px; display: grid; gap: 10px; background: rgba(255, 255, 255, .35); }
.take ol { margin: 0; padding-left: 20px; font-size: 14px; }
.take ol li { margin: 3px 0; }
.code { font: 24px var(--seg); background: var(--screen); color: var(--orange); padding: 0 8px; }
.brief { font: 11.5px/1.55 var(--mono); background: var(--screen); color: #c9cbce; border: 1px solid #000; padding: 10px; white-space: pre-wrap; max-height: 170px; overflow: auto; margin: 0; overflow-wrap: anywhere; }

/* report reader */
dialog.reader { width: min(940px, calc(100% - 24px)); max-height: 88vh; padding: 0; border: 1px solid #000; background: var(--plate-hi); color: var(--ink); box-shadow: 0 0 0 6px var(--rail), 0 30px 80px #000; }
dialog.reader::backdrop { background: rgba(0, 0, 0, .65); }
.reader .bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--screen); color: var(--orange); font: 20px var(--seg); }
.reader .bar button { background: var(--orange); color: #fff; border: 0; font: 700 14px var(--cond); text-transform: uppercase; padding: 6px 12px; cursor: pointer; }
.sv-md { padding: 18px 24px; font-size: 15.5px; }
.sv-md h3, .sv-md h4, .sv-md h5, .sv-md h6 { font: 800 22px var(--cond); text-transform: uppercase; margin: 18px 0 6px; padding-bottom: 2px; border-bottom: 2px solid var(--ink); }
.sv-md p, .sv-md li { margin: 0 0 9px; }
.sv-md a { color: #c43e0c; }
.sv-md code { font: 13px var(--mono); background: var(--plate); padding: 1px 4px; }
.sv-md blockquote { margin: 8px 0; padding-left: 12px; border-left: 4px solid var(--orange); }
.sv-tw { overflow-x: auto; margin: 10px 0; }
.sv-tw table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.sv-tw th, .sv-tw td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.sv-tw th { background: var(--screen); color: var(--orange); font: 700 13px var(--cond); text-transform: uppercase; letter-spacing: .05em; }

.empty { padding: 30px; text-align: center; border: 1px dashed #4a4c50; color: #9a9ca1; font: 14px var(--mono); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--screen); color: #e8e9eb; padding: 12px 18px; font: 14px var(--mono); z-index: 50; max-width: calc(100% - 32px); border: 1px solid var(--orange); box-shadow: 0 0 20px rgba(255, 90, 31, .3); }
footer { margin-top: 50px; background: #0e0f10; color: #8a8d92; font: 12px var(--mono); padding: 20px 0 30px; }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer a { color: var(--orange); }

/* ---------- token check + launch registry ---------- */
.lookup { margin: 0 0 30px; }
.lookup #lookupOut:not(:empty) { margin-top: 16px; }
.tabs.big button { font-size: 17px; padding: 10px 18px; }
#launchCount { font: 18px var(--seg); color: inherit; opacity: .8; }
#lSearch { background: var(--rail); color: #e8e9eb; border-color: #000; }
.st-live::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.st-parked::before { background: var(--red); box-shadow: 0 0 10px var(--red); }
.st-abandoned::before { background: #7d7a72; }
.badge { display: inline-block; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--ink); margin-right: 6px; }
.badge.simd { background: var(--ink); color: var(--orange); }
.badge.ok { background: var(--green); color: #00210d; border-color: #00210d; }
.badge.bad { background: var(--red); color: #fff; }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font: 12px var(--mono); }
.checks li { display: grid; grid-template-columns: 18px 150px 1fr; gap: 6px; align-items: start; }
.checks li b { text-transform: uppercase; letter-spacing: .04em; }
.checks .y { color: var(--green-ink); } .checks .n { color: #c0392b; }
.checks span:last-child { color: #4b4d52; }
.verdictline { font: 30px/1 var(--seg); margin: 4px 0 8px; }
.verdictline.ok { color: var(--green-ink); } .verdictline.bad { color: #c0392b; } .verdictline.none { color: var(--muted); }
@media (max-width: 560px) { .checks li { grid-template-columns: 18px 1fr; } .checks li span:last-child { grid-column: 2; } }

/* =====================================================================================================
   One-page app: the universal search, the two halves, full-width results for SwarmGuard and SwarmCopilot,
   and the Telegram bots drawer. Same rack language as Open Jobs: aluminium faceplates on a dark rail.
   ===================================================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 66px; }
header.top { position: sticky; top: 0; z-index: 30; }
nav.links a { white-space: nowrap; }
@media (max-width: 640px) { nav.links { gap: 10px; font-size: 13px; } header.top .btn.sm { display: none; } }

/* universal search inside the console */
.usearch { display: flex; align-items: stretch; margin: 6px 16px 0; border: 1px solid var(--orange); background: #0b0c0d; box-shadow: 0 0 24px -6px rgba(255, 90, 31, .45); }
.usearch > span { display: grid; place-items: center; padding: 0 0 0 14px; color: var(--orange); font: 700 16px var(--mono); }
.usearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: #f1f2f3; font: 15px var(--mono); padding: 14px 10px; box-shadow: none; }
.usearch input:focus { box-shadow: none; border: 0; }
.usearch input::placeholder { color: #6d7075; }

/* two halves */
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 18px; align-items: stretch; }
@media (max-width: 900px) { .halves { grid-template-columns: 1fr; } }
.half { display: flex; flex-direction: column; }
.halfhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.halfhead h2 { margin: 4px 0 8px; }
.miniradar { width: 64px; height: 64px; border-radius: 50%; background: var(--screen); border: 1px solid #000; flex: none; }
.plate h3 { font: 800 20px var(--cond); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.row.tight { margin-top: 0; }
.tabs.mini { margin-top: 10px; flex-wrap: wrap; }
.tabs.mini button { font-size: 12px; padding: 5px 10px; }
.plate .tabs button { background: var(--plate-hi); color: var(--ink); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.plate .tabs button.on { background: var(--orange); color: #fff; box-shadow: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--mono); padding: 5px 10px; border: 1px solid var(--ink); background: var(--plate-hi); color: var(--ink); cursor: pointer; text-decoration: none; box-shadow: 0 2px 0 var(--ink); }
.chip:hover { background: var(--orange); color: #fff; }
.chip img { width: 18px; height: 18px; border-radius: 50%; }
.divider { height: 1px; background: var(--line); margin: 18px 0 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.link { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #c43e0c; text-decoration: none; display: inline-block; margin-top: 12px; }
.link:hover { text-decoration: underline; }
.mini-how { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: #3d3f43; }
.mini-how li { margin: 4px 0; }
#lookupOut .ticket { box-shadow: none; }

/* full-width results */
.results { margin: 0 0 26px; padding: 22px; background: #121314; border: 1px solid #000; box-shadow: 0 0 0 6px var(--rail); color: #d7d9dc; }
.reshead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.reshead .silk { color: var(--orange); }
.reshead .link { margin: 0; color: #9a9ca1; }
.results .msg { color: #9a9ca1; }
.results .grid { display: grid; gap: 12px; margin-bottom: 14px; }
.results .g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.results .g5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.results .two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.results .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.results .section-head h3, .results h3 { font: 800 20px var(--cond); text-transform: uppercase; letter-spacing: .03em; margin: 0; color: #f1f2f3; }
.results .card { background: var(--plate); color: var(--ink); border: 1px solid #000; padding: 16px; }
.results .card .msg { color: var(--muted); }
.results .k { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.results .stat .v { font: 32px/1 var(--seg); color: var(--ink); margin-top: 4px; }
.results .stat .s { font-size: 13px; color: var(--muted); }
.results .empty { color: #9a9ca1; border-color: #3a3c40; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .mono { font-family: var(--mono); } .small { font-size: 14px; } .tiny { font-size: 12px; }

/* --- SwarmGuard pieces --- */
#g-out .agent { background: var(--plate); color: var(--ink); border: 1px solid #000; padding: 12px; }
#g-out .agent .top { display: flex; gap: 8px; align-items: center; }
#g-out .agent .ic { width: 30px; height: 30px; display: grid; place-items: center; background: var(--screen); color: var(--orange); flex: none; }
#g-out .agent .ic svg { width: 16px; height: 16px; }
#g-out .agent .nm { font: 800 16px var(--cond); text-transform: uppercase; }
#g-out .agent .src { font: 10px var(--mono); color: var(--muted); }
#g-out .agent .job { font-size: 12.5px; color: #3d3f43; margin: 8px 0; min-height: 50px; }
#g-out .agent .st { display: flex; gap: 6px; align-items: center; font: 700 11px var(--mono); text-transform: uppercase; background: var(--screen); color: #9a9ca1; padding: 5px 8px; }
#g-out .agent .st i { width: 8px; height: 8px; border-radius: 50%; background: #6d7075; }
#g-out .agent.run .st { color: var(--orange); } #g-out .agent.run .st i { background: var(--orange); box-shadow: 0 0 8px var(--orange); animation: pulse 1s infinite; }
#g-out .agent.done .st { color: var(--green); } #g-out .agent.done .st i { background: var(--green); }
#g-out .agent.done.hit .st { color: var(--amber); } #g-out .agent.done.hit .st i { background: var(--amber); }
#g-out .agent.fail .st { color: var(--red); } #g-out .agent.fail .st i { background: var(--red); }
#g-out .report { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-bottom: 14px; }
@media (max-width: 760px) { #g-out .report { grid-template-columns: 1fr; } }
#g-out .ring { --p: 0; --c: var(--green); width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), #2a2b2e 0); }
#g-out .ring > div { width: 104px; height: 104px; border-radius: 50%; background: var(--screen); display: grid; place-items: center; text-align: center; }
#g-out .ring b { display: block; font: 62px/1 var(--seg); color: var(--c); }
#g-out .ring span { font: 11px var(--mono); color: #9a9ca1; }
#g-out .verdict { font: 800 26px/1.1 var(--cond); text-transform: uppercase; margin: 4px 0; }
#g-out .who { display: flex; gap: 8px; flex-wrap: wrap; font: 12px var(--mono); color: var(--muted); }
#g-out .actions { display: flex; flex-direction: column; gap: 8px; }
#g-out .switch { font: 12px var(--mono); display: flex; gap: 6px; align-items: center; color: var(--muted); }
#g-out .alerts { display: grid; gap: 8px; }
#g-out .alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 14px; background: var(--plate); color: var(--ink); border: 1px solid #000; border-left: 5px solid #6d7075; }
#g-out .alert.bad { border-left-color: var(--red); } #g-out .alert.warn { border-left-color: var(--amber); } #g-out .alert.ok { border-left-color: var(--green); }
#g-out .alert .sev { width: 26px; height: 26px; display: grid; place-items: center; background: var(--screen); color: #9a9ca1; }
#g-out .alert.bad .sev { color: var(--red); } #g-out .alert.warn .sev { color: var(--amber); } #g-out .alert.ok .sev { color: var(--green); }
#g-out .alert .sev svg { width: 14px; height: 14px; }
#g-out .alert .t { font: 700 16px/1.2 var(--cond); }
#g-out .alert .d { font-size: 13px; color: #3d3f43; margin-top: 2px; }
#g-out .alert .d a { color: #c43e0c; }
#g-out .alert .by { font: 700 10px var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
#g-out .glog { background: #050606; border: 1px solid #000; }
#g-out .glog .bar { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #26282b; font: 700 11px var(--mono); text-transform: uppercase; color: var(--orange); }
#g-out .glog .bar i { width: 8px; height: 8px; border-radius: 50%; background: #2a2b2e; } #g-out .glog .bar i:first-child { background: var(--orange); }
#g-out .glog pre { margin: 0; padding: 10px 12px; height: 340px; overflow: auto; font: 12px/1.6 var(--mono); color: #9a9ca1; white-space: pre-wrap; }
#g-out .glog .ag { color: var(--orange); } #g-out .glog .er { color: var(--red); } #g-out .glog .gd { color: var(--green); }
.results .tw { overflow-x: auto; padding: 4px; }
.results table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.results th { text-align: left; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--ink); }
.results td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.results .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.results .tok { display: flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ink); }
.results .tok img, .results .tok .ph { width: 24px; height: 24px; border-radius: 50%; background: var(--plate-2); display: grid; place-items: center; font: 700 10px var(--mono); }
.results .tok b { display: block; } .results .tok small { font-size: 11px; color: var(--muted); }
.results .pill { display: inline-block; font: 700 10.5px var(--mono); text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--ink); background: var(--plate-hi); color: var(--ink); white-space: nowrap; text-decoration: none; }
.results .pill.bad { background: var(--red); color: #fff; } .results .pill.warn { background: var(--amber); color: #1a1200; } .results .pill.ok { background: var(--green); color: #00210d; }
.results .pill.acc { background: var(--orange); color: #fff; } .results .pill.blue { background: var(--blue); color: #fff; }
.results .pill.live::before { content: "● "; animation: pulse 1.4s infinite; }
.results .cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; margin-top: 16px; }
@media (max-width: 760px) { .results .cta { grid-template-columns: 1fr; } }
.results .cta h2 { font: 800 26px var(--cond); text-transform: uppercase; margin: 4px 0; }
.results .cta .btns { display: flex; flex-direction: column; gap: 8px; }
.results .prompt { font: 11.5px/1.55 var(--mono); background: var(--screen); color: #c9cbce; padding: 10px; max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.sv-steps { font-size: 13.5px; padding-left: 20px; } .sv-steps li { margin: 3px 0; }
.sv-attach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .sv-attach input { flex: 1 1 240px; }
.sv-status { flex-basis: 100%; font: 12px var(--mono); color: var(--muted); }
.sv-card { background: var(--plate); color: var(--ink); border: 1px solid #000; border-top: 4px solid var(--orange); padding: 16px; margin-top: 16px; }
.sv-k { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.sv-vote { font: 52px/1 var(--seg); margin: 4px 0; } .sv-vote small { font: 14px var(--mono); color: var(--muted); }
.sv-for { color: var(--green-ink); } .sv-against { color: #c0392b; } .sv-abstain { color: var(--amber); } .sv-none { color: var(--muted); font-size: 30px; }
.sv-meta { font: 12px var(--mono); color: var(--muted); } .sv-meta a { color: #c43e0c; }
.sv-report summary { cursor: pointer; font: 700 13px var(--mono); text-transform: uppercase; margin-top: 10px; color: #c43e0c; }
.sv-report .sv-md { background: var(--plate-hi); border: 1px solid var(--line); max-height: 520px; overflow: auto; margin-top: 8px; }

/* --- SwarmCopilot pieces --- */
#c-out .space { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--plate); color: var(--ink); padding: 14px 16px; border: 1px solid #000; }
#c-out .space img { width: 52px; height: 52px; border-radius: 50%; border: 1px solid #000; }
#c-out .space h2 { font: 800 30px/1 var(--cond); text-transform: uppercase; margin: 0; }
#c-out .space .stat .v { font-size: 26px; }
#c-out .space .grid { margin: 0; }
#c-out .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
#c-out .toolbar input { flex: 1 1 220px; }
#c-out .seg { display: flex; gap: 4px; }
#c-out .split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { #c-out .split { grid-template-columns: 1fr; } }
#c-out .list { display: grid; gap: 8px; max-height: 80vh; overflow: auto; }
#c-out .prop { background: var(--plate); color: var(--ink); border: 1px solid #000; padding: 12px; cursor: pointer; }
#c-out .prop:hover, #c-out .prop.sel { box-shadow: inset 4px 0 0 var(--orange); }
#c-out .prop .ttl { font: 700 17px/1.2 var(--cond); margin: 6px 0; }
#c-out .prop .meta { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--muted); margin-top: 6px; }
#c-out .bar { height: 6px; background: var(--plate-2); } #c-out .bar.thin { height: 3px; }
#c-out .bar i { display: block; height: 100%; background: var(--ink); } #c-out .choice.lead .bar i, #c-out .prop .bar i { background: var(--orange); }
#c-out #c-detail .card { margin-bottom: 0; }
#c-out #c-detail > .grid { gap: 12px; }
#c-out #c-detail h2 { font: 800 26px/1.1 var(--cond) !important; margin: 6px 0; }
#c-out .who { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font: 12px var(--mono); color: var(--muted); }
#c-out .who a { color: #c43e0c; }
#c-out .timeline { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--muted); margin-top: 4px; }
#c-out .eyebrow { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #c43e0c; }
#c-out .outcome { display: flex; gap: 12px; align-items: center; padding: 12px; margin: 10px 0 14px; background: var(--screen); color: #f1f2f3; border: 1px solid #000 !important; }
#c-out .outcome .ic { width: 38px; height: 38px; display: grid; place-items: center; font: 800 18px var(--cond); flex: none; }
#c-out .outcome .big { font: 800 20px var(--cond); text-transform: uppercase; } #c-out .outcome .muted { color: #9a9ca1; }
#c-out .stat.card { background: var(--plate-hi); padding: 12px !important; }
#c-out .stat .v { font: 26px/1 var(--seg) !important; }
#c-out .choice { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; margin-bottom: 8px; }
#c-out .choice .bar { grid-column: 1 / -1; }
#c-out .facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: 14px; }
#c-out .facts ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; } #c-out .facts a { color: #c43e0c; word-break: break-word; }
#c-out .voices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
#c-out .voice { background: var(--plate-hi); border-left: 4px solid var(--orange); padding: 10px 12px; margin-top: 8px; font-size: 13.5px; }
#c-out .voice .m { display: flex; gap: 6px; align-items: center; font: 11px var(--mono); color: var(--muted); margin-bottom: 4px; }
#c-out .voice .m img { width: 16px; height: 16px; border-radius: 50%; } #c-out .voice p { margin: 0; }
#c-out .body { white-space: pre-wrap; font-size: 14px; max-height: 420px; overflow: auto; margin-top: 10px; }
#c-out details.card summary { cursor: pointer; font: 800 16px var(--cond); text-transform: uppercase; }

/* --- Telegram bots drawer --- */
#bots { margin: 30px 0 0; }
.botsbox { background: var(--screen); border: 1px solid #000; box-shadow: 0 0 0 6px var(--rail); }
.botsbox > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; padding: 18px 22px; }
.botsbox > summary::-webkit-details-marker { display: none; }
.botsbox > summary .silk { grid-column: 1 / -1; color: var(--orange); }
.botsbox > summary .bt { font: 400 44px/1 var(--seg); color: var(--orange); text-transform: uppercase; }
.botsbox > summary .bt::before { content: "▶ "; font-size: 26px; vertical-align: 6px; }
.botsbox[open] > summary .bt::before { content: "▼ "; }
.botsbox > summary .msg { color: #9a9ca1; }
.bots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 22px 22px; }
@media (max-width: 860px) { .bots { grid-template-columns: 1fr; } }
.bots .chip { color: var(--ink); }
.m-silk { font: 700 8px var(--mono); fill: #4a4740; letter-spacing: .14em; }

/* ---------- loading screen: Pepe plugs in the rack (loader.js) ---------- */
#boot { display: none; }
html.booting { overflow: hidden; }
html.booting #boot { display: grid; position: fixed; inset: 0; z-index: 100; background: #000; place-content: center; justify-items: center; gap: 14px; transition: opacity .45s; cursor: pointer; }
#boot canvas { width: min(94vw, 860px); height: auto; border-radius: 6px; }
#boot .boot-msg { font: 34px/1 var(--seg); color: var(--orange); letter-spacing: .08em; text-transform: uppercase; margin: 0; min-height: 34px; text-shadow: 0 0 18px rgba(255, 90, 31, .5); }
#boot .boot-skip { font: 11px var(--mono); color: #55575c; margin: 0; letter-spacing: .14em; text-transform: uppercase; }
#boot.out { opacity: 0; pointer-events: none; }

/* ---------- rack power-on: modules flicker on in a wave (rack.js) ---------- */
.rack-svg.boot-wait .mod, .rack-svg.boot-wait .cables { opacity: .08; }
.rack-svg.boot .mod { animation: modOn .7s linear both; animation-delay: var(--d); }
.rack-svg.boot .cables { animation: modOn .6s linear 1.1s both; }
@keyframes modOn { 0% { opacity: .08 } 18% { opacity: 1 } 30% { opacity: .25 } 45% { opacity: 1 } 60% { opacity: .55 } 100% { opacity: 1 } }

/* ---------- CRT: scanlines and a soft vignette on the console screen ---------- */
.console::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: reduce) { .rack-svg.boot .mod, .rack-svg.boot .cables { animation: none; } }

/* ---------- Module C · Token X-ray (xray-ui.js) ---------- */
.xray { margin: 34px 0 18px; }
.xr-headgrid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; }
.xr-lookup { border-left: 2px dashed var(--line); padding-left: 22px; }
@media (max-width: 860px) { .xr-headgrid { grid-template-columns: 1fr; } .xr-lookup { border-left: 0; padding-left: 0; border-top: 2px dashed var(--line); padding-top: 16px; } }
/* the agent floor: a dark screen, the agents as modules, spiders walking on top */
.xr-floor { position: relative; margin-top: 14px; background: var(--screen); border: 1px solid #000; box-shadow: 0 0 0 6px var(--rail); padding: 56px 16px 18px; overflow: hidden; }
.xr-floor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.xr-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 12px var(--mono); color: #6d7075; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 26px; }
.xr-flow i { width: 18px; height: 1px; background: #3a3c42; }
.xr-agents { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
@media (max-width: 1100px) { .xr-agents { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .xr-agents { grid-template-columns: repeat(2, 1fr); } }
.xagent { position: relative; border: 1px solid #2c2e33; background: #16171a; padding: 10px 10px 9px; min-height: 92px; color: #d7d9dc; font: 12px var(--mono); transition: border-color .2s, box-shadow .2s; }
.xagent .xa-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.xagent b { font: 700 15px var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.xagent small { color: #6d7075; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; width: 100%; }
.xagent .led { width: 9px; height: 9px; border-radius: 50%; background: #2b2c2f; border: 1px solid #000; flex: none; }
.xagent .xa-st { margin-top: 8px; color: #b7b9bd; min-height: 30px; line-height: 1.35; }
.xagent .xa-src { color: #55575c; font-size: 10px; }
.xagent.s-run { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 0 22px rgba(255, 90, 31, .25); }
.xagent.s-run .led { background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: xblink .5s steps(2) infinite; }
.xagent.s-ok .led { background: var(--green); box-shadow: 0 0 10px var(--green); }
.xagent.s-warn .led { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .xagent.s-warn .xa-st { color: var(--amber); }
.xagent.s-bad .led { background: var(--red); box-shadow: 0 0 10px var(--red); } .xagent.s-bad .xa-st { color: #ff7a6e; } .xagent.s-bad { border-color: var(--red); }
.xagent.s-skip .xa-st { color: #55575c; }
.xagent[data-a="judge"] { border-style: dashed; }
@keyframes xblink { to { opacity: .35; } }
.xspider { position: absolute; left: 0; top: 0; width: 60px; height: 55px; pointer-events: none; z-index: 2; filter: drop-shadow(0 4px 8px #000a); will-change: transform; }
.xspider svg { width: 100%; height: 100%; overflow: visible; }
.xspider .legs path { transform-origin: 60px 60px; }
.xspider.walking .legs path:nth-child(odd) { animation: xstep .2s alternate infinite; }
.xspider.walking .legs path:nth-child(even) { animation: xstep .2s alternate-reverse infinite; }
@keyframes xstep { to { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .xspider .legs path { animation: none !important; } .xagent .led { animation: none !important; } }
/* the report */
#x-out { margin-top: 18px; display: grid; gap: 14px; }
#x-out[hidden] { display: none; }
.xr-tokenbar { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.xr-id { display: flex; gap: 12px; align-items: center; } .xr-id img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); }
.xr-id h3 { margin: 0; font: 800 30px var(--cond); text-transform: none; } .xr-id h3 span { color: var(--muted); font-size: 20px; }
.xr-imd { background: var(--ink); color: var(--green); font: 700 14px var(--mono); padding: 8px 12px; } .xr-imd a { color: #fff; }
.xr-stats { display: grid; grid-template-columns: repeat(6, auto); gap: 4px 22px; width: 100%; }
.xr-stats small { display: block; font: 700 11px var(--cond); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .xr-stats b { font: 400 30px var(--seg); color: var(--ink); }
@media (max-width: 760px) { .xr-stats { grid-template-columns: repeat(3, auto); } }
.xr-main { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
@media (max-width: 900px) { .xr-main { grid-template-columns: 1fr; } }
.xr-webbox { background: #0c0d0e; border: 1px solid #000; box-shadow: 0 0 0 6px var(--rail); color: #d7d9dc; }
.xr-cap { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #26282b; font: 12px var(--mono); }
.xr-cap span { color: #8a8d92; } .xr-cap i { font-style: normal; }
#x-web { display: block; width: 100%; }
.xr-verdict { background: var(--screen); border: 1px solid #000; box-shadow: 0 0 0 6px var(--rail); color: #d7d9dc; padding: 18px; font: 13px var(--mono); --vc: var(--orange); }
.xr-verdict.v-clean { --vc: var(--green); } .xr-verdict.v-ok { --vc: var(--blue); } .xr-verdict.v-risky { --vc: var(--amber); } .xr-verdict.v-danger { --vc: var(--red); } .xr-verdict.v-early { --vc: #8a8d92; }
.xr-score { display: flex; align-items: baseline; gap: 8px; } .xr-score b { font: 400 110px/.8 var(--seg); color: var(--vc); text-shadow: 0 0 26px var(--vc); } .xr-score small { color: #6d7075; font-size: 18px; }
.xr-word { display: inline-block; margin: 10px 0 6px; padding: 4px 12px; border: 2px solid var(--vc); color: var(--vc); font: 400 40px/1 var(--seg); letter-spacing: .08em; }
.xr-sum { color: #fff; margin: 6px 0 14px; line-height: 1.45; }
.xr-parts div { display: grid; grid-template-columns: 110px 1fr 46px; gap: 8px; align-items: center; margin: 5px 0; color: #8a8d92; font-size: 11px; text-transform: uppercase; }
.xr-parts i { height: 8px; background: #26282b; } .xr-parts em { display: block; height: 100%; background: var(--vc); box-shadow: 0 0 8px var(--vc); } .xr-parts b { color: #fff; text-align: right; font-weight: 400; }
.xr-verdict h4, .xr-card h4 { font: 800 15px var(--cond); text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 6px; }
.xr-rules { margin: 0; padding-left: 18px; color: #e8e9eb; line-height: 1.5; } .xr-rules li.ok { color: var(--green); list-style: none; margin-left: -18px; }
.xr-ask { margin-top: 16px; display: grid; gap: 6px; } .xr-ask small { color: #6d7075; font-size: 11px; }
.xr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 900px) { .xr-grid { grid-template-columns: 1fr; } }
.xr-card { background: var(--plate); border: 1px solid #000; box-shadow: 0 0 0 6px var(--rail); padding: 4px 18px 16px; color: var(--ink); font: 13px var(--mono); }
.xr-swarm { border-left: 4px solid var(--orange); padding: 6px 10px; margin: 8px 0; background: var(--plate-hi); } .xr-swarm.cr { border-left-color: var(--red); }
.xr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .xr-chips a { font-size: 11px; background: var(--ink); color: #fff; padding: 2px 6px; text-decoration: none; }
.xr-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .xr-checks li { padding-left: 24px; position: relative; line-height: 1.4; }
.xr-checks li::before { position: absolute; left: 0; font-weight: 700; } .xr-checks .ok::before { content: "\2713"; color: var(--green-ink); } .xr-checks .bad::before { content: "\2715"; color: var(--red); } .xr-checks .warn::before { content: "!"; color: #b5651d; } .xr-checks .na::before { content: "\2013"; color: var(--muted); } .xr-checks .na { color: var(--muted); }
.xr-checks code { background: var(--ink); color: #fff; padding: 0 4px; }
.xr-card .bad, .xr-swarm .bad { color: var(--red); font-weight: 700; }
.xr-tablewrap { overflow-x: auto; }
.xr-table { width: 100%; border-collapse: collapse; font-size: 12px; } .xr-table th { text-align: left; font: 700 11px var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 2px solid var(--ink); padding: 6px; }
.xr-table td { padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tag { display: inline-block; margin-right: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; border: 1px solid currentColor; }
.tag.bad { color: var(--red); } .tag.sw { color: #c4400f; } .tag.fr { color: #b5651d; }
.xr-aside { display: grid; gap: 4px; } .xr-aside small { color: var(--muted); }
.xr-src { text-align: center; }