/* Snitch — blind-XSS operator console.
   Left-sidebar app-shell · near-black canvas · one restrained signal-green for live/positive state.
   Fonts: Space Grotesk (wordmark/titles/numerals) · Inter (UI) · JetBrains Mono (payloads/ids/logs). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box}

:root{
  /* base surfaces */
  --bg:#0B0D0F; --surface:#131619; --elevated:#191D21; --panel:#131619;
  --line:#1E2428; --line-soft:#171B1F;
  /* ink */
  --text:#E6E9EC; --muted:#8B949E; --faint:#5C6570; --white:#F3F6F8;
  /* the one accent — live / positive only */
  --accent:#4ADE80; --green:#4ADE80; --accent-ink:#04160C;
  --accent-dim:rgba(74,222,128,.12); --accent-line:rgba(74,222,128,.32);
  --accent-glow:rgba(74,222,128,.14); --accent-focus:rgba(74,222,128,.22);
  --oneshot:0 0 24px rgba(74,222,128,.24);
  /* state */
  --amber:#E0A458; --amber-dim:rgba(224,164,88,.12); --amber-line:rgba(224,164,88,.30);
  --red:#E5484D; --red-dim:rgba(229,72,77,.12); --red-line:rgba(229,72,77,.30);
  --link:#6FB4FF;
  /* type */
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --display:"Space Grotesk",var(--sans);
  /* geometry */
  --sbw:240px; --maxw:1120px; --radius:12px; --radius-sm:8px;
  --hi:inset 0 1px 0 rgba(255,255,255,.04);
}

html,body{margin:0}
body{font-family:var(--sans);font-size:15px;line-height:1.62;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:var(--text);text-decoration:none;transition:color .14s}
a:hover{color:var(--accent)}
p{margin:0 0 14px}
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:600;color:var(--white);margin:0 0 14px;line-height:1.15;letter-spacing:-.015em}
h1{font-size:26px}h2{font-size:21px}h3{font-size:17px}
code,kbd{font-family:var(--mono);font-size:.9em}
code{color:var(--accent)}
kbd{display:inline-block;min-width:1.4em;text-align:center;padding:1px 6px;border-radius:6px;border:1px solid var(--line);
  border-bottom-width:2px;background:var(--elevated);color:var(--muted);font-size:11.5px;line-height:1.5}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.red{color:var(--red)}
.sep-line{border:0;border-top:1px solid var(--line);height:0;overflow:hidden;color:transparent;user-select:none;
  margin:26px 0;font-size:0;line-height:0}
.tag{display:inline-flex;align-items:center;gap:5px;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-line);
  border-radius:999px;padding:2px 9px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.04em;
  text-transform:lowercase;margin-left:8px;vertical-align:middle}

/* blinking green terminal cursor — beside every live state */
.cursor{display:inline-block;width:8px;height:15px;background:var(--accent);border-radius:1px;vertical-align:-2px;
  margin-left:3px;animation:blink 1.1s steps(1) infinite;box-shadow:0 0 8px var(--accent-glow)}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ===================================================================== */
/* App shell: fixed left sidebar + offset content                        */
/* ===================================================================== */
body.has-shell{padding-left:var(--sbw)}

.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sbw);background:var(--bg);
  border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:100;padding:18px 14px 14px}

.sidebar .brand{display:flex;align-items:center;padding:4px 10px 2px;font-family:var(--mono);font-weight:500;
  font-size:19px;letter-spacing:.01em;color:var(--white)}
.sidebar .brand .mark{color:var(--accent);margin-right:9px;flex:0 0 auto}

.sidebar .listener{display:flex;align-items:center;gap:8px;margin:12px 10px 16px;padding:7px 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--muted);
  box-shadow:var(--hi)}
.sidebar .listener .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 var(--accent);animation:pulse 2s ease-out infinite}
.sidebar .listener .lv{color:var(--accent);font-weight:500}
.sidebar .listener .cnt{margin-left:auto;color:var(--text);font-weight:500}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.sidebar .navsection{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:16px 12px 7px}
.sidebar .navsection:first-child{padding-top:4px}
.sidebar .navlink{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);
  color:var(--muted);font-weight:500;font-size:14px;position:relative;transition:.13s}
