/* ==========================================================================
   Hayate Console Admin — single stylesheet.
   All UI components live here. Other agents should NOT add component CSS;
   compose with these classes instead. Page-local tweaks go inline-style if
   strictly needed.
   ========================================================================== */

/* --- design tokens ------------------------------------------------------- */
:root {
  --bg-deep:   #07090E;
  --bg:        #0B0E13;
  --surface:   #121620;
  --surface-2: #181E28;
  --border:    #2D3744;
  --text:      #E6ECF3;
  --muted:     #8E99A6;
  --accent:    #00CDFF;   /* cyan */
  --accent-2:  #48F2B9;   /* teal-green */
  --warn:      #FF7182;   /* coral — destructive only */
  --gold:      #F4C95D;   /* warnings / notice */

  --radius:    10px;
  --radius-sm: 6px;
  --border-w:  1px;

  --shadow-1:  0 1px 0 rgba(255,255,255,0.02), 0 6px 18px rgba(0,0,0,0.45);
  --shadow-2:  0 8px 32px rgba(0,0,0,0.55);

  --font-ui:   -apple-system, "Yu Gothic UI", "Hiragino Sans", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --sidebar-w: 240px;
  --topbar-h:  56px;
}

/* --- reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button { font-family: inherit; }

img, svg { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a475a; }

h1, h2, h3, h4 {
  margin: 0 0 12px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.2px;
}
h1 { font-size: 20px; }
h2 { font-size: 17px; color: var(--accent-2); margin: 24px 0 12px; }
h3 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

p { margin: 0 0 12px; }

.muted { color: var(--muted); }
.mono  { font-family: var(--font-mono); font-size: 12.5px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }

/* --- app shell ----------------------------------------------------------- */
body.app {
  background: var(--bg-deep);
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100vh;
}

