/* Coalfire DivisionHex brand palette — derived from coalfire.com/services/security.
   Landing and login pages use these directly. Console pages override them in the
   .console-theme block further down. */
:root {
  --accent-rgb: 255, 122, 46;
  --ink: #333f48;
  --ink-soft: #3e4850;
  --ink-deep: #141f20;
  --paper: #ffffff;
  --paper-alt: #f4f6f9;
  --line: #d9dfe7;
  --text: #333f48;
  --muted: #6b7a87;
  --accent: #c8552d;
  --accent-gold: #f0b323;
  --accent-soft: #fff2ec;
  --ok: #15803d;
  --ok-soft: #ecfdf3;
  --warn: #a16207;
  --warn-soft: #fefce8;
  --bad: #b42318;
  --bad-soft: #fef3f2;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(51, 63, 72, 0.06), 0 4px 12px rgba(51, 63, 72, 0.05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper-alt);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Keep the footer on the bottom edge when a page is shorter than the window. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 620px; margin: 0 auto; padding: 0 24px; }

/* ── Chrome ─────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--ink);
  color: #fff;
  padding: 14px 0;
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; }
.topbar a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 14px; }
.topbar a:hover, .topbar a.active { color: #fff; }
/* .topbar a has specificity (0,1,1) and would otherwise beat .btn (0,1,0), so a
   button in the top bar inherits the near-white link color and its label
   disappears against the white background. Re-assert the button's own colours
   here with matching specificity. */
.topbar a.btn { color: var(--text); }
.topbar a.btn:hover { color: var(--text); background: var(--paper-alt); }
.topbar a.btn-primary,
.topbar a.btn-primary:hover { color: #fff; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff !important;
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

main { padding: 32px 0 64px; }

footer.site {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  color: var(--muted);
  font-size: 13px;
  background: var(--paper);
}
/* Landing page gets a dark footer matching the DivisionHex style */
.landing-page footer.site {
  background: var(--ink-deep);
  border-top-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}

/* ── Type ───────────────────────────────────────────────────────────────── */

h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.lede { color: var(--muted); font-size: 16px; margin: 0 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-tight { padding: 14px 16px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-end { justify-content: flex-end; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--paper-alt); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: #a2360a; }
.btn-danger { color: var(--bad); border-color: #f0c4c0; }
.btn-danger:hover { background: var(--bad-soft); }
.btn-lg { padding: 11px 20px; font-size: 15px; }
.btn[disabled], .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
label .required {
  color: var(--accent);
  font-weight: 700;
  margin-left: 2px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
input[type="url"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: var(--paper);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
textarea { resize: vertical; }
.field { margin-bottom: 16px; }
.help, .field .help { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.field .err { font-size: 12.5px; color: var(--bad); margin-top: 4px; }
.checks label { font-weight: 400; font-size: 14px; }
.checks ul { list-style: none; padding: 0; margin: 0; }
.checks li { margin-bottom: 6px; }
.checks input { width: auto; margin-right: 8px; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tabs a {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Status pills ───────────────────────────────────────────────────────── */

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-running { background: var(--ok-soft); color: var(--ok); border-color: #b7e4c7; }
.pill-paused { background: var(--paper-alt); color: var(--muted); border-color: var(--line); }
.pill-draft { background: var(--paper-alt); color: var(--muted); border-color: var(--line); }
.pill-deleted { background: var(--paper-alt); color: var(--muted); border-color: var(--line); }
.pill-creating, .pill-seeding, .pill-pausing, .pill-resuming, .pill-deleting {
  background: var(--warn-soft); color: var(--warn); border-color: #f5e3a3;
}
.pill-failed { background: var(--bad-soft); color: var(--bad); border-color: #f5c2bd; }

/* ── Tables ─────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Collapsible lab-console cards ──────────────────────────────────────── */

details.card > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  list-style: none;
  margin: 0 0 12px;
  user-select: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  flex-shrink: 0;
  margin-top: -2px;
}
details.card[open] > summary::before {
  transform: rotate(45deg);
  margin-top: -4px;
}
details.card:not([open]) > summary { margin-bottom: 0; }
details.card > summary .muted { font-weight: 500; font-size: 13px; }
details.destroy-box { margin-top: 4px; }
details.destroy-box > summary { cursor: pointer; }

#pending-panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pending-answer {
  background: rgba(128, 128, 128, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

/* ── Messages ───────────────────────────────────────────────────────────── */

.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.messages li {
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  margin-bottom: 8px;
}
.messages li.success { background: var(--ok-soft); border-color: #b7e4c7; color: #14532d; }
.messages li.error { background: var(--bad-soft); border-color: #f5c2bd; color: #7f1d1d; }
.messages li.warning { background: var(--warn-soft); border-color: #f5e3a3; color: #713f12; }
.messages li.info { background: var(--accent-soft); border-color: #f6cdb9; color: #7c2d12; }

.notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  margin-bottom: 20px;
}

/* ── Landing — DivisionHex style ───────────────────────────────────────── */

.hero {
  background: var(--ink-deep);
  color: #fff;
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
}
/* Subtle diagonal texture reminiscent of the DivisionHex cracked-surface hero */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(240, 179, 35, 0.04) 0%, transparent 50%),
    linear-gradient(225deg, rgba(200, 85, 45, 0.03) 0%, transparent 50%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 52px);
  max-width: 18ch;
  margin-bottom: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent-gold);
}
.hero p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 0 32px;
  line-height: 1.65;
}
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 14px;
}
.hero .row { gap: 14px; }
.hero .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.hero .btn-primary:hover { background: #b44a27; }

.section { padding: 64px 0; }
.section-alt {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Dark DivisionHex-style section (charcoal bg, white text) */
.section-dark {
  background: var(--ink);
  color: #fff;
  border-top: none;
  border-bottom: none;
}
.section-dark h2 { color: #fff; }
.section-dark p { color: rgba(255, 255, 255, 0.74); }
.section-dark .step-num { background: var(--accent-gold); color: var(--ink-deep); }

.feature h3 { font-size: 16px; font-weight: 700; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* DivisionHex-style service cards — dark bg, amber left border */
.feature-card {
  background: var(--ink-deep);
  border: 1px solid rgba(200, 85, 45, 0.2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
  color: #fff;
}
.feature-card h3 { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.feature-card p { color: rgba(255, 255, 255, 0.7); margin: 0; font-size: 14.5px; }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 34px;
  clip-path: var(--hex);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ── Projector card ─────────────────────────────────────────────────────── */

.projector {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 40px 48px 88px;
  position: relative;
}
.projector .label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.projector .value {
  font-family: var(--mono);
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 600;
  margin-bottom: 40px;
  word-break: break-all;
}
.projector .value.accent { color: #fdba74; }

/* ── Login — DivisionHex dark style ────────────────────────────────────── */

.landing-page .brand-icon,
.login-page .brand-icon {
  background: var(--accent-gold);
  box-shadow: 0 0 10px rgba(240, 179, 35, 0.35);
}

.login-page {
  background: var(--ink-deep);
  color: #fff;
  min-height: 100vh;
}
.login-page .topbar { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.login-page footer.site {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
}
.login-page .login-panel { padding-top: 24px; }
.login-page h1 {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}
.login-page .lede {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.login-page .card {
  background: var(--ink);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  padding: 8px 28px 28px;
}
.login-page .tabs {
  margin: 0 -28px 24px;
  padding: 0 12px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.login-page .tabs a {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.login-page .tabs a.active {
  color: var(--accent-gold);
  border-bottom-color: var(--accent-gold);
}
.login-page .tabs a:hover { color: rgba(255, 255, 255, 0.8); }
.login-page label { color: rgba(255, 255, 255, 0.7); }
.login-page input[type="text"],
.login-page input[type="email"],
.login-page input[type="password"] {
  background: var(--ink-deep);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  min-height: 44px;
}
.login-page input:focus {
  border-color: var(--accent-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 179, 35, 0.15);
}
.login-page input::placeholder { color: rgba(255, 255, 255, 0.3); }
.login-page .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  margin-top: 8px;
}
.login-page .btn-primary:hover { background: #b44a27; }
.login-page .field .help { color: rgba(255, 255, 255, 0.45); }
.login-page .field .err { color: #ff6b6b; }
.login-page .messages li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.login-page .messages li.error {
  background: rgba(255, 23, 68, 0.1);
  border-color: rgba(255, 23, 68, 0.3);
  color: #ff6b6b;
}

/* ── Utilities ──────────────────────────────────────────────────────────── */

.stack > * + * { margin-top: 14px; }
.divider { height: 1px; background: var(--line); margin: 20px 0; border: 0; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 18px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.log { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.hide { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Console theme — cyberpunk / runner glow
   Only active when <body class="console-theme">.
   Landing, login and public pages stay corporate/neutral.
   Neon is ember orange so the lab matches Coalfire without losing the HUD.
   Rust (#c8552d) stays on marketing fills; this neon is for glow, links, code.
   ══════════════════════════════════════════════════════════════════════════ */

body.console-theme {
  --accent-rgb: 255, 122, 46;
  --heading: #f3ebe3;
  --heading-2: #e4d6c8;
  --ink: #0c0a09;
  --ink-soft: #161210;
  --paper: #1a1410;
  --paper-alt: #100c0a;
  --line: #3a2a22;
  --text: #e8dcd0;
  --muted: #8a7a6c;
  --accent: #ff7a2e;
  --accent-hot: #ffb070;
  --accent-soft: rgba(var(--accent-rgb), 0.10);
  --ok: #00e676;
  --ok-soft: rgba(0, 230, 118, 0.10);
  --warn: #ffab00;
  --warn-soft: rgba(255, 171, 0, 0.10);
  --bad: #ff1744;
  --bad-soft: rgba(255, 23, 68, 0.08);
  --neon: #ff7a2e;
  --neon-glow: rgba(var(--accent-rgb), 0.45);
  --display: "IBM Plex Sans Condensed", "IBM Plex Sans", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --glow: 0 0 12px rgba(var(--accent-rgb), 0.18);
  --glow-accent: 0 0 20px rgba(var(--accent-rgb), 0.30);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 1px rgba(var(--accent-rgb), 0.08);

  font-family: "IBM Plex Sans", var(--sans);
  color: var(--text);
  background-color: var(--paper-alt);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -18%, rgba(var(--accent-rgb), 0.11), transparent 58%),
    radial-gradient(ellipse 50% 40% at 110% 115%, rgba(240, 179, 35, 0.05), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='48' viewBox='0 0 42 48'><g fill='none' stroke='rgba(255,122,46,0.075)' stroke-width='0.8'><path d='M21 1.2 L40 12 L40 36 L21 46.8 L2 36 L2 12 Z'/></g></svg>");
  background-size: auto, auto, 42px 48px;
  background-attachment: fixed;
}

/* ── Chrome ────────────────────────────────────────────────────────────── */

body.console-theme .topbar {
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.06);
}
body.console-theme .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent) !important;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--display);
  font-size: 15px;
}
body.console-theme .topbar a { color: rgba(232, 220, 208, 0.7); }
body.console-theme .topbar a:hover,
body.console-theme .topbar a.active { color: var(--accent); text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3); }
body.console-theme .topbar a.btn { color: var(--text); background: var(--paper); border-color: var(--line); }
body.console-theme .topbar a.btn:hover { background: var(--ink-soft); border-color: var(--accent); }
body.console-theme .topbar .who { color: var(--muted); }

body.console-theme footer.site {
  background: var(--ink);
  border-top-color: var(--line);
  color: var(--muted);
}

/* ── Surfaces ──────────────────────────────────────────────────────────── */

body.console-theme .card {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
body.console-theme .card:hover {
  border-color: rgba(var(--accent-rgb), 0.16);
}

body.console-theme .notice {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

/* ── Type ──────────────────────────────────────────────────────────────── */

body.console-theme h1,
body.console-theme h2,
body.console-theme details.card > summary { color: var(--heading); font-family: var(--display); }
body.console-theme h1 { letter-spacing: 0.04em; text-transform: uppercase; }
body.console-theme h3 { color: var(--heading-2); }
body.console-theme .live-dot {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55);
}
body.console-theme a { color: var(--accent); }
body.console-theme a:hover { color: var(--accent-hot); text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.3); }
body.console-theme code { color: var(--accent); background: rgba(var(--accent-rgb), 0.06); padding: 1px 5px; border-radius: 3px; }
body.console-theme .lede { color: var(--muted); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

body.console-theme .btn {
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}
body.console-theme .btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
}
body.console-theme .btn-primary {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}
body.console-theme .btn-primary:hover {
  background: rgba(var(--accent-rgb), 0.22);
  box-shadow: var(--glow-accent);
}
body.console-theme .btn-danger {
  color: var(--bad);
  border-color: rgba(255, 23, 68, 0.3);
}
body.console-theme .btn-danger:hover {
  background: var(--bad-soft);
  border-color: var(--bad);
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.2);
}
body.console-theme .btn[disabled],
body.console-theme .btn:disabled { opacity: 0.3; }

/* ── Forms ─────────────────────────────────────────────────────────────── */

body.console-theme input[type="text"],
body.console-theme input[type="email"],
body.console-theme input[type="password"],
body.console-theme input[type="number"],
body.console-theme input[type="search"],
body.console-theme input[type="url"],
body.console-theme select,
body.console-theme textarea {
  background: var(--ink);
  border-color: var(--line);
  color: var(--text);
}
body.console-theme input:focus,
body.console-theme select:focus,
body.console-theme textarea:focus {
  outline-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
}
body.console-theme input::placeholder,
body.console-theme textarea::placeholder { color: var(--muted); opacity: 0.6; }

body.console-theme label { color: var(--muted); }
body.console-theme label .required { color: var(--accent); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */

body.console-theme .tabs { border-bottom-color: var(--line); }
body.console-theme .tabs a { color: var(--muted); }
body.console-theme .tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
body.console-theme .tabs a:hover { color: var(--accent); }

/* ── Pills ─────────────────────────────────────────────────────────────── */

body.console-theme .pill-running {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: rgba(0, 230, 118, 0.3);
  text-shadow: 0 0 6px rgba(0, 230, 118, 0.3);
}
body.console-theme .pill-paused,
body.console-theme .pill-draft,
body.console-theme .pill-deleted {
  background: rgba(90, 115, 148, 0.1);
  color: var(--muted);
  border-color: var(--line);
}
body.console-theme .pill-creating,
body.console-theme .pill-seeding,
body.console-theme .pill-pausing,
body.console-theme .pill-resuming,
body.console-theme .pill-deleting {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: rgba(255, 171, 0, 0.3);
  text-shadow: 0 0 6px rgba(255, 171, 0, 0.3);
}
body.console-theme .pill-failed {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: rgba(255, 23, 68, 0.3);
  text-shadow: 0 0 6px rgba(255, 23, 68, 0.3);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

body.console-theme th {
  color: var(--muted);
  border-bottom-color: var(--line);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.console-theme td { border-bottom-color: var(--line); }
body.console-theme tr:hover td { background: rgba(var(--accent-rgb), 0.03); }

/* ── Messages ──────────────────────────────────────────────────────────── */

body.console-theme .messages li {
  background: var(--paper);
  border-color: var(--line);
  color: var(--text);
}
body.console-theme .messages li.success {
  background: var(--ok-soft);
  border-color: rgba(0, 230, 118, 0.3);
  color: var(--ok);
}
body.console-theme .messages li.error {
  background: var(--bad-soft);
  border-color: rgba(255, 23, 68, 0.3);
  color: var(--bad);
}
body.console-theme .messages li.warning {
  background: var(--warn-soft);
  border-color: rgba(255, 171, 0, 0.3);
  color: var(--warn);
}
body.console-theme .messages li.info {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */

body.console-theme .divider { background: var(--line); }
body.console-theme .kv dt { color: var(--muted); }
body.console-theme .log { color: var(--ok); }

/* ── Instructor notes ──────────────────────────────────────────────────── */

.instructor-notes {
  font-size: 14px;
  line-height: 1.6;
}
.notes-block {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, #e0e0e0);
}
.notes-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.notes-block-label {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.notes-section {
  background: rgba(128,128,128,0.06);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 6px 0;
}
.notes-heading {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--fg, #222);
}
.notes-field {
  margin-bottom: 6px;
}
.notes-key {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.notes-list {
  margin: 2px 0 0 0;
  padding-left: 18px;
}
.notes-list li {
  margin-bottom: 3px;
}
.notes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 6px 0;
}
.notes-table td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--line, #e0e0e0);
  vertical-align: top;
}
.notes-table tr:last-child td { border-bottom: none; }

/* Console-theme overrides for instructor notes */
body.console-theme .notes-heading { color: var(--accent); }
body.console-theme .notes-section { background: rgba(var(--accent-rgb), 0.04); border: 1px solid rgba(var(--accent-rgb), 0.08); }
body.console-theme .notes-table td { border-color: rgba(var(--accent-rgb), 0.1); }

/* ── Projector override — keep the dark look but use glow accents ──── */

body.console-theme .projector {
  background: var(--ink);
  box-shadow: inset 0 0 120px rgba(var(--accent-rgb), 0.03);
}
body.console-theme .projector .value.accent {
  color: var(--accent);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.4);
}

/* ── Atmosphere: grain + scanlines (sit above the grid, below chrome) ── */

body.console-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
}
body.console-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(var(--accent-rgb), 0.012) 2px,
    rgba(var(--accent-rgb), 0.012) 4px
  );
}

/* ══════════════════════════════════════════════════════════════════════════
   HUNT HUB — attendee mission control
   ══════════════════════════════════════════════════════════════════════════ */

body.hunt-hub {
  --neon: #ff7a2e;
  --neon-dim: rgba(var(--accent-rgb), 0.15);
  --neon-glow: rgba(var(--accent-rgb), 0.45);
  --gold: #FFD700;
  --green: #00FF88;
  --red: #FF4757;
  --surface: rgba(22, 12, 8, 0.62);
}
body.hunt-hub .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-icon {
  width: 11px;
  height: 12px;
  background: var(--neon, var(--accent));
  clip-path: var(--hex);
  box-shadow: 0 0 8px var(--neon-glow, rgba(var(--accent-rgb), 0.45)), 0 0 16px rgba(var(--accent-rgb), 0.35);
  flex-shrink: 0;
}

/* Layout: main + sidebar */
.hunt-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .hunt-layout { grid-template-columns: 1fr; }
}

body.hunt-hub main > .wrap { max-width: 1200px; }

.hunt-command {
  margin-bottom: 22px;
  padding: 22px 22px 18px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: 18px 28px;
}
.hunt-command-lead { grid-column: 1; }
.hunt-command-stats {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px 20px;
}
.hunt-progress { grid-column: 1 / -1; margin: 0; }
@media (max-width: 800px) {
  .hunt-command { grid-template-columns: 1fr; }
  .hunt-command-stats { justify-content: flex-start; }
}
.hunt-eyebrow,
.ops-eyebrow,
.pj-event-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.hunt-eyebrow::before,
.ops-eyebrow::before,
.pj-event-eyebrow::before {
  content: "";
  width: 8px;
  height: 9px;
  background: currentColor;
  clip-path: var(--hex);
  box-shadow: 0 0 8px var(--neon-glow, rgba(var(--accent-rgb), 0.4));
}
h1.hunt-title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f6eee6;
  text-shadow: 0 0 24px var(--neon-glow);
  margin: 0;
  line-height: 0.95;
}
.hunt-command-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.hunt-stat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.hunt-stat-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
  letter-spacing: -0.02em;
}
.hunt-discover { align-self: center; }
.btn-glow {
  box-shadow: 0 0 15px var(--neon-glow), inset 0 0 15px rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--neon);
  text-shadow: 0 0 8px var(--neon-glow);
  transition: box-shadow 0.3s, transform 0.15s;
}
.btn-glow:hover {
  box-shadow: 0 0 25px var(--neon-glow), 0 0 50px rgba(var(--accent-rgb), 0.2), inset 0 0 20px rgba(var(--accent-rgb), 0.15);
  transform: translateY(-1px);
}

/* Scenario cards */
.hunt-scenario-card {
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}
.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.scenario-kicker {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.scenario-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
}
.hunt-start {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.scenario-brief {
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 16px;
}
.pill-difficulty { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pill-easy { background: rgba(0,255,136,0.15); color: var(--green); }
.pill-medium { background: rgba(255,215,0,0.15); color: var(--gold); }
.pill-hard { background: rgba(255,71,87,0.15); color: var(--red); }

/* Objectives */
.objectives-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neon);
  margin: 0 0 12px 0;
}
.objectives-grid {
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
  padding-top: 16px;
}
.objective-card {
  background: rgba(24, 12, 8, 0.5);
  border: 1px solid rgba(var(--accent-rgb), 0.08);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.objective-card:hover {
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.08);
}
.objective-found {
  border-color: rgba(0,255,136,0.3) !important;
  background: rgba(0,255,136,0.04);
}
.objective-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.obj-index {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 2.2ch;
  padding-top: 3px;
}
.objective-found .obj-index { color: var(--green); }
.objective-card.just-found {
  animation: found-pop 0.7s ease;
}
.objective-status-icon {
  flex-shrink: 0;
  margin-top: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-icon {
  display: block;
  width: 13px;
  height: 15px;
  position: relative;
  clip-path: var(--hex);
}
.status-icon.open {
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon-glow);
}
.status-icon.open::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #161210;
  clip-path: var(--hex);
}
.status-icon.found {
  background: var(--green);
  box-shadow: 0 0 10px rgba(0,255,136,0.7), 0 0 18px rgba(0,255,136,0.35);
}
.objective-info { flex: 1; }
.objective-title {
  font-weight: 600;
  color: #fff;
  font-size: 15px;
  margin-bottom: 4px;
}
.objective-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.points-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.05));
  border: 1px solid rgba(255,215,0,0.3);
  color: var(--gold);
  font-weight: 700;
  font-size: 15px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.points-badge small {
  font-size: 10px;
  font-weight: 400;
  margin-left: 2px;
  opacity: 0.7;
}

/* Answer form */
.submit-form-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.06);
}
.answer-row {
  display: flex;
  gap: 8px;
}
.answer-input {
  flex: 1;
  background: rgba(24, 12, 8, 0.82) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
}
.answer-input:focus {
  border-color: var(--neon) !important;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.15);
  outline: none;
}
.answer-input::placeholder { color: rgba(255,255,255,0.3); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.submit-feedback {
  font-size: 13px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 4px;
}
.feedback-ok {
  color: var(--green);
  background: rgba(0,255,136,0.08);
}
.feedback-error {
  color: var(--red);
  background: rgba(255,71,87,0.08);
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.hunt-sidebar { position: sticky; top: 16px; }

.sidebar-card {
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}
.sidebar-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neon);
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Live dot */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  box-shadow: 0 0 8px rgba(0,255,136,0.6);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0,255,136,0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 4px rgba(0,255,136,0.3); }
}

/* Leaderboard */
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: background 0.2s;
}
.lb-row:hover { background: rgba(var(--accent-rgb), 0.05); }
.lb-first {
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2);
}
.lb-first:hover { background: rgba(255,215,0,0.12); }
.lb-rank {
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  min-width: 28px;
}
.lb-first .lb-rank { color: var(--gold); }
.lb-name {
  flex: 1;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-score {
  font-weight: 700;
  font-size: 14px;
  color: var(--neon);
  white-space: nowrap;
}
.lb-first .lb-score { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,0.4); }
.lb-empty, .feed-empty {
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  padding: 16px 0;
}

/* Broadcast feed */
.feed-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.06);
  font-size: 14px;
}
.feed-item.is-new {
  animation: toast-in 0.35s ease-out;
}
.feed-item:last-child { border-bottom: none; }
.feed-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.08);
}
.feed-page {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}
.feed-pager .btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.feed-time {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-family: monospace;
  margin-right: 8px;
}
.feed-msg { color: rgba(255,255,255,0.8); }

/* My submissions */
.sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 13px;
}
.sub-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sub-pending .sub-status-dot { background: var(--gold); }
.sub-accepted .sub-status-dot { background: var(--green); box-shadow: 0 0 6px rgba(0,255,136,0.5); }
.sub-rejected .sub-status-dot { background: var(--red); }
.sub-obj { flex: 1; color: rgba(255,255,255,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-status-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.sub-pending .sub-status-label { color: var(--gold); }
.sub-accepted .sub-status-label { color: var(--green); }
.sub-rejected .sub-status-label { color: var(--red); }

/* Progress, hints, debrief, toasts */
.hunt-progress {
  margin-bottom: 0;
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.progress-row { display: flex; flex-direction: column; gap: 6px; }
.progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.progress-track {
  height: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.35);
}
.progress-fill {
  height: 100%;
  width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 99px;
  background-size: 200% 100%;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: progress-sheen 2.4s ease-in-out infinite;
}
.progress-fill-you {
  background-image: linear-gradient(90deg, #ff7a2e, #f0b323, #ff7a2e);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55), 0 0 22px rgba(240, 179, 35, 0.25);
  animation: progress-flow 3.2s linear infinite;
}
.progress-fill-room {
  background-image: linear-gradient(90deg, #8a7a6c, #f0b323, #8a7a6c);
  box-shadow: 0 0 12px rgba(138, 122, 108, 0.45), 0 0 22px rgba(240, 179, 35, 0.2);
  animation: progress-flow 3.8s linear infinite;
}
@keyframes progress-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes progress-sheen {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(280%); }
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill,
  .progress-fill::after {
    animation: none;
  }
}
.display-name-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.display-name-form input {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
}
.objective-locked {
  opacity: 0.55;
  border-style: dashed;
}
.obj-feedback {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.obj-feedback.sub-pending { background: rgba(255,215,0,0.08); color: var(--gold); }
.obj-feedback.sub-accepted { background: rgba(0,255,136,0.08); color: var(--green); }
.obj-feedback.sub-rejected { background: rgba(255,71,87,0.08); color: var(--red); }
.obj-hint {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  background: rgba(255,215,0,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
}
.obj-query, .feed-query {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.obj-query code, .feed-query code {
  flex: 1;
  font-size: 12px;
  word-break: break-all;
  color: var(--neon);
}
.query-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-wrap: nowrap;
  margin-top: 10px;
  background: rgba(8, 4, 2, 0.55);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 8px;
  overflow: hidden;
}
.query-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(var(--accent-rgb), 0.06);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}
.query-dots {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 10px 0 0 #f0b323, 20px 0 0 rgba(255, 255, 255, 0.25);
  margin-right: 22px;
  flex-shrink: 0;
}
.query-label {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.query-block code {
  display: block;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--accent-hot);
  background: transparent;
}
.obj-debrief {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--green);
  background: rgba(0,255,136,0.06);
  color: var(--green);
  font-size: 13px;
}
.debrief-banner {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(0,255,136,0.3);
  background: rgba(0,255,136,0.08);
  color: var(--green);
  border-radius: 8px;
  font-weight: 600;
}
.debrief-notes {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 12px;
}
.debrief-notes h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.debrief-notes ul { margin: 0; padding-left: 18px; color: rgba(255,255,255,0.75); }
.hunt-toasts {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.hunt-toast {
  background: rgba(18, 10, 8, 0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15);
  font-size: 14px;
  animation: toast-in 0.35s ease-out;
}
.hunt-toast-blood {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.25);
  color: #ffe082;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes found-pop {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
  100% { box-shadow: none; }
}

/* Admin review chips and hunt pacing */
.review-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chip {
  background: transparent;
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.2));
  color: inherit;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 99px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.pacing-switch { margin-bottom: 16px; }
.pacing-choices ul { list-style: none; padding: 0; margin: 0 0 12px; }
.pacing-choices li,
.pacing-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
}
.pacing-choices input { width: auto; margin: 0; }
.pacing-scenario {
  font-family: var(--mono, inherit);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 10px;
  border-bottom: none;
}
.pacing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.pacing-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.06));
}
.inline-form { display: inline; margin: 0; }