.sidebar .navlink svg{width:16px;height:16px;flex:0 0 auto;stroke-width:1.5}
.sidebar .navlink:hover{background:var(--line-soft);color:var(--text)}
.sidebar .navlink.active{background:var(--accent-dim);color:var(--accent)}
.sidebar .navlink.active::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:2px;
  border-radius:0 2px 2px 0;background:var(--accent)}

.sidebar .side-foot{border-top:1px solid var(--line);padding-top:12px;margin-top:8px;display:flex;flex-direction:column;gap:11px}
.sidebar .quota .qhead{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.03em;margin-bottom:6px}
.sidebar .quota .qhead b{color:var(--text);font-weight:500}
.sidebar .collector{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:.13s;box-shadow:var(--hi)}
.sidebar .collector:hover{border-color:var(--accent-line)}
.sidebar .collector .cid{font-family:var(--mono);font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;min-width:0}
.sidebar .collector .cl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-family:var(--mono)}
.sidebar .collector svg{width:14px;height:14px;color:var(--muted);flex:0 0 auto}
.sidebar .userbox{display:flex;align-items:center;gap:10px;padding:2px 4px}
.sidebar .userbox .av{width:32px;height:32px;border-radius:9px;background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--display);flex:0 0 auto}
.sidebar .userbox .who{flex:1;min-width:0}
.sidebar .userbox .who b{display:block;color:var(--white);font-size:13px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sidebar .userbox .who span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sidebar .userbox .lo{color:var(--muted);display:flex;padding:6px;border-radius:7px}
.sidebar .userbox .lo:hover{color:var(--red);background:var(--red-dim)}
.sidebar .userbox .lo svg{width:16px;height:16px;stroke-width:1.6}

/* ===================================================================== */
/* Page header + layout                                                  */
/* ===================================================================== */
.page-title{max-width:var(--maxw);margin:0 auto;padding:26px 32px 0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-title h1{font-size:24px;margin:0}
.page-title .sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.container{max-width:var(--maxw);margin:0 auto;padding:24px 32px 64px}
.container-narrow{max-width:820px}
.row{display:flex;flex-wrap:wrap;gap:24px}
.col-side{flex:0 0 27%;min-width:220px}
.col-main{flex:1;min-width:300px}

/* ===================================================================== */
/* Buttons — flat, one green for the positive/primary action             */
/* ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--elevated);color:var(--text);font-family:var(--sans);font-weight:500;
  font-size:13.5px;cursor:pointer;transition:.13s;line-height:1;box-shadow:var(--hi)}
.btn:hover{border-color:#2C3540;background:#1F252B;color:var(--white)}
.btn svg{width:15px;height:15px}
.btn-block{display:flex;width:100%;padding:12px}
.btn-mini{padding:6px 11px;font-size:12.5px}
.btn-accent{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:600}
.btn-accent:hover{background:#63E699;color:var(--accent-ink)}
.btn-gold{background:transparent;border-color:var(--amber-line);color:var(--amber);font-weight:600}
.btn-gold:hover{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* copy-success one-shot: morph to green + outer glow */
.btn.copied{background:var(--accent)!important;border-color:transparent!important;color:var(--accent-ink)!important;
  box-shadow:var(--oneshot)}

/* ===================================================================== */
/* Panels / cards / forms                                                */
/* ===================================================================== */
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--hi)}
.card{padding:20px}
label{display:block;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
input,textarea,select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--white);font-family:var(--sans);font-size:14px;padding:10px 12px;outline:none;transition:border-color .14s,box-shadow .14s}
input:focus,textarea:focus,select:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-focus)}
input::placeholder,textarea::placeholder{color:#4C555F}
textarea{resize:vertical;min-height:76px;font-family:var(--mono);font-size:13px;line-height:1.6}
.field{margin-bottom:15px}
.row-inline{display:flex;gap:12px;flex-wrap:wrap}.row-inline>*{flex:1;min-width:120px}
.hint{font-size:13px;color:var(--muted);margin-top:6px}
.hint a{color:var(--accent)}

/* ===================================================================== */
/* Stat tiles + meter                                                    */
/* ===================================================================== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--hi)}
.stat .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px;
  font-family:var(--sans);font-weight:500}
.stat .k svg{width:14px;height:14px;color:var(--muted);stroke-width:1.5}
.stat .v{font-family:var(--display);font-weight:700;font-size:29px;color:var(--white);margin-top:7px;line-height:1;letter-spacing:-.02em}
.stat .v.live{color:var(--accent)}
.stat .foot{font-size:12px;color:var(--muted);margin-top:7px;font-family:var(--mono)}
.meter{height:6px;background:var(--bg);border-radius:6px;overflow:hidden;margin-top:10px;border:1px solid var(--line)}
.meter>i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .4s ease}

/* ===================================================================== */
/* Verdict + console + kv + payload box                                  */
/* ===================================================================== */
.verdict{font-family:var(--display);font-weight:600;font-size:19px;padding:13px 17px;border-radius:var(--radius);
  margin:0 0 16px;display:flex;align-items:center;gap:12px;letter-spacing:-.01em}
.verdict.true{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-line)}
.verdict.false{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-line)}
.verdict.none{background:var(--elevated);color:var(--muted);border:1px solid var(--line)}
.verdict.err{background:var(--red-dim);color:var(--red);border:1px solid var(--red-line)}