.sidebar {
  background: var(--bg);
  border-right: var(--border-w) solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: var(--border-w) solid var(--border);
}
.sidebar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--bg-deep);
  font-weight: 800;
  font-size: 17px;
}
.sidebar__name {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 14px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: 8px 8px;
  gap: 2px;
  flex: 1 1 auto;
}
.sidebar__foot {
  padding: 10px 16px 14px;
  border-top: var(--border-w) solid var(--border);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar__env {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  border: var(--border-w) solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav-item:hover {
  color: var(--text);
  background: var(--surface);
}
.nav-item.is-active {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--accent);
  font-size: 15px;
  flex: 0 0 18px;
}
.nav-item__label { flex: 1; }

/* --- main / topbar / content -------------------------------------------- */
.main {
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--border);
  flex: 0 0 var(--topbar-h);
}
.topbar__crumb {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.topbar__spacer { flex: 1; }
.topbar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.topbar__uid {
  font-family: var(--font-mono);
  color: var(--accent-2);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  font-size: 12px;
}
.topbar__logout-form { margin: 0; }

.content {
  padding: 24px 28px 48px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* --- card --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
  margin-bottom: 18px;
}
.card--inset { background: var(--surface-2); }
.card--tight { padding: 12px 14px; }
.card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.card__sub { color: var(--muted); font-size: 12.5px; }

/* --- grid helpers ------------------------------------------------------- */
.grid {
  display: grid;
  gap: 16px;
}
.grid--stats   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid--2col    { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.stat {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: relative;
}
.stat::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.stat--alt::before { background: var(--accent-2); }
.stat--warn::before { background: var(--gold); }
.stat--danger::before { background: var(--warn); }
.stat__label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.stat__value {
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  font-family: var(--font-mono);
}
.stat__sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* --- table -------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.table th,
.table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: var(--border-w) solid var(--border);
  vertical-align: middle;
}
.table th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.04); }
.table tbody tr:hover td { background: rgba(0, 205, 255, 0.05); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.mono,
.table td .mono { font-family: var(--font-mono); font-size: 12.5px; }
.table--compact th, .table--compact td { padding: 6px 10px; }

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

/* --- button ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit;
  line-height: 1.2;
}
.btn:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
}
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg-deep); }

.btn--ok {
  background: var(--surface-2);
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.btn--ok:hover { background: var(--accent-2); color: var(--bg-deep); }

.btn--danger {
  background: var(--surface-2);
  border-color: var(--warn);
  color: var(--warn);
}
.btn--danger:hover { background: var(--warn); color: var(--bg-deep); border-color: var(--warn); }

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.btn--ghost:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }

.btn--block { width: 100%; }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--lg { padding: 11px 18px; font-size: 14px; }

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- forms -------------------------------------------------------------- */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.form-row__label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.form-row__input,
.form-row__select,
.form-row__textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.form-row__input:focus,
.form-row__select:focus,
.form-row__textarea:focus {
  border-color: var(--accent);
  background: var(--surface-2);
}
.form-row__textarea {
  font-family: var(--font-mono);
  min-height: 96px;
  resize: vertical;
}
.form-row--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.form-row__hint { color: var(--muted); font-size: 11px; margin-top: 2px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px;
}

/* --- pills / badges ----------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: var(--border-w) solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.pill--ok      { color: var(--accent-2); border-color: var(--accent-2); }
.pill--info    { color: var(--accent);   border-color: var(--accent); }
.pill--warn    { color: var(--gold);     border-color: var(--gold); }
.pill--danger  { color: var(--warn);     border-color: var(--warn); }
.pill--muted   { color: var(--muted);    border-color: var(--border); }
.pill--filled.pill--ok     { background: var(--accent-2); color: var(--bg-deep); }
.pill--filled.pill--info   { background: var(--accent);   color: var(--bg-deep); }
.pill--filled.pill--warn   { background: var(--gold);     color: var(--bg-deep); }
.pill--filled.pill--danger { background: var(--warn);     color: var(--bg-deep); }

.badge {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- code block --------------------------------------------------------- */
.codeblock {
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 12px;
}

/* --- empty state -------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
  font-style: italic;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-state__title {
  color: var(--text);
  font-style: normal;
  font-size: 14px;
  margin-bottom: 4px;
}

/* --- modal -------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 14, 0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  width: min(520px, 92vw);
  padding: 22px;
}
.modal__title { font-size: 15px; margin-bottom: 6px; }
.modal__body  { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.modal__foot  { display: flex; justify-content: flex-end; gap: 8px; }

/* --- toasts / flash messages ------------------------------------------- */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.toast {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.toast--ok      { border-color: var(--accent-2); color: var(--accent-2); background: rgba(72, 242, 185, 0.05); }
.toast--info    { border-color: var(--accent);   color: var(--accent);   background: rgba(0, 205, 255, 0.05); }
.toast--warn    { border-color: var(--gold);     color: var(--gold);     background: rgba(244, 201, 93, 0.06); }
.toast--error   { border-color: var(--warn);     color: var(--warn);     background: rgba(255, 113, 130, 0.06); }
.toast--message { border-color: var(--border); color: var(--text); }

#toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
}
#toast-host .toast {
  min-width: 260px;
  max-width: 360px;
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* --- paginator --------------------------------------------------------- */
.paginator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.paginator__count {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text);
}
.paginator__spacer { flex: 1; }

/* --- search bar -------------------------------------------------------- */
.searchbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.searchbar .form-row { margin-bottom: 0; flex: 1 1 240px; }
.searchbar .form-row__input { padding: 8px 10px; }

/* --- auth shell -------------------------------------------------------- */
body.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(0,205,255,0.06), transparent 60%),
    radial-gradient(700px 380px at 80% 90%, rgba(72,242,185,0.05), transparent 60%),
    var(--bg-deep);
  padding: 24px;
}
.auth {
  width: 100%;
  display: flex;
  justify-content: center;
}
.auth__card {
  width: min(380px, 100%);
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-2);
  border-top: 2px solid var(--accent);
}
.auth__head {
  text-align: center;
  margin-bottom: 18px;
}
.auth__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--bg-deep);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 10px;
}
.auth__title {
  font-size: 17px;
  margin-bottom: 2px;
  letter-spacing: 0.4px;
}
.auth__sub { color: var(--muted); font-size: 12px; margin: 0; }
.auth__form { margin-top: 6px; }
.auth__foot { margin-top: 18px; text-align: center; font-size: 11px; }