/* Projector: full-bleed tab, no site chrome */
body.projector-page {
  background: var(--ink);
}
body.projector-page main { padding: 0; }
body.projector-page footer.site { display: none; }
body.projector-page .projector-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
.projector {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 40px 48px 88px;
  position: relative;
  overflow: hidden;
}
.projector::before {
  content: "";
  position: absolute;
  width: min(46vw, 460px);
  height: min(52vw, 520px);
  right: -8vw;
  top: -10vw;
  clip-path: var(--hex);
  background: rgba(var(--accent-rgb), 0.07);
  pointer-events: none;
}
.projector::after {
  content: "";
  position: absolute;
  width: min(22vw, 220px);
  height: min(25vw, 250px);
  left: -4vw;
  bottom: 8vh;
  clip-path: var(--hex);
  background: rgba(240, 179, 35, 0.05);
  pointer-events: none;
}
.projector.projector-live {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 28px 40px 80px;
  gap: 20px;
}
.projector-view { width: 100%; }
.projector-view[hidden] { display: none !important; }
.projector-board-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.projector-meta {
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  max-width: 52ch;
  margin: 0 auto;
}
.projector-meta strong { color: #fdba74; }

.pj-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.pj-title { min-width: 200px; }
.pj-room-name {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}
.pj-progress-block { flex: 1; min-width: 280px; max-width: 640px; }
.pj-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pj-progress-count {
  font-family: var(--mono);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
}
.pj-progress-track {
  height: 14px;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 99px;
  overflow: hidden;
}
.pj-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ff7a2e, #f0b323);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
  transition: width 0.4s ease;
}

.pj-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .pj-grid { grid-template-columns: 1fr; }
}
.pj-pane {
  background: rgba(22, 12, 8, 0.45);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 16px;
  padding: 20px 24px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pj-leaderboard, .pj-solves {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 8px;
}
.pj-empty {
  color: rgba(255,255,255,0.4);
  font-size: clamp(18px, 2.2vw, 26px);
  padding: 24px 0;
}
.pj-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto auto;
  align-items: baseline;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: clamp(22px, 2.6vw, 34px);
}
.pj-row-first {
  background: rgba(255, 215, 0, 0.08);
  border-radius: 10px;
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.22);
}
.pj-rank {
  font-family: var(--mono);
  color: rgba(255,255,255,0.45);
  font-weight: 700;
}
.pj-row-first .pj-rank { color: var(--gold, #ffd700); }
.pj-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-solves-count {
  font-size: 0.55em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pj-score {
  font-family: var(--mono);
  font-weight: 700;
  color: #ffd54a;
  white-space: nowrap;
}
.pj-score small { font-size: 0.5em; font-weight: 500; color: rgba(255,213,74,0.7); }

.pj-solve {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: clamp(18px, 2vw, 26px);
}
.pj-solve-name { font-weight: 650; }
.pj-solve-title { color: rgba(255,255,255,0.7); }
.pj-first {
  display: inline-block;
  font-size: 0.55em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.pj-note {
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.08);
  border-radius: 12px;
  padding: 14px 20px;
}
.pj-broadcast {
  font-size: clamp(20px, 2.4vw, 30px);
  color: #fff;
  line-height: 1.3;
  margin-top: 4px;
}

.projector-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.projector-controls a {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
}
.projector-switch {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  overflow: hidden;
}
.pj-tab {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
}
.pj-tab.is-active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* ── Instructor live ops ───────────────────────────────────────────────── */

.ops-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
@media (max-width: 800px) {
  .ops-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ops-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
a.ops-stat {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
a.ops-stat:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.ops-stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ops-stat-value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--heading);
  line-height: 1;
}
.ops-stat-status {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ops-stat-hot {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: var(--glow);
}
.ops-stat-hot .ops-stat-value { color: var(--accent); }

.pending-queue {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pending-card {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 3px solid var(--line);
}
.pending-card:first-child {
  border-left-color: var(--accent);
  box-shadow: var(--glow);
  animation: pending-hot 2.6s ease-in-out infinite;
}
.pending-card.is-new {
  animation: pending-in 0.8s ease;
}
.pending-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.pending-hunter {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--heading);
}
.pending-path {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.pending-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.pending-pts {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-gold, #f0b323);
}
.pending-when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.pending-card .pending-answer {
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.4;
  color: #f6eee6;
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  word-break: break-word;
}
.pending-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
@keyframes pending-hot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18); }
}
@keyframes pending-in {
  from { background: rgba(var(--accent-rgb), 0.12); }
  to { background: var(--ink); }
}

/* ── Projector event poster ────────────────────────────────────────────── */

.pj-event-eyebrow {
  color: var(--accent-gold, #f0b323);
}
.pj-event-title {
  font-family: var(--display);
  font-size: clamp(42px, 7vw, 84px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 0 40px rgba(var(--accent-rgb), 0.28);
}
.pj-event-sub {
  margin: 0 0 36px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}
.pj-rank, .pj-score, .pj-progress-count, .projector .value {
  font-family: var(--mono);
}
.projector.pj-blood-flash {
  animation: blood-wash 1.4s ease;
}
.pj-solve-flash {
  animation: found-pop 0.9s ease;
}
.pj-first {
  color: var(--gold, #ffd700);
}
@keyframes blood-wash {
  0% { box-shadow: inset 0 0 180px rgba(255, 215, 0, 0.22); }
  100% { box-shadow: inset 0 0 120px rgba(var(--accent-rgb), 0.03); }
}

@media (prefers-reduced-motion: reduce) {
  .hunt-toast,
  .feed-item.is-new,
  .objective-card.just-found,
  .pending-card:first-child,
  .pending-card.is-new,
  .projector.pj-blood-flash,
  .pj-solve-flash,
  .live-dot {
    animation: none;
  }
}

/* ── Toolbelt ───────────────────────────────────────────────────────────── */
/* Risk colours follow the report template's palette (Critical #7030A0, High
   #FF0000, Medium #F06C00, Low #DAA600, Informational #0070C0), lifted so
   they read on the console's dark surfaces. */

body.console-theme {
  --risk-critical: #b884ea;
  --risk-high: #ff5a5a;
  --risk-medium: #ff9142;
  --risk-low: #e8c547;
  --risk-informational: #58a8ff;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.tiles-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 170px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tiles-compact .tile { min-height: 0; padding: 16px; }
body.console-theme a.tile { color: var(--text); }
body.console-theme a.tile:hover { border-color: var(--accent); text-shadow: none; transform: translateY(-2px); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-name { font-family: var(--display, var(--sans)); font-size: 19px; font-weight: 700; color: var(--heading); display: flex; align-items: center; }
.tile-blurb { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tile-go { margin-top: auto; font-size: 13px; color: var(--accent); font-weight: 600; }
.tile .pill { position: absolute; top: 18px; right: 18px; }

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  flex: none;
}
.swatch-lg { width: 18px; height: 18px; border-radius: 4px; margin-right: 12px; vertical-align: -1px; }
.code { font-family: var(--mono); font-weight: 600; }
body.console-theme h1.code-title { text-transform: none; letter-spacing: 0.01em; }

.pill-active { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill-prospect { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill-former { background: var(--paper-alt); color: var(--muted); border-color: var(--line); }
.pill-restricted { background: var(--bad-soft); color: var(--bad); border-color: transparent; margin-left: 8px; }
.pill-e-planned, .pill-e-closed { background: var(--paper-alt); color: var(--muted); border-color: var(--line); }
.pill-e-active, .pill-e-reporting { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill-e-delivered { background: var(--ok-soft); color: var(--ok); border-color: transparent; }

/* Engagement board */
.eng-board {
  display: flex;
  gap: 14px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 8px;
  margin: 0 0 24px;
}
.eng-column {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 320px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.eng-column-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--line);
}
.eng-column-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.eng-column-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.eng-column-empty { margin: 8px 4px; }
.eng-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eng-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.eng-card-code {
  font-weight: 600;
  font-size: 13px;
  word-break: break-all;
  line-height: 1.3;
}
.eng-card-client { font-size: 13px; }
.eng-card-title { margin: 0; }
.eng-card-meta {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 12px;
}
.eng-card-meta > div { display: flex; gap: 8px; }
.eng-card-meta dt { color: var(--muted); min-width: 3.5rem; }
.eng-card-meta dd { margin: 0; }
.eng-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.eng-card-status select {
  font-size: 12px;
  padding: 4px 6px;
  max-width: 10rem;
}
.eng-hub-grid { margin-top: 12px; align-items: start; }
.eng-hub-grid h3 { margin: 0 0 8px; font-size: 14px; }
.eng-hub-grid .btn { margin-top: 8px; }
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pill-pw-pending { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill-pw-off { background: var(--paper-alt); color: var(--muted); border-color: var(--line); }
.pill-pw-done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill-pw-failed, .pill-pw-blocked { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill-kind { background: var(--paper-alt); color: var(--muted); border-color: var(--line); text-transform: capitalize; }

.risk-critical { --risk: var(--risk-critical); }
.risk-high { --risk: var(--risk-high); }
.risk-medium { --risk: var(--risk-medium); }
.risk-low { --risk: var(--risk-low); }
.risk-informational { --risk: var(--risk-informational); }
.risk-text { color: var(--risk, var(--text)); font-weight: 600; }
.risk-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.risk-chip, .type-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.risk-chip { border-color: var(--risk); }
.risk-chip strong, .type-chip strong { color: var(--risk, var(--text)); font-family: var(--mono); }
.mini-counts { display: inline-flex; gap: 4px; }
.risk-dot {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  text-align: center;
  color: #0c0a09;
  background: var(--risk);
}

.filters { margin: 4px 0 16px; }
.filters input[type="text"] { flex: 1 1 260px; width: auto; }
.filters select { width: auto; flex: 0 1 220px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 20px;
}
.field-wide { grid-column: 1 / -1; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
label.check input { width: auto; margin: 0; }
.checks-inline { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks-inline label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; font-size: 13px; }
.checks-inline input { width: auto; margin: 0; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.checks div > div { margin-bottom: 6px; }
.checks div > div label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
.checks div > div input { width: auto; margin: 0; }

input[type="date"] {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: var(--paper);
  color: var(--text);
  color-scheme: dark;
}
body.console-theme input[type="date"] { background: var(--ink-soft); border-color: var(--line); color: var(--text); }
body.console-theme input:disabled { opacity: 0.65; }

.radio-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
}
.radio-card input { width: auto; margin: 0; accent-color: var(--risk, var(--accent)); }
.radio-card:has(input:checked) { border-color: var(--risk, var(--accent)); background: var(--accent-soft); }
.radio-card.risk-critical span, .radio-card.risk-high span, .radio-card.risk-medium span,
.radio-card.risk-low span, .radio-card.risk-informational span { color: var(--risk); font-weight: 600; }

.code-suggest { margin-top: 8px; }
.code-suggest .row { margin-top: 6px; gap: 6px; }
.code-option { font-family: var(--mono); }
.code-option.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.region-picker { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.region-picker legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.region-picker > .help { margin: 0 0 10px; }
.region-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.region-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.region-group-solo { justify-content: center; }
.region-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.region-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; font-weight: 400; }
.region-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.region-chip > span:first-of-type { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; line-height: 1.4; color: var(--muted); transition: background 0.12s, border-color 0.12s, color 0.12s; }
.region-chip:hover > span:first-of-type { border-color: rgba(var(--accent-rgb), 0.6); }
.region-chip input:checked + span { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.8); color: inherit; }
.region-chip input:focus-visible + span { outline: 2px solid rgba(var(--accent-rgb), 0.9); outline-offset: 2px; }
.region-chip-head > span:first-of-type { font-weight: 600; font-size: 13px; color: inherit; }
.region-chip-head small { font-weight: 400; color: var(--muted); margin-left: 2px; }
.region-group:has(.region-chip-head input:checked) .region-chips { opacity: 0.45; }
.region-tip {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  min-width: 160px;
  max-width: 240px;
  max-height: 260px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.region-chip-tip:hover .region-tip,
.region-chip-tip:focus-within .region-tip { display: block; }
.region-group:first-child .region-tip,
.region-chips .region-chip:nth-child(-n+2) .region-tip {
  left: 0;
}
@media (max-width: 600px) {
  .region-tip { max-width: min(240px, 70vw); }
}
.co-dossier { margin-top: 8px; }
.co-dossier-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.co-dossier-h h2 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.co-dossier-lede { margin: 0 0 12px; max-width: 720px; }
.co-dossier-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.co-logo { border-radius: 8px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); }
.co-name { margin: 0 0 4px; font-size: 22px; line-height: 1.2; }
.co-tagline { margin: 0; font-size: 14px; }
.co-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; margin: 0 0 16px; }
.co-facts div { margin: 0; }
.co-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 2px; }
.co-facts dd { margin: 0; font-size: 14px; }
.co-section { margin-bottom: 16px; }
.co-section h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.co-about { margin: 0; line-height: 1.55; max-width: 780px; }
.co-people { margin: 0; padding-left: 1.1em; }
.co-people li { margin-bottom: 4px; }
.co-fold { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.co-fold summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; }
.co-fold summary::-webkit-details-marker { display: none; }
.co-fold summary h3 { margin: 0; font-size: 13px; display: inline; }
.co-exposure-list { margin: 8px 0 0; padding-left: 1.1em; }
.co-exposure-list li { margin-bottom: 10px; }
.co-qid { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.co-qid input { max-width: 120px; }
.plant-bank td { vertical-align: top; }
.plant-bank tr.is-focus td { background: var(--accent-soft); }
.tag-retired { color: var(--muted); text-decoration: line-through; }
.plant-additions { margin-top: 2px; }

.tag {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--mono);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  color: var(--text);
}
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 5px 0; }
.stack { display: grid; gap: 8px; }
.choice-list li a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.choice-list li a:hover { border-color: var(--accent); }
.findings-list { margin: 0; padding-left: 20px; }
.findings-list li { margin-bottom: 4px; }
.bad { color: var(--bad); }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.danger-zone summary { cursor: pointer; color: var(--bad); font-weight: 600; }
.danger-zone input { max-width: 320px; }

.lookup-bar input { flex: 1 1 auto; font-family: var(--mono); }
.lookup-bar .btn, .row > .btn, .row > form > .btn { white-space: nowrap; }
.verdict {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 8px 0 20px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone, var(--muted));
  border-radius: var(--radius);
  background: var(--paper);
}
.verdict-bad { --tone: var(--bad); }
.verdict-warn { --tone: var(--warn); }
.verdict-ok { --tone: var(--ok); }
.verdict-muted { --tone: var(--muted); }
body.console-theme h1.verdict-value { text-transform: none; font-size: 20px; letter-spacing: 0; word-break: break-all; margin: 0; }
.verdict-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--muted); }
.verdict-label { font-family: var(--display, var(--sans)); font-size: 26px; font-weight: 700; color: var(--tone); text-transform: uppercase; letter-spacing: 0.04em; }
.intel-list { display: grid; gap: 10px; margin-bottom: 20px; }
.intel-item p { margin: 8px 0; }
.briefing { font-size: 14px; line-height: 1.6; }
.briefing p { margin: 0 0 10px; }

/* ── Threat brief: the single pane ─────────────────────────────────────── */

.brief-hero {
  --level: var(--warn);
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 24px;
  margin: 20px 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--level);
  border-radius: var(--radius);
  background: var(--paper);
}
.brief-hero.level-elevated { --level: var(--bad); }
.brief-hero.level-guarded { --level: var(--warn); }
.brief-hero.level-low { --level: var(--ok); }
/* The threat-level scale: same three colours as the level itself. */
.threat-scale { --level: var(--warn); --pos: 50%; margin: 24px 0 0; }
.threat-scale.level-low { --level: var(--ok); --pos: 16.667%; }
.threat-scale.level-guarded { --level: var(--warn); --pos: 50%; }
.threat-scale.level-elevated { --level: var(--bad); --pos: 83.333%; }
.scale-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 10px; }
.scale-zone { border-radius: 5px; opacity: 0.25; }
.zone-low { background: var(--ok); }
.zone-guarded { background: var(--warn); }
.zone-elevated { background: var(--bad); }
.level-low .zone-low,
.level-guarded .zone-guarded,
.level-elevated .zone-elevated { opacity: 1; box-shadow: 0 0 14px var(--level); }
.scale-marker {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--level);
  box-shadow: 0 0 0 3px var(--paper-alt), 0 0 16px var(--level);
  transform: translate(-50%, -50%);
}
.scale-labels { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.level-low .label-low,
.level-guarded .label-guarded,
.level-elevated .label-elevated { color: var(--level); }
.threat-scale + .brief-hero { margin-top: 14px; }

.brief-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.brief-level { display: flex; flex-direction: column; gap: 4px; }
.brief-level strong { font-family: var(--display, var(--sans)); font-size: 30px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.04em; color: var(--level); }
.brief-bluf p { font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
.brief-meta form, .brief-meta .linkish { vertical-align: baseline; }
.brief-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0; }
.brief-status > div { flex: 1; }
.brief-status-bad { border-left: 4px solid var(--bad); }
.brief-empty { margin-top: 20px; }
.spinner {
  width: 22px; height: 22px; flex: none;
  border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.threat-list { margin: 0; padding-left: 20px; }
.threat-list li { margin-bottom: 14px; }
.threat-list li:last-child { margin-bottom: 0; }
.threat-list p { margin: 4px 0; font-size: 14px; }
.action-list li { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.action-list li:first-child { border-top: 0; padding-top: 0; }
.action-list .tag { margin: 4px 6px 0 0; }
.urgency { text-align: center; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; }
.urgency-now { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.urgency-this-week { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.urgency-this-month { color: var(--muted); }
.refs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.refs-block { display: flex; margin-top: 6px; }
.ref { font-size: 11.5px; font-family: var(--mono); padding: 1px 7px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.ref:hover { border-color: var(--accent); }

.exposure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.exposure { --tone: var(--muted); padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: var(--radius); }
.exposure p { margin: 6px 0; }
.exposure .pill { color: var(--tone); border-color: var(--tone); }
.exposure-act { --tone: var(--bad); }
.exposure-watch { --tone: var(--warn); }
.exposure-clear { --tone: var(--ok); }

.new-dot { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); padding: 0 6px; border: 1px solid var(--accent); border-radius: 8px; vertical-align: 1px; }
.glance-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.glance-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; color: var(--text); }
body.console-theme a.glance-stat { color: var(--text); }
.glance-stat:hover { border-color: var(--accent); }
.glance-num { font-family: var(--display, var(--sans)); font-size: 26px; font-weight: 700; line-height: 1.1; }
.glance-label { font-size: 13px; color: var(--muted); }
.glance-stat .new-dot { align-self: flex-start; margin-top: 4px; }
.headline-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; border-top: 1px solid var(--line); }
.headline-list li:first-child { border-top: 0; }

.feed-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.feed-nav a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; font-size: 13px; text-decoration: none; }
.feed-nav a:hover { border-color: var(--accent); }
.feed-heading, .intel-item { scroll-margin-top: 16px; }
.intel-item:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

@media (max-width: 640px) {
  .brief-hero { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .action-list li { grid-template-columns: 1fr; gap: 4px; }
  .urgency { justify-self: start; }
}

@media (max-width: 640px) {
  .tile { min-height: 0; }
  .verdict-badge { align-items: flex-start; }
  .filters select { flex: 1 1 100%; }
  .access-row { align-items: flex-start; }
}

/* Narrow screens: let the tool nav wrap under the brand instead of running off
   the edge, and let wide tables scroll inside their card. */
.card:has(> table) { overflow-x: auto; }
@media (max-width: 800px) {
  .topbar .wrap { flex-wrap: wrap; row-gap: 6px; column-gap: 16px; padding-top: 10px; padding-bottom: 10px; }
  .topbar .brand { flex: 1 0 100%; }
  .topbar .who { display: none; }
  .wrap { padding: 0 16px; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   APPS — every tool is its own app
   One bar per tool, carrying only that tool's links; the toolbelt logo goes
   back to the toolbelt. Each tool then redefines the console palette and type:
     labs     ember console (the original orange HUD)
     clients  the codebook: violet dossier, stencil codenames
     cti      signal: cyan radar grid, tactical type
     reports  the file folder: manila, cream sheets, serif, rust
     hunts    target lock: crimson on black, condensed tactical type
     sales    the signed contract: white paper, royal blue ink
     toolbelt the home page's graphite, for pages outside any tool (Access)
   ══════════════════════════════════════════════════════════════════════════ */

.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 10px 0;
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.appbar .wrap { display: flex; align-items: center; gap: 18px; }
.appbar .spacer, .belt-bar .spacer { flex: 1; }
body.console-theme .appbar a { text-shadow: none; }
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--heading) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}
.app-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-nav { display: flex; gap: 2px; margin-left: 6px; }
.app-nav a { padding: 6px 11px; border-radius: 6px; color: var(--muted) !important; text-decoration: none; font-size: 14px; font-weight: 500; }
.app-nav a:hover { color: var(--text) !important; background: rgba(var(--accent-rgb), 0.08); }
.app-nav a.active { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.13); }
.appbar .who { font-size: 13px; color: var(--muted); }
a.who { text-decoration: none; }
.appbar a.who:hover, .topbar a.who:hover { color: var(--accent); }
.app-text-link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted) !important; text-decoration: none; cursor: pointer; }
.app-text-link:hover { color: var(--text) !important; }
/* The toolbelt logo, as the way back. The tool you're in keeps its square lit;
   hovering lights them all and slides in the arrow. */
.app-back {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 7px 9px;
  margin-right: -6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted) !important;
  text-decoration: none;
  transition: border-color 0.15s ease, gap 0.15s ease;
}
.app-back-arrow { width: 0; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: width 0.15s ease; }
.app-back .belt-logo i { opacity: 0.3; transition: opacity 0.15s ease; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.app-back:hover, .app-back:focus-visible { border-color: var(--accent); gap: 6px; color: var(--accent) !important; }
.app-back:hover .app-back-arrow, .app-back:focus-visible .app-back-arrow { width: 12px; }
.app-back:hover .belt-logo i, .app-back:focus-visible .belt-logo i,
.app-toolbelt .app-back .belt-logo i,
.app-back .belt-logo i.lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .app-back, .app-back-arrow, .app-back .belt-logo i { transition: none; } }
@media (max-width: 800px) {
  .appbar .wrap { flex-wrap: wrap; row-gap: 8px; }
  .appbar .who { display: none; }
  .app-nav { order: 10; flex: 1 0 100%; margin-left: 0; overflow-x: auto; }
}

/* ── Labs: the DQL guide, query assist and scenario generator ──────────── */

.dql-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 18px; }
.dql-toc a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--muted) !important; }
.dql-toc a:hover { color: var(--accent) !important; border-color: var(--accent); }
.dql-section { margin: 28px 0; scroll-margin-top: 70px; }
.dql-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.dql-card { position: relative; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.dql-card p { margin: 8px 0 0; }
.dql-tag { display: inline-block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.dql-code { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 6px; background: var(--ink); border: 1px solid var(--line); }
.dql-code code { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; background: none !important; padding: 0 !important; }
.dql-copy { flex: none; padding: 2px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.dql-copy:hover { color: var(--accent); border-color: var(--accent); }
.dql-tips li { margin: 6px 0; }
.dql-fields { width: 100%; }
.dql-fields td { padding: 5px 8px 5px 0; vertical-align: top; border: 0; }
.dql-scenario { margin-top: 12px; }
.dql-scenario > summary { cursor: pointer; }
.dql-object { margin: 6px 0; line-height: 2; }
.dql-object .mono { display: inline-block; min-width: 90px; color: var(--muted); }
.hunt-nav { display: flex; gap: 2px; margin-left: 8px; }
.hunt-nav a { padding: 6px 11px; border-radius: 6px; font-weight: 500; }
body.console-theme .hunt-nav a:hover { background: rgba(var(--accent-rgb), 0.08); text-shadow: none; }
body.console-theme .hunt-nav a.active { background: rgba(var(--accent-rgb), 0.13); text-shadow: none; }

.query-assist > summary { cursor: pointer; }
.qa-result { margin-top: 12px; }
.qa-result .row { gap: 8px; }
.qa-warnings { margin: 6px 0; padding-left: 18px; }
.qa-warnings:empty { display: none; }

.gen-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0; }
.gen-mode { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.gen-mode input { position: absolute; opacity: 0; pointer-events: none; }
.gen-mode:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.gen-mode:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(var(--accent-rgb), 0.18); }
.gen-mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.gen-mode-name { font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; color: var(--heading); }
.gen-mode-blurb { color: var(--muted); }
.gen-when[hidden] { display: none; }
.gen-disclosure { margin: 12px 0; font-size: 14px; }

.draft-warnings { border-left: 4px solid var(--warn); }
.draft-warnings ul { margin: 0; padding-left: 18px; }
.draft-objectives { margin: 0; padding-left: 20px; }
.draft-objectives > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.draft-objectives > li:last-child { border-bottom: 0; }
.draft-objectives .dql-code { margin: 8px 0; }
.draft-attack { width: 100%; margin-top: 10px; }

/* Review suggestions on the pending queue: advice only, the buttons decide. */
.pending-tools { gap: 12px; align-items: center; margin-bottom: 10px; }
.pending-tools form { display: flex; align-items: center; gap: 8px; }
.pending-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -2px 0 10px; }
.pending-suggest .chip { margin: 0; }
.suggest-verdict { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; }
.suggest-accept { color: var(--ok); }
.suggest-reject { color: var(--bad); }
.suggest-unsure { color: var(--warn); }

/* The lab console's tabs. The inline script after the tab bar sets
   data-console-tab on <html>; without JS every panel shows. */
.console-tabs { display: flex; gap: 4px; margin: 18px 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.console-tabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--muted) !important; text-decoration: none;
  font-weight: 600; font-size: 14px; white-space: nowrap;
}
.console-tabs a:hover { color: var(--text) !important; text-shadow: none !important; }
.console-tabs a.active { color: var(--accent) !important; border-bottom-color: var(--accent); }
.tab-count { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; line-height: 18px; text-align: center; background: var(--paper-alt); color: var(--muted); border: 1px solid var(--line); }
.tab-count-hot { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.tab-alert { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; background: var(--bad); color: #fff; }
html[data-console-tab="live"] .console-panel:not([data-panel="live"]),
html[data-console-tab="room"] .console-panel:not([data-panel="room"]),
html[data-console-tab="scenarios"] .console-panel:not([data-panel="scenarios"]),
html[data-console-tab="host"] .console-panel:not([data-panel="host"]) { display: none; }
.reviewed-strip { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.reviewed-strip > summary { cursor: pointer; color: var(--muted); }
.reviewed-strip table { margin-top: 8px; }
#broadcast-panel .query-assist { margin: 16px 0 0; box-shadow: none; background: transparent; }
.scenario-live { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-top: 10px; }
.scenario-live > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.scenario-live[open] > summary { margin-bottom: 12px; }
.inline-log { margin-top: 6px; }

/* The attendee's name, behind the top bar. */
.who-menu { position: relative; }
.who-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; }
.who-menu > summary::-webkit-details-marker { display: none; }
.who-menu > summary:hover { background: rgba(var(--accent-rgb), 0.08); }
.who-edit { font-size: 12px; color: var(--muted); }
.who-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(320px, 90vw);
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow);
}
.who-menu-panel.display-name-form { display: block; margin: 0; }
.who-menu-panel.display-name-form input { max-width: none; }
.who-menu-panel label { display: block; margin-bottom: 8px; font-size: 13px; }
.who-menu-panel .row { gap: 8px; flex-wrap: nowrap; }
.who-menu-panel input { margin: 0; min-width: 0; }
@media (max-width: 800px) { .who-menu .who { display: inline; } }