.console{background:#070909;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;font-family:var(--mono);
  font-size:12.5px;line-height:1.75;color:#8FA0A6;max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.console .l-stage{color:var(--link)}
.console .l-ok{color:var(--accent)}
.console .l-warn{color:var(--amber)}
.console .l-err{color:var(--red)}
.console .l-dim{color:#57626A}

.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:14px 0}
.kv dt{color:var(--muted);text-transform:uppercase;font-size:11.5px;letter-spacing:.03em;font-weight:500}
.kv dd{margin:0;color:var(--text);word-break:break-all;font-family:var(--mono);font-size:13px}

.payload-box{font-family:var(--mono);font-size:13px;color:#D3E0DB;background:var(--bg);border:1px solid var(--line);
  border-left:2px solid var(--accent);padding:12px 14px;border-radius:var(--radius-sm);word-break:break-all;line-height:1.55;position:relative}
.payload-box .id{color:var(--accent);font-weight:500}

/* ===================================================================== */
/* Tables — hairline, zebra-free, hover-tint                             */
/* ===================================================================== */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em;font-weight:500;font-family:var(--sans)}
td{color:var(--text);word-break:break-word}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--line-soft)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-family:var(--mono);
  font-size:11px;font-weight:500;border:1px solid transparent}
.badge.true{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-line)}
.badge.false{background:var(--amber-dim);color:var(--amber);border-color:var(--amber-line)}
.badge.none{background:var(--elevated);color:var(--muted);border-color:var(--line)}
.badge.err{background:var(--red-dim);color:var(--red);border-color:var(--red-line)}
.badge.admin{background:#161E24;color:#8FB6C9;border-color:#26333B}

/* vectors / payload cards */
.vec{margin-bottom:18px}
.vec .name{color:var(--white);font-weight:600;font-family:var(--display);font-size:15px}
.vec .desc{font-size:13px;color:var(--muted);display:block;margin:4px 0 8px}

/* pricing */
.pricing{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 18px}
.pkg{flex:1;min-width:160px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-align:center;overflow:hidden;transition:.14s;box-shadow:var(--hi)}
.pkg:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.pkg h3{margin:0;padding:18px 8px 0;font-size:17px}
.pkg .price{display:block;font-family:var(--display);font-weight:700;font-size:36px;color:var(--white);padding:4px 0 10px;letter-spacing:-.02em}
.pkg .price .unit{font-size:18px;vertical-align:top;color:var(--muted)}
.pkg .feat{padding:8px;color:var(--text);font-weight:500;font-size:13.5px}
.pkg .feat .yes{color:var(--accent);margin-right:6px}
.pkg .buy{padding:0 14px 18px}.pkg .buy .btn{width:100%}

/* copy-to-clipboard affordance */
.copyable{cursor:pointer}
.copyable:hover{border-color:var(--accent-line);background:#0E1311}

/* ===================================================================== */
/* Auth (login / signup) — branded split screen, no shell                */
/* ===================================================================== */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth .brandside{position:relative;overflow:hidden;background:var(--bg);border-right:1px solid var(--line);
  padding:48px 52px;display:flex;flex-direction:column;justify-content:space-between}
.auth .brandside::before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 440px at 26% 22%,var(--accent-glow),transparent 62%);pointer-events:none}
.auth .brandside>*{position:relative}
.auth .brandside .logo{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:22px;color:var(--white)}
.auth .brandside .logo .mark{color:var(--accent)}
.auth .brandside h1{font-family:var(--display);font-weight:700;font-size:38px;line-height:1.08;margin:0 0 14px;letter-spacing:-.02em}
.auth .brandside .lead{color:var(--muted);font-size:15.5px;max-width:430px}
.auth .brandside .feat{display:flex;flex-direction:column;gap:13px;margin-top:28px}
.auth .brandside .feat div{display:flex;align-items:center;gap:11px;color:var(--text);font-size:14px}
.auth .brandside .feat svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto;stroke-width:1.6}
.auth .brandside .m017{font-family:var(--mono);font-size:12px;color:var(--faint)}
.auth .formside{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.auth-card{width:100%;max-width:384px}
.auth-card .logo-m{display:none;align-items:center;gap:9px;font-family:var(--mono);font-size:20px;color:var(--white);margin-bottom:22px}
.auth-card .logo-m .mark{color:var(--accent)}
.auth-card h2{font-size:23px;margin-bottom:6px}
.auth-card .sub{color:var(--muted);margin-bottom:22px;font-size:14px}
.err-msg{color:var(--red);font-size:13.5px;min-height:20px;margin:6px 0}
.ok-msg{color:var(--accent);font-size:13.5px;min-height:20px;margin:6px 0}
@media(max-width:820px){
  .auth{grid-template-columns:1fr}
  .auth .brandside{display:none}
  .auth-card .logo-m{display:flex}
}

/* misc */
.keyrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.keyrow .payload-box{flex:1;min-width:200px;margin:0}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}
@media(max-width:960px){.grid2{grid-template-columns:1fr}}