/* --- htmx indicators --------------------------------------------------- */
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* --- responsive (narrow) ---------------------------------------------- */
@media (max-width: 900px) {
  body.app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: var(--border-w) solid var(--border);
    flex-direction: row;
    overflow-x: auto;
  }
  .sidebar__brand { border-bottom: 0; border-right: var(--border-w) solid var(--border); }
  .sidebar__nav {
    flex-direction: row;
    padding: 8px;
    flex-wrap: nowrap;
  }
  .sidebar__foot { display: none; }
  .nav-item__label { display: none; }
  .main { height: auto; overflow: visible; }
  .content { padding: 16px; }
}

/* ============== NEW: buttons (added 2026-06-13) ============== */
/* Single-hyphen legacy aliases for BEM canonical button variants. */
.btn--danger,
.btn-danger {
  background: var(--surface-2);
  border-color: var(--warn);
  color: var(--warn);
}
.btn--danger:hover,
.btn-danger:hover {
  background: var(--warn);
  color: var(--bg-deep);
  border-color: var(--warn);
}

.btn--ok,
.btn-ok {
  background: var(--surface-2);
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.btn--ok:hover,
.btn-ok:hover {
  background: var(--accent-2);
  color: var(--bg-deep);
  border-color: var(--accent-2);
}

.btn--ghost,
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.btn--ghost:hover,
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface);
}

/* gold-toned destructive-but-not-final (disable / kill / strong notice). */
.btn--warn,
.btn-warn {
  background: var(--surface-2);
  border-color: var(--gold);
  color: var(--gold);
}
.btn--warn:hover,
.btn-warn:hover {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
}

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
}
.btn--accent:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--bg-deep);
}

.btn--xs {
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 4px;
}

/* page-local antidebug button family (lifted from inline <style>). */
.ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  border: var(--border-w) solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1.2;
}
.ad-btn:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.ad-btn--danger { border-color: var(--warn); color: var(--warn); }
.ad-btn--danger:hover { background: var(--warn); color: var(--bg-deep); border-color: var(--warn); }
.ad-btn--warn { border-color: var(--gold); color: var(--gold); }
.ad-btn--warn:hover { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }
.ad-btn--ok { border-color: var(--accent-2); color: var(--accent-2); }
.ad-btn--ok:hover { background: var(--accent-2); color: var(--bg-deep); border-color: var(--accent-2); }
/* manual-lock submit button — gold tone (was off-palette purple, normalized to gold). */
.ad-btn--lock {
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
}
.ad-btn--lock:hover { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }

/* score text-color helper used in antidebug rows. */
.ad-score        { font-weight: 700; font-family: var(--font-mono); }
.ad-score--red   { color: var(--warn); }
.ad-score--amber { color: var(--gold); }
.ad-score--green { color: var(--accent-2); }

/* ============== NEW: pills (added 2026-06-13) ============== */
/* Single-hyphen aliases. */
.pill-ok    { color: var(--accent-2); border-color: var(--accent-2); }
.pill-err   { color: var(--warn);     border-color: var(--warn); }
.pill-warn  { color: var(--gold);     border-color: var(--gold); }
.pill-muted { color: var(--muted);    border-color: var(--border); }
.pill-cyan  { color: var(--accent);   border-color: var(--accent); }
.pill-ok, .pill-err, .pill-warn, .pill-muted, .pill-cyan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: var(--border-w) solid var(--border);
  background: var(--surface-2);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pill--active,
.ad-pill.is-active {
  background: var(--accent);
  color: var(--bg-deep);
  border-color: var(--accent);
}
.pill--sm {
  padding: 1px 6px;
  font-size: 10px;
}

/* page-local antidebug tab-pill (lifted from inline <style>). */
.ad-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: var(--border-w) solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
  cursor: pointer;
  text-decoration: none;
}
.ad-pill:hover { color: var(--text); border-color: var(--accent); }