/* The scenario editor. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notes-import .row { gap: 12px; align-items: center; }
.notes-import label.btn { margin: 0; cursor: pointer; }
.notes-import:focus-within label.btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.save-bar {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 -8px 20px; padding: 12px 8px;
  background: color-mix(in srgb, var(--ink) 92%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(8px);
}
.obj-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.obj-toolbar .small { margin-left: auto; }
.obj-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.obj-panel[hidden] { display: none; }
.obj-list { margin: 0; padding-left: 24px; }
.obj-list > li { margin: 6px 0; }
.obj-list > li.obj-empty { list-style: none; margin-left: -24px; }
.obj-edit { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 12px; }
.obj-edit > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.obj-edit-title { flex: 1; font-weight: 600; }
.obj-edit[open] > summary { margin-bottom: 12px; }

/* ATT&CK coverage on the scenario library. */
.mitre-coverage { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.mitre-coverage a { text-decoration: none; }
.mitre-coverage a.active .tag { border-color: var(--accent); color: var(--accent); }
.mitre-coverage .tag b { margin-left: 4px; color: var(--muted); font-weight: 500; }
.mitre-list .tag { margin: 2px 4px 2px 0; font-size: 11px; }

/* Scenario library: ATT&CK coverage grouped by tactic, in attack-chain order. */
.attack-map { margin: 4px 0 18px; }
.attack-map > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; cursor: pointer; list-style: none; }
.attack-map > summary::-webkit-details-marker { display: none; }
.attack-map > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s; }
.attack-map[open] > summary::before { transform: rotate(90deg); }
.attack-map-title { font-weight: 600; font-size: 14px; color: var(--heading); }
.attack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.attack-tactic { min-width: 0; padding: 10px 10px 8px; border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: var(--radius); background: var(--paper); }
.attack-tactic.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.attack-tactic.is-other { border-top-color: var(--muted); }
.attack-tactic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; text-decoration: none; color: var(--heading); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.attack-tactic-head:hover span { color: var(--accent); }
.attack-tactic-head b { font-weight: 600; color: var(--muted); letter-spacing: 0; }
.attack-tactic ul { margin: 0; padding: 0; list-style: none; }
.attack-tactic li a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px; padding: 3px 4px; border-radius: 4px; text-decoration: none; color: var(--text); font-size: 12.5px; }
.attack-tactic li a:hover, .attack-tactic li a.is-active { background: var(--accent-soft); color: var(--accent); }
.attack-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attack-id { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.attack-n { min-width: 18px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.attack-more > summary { padding: 3px 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.attack-more > summary:hover { color: var(--text); }
.attack-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 11.5px; cursor: help; }
.attack-sum span { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.attack-sum em { font-style: normal; color: var(--muted); }
.threat-lab-link { font-size: 13px; margin-left: 8px; white-space: nowrap; }

/* ── Client Portfolio: the codebook ────────────────────────────────────── */

body.console-theme.app-clients {
  --accent-rgb: 183, 156, 255;
  --accent: #b79cff;
  --accent-hot: #ddd0ff;
  --accent-soft: rgba(183, 156, 255, 0.10);
  --neon: #b79cff;
  --neon-glow: rgba(183, 156, 255, 0.45);
  --ink: #0c0911;
  --ink-soft: #151020;
  --paper: #171221;
  --paper-alt: #0e0a15;
  --line: #30264a;
  --text: #e7e1f2;
  --muted: #968aab;
  --heading: #f7f3ff;
  --heading-2: #ddd3ee;
  --display: "Saira Stencil One", "IBM Plex Sans Condensed", var(--sans);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 1px rgba(183, 156, 255, 0.1);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(183, 156, 255, 0.13), transparent 60%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(255, 92, 160, 0.05), transparent 60%),
    repeating-linear-gradient(135deg, rgba(183, 156, 255, 0.035) 0 1px, transparent 1px 16px);
  background-size: auto;
}
body.console-theme.app-clients h1,
body.console-theme.app-clients .app-brand { font-weight: 400; letter-spacing: 0.07em; }
body.console-theme.app-clients h2,
body.console-theme.app-clients details.card > summary {
  font-family: "IBM Plex Sans Condensed", var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.app-clients .app-mark { border-radius: 3px; border-width: 2px; transform: rotate(-4deg); }
.app-clients .code-title,
.app-clients .mono { letter-spacing: 0.02em; }

/* ── Threat Intel: signal ──────────────────────────────────────────────── */

body.console-theme.app-cti {
  --accent-rgb: 56, 232, 255;
  --accent: #38e8ff;
  --accent-hot: #a8f6ff;
  --accent-soft: rgba(56, 232, 255, 0.09);
  --neon: #38e8ff;
  --neon-glow: rgba(56, 232, 255, 0.45);
  --ink: #02080c;
  --ink-soft: #061219;
  --paper: #07161e;
  --paper-alt: #030b10;
  --line: #133241;
  --text: #d5edf4;
  --muted: #6e94a4;
  --heading: #f0fcff;
  --heading-2: #c4e5ee;
  --ok: #3dffa8;
  --ok-soft: rgba(61, 255, 168, 0.10);
  --warn: #ffd23f;
  --warn-soft: rgba(255, 210, 63, 0.10);
  --bad: #ff4d6d;
  --bad-soft: rgba(255, 77, 109, 0.10);
  --display: "Chakra Petch", "IBM Plex Sans Condensed", var(--sans);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 1px rgba(56, 232, 255, 0.12);
  background-image:
    radial-gradient(ellipse 60% 45% at 88% -12%, rgba(56, 232, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 45% 40% at -5% 105%, rgba(61, 255, 168, 0.06), transparent 60%),
    linear-gradient(rgba(56, 232, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 232, 255, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
}
body.console-theme.app-cti h1 { letter-spacing: 0.1em; }
body.console-theme.app-cti h2 { letter-spacing: 0.03em; }
.app-cti .app-mark { border-radius: 50%; }

/* ── Report Prep: the file folder (manila) ──────────────────────────────── */

body.console-theme.app-reports {
  color-scheme: light;
  --accent-rgb: 162, 64, 27;
  --accent: #a2401b;
  --accent-hot: #7a2d10;
  --accent-soft: rgba(162, 64, 27, 0.07);
  --neon: #a2401b;
  --neon-glow: rgba(162, 64, 27, 0.2);
  --ink: #fffcf3;
  --ink-soft: #f4ecd8;
  --paper: #fcf8ee;
  --paper-alt: #e7d9b6;
  --line: #d4c29a;
  --text: #2d2519;
  --muted: #75653f;
  --heading: #16120d;
  --heading-2: #3a2f1c;
  --ok: #1f7a4a;
  --ok-soft: #e7f3eb;
  --warn: #975a00;
  --warn-soft: #fbf0da;
  --bad: #b42318;
  --bad-soft: #fcebe8;
  --risk-critical: #6b21a8;
  --risk-high: #b42318;
  --risk-medium: #c2410c;
  --risk-low: #a16207;
  --risk-informational: #1d4ed8;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --glow: none;
  --glow-accent: 0 0 0 3px rgba(162, 64, 27, 0.12);
  --shadow: 0 1px 2px rgba(80, 55, 10, 0.08), 0 10px 28px rgba(80, 55, 10, 0.1);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 246, 220, 0.6), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(120, 90, 30, 0.018) 3px 4px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(120, 90, 30, 0.014) 5px 6px);
  background-size: auto;
}
body.console-theme.app-reports h1 { text-transform: none; letter-spacing: -0.015em; font-weight: 600; }
body.console-theme.app-reports h2,
body.console-theme.app-reports details.card > summary { font-weight: 600; letter-spacing: -0.005em; }
body.console-theme.app-reports a:hover,
body.console-theme.app-reports .btn-primary { text-shadow: none; }
body.console-theme.app-reports .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
body.console-theme.app-reports .btn-primary:hover { background: var(--accent-hot); color: #fff; box-shadow: var(--glow-accent); }
body.console-theme.app-reports .btn:hover { box-shadow: none; }
body.console-theme.app-reports code { background: rgba(162, 64, 27, 0.07); }
body.console-theme.app-reports .card:hover { border-color: var(--line); }
body.console-theme.app-reports footer.site { background: #dccb9f; border-top-color: #c9b484; }
.app-reports .app-brand { text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 600; }
.app-reports .app-mark { box-shadow: none; background: #fff; border-radius: 4px 12px 4px 4px; }
.app-reports .ops-eyebrow { color: var(--accent); }
body.console-theme.app-reports .appbar { background: color-mix(in srgb, #dccb9f 90%, transparent); border-bottom-color: #c9b484; }
.app-reports .app-back { border-color: #b9a270; }

/* ── Detection Studio: the rule bench ──────────────────────────────────── */

body.console-theme.app-detections {
  --accent-rgb: 255, 214, 10;
  --accent: #ffd60a;
  --accent-hot: #fff1a6;
  --accent-soft: rgba(255, 214, 10, 0.09);
  --neon: #ffd60a;
  --neon-glow: rgba(255, 214, 10, 0.35);
  --ink: #0b0b0a;
  --ink-soft: #141412;
  --paper: #161614;
  --paper-alt: #0e0e0d;
  --line: #2e2d27;
  --text: #e9e7df;
  --muted: #8f8c80;
  --heading: #fbfaf5;
  --heading-2: #dedbd0;
  --ok: #7ee787;
  --ok-soft: rgba(126, 231, 135, 0.10);
  --warn: #ffb454;
  --warn-soft: rgba(255, 180, 84, 0.10);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, 0.09);
  --display: "Martian Mono", "IBM Plex Mono", var(--mono);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 214, 10, 0.08);
  background-image:
    radial-gradient(ellipse 55% 40% at 8% -10%, rgba(255, 214, 10, 0.10), transparent 60%),
    linear-gradient(90deg, transparent 47px, rgba(255, 214, 10, 0.07) 47px, rgba(255, 214, 10, 0.07) 48px, transparent 48px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(255, 255, 255, 0.022) 25px 26px);
  background-size: auto;
}
body.console-theme.app-detections h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
body.console-theme.app-detections h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
body.console-theme.app-detections .btn-primary { background: var(--accent); color: #151300; border-color: var(--accent); text-shadow: none; font-weight: 600; }
body.console-theme.app-detections .btn-primary:hover { background: var(--accent-hot); color: #151300; }
body.console-theme.app-detections code { color: var(--accent-hot); }
.app-detections .app-brand { text-transform: none; letter-spacing: -0.01em; font-family: var(--display); font-size: 15px; font-weight: 600; }
.app-detections .app-mark { border-radius: 4px; }

.ds-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ds-head .lede { max-width: 720px; margin-bottom: 0; }
.ds-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .ds-grid { grid-template-columns: minmax(0, 1fr); } }
.app-detections main .wrap { max-width: 1320px; }

/* Three boxes: a SIEM query → Sigma → every SIEM. */
.ds-mode {
  display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
}
.ds-mode:hover { color: var(--text); border-color: var(--muted); }
.ds-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-mode-track { position: relative; width: 30px; height: 16px; border-radius: 999px; background: var(--line); transition: background 0.15s ease; }
.ds-mode-track span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform 0.15s ease, background 0.15s ease; }
.ds-mode[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.ds-mode[aria-pressed="true"] .ds-mode-track { background: rgba(255, 214, 10, 0.3); }
.ds-mode[aria-pressed="true"] .ds-mode-track span { transform: translateX(14px); background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ds-mode-track, .ds-mode-track span { transition: none; } }
.app-detections main .wrap:has(.ds-grid.is-three) { max-width: 1720px; }
.ds-grid.is-three { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); }
@media (max-width: 1280px) {
  .ds-grid.is-three { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ds-grid.is-three .ds-src { grid-column: 1 / -1; }
}
@media (max-width: 1000px) { .ds-grid.is-three { grid-template-columns: minmax(0, 1fr); } }
.ds-src[hidden] { display: none; }
.ds-src { min-width: 0; }
.ds-src [hidden] { display: none; }
.ds-src-opts { gap: 10px; margin-bottom: 8px; }
.ds-src-editor { min-height: 220px; }
.ds-src-wrap::before { background: var(--muted); }
.ds-src-go { gap: 10px; margin: 10px 0 0; }
.ds-src-notes { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--warn); background: var(--paper); color: var(--text); }
.ds-roundtrip { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255, 180, 84, 0.4); border-radius: var(--radius); background: var(--paper); }
.ds-roundtrip h3 { margin: 0 0 8px; font-family: var(--display); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ds-rt-note { margin: 0; color: var(--warn); }
.ds-step, .ds-out-bar { display: none; }
.is-three .ds-step {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--display); font-size: 11px; font-weight: 600;
}
.is-three .ds-out-bar { display: flex; }
.ds-out-label { font-family: var(--display); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.ds-rule { position: sticky; top: 12px; }
@media (max-width: 1000px) { .ds-rule { position: static; } }
.ds-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ds-bar label { margin: 0; font-family: var(--display); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ds-bar .spacer { flex: 1; }
.ds-menu { position: relative; }
.ds-menu > summary { list-style: none; }
.ds-menu > summary::-webkit-details-marker { display: none; }
.ds-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; margin: 0; padding: 6px; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ds-menu-list a { display: block; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--text); text-decoration: none; }
.ds-menu-list a:hover { background: var(--accent-soft); color: var(--accent); text-shadow: none; }
/* Write with Glean: the studio's front door, full width above the editor. */
.ds-ask { margin-bottom: 20px; }
.ds-ask-bar {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px 8px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 214, 10, 0.04), 0 10px 30px -18px rgba(255, 214, 10, 0.35);
}
.ds-ask-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.14); }
.ds-ask-mark {
  flex: none; margin-top: 9px; padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(255, 214, 10, 0.45);
  color: var(--accent); font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
body.console-theme .ds-ask textarea {
  flex: 1; min-width: 0; min-height: 40px; max-height: 240px; margin: 0; padding: 9px 2px; resize: none; overflow-y: auto;
  border: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 15px; line-height: 1.5;
}
body.console-theme .ds-ask textarea:focus { outline: none; box-shadow: none; }
.ds-ask textarea::placeholder { color: var(--muted); opacity: 0.85; transition: opacity 0.25s ease; }
.ds-ask textarea.is-swapping::placeholder { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ds-ask textarea::placeholder { transition: none; } }
.ds-ask-bar .btn { flex: none; align-self: flex-end; }
.ds-ask.is-off .ds-ask-bar { opacity: 0.7; }
.ds-ask-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 22px; margin-top: 6px; padding: 0 4px; }
.ds-ask-foot .spacer { flex: 1; }
.ds-ask-foot [hidden] { display: none; }
.ds-ask-keys kbd {
  padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; color: var(--text); background: var(--paper);
}
@media (max-width: 640px) {
  .ds-ask-mark, .ds-ask-keys { display: none; }
  .ds-ask-bar { padding-left: 10px; }
}

.ds-editor-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); overflow: hidden; }
.ds-editor-wrap::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); opacity: 0.7; }
.ds-editor {
  display: block; width: 100%; min-height: 440px; max-height: 70vh; margin: 0; padding: 14px 14px 14px 18px;
  border: 0; border-radius: 0; background: transparent; color: var(--text);
  font-family: "Martian Mono", var(--mono); font-size: 12.5px; line-height: 1.7; tab-size: 2; white-space: pre; overflow: auto; resize: vertical;
}
.ds-editor:focus { outline: none; }
.ds-editor-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.12); }