/* ===================================================================== */
/* Command palette (⌘K) — global overlay from app.js                     */
/* ===================================================================== */
.cmdk{position:fixed;inset:0;z-index:9999;background:rgba(6,8,9,.72);display:flex;align-items:flex-start;
  justify-content:center;padding-top:14vh}
.cmdk[hidden]{display:none}
.cmdk .box{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.7),var(--hi)}
.cmdk input{border:0;border-radius:0;border-bottom:1px solid var(--line);background:transparent;padding:15px 18px;font-size:15px}
.cmdk input:focus{box-shadow:none;border-color:var(--line)}
.cmdk ul{list-style:none;margin:0;padding:6px;max-height:340px;overflow:auto}
.cmdk li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--muted);font-size:14px}
.cmdk li svg{width:16px;height:16px;stroke-width:1.5}
.cmdk li.sel,.cmdk li:hover{background:var(--accent-dim);color:var(--accent)}
.cmdk li .rt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}

/* ===================================================================== */
/* Mobile: sidebar collapses to a top strip                              */
/* ===================================================================== */
@media(max-width:860px){
  body.has-shell{padding-left:0;padding-top:54px}
  .sidebar{flex-direction:row;align-items:center;top:0;left:0;right:0;bottom:auto;width:auto;height:54px;
    padding:0 12px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .sidebar .brand{padding:0 8px 0 2px;font-size:18px}
  .sidebar .brand .cursor{display:none}
  .sidebar .listener{margin:0 6px;padding:5px 9px}
  .sidebar .listener .cnt{margin-left:6px}
  .sidebar nav{flex-direction:row;gap:2px;overflow:visible;flex:0 0 auto}
  .sidebar .navlink{padding:8px 10px;white-space:nowrap}
  .sidebar .navlink span{display:none}
  .sidebar .navlink.active::before{display:none}
  .sidebar .navsection{display:none}
  .sidebar .side-foot{flex-direction:row;align-items:center;border:0;margin:0 0 0 auto;padding:0;gap:8px}
  .sidebar .quota,.sidebar .collector,.sidebar .userbox .who{display:none}
  .page-title,.container{padding-left:18px;padding-right:18px}
  .row{flex-direction:column}.col-side{flex:1 1 100%}
}