/* ============== NEW: badges (added 2026-06-13) ============== */
.badge--ok      { color: var(--accent-2); border-color: var(--accent-2); }
.badge--off     { color: var(--muted);    border-color: var(--border); }
.badge--warn    { color: var(--gold);     border-color: var(--gold); }
.badge--muted   { color: var(--muted);    border-color: var(--border); }
.badge--neutral { color: var(--text);     border-color: var(--border); }
.badge--gold    { color: var(--gold);     border-color: var(--gold); }
.badge--alert,
.ad-badge-unreviewed {
  color: var(--warn);
  border-color: var(--warn);
  background: rgba(255, 113, 130, 0.08);
  display: inline-flex;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

/* ============== NEW: tables (added 2026-06-13) ============== */
/* All variant tables compose with .table. Aliasing for parity. */
.data-table,
.dash-table,
.ver-table,
.ad-table,
.table--licenses,
.table--kv,
.table--zebra {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.data-table th, .data-table td,
.dash-table th, .dash-table td,
.ver-table th, .ver-table td,
.ad-table th, .ad-table td,
.table--licenses th, .table--licenses td,
.table--kv th, .table--kv td,
.table--zebra th, .table--zebra td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: var(--border-w) solid var(--border);
  vertical-align: middle;
}
.data-table th,
.dash-table th,
.ver-table th,
.ad-table th,
.table--licenses th,
.table--zebra th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.data-table tbody tr:nth-child(even) td,
.dash-table tbody tr:nth-child(even) td,
.ver-table tbody tr:nth-child(even) td,
.ad-table tbody tr:nth-child(even) td,
.table--licenses tbody tr:nth-child(even) td,
.table--zebra tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.04); }
.data-table tbody tr:hover td,
.dash-table tbody tr:hover td,
.ver-table tbody tr:hover td,
.ad-table tbody tr:hover td,
.table--licenses tbody tr:hover td { background: rgba(0, 205, 255, 0.05); }
.data-table tbody tr:last-child td,
.dash-table tbody tr:last-child td,
.ver-table tbody tr:last-child td,
.ad-table tbody tr:last-child td,
.table--licenses tbody tr:last-child td { border-bottom: 0; }

.data-table--compact th, .data-table--compact td,
.dash-table--compact th, .dash-table--compact td,
.ad-table th, .ad-table td,
.table--xs th, .table--xs td { padding: 6px 10px; font-size: 12px; }

.data-table__empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 24px;
}

