/* Crossen Admin — application stylesheet, ported from the approved design bundle
   (backend/design-admin/_shared/admin.css). Instrument-panel direction: graphite,
   hairlines, mono data, one steel-blue accent. Deliberately NOT the product world. */

@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/ibm-plex-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
}

:root {
  /* ---- dark (default admin world) ---- */
  --bg-page:      #131417;
  --bg-panel:     #1a1c21;
  --bg-raised:    #21242a;
  --bg-inset:     #0e0f12;
  --line:         #2a2d34;
  --line-strong:  #3a3e47;
  --text-1:       #e7e9ed;
  --text-2:       #a6abb5;
  --text-3:       #686d77;
  --accent:       #5b8dd6;
  --accent-hi:    #7ea8e6;
  --accent-dim:   rgba(91,141,214,.13);
  --ok:           #46b380;
  --ok-dim:       rgba(70,179,128,.12);
  --warn:         #d9a23c;
  --warn-dim:     rgba(217,162,60,.12);
  --danger:       #d0544f;
  --danger-dim:   rgba(208,84,79,.12);
  --test:         #3fb0ad;
  --test-dim:     rgba(63,176,173,.12);
  --env-local:    #6a7079;
  --env-dev:      #2f6fd0;
  --env-prod:     #d0544f;

  --font-ui:   'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --t-title: 20px;
  --t-h:     15px;
  --t-body:  13.5px;
  --t-sm:    12.5px;
  --t-micro: 11px;

  --r: 6px;
  --r-lg: 10px;
}

.theme-light {
  --bg-page:      #f4f5f7;
  --bg-panel:     #ffffff;
  --bg-raised:    #f8f9fb;
  --bg-inset:     #eceef1;
  --line:         #e0e3e8;
  --line-strong:  #c9cdd5;
  --text-1:       #1c1f24;
  --text-2:       #565c66;
  --text-3:       #8b919c;
  --accent:       #2f6bbf;
  --accent-hi:    #245aa6;
  --accent-dim:   rgba(47,107,191,.10);
  --ok:           #1f8a5f;
  --ok-dim:       rgba(31,138,95,.10);
  --warn:         #a3711a;
  --warn-dim:     rgba(163,113,26,.10);
  --danger:       #b23a36;
  --danger-dim:   rgba(178,58,54,.10);
  --test:         #1f8a87;
  --test-dim:     rgba(31,138,135,.10);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background:var(--bg-page);
  color:var(--text-1);
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- chips ---------- */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--text-2); background:var(--bg-raised);
}
.chip--accent { color:var(--accent-hi); border-color:var(--accent); background:var(--accent-dim); }
.chip--ok     { color:var(--ok);     border-color:var(--ok);     background:var(--ok-dim); }
.chip--warn   { color:var(--warn);   border-color:var(--warn);   background:var(--warn-dim); }
.chip--danger { color:var(--danger); border-color:var(--danger); background:var(--danger-dim); }
.chip--test   { color:var(--test);   border-color:var(--test);   background:var(--test-dim); }

/* ---------- panels ---------- */
.panel {
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg);
}
.panel-h {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--line);
  font-size:var(--t-micro); font-family:var(--font-mono); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
}
.panel-h .spacer { flex:1; }
.panel + .panel { margin-top:16px; }

/* ---------- app shell ---------- */
.shell {
  display:grid;
  grid-template-columns:216px 1fr;
  grid-template-rows:auto 1fr;
  min-height:100vh;
}
.side {
  background:var(--bg-inset); border-right:1px solid var(--line);
  padding:16px 0; display:flex; flex-direction:column;
}
.brand {
  font-family:var(--font-mono); font-weight:600; font-size:13px; letter-spacing:.14em;
  padding:2px 16px 12px; color:var(--text-1);
}
.brand b { color:var(--accent-hi); font-weight:600; }
.nav-sec {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); padding:14px 16px 6px;
}
.nav-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 16px; font-size:var(--t-sm); color:var(--text-2); text-decoration:none;
  border-left:2px solid transparent;
}
.nav-item:hover { color:var(--text-1); }
.nav-item.is-active {
  color:var(--text-1); background:var(--accent-dim); border-left-color:var(--accent);
}
.side .foot { margin-top:auto; padding:12px 16px 0; border-top:1px solid var(--line); }
.main { background:var(--bg-page); padding:20px 24px; }

/* env banner */
.envbar {
  display:flex; align-items:center; gap:10px;
  padding:7px 24px; font-family:var(--font-mono); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line);
  background:var(--bg-inset); color:var(--text-2); grid-column:1 / -1;
}
.envbar .dot { width:8px; height:8px; border-radius:50%; }
.env-local .dot { background:var(--env-local); }
.env-dev   .dot { background:var(--env-dev); }
.env-prod  .dot { background:var(--env-prod); }
.env-prod  { color:var(--danger); border-bottom-color:var(--danger); }

/* ---------- typography helpers ---------- */
h1.page { font-size:var(--t-title); font-weight:600; letter-spacing:-.01em; margin-bottom:14px; }
h2.sec { font-size:var(--t-h); font-weight:600; margin-bottom:10px; }
.mono  { font-family:var(--font-mono); font-size:var(--t-sm); }
.muted { color:var(--text-3); }
.id    { font-family:var(--font-mono); font-size:var(--t-sm); color:var(--text-2); }