.ds-meta { margin: 10px 0 4px; min-height: 26px; }
.ds-meta-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ds-meta-row .tag { margin: 0; }
.ds-attack { text-decoration: none; }
.ds-attack:hover { border-color: var(--accent); }
.ds-level { display: inline-block; padding: 2px 9px; border-radius: 999px; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; }
.ds-level-critical { color: var(--risk-critical); }
.ds-level-high { color: var(--risk-high); }
.ds-level-medium { color: var(--risk-medium); }
.ds-level-low { color: var(--risk-low); }
.ds-level-informational { color: var(--risk-informational); }
.ds-parse-error { margin: 0; padding: 8px 12px; border-left: 3px solid var(--bad); background: var(--bad-soft); color: var(--text); font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; }
.ds-issues { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.ds-issues .sev-high, .ds-issues .sev-critical { color: var(--warn); }
.ds-explain { margin-top: 14px; }
.ds-explain-body { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--paper); font-size: 14px; }
.ds-explain-body[hidden] { display: none; }
.ds-explain-body p { margin: 0 0 8px; }
.ds-explain-body h3 { margin: 12px 0 4px; font-family: var(--display); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ds-explain-body ul { margin: 0; padding-left: 18px; }
.ds-delete { margin-top: 18px; }

.ds-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ds-target {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer;
}
.ds-target:hover { color: var(--text); border-color: var(--muted); }
.ds-target[aria-pressed="true"] { color: #151300; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.ds-target:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-ai { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; border: 1px solid currentColor; vertical-align: 1px; }
.ds-results { display: grid; gap: 14px; }
.ds-empty { padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.ds-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.ds-card.is-failed:not(.is-drafted) { border-color: rgba(255, 107, 107, 0.35); }
.ds-card header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ds-card h2 { margin: 0; }
.ds-lang { font-family: var(--display); font-size: 11.5px; color: var(--muted); }
.ds-badge { margin-left: auto; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.ds-badge.is-verified { color: var(--ok); border-color: rgba(126, 231, 135, 0.35); }
.ds-badge.is-ai { color: var(--warn); border-color: rgba(255, 180, 84, 0.4); }
.ds-opts { gap: 10px; margin-bottom: 8px; }
.ds-opts:empty { display: none; }
.ds-opt { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.ds-opt select { width: auto; min-width: 0; max-width: min(320px, 100%); padding: 4px 8px; font-size: 12.5px; }
.ds-results > *, .ds-out, .ds-rule { min-width: 0; }
.ds-status:empty { display: none; }
.ds-code {
  margin: 0 0 8px; padding: 12px 14px; max-height: 360px; overflow: auto; border-radius: 6px; border: 1px solid var(--line); background: var(--ink);
  font-family: "Martian Mono", var(--mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
body.console-theme .ds-code code { color: var(--text); background: none; padding: 0; font-size: inherit; }
.ds-code:focus-visible { outline: 2px solid var(--accent); }
.ds-code[hidden], .ds-warn[hidden], .ds-error[hidden], .ds-notes[hidden] { display: none; }
.ds-switch { margin: -2px 0 8px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text); }
.ds-switch[hidden] { display: none; }
.ds-warn { margin: 0 0 8px; padding-left: 18px; color: var(--warn); }
.ds-error { margin: 0 0 8px; color: var(--bad); font-family: var(--mono); font-size: 12.5px; }
.ds-notes { margin: 0 0 8px; color: var(--text); }
.ds-actions { gap: 6px; }
.ds-actions [hidden], .ds-rule [hidden] { display: none; }
.ds-note:empty { display: none; }
.ds-note { margin: 8px 0 0; }
.ds-foot { margin-top: 18px; }
.ds-search { margin-bottom: 14px; gap: 8px; }
.ds-search input { max-width: 420px; }
.ds-search select { width: auto; max-width: 240px; }
.ds-search { flex-wrap: wrap; }
.ds-table td { vertical-align: top; }
.ds-table .tag { margin-bottom: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE TOOLBELT — home. Graphite, with each tile a miniature of its tool.
   ══════════════════════════════════════════════════════════════════════════ */

body.belt {
  --belt-bg: #0a0b0d;
  --belt-card: #111316;
  --belt-line: #23262c;
  --belt-text: #eceae6;
  --belt-muted: #8b8f98;
  --belt-lime: #c8f560;
  color: var(--belt-text);
  background-color: var(--belt-bg);
  background-image:
    radial-gradient(ellipse 50% 40% at 12% -5%, rgba(255, 122, 46, 0.10), transparent 60%),
    radial-gradient(ellipse 45% 40% at 40% -10%, rgba(183, 156, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 40% at 70% -8%, rgba(56, 232, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 40% at 98% -5%, rgba(255, 244, 220, 0.06), transparent 60%);
  font-family: "Space Grotesk", var(--sans);
}
.belt main { padding-top: 12px; }
/* Four 364px tiles and their gaps. Below 1440px, three to a row at the old 1180px. */
.belt .wrap { max-width: 1564px; }
.belt-bar { padding: 16px 0; }
.belt-bar .wrap { display: flex; align-items: center; gap: 18px; }
.belt-bar .who { font-size: 13px; color: var(--belt-muted); }
.belt-bar a.who:hover { color: var(--belt-text); }
/* One square per tile on a page of the home screen, in the tile's colour (--sq,
   set inline from the tool), up to four to a row. */
.belt-logo { display: grid; grid-template-columns: repeat(var(--cols, 4), 8px); gap: 3px; }
.belt-logo i { width: 8px; height: 8px; border-radius: 2px; background: var(--sq, #9aa4b8); transition: background-color 0.35s ease, box-shadow 0.35s ease; }
/* A slot with no tool: an outline only, in whatever colour the text around it is. */
.belt-logo i.empty, .app-back .belt-logo i.empty, .app-sales .app-back .belt-logo i.empty {
  background: transparent; opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.tool-dot-labs { background: #ff7a2e; }
.tool-dot-cti { background: #38e8ff; }
.tool-dot-detections { background: #ffd60a; }
.tool-dot-clients { background: #b79cff; }
.tool-dot-hunts { background: #ff3b5c; }
.tool-dot-reports { background: #e7d9b6; }
.tool-dot-snorkel { background: #3cf29a; }
.tool-dot-sales { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.tool-dot-detcord { background: #f04cd0; }
.belt-wordmark { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }
.belt-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--belt-muted); cursor: pointer; text-decoration: none; }
.belt-link:hover { color: var(--belt-text); }
.belt footer.site { background: transparent; border-top-color: var(--belt-line); color: var(--belt-muted); }

.belt-hero { padding: 40px 0 32px; }
.belt-kicker { margin: 0 0 12px; font-family: "IBM Plex Mono", var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--belt-muted); }
.belt-hero h1 { margin: 0; font-size: clamp(34px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; color: #fff; }
.belt-hero h1 span {
  /* The page's tool colours, set inline; this is page one's, for safety. */
  background-image: linear-gradient(90deg, #ff7a2e, #38e8ff 14%, #ffd60a 28%, #b79cff 43%, #ff3b5c 57%, #e7d9b6 71%, #3cf29a 86%, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.belt-lede { max-width: 620px; margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--belt-muted); }
.belt-status { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.belt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--belt-line);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--belt-text);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
}
.belt-chip .muted { color: var(--belt-muted); }
.belt-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.belt-chip-quiet { color: var(--belt-muted); }
.belt-chip-cta { border-color: rgba(200, 245, 96, 0.5); color: var(--belt-lime); }
.belt-chip-cta:hover { background: rgba(200, 245, 96, 0.08); }
.belt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--belt-lime); box-shadow: 0 0 10px rgba(200, 245, 96, 0.6); }
.belt-dot-off { background: transparent; border: 1.5px solid var(--belt-lime); box-shadow: none; }

.belt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.belt-grid-one { grid-template-columns: minmax(0, 620px); }
.belt-tile {
  --t-bg: var(--belt-card);
  --t-line: var(--belt-line);
  --t-text: var(--belt-text);
  --t-muted: var(--belt-muted);
  --t-accent: var(--belt-lime);
  --t-font: "Space Grotesk", var(--sans);
  position: relative;
  display: grid;
  grid-template-rows: 190px 1fr auto;
  overflow: hidden;
  border: 1px solid var(--t-line);
  border-radius: 16px;
  background: var(--t-bg);
  color: var(--t-text);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.belt-tile:hover { transform: translateY(-3px); border-color: var(--t-accent); box-shadow: 0 18px 50px -20px var(--t-accent); }
.belt-tile:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .belt-tile, .belt-tile:hover { transition: none; transform: none; } }
.belt-art { position: relative; overflow: hidden; border-bottom: 1px solid var(--t-line); }
.belt-body { padding: 22px 24px 8px; }
.belt-tagline { display: block; margin-bottom: 6px; font-family: "IBM Plex Mono", var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-accent); }
.belt-tile h2 { margin: 0 0 8px; font-family: var(--t-font); font-size: 28px; line-height: 1.1; color: var(--t-text); }
.belt-tile p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-muted); }
.belt-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--t-muted); }
.belt-stats b { color: var(--t-text); font-size: 16px; margin-right: 2px; }
.belt-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 24px 22px;
  justify-self: start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--t-accent);
  color: var(--t-accent);
  font-size: 14px;
  font-weight: 600;
}
.belt-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.belt-tile:hover .belt-go { background: var(--t-accent); color: var(--t-bg); }
.belt-live { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-family: "IBM Plex Mono", var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: rgba(0, 230, 118, 0.12); color: #00e676; }
/* Pages of tiles, side by side in a track. With script the track slides to the
   page shown (--i) and eases to its height; a swipe adds --drag while it
   follows the finger. The frame's padding is room for a tile's hover lift and
   shadow, cancelled by an equal negative margin. Without script, only the page
   asked for is shown. */
.belt-pages { --gap: 72px; overflow: hidden; margin: -16px -28px -48px; padding: 16px 28px 48px; }
.belt-track { display: flex; align-items: flex-start; gap: var(--gap); }
.belt-page { flex: 0 0 100%; min-width: 0; }
.belt-pages:not(.is-live) .belt-page:not(.is-on) { display: none; }
.belt-pages.is-live .belt-track { transform: translateX(calc(var(--i, 0) * -1 * (100% + var(--gap)) + var(--drag, 0px))); }
.belt-pages.is-live .belt-page { transition: opacity 0.45s ease; }
.belt-pages.is-live .belt-page:not(.is-on) { opacity: 0.25; }
.belt-pages.is-ready .belt-track { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.belt-pages.is-dragging .belt-track { transition: none; }
.belt-pages.is-dragging .belt-page { opacity: 1; }
@media (max-width: 860px) { .belt-pages { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .belt-pages.is-ready .belt-track, .belt-pages.is-live .belt-page, .belt-logo i { transition: none; }
}
/* Pages of tiles: arrows either side of the page numbers. */
.belt-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 28px 0 8px; }
.belt-pager-pages { display: flex; gap: 6px; }
.belt-pager-pages a { min-width: 34px; padding: 6px 10px; border: 1px solid var(--belt-line); border-radius: 999px; text-align: center; font-family: "IBM Plex Mono", var(--mono); font-size: 13px; color: var(--belt-muted); text-decoration: none; }
.belt-pager-pages a:hover { color: var(--belt-text); border-color: var(--belt-muted); }
.belt-pager-pages a.is-on { color: var(--belt-bg, #0b0d12); background: var(--belt-text); border-color: var(--belt-text); }
.belt-pager-step { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--belt-line); border-radius: 50%; color: var(--belt-text); }
.belt-pager-step:hover { border-color: var(--belt-lime); color: var(--belt-lime); }
.belt-pager-step.is-off { opacity: 0.3; }
.belt-pager-step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.belt-pager-step.is-off { pointer-events: none; }
.belt-pager-pages a, .belt-pager-step { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; }

/* Arrange: the opener sits at the pager's end; the dialog lists the tools page
   by page, each page headed by the logo it will have. */
.belt-arrange-open { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 8px 14px; border: 1px solid var(--belt-line); border-radius: 999px; background: none; font: inherit; font-size: 13px; color: var(--belt-muted); cursor: pointer; }
.belt-arrange-open[hidden] { display: none; }
.belt-arrange-open:hover, .belt-arrange-open:focus-visible { color: var(--belt-text); border-color: var(--belt-muted); }
.belt-arrange-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.belt-pager:not(:has(.belt-pager-pages)) { justify-content: flex-end; }
.belt-arrange {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--belt-line);
  border-radius: 18px;
  background: var(--belt-card, #12151c);
  color: var(--belt-text);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
}
.belt-arrange::backdrop { background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(3px); }
.belt-arrange[open] { animation: belt-arrange-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes belt-arrange-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.belt-arrange form { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.belt-arrange header { padding: 24px 28px 8px; }
.belt-arrange h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.belt-arrange header p { margin: 6px 0 0; font-size: 14px; color: var(--belt-muted); }
.belt-arrange-pages { overflow-y: auto; padding: 8px 28px 16px; touch-action: pan-y; }
.belt-arrange-page + .belt-arrange-page { margin-top: 18px; }
.belt-arrange-head { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-family: "IBM Plex Mono", var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--belt-muted); }
.belt-arrange-head::after { content: ""; flex: 1; height: 1px; background: var(--belt-line); }
.belt-arrange-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.belt-arrange-chip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  min-height: 62px;
  padding: 8px 6px 8px 10px;
  border: 1px solid var(--belt-line);
  border-left: 3px solid var(--sq);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.belt-arrange-chip:hover { border-color: color-mix(in srgb, var(--sq) 55%, var(--belt-line)); border-left-color: var(--sq); }
.belt-arrange-chip.is-dragged { z-index: 1; cursor: grabbing; background: color-mix(in srgb, var(--sq) 14%, transparent); border-color: var(--sq); box-shadow: 0 14px 34px -14px var(--sq); }
.belt-arrange-pages.is-sorting { cursor: grabbing; }
.belt-arrange-grip { width: 8px; height: 18px; margin-right: 4px; background-image: radial-gradient(currentColor 1.1px, transparent 1.3px); background-size: 4px 4px; color: var(--belt-muted); opacity: 0.7; }
.belt-arrange-text { display: flex; flex-direction: column; min-width: 0; }
.belt-arrange-text b { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.belt-arrange-text small { overflow: hidden; font-size: 11.5px; color: var(--belt-muted); white-space: nowrap; text-overflow: ellipsis; }
.belt-arrange-move { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--belt-muted); cursor: pointer; }
.belt-arrange-move:hover:not(:disabled), .belt-arrange-move:focus-visible { color: var(--belt-text); background: rgba(255, 255, 255, 0.06); }
.belt-arrange-move:disabled { opacity: 0.25; cursor: default; }
.belt-arrange-move svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.belt-arrange footer { display: flex; align-items: center; gap: 10px; padding: 16px 28px 22px; border-top: 1px solid var(--belt-line); }
.belt-arrange footer .spacer { flex: 1; }
.belt-arrange-quiet, .belt-arrange-save { padding: 9px 16px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.belt-arrange-quiet { border: 1px solid var(--belt-line); background: none; color: var(--belt-muted); }
.belt-arrange-quiet:hover { color: var(--belt-text); border-color: var(--belt-muted); }
.belt-arrange-save { border: 1px solid var(--belt-lime); background: var(--belt-lime); color: #0b0d12; }
.belt-arrange-save:hover { filter: brightness(1.08); }
@media (max-width: 860px) {
  .belt-arrange-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belt-arrange header, .belt-arrange-pages, .belt-arrange footer { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  .belt-arrange-grid { grid-template-columns: minmax(0, 1fr); }
  .belt-arrange footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .belt-arrange[open] { animation: none; }
  .belt-arrange-chip { transition: none; }
}

/* An outside tool's tile: its thumbnail, and its accent read from it. */
.art-external { position: relative; height: 100%; background: #0b0d12; }
.art-external img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-external::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45)); pointer-events: none; }
.art-external-badge { position: absolute; z-index: 1; right: 12px; bottom: 10px; padding: 3px 9px; border-radius: 999px; font-family: "IBM Plex Mono", var(--mono); font-size: 11px; letter-spacing: 0.06em; color: #fff; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--t-accent); }

.belt-empty { padding: 28px; border: 1px dashed var(--belt-line); border-radius: 16px; color: var(--belt-muted); }
@media (max-width: 1439px) {
  .belt .wrap { max-width: 1180px; }
  .belt-grid:not(.belt-grid-one) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .belt-grid:not(.belt-grid-one) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .belt-grid { grid-template-columns: minmax(0, 1fr); }
  .belt-tile { min-height: 0; grid-template-rows: 160px auto auto; }
  .belt-bar .who { display: none; }
}

/* Labs tile: the ember console */
.belt-labs {
  --t-bg: #120d0a;
  --t-line: #3a2a22;
  --t-text: #f3ebe3;
  --t-muted: #a08f80;
  --t-accent: #ff7a2e;
  --t-font: "IBM Plex Sans Condensed", var(--sans);
}
.belt-labs h2 { text-transform: uppercase; letter-spacing: 0.04em; }
.art-labs {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background:
    radial-gradient(ellipse 80% 80% at 20% 0%, rgba(255, 122, 46, 0.22), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='48' viewBox='0 0 42 48'><g fill='none' stroke='rgba(255,122,46,0.16)' stroke-width='0.8'><path d='M21 1.2 L40 12 L40 36 L21 46.8 L2 36 L2 12 Z'/></g></svg>");
  background-size: auto, 42px 48px;
}
.art-term { font-family: "IBM Plex Mono", var(--mono); font-size: 14px; line-height: 1.8; color: #f3ebe3; text-shadow: 0 0 10px rgba(255, 122, 46, 0.35); }
.art-p { color: #ff7a2e; }
.art-ok { color: #00e676; }
.art-cursor { display: inline-block; width: 9px; height: 16px; vertical-align: -3px; background: #ff7a2e; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Portfolio tile: the codebook */
.belt-clients {
  --t-bg: #120e1a;
  --t-line: #30264a;
  --t-text: #f7f3ff;
  --t-muted: #9d92b2;
  --t-accent: #b79cff;
  --t-font: "Saira Stencil One", var(--sans);
}
.belt-clients h2 { font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; font-size: 26px; }
.art-clients {
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(183, 156, 255, 0.2), transparent 65%),
    repeating-linear-gradient(135deg, rgba(183, 156, 255, 0.06) 0 1px, transparent 1px 14px);
}
.art-folder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 26px 18px;
  min-width: 240px;
  border: 1px solid rgba(183, 156, 255, 0.4);
  border-radius: 4px 14px 4px 4px;
  background: rgba(23, 18, 33, 0.9);
  transform: rotate(-2deg);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
}
.art-stamp {
  position: absolute;
  top: -12px;
  right: -14px;
  padding: 3px 9px;
  border: 2px solid #ff5ca0;
  color: #ff5ca0;
  font-family: "Saira Stencil One", var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(8deg);
  background: rgba(18, 14, 26, 0.9);
}
.art-code { display: flex; align-items: center; gap: 9px; font-family: "Saira Stencil One", var(--sans); font-size: 19px; letter-spacing: 0.04em; color: #f7f3ff; }
.art-code i { width: 10px; height: 10px; border-radius: 2px; }

/* Intel tile: signal */
.belt-cti {
  --t-bg: #051017;
  --t-line: #133241;
  --t-text: #f0fcff;
  --t-muted: #7fa3b2;
  --t-accent: #38e8ff;
  --t-font: "Chakra Petch", var(--sans);
}
.belt-cti h2 { text-transform: uppercase; letter-spacing: 0.08em; font-size: 27px; }
.art-cti {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 28px;
  background:
    linear-gradient(rgba(56, 232, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 232, 255, 0.06) 1px, transparent 1px),
    radial-gradient(ellipse 70% 90% at 25% 50%, rgba(56, 232, 255, 0.14), transparent 70%);
  background-size: 24px 24px, 24px 24px, auto;
}
.art-radar {
  position: relative;
  flex: none;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(56, 232, 255, 0.5);
  background:
    radial-gradient(circle, transparent 23%, rgba(56, 232, 255, 0.35) 23.5%, transparent 24.5%, transparent 47%, rgba(56, 232, 255, 0.3) 47.5%, transparent 48.5%, transparent 72%, rgba(56, 232, 255, 0.25) 72.5%, transparent 73.5%),
    linear-gradient(rgba(56, 232, 255, 0.25), rgba(56, 232, 255, 0.25)) center / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(56, 232, 255, 0.25), rgba(56, 232, 255, 0.25)) center / 100% 1px no-repeat,
    rgba(3, 12, 18, 0.9);
  box-shadow: 0 0 30px rgba(56, 232, 255, 0.2) inset, 0 0 24px rgba(56, 232, 255, 0.15);
}
.art-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Bright edge at the beam tip; fade trails counter-clockwise (behind clockwise spin). */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 290deg,
    rgba(56, 232, 255, 0) 290deg,
    rgba(56, 232, 255, 0.45) 350deg,
    rgba(56, 232, 255, 0.75) 358deg,
    rgba(180, 245, 255, 0.95) 360deg
  );
  transform-origin: center;
  animation: sweep 6s linear infinite;
}
@keyframes sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Blips sit dimly still until static/js/radar.js takes over (.is-live): then
   they're invisible except for --glow, set as the sweep crosses them. */
.art-blip {
  --blip: #38e8ff;
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--blip);
  opacity: 0.6;
  box-shadow: 0 0 8px var(--blip);
}
.art-blip-hot { --blip: #ff4d6d; }
.art-radar.is-live .art-blip {
  opacity: var(--glow, 0);
  transform: scale(calc(0.8 + 0.6 * var(--glow, 0)));
  box-shadow: 0 0 calc(14px * var(--glow, 0)) var(--blip);
}
.art-readout { display: flex; flex-direction: column; gap: 2px; font-family: "Chakra Petch", var(--sans); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: #7fa3b2; }
.art-readout strong { font-size: 26px; letter-spacing: 0.08em; color: #38e8ff; text-shadow: 0 0 14px rgba(56, 232, 255, 0.5); }
.art-readout .art-level-elevated { color: #ff4d6d; text-shadow: 0 0 14px rgba(255, 77, 109, 0.5); }
.art-readout .art-level-guarded { color: #ffd23f; text-shadow: 0 0 14px rgba(255, 210, 63, 0.4); }
.art-readout .art-level-low { color: #3dffa8; text-shadow: 0 0 14px rgba(61, 255, 168, 0.4); }
@media (prefers-reduced-motion: reduce) {
  .art-sweep, .art-cursor, .art-caret { animation: none; }
}

/* Reports tile: a sheet in a manila folder */
.belt-reports {
  --t-bg: #e7d9b6;
  --t-line: #c9b484;
  --t-text: #16120d;
  --t-muted: #6b5a35;
  --t-accent: #a2401b;
  --t-font: "Fraunces", Georgia, serif;
}
.belt-reports h2 { font-weight: 600; letter-spacing: -0.01em; font-size: 30px; }
.belt-reports:hover .belt-go { color: #fff; }
.art-reports {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background:
    linear-gradient(180deg, transparent 0 28px, rgba(120, 90, 30, 0.12) 28px 29px, transparent 29px),
    linear-gradient(90deg, #dccb9f 0 34%, transparent 34%) top / 100% 28px no-repeat,
    #e7d9b6;
}
.art-page {
  width: min(78%, 360px);
  height: 164px;
  padding: 18px 22px;
  background: #fffdf8;
  border: 1px solid #e1d7c5;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -8px 30px -12px rgba(80, 55, 10, 0.45);
  transform: rotate(-1.2deg) translateY(6px);
}
.art-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 18px; color: #16120d; }
.art-meta { font-family: "IBM Plex Mono", var(--mono); font-size: 10.5px; color: #7d7161; margin: 2px 0 12px; }
.art-line { height: 6px; margin-bottom: 7px; border-radius: 3px; background: #e9e1d2; }
.art-line-short { width: 62%; }
.art-strike { margin: 2px 0 8px; font-size: 11.5px; color: #c8372d; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.art-yours { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 13.5px; color: #a2401b; }
.art-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #a2401b; animation: blink 1.1s steps(1) infinite; }

/* Detections tile: the rule bench */
.belt-detections {
  --t-bg: #11110f;
  --t-line: #2e2d27;
  --t-text: #fbfaf5;
  --t-muted: #9a978a;
  --t-accent: #ffd60a;
  --t-font: "Martian Mono", var(--mono);
}
.belt-detections h2 { font-weight: 600; letter-spacing: -0.02em; font-size: 25px; }
.belt-detections:hover .belt-go { color: #151300; }
.art-detections {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  background:
    radial-gradient(ellipse 70% 90% at 15% 0%, rgba(255, 214, 10, 0.14), transparent 65%),
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(255, 255, 255, 0.03) 21px 22px);
}
.art-yaml {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 12px 16px;
  border: 1px solid #2e2d27;
  border-left: 3px solid #ffd60a;
  border-radius: 6px;
  background: rgba(11, 11, 10, 0.9);
  font-family: "Martian Mono", var(--mono);
  font-size: 11px;
  line-height: 1.8;
  color: #e9e7df;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.art-yaml > div { overflow: hidden; text-overflow: ellipsis; }
.art-k { color: #ffd60a; }
.art-in { padding-left: 14px; }
.art-lvl { color: #ff5a5a; }
.art-fan { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; flex: none; }
.art-fan span {
  padding: 3px 8px;
  border: 1px solid rgba(255, 214, 10, 0.45);
  border-radius: 4px;
  font-family: "Martian Mono", var(--mono);
  font-size: 10.5px;
  color: #ffd60a;
  text-align: center;
  background: rgba(255, 214, 10, 0.06);
}
@media (max-width: 480px) { .art-fan { display: none; } }

/* ── Snorkel: under the surface ───────────────────────────────────── */

body.console-theme.app-snorkel {
  --accent-rgb: 60, 242, 154;
  --accent: #3cf29a;
  --accent-hot: #a6ffd3;
  --accent-soft: rgba(60, 242, 154, 0.09);
  --neon: #3cf29a;
  --neon-glow: rgba(60, 242, 154, 0.32);
  --ink: #04110f;
  --ink-soft: #071a17;
  --paper: #0a1f1c;
  --paper-alt: #061513;
  --line: #17352f;
  --text: #d8ece6;
  --muted: #7c9e95;
  --heading: #f1fbf7;
  --heading-2: #cfe7df;
  --ok: #3cf29a;
  --ok-soft: rgba(60, 242, 154, 0.10);
  --warn: #ffc15e;
  --warn-soft: rgba(255, 193, 94, 0.10);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, 0.10);
  --display: "Sora", var(--sans);
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 0 1px rgba(60, 242, 154, 0.1);
  background-image:
    radial-gradient(ellipse 70% 38% at 50% -12%, rgba(60, 242, 154, 0.13), transparent 70%),
    linear-gradient(180deg, rgba(4, 17, 15, 0) 0%, rgba(2, 8, 12, 0.9) 100%),
    repeating-radial-gradient(ellipse 140% 60% at 50% -30%, transparent 0 46px, rgba(60, 242, 154, 0.028) 46px 47px);
  background-attachment: fixed;
}
body.console-theme.app-snorkel h1 { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; }
body.console-theme.app-snorkel h2 { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
body.console-theme.app-snorkel h3 { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
body.console-theme.app-snorkel .btn-primary { background: var(--accent); color: #04110f; border-color: var(--accent); text-shadow: none; font-weight: 600; }
body.console-theme.app-snorkel .btn-primary:hover { background: var(--accent-hot); color: #04110f; }
body.console-theme.app-snorkel .btn-primary[disabled] { opacity: 0.6; cursor: progress; }
.app-snorkel .app-brand { text-transform: none; letter-spacing: -0.01em; font-family: var(--display); font-size: 16px; font-weight: 600; }
.app-snorkel .app-mark { border-radius: 50% 50% 6px 6px; }
.app-snorkel main .wrap { max-width: 1320px; }
.app-snorkel .btn-small { padding: 4px 10px; font-size: 12.5px; }

.snk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.snk-head h1 { margin-bottom: 6px; }
.snk-head .lede { max-width: 760px; margin-bottom: 0; }
.snk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); margin: 0; }
.snk-provider { padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 11.5px; letter-spacing: 0.03em; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.snk-provider-aws { background: rgba(255, 153, 0, 0.14); color: #ffb13b; }
.snk-provider-azure { background: rgba(0, 137, 214, 0.18); color: #5cc2ff; }
.snk-provider-gcp { background: rgba(66, 133, 244, 0.16); color: #8ab4ff; }
.snk-provider-m365 { background: rgba(235, 60, 0, 0.16); color: #ff8a5c; }
.snk-note { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--warn); }
.snk-note-quiet { color: var(--muted); }

.snk-sev { display: inline-block; min-width: 42px; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.snk-sev-critical { background: rgba(255, 77, 109, 0.18); color: #ff6b85; }
.snk-sev-high { background: rgba(255, 138, 76, 0.16); color: #ff9a62; }
.snk-sev-medium { background: rgba(255, 193, 94, 0.14); color: #ffc15e; }
.snk-sev-low { background: rgba(120, 190, 255, 0.13); color: #8cc8ff; }
.snk-sev-informational { background: rgba(160, 180, 175, 0.12); color: #9fb5ae; }
.snk-good { color: var(--ok); }
.snk-bad { color: #ff6b85; }
.snk-warn { color: var(--warn); }
.snk-effort { color: var(--accent); font-weight: 600; }
.snk-net { padding: 0 6px; border: 1px solid rgba(255, 107, 133, 0.45); border-radius: 4px; color: #ff8aa0; font-size: 11px; }

.snk-stats { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr) 2.4fr; gap: 12px; margin-bottom: 18px; }
.snk-stats-small { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.snk-stat { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 31, 28, 0.75); overflow: hidden; }
.snk-stat b { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--heading); line-height: 1.1; }
.snk-stat span { font-size: 12.5px; color: var(--muted); }
.snk-stat-rate b { font-size: 34px; color: var(--accent); text-shadow: 0 0 18px var(--neon-glow); }
.snk-gauge { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--pct) * 1%); background: var(--accent); box-shadow: 0 0 10px var(--neon-glow); }
.snk-stat-sev { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.snk-sevcount { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; border-radius: 8px; text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; min-width: 64px; }
.snk-sevcount b { font-size: 20px; color: inherit; }
.snk-zero { opacity: 0.45; }
@media (max-width: 1100px) { .snk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .snk-stat-rate, .snk-stat-sev { grid-column: 1 / -1; } }

.snk-compare h2 { margin-bottom: 10px; }
.snk-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.snk-compare-grid b { font-family: var(--display); font-size: 22px; }
.snk-compare-grid ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 860px) { .snk-compare-grid { grid-template-columns: minmax(0, 1fr); } }

.snk-brief { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 0 30px -12px var(--neon-glow); }
.snk-brief-pending { border-style: dashed; }
.snk-brief-summary { font-size: 15.5px; line-height: 1.55; color: var(--heading-2); max-width: 900px; }
.snk-brief-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.snk-brief-list { margin: 0; padding-left: 20px; }
.snk-brief-list li { margin-bottom: 10px; }
.snk-brief-list p { margin: 2px 0 0; }
.snk-path { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-left: 3px solid #ff6b85; border-radius: 6px; }
.snk-path p { margin: 4px 0 6px; }
.snk-path-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.snk-findings { list-style: none; margin: 0; padding: 0; }
.snk-findings li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .snk-brief-grid { grid-template-columns: minmax(0, 1fr); } .snk-findings li { grid-template-columns: auto minmax(0, 1fr); } .snk-findings form { grid-column: 2; } }

.snk-triage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.snk-triage .card { margin: 0; }
@media (max-width: 1100px) { .snk-triage { grid-template-columns: minmax(0, 1fr); } }
.snk-lines { list-style: none; margin: 0; padding: 0; }
.snk-line { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.snk-line:first-child { border-top: 0; }
.snk-line .snk-sev { grid-row: span 2; align-self: start; margin-top: 2px; }
.snk-line-meta { grid-column: 2; font-size: 12px; color: var(--muted); }

.snk-landscape { margin: 26px 0; }
.snk-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.snk-service { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 8px; background: rgba(10, 31, 28, 0.7); color: var(--text) !important; text-decoration: none; transition: transform 0.12s, border-color 0.12s; }
.snk-service:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), 0.5); }
.snk-worst-critical { border-top-color: #ff6b85; }
.snk-worst-high { border-top-color: #ff9a62; }
.snk-worst-medium { border-top-color: #ffc15e; }
.snk-worst-low { border-top-color: #8cc8ff; }
.snk-service-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.snk-service-head b { font-family: var(--display); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.snk-service-head span { font-family: var(--display); font-size: 20px; color: var(--heading); }
.snk-types { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snk-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.snk-bar i { display: block; height: 100%; }
.snk-bar .snk-sev-critical { background: #ff4d6d; }
.snk-bar .snk-sev-high { background: #ff8a4c; }
.snk-bar .snk-sev-medium { background: #ffc15e; }
.snk-bar .snk-sev-low { background: #78beff; }
.snk-bar .snk-sev-informational { background: #6f8a83; }
.snk-bar .snk-pass { background: rgba(60, 242, 154, 0.55); }
.snk-regions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.snk-frameworks { margin-top: 10px; }
.snk-frameworks summary { cursor: pointer; color: var(--muted); }
.snk-frameworks div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.snk-checks-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.snk-checks-head h2 { margin: 0; }
.snk-filters select { max-width: 200px; }
.snk-table { width: 100%; border-collapse: collapse; }
.snk-table th { text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.snk-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.snk-table tr:first-child td { border-top: 0; }
.snk-uid, .snk-table .mono, .snk-line a, .snk-table td a { overflow-wrap: anywhere; }
.snk-rate { font-family: var(--display); font-weight: 600; color: var(--accent); }
@media (max-width: 860px) {
  .snk-table, .snk-table tbody { display: block; width: 100%; }
  .snk-table thead { display: none; }
  .snk-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--line); }
  .snk-table td { display: block; border: 0; padding: 3px 14px; }
}
.snk-link { margin-top: 18px; }
.snk-link select { max-width: 320px; }

.snk-check-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .snk-check-grid { grid-template-columns: minmax(0, 1fr); } }
.snk-compliance { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.snk-compliance dt { color: var(--muted); }
.snk-compliance dd { margin: 0; overflow-wrap: anywhere; }

.snk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.snk-tabs a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; }
.snk-tabs a:hover { border-color: var(--accent); }
.snk-guide pre { overflow-x: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); font-size: 12.5px; line-height: 1.6; }
.snk-guide details { margin: 12px 0; }
.snk-guide summary { cursor: pointer; }
.snk-copy { position: relative; }
.snk-copy .btn { position: absolute; top: 8px; right: 8px; }
.snk-empty ol { margin: 0; padding-left: 20px; line-height: 1.8; }
.snk-quick { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.1), 0 0 30px -14px var(--neon-glow); }
.snk-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.snk-quick-grid h3 { margin-top: 4px; }
@media (max-width: 860px) { .snk-quick-grid { grid-template-columns: minmax(0, 1fr); } }
.snk-byhand { margin: 26px 0 10px; }
.snk-keeps { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }

/* Snorkel tile: sonar soundings */
.belt-snorkel {
  --t-bg: #06140f;
  --t-line: #17352f;
  --t-text: #f1fbf7;
  --t-muted: #86a89f;
  --t-accent: #3cf29a;
  --t-font: "Sora", var(--sans);
}
.belt-snorkel h2 { font-weight: 600; letter-spacing: -0.02em; font-size: 27px; }
.belt-snorkel:hover .belt-go { color: #04110f; }
.art-snorkel {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 26px;
  background:
    radial-gradient(ellipse 80% 70% at 50% -20%, rgba(60, 242, 154, 0.16), transparent 70%),
    repeating-radial-gradient(ellipse 150% 70% at 50% -40%, transparent 0 18px, rgba(60, 242, 154, 0.05) 18px 19px),
    linear-gradient(180deg, #06140f, #030a0c);
}
.art-depth { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.art-depth div { display: grid; grid-template-columns: 72px minmax(0, 1fr) 34px; white-space: nowrap; align-items: center; gap: 8px; font-family: "Sora", var(--sans); font-size: 11px; color: #86a89f; text-transform: uppercase; letter-spacing: 0.06em; }
.art-depth i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #3cf29a, rgba(60, 242, 154, 0.25)); box-shadow: 0 0 10px rgba(60, 242, 154, 0.3); }
.art-depth span:last-child { text-align: right; color: #d8ece6; }
.art-sounding { flex: none; display: flex; flex-direction: column; align-items: center; font-family: "Sora", var(--sans); font-size: 11px; color: #86a89f; text-transform: uppercase; letter-spacing: 0.1em; }
.art-sounding strong { font-size: 30px; letter-spacing: -0.02em; color: #3cf29a; text-shadow: 0 0 16px rgba(60, 242, 154, 0.5); }
@media (max-width: 480px) { .art-sounding { display: none; } }

/* ── Threat Hunts: target lock ────────────────────────────────────── */

body.console-theme.app-hunts {
  --accent-rgb: 255, 59, 92;
  --accent: #ff3b5c;
  --accent-hot: #ff8196;
  --accent-soft: rgba(255, 59, 92, 0.09);
  --neon: #ff3b5c;
  --neon-glow: rgba(255, 59, 92, 0.3);
  --ink: #0d0709;
  --ink-soft: #150b0e;
  --paper: #1a0e12;
  --paper-alt: #12090c;
  --line: #3a1c24;
  --text: #f0e2e5;
  --muted: #a48a90;
  --heading: #fff4f6;
  --heading-2: #f3d9de;
  --ok: #46e3a0;
  --ok-soft: rgba(70, 227, 160, 0.10);
  --warn: #ffc15e;
  --warn-soft: rgba(255, 193, 94, 0.10);
  --bad: #ff5470;
  --bad-soft: rgba(255, 84, 112, 0.12);
  --display: "Rajdhani", var(--sans);
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 59, 92, 0.12);
  background-image:
    radial-gradient(ellipse 60% 36% at 50% -10%, rgba(255, 59, 92, 0.14), transparent 70%),
    repeating-radial-gradient(circle at 50% -20%, transparent 0 60px, rgba(255, 59, 92, 0.025) 60px 61px);
  background-attachment: fixed;
}
body.console-theme.app-hunts h1 { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; }
body.console-theme.app-hunts h2 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
body.console-theme.app-hunts h3 { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
body.console-theme.app-hunts .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); text-shadow: none; font-weight: 600; }
body.console-theme.app-hunts .btn-primary:hover { background: var(--accent-hot); color: #1a0409; }
body.console-theme.app-hunts .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }
.app-hunts .app-brand { font-family: var(--display); font-size: 18px; letter-spacing: 0.1em; }
.app-hunts .app-mark { border-radius: 50%; }
.app-hunts main .wrap { max-width: 1320px; }
.app-hunts .btn-small { padding: 4px 10px; font-size: 12.5px; }

.hnt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.hnt-head h1 { margin-bottom: 6px; }
.hnt-head .lede { max-width: 820px; margin-bottom: 0; }
.hnt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.hnt-code { padding: 2px 8px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; background: rgba(var(--accent-rgb), 0.13); color: var(--accent); }
.hnt-kicker { margin: 0 0 6px; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.hnt-status { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.06); color: var(--text); }
.hnt-status-pending { background: rgba(255, 193, 94, 0.13); color: var(--warn); }
.hnt-status-failed { background: var(--bad-soft); color: var(--bad); }
.hnt-status-approved { background: var(--ok-soft); color: var(--ok); }

.hnt-menu { position: relative; }
.hnt-menu > summary { list-style: none; cursor: pointer; }
.hnt-menu > summary::-webkit-details-marker { display: none; }
.hnt-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: flex; flex-direction: column; min-width: 230px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.hnt-menu-panel a { padding: 7px 10px; border-radius: 6px; text-decoration: none; font-size: 14px; }
.hnt-menu-panel a:hover { background: rgba(var(--accent-rgb), 0.1); }

.hnt-building { border-color: rgba(var(--accent-rgb), 0.45); border-style: dashed; }
.hnt-stages { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: stage; }
.hnt-stages li { counter-increment: stage; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); }
.hnt-stages li::before { content: counter(stage) " · "; font-family: var(--mono); }
.hnt-stages .hnt-stage-done { color: var(--ok); border-color: rgba(70, 227, 160, 0.35); }
.hnt-stages .hnt-stage-now { color: var(--heading); border-color: var(--accent); box-shadow: 0 0 14px var(--neon-glow); animation: hnt-pulse 1.6s ease-in-out infinite; }
@keyframes hnt-pulse { 50% { box-shadow: 0 0 2px var(--neon-glow); } }
@media (prefers-reduced-motion: reduce) { .hnt-stages .hnt-stage-now { animation: none; } }
.hnt-rebuild > summary { cursor: pointer; }
.hnt-choose { border-color: var(--accent); }
.hnt-choose h2 { margin: 0 0 4px; }
.hnt-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; }
.hnt-option { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.hnt-option:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.hnt-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 14px var(--neon-glow); }
.hnt-option input { margin-top: 4px; flex: none; }
.hnt-option-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hnt-option-body .hnt-kicker { margin: 0; font-size: 11.5px; }
.hnt-option-title { color: var(--heading); font-size: 15.5px; line-height: 1.3; }
.hnt-option-hyp { font-size: 13.5px; line-height: 1.45; }
.hnt-choose-form textarea { margin: 4px 0 12px; }
.tag-hot { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); }
.hnt-rebuild-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; margin-top: 12px; }
.hnt-rebuild-form label { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.hnt-rebuild-form textarea { margin: 0; }

.hnt-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.hnt-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(26, 14, 18, 0.8); }
.hnt-stat b { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--heading); }
.hnt-stat span { font-size: 12.5px; color: var(--muted); }
.hnt-stat-hot { border-color: rgba(var(--accent-rgb), 0.6); }
.hnt-stat-hot b { color: var(--accent); text-shadow: 0 0 16px var(--neon-glow); }
@media (max-width: 1000px) { .hnt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hnt-threat-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
.hnt-threat-grid .card { margin: 0; }
@media (max-width: 1000px) { .hnt-threat-grid { grid-template-columns: minmax(0, 1fr); } }
.hnt-threat { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.1), 0 0 34px -14px var(--neon-glow); }
.hnt-why { font-size: 16px; line-height: 1.55; color: var(--heading-2); }
.hnt-conf { text-transform: none; letter-spacing: 0.02em; }
.hnt-conf-high { color: var(--ok); }
.hnt-conf-medium { color: var(--warn); }
.hnt-conf-low { color: var(--muted); }
.hnt-hyp { margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: rgba(var(--accent-rgb), 0.06); font-size: 15.5px; line-height: 1.55; color: var(--heading-2); }
.hnt-runners { margin: 0; padding-left: 18px; }
.hnt-runners li { margin-bottom: 6px; }

.hnt-card-h { margin: 0; padding: 14px 16px 10px; }
.hnt-table { width: 100%; border-collapse: collapse; }
.hnt-table th { text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.hnt-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.hnt-table tr:first-child td { border-top: 0; }
@media (max-width: 860px) {
  .hnt-table, .hnt-table tbody { display: block; width: 100%; }
  .hnt-table thead { display: none; }
  .hnt-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--line); }
  .hnt-table td { display: block; border: 0; padding: 3px 14px; }
}

.hnt-ioc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hnt-ioc-grid details { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.hnt-ioc-grid summary { cursor: pointer; }
.hnt-ioc-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: 280px; overflow: auto; font-size: 12.5px; }
.hnt-ioc-list li { padding: 2px 0; overflow-wrap: anywhere; }

.hnt-section-head { margin: 28px 0 10px; }
.hnt-section-head h2 { margin-bottom: 4px; }
.hnt-section-head p { margin: 0; }
.hnt-group { margin: 18px 0 8px; }
.hnt-q { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; background: rgba(26, 14, 18, 0.75); scroll-margin-top: 70px; }
.hnt-q > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.hnt-q p { margin: 4px 0; }
.hnt-qcode { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent); }
.hnt-qtitle { font-size: 15px; color: var(--heading); }
.hnt-kind { padding: 0 6px; border: 1px solid rgba(255, 193, 94, 0.5); border-radius: 4px; font-size: 11px; color: var(--warn); }
.hnt-q-kept, .hnt-da-accepted { border-left-color: var(--ok); }
.hnt-q-dropped, .hnt-da-rejected { opacity: 0.55; }
.hnt-q-hit { border-left-color: var(--accent); box-shadow: 0 0 22px -12px var(--neon-glow); }
.hnt-code-block { position: relative; margin: 8px 0; }
.hnt-code-block pre { margin: 0; padding: 10px 12px; padding-right: 70px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
.hnt-code-block .btn { position: absolute; top: 6px; right: 6px; }
.hnt-sigma > summary { cursor: pointer; color: var(--muted); }
.hnt-err { color: var(--warn); }
.hnt-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.hnt-controls label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hnt-controls select, .hnt-controls input { width: auto; margin: 0; padding: 5px 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.hnt-controls input[type="number"] { width: 84px; }
.hnt-controls .hnt-notes { flex: 1; min-width: 220px; }
.hnt-controls .hnt-notes input { width: 100%; }
.hnt-prio { padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hnt-prio-high { background: rgba(255, 84, 112, 0.16); color: #ff7b90; }
.hnt-prio-medium { background: rgba(255, 193, 94, 0.14); color: var(--warn); }
.hnt-prio-low { background: rgba(160, 180, 190, 0.12); color: var(--muted); }
.hnt-prio-p1 { background: rgba(255, 84, 112, 0.16); color: #ff7b90; }
.hnt-prio-p2 { background: rgba(255, 193, 94, 0.14); color: var(--warn); }
.hnt-prio-p3 { background: rgba(160, 180, 190, 0.12); color: var(--muted); }
.hnt-qstatus { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.hnt-qstatus-ready { color: var(--ok); }
.hnt-qstatus-blocked { color: var(--warn); }
.hnt-triage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; margin: 8px 0 4px; }
.hnt-triage dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hnt-triage dd { margin: 2px 0 0; color: var(--text); }
@media (max-width: 900px) { .hnt-triage { grid-template-columns: minmax(0, 1fr); } }
.hnt-ev { display: inline-block; margin-top: 4px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; vertical-align: middle; color: var(--muted); }
.hnt-ev-source-confirmed { color: var(--ok); border-color: rgba(70, 227, 160, 0.4); }
.hnt-ev-analyst-mapped, .hnt-ev-assessment { color: #9fc3ff; border-color: rgba(159, 195, 255, 0.4); }
.hnt-ev-needs-validation { color: var(--warn); border-color: rgba(255, 193, 94, 0.45); }

.hnt-waiting-list { margin: 0; padding: 0; list-style: none; }
.hnt-waiting-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hnt-waiting-list li:first-child { border-top: 0; }
.hnt-waiting-list .btn { margin-left: auto; }
.hnt-empty ol { margin: 0; padding-left: 20px; line-height: 1.8; }
.hnt-form-h { margin: 8px 0 0; }
.hnt-keeps { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.hnt-intel-errors summary { cursor: pointer; color: var(--muted); }

/* Threat Hunts tile: through the binoculars */
.belt-hunts {
  --t-bg: #120709;
  --t-line: #3a1c24;
  --t-text: #fff4f6;
  --t-muted: #a48a90;
  --t-accent: #ff3b5c;
  --t-font: "Rajdhani", var(--sans);
}
.belt-hunts h2 { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 30px; }
.belt-hunts:hover .belt-go { color: #fff; }
/* A look through binoculars (portal/_hunts_binoculars.html), on a 10s loop:
   pan with parallax, the figure steps out, zoom and focus, lock on, hold,
   dip to black. Every rule's resting state is the locked-on frame, which is
   what reduced motion shows. */
.art-hunts { height: 100%; background: #050203; }
.hbx { display: block; width: 100%; height: 100%; }
.hbx text { font-family: "Rajdhani", var(--sans); font-weight: 600; }
.hbx-k { font-size: 7px; letter-spacing: 0.16em; fill: #ff8196; }
.hbx-name { font-size: 12px; letter-spacing: 0.06em; fill: #fff4f6; }
.hbx .hbx-ttps, .hbx .hbx-range, .hbx .hbx-tape-labels text { font-family: "IBM Plex Mono", var(--mono); font-weight: 400; }
.hbx-ttps { font-size: 6.5px; fill: #ff8196; }
.hbx-range { font-size: 8px; fill: #8e6b73; text-anchor: middle; }
.hbx-range tspan { fill: #fff4f6; }
.hbx-tape-labels { font-size: 5.5px; fill: #8e6b73; text-anchor: middle; }

.hbx-l0 { transform: translateX(-60px); animation: hbx-p0 10s cubic-bezier(.6, 0, .3, 1) infinite; }
.hbx-l1, .hbx-tape { transform: translateX(-120px); animation: hbx-p1 10s cubic-bezier(.6, 0, .3, 1) infinite; }
.hbx-l2 { transform: translateX(-240px); animation: hbx-p2 10s cubic-bezier(.6, 0, .3, 1) infinite; }
.hbx-l3 { transform: translateX(-330px); animation: hbx-p3 10s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes hbx-p0 { 0% { transform: translateX(0); } 32.5% { transform: translateX(-62px); } 37.7% { transform: translateX(-59px); } 41%, 100% { transform: translateX(-60px); } }
@keyframes hbx-p1 { 0% { transform: translateX(0); } 32.5% { transform: translateX(-125px); } 37.7% { transform: translateX(-118px); } 41%, 100% { transform: translateX(-120px); } }
@keyframes hbx-p2 { 0% { transform: translateX(0); } 32.5% { transform: translateX(-250px); } 37.7% { transform: translateX(-236px); } 41%, 100% { transform: translateX(-240px); } }
@keyframes hbx-p3 { 0% { transform: translateX(0); } 32.5% { transform: translateX(-344px); } 37.7% { transform: translateX(-325px); } 41%, 100% { transform: translateX(-330px); } }

.hbx-sway { transform-origin: 170px 85px; animation: hbx-sway 10s ease-in-out infinite; }
@keyframes hbx-sway {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  9% { transform: translate(1.4px, -1px) rotate(.35deg); }
  18% { transform: translate(-1px, 1.3px) rotate(-.25deg); }
  27% { transform: translate(1.1px, .4px) rotate(.2deg); }
  36% { transform: translate(-.7px, -.9px) rotate(-.15deg); }
  46% { transform: translate(.4px, .5px) rotate(.08deg); }
  55% { transform: translate(0, 0) rotate(0); }
  68% { transform: translate(.4px, -.3px) rotate(.05deg); }
  82% { transform: translate(-.4px, .3px) rotate(-.05deg); }
}

.hbx-zoom { transform-origin: 170px 115px; transform: scale(1.15); animation: hbx-zoom 10s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes hbx-zoom { 0%, 43% { transform: scale(1); } 52%, 100% { transform: scale(1.15); } }

.hbx-focus { animation: hbx-focus 10s linear infinite; }
@keyframes hbx-focus {
  0% { filter: blur(.6px); } 26% { filter: blur(1.3px); } 39% { filter: blur(.5px); }
  45% { filter: blur(1.9px); } 48.8% { filter: blur(.3px); } 50.7% { filter: blur(.9px); } 54%, 100% { filter: blur(0); }
}

.hbx-fig { animation: hbx-step 10s ease-out infinite; }
@keyframes hbx-step {
  0%, 36.4% { transform: translate(-18px, 0); }
  39% { transform: translate(-13px, -.8px); } 41.6% { transform: translate(-8px, 0); }
  44.2% { transform: translate(-3px, -.8px); } 46.8%, 100% { transform: translate(0, 0); }
}
.hbx-glow { animation: hbx-glow 10s ease-out infinite; }
@keyframes hbx-glow { 0%, 41.6% { opacity: 0; } 52%, 100% { opacity: 1; } }

.hbx-lock { transform-box: fill-box; transform-origin: center; animation: hbx-lock 10s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes hbx-lock { 0%, 52% { opacity: 0; transform: scale(1.7); } 56.6% { opacity: 1; transform: scale(.94); } 59.2%, 100% { opacity: 1; transform: scale(1); } }

.hbx-leader { stroke-dasharray: 90; stroke-dashoffset: 0; animation: hbx-draw 10s ease-out infinite; }
@keyframes hbx-draw { 0%, 56% { stroke-dashoffset: 90; } 60%, 100% { stroke-dashoffset: 0; } }
.hbx-tag, .hbx-range { animation: hbx-tag 10s ease-out infinite; }
@keyframes hbx-tag { 0%, 58.5% { opacity: 0; transform: translateX(-6px); } 63%, 100% { opacity: 1; transform: translateX(0); } }

.hbx-blink { opacity: 0; pointer-events: none; animation: hbx-blink 10s ease-in-out infinite; }
@keyframes hbx-blink { 0% { opacity: 1; } 4%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hbx *, .hbx { animation: none !important; }
}

/* Four across below the full 1564px: tighten the widest tile art to fit. */
@media (min-width: 1440px) and (max-width: 1563px) {
  .art-cti { gap: 16px; padding: 0 20px; }
  .art-radar { width: 124px; height: 124px; }
}

/* ── The toolbelt's own pages (Access, Glean errors): the home page's graphite ── */

body.console-theme.app-toolbelt {
  --accent-rgb: 200, 245, 96;
  --accent: #c8f560;
  --accent-hot: #dcff8a;
  --accent-soft: rgba(200, 245, 96, 0.08);
  --neon: #c8f560;
  --neon-glow: rgba(200, 245, 96, 0.3);
  --ink: #0a0b0d;
  --ink-soft: #15171b;
  --paper: #111316;
  --paper-alt: #0a0b0d;
  --line: #23262c;
  --text: #eceae6;
  --muted: #8b8f98;
  --heading: #ffffff;
  --heading-2: #eceae6;
  --ok: #3cf29a;
  --ok-soft: rgba(60, 242, 154, 0.10);
  --warn: #ffd60a;
  --warn-soft: rgba(255, 214, 10, 0.10);
  --bad: #ff5470;
  --bad-soft: rgba(255, 84, 112, 0.10);
  --display: "Space Grotesk", var(--sans);
  --shadow: none;
  font-family: "Space Grotesk", var(--sans);
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 50% 40% at 12% -5%, rgba(255, 122, 46, 0.10), transparent 60%),
    radial-gradient(ellipse 45% 40% at 40% -10%, rgba(183, 156, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 40% at 70% -8%, rgba(56, 232, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 40% at 98% -5%, rgba(255, 244, 220, 0.06), transparent 60%);
  background-size: auto;
}
body.console-theme.app-toolbelt::before,
body.console-theme.app-toolbelt::after { display: none; }
body.console-theme.app-toolbelt h1 { margin: 0; font-size: clamp(34px, 5vw, 52px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; text-transform: none; }
body.console-theme.app-toolbelt h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
body.console-theme.app-toolbelt a:hover { text-shadow: none; }
body.console-theme.app-toolbelt .card { border-radius: 16px; }
body.console-theme.app-toolbelt .btn { border-radius: 8px; font-weight: 600; }
body.console-theme.app-toolbelt .btn:hover { box-shadow: none; }
body.console-theme.app-toolbelt .btn-primary { background: var(--accent); border-color: var(--accent); color: #11160a; text-shadow: none; }
body.console-theme.app-toolbelt .btn-primary:hover { background: var(--accent-hot); color: #11160a; box-shadow: 0 12px 30px -14px rgba(200, 245, 96, 0.7); }
body.console-theme.app-toolbelt input[type="text"],
body.console-theme.app-toolbelt input[type="email"],
body.console-theme.app-toolbelt input[type="password"],
body.console-theme.app-toolbelt input[type="url"],
body.console-theme.app-toolbelt input[type="number"],
body.console-theme.app-toolbelt textarea { background: #0d0f12; border-radius: 8px; }
body.console-theme.app-toolbelt footer.site { background: transparent; }
.app-toolbelt .appbar { background: rgba(10, 11, 13, 0.85); }
.app-toolbelt .app-brand { gap: 12px; font-family: "Space Grotesk", var(--sans); font-size: 13px; letter-spacing: 0.12em; color: var(--belt-text, #eceae6) !important; }
.app-toolbelt main .wrap { max-width: 1180px; }
.app-toolbelt .belt-kicker { color: var(--muted); }
.app-toolbelt .belt-lede { color: var(--muted); }

.acc-hero { padding: 28px 0 28px; }
.acc-hero .belt-lede { font-size: 17px; }
.acc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.acc-side { display: grid; gap: 20px; }
.acc-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.acc-panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.acc-panel-body { padding: 18px 20px 20px; }
.acc-count { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: "IBM Plex Mono", var(--mono); font-size: 12px; color: var(--muted); }
.acc-people { list-style: none; margin: 0; padding: 0; }
.acc-person { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 12px 20px; align-items: start; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.acc-person:last-child { border-bottom: 0; }
.acc-person.is-off .acc-who strong { color: var(--muted); }
.acc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-who strong { font-weight: 600; color: var(--heading); }
.acc-who > span:not(.acc-tags) { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.acc-tags { display: flex; gap: 6px; margin-top: 6px; }
.acc-role { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: "IBM Plex Mono", var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.acc-role-admin { color: var(--accent); border-color: rgba(200, 245, 96, 0.4); }
.acc-role-off { color: var(--bad); border-color: rgba(255, 84, 112, 0.4); }
.acc-role-names { color: #b79cff; border-color: rgba(183, 156, 255, 0.4); }
.acc-form { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; }
.acc-chips,
.acc-panel .checks > div { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-panel .checks > div > div { margin: 0; }
.acc-chip,
.acc-panel .checks > div label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.acc-chip input,
.acc-panel .checks > div label input { width: auto; margin: 0; accent-color: var(--accent); }
.acc-chip:hover,
.acc-panel .checks > div label:hover { border-color: var(--muted); }
.acc-chip:has(input:checked),
.acc-panel .checks > div label:has(input:checked) { border-color: rgba(200, 245, 96, 0.55); background: rgba(200, 245, 96, 0.08); color: var(--text); }
.acc-chip:focus-within,
.acc-panel .checks > div label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-all { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--muted); }
.acc-dots { display: inline-flex; gap: 3px; }
.acc-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.acc-groups-panel { margin-bottom: 20px; }
.acc-groups-panel .acc-panel-head { flex-wrap: wrap; }
.acc-hint { font-size: 12.5px; color: var(--muted); }
.acc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); margin: 0; padding: 0; list-style: none; }
.acc-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.acc-group-name { display: flex; flex-direction: column; min-width: 0; }
.acc-group-name strong { font-size: 13.5px; color: var(--heading); }
.acc-group-name span { font-size: 12px; color: var(--muted); }
.acc-group-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.acc-tool { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; white-space: nowrap; color: var(--text); }
.acc-tool > i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.acc-tool-none { color: var(--muted); border-style: dashed; }
@media (max-width: 980px) { .acc-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .acc-person { grid-template-columns: minmax(0, 1fr); }
  .acc-form { flex-direction: column; }
}

/* ── Deal Desk: the signed contract ─────────────────────────────────
   White paper, royal blue ink: the business look, and the blue a signature is
   signed in. */

body.console-theme.app-sales {
  --accent-rgb: 29, 78, 216;
  --accent: #1d4ed8;
  --accent-hot: #1537a8;
  --accent-soft: rgba(29, 78, 216, 0.08);
  --neon: #1d4ed8;
  --neon-glow: rgba(29, 78, 216, 0.22);
  --ink: #ffffff;
  --ink-soft: #f1f5fb;
  --paper: #ffffff;
  --paper-alt: #f4f7fc;
  --line: #d8e1ee;
  --text: #1a2436;
  --muted: #5b6b84;
  --heading: #0b1730;
  --heading-2: #22314d;
  --ok: #17684a;
  --ok-soft: rgba(23, 104, 74, 0.12);
  --warn: #8a5200;
  --warn-soft: rgba(196, 128, 20, 0.16);
  --bad: #b01c3c;
  --bad-soft: rgba(176, 28, 60, 0.12);
  --display: "Bricolage Grotesque", var(--sans);
  --glow: none;
  --glow-accent: 0 0 0 3px rgba(29, 78, 216, 0.14);
  --shadow: 0 1px 2px rgba(15, 35, 80, 0.05), 0 12px 30px -14px rgba(15, 35, 80, 0.14);
  background-image:
    radial-gradient(ellipse 70% 40% at 85% -10%, rgba(29, 78, 216, 0.08), transparent 70%),
    linear-gradient(rgba(29, 78, 216, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 78, 216, 0.035) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
}
body.console-theme.app-sales h1 { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; text-transform: none; }
body.console-theme.app-sales h2 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
body.console-theme.app-sales h3 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--heading); margin: 0; }
body.console-theme.app-sales a:hover { text-shadow: none; }
body.console-theme.app-sales .btn:hover { box-shadow: none; }
body.console-theme.app-sales .card:hover { border-color: var(--line); }
body.console-theme.app-sales .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); text-shadow: none; font-weight: 700; }
body.console-theme.app-sales .btn-primary:hover { background: var(--accent-hot); color: #fff; box-shadow: var(--glow-accent); }
body.console-theme.app-sales .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }
body.console-theme.app-sales .lede { color: var(--heading-2); }
body.console-theme.app-sales .appbar { background: color-mix(in srgb, #ffffff 90%, transparent); border-bottom-color: #d8e1ee; }
body.console-theme.app-sales footer.site { background: #eef3fa; border-top-color: #d8e1ee; color: var(--heading-2); }
.app-sales .app-brand { text-transform: none; letter-spacing: -0.02em; font-family: var(--display); font-size: 18px; font-weight: 800; }
.app-sales .app-mark { border-radius: 6px 6px 6px 2px; background: #eaf0fd; box-shadow: none; }
.app-sales .app-back { border-color: #cdd8e8; background: #fff; }
.app-sales .app-back .belt-logo i { opacity: 0.25; }
.app-sales .app-back:hover .belt-logo i, .app-sales .app-back:focus-visible .belt-logo i { opacity: 1; }
.app-sales .app-back .belt-logo i.lit { opacity: 1; background: #1d4ed8; box-shadow: none; }
.app-sales main .wrap { max-width: 1240px; }
.app-sales .btn-small { padding: 4px 10px; font-size: 12.5px; }

.dd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dd-head h1 { margin-bottom: 6px; }
.dd-head .lede { max-width: 780px; margin-bottom: 0; }
.dd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.dd-kind { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.dd-flag { color: var(--warn); }
.dd-code { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-family: var(--mono); font-size: 12.5px; }
.dd-code i { width: 9px; height: 9px; border-radius: 2px; }
.dd-tag { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--text); }
.dd-status { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: rgba(var(--accent-rgb), 0.07); color: var(--muted); white-space: nowrap; }
.dd-status-pending { background: var(--warn-soft); color: var(--warn); }
.dd-status-failed { background: var(--bad-soft); color: var(--bad); }
.dd-pad { padding: 12px 16px; margin: 0; }
.dd-card-h { margin: 0; padding: 14px 16px 6px; }

.dd-find { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 0 34px -16px var(--neon-glow); }
.dd-find > label { display: block; margin: 0 0 8px; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--heading); }
.dd-find-row { display: flex; gap: 10px; }
.dd-find-row input { flex: 1; min-width: 0; margin: 0; font-size: 16px; }
.dd-find p { margin: 8px 0 0; }
.dd-combo { position: relative; flex: 1; min-width: 0; }
.dd-combo input { width: 100%; margin: 0; font-size: 16px; }
.dd-combo input::-webkit-search-cancel-button { cursor: pointer; }
.dd-options { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35); }
.dd-options[hidden] { display: none; }
.dd-opt-group { padding: 10px 10px 4px; font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.dd-opt.is-active { background: var(--accent-soft); }
.dd-opt-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dd-opt-main i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.dd-opt-code { font-family: var(--mono); font-size: 13.5px; color: var(--heading); }
.dd-opt-title { font-weight: 600; color: var(--heading); }
.dd-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.dd-opt-detail { flex: none; font-size: 12.5px; color: var(--muted); }
.dd-opt mark { background: none; color: var(--accent); font-weight: 700; }
.dd-opt-new { justify-content: flex-start; gap: 4px; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--accent); }
.dd-opt-new b { color: var(--heading); }
.dd-opt-empty { padding: 12px 10px; font-size: 13.5px; color: var(--muted); }
.dd-keys { white-space: nowrap; }
@media (max-width: 640px) { .dd-opt-detail, .dd-keys { display: none; } }

.dd-book-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px 6px; }
.dd-book-h h2 { margin: 0; }
.dd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.dd-row:hover .dd-row-who b, .dd-row:focus-visible .dd-row-who b { color: var(--accent); }
.dd-row-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.dd-row-who .small { flex-basis: 100%; }
.dd-row-brief { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; text-align: right; }
.dd-list li:has(> .dd-row:hover) { background: rgba(var(--accent-rgb), 0.04); }
@media (max-width: 640px) { .dd-row { flex-direction: column; align-items: flex-start; } .dd-row-brief { justify-content: flex-start; text-align: left; } }

.dd-code-lg { font-size: 0.8em; margin-right: 10px; }
.dd-code-lg i { width: 14px; height: 14px; border-radius: 3px; }
.dd-h-name { font-weight: 500; color: var(--muted); }

.dd-refresh { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; padding-bottom: 14px; }
.dd-refresh label { margin: 0; font-size: 13px; }
.dd-refresh .dd-refresh-hint { margin: 0 0 4px; }
.dd-refresh textarea { width: 100%; min-height: 76px; margin: 0; resize: vertical; }
.dd-refresh-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.dd-refresh-actions .btn { width: auto; }
.dd-refresh-first { border-color: rgba(var(--accent-rgb), 0.45); }
.dd-sharpen { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; border-style: dashed; border-color: rgba(var(--accent-rgb), 0.45); background: var(--accent-soft); }
.dd-sharpen > div { display: flex; flex-direction: column; gap: 2px; max-width: 760px; }

.dd-answer { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.1), 0 0 40px -16px var(--neon-glow); }
.dd-answer-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; }
.dd-answer-h h2 { margin: 0; }
.dd-answer-h > .small { flex: 1; }
.dd-answer-k { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.dd-lead-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-bottom: 16px; }
.dd-lead-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.dd-lead-tags .dd-glean-tag { display: inline; margin: 0; }
.dd-lead-side { display: flex; flex-direction: column; gap: 14px; }
.dd-lead-side > div { padding-left: 12px; border-left: 2px solid rgba(var(--accent-rgb), 0.35); }
.dd-lead-side p { margin: 4px 0 0; line-height: 1.5; }
@media (max-width: 900px) { .dd-lead-grid { grid-template-columns: minmax(0, 1fr); } }
.dd-pitch-plain { border-left-color: var(--line); background: rgba(var(--accent-rgb), 0.04); font-size: 15px; color: var(--heading-2); }
.dd-pending { color: var(--muted); }
.dd-pending::after { content: "…"; display: inline-block; animation: dd-dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; width: 1.1em; }
@keyframes dd-dots { 0% { width: 0; } 100% { width: 1.1em; } }
@media (prefers-reduced-motion: reduce) { .dd-pending::after { animation: none; } }

.dd-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dd-columns > .card { margin: 0; }
.dd-columns:has(> .dd-section) { margin-bottom: 0; }
@media (max-width: 900px) { .dd-columns { grid-template-columns: minmax(0, 1fr); } }
.dd-list { margin: 0; padding: 0; list-style: none; }
.dd-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dd-list li:first-child { border-top: 0; }
.dd-list form { margin: 0; }
.dd-list-flush li { padding: 10px 16px; }
.dd-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.dd-facts dt { font-size: 13px; color: var(--muted); }
.dd-facts dd { margin: 0; }

.dd-form .dd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); cursor: pointer; }
.dd-chip input { width: auto; margin: 0; accent-color: var(--accent); }
.dd-chip:has(input:checked) { border-color: rgba(var(--accent-rgb), 0.6); background: var(--accent-soft); color: var(--text); }
.dd-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-form-short { max-width: 820px; }
.dd-form-short input[type="url"] { width: 100%; }
.dd-keeps { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.dd-mode { display: inline-flex; justify-self: start; padding: 4px; border: 1px solid var(--line); border-radius: 12px; gap: 4px; }
.dd-mode input { position: absolute; opacity: 0; pointer-events: none; }
.dd-mode label { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 8px 16px; border-radius: 9px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer; }
.dd-mode label span { font-family: inherit; font-weight: 400; font-size: 12px; }
.dd-mode input:checked + label { background: var(--accent-soft); color: var(--heading); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6); }
.dd-mode input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-adv { padding: 0; margin: 0; }
.dd-start:has(#dd-mode-easy:checked) .dd-adv { display: none; }

.dd-folds { margin-top: 26px; }
.dd-fold { margin: 0 0 12px; }
.dd-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; }
.dd-fold > summary::-webkit-details-marker { display: none; }
.dd-fold > summary h2 { margin: 0; font-size: 18px; }
.dd-fold > summary::before { content: "▸"; color: var(--accent); transition: transform 0.15s; }
.dd-fold[open] > summary::before { transform: rotate(90deg); }
.dd-fold[open] > summary { margin-bottom: 12px; }
.dd-fold[open] > summary.dd-pad { margin-bottom: 0; }
.dd-fold .dd-columns { margin: 0; }
.dd-fold h3 { font-size: 14px; color: var(--muted); }
.dd-fold > ul:not([class]) { margin: 0; padding-left: 18px; }

.dd-section { margin: 26px 0 0; }
.dd-section > .card { margin: 0; }
.dd-section > h2 { margin: 0 0 10px; }
.dd-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dd-services .card { margin: 0; }
@media (max-width: 900px) { .dd-services { grid-template-columns: minmax(0, 1fr); } }
.dd-service header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dd-service h3 { flex: 1; }
.dd-rank { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--muted); }
body.console-theme.app-sales h3.dd-lead-name { margin: 0 0 8px; font-size: 26px; line-height: 1.15; }
.dd-fit { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: rgba(var(--accent-rgb), 0.07); color: var(--muted); }
.dd-fit-strong-fit { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.dd-fit-good-fit { background: var(--ok-soft); color: var(--ok); }
.dd-because { margin: 0 0 10px; padding: 0; list-style: none; }
.dd-because li { position: relative; padding: 3px 0 3px 20px; font-size: 14.5px; line-height: 1.5; color: var(--heading); }
.dd-because li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--neon-glow); }
.dd-service .dd-because li { font-size: 13.5px; }
.dd-source { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; line-height: 18px; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
a.dd-source { color: var(--accent); text-decoration: none; }
a.dd-source:hover { border-color: var(--accent); }
.dd-source-none { border-style: dashed; }
.dd-kind-gti { border-color: rgba(66, 133, 244, 0.55); }
.dd-kind-coalfire { border-color: rgba(var(--accent-rgb), 0.55); }
.dd-kind-guide { border-color: rgba(201, 162, 39, 0.6); }
.dd-kind-public { border-color: var(--line); border-style: dotted; }
.dd-picture { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.06); }
.dd-picture p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--heading); }
.dd-picture p.small { font-size: 12.5px; color: var(--muted); }
.dd-built-from { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.dd-built-from p { margin: 0 0 6px; }
.dd-mix { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-mix .dd-source { margin: 0; }
.dd-bridge { display: grid; gap: 10px; }
.dd-bridge-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 16px; margin: 0; }
.dd-bridge-row p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .dd-bridge-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.dd-terms { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 10px; font-size: 13px; }
.dd-terms dt { font-weight: 600; color: var(--muted); }
.dd-terms dd { margin: 0; color: var(--heading-2); }
.dd-practice { margin: -4px 0 8px; }
.dd-watch { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: rgba(var(--accent-rgb), 0.05); }
.dd-loading { margin: 0 0 6px; }
.dd-loading-msg { margin: 2px 0 4px; font-family: var(--display); font-size: 20px; }
.dd-skeleton { display: grid; gap: 8px; max-width: 520px; margin: 14px 0 4px; }
.dd-skeleton i { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 25%, rgba(var(--accent-rgb), 0.12) 50%, var(--line) 75%); background-size: 200% 100%; animation: dd-shimmer 1.6s linear infinite; }
.dd-skeleton i:nth-child(2) { width: 85%; }
.dd-skeleton i:nth-child(3) { width: 60%; }
@keyframes dd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .dd-skeleton i { animation: none; } }
.dd-read { margin: 0 0 14px; padding-left: 12px; border-left: 2px solid rgba(var(--accent-rgb), 0.35); }
.dd-read p { margin: 4px 0 0; line-height: 1.55; }
.dd-ask { margin-top: 4px; }
.dd-cross { margin: 0; padding-left: 20px; font-size: 13.5px; }
.dd-cross li { margin-bottom: 4px; }
.dd-threats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dd-threats li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.dd-pitch { margin: 0 0 12px; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); font-size: 16.5px; line-height: 1.6; color: var(--heading); }
.dd-pitch + h3 { margin-top: 4px; font-size: 14px; color: var(--muted); }
.dd-questions, .dd-next { margin: 0; padding-left: 20px; }
.dd-questions li, .dd-next li { margin-bottom: 6px; }
.dd-objection { padding: 8px 0; border-top: 1px solid var(--line); }
.dd-objection:first-child { border-top: 0; padding-top: 0; }
.dd-objection > summary { cursor: pointer; font-weight: 600; color: var(--heading); }
.dd-objection p { margin: 6px 0 0; font-size: 14px; }
.dd-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dd-people .card { margin: 0; }
.dd-person p { margin: 6px 0 0; }
.dd-covers { margin-top: 8px; }
.dd-person-glean { border-style: dashed; }
.dd-glean-tag { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.dd-table { width: 100%; border-collapse: collapse; }
.dd-table th { text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dd-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.dd-table tr:first-child td { border-top: 0; }
.dd-risk { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11.5px; background: rgba(var(--accent-rgb), 0.07); }
.dd-risk-critical, .dd-risk-high { background: var(--bad-soft); color: var(--bad); }
.dd-risk-medium { background: var(--warn-soft); color: var(--warn); }
.dd-sources { margin: 0; padding-left: 18px; }
@media (max-width: 760px) {
  .dd-table, .dd-table tbody { display: block; width: 100%; }
  .dd-table thead { display: none; }
  .dd-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--line); }
  .dd-table td { display: block; border: 0; padding: 3px 14px; }
}

/* Deal Desk tile: signing on the line. The latest brief's account (a brevity
   code, or a prospect's public name) is signed in script, left to right with the
   pen tip leading, then held and faded, on a 9s loop. Reduced motion shows the
   finished signature. */
.belt-sales {
  --t-bg: #ffffff;
  --t-line: #d8e1ee;
  --t-text: #0b1730;
  --t-muted: #5b6b84;
  --t-accent: #1d4ed8;
  --t-font: "Bricolage Grotesque", var(--sans);
}
.belt-sales h2 { font-weight: 800; letter-spacing: -0.03em; font-size: 30px; }
.belt-sales:hover .belt-go { color: #fff; }
.art-sales {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 20px;
  background:
    linear-gradient(rgba(29, 78, 216, 0.04) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(29, 78, 216, 0.04) 1px, transparent 1px) 0 0 / 22px 22px,
    #ffffff;
}
.art-sow { width: 100%; max-width: 300px; padding: 12px 16px 10px; border: 1px solid #d8e1ee; border-radius: 6px; background: #fff; box-shadow: 0 14px 30px -14px rgba(15, 35, 80, 0.35); transform: rotate(-1.5deg); }
.art-sow-h, .art-sow-f { display: flex; justify-content: space-between; gap: 10px; font-family: "IBM Plex Mono", var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7a92; }
.art-sow-h span, .art-sow-f span { white-space: nowrap; }
.art-sow-h span:first-child { flex-shrink: 0; }
.art-sow-h span:last-child { min-width: 0; color: #1d4ed8; overflow: hidden; text-overflow: ellipsis; }
.art-sig-row { display: flex; align-items: flex-end; gap: 8px; height: 62px; margin: 4px 0 5px; border-bottom: 1.5px solid #22314d; }
.art-x { padding-bottom: 5px; font-size: 13px; font-weight: 700; color: #22314d; }
.art-sig { position: relative; display: inline-block; min-width: 0; }
.art-sig-ink {
  display: block;
  padding: 4px 16px 6px 4px;
  font-family: "Mrs Saint Delafield", "Brush Script MT", cursive;
  font-size: 46px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  color: #1a3fb0;
  animation: art-write 9s linear infinite;
}
.art-sig-long .art-sig-ink { font-size: 36px; }
.art-sig-xl .art-sig-ink { font-size: 27px; }
/* The pen's tip rides the edge of the ink as it's revealed (so it works for any
   name), bobbing as if forming letters, then lifts off the page. */
.art-pen { position: absolute; bottom: 9px; left: 0; width: 12px; height: 62px; margin-left: -6px; opacity: 0; pointer-events: none; animation: art-pen 9s linear infinite; }
.art-pen svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; filter: drop-shadow(3px 5px 3px rgba(15, 35, 80, 0.22)); animation: art-pen-bob 0.85s ease-in-out infinite; }
@keyframes art-pen {
  0%, 2% { left: 0; opacity: 0; transform: translate(14px, -22px); }
  6% { left: 0; opacity: 1; transform: none; }
  16% { left: 26%; }
  27% { left: 50%; }
  36% { left: 78%; }
  44% { left: 96%; opacity: 1; transform: none; }
  52% { left: 96%; opacity: 0; transform: translate(16px, -26px); }
  100% { left: 96%; opacity: 0; transform: translate(16px, -26px); }
}
@keyframes art-pen-bob {
  0%, 100% { transform: translateY(0) rotate(30deg); }
  18% { transform: translateY(-9px) rotate(27deg); }
  34% { transform: translateY(-3px) rotate(31deg); }
  52% { transform: translateY(-12px) rotate(26deg); }
  70% { transform: translateY(-2px) rotate(32deg); }
  85% { transform: translateY(-7px) rotate(29deg); }
}
@keyframes art-write {
  0%, 6% { clip-path: inset(0 100% 0 0); opacity: 1; }
  16% { clip-path: inset(0 74% 0 0); }
  27% { clip-path: inset(0 50% 0 0); }
  36% { clip-path: inset(0 22% 0 0); }
  44%, 90% { clip-path: inset(0 0 0 0); opacity: 1; }
  98%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
/* static/js/signature.js swaps the webfont for a single-line script it draws
   stroke by stroke, and steers the pen itself. */
.art-sig-live .art-sig-ink { display: none; }
.art-sig-draw { display: block; margin: 0 0 -4px 2px; }
.art-sig-svg { display: block; max-width: 100%; height: auto; overflow: visible; fill: none; stroke: #1a3fb0; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.art-sig-live .art-pen { left: 0; top: 0; bottom: auto; animation: none; will-change: transform, opacity; }
.art-sig-live .art-pen svg { animation: none; transform: rotate(30deg); }
@media (prefers-reduced-motion: reduce) { .art-sig-ink { animation: none; } .art-pen { display: none; } }

/* ── Client environment ── */
.env-card { margin-bottom: 20px; }
.env-card h3 { margin: 14px 0 4px; font-size: 14px; }
.env-grid { align-items: start; gap: 24px; }
.env-table { width: 100%; margin-top: 6px; }
.env-table td { padding: 3px 10px 3px 0; border: 0; vertical-align: top; }
.env-table td:first-child { white-space: nowrap; }
.env-table td.mono { overflow-wrap: anywhere; }
.env-table td.num { text-align: right; white-space: nowrap; }
.env-sources summary { cursor: pointer; }
.env-form .card { margin-bottom: 20px; }
.env-search-query { white-space: pre-wrap; word-break: break-word; margin: 0; padding: 10px 12px; font-size: 12.5px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; user-select: all; }
.warn-text { color: var(--warn); }

/* Outside tools admin */
.ext-list { margin: 0; padding: 0; list-style: none; }
.ext-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.ext-item:last-child { border-bottom: 0; }
.ext-item.is-off { opacity: 0.6; }
.ext-item.is-editing { background: rgba(200, 245, 96, 0.05); }
.ext-thumb { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #0b0d12; }
.ext-thumb-big { width: 100%; margin-bottom: 12px; }
.ext-who { display: grid; gap: 4px; min-width: 0; }
.ext-who strong { display: flex; align-items: center; gap: 8px; }
.ext-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.ext-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--sq); }
.ext-actions { display: flex; gap: 8px; }
.ext-actions form { margin: 0; }
.ext-empty { padding: 20px; color: var(--muted); }
@media (max-width: 700px) {
  .ext-item { grid-template-columns: 80px minmax(0, 1fr); }
  .ext-thumb { width: 80px; }
  .ext-actions { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DetCord — the sandbox: hot fuchsia scan on plum-black, signal amber,
   Oxanium. Verdict colours: red malicious, amber suspicious, mint no signals.
   ═══════════════════════════════════════════════════════════════════════════ */
body.console-theme.app-detcord {
  --accent-rgb: 240, 76, 208;
  --accent: #f04cd0;
  --accent-hot: #ff8ae6;
  --accent-soft: rgba(240, 76, 208, 0.10);
  --spark: #ffb020;
  --neon: #f04cd0;
  --neon-glow: rgba(240, 76, 208, 0.32);
  --ink: #0b0810;
  --ink-soft: #120d18;
  --paper: #15101c;
  --paper-alt: #100c16;
  --line: #2b2136;
  --text: #ece6f2;
  --muted: #9b90a9;
  --heading: #fbf7ff;
  --heading-2: #e4d9ef;
  --ok: #2ee6a8;
  --ok-soft: rgba(46, 230, 168, 0.10);
  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, 0.10);
  --bad: #ff4d6d;
  --bad-soft: rgba(255, 77, 109, 0.11);
  --display: "Oxanium", var(--sans);
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.5), 0 0 1px rgba(240, 76, 208, 0.12);
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 60% 40% at 85% -10%, rgba(240, 76, 208, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 0% 0%, rgba(255, 176, 32, 0.06), transparent 70%),
    linear-gradient(rgba(240, 76, 208, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 76, 208, 0.03) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
}
body.console-theme.app-detcord h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
body.console-theme.app-detcord h2 { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--heading-2); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
body.console-theme.app-detcord h3 { font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.console-theme.app-detcord .btn-primary { background: var(--accent); border-color: var(--accent); color: #1a0716; text-shadow: none; font-weight: 700; }
body.console-theme.app-detcord .btn-primary:hover { background: var(--accent-hot); color: #1a0716; box-shadow: 0 10px 30px -12px rgba(240, 76, 208, 0.8); }
body.console-theme.app-detcord .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.app-detcord .app-brand { font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; text-transform: none; font-size: 17px; }
.app-detcord .app-mark svg { stroke: var(--accent); }
.app-detcord main .wrap { max-width: 1380px; }
/* Layout rules below set display; hidden must still hide. */
.app-detcord [hidden] { display: none !important; }
.app-detcord code, .app-detcord .dc-mono { font-family: "IBM Plex Mono", var(--mono); }
/* Sample text is shown plain: the toolbelt's inline-code chip would turn every path into a pill. */
.app-detcord .dc-main code { background: none; border: 0; padding: 0; color: var(--text); border-radius: 0; }
.app-detcord .dc-main li, .app-detcord .dc-main td { overflow-wrap: anywhere; }

/* launch pad */
.dc-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 0 8px; }
.dc-kicker { margin: 0 0 8px; font-family: "IBM Plex Mono", var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.dc-hero h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.02; margin: 0 0 14px; }
.dc-hero h1 span { background: linear-gradient(90deg, var(--accent), var(--spark)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-hero .lede { max-width: 620px; color: var(--muted); font-size: 16.5px; line-height: 1.55; }
.dc-promises { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.dc-promises li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text); background: rgba(255, 255, 255, 0.02); }
.dc-promises svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.dc-hero-art { min-height: 200px; }
.dc-hero-art .dc-chamber { width: 100%; height: auto; max-height: 240px; }

/* The sandbox art (detcord/_chamber.html): one 5s loop. 0–30% the scan line
   sweeps the sample; 30–60% what it does reaches processes, registry and
   network in turn; 60–80% the network node calls out; then it all settles. */
.dc-chamber-grid path { stroke: rgba(240, 76, 208, 0.08); stroke-width: 1; fill: none; }
.dc-cell-wall { fill: #160f1d; stroke: #4b3858; stroke-width: 2; animation: dc-cell 5s ease-in-out infinite; }
@keyframes dc-cell { 0%, 32% { stroke: #f04cd0; } 45%, 100% { stroke: #4b3858; } }
.dc-cell-corners { fill: none; stroke: #f04cd0; stroke-width: 2.5; stroke-linecap: round; opacity: 0.85; }
.dc-sample-doc { fill: #241a2c; stroke: #c9b6d8; stroke-width: 2; stroke-linejoin: round; }
.dc-sample-fold, .dc-sample-lines { fill: none; stroke: #c9b6d8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-sample { animation: dc-sample 5s ease-in-out infinite; }
@keyframes dc-sample { 0%, 6% { filter: none; } 18%, 30% { filter: drop-shadow(0 0 8px rgba(240, 76, 208, 0.75)); } 42%, 100% { filter: none; } }
.dc-beam { animation: dc-scan 5s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes dc-scan { 0% { transform: translateY(34px); opacity: 1; } 30% { transform: translateY(196px); opacity: 1; } 31%, 100% { transform: translateY(196px); opacity: 0; } }
.dc-wire { fill: none; stroke: #3a2a44; stroke-width: 2; }
.dc-arc { fill: none; stroke: rgba(255, 176, 32, 0.28); stroke-width: 1.5; stroke-dasharray: 3 4; }
.dc-node { color: #8f7aa3; }
.dc-node rect { fill: #1d1424; stroke: currentColor; stroke-opacity: 0.6; stroke-width: 1.5; }
.dc-node path, .dc-node circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dc-node-proc { animation: dc-node-proc 5s ease-out infinite; }
.dc-node-reg { animation: dc-node-reg 5s ease-out infinite; }
.dc-node-net { animation: dc-node-net 5s ease-out infinite; }
@keyframes dc-node-proc { 0%, 43% { color: #8f7aa3; filter: none; } 46%, 88% { color: #ff8ae6; filter: drop-shadow(0 0 6px #f04cd0); } 96%, 100% { color: #8f7aa3; filter: none; } }
@keyframes dc-node-reg { 0%, 49% { color: #8f7aa3; filter: none; } 52%, 88% { color: #ff8ae6; filter: drop-shadow(0 0 6px #f04cd0); } 96%, 100% { color: #8f7aa3; filter: none; } }
@keyframes dc-node-net { 0%, 59% { color: #8f7aa3; filter: none; } 62%, 88% { color: #ffc95c; filter: drop-shadow(0 0 6px #ffb020); } 96%, 100% { color: #8f7aa3; filter: none; } }
.dc-host { fill: #3a2a44; animation: dc-host 5s ease-out infinite; }
.dc-host-2 { animation-name: dc-host-2; }
@keyframes dc-host { 0%, 75% { fill: #3a2a44; r: 4px; } 77% { fill: #ffb020; r: 6px; } 90% { fill: #ffb020; r: 4px; } 100% { fill: #3a2a44; } }
@keyframes dc-host-2 { 0%, 79% { fill: #3a2a44; r: 4px; } 81% { fill: #ffb020; r: 6px; } 90% { fill: #ffb020; r: 4px; } 100% { fill: #3a2a44; } }
.dc-signals circle { fill: #ffd6f5; opacity: 0; filter: drop-shadow(0 0 4px #f04cd0); }
.dc-signals .dc-signal-out { fill: #ffe2a3; filter: drop-shadow(0 0 4px #ffb020); }
@media (prefers-reduced-motion: reduce) {
  .dc-cell-wall, .dc-sample, .dc-beam, .dc-node-proc, .dc-node-reg, .dc-node-net, .dc-host { animation: none; }
  .dc-beam { transform: translateY(120px); }
  .dc-node { color: #ff8ae6; }
  .dc-host { fill: #ffb020; }
  .dc-signals { display: none; }
}

.dc-launch { margin: 22px 0 34px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(240, 76, 208, 0.05), transparent 120px), var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.dc-tabs { display: flex; border-bottom: 1px solid var(--line); }
.dc-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 14px var(--display); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.dc-tabs button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.dc-tabs button[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--accent); background: rgba(240, 76, 208, 0.06); }
.dc-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.dc-pane { padding: 22px 24px 24px; }
.dc-drop { position: relative; display: grid; place-items: center; min-height: 190px; padding: 22px; border: 1.5px dashed #4a3a58; border-radius: 14px; text-align: center; cursor: pointer; background: repeating-linear-gradient(135deg, rgba(255, 176, 32, 0.025) 0 12px, transparent 12px 24px); transition: border-color 0.15s, background-color 0.15s; }
.dc-drop:hover, .dc-drop.is-over { border-color: var(--accent); background-color: rgba(240, 76, 208, 0.06); }
.dc-drop.is-armed { border-style: solid; border-color: var(--spark); background-color: rgba(255, 176, 32, 0.05); }
.dc-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dc-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.dc-drop-idle, .dc-drop-picked { display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.dc-drop-idle strong, .dc-drop-picked strong { font: 700 19px var(--display); color: var(--heading); }
.dc-drop-idle span { color: var(--muted); font-size: 14px; }
.dc-drop-icon svg { width: 64px; height: 64px; }
.dc-drop-doc { fill: none; stroke: #8f7fa0; stroke-width: 2.2; stroke-linejoin: round; }
.dc-drop-scan { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; animation: dc-scan 2.4s ease-in-out infinite; }
@keyframes dc-scan { 0%, 100% { transform: translateY(-14px); opacity: 0.4; } 50% { transform: translateY(16px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dc-drop-scan { animation: none; } }
.dc-picked-name { word-break: break-all; }
.dc-picked-meta { color: var(--muted); font-size: 13.5px; }
.dc-picked-hash { font-size: 12px; color: var(--spark); word-break: break-all; max-width: 100%; }
.dc-picked-known { pointer-events: auto; position: relative; z-index: 2; font-size: 13.5px; color: var(--text); padding: 6px 12px; border-radius: 8px; background: rgba(240, 76, 208, 0.12); }
.dc-picked-known a { color: var(--accent-hot); }
.dc-url { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1.5px solid #4a3a58; border-radius: 12px; background: var(--ink-soft); }
.dc-url:focus-within { border-color: var(--accent); }
.dc-url svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.5; }
body.console-theme.app-detcord .dc-url input { border: 0; background: transparent; font: 15px "IBM Plex Mono", var(--mono); padding: 10px 6px; box-shadow: none; }
.dc-settings { margin: 16px 0 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-alt); }
.dc-settings > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 16px; cursor: pointer; font: 600 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--heading-2); list-style: none; }
.dc-settings > summary::-webkit-details-marker { display: none; }
.dc-settings > summary::before { content: "▸"; color: var(--accent); transition: transform 0.15s; }
.dc-settings[open] > summary::before { transform: rotate(90deg); }
.dc-settings-sum { font: 500 12.5px "IBM Plex Mono", var(--mono); letter-spacing: 0; text-transform: none; color: var(--spark); }
.dc-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; padding: 4px 16px 14px; }
.dc-settings-grid .field-wide { grid-column: 1 / -1; }
.dc-settings-grid ul { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 4px 0; list-style: none; }
.dc-pane > .field { margin-top: 12px; }
.dc-fire { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.dc-light { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-size: 15px; font-family: var(--display); letter-spacing: 0.04em; }
.dc-light svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.dc-upload { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.dc-upload-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: #3a2a44; overflow: hidden; }
.dc-upload-bar i { position: absolute; inset: 0 auto 0 0; width: var(--done); border-radius: 3px; background: var(--accent); transition: width 0.2s; }
.dc-upload-bar b { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); width: 40%; animation: dc-sheen 1.4s linear infinite; }
@keyframes dc-sheen { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.dc-upload { --done: 0%; }
.dc-upload-text { font: 500 13px "IBM Plex Mono", var(--mono); color: var(--spark); min-width: 150px; }
.dc-form-error { margin: 0; color: var(--bad); font-size: 14px; flex-basis: 100%; }

.dc-recent { margin-bottom: 40px; }
.dc-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-filter { display: flex; gap: 4px; }
.dc-filter a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); text-decoration: none; }
.dc-filter a.is-on { color: var(--heading); border-color: var(--accent); background: var(--accent-soft); }
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dc-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.dc-row:hover { border-color: var(--accent); transform: translateX(2px); }
.dc-row-main { display: grid; gap: 2px; min-width: 0; }
.dc-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "IBM Plex Mono", var(--mono); font-size: 14px; color: var(--heading); }
.dc-row-main span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-row time { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dc-row-dial { --c: var(--accent); width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--score) * 1%), #2b2136 0); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px); }
.dc-v-malicious .dc-row-dial { --c: var(--bad); }
.dc-v-suspicious .dc-row-dial { --c: var(--warn); }
.dc-v-quiet .dc-row-dial { --c: var(--ok); }
.dc-empty { color: var(--muted); }

/* chips */
.dc-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 600 11.5px "IBM Plex Mono", var(--mono); letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.dc-chip-malicious, .dc-chip-bad { color: #ffd0d8; background: var(--bad-soft); border-color: rgba(255, 77, 109, 0.45); }
.dc-chip-suspicious, .dc-chip-warn { color: #ffe0a6; background: var(--warn-soft); border-color: rgba(255, 176, 32, 0.45); }
.dc-chip-quiet, .dc-chip-harmless, .dc-chip-undetected { color: #bff7e4; background: var(--ok-soft); border-color: rgba(46, 230, 168, 0.4); }
.dc-chip-pending, .dc-chip-info { color: #f7c8ee; background: var(--accent-soft); border-color: rgba(240, 76, 208, 0.4); }
.dc-chip-ghost { text-transform: none; font-weight: 500; }

/* the report */
.dc-crumb { margin: 8px 0 14px; font-size: 13px; color: var(--muted); }
.dc-crumb a { color: var(--accent); }
.dc-top { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, rgba(240, 76, 208, 0.07), transparent 40%), var(--paper); box-shadow: var(--shadow); }
.dc-dial { --c: var(--accent); position: relative; width: 150px; height: 150px; }
.dc-dial[data-level="malicious"] { --c: var(--bad); }
.dc-dial[data-level="suspicious"] { --c: var(--warn); }
.dc-dial[data-level="quiet"] { --c: var(--ok); }
.dc-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dc-dial-track { fill: none; stroke: #2b2136; stroke-width: 9; }
.dc-dial-ticks { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 4; stroke-dasharray: 1 3.6; }
.dc-dial-arc { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; stroke-dasharray: calc(var(--score) * 1) 100; transition: stroke-dasharray 1s cubic-bezier(0.2, 0.8, 0.2, 1), stroke 0.4s; filter: drop-shadow(0 0 8px var(--c)); }
.dc-dial[data-level="pending"] .dc-dial-arc { animation: dc-pending 1.6s ease-in-out infinite; }
@keyframes dc-pending { 50% { opacity: 0.45; } }
.dc-dial-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dc-dial-score { font: 800 40px/1 var(--display); color: var(--heading); }
.dc-dial-label { margin-top: 4px; font: 600 11.5px "IBM Plex Mono", var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.dc-id { min-width: 0; }
.dc-id-kind { display: flex; gap: 10px; align-items: baseline; margin: 0 0 4px; font: 600 12px "IBM Plex Mono", var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.dc-id-type { color: var(--muted); letter-spacing: 0.02em; text-transform: none; font-weight: 500; }
body.console-theme.app-detcord .dc-id-name { margin: 0 0 6px; font-size: clamp(20px, 2.4vw, 28px); word-break: break-all; }
.dc-hash { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.dc-hash code { font-size: 12.5px; color: var(--spark); word-break: break-all; }
.dc-copy { padding: 2px 9px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font: 500 11.5px var(--sans); cursor: pointer; white-space: nowrap; }
.dc-copy:hover { color: var(--heading); border-color: var(--accent); }
.dc-copy.is-done { color: var(--ok); border-color: var(--ok); }
.dc-meta, .dc-opts, .dc-tags { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.dc-meta-client { color: var(--heading-2); font-weight: 600; }
.dc-opts { margin-top: 8px; gap: 6px; }
.dc-opts li { padding: 2px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); font-size: 12px; }
.dc-tags { margin-top: 8px; gap: 6px; }
.dc-tags li { padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(240, 76, 208, 0.35); color: #f7c8ee; font: 500 11.5px "IBM Plex Mono", var(--mono); }
.dc-actions { display: grid; gap: 8px; justify-items: end; align-self: start; }
.dc-actions form { margin: 0; }
.dc-keep { margin: 0; font-size: 12px; color: var(--muted); text-align: right; max-width: 200px; }

.dc-stages { --at: 0; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin: 18px 0; padding: 0 0 0; list-style: none; }
.dc-stages li[data-stage] { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding-top: 0; font: 600 11.5px "IBM Plex Mono", var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dc-stages li[data-stage]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid #4a3a58; transition: all 0.3s; }
.dc-stages li.is-done { color: var(--text); }
.dc-stages li.is-done::before { background: var(--accent); border-color: var(--accent); }
.dc-stages li.is-now { color: var(--spark); }
.dc-stages li.is-now::before { background: var(--spark); border-color: var(--spark); box-shadow: 0 0 0 5px rgba(255, 176, 32, 0.2), 0 0 18px var(--spark); animation: dc-throb 1.2s ease-in-out infinite; }
@keyframes dc-throb { 50% { box-shadow: 0 0 0 9px rgba(255, 176, 32, 0.06), 0 0 26px var(--spark); } }
.dc-stages-track { position: absolute; z-index: 0; top: 6px; left: calc(100% / 12); right: calc(100% / 12); height: 3px; border-radius: 2px; background: #3a2a44; }
.dc-stages-track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--at) / 5 * 100%); border-radius: 2px; background: var(--accent); transition: width 0.8s ease; box-shadow: 0 0 10px rgba(240, 76, 208, 0.6); }
.dc-stages-track b { position: absolute; top: 50%; left: calc(var(--at) / 5 * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px var(--accent); transition: left 0.8s ease; animation: dc-pulse 1.6s ease-in-out infinite; }
@keyframes dc-pulse { 50% { box-shadow: 0 0 4px 1px var(--accent); } }
.dc-stages[data-stage="done"] .dc-stages-track b, .dc-stages.is-failed .dc-stages-track b { display: none; }
.dc-stages[data-stage="done"] li[data-stage]::before { background: var(--accent); border-color: var(--accent); }
.dc-stages.is-failed .dc-stages-track i { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { .dc-stages li.is-now::before, .dc-stages-track b, .dc-upload-bar b { animation: none; } }
.dc-failed { margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(255, 77, 109, 0.5); border-radius: 12px; background: var(--bad-soft); color: #ffd0d8; }

.dc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.dc-main { display: grid; gap: 16px; min-width: 0; }
.dc-card { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); min-width: 0; }
.dc-card.is-new, .dc-banner.is-new { animation: dc-arrive 0.9s ease-out; }
@keyframes dc-arrive { 0% { opacity: 0; transform: translateY(10px); box-shadow: 0 0 0 1px var(--accent), 0 0 40px -6px var(--accent); } 60% { opacity: 1; box-shadow: 0 0 0 1px var(--accent), 0 0 30px -8px var(--accent); } 100% { transform: none; } }
.dc-count { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: #f7c8ee; font: 600 11.5px "IBM Plex Mono", var(--mono); letter-spacing: 0; text-transform: none; }
.dc-count:empty { display: none; }
.dc-hint, .dc-muted { color: var(--muted); font-size: 13px; }
.dc-hint { margin: -6px 0 12px; }
.dc-waiting { color: var(--muted); font-style: italic; }
.dc-waiting::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--spark); animation: dc-throb 1.2s ease-in-out infinite; }
.dc-link { font-size: 12.5px; color: var(--accent-hot); white-space: nowrap; }
.dc-wrap { overflow-wrap: anywhere; font-size: 12.5px; }

.dc-reasons { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dc-reason { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 10px; border-left: 3px solid var(--line); background: rgba(255, 255, 255, 0.02); font-size: 14.5px; }
.dc-reason-weight { flex: 0 0 auto; min-width: 34px; font: 700 12px "IBM Plex Mono", var(--mono); }
.dc-tone-bad { border-left-color: var(--bad); }
.dc-tone-bad .dc-reason-weight { color: var(--bad); }
.dc-tone-warn { border-left-color: var(--warn); }
.dc-tone-warn .dc-reason-weight { color: var(--warn); }
.dc-tone-info { border-left-color: var(--accent); }
.dc-tone-good { border-left-color: var(--ok); }

.dc-readout { border-color: rgba(240, 76, 208, 0.45); background: linear-gradient(135deg, rgba(240, 76, 208, 0.10), transparent 50%), var(--paper); }
.dc-glean-mark { width: 14px; height: 14px; border-radius: 4px; background: conic-gradient(var(--accent), var(--spark), var(--accent)); }
.dc-readout-headline { margin: 0 0 8px; font: 700 21px/1.25 var(--display); color: var(--heading); }
.dc-readout-chips { display: flex; gap: 6px; margin-bottom: 10px; }
.dc-readout-summary { margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.dc-readout-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.dc-readout ul { margin: 0; padding-left: 18px; line-height: 1.55; font-size: 14px; }
.dc-checks li::marker { content: "☐  "; color: var(--spark); }
.dc-timeline { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dc-timeline li { counter-increment: step; position: relative; display: grid; gap: 3px; padding-left: 36px; font-size: 14px; }
.dc-timeline li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hot); font: 700 12px var(--display); }
.dc-timeline code { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.dc-hunts { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.dc-hunts li { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.dc-hunts li span { grid-column: 1 / -1; color: var(--muted); }
.dc-tid { font: 600 12px "IBM Plex Mono", var(--mono); color: var(--accent-hot); }
.dc-caveats { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.dc-thinking { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.dc-thinking i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dc-dots 1.2s ease-in-out infinite; }
.dc-thinking i:nth-child(2) { animation-delay: 0.15s; }
.dc-thinking i:nth-child(3) { animation-delay: 0.3s; margin-right: 6px; }
@keyframes dc-dots { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.dc-banner { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--paper); font-size: 14px; }
.dc-banner a { color: var(--accent-hot); }
.dc-banner-bad { border-left-color: var(--bad); background: linear-gradient(90deg, var(--bad-soft), transparent 60%), var(--paper); }
.dc-banner-new { border-left-color: var(--ok); }

.dc-engines { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.dc-engines-num strong { font: 800 40px/1 var(--display); color: var(--heading); }
.dc-engines-num span { display: block; font-size: 12.5px; color: var(--muted); }
.dc-meter { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #2b2136; gap: 2px; }
.dc-meter i { min-width: 3px; }
.dc-meter-malicious { background: var(--bad); }
.dc-meter-suspicious { background: var(--warn); }
.dc-meter-undetected, .dc-meter-harmless { background: rgba(46, 230, 168, 0.55); }
.dc-meter-type-unsupported, .dc-meter-timeout, .dc-meter-failure { background: #4a3a58; }
.dc-engines-bar p { margin: 6px 0 0; }
.dc-hits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dc-hits details { flex-basis: 100%; }
.dc-hit { padding: 3px 10px; border-radius: 8px; border-left: 3px solid; background: rgba(255, 255, 255, 0.03); font: 12.5px "IBM Plex Mono", var(--mono); }
.dc-sv { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dc-sv li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border-left: 3px solid; background: rgba(255, 255, 255, 0.02); }
.dc-config { margin-top: 16px; padding: 4px 14px 12px; border-radius: 12px; border: 1px solid rgba(255, 77, 109, 0.4); background: var(--bad-soft); }
.dc-config em { font-style: normal; color: #ffd0d8; text-transform: none; letter-spacing: 0; font-size: 15px; }
.dc-config-mark { color: var(--bad); }
.dc-sigma { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dc-sigma li { padding: 10px 14px; border-radius: 10px; border-left: 3px solid; background: rgba(255, 255, 255, 0.02); }
.dc-sigma-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-sigma p { margin: 6px 0 0; font-size: 13.5px; }
.dc-match { margin: 8px 0 0; padding: 8px 10px; max-height: 140px; overflow: auto; border-radius: 8px; background: var(--ink); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-plain { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.dc-plain.dc-mono { list-style: none; padding: 0; overflow-wrap: anywhere; font-size: 12.5px; }

.dc-attack-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.dc-tactic { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); min-height: 90px; opacity: 0.55; }
.dc-tactic.is-lit { opacity: 1; border-color: rgba(240, 76, 208, 0.35); animation: dc-lit 0.6s ease-out both; animation-delay: calc(var(--i) * 60ms); }
@keyframes dc-lit { from { opacity: 0; transform: translateY(6px); } }
.dc-tactic-head { display: flex; justify-content: space-between; gap: 6px; font: 600 11px "IBM Plex Mono", var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dc-tactic.is-lit .dc-tactic-head { color: var(--heading-2); }
.dc-tactic-head b { color: var(--accent-hot); }
.dc-tech { border-radius: 8px; border-left: 3px solid #4a3a58; background: var(--ink-soft); font-size: 12.5px; }
.dc-tech summary { display: grid; gap: 2px; padding: 6px 8px; cursor: pointer; list-style: none; }
.dc-tech summary::-webkit-details-marker { display: none; }
.dc-tech summary code { font-size: 11.5px; color: var(--accent-hot); }
.dc-tech-body { padding: 0 8px 8px; }
.dc-tech-body ul { margin: 0 0 6px; padding-left: 16px; color: var(--text); }
.dc-sev-high { border-left-color: var(--bad); background: linear-gradient(90deg, var(--bad-soft), transparent), var(--ink-soft); }
.dc-sev-medium { border-left-color: var(--warn); }
.dc-sev-low { border-left-color: var(--accent); }

.dc-map { position: relative; margin: 0 -6px 8px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(240, 76, 208, 0.06), transparent 70%), var(--ink); border: 1px solid var(--line); }
.dc-map-svg { display: block; width: 100%; height: auto; }
.dc-lands path { fill: #1f1828; stroke: #2f2540; stroke-width: 0.6; }
.dc-lands path.is-hit { fill: rgba(240, 76, 208, 0.28); stroke: rgba(240, 76, 208, 0.7); }
.dc-lands path.is-bad { fill: rgba(255, 77, 109, 0.32); stroke: rgba(255, 77, 109, 0.8); }
.dc-arc { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.85; animation: dc-draw 1.4s ease-out forwards; animation-delay: var(--d); filter: drop-shadow(0 0 3px var(--accent)); }
.dc-arc.is-bad { stroke: var(--bad); filter: drop-shadow(0 0 3px var(--bad)); }
@keyframes dc-draw { to { stroke-dashoffset: 0; } }
.dc-bolt { fill: #fff; filter: drop-shadow(0 0 4px var(--spark)); }
.dc-bolt.is-bad { filter: drop-shadow(0 0 4px var(--bad)); }
.dc-pin { fill: var(--accent-hot); }
.dc-hit.is-bad .dc-pin { fill: var(--bad); }
.dc-ping { fill: none; stroke: var(--accent); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: dc-ping 2s ease-out infinite; animation-delay: var(--d); }
.dc-hit.is-bad .dc-ping { stroke: var(--bad); }
@keyframes dc-ping { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.dc-map-label { fill: var(--heading); font: 600 11px "IBM Plex Mono", var(--mono); paint-order: stroke; stroke: var(--ink); stroke-width: 3px; }
.dc-origin-core { fill: var(--spark); }
.dc-origin-ring { fill: none; stroke: var(--spark); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: dc-ping 1.6s ease-out infinite; }
.dc-map-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 6px 12px 8px; font-size: 11.5px; color: var(--muted); }
.dc-map-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.dc-key-origin::before { background: var(--spark); border-radius: 2px !important; }
.dc-key-hit::before { background: var(--accent-hot); }
.dc-key-bad::before { background: var(--bad); }
@media (prefers-reduced-motion: reduce) {
  .dc-arc { animation: none; stroke-dashoffset: 0; }
  .dc-ping, .dc-origin-ring { animation: none; opacity: 0.5; }
  .dc-tactic.is-lit, .dc-card.is-new { animation: none; }
}

.dc-table-wrap { overflow-x: auto; }
.dc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dc-table th { text-align: left; font: 600 11px "IBM Plex Mono", var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.dc-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); vertical-align: top; overflow-wrap: anywhere; }
.dc-table.dc-mono td { font-family: "IBM Plex Mono", var(--mono); font-size: 12.5px; }
.dc-kv thead { display: none; }
.dc-kv td:first-child { width: 190px; color: var(--muted); white-space: nowrap; }
.dc-row-bad td { color: #ffd0d8; background: rgba(255, 77, 109, 0.06); }
.dc-hashcell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-hashcell code { overflow-wrap: anywhere; font-size: 12.5px; }

.dc-tree, .dc-tree ul { list-style: none; margin: 0; padding: 0; }
.dc-tree ul { margin-left: 14px; padding-left: 14px; border-left: 1px dashed #4a3a58; }
.dc-tree li { position: relative; padding: 3px 0; animation: dc-lit 0.4s ease-out both; animation-delay: calc(var(--i) * 40ms); }
.dc-tree ul > li::before { content: ""; position: absolute; left: -14px; top: 15px; width: 10px; border-top: 1px dashed #4a3a58; }
.dc-proc { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; border-radius: 8px; background: var(--ink-soft); }
.dc-proc code { font-size: 12.5px; overflow-wrap: anywhere; }
.dc-pid { flex: 0 0 auto; font: 600 11px "IBM Plex Mono", var(--mono); color: var(--muted); }
.dc-tree li.is-hot > .dc-proc { background: linear-gradient(90deg, rgba(255, 176, 32, 0.12), var(--ink-soft)); box-shadow: inset 2px 0 var(--warn); }
.dc-hot { flex: 0 0 auto; padding: 0 6px; border-radius: 4px; background: var(--warn-soft); color: var(--warn); font: 600 10.5px "IBM Plex Mono", var(--mono); text-transform: uppercase; }
.dc-cmds { margin: 0; padding-left: 26px; display: grid; gap: 4px; }
.dc-cmds code { font-size: 12.5px; overflow-wrap: anywhere; }
.dc-cmds li.is-hot code { color: #ffe0a6; }
.dc-cmds li.is-hot::marker { color: var(--warn); }

.dc-fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 20px; }
.dc-fs-col.is-key h3 { color: var(--spark); }
.dc-paths { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.dc-paths code { font-size: 12px; overflow-wrap: anywhere; }
.dc-more { margin-top: 10px; }
.dc-more > summary { cursor: pointer; color: var(--accent-hot); font-size: 13px; }

.dc-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dc-lane { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-top: 3px solid var(--ok); background: var(--ink-soft); animation: dc-lit 0.5s ease-out both; }
.dc-lane.is-bad { border-top-color: var(--bad); }
.dc-lane.is-warn { border-top-color: var(--warn); }
.dc-lane-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dc-lane-head strong { font-family: var(--display); }
.dc-lane-head span { font-size: 11.5px; }
.dc-lane-verdict { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.dc-lane p { margin: 4px 0 0; }
.dc-lane-tags { font: 11.5px "IBM Plex Mono", var(--mono); color: var(--muted); }
.dc-lane-dl { display: flex; gap: 6px; }

.dc-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dc-bars li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; border-radius: 6px; font-size: 13px; overflow: hidden; background: var(--ink-soft); }
.dc-bars li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%); background: var(--accent-soft); }
.dc-bars span, .dc-bars b { position: relative; }
.dc-exts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.dc-exts li { position: relative; display: flex; justify-content: space-between; padding: 3px 8px; font: 12px "IBM Plex Mono", var(--mono); border-radius: 6px; overflow: hidden; background: var(--ink-soft); }
.dc-exts li::before { content: ""; position: absolute; inset: auto auto 0 0; height: 2px; width: calc(var(--w) * 1%); background: linear-gradient(90deg, var(--accent), var(--spark)); }

.dc-ioc-group + .dc-ioc-group { margin-top: 6px; }
.dc-ioc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-ioc-head h3 { margin-right: auto; }
.dc-iocs-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3px 16px; }
.dc-iocs-list code { font-size: 12px; overflow-wrap: anywhere; }
.dc-iocs-list details { grid-column: 1 / -1; }

.dc-feed { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(240, 76, 208, 0.05), transparent 100px), var(--ink-soft); }
.dc-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dc-feed.is-live .dc-live-dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: dc-throb 1.2s infinite; }
.dc-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font: 12.5px/1.45 "IBM Plex Mono", var(--mono); }
.dc-ev { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 5px 6px; border-radius: 6px; border-left: 2px solid transparent; overflow-wrap: anywhere; }
.dc-ev time { color: var(--muted); font-size: 11px; padding-top: 1px; }
.dc-ev.dc-tone-bad { color: #ffd0d8; border-left-color: var(--bad); background: rgba(255, 77, 109, 0.06); }
.dc-ev.dc-tone-warn { color: #ffe0a6; border-left-color: var(--warn); }
.dc-ev.dc-tone-good { color: #bff7e4; border-left-color: var(--ok); }
.dc-ev.is-new { animation: dc-type 0.6s ease-out; }
@keyframes dc-type { from { opacity: 0; transform: translateX(-8px); background: rgba(240, 76, 208, 0.18); } }

@media (max-width: 1100px) {
  .dc-layout { grid-template-columns: minmax(0, 1fr); }
  .dc-feed { position: static; max-height: 320px; order: -1; }
  .dc-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dc-hero { grid-template-columns: minmax(0, 1fr); }
  .dc-hero-art { display: none; }
  .dc-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .dc-meta, .dc-opts, .dc-tags, .dc-hash { justify-content: center; }
  .dc-actions { justify-items: center; grid-auto-flow: column; }
  .dc-keep { text-align: center; }
  .dc-stages li[data-stage] { font-size: 9.5px; letter-spacing: 0.02em; }
  .dc-settings-grid, .dc-readout-cols { grid-template-columns: minmax(0, 1fr); }
  .dc-row { grid-template-columns: 30px minmax(0, 1fr); }
  .dc-row .dc-chip, .dc-row time { grid-column: 2; justify-self: start; }
  .dc-pane { padding: 16px; }
}

/* DetCord tile: the sandbox on the home page */
.belt-detcord {
  --t-bg: #0d0911;
  --t-line: #2b2136;
  --t-text: #fbf7ff;
  --t-muted: #a596b4;
  --t-accent: #f04cd0;
  --t-font: "Oxanium", var(--sans);
}
.belt-detcord h2 { font-weight: 800; letter-spacing: 0.01em; }
.belt-detcord:hover .belt-go { color: #1a0716; }
.art-detcord { height: 100%; display: grid; place-items: center; padding: 8px 14px; background: radial-gradient(ellipse at 80% 50%, rgba(255, 176, 32, 0.10), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(240, 76, 208, 0.12), transparent 60%); }
.art-detcord .dc-chamber { width: 100%; height: 100%; }

.dc-gti-call { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; }
.dc-gti-label { font: 600 11px "IBM Plex Mono", var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dc-gti-differs { flex-basis: 100%; color: var(--warn); font-size: 12.5px; }
.dc-sigs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dc-sig { padding: 5px 10px; border-radius: 8px; border-left: 3px solid #4a3a58; background: rgba(255, 255, 255, 0.02); font-size: 13.5px; }
.dc-sig.dc-sev-high { border-left-color: var(--bad); }
.dc-sig.dc-sev-medium { border-left-color: var(--warn); }
.dc-mbc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.dc-lane.is-busy { border-top-color: var(--spark); background: linear-gradient(90deg, rgba(255, 176, 32, 0.06), transparent 60%), var(--ink-soft); }
.dc-lane.is-off { border-top-color: #4a3a58; opacity: 0.7; }
.dc-lane-progress { height: 4px; margin: 8px 0 2px; border-radius: 2px; background: #3a2a44; overflow: hidden; }
.dc-lane-progress i { display: block; height: 100%; width: calc(var(--p) * 1%); background: linear-gradient(90deg, var(--accent), var(--spark)); transition: width 0.8s ease; }