/* per-cell modifiers. */
.td--mono   { font-family: var(--font-mono); font-size: 12px; }
.td--accent2 { color: var(--accent-2); }
.td--meta   { color: var(--muted); font-size: 12px; }
.td--actions { text-align: right; white-space: nowrap; }
.th--actions { text-align: right; }
.th--hwid   { width: 40%; }
.col-action { text-align: right; white-space: nowrap; }
.col-action--inline {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cell--note {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.cell--actions { text-align: right; white-space: nowrap; }
.cmd-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  max-width: 340px;
}

/* key-value table layout. */
.table--kv th {
  width: 35%;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
  background: var(--surface-2);
}
.table--kv td { color: var(--text); font-size: 13px; }

/* log-level coloring. */
.lvl-error { color: var(--warn);   font-weight: 600; }
.lvl-warn  { color: var(--gold); }
.lvl-info  { color: var(--text); }
.lvl-debug { color: var(--muted); }

/* per-column width hints for versions table. */
.ver-table__ver  { font-family: var(--font-mono); font-weight: 600; color: var(--text); white-space: nowrap; }
.ver-table__sha  { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.ver-table__size { font-family: var(--font-mono); font-size: 12px; text-align: right; white-space: nowrap; }
.ver-table__ts   { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ver-table__ops  { text-align: right; white-space: nowrap; }
.ver-table__note-row td {
  background: var(--surface-2);
  font-size: 12px;
  color: var(--muted);
  padding: 6px 12px;
}

/* ============== NEW: cards (added 2026-06-13) ============== */
.card-title,
.card__header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}
.card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: var(--border-w) solid var(--border);
  padding-bottom: 8px;
  margin: -2px -2px 12px;
  padding-left: 2px;
  padding-right: 2px;
}
.card__hint {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}
.card__count {
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-size: 12px;
}
.card__meta {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
  font-family: var(--font-mono);
}
.card__body { display: block; }
.card__body--table { padding: 0; margin: 6px -2px 0; }
.card__body--table .table,
.card__body--table .data-table,
.card__body--table .dash-table,
.card__body--table .ver-table { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.card__body--list { padding: 0; }
.card__body--empty {
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-style: italic;
}

.card--accent { border-top: 2px solid var(--accent); }
.card--issue  { border-color: var(--accent); }
.card--list .card__head {
  border-bottom: var(--border-w) solid var(--border);
  margin: -8px -10px 12px;
  padding: 8px 10px;
}
.card--link {
  display: block;
  transition: border-color 0.12s, background 0.12s;
  text-decoration: none;
  color: inherit;
}
.card--link:hover { border-color: var(--accent); background: var(--surface-2); }
.card--warn,
.card-warn { border-color: var(--gold); }
.card--err,
.card-err  { border-color: var(--warn); }

.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 18px;
}

/* ============== NEW: stat cards (added 2026-06-13) ============== */
.stat-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.stat-card--sm { padding: 12px 14px; min-height: 72px; }
.stat-card__num,
.stat__num {
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.15;
}
.stat-card--sm .stat-card__num { font-size: 20px; }
.stat-card__lbl,
.stat__lbl {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-card__num--accent,
.stat__num--accent,
.stat__value--accent { color: var(--accent); }
.stat-card__num--warn,
.stat__num--warn,
.stat__value--warn   { color: var(--warn); }
.stat-card__num--gold,
.stat__num--gold,
.stat__value--gold   { color: var(--gold); }
.stat-card__num--ok,
.stat__num--ok,
.stat__value--ok     { color: var(--accent-2); }

.stat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 18px;
}
.stat-grid--sub {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

/* ============== NEW: page chrome (added 2026-06-13) ============== */
.page,
.page--licenses,
.page--license-edit,
.page--license-search,
.page--noesis-board,
.page--noesis-ops,
.page--noesis-history,
.versions-page,
.ad-page { display: block; }
.ad-page { padding: 0; }

.page__header,
.page__head,
.page-head,
.page-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: var(--border-w) solid var(--border);
  flex-wrap: wrap;
}
.page__title,
.page-head__title,
.page-header__title,
.ad-h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.3px;
  color: var(--text);
}
.ad-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-2);
  margin: 16px 0 10px;
}
.page__subtitle,
.page__lead,
.page__meta,
.page-head__lead,
.page-head__meta,
.page-header__lead,
.page-header__sub,
.ad-sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.page-header__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ad-tag {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* breadcrumb. */
.crumb,
.crumb__seg,
.crumb__node,
.crumb-label {
  color: var(--muted);
  font-size: 13px;
}
.crumb__node--current {
  color: var(--text);
  font-weight: 600;
}
.crumb__sep,
.crumb-sep {
  color: var(--border);
  margin: 0 4px;
}
.crumb-link,
.crumb--link {
  color: var(--accent);
  text-decoration: none;
}
.crumb-link:hover,
.crumb--link:hover { color: var(--accent-2); }

/* toolbar / filter strip. */
.toolbar,
.ad-toolbar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
}
.ad-toolbar .meta { color: var(--muted); font-size: 12px; }
.filters {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ============== NEW: forms (added 2026-06-13) ============== */
.form { display: block; }
.form--inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.form--inline-tight {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin: 0;
}
.form--stacked,
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-actions,
.form__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}

