@roxy-agent/agents 0.1.0

package/dist/dashboard/styles.js

@@ -0,0 +1,1685 @@
+// Dashboard CSS. Kept as a template string because the dashboard is served
+// directly by Express without a frontend build step.
+export const DASHBOARD_CSS = String.raw `
+@font-face {
+  font-family: 'Geist';
+  src: url('/static/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/static/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --bg:        #fbfbfa;
+  --surface:   #ffffff;
+  --surface-2: #f6f6f5;
+  --line:      #ececea;
+  --line-2:    #dcdcd9;
+  --text:      #16181d;
+  --muted:     #6b6f76;
+  --dim:       #9aa0a6;
+
+  --accent:    #16181d;
+  --accent-on: #ffffff;
+
+  --green:     #2f8f5b;
+  --amber:     #b16a1a;
+  --red:       #c0392b;
+
+  --sans: 'Geist', -apple-system, system-ui, sans-serif;
+  --mono: 'Geist Mono', 'SF Mono', Menlo, monospace;
+
+  --radius: 2px;
+
+  --rail: 200px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body { background: var(--bg); }
+body {
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 13.5px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+}
+
+::selection { background: rgba(22,24,29,0.14); color: var(--text); }
+
+a, button { font-family: inherit; cursor: pointer; }
+a { color: inherit; text-decoration: none; }
+input, textarea, select, button { font: inherit; color: inherit; }
+input, textarea, select { background: transparent; border: 0; outline: 0; }
+
+.svg-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  vertical-align: -0.16em;
+}
+
+/* ── Sidebar ─────────────────────────────────────────────────────────── */
+.appbar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  width: var(--rail);
+  height: 100vh;
+  background: var(--bg);
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  z-index: 20;
+  padding: 18px 12px;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px 18px;
+  user-select: none;
+}
+.brand .logo { display: inline-flex; color: var(--text); }
+.brand .logo .svg-icon { width: 16px; height: 16px; }
+.brand .name {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text);
+}
+.brand .name .dim { color: var(--dim); font-weight: 400; margin: 0 1px; }
+
+nav.tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+nav.tabs.sidebar-foot {
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+.sidebar-usage {
+  display: block;
+  margin-top: auto;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  background: var(--surface);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 100ms, background 100ms;
+}
+.sidebar-usage[hidden] { display: none; }
+.sidebar-usage:hover { border-color: var(--line-2); background: var(--surface-2); }
+.sidebar-usage .label {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 10.5px;
+  font-family: var(--mono);
+  color: var(--dim);
+  margin-bottom: 6px;
+}
+.sidebar-usage .label .plan { color: var(--text); text-transform: capitalize; }
+.sidebar-usage .num {
+  font-size: 13px;
+  font-weight: 550;
+  color: var(--text);
+  font-feature-settings: 'tnum';
+  margin-bottom: 6px;
+  letter-spacing: -0.01em;
+}
+.sidebar-usage .num .of { color: var(--dim); font-weight: 400; }
+.sidebar-usage .bar {
+  height: 4px;
+  background: var(--surface-2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.sidebar-usage .bar > span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transition: width 200ms ease;
+}
+.sidebar-usage.warn .bar > span { background: var(--amber); }
+.sidebar-usage.over .bar > span { background: var(--red); }
+.sidebar-usage.over .num { color: var(--red); }
+nav.tabs a {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  font-size: 13px;
+  font-weight: 450;
+  color: var(--muted);
+  border-radius: 2px;
+  transition: color 100ms, background 100ms;
+}
+nav.tabs a .nav-icon { color: var(--dim); }
+nav.tabs a:hover { color: var(--text); background: var(--surface-2); }
+nav.tabs a:hover .nav-icon { color: var(--text); }
+nav.tabs a.active {
+  color: var(--text);
+  background: var(--surface-2);
+  font-weight: 500;
+}
+nav.tabs a.active .nav-icon { color: var(--text); }
+nav.tabs a .nav-badge {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: var(--amber);
+  color: #fff;
+  border-radius: 999px;
+  padding: 1px 6px;
+  line-height: 1.5;
+}
+
+/* ── Layout ──────────────────────────────────────────────────────────── */
+.page {
+  margin-left: var(--rail);
+  padding: 28px 36px 64px;
+}
+
+.page-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 22px;
+}
+.page-head h1 {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--text);
+}
+.page-head .subtitle { display: none; }
+.page-head .actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--dim);
+}
+.page-head .actions .muted-stat {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--muted);
+}
+
+/* ── Range picker ────────────────────────────────────────────────────── */
+.range-picker {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  overflow: hidden;
+  height: 28px;
+}
+.range-pill {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  padding: 0 10px;
+  cursor: pointer;
+  border-right: 1px solid var(--line);
+  transition: background 100ms ease, color 100ms ease;
+}
+.range-pill:last-child { border-right: none; }
+.range-pill:hover { background: var(--surface-2); color: var(--text); }
+.range-pill.active {
+  background: var(--accent);
+  color: var(--accent-on);
+}
+.range-pill.active:hover { background: var(--accent); color: var(--accent-on); }
+
+@media (max-width: 720px) {
+  .range-picker { height: 26px; }
+  .range-pill { padding: 0 8px; font-size: 10.5px; }
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 2px;
+  border: 1px solid var(--line-2);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 12.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 100ms, border-color 100ms;
+}
+.btn:hover { background: var(--surface-2); }
+.btn.primary {
+  background: var(--accent);
+  color: var(--accent-on);
+  border-color: var(--accent);
+}
+.btn.primary:hover { filter: brightness(1.15); }
+.btn.primary:disabled { opacity: 0.5; cursor: wait; }
+.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
+.btn.ghost:hover { color: var(--text); background: var(--surface-2); }
+.btn.danger { color: var(--red); border-color: transparent; background: transparent; }
+.btn.danger:hover { background: rgba(192,57,43,0.08); }
+.btn.icon-btn {
+  width: 28px;
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+}
+.btn.icon-btn .svg-icon { width: 13px; height: 13px; }
+
+/* ── Cards ───────────────────────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.card .head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.card .head h3 {
+  font-size: 12.5px;
+  font-weight: 550;
+  color: var(--text);
+  letter-spacing: -0.005em;
+}
+.card .head .meta {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--dim);
+}
+.card .head a.meta { transition: color 100ms; }
+.card .head a.meta:hover { color: var(--text); }
+.link-with-icon { display: inline-flex; align-items: center; gap: 4px; }
+.link-with-icon .svg-icon { width: 11px; height: 11px; }
+
+.card .body { padding: 16px; }
+.card .body.flush { padding: 0; }
+
+/* ── KPI strip ───────────────────────────────────────────────────────── */
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  margin-bottom: 18px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.kpi-grid.five { grid-template-columns: repeat(5, 1fr); }
+.kpi {
+  position: relative;
+  padding: 14px 18px;
+  border-right: 1px solid var(--line);
+}
+.kpi:last-child { border-right: none; }
+.kpi .corner { display: none; }
+.kpi .label {
+  font-size: 11.5px;
+  color: var(--muted);
+  font-weight: 450;
+}
+.kpi .num {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  color: var(--text);
+  margin-top: 6px;
+  font-feature-settings: 'tnum';
+}
+.kpi .num.warn,
+.kpi .num.danger,
+.kpi .num.accent { color: var(--text); }
+.kpi .delta {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--dim);
+  margin-top: 4px;
+}
+a.kpi-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  transition: background 100ms;
+}
+a.kpi-link:hover { background: var(--surface-2); }
+a.kpi-link.alert {
+  background: rgba(217, 119, 6, 0.06);
+}
+a.kpi-link.alert .num { color: var(--amber); }
+a.kpi-link.alert .delta { color: var(--amber); }
+a.kpi-link.alert:hover { background: rgba(217, 119, 6, 0.10); }
+
+/* ── Grids ───────────────────────────────────────────────────────────── */
+.two-col {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+.three-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+/* ── Toolbar / search ────────────────────────────────────────────────── */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.toolbar .input-wrap {
+  flex: 1;
+  position: relative;
+}
+.toolbar input.search,
+.run-search input.search {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 8px 12px 8px 32px;
+  outline: none;
+  transition: border-color 100ms;
+}
+.toolbar input.search:focus,
+.run-search input.search:focus { border-color: var(--accent); }
+.toolbar input.search::placeholder,
+.run-search input.search::placeholder { color: var(--dim); }
+.toolbar .search-icon {
+  position: absolute;
+  left: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--dim);
+  pointer-events: none;
+}
+.toolbar .input-wrap .kbd-hint,
+.run-search .kbd-hint {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--dim);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  padding: 1px 5px;
+  pointer-events: none;
+}
+
+.run-search {
+  margin-bottom: 12px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: visible;
+}
+.run-search-row {
+  display: grid;
+  grid-template-columns: 42px 1fr 34px;
+  align-items: stretch;
+  min-height: 54px;
+  border-bottom: 1px solid var(--line);
+}
+.condition-joiner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  border-right: 1px solid var(--line);
+}
+.run-search-controls {
+  display: grid;
+  grid-template-columns: 180px 118px minmax(180px, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+}
+.run-search .custom-select { min-width: 0; }
+.run-search .custom-select-trigger,
+.run-search input.search {
+  min-height: 34px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 0;
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 12px;
+  letter-spacing: 0;
+  text-transform: none;
+  width: 100%;
+}
+.run-search .custom-select-trigger { padding: 8px 10px; }
+.run-search input.search {
+  padding: 8px 11px;
+  outline: none;
+}
+.run-search input.search:focus,
+.run-search .custom-select-trigger:hover,
+.run-search .custom-select.open .custom-select-trigger {
+  border-color: var(--line-2);
+  background: var(--surface);
+}
+.run-search input.search::placeholder { color: var(--muted); }
+.run-search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  border-left: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+}
+.run-search-clear:hover { color: var(--text); background: var(--surface-2); }
+.run-search-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+}
+.add-condition,
+.run-search-submit {
+  min-height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: 0;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 560;
+  cursor: pointer;
+}
+.add-condition { padding: 0 14px 0 54px; }
+.run-search-submit {
+  align-self: stretch;
+  padding: 0 18px;
+  border-left: 1px solid var(--line);
+}
+.run-search-submit .svg-icon { width: 15px; height: 15px; }
+.add-condition:hover,
+.run-search-submit:hover { background: var(--surface-2); }
+
+/* ── Pills ───────────────────────────────────────────────────────────── */
+.pills { display: flex; gap: 4px; }
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+  padding: 5px 10px;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  cursor: pointer;
+  user-select: none;
+  transition: color 100ms, background 100ms;
+}
+.pill:hover { color: var(--text); background: var(--surface-2); }
+.pill.active { color: var(--accent-on); background: var(--accent); border-color: var(--accent); }
+
+/* ── Activity table ──────────────────────────────────────────────────── */
+table.events {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  table-layout: fixed;
+}
+table.events thead th {
+  text-align: left;
+  color: var(--dim);
+  font-weight: 500;
+  font-size: 11px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+table.events tbody td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  vertical-align: middle;
+  color: var(--muted);
+  font-size: 12.5px;
+  font-feature-settings: 'tnum';
+}
+table.events tbody tr { transition: background 100ms; cursor: pointer; }
+table.events tbody tr:hover { background: var(--surface-2); }
+table.events tbody tr:last-child td { border-bottom: none; }
+table.events tbody tr.flash td { background: rgba(22,24,29,0.04); }
+
+table.events th.time, table.events td.time { width: 92px; color: var(--text); white-space: nowrap; font-family: var(--mono); font-size: 12px; }
+table.events th.session, table.events td.session { width: 80px; color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
+table.events th.tool, table.events td.tool { width: 90px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
+table.events td.summary { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
+table.events th.dur, table.events td.dur { width: 56px; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
+table.events td.verdict-cell { width: 110px; }
+table.events tr.denied td.summary { color: var(--red); }
+
+.verdict {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+}
+.verdict .risk-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  flex-shrink: 0;
+}
+.verdict .risk-dot.medium { background: var(--amber); }
+.verdict .risk-dot.high   { background: var(--red); }
+.verdict .dec { color: var(--muted); }
+.verdict .dec.allowed { color: var(--text); }
+.verdict .dec.flagged { color: var(--amber); }
+.verdict .dec.denied  { color: var(--red); }
+.verdict .dec.pending_approval { color: var(--amber); }
+.verdict .dec.pending_approval::before { content: '⏳ '; }
+
+/* ── Empty state ─────────────────────────────────────────────────────── */
+.empty {
+  padding: 56px 20px;
+  text-align: center;
+  color: var(--dim);
+}
+.empty h4 {
+  font-size: 14px;
+  font-weight: 550;
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+.empty p { font-size: 12.5px; max-width: 380px; margin: 0 auto; line-height: 1.55; }
+.empty p code { font-family: var(--mono); color: var(--text); background: var(--surface-2); padding: 1px 5px; border-radius: 2px; }
+
+/* ── Drawer ──────────────────────────────────────────────────────────── */
+.scrim {
+  position: fixed; inset: 0;
+  background: rgba(15,17,23,0.18);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms;
+  z-index: 9;
+}
+.scrim.open { opacity: 1; pointer-events: auto; }
+
+.drawer {
+  position: fixed;
+  top: 0; right: 0;
+  height: 100vh;
+  width: min(560px, 92vw);
+  background: var(--surface);
+  border-left: 1px solid var(--line);
+  transform: translateX(100%);
+  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+}
+.drawer.open { transform: translateX(0); }
+.drawer-head {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.drawer-head .title {
+  font-size: 13.5px;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+}
+.drawer-head .id { font-family: var(--mono); color: var(--dim); font-size: 11px; margin-left: 4px; }
+.drawer-close {
+  background: transparent;
+  border: 1px solid var(--line-2);
+  color: var(--muted);
+  font-size: 11px;
+  font-family: var(--mono);
+  padding: 4px 8px;
+  border-radius: 2px;
+}
+.drawer-close:hover { color: var(--text); }
+.drawer-body { padding: 18px 20px 60px; overflow: auto; flex: 1; }
+.drawer .field { margin-bottom: 14px; }
+.drawer .field-label {
+  font-size: 11px;
+  color: var(--dim);
+  margin-bottom: 5px;
+}
+.drawer .field-value {
+  font-size: 12.5px;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  padding: 9px 11px;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.drawer .field-value.mono { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; }
+.drawer .session-mini { display: flex; flex-direction: column; }
+.drawer .session-mini .row {
+  display: grid;
+  grid-template-columns: 64px 70px 1fr auto;
+  gap: 10px;
+  font-family: var(--mono);
+  font-size: 11px;
+  align-items: baseline;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--line);
+}
+.drawer .session-mini .row:last-child { border: none; }
+.drawer .session-mini .row.current { color: var(--text); font-weight: 500; }
+.drawer .session-mini .row .summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+
+/* ── Policies ────────────────────────────────────────────────────────── */
+.policy-form {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  margin-bottom: 14px;
+}
+.policy-form input[type=text] {
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  padding: 7px 11px;
+  color: var(--text);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 100ms;
+}
+.policy-form input[type=text]:focus { border-color: var(--accent); }
+.policy-form input[type=text]::placeholder { color: var(--dim); }
+
+.custom-select { min-width: 100px; position: relative; }
+.custom-select.compact { min-width: 88px; }
+.custom-select-trigger {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  color: var(--text);
+  font-size: 12.5px;
+  padding: 7px 10px;
+  min-height: 32px;
+  font-family: var(--sans);
+}
+.custom-select-trigger:hover,
+.custom-select.open .custom-select-trigger { background: var(--surface-2); }
+.custom-select.open .custom-select-trigger { border-color: var(--accent); }
+.custom-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.select-chevron { width: 12px; height: 12px; color: var(--dim); transition: transform 120ms ease; }
+.custom-select.open .select-chevron { transform: rotate(180deg); }
+.custom-select-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 30;
+  min-width: 100%;
+  display: none;
+  overflow: hidden;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  box-shadow: 0 8px 24px rgba(15,17,23,0.10);
+}
+.custom-select.open .custom-select-menu { display: block; }
+.custom-select-menu button {
+  width: 100%;
+  display: block;
+  padding: 7px 10px;
+  background: transparent;
+  border: 0;
+  color: var(--muted);
+  font-size: 12.5px;
+  text-align: left;
+  white-space: nowrap;
+}
+.custom-select-menu button:hover,
+.custom-select-menu button[aria-selected="true"] {
+  background: var(--surface-2);
+  color: var(--text);
+}
+
+.policy-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.policy-split.three { grid-template-columns: 1fr 1fr 1fr; }
+@media (max-width: 1100px) {
+  .policy-split.three { grid-template-columns: 1fr; }
+}
+.policy-row {
+  display: grid;
+  grid-template-columns: 60px minmax(0, 1fr) auto auto auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 16px;
+  border-bottom: 1px solid var(--line);
+  transition: background 100ms;
+}
+.policy-row:hover { background: var(--surface-2); }
+.policy-row:last-child { border-bottom: none; }
+.policy-row.disabled { opacity: 0.5; }
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  padding: 2px 7px;
+  border-radius: 2px;
+  border: 1px solid var(--line-2);
+  background: var(--surface-2);
+  color: var(--muted);
+  width: fit-content;
+}
+.tag.allow   { color: var(--green); }
+.tag.block   { color: var(--red); }
+.tag.approve { color: var(--amber); }
+.tag.bash       { color: var(--text); }
+.tag.filesystem { color: var(--text); }
+.tag.network    { color: var(--text); }
+.tag.all        { color: var(--muted); }
+
+.policy-row .desc { color: var(--text); font-size: 13px; }
+.policy-row .desc small {
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 10.5px;
+  display: block;
+  margin-top: 2px;
+}
+.policy-row .hits { font-family: var(--mono); font-size: 11px; color: var(--muted); }
+.policy-row .hits b { color: var(--text); font-weight: 500; font-feature-settings: 'tnum'; }
+
+.switch {
+  width: 28px;
+  height: 16px;
+  background: var(--line-2);
+  border-radius: 999px;
+  position: relative;
+  cursor: pointer;
+  transition: background 120ms;
+  flex-shrink: 0;
+}
+.switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  background: var(--surface);
+  border-radius: 50%;
+  transition: transform 120ms ease;
+  box-shadow: 0 1px 2px rgba(15,17,23,0.18);
+}
+.policy-row:not(.disabled) .switch { background: var(--accent); }
+.policy-row:not(.disabled) .switch::after { transform: translateX(12px); }
+
+/* ── Built-in guardrails ─────────────────────────────────────────────── */
+.builtin-card .body.flush { padding: 0; }
+.builtin-section { border-bottom: 1px solid var(--line); }
+.builtin-section:last-child { border-bottom: none; }
+.builtin-section-head {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 18px 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  color: var(--text);
+}
+.builtin-section-head:hover { background: var(--surface-2); }
+.builtin-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  transition: transform 120ms ease;
+}
+.builtin-section.open .builtin-chevron { transform: rotate(180deg); }
+.builtin-section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.builtin-section-note {
+  color: var(--dim);
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.builtin-section-count {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--muted);
+  font-feature-settings: 'tnum';
+}
+.builtin-rows { border-top: 1px solid var(--line); background: var(--surface-2); }
+.builtin-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px 10px 46px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+.builtin-row:last-child { border-bottom: none; }
+.builtin-row.disabled { opacity: 0.45; }
+.builtin-row-main { min-width: 0; }
+.builtin-row-reason {
+  color: var(--text);
+  font-size: 13px;
+  margin-bottom: 3px;
+}
+.builtin-row-pattern {
+  display: inline-block;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--dim);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 2px 6px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.builtin-row:not(.disabled) .switch { background: var(--accent); }
+.builtin-row:not(.disabled) .switch::after { transform: translateX(12px); }
+
+/* ── Approvals ───────────────────────────────────────────────────────── */
+.approval-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.approval-row:last-child { border-bottom: none; }
+.approval-row.pending  { background: rgba(217, 119, 6, 0.04); }
+.approval-row.approved { opacity: 0.7; }
+.approval-row.denied   { opacity: 0.5; }
+.approval-row.timeout  { opacity: 0.5; }
+.approval-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.approval-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.approval-tool {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.approval-reason {
+  color: var(--text);
+  font-size: 13px;
+}
+.approval-summary {
+  display: block;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 6px 9px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 90px;
+  overflow: auto;
+}
+.approval-meta {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--dim);
+}
+.approval-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.approval-row.compact {
+  padding: 10px 14px;
+  gap: 10px;
+}
+.approval-row.compact .approval-main { gap: 4px; }
+.approval-row.compact .approval-title { gap: 8px; }
+.approval-row.compact .approval-reason { font-size: 12.5px; }
+.approval-summary.one-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: none;
+  padding: 4px 7px;
+  font-size: 11px;
+}
+.btn.sm { padding: 4px 10px; font-size: 11.5px; }
+
+/* ── Banner / inline notice ──────────────────────────────────────────── */
+.banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  font-size: 13px;
+  color: var(--text);
+}
+.banner.subtle { background: var(--surface-2); }
+.banner .link { color: var(--accent); text-decoration: underline; }
+
+/* ── Slack badge ─────────────────────────────────────────────────────── */
+.badge.slack {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 3px 7px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  color: var(--muted);
+  text-transform: uppercase;
+}
+.badge.slack.ok {
+  color: var(--green);
+  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
+  background: color-mix(in srgb, var(--green) 6%, transparent);
+}
+a.badge.slack:hover { color: var(--text); background: var(--surface-2); }
+
+/* ── Checkbox row ────────────────────────────────────────────────────── */
+.checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--text);
+}
+.checkbox-row input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--accent);
+}
+
+/* ── HITL settings form ──────────────────────────────────────────────── */
+.hitl-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.hitl-field { display: flex; flex-direction: column; gap: 6px; }
+.hitl-field label {
+  font-size: 11.5px;
+  color: var(--muted);
+  font-family: var(--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.hitl-field input {
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  padding: 8px 11px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  outline: none;
+  width: 100%;
+  max-width: 560px;
+}
+.hitl-field input:focus { border-color: var(--accent); }
+
+.hitl-toggle {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px;
+  align-items: start;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  cursor: pointer;
+  max-width: 560px;
+  transition: border-color 100ms, background 100ms;
+}
+.hitl-toggle:hover { border-color: var(--line-2); }
+.hitl-toggle input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  margin-top: 2px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+.hitl-toggle-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.hitl-toggle-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+}
+.hitl-toggle-sub {
+  font-size: 11.5px;
+  color: var(--dim);
+  line-height: 1.5;
+}
+.hitl-toggle-sub code {
+  font-family: var(--mono);
+  font-size: 11px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  padding: 0 4px;
+  color: var(--muted);
+}
+
+.hitl-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  margin-top: 4px;
+}
+.hitl-help {
+  font-size: 11.5px;
+  color: var(--dim);
+  line-height: 1.55;
+  flex: 1 1 240px;
+}
+.hitl-help a { color: var(--accent); }
+.hitl-help a:hover { text-decoration: underline; }
+
+/* ── Tester ──────────────────────────────────────────────────────────── */
+.tester {
+  margin-top: 14px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.tester .head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.tester .head h3 {
+  font-size: 12.5px;
+  font-weight: 550;
+  color: var(--text);
+}
+.tester .head .meta { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
+.tester .form {
+  padding: 12px;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 8px;
+  border-bottom: 1px solid var(--line);
+}
+.tester .form input {
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  padding: 7px 11px;
+  outline: none;
+}
+.tester .form input:focus { border-color: var(--accent); }
+.tester-results { padding: 8px 6px; }
+.tester-result-row {
+  display: grid;
+  grid-template-columns: 64px 80px 1fr 80px;
+  gap: 12px;
+  padding: 8px 12px;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted);
+  border-radius: 2px;
+}
+.tester-result-row .sim { color: var(--text); font-feature-settings: 'tnum'; font-weight: 500; }
+.tester-result-row .sim-bar {
+  height: 4px;
+  background: var(--surface-2);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+.tester-result-row .sim-bar::after {
+  content: '';
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--dim);
+  width: var(--w, 0%);
+  border-radius: 2px;
+}
+.tester-result-row .desc { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); }
+.tester-result-row .verdict-pill {
+  font-size: 10px;
+  padding: 2px 7px;
+  border-radius: 2px;
+  text-align: center;
+  border: 1px solid var(--line-2);
+  color: var(--dim);
+  background: var(--surface-2);
+}
+.tester-result-row.match.block .verdict-pill {
+  color: var(--red);
+  border-color: rgba(192,57,43,0.3);
+  background: rgba(192,57,43,0.06);
+}
+.tester-result-row.match.allow .verdict-pill {
+  color: var(--green);
+  border-color: rgba(47,143,91,0.3);
+  background: rgba(47,143,91,0.06);
+}
+.tester-result-row.match.block .sim-bar::after { background: var(--red); }
+.tester-result-row.match.allow .sim-bar::after { background: var(--green); }
+
+/* ── Charts ──────────────────────────────────────────────────────────── */
+.echart { width: 100%; height: 220px; }
+.echart.compact { height: 180px; }
+.echart.mini { height: 130px; }
+
+/* ── Distribution + ranking lists ────────────────────────────────────── */
+.dist-list { display: flex; flex-direction: column; gap: 10px; }
+.dist-row {
+  display: grid;
+  grid-template-columns: 90px 1fr 50px;
+  gap: 12px;
+  align-items: center;
+}
+.dist-row .label { font-family: var(--mono); font-size: 11px; color: var(--muted); }
+.dist-row .bar {
+  height: 6px;
+  background: var(--surface-2);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.dist-row .bar > span { display: block; height: 100%; background: var(--accent); width: var(--w, 0%); }
+.dist-row .num { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--text); font-feature-settings: 'tnum'; }
+
+.action-list { display: flex; flex-direction: column; }
+.action-item {
+  display: grid;
+  grid-template-columns: 22px 1fr 50px;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+  transition: background 100ms;
+}
+.action-item:hover { background: var(--surface-2); }
+.action-item:last-child { border-bottom: none; }
+.action-item .rank { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
+.action-item .cmd {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.action-item .cmd small { color: var(--dim); font-size: 10.5px; margin-left: 6px; }
+.action-item .count { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--text); }
+.action-item.session-item { grid-template-columns: 80px minmax(0, 1fr) 18px; }
+.action-item.session-item .rank { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.action-item.session-item .count { display: flex; justify-content: flex-end; color: var(--dim); }
+.action-item.session-item .count .svg-icon { width: 12px; height: 12px; }
+
+/* ── Recent runs (overview) ──────────────────────────────────────────── */
+.recent-list { display: flex; flex-direction: column; }
+.recent-item {
+  display: grid;
+  grid-template-columns: 78px 78px 1fr 100px;
+  align-items: center;
+  gap: 14px;
+  padding: 9px 16px;
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+  transition: background 100ms;
+  font-size: 12.5px;
+  font-feature-settings: 'tnum';
+}
+.recent-item:hover { background: var(--surface-2); }
+.recent-item:last-child { border-bottom: none; }
+.recent-item .time { color: var(--text); font-family: var(--mono); font-size: 11.5px; }
+.recent-item .tool { font-family: var(--mono); font-size: 11px; color: var(--muted); }
+.recent-item .summary {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.recent-item.denied .summary { color: var(--red); }
+.recent-item .verdict { justify-self: end; }
+
+/* ── Docs ────────────────────────────────────────────────────────────── */
+.docs-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 16px;
+  align-items: start;
+}
+.docs-main { display: flex; flex-direction: column; gap: 12px; }
+.docs-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px; }
+.doc-card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 18px;
+}
+.doc-card.compact { padding: 14px; }
+.doc-eyebrow {
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 10.5px;
+  margin-bottom: 6px;
+}
+.doc-card h2,
+.doc-card h3 {
+  color: var(--text);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.3;
+  margin-bottom: 6px;
+}
+.doc-card h3 { font-size: 13px; }
+.doc-card p { color: var(--muted); font-size: 12.5px; max-width: 720px; }
+.doc-card code {
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  font-family: var(--mono);
+  font-size: 0.92em;
+  padding: 1px 5px;
+}
+.doc-card pre {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  color: var(--text);
+  margin-top: 10px;
+  overflow: auto;
+  padding: 12px;
+}
+.doc-card pre code {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  display: block;
+  font-size: 11.5px;
+  line-height: 1.6;
+  padding: 0;
+}
+.doc-note { margin-top: 10px; }
+.tool-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 12px;
+}
+.tool-chip {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  padding: 9px 11px;
+}
+.tool-chip code { display: inline-block; margin-bottom: 3px; }
+.tool-chip span { color: var(--muted); display: block; font-size: 11.5px; line-height: 1.45; }
+.env-list { display: flex; flex-direction: column; gap: 8px; }
+.env-list dt { color: var(--text); font-family: var(--mono); font-size: 11px; font-weight: 500; }
+.env-list dd { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
+
+/* ── Usage chip + Settings ───────────────────────────────────────────── */
+.usage-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  background: var(--surface);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
+  transition: border-color 100ms, color 100ms;
+}
+.usage-chip:hover { border-color: var(--line-2); color: var(--text); }
+.usage-chip .bar {
+  display: block;
+  width: 60px;
+  height: 4px;
+  background: var(--surface-2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.usage-chip .bar > span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+}
+.usage-chip.warn .bar > span { background: var(--amber); }
+.usage-chip.over .bar > span { background: var(--red); }
+.usage-chip.over { color: var(--red); border-color: rgba(192,57,43,0.4); }
+.usage-chip .num { color: var(--text); font-feature-settings: 'tnum'; }
+
+.usage-large .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 24px;
+  margin-bottom: 14px;
+}
+.usage-large .num {
+  font-size: 38px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  color: var(--text);
+  font-feature-settings: 'tnum';
+  line-height: 1;
+}
+.usage-large .num .of { color: var(--dim); font-weight: 400; font-size: 22px; }
+.usage-large .meta { text-align: right; color: var(--muted); font-size: 12px; }
+.usage-large .plan-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+.usage-bar {
+  height: 8px;
+  background: var(--surface-2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.usage-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transition: width 200ms ease;
+}
+.usage-bar.warn > span { background: var(--amber); }
+.usage-bar.over > span { background: var(--red); }
+.usage-large .footnote,
+.settings-form ~ .footnote,
+.card .body .footnote {
+  display: block;
+  margin-top: 12px;
+  font-size: 11.5px;
+  color: var(--dim);
+  line-height: 1.55;
+}
+.footnote code {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  padding: 1px 5px;
+  border-radius: 2px;
+  font-family: var(--mono);
+  font-size: 0.92em;
+}
+
+dl.kv {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  row-gap: 8px;
+  column-gap: 12px;
+  margin-bottom: 14px;
+}
+dl.kv dt {
+  color: var(--dim);
+  font-size: 11.5px;
+  font-family: var(--mono);
+}
+dl.kv dd { color: var(--text); font-size: 12.5px; }
+dl.kv dd.mono { font-family: var(--mono); font-size: 11.5px; }
+
+.settings-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.settings-form {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  align-items: end;
+}
+.settings-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11.5px;
+  color: var(--muted);
+  font-family: var(--mono);
+}
+.settings-form input {
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  padding: 7px 10px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  outline: none;
+  transition: border-color 100ms;
+}
+.settings-form input:focus { border-color: var(--accent); }
+
+table.kv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+}
+table.kv-table thead th {
+  text-align: left;
+  color: var(--dim);
+  font-weight: 500;
+  font-size: 11px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+table.kv-table tbody td {
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--line);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-feature-settings: 'tnum';
+}
+table.kv-table tbody td.num { font-weight: 500; }
+table.kv-table tbody td.dim { color: var(--dim); }
+table.kv-table tbody tr:last-child td { border-bottom: none; }
+
+/* ── Command palette ─────────────────────────────────────────────────── */
+.palette-scrim {
+  position: fixed; inset: 0;
+  background: rgba(15,17,23,0.20);
+  z-index: 20;
+  display: none;
+}
+.palette-scrim.open { display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
+.palette {
+  width: min(520px, 90vw);
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 2px;
+  overflow: hidden;
+  box-shadow: 0 18px 48px rgba(15,17,23,0.18);
+}
+.palette input {
+  width: 100%;
+  padding: 14px 18px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--line);
+  color: var(--text);
+  font-size: 14px;
+  outline: none;
+}
+.palette input::placeholder { color: var(--dim); }
+.palette ul { list-style: none; max-height: 320px; overflow: auto; }
+.palette li {
+  padding: 9px 18px;
+  font-size: 13px;
+  color: var(--muted);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.palette li:hover, .palette li.active { background: var(--surface-2); color: var(--text); }
+.palette li .nav { font-family: var(--mono); font-size: 10px; color: var(--dim); }
+
+/* ── Responsive ──────────────────────────────────────────────────────── */
+@media (max-width: 1180px) {
+  .kpi-grid.five { grid-template-columns: repeat(3, 1fr); }
+  .kpi-grid.five .kpi:nth-child(3n) { border-right: none; }
+  .kpi-grid.five .kpi:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
+}
+@media (max-width: 980px) {
+  .kpi-grid,
+  .kpi-grid.five { grid-template-columns: repeat(2, 1fr); }
+  .kpi { border-right: none; border-bottom: 1px solid var(--line); }
+  .kpi:nth-child(2n) { border-right: none; }
+  .kpi:nth-last-child(-n+2) { border-bottom: none; }
+  .two-col, .three-col, .docs-layout, .policy-split { grid-template-columns: 1fr; }
+  .docs-aside { position: static; }
+  .tool-grid { grid-template-columns: 1fr; }
+  .policy-form { grid-template-columns: 1fr 1fr; }
+  .policy-form input[type=text] { grid-column: 1 / -1; }
+  .policy-form .btn { grid-column: 1 / -1; }
+  .policy-row { grid-template-columns: 70px 1fr auto auto; row-gap: 6px; }
+  .policy-row .hits, .policy-row .desc { grid-column: 1 / -1; }
+  table.events td.session, table.events th.session { display: none; }
+  .appbar {
+    position: sticky;
+    top: 0;
+    width: auto;
+    height: auto;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 14px;
+    gap: 10px;
+    border-right: none;
+    border-bottom: 1px solid var(--line);
+  }
+  .brand { padding: 0; }
+  nav.tabs {
+    flex-direction: row;
+    overflow-x: auto;
+    flex: 1;
+  }
+  nav.tabs.sidebar-foot {
+    flex: 0 0 auto;
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+    border-left: 1px solid var(--line);
+    padding-left: 8px;
+  }
+  .sidebar-usage { display: none !important; }
+  nav.tabs a { padding: 6px 10px; }
+  .page { margin-left: 0; padding: 22px 18px 60px; }
+  .recent-item { grid-template-columns: 64px 1fr 90px; }
+  .recent-item .tool { display: none; }
+}
+`;
+//# sourceMappingURL=styles.js.map