/* ---------- tables (the workhorse) ---------- */
table.data { width:100%; border-collapse:collapse; font-size:var(--t-sm); }
table.data th {
  text-align:left; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  padding:8px 14px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
table.data td {
  padding:7px 14px; border-bottom:1px solid var(--line); vertical-align:middle;
}
table.data tr:last-child td { border-bottom:none; }
table.data tr.is-live td { background:var(--ok-dim); }
table.data tr.is-spike td { background:var(--warn-dim); }
td.num { font-family:var(--font-mono); text-align:right; white-space:nowrap; }
table.data td.mono { white-space:nowrap; }

/* ---------- status ---------- */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--text-3); }
.dot--ok { background:var(--ok); box-shadow:0 0 0 3px var(--ok-dim); }
.dot--live { background:var(--ok); animation:pulse 2s ease-in-out infinite; }
.dot--warn { background:var(--warn); }
.dot--danger { background:var(--danger); }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 var(--ok-dim);} 50% { box-shadow:0 0 0 5px var(--ok-dim);} }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-ui); font-size:var(--t-sm); font-weight:600;
  padding:6px 14px; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--bg-raised); color:var(--text-1);
}
.btn--primary { background:var(--accent); border-color:var(--accent); color:#0d1420; }
.btn--danger  { background:transparent; border-color:var(--danger); color:var(--danger); }
.btn--ghost   { background:transparent; border-color:transparent; color:var(--accent-hi); }
.btn--sm { padding:3px 10px; font-size:var(--t-micro); }
.btn[disabled] { opacity:.45; cursor:default; }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:5px; }
.field label {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); font-weight:600;
}
.input {
  font-family:var(--font-mono); font-size:var(--t-sm); color:var(--text-1);
  background:var(--bg-inset); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:7px 10px; min-width:0;
}
.input:focus { outline:none; border-color:var(--accent); }
.input::placeholder { color:var(--text-3); }
.hint { font-size:var(--t-micro); color:var(--text-3); }

/* ---------- key-value ---------- */
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 18px; font-size:var(--t-sm); }
.kv dt { font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.08em;
         text-transform:uppercase; color:var(--text-3); padding-top:2px; }
.kv dd { color:var(--text-1); }

/* ---------- sign-in gate ---------- */
.gate {
  min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(600px 300px at 50% 30%, rgba(91,141,214,.06), transparent 70%),
    var(--bg-page);
}
.gate-card {
  width:360px; background:var(--bg-panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 28px; text-align:center;
}
.gate-brand {
  font-family:var(--font-mono); font-weight:600; font-size:14px; letter-spacing:.18em;
}
.gate-brand b { color:var(--accent-hi); font-weight:600; }
.gate-env { margin-top:8px; }
.gate .btn { width:100%; justify-content:center; margin-top:26px; padding:10px; font-size:14px; }
.keyicon {
  display:inline-block; width:14px; height:14px; border:2px solid currentColor;
  border-radius:50%; position:relative;
}
.keyicon::after {
  content:""; position:absolute; left:10px; top:4px; width:10px; height:2px;
  background:currentColor;
}
.gate-hint { margin-top:14px; font-size:var(--t-micro); color:var(--text-3); }
.gate-error { margin-top:14px; font-size:var(--t-sm); color:var(--danger); display:none; }
.gate-error.is-visible { display:block; }

/* ---------- debug ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stat { background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; }
.stat .v { font-family:var(--font-mono); font-size:24px; font-weight:600; margin-top:2px; }
.stat .l { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.stat .s { font-size:var(--t-micro); color:var(--text-3); margin-top:2px; }
.two { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }
.two--wide { grid-template-columns:1.5fr 1fr; }
.code-reveal {
  background:var(--bg-inset); border:1px dashed var(--accent); border-radius:var(--r);
  padding:12px 14px; text-align:center;
}
.code-reveal .code {
  font-family:var(--font-mono); font-size:26px; font-weight:600; letter-spacing:.3em;
  color:var(--accent-hi);
}
.code-reveal .s { font-size:var(--t-micro); color:var(--text-3); margin-top:4px; }
.rssi {
  display:inline-block; width:52px; height:6px; border-radius:3px; background:var(--bg-inset);
  position:relative; vertical-align:middle;
}
.rssi i { position:absolute; inset:0; border-radius:3px; background:var(--accent); }
.pipeline { display:flex; gap:8px; align-items:center; padding:12px 14px; flex-wrap:wrap; }
.pipeline .chip { text-transform:none; letter-spacing:.02em; }
.feed { font-family:var(--font-mono); font-size:var(--t-sm); }
.feed li { list-style:none; padding:6px 14px; border-bottom:1px solid var(--line); display:flex; gap:10px; }
.feed li:last-child { border-bottom:none; }
.feed .t { color:var(--text-3); flex:none; }

/* ---------- moderation ---------- */
.snapshot {
  background:var(--bg-inset); border-left:2px solid var(--line-strong);
  padding:8px 12px; font-size:var(--t-sm); margin-top:6px;
  border-radius:0 var(--r) var(--r) 0;
}
.snapshot .who { font-family:var(--font-mono); font-size:var(--t-micro); color:var(--text-3); }
.snapshot pre { font-family:var(--font-mono); white-space:pre-wrap; margin-top:4px; }
.actions { display:flex; gap:8px; align-items:center; margin-top:10px; }

/* ---------- registration (invite) card ---------- */
.gate-card--register { width:420px; text-align:left; }
.gate-card--register .gate-brand { text-align:center; font-size:13px; }
.invite-meta { margin:18px 0; }
.gate-card--register .btn { margin-top:18px; }
.steps { counter-reset:s; margin-top:18px; font-size:var(--t-sm); color:var(--text-2); }
.steps li { list-style:none; display:flex; gap:10px; padding:5px 0; }
.steps li::before {
  counter-increment:s; content:counter(s);
  font-family:var(--font-mono); font-size:10px; color:var(--accent-hi);
  border:1px solid var(--accent); border-radius:50%; width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center; flex:none; margin-top:2px;
}