.form-field,
.form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.form-field--wide { grid-column: 1 / -1; }
.form-label,
.form__label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.form-hint {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.form__input,
.form__input--mono {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-deep);
  border: var(--border-w) solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.form__input:focus,
.form__input--mono:focus {
  border-color: var(--accent);
  background: var(--surface-2);
}
.form__input--mono { font-family: var(--font-mono); }

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field--check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.field--grow { flex: 1 1 220px; }
.field__label {
  font-size: 12px;
  color: var(--muted);
}
.field__input {
  padding: 8px 10px;
  background: var(--bg-deep);
  border: var(--border-w) solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}
.field__input:focus { border-color: var(--accent); }

.inline-form,
form.inline {
  display: inline;
  margin: 0;
  padding: 0;
}

/* ============== NEW: state modifiers (added 2026-06-13) ============== */
.is-active   { /* base styles; selectors with .nav-item already handled. */ }
.is-alive    { color: var(--accent-2); }
.is-on       { color: var(--accent-2); }
.is-off,
.is-disabled { color: var(--muted); }
.is-disabled,
[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.is-warn     { color: var(--gold); }
.is-expired  { color: var(--warn); opacity: 0.7; }
.is-latest   { color: var(--gold); font-weight: 600; }
.is-reviewed { opacity: 0.55; }
.is-reviewed td { color: var(--muted); }

.table tbody tr.is-latest td,
.data-table tbody tr.is-latest td,
.ver-table tbody tr.is-latest td { background: rgba(0, 205, 255, 0.06); }
.table tbody tr.is-expired td,
.data-table tbody tr.is-expired td { opacity: 0.6; }

/* row coloring. */
.row--alert td,
.row-pair--bad td,
.row-pair--dead td,
.row-guard--dead td { background: rgba(255, 113, 130, 0.06); }
.row--disabled td { opacity: 0.55; }
.row--stale td,
.row-pair--mismatch td,
.row-guard--stale td { background: rgba(244, 201, 93, 0.05); }
.row-pair--ok td,
.row-pair--alive td,
.row-guard--alive td { /* default — no tint */ }
.row-guard { /* container marker — no style by itself */ }
.row-pair  { /* same */ }

/* ============== NEW: status banners (added 2026-06-13) ============== */
.status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  font-size: 13px;
  margin-bottom: 12px;
}
.status-banner__icon { font-size: 14px; flex: 0 0 auto; }
.status-banner__text { flex: 1; }
.status-banner__meta {
  color: var(--muted);
  font-size: 11px;
  margin-left: 8px;
  font-family: var(--font-mono);
}
.status-on    { border-color: var(--accent-2); color: var(--accent-2); background: rgba(72, 242, 185, 0.05); }
.status-off   { border-color: var(--border);   color: var(--muted);    background: var(--surface); }
.status-alert { border-color: var(--gold);     color: var(--gold);     background: rgba(244, 201, 93, 0.06); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.status--ok    { color: var(--accent-2); }
.status--warn  { color: var(--warn); }
.status--gold  { color: var(--gold); }
.status--muted { color: var(--muted); }

.live-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
}
.live-meta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  animation: live-pulse 2s ease-in-out infinite;
}
.live-meta__label { color: var(--muted); }
.live-meta__time {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 11.5px;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ============== NEW: antidebug page-local (added 2026-06-13) ============== */
/* lifted from inline <style> block at templates/antidebug/index.html:6-192. */
details.ad-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
details.ad-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  font-size: 13px;
  user-select: none;
}
details.ad-card[open] > summary {
  border-bottom: var(--border-w) solid var(--border);
  background: var(--surface-2);
}
details.ad-card > summary::-webkit-details-marker { display: none; }
details.ad-card > summary::marker { display: none; }

.ad-card.sev-red    { border-color: var(--warn); }
.ad-card.sev-amber  { border-color: var(--gold); }
.ad-card.sev-green  { border-color: var(--accent-2); }
.ad-card__body {
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}

.ad-summary-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

.ad-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  background: var(--surface);
}

.ad-lockcard {
  background: var(--surface);
  border: var(--border-w) solid var(--warn);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  background: rgba(255, 113, 130, 0.04);
}

.ad-pager {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}
.ad-pager a {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  font-family: var(--font-mono);
}
.ad-pager a:hover { color: var(--accent); border-color: var(--accent); }

.ad-cross {
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.ad-cross:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* crack-evidence row badges (mono, small, color per type). */
.ce-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ce-list li { padding: 0; }
.ce-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
}
.ce-running { color: var(--warn); }
.ce-disk    { color: var(--gold); }
.ce-drv     { color: var(--accent); }
.ce-art     { color: var(--accent-2); }
.ce-inj     { color: var(--warn); font-weight: 600; }

/* event-cell color modifiers. */
.ev-ban { color: var(--warn);     font-weight: 600; }
.ev-bad { color: var(--gold); }
.ev-ok  { color: var(--accent-2); }

/* severity coloring also expressed as sev-* on cards. */
.sev-red   td { color: var(--warn); }
.sev-amber td { color: var(--gold); }
.sev-green td { color: var(--accent-2); }

/* ============== NEW: noesis page-local (added 2026-06-13) ============== */
.noesis-summary {
  display: flex;
  gap: 24px;
  padding: 14px 18px;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.noesis-summary__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.noesis-summary__label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.noesis-summary__value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.noesis-summary__value--muted {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

/* pending verdicts. */
.noesis-pending {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.noesis-pending__intro {
  padding: 12px 16px;
  border-bottom: var(--border-w) solid var(--border);
  color: var(--muted);
  font-size: 12px;
  background: var(--surface-2);
}
.noesis-pending__row {
  padding: 14px 16px;
  border-bottom: var(--border-w) solid var(--border);
}
.noesis-pending__row:last-child { border-bottom: 0; }
.noesis-pending__head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.noesis-pending__hwid {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.noesis-pending__ago {
  color: var(--muted);
  font-size: 11.5px;
  font-family: var(--font-mono);
  margin-left: auto;
}
.noesis-pending__summary {
  color: var(--text);
  font-size: 13px;
  margin: 4px 0 8px;
}
.noesis-pending__notes {
  color: var(--muted);
  font-size: 12px;
  margin: 4px 0;
}
.noesis-pending__form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.noesis-pending__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* agent opinions cluster. */
.noesis-opinions {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.noesis-opinions--mini { gap: 4px; }
.noesis-opinion {
  padding: 8px 10px;
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.noesis-opinion--mini { padding: 4px 8px; font-size: 11.5px; }
.noesis-opinion__name {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 8px;
}
.noesis-opinion__vote {
  font-family: var(--font-mono);
  font-weight: 700;
}
.noesis-opinion__claim {
  color: var(--text);
  margin: 4px 0 2px;
}
.noesis-opinion__evidence,
.noesis-opinion__challenges {
  color: var(--muted);
  font-size: 11.5px;
  font-family: var(--font-mono);
}

/* board cards. */
.noesis-board__cards {
  margin-top: 12px;
}
.noesis-board__cards-inner {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.noesis-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.noesis-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.noesis-card__hwid {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.noesis-card__verdict {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: var(--border-w) solid var(--border);
}
.noesis-card__history-link {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
}
.noesis-card__history-link:hover { color: var(--accent-2); }
.noesis-card__agents {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.noesis-card__summary {
  color: var(--text);
  font-size: 12.5px;
}
.noesis-card__meta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.noesis-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--muted);
  flex: 0 0 auto;
}
.noesis-dot.is-on   { background: var(--accent-2); box-shadow: 0 0 6px rgba(72, 242, 185, 0.55); }
.noesis-dot.is-warn { background: var(--gold);     box-shadow: 0 0 6px rgba(244, 201, 93, 0.55); }
.noesis-dot.is-off  { background: var(--muted); }

/* history. */
.noesis-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.noesis-history__row {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.noesis-history__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.noesis-history__risk {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}
.noesis-history__ago {
  color: var(--muted);
  font-size: 11.5px;
  font-family: var(--font-mono);
  margin-left: auto;
}
.noesis-history__summary {
  color: var(--text);
  font-size: 12.5px;
}

/* ops. */
.noesis-ops__stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 16px;
}
.noesis-ops__stat {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.noesis-ops__stat-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.noesis-ops__stat-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
}

.noesis-ops__bans {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.noesis-ops__ban {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.noesis-ops__ban-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.noesis-ops__ban-hwid {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.noesis-ops__ban-meta {
  color: var(--muted);
  font-size: 11.5px;
  font-family: var(--font-mono);
  margin-left: auto;
}
.noesis-ops__ban-reason {
  color: var(--text);
  font-size: 12.5px;
}
.noesis-ops__note {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 4px;
}
.noesis-ops__unban-form,
.noesis-ops__forget-form,
.noesis-ops__purge-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.noesis-ops__reason-input {
  flex: 1 1 160px;
  padding: 5px 8px;
  background: var(--bg-deep);
  border: var(--border-w) solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
}
.noesis-ops__reason-input:focus { outline: none; border-color: var(--accent); }
.noesis-ops__recent {
  margin-top: 10px;
}
.noesis-ops__guardian {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.noesis-ops__guardian-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: var(--border-w) solid var(--border);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
}
.noesis-ops__guardian-row:last-child { border-bottom: 0; }

/* ============== NEW: versions page-local (added 2026-06-13) ============== */
.ver-section {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.ver-section > summary { list-style: none; }
.ver-section > summary::-webkit-details-marker { display: none; }
.ver-section > summary::marker { display: none; }
.ver-section__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  flex-wrap: wrap;
}
.ver-section[open] .ver-section__summary {
  background: var(--surface-2);
  border-bottom: var(--border-w) solid var(--border);
}
.ver-section__title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.ver-section__ed {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  padding: 1px 8px;
  border: var(--border-w) solid var(--accent);
  border-radius: 999px;
}
.ver-section__count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent-2);
}
.ver-section__page {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-left: auto;
}
.ver-section__sep {
  color: var(--border);
  margin: 0 4px;
}

.ver-pager {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-top: var(--border-w) solid var(--border);
  background: var(--surface);
}
.ver-pager__info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding: 0 10px;
}

.ver-msg-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
}
.ver-msg-form__textarea {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  background: var(--bg-deep);
  border: var(--border-w) solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  resize: vertical;
}
.ver-msg-form__textarea:focus { outline: none; border-color: var(--accent); }
.ver-msg-form__hint {
  color: var(--muted);
  font-size: 11px;
}

.ver-fu-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  margin-bottom: 16px;
}
.ver-fu-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.ver-fu-card__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.ver-fu-list {
  margin: 6px 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}
.ver-fu-list li { margin: 2px 0; }
.ver-fu-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
  margin: 6px 0;
}
.ver-fu-meta dt { color: var(--muted); }
.ver-fu-meta dd { margin: 0; color: var(--text); font-family: var(--font-mono); }

.ver-component {
  margin-bottom: 22px;
}
.ver-component__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-2);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: var(--border-w) solid var(--border);
}

.ver-upload-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ver-upload-rules {
  margin: 0 0 14px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
}
.ver-upload-rules li { margin: 3px 0; }

.version-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.version-cell__hint {
  color: var(--gold);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* file inventory. */
.file-inventory {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.file-inventory > summary { list-style: none; cursor: pointer; }
.file-inventory > summary::-webkit-details-marker { display: none; }
.file-inventory__head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.file-inventory[open] .file-inventory__head {
  background: var(--surface-2);
  border-bottom: var(--border-w) solid var(--border);
}
.file-inventory__root {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}
.file-inventory__ts {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-left: auto;
}
.file-inventory__form {
  padding: 10px 14px;
}
.file-list {
  list-style: none;
  margin: 0;
  padding: 6px 14px 10px;
}
.file-list__row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  border-bottom: var(--border-w) solid var(--border);
}
.file-list__row:last-child { border-bottom: 0; }
.file-list__path {
  flex: 1;
  color: var(--text);
  word-break: break-all;
}
.file-list__size {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* ============== NEW: utility classes (added 2026-06-13) ============== */
.monospace,
.mono--xs,
.mono--sm { font-family: var(--font-mono); }
.mono--xs { font-size: 10.5px; }
.mono--sm { font-size: 11.5px; }

.small { font-size: 11.5px; color: var(--muted); }

.num,
.num-col {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.t-right { text-align: right; }

.toolbar { /* duplicated above with page chrome */ }
.inline { display: inline; }

.link { color: var(--accent); text-decoration: none; }
.link:hover { color: var(--accent-2); }
.link--inline { text-decoration: none; }
.link--back {
  font-size: 12px;
  color: var(--muted);
}
.link--back:hover { color: var(--accent); }
.link--back::before { content: '\2190'; margin-right: 4px; }

.hint {
  color: var(--muted);
  font-size: 11.5px;
}
.hint--legend {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}
.hint__warn { color: var(--gold); }

.meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.meta__user { color: var(--text); }
.meta__sep  { color: var(--border); margin: 0 4px; }
.meta__ts   {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.dash {
  display: block;
}
.dash__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: var(--border-w) solid var(--border);
  flex-wrap: wrap;
}
.dash__title {
  font-size: 22px;
  margin: 0;
  font-weight: 700;
}
.dash__meta {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}
.dash__updated { font-family: var(--font-mono); }

.empty {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-style: italic;
}

.paginator__pos,
.paginator__info {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  border-radius: 999px;
  color: var(--text);
}

/* helpers used by antidebug inline-style cleanup. */
.text-gold  { color: var(--gold); }
.text-muted { color: var(--muted); }
.text-warn  { color: var(--warn); }
.pad-0      { padding: 0; }

/* mobile sidebar toggle button — visible only on narrow viewports. */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
}
.sidebar-toggle:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) {
  .sidebar-toggle { display: inline-flex; }
}