/* ============================================================
   Design tokens
   ============================================================ */
:root[data-theme="dark"]{
  --bg:         #0a0a0a;
  --bg-elev:    #111113;
  --bg-elev-2:  #17171a;
  --bg-hover:   #1a1a1e;
  --border:     #1f1f22;
  --border-strong: #2a2a2f;
  --text:       #ededed;
  --text-2:     #b8b8be;
  --muted:      #7a7a83;
  --muted-2:    #52525a;

  --accent:     #3b82f6;
  --accent-fg:  #ffffff;
  --accent-soft: rgba(59,130,246,.12);
  --accent-ring: rgba(59,130,246,.28);

  --ok:         #22c55e;
  --ok-soft:    rgba(34,197,94,.14);
  --warn:       #f59e0b;
  --warn-soft:  rgba(245,158,11,.14);
  --fail:       #ef4444;
  --fail-soft:  rgba(239,68,68,.14);
  --info:       #60a5fa;
  --info-soft:  rgba(96,165,250,.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);

  --grid-line: rgba(255,255,255,.04);
}
:root[data-theme="light"]{
  --bg:         #fafafa;
  --bg-elev:    #ffffff;
  --bg-elev-2:  #f4f4f5;
  --bg-hover:   #f4f4f5;
  --border:     #e8e8ea;
  --border-strong: #d4d4d8;
  --text:       #09090b;
  --text-2:     #3f3f46;
  --muted:      #71717a;
  --muted-2:    #a1a1aa;

  --accent:     #2563eb;
  --accent-fg:  #ffffff;
  --accent-soft: rgba(37,99,235,.10);
  --accent-ring: rgba(37,99,235,.20);

  --ok:         #16a34a;
  --ok-soft:    rgba(22,163,74,.12);
  --warn:       #d97706;
  --warn-soft:  rgba(217,119,6,.12);
  --fail:       #dc2626;
  --fail-soft:  rgba(220,38,38,.12);
  --info:       #2563eb;
  --info-soft:  rgba(37,99,235,.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 4px 16px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);

  --grid-line: rgba(0,0,0,.04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Geist','Inter',system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01';
  letter-spacing:-.005em;
}
.mono{font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;font-feature-settings:'zero'}

button{font-family:inherit;background:transparent;color:inherit;border:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
input,select{font-family:inherit;color:inherit}

/* ============================================================
   Shell
   ============================================================ */
.app{min-height:100vh;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:20px;
  padding:0 24px;height:56px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:-.01em}
.brand-mark{
  width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,var(--text) 0%,var(--muted) 100%);
  position:relative;display:grid;place-items:center;
}
.brand-mark::after{
  content:"";width:8px;height:8px;border-radius:2px;background:var(--bg);
}
.brand .ver{
  font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;
  color:var(--muted);padding:1px 6px;border:1px solid var(--border);border-radius:4px;
}

.crumbs{
  display:flex;align-items:center;gap:6px;
  color:var(--muted);font-size:13px;font-family:'Geist Mono',monospace;
}
.crumbs .sep{color:var(--muted-2)}
.crumbs .cur{color:var(--text-2)}

.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.tenant-picker{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg-elev);font-size:13px;
  transition:border-color .15s, background .15s;
}
.tenant-picker:hover{border-color:var(--border-strong);background:var(--bg-elev-2)}
.tenant-picker .label{color:var(--text)}
.tenant-picker .chev{color:var(--muted);font-size:10px}

.icon-btn{
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:8px;background:var(--bg-elev);
  color:var(--text-2);
  transition:all .15s;
}
.icon-btn:hover{background:var(--bg-elev-2);border-color:var(--border-strong);color:var(--text)}
.icon-btn svg{width:15px;height:15px}

.status-pill{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:6px;
  background:var(--ok-soft);color:var(--ok);
  font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.02em;
}
.status-pill .d{width:6px;height:6px;border-radius:50%;background:var(--ok);position:relative}
.status-pill .d::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:var(--ok);opacity:.4;animation:pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(.6);opacity:.6}
  100%{transform:scale(2.2);opacity:0}
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs{
  display:flex;gap:2px;
  padding:0 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;font-size:13px;color:var(--muted);
  border-bottom:2px solid transparent;
  white-space:nowrap;font-weight:500;
  transition:color .15s,border-color .15s;
  margin-bottom:-1px;
}
.tab:hover{color:var(--text-2)}
.tab.active{color:var(--text);border-bottom-color:var(--text)}
.tab .n{font-family:'Geist Mono',monospace;font-size:10px;color:var(--muted-2);font-weight:500}
.tab.active .n{color:var(--muted)}

/* ============================================================
   Body
   ============================================================ */
.body{padding:24px;max-width:1440px;margin:0 auto;width:100%}

.page-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:24px;flex-wrap:wrap;
}
.page-header h1{
  font-size:24px;font-weight:600;margin:0;letter-spacing:-.02em;line-height:1.2;
}
.page-header .sub{color:var(--muted);font-size:13px;margin-top:4px}

.header-meta{
  display:flex;align-items:center;gap:12px;
  font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);
}
.header-meta .sep{width:1px;height:12px;background:var(--border-strong)}

/* ============================================================
   Cards / panels
   ============================================================ */
.card{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.card-hdr{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.card-hdr h3{
  font-size:13px;font-weight:600;margin:0;
  letter-spacing:-.005em;
}
.card-hdr .tag{
  font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;
  color:var(--muted);padding:2px 7px;border:1px solid var(--border);border-radius:4px;
}
.card-hdr .actions{margin-left:auto;display:flex;gap:6px}

/* Grid helpers */
.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}

@media (max-width:1100px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-21{grid-template-columns:1fr}
}

/* ============================================================
   KPI
   ============================================================ */
.kpi{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  position:relative;overflow:hidden;
  transition:border-color .15s;
  box-shadow:var(--shadow-sm);
}
.kpi:hover{border-color:var(--border-strong)}
.kpi .label{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);font-weight:500;
  margin-bottom:8px;
}
.kpi .label .dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.kpi .label .dot.ok{background:var(--ok)}
.kpi .label .dot.warn{background:var(--warn)}
.kpi .label .dot.fail{background:var(--fail)}
.kpi .val{
  font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:8px;
}
.kpi .val .unit{font-size:13px;color:var(--muted);font-weight:500}
.kpi .delta{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;
  margin-top:6px;
}
.kpi .delta.up{color:var(--ok)}
.kpi .delta.down{color:var(--fail)}
.kpi .delta.flat{color:var(--muted)}
.kpi .spark{position:absolute;right:0;bottom:0;left:50%;height:48px;opacity:.9;pointer-events:none}

/* ============================================================
   Pipeline flow
   ============================================================ */
.pipeline-card{padding:20px}
.pipeline{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  position:relative;
  padding:8px 0;
}
.stage{
  position:relative;
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 14px 12px;
  background:var(--bg-elev-2);
  cursor:pointer;
  transition:all .18s;
  display:flex;flex-direction:column;gap:10px;
  min-height:112px;
  overflow:hidden;
}
.stage:hover{
  border-color:var(--border-strong);
  background:var(--bg-hover);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.stage .st-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stage .st-name{
  font-size:12px;color:var(--muted);font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;
}
.stage .st-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-soft);
}
.stage .st-val{
  font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stage .st-sub{
  font-family:'Geist Mono',monospace;font-size:10px;color:var(--muted);
  letter-spacing:.02em;
}
.stage.warn{border-color:rgba(245,158,11,.4);background:var(--warn-soft)}
.stage.warn .st-dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.stage.fail{border-color:rgba(239,68,68,.5);background:var(--fail-soft)}
.stage.fail .st-dot{background:var(--fail);box-shadow:0 0 0 3px var(--fail-soft)}
.stage .st-dot.live{animation:dot-pulse 2s ease-in-out infinite}
@keyframes dot-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.7}
}

/* animated flow particles along connectors */
.flow-svg{position:absolute;inset:0;pointer-events:none;z-index:1}

/* ============================================================
   Badges
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 7px;border-radius:4px;
  font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.02em;
  background:var(--bg-elev-2);color:var(--text-2);
  border:1px solid var(--border);
  white-space:nowrap;
}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge.fail{background:var(--fail-soft);color:var(--fail);border-color:transparent}
.badge.info{background:var(--info-soft);color:var(--info);border-color:transparent}
.badge.idle{background:var(--bg-elev-2);color:var(--muted);border-color:var(--border)}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted-2);vertical-align:middle}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.fail{background:var(--fail)}
.dot.info{background:var(--info)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  font-size:13px;font-weight:500;
  background:var(--bg-elev);color:var(--text-2);
  border:1px solid var(--border);
  transition:all .15s;cursor:pointer;
  white-space:nowrap;
}
.btn:hover{background:var(--bg-elev-2);border-color:var(--border-strong);color:var(--text)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:transparent}
.btn.primary:hover{background:color-mix(in oklab,var(--accent) 88%,white);color:var(--accent-fg)}
.btn.ghost{background:transparent}
.btn.sm{padding:4px 8px;font-size:12px;border-radius:6px}
.btn.icon{padding:6px}

/* ============================================================
   Tables
   ============================================================ */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;font-weight:500;font-size:11px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  padding:10px 12px;border-bottom:1px solid var(--border);
  background:var(--bg-elev);position:sticky;top:0;
}
.table td{
  padding:10px 12px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--bg-hover)}
.table .id{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted)}
.table.compact td,.table.compact th{padding:7px 10px;font-size:12px}

.card.table-card{padding:0;overflow:hidden}
.card.table-card .card-hdr{padding:14px 16px;margin:0;border-bottom:1px solid var(--border)}
.card.table-card .tbl-wrap{max-height:320px;overflow:auto}

/* ============================================================
   Sparklines & bars
   ============================================================ */
.spark{width:100%;height:28px;display:block}
.bars{
  display:flex;align-items:flex-end;gap:2px;
  height:140px;padding:8px 0 0;
  border-bottom:1px solid var(--border);
  position:relative;
}
.bars::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, transparent 0%, transparent 24%, var(--grid-line) 25%, transparent 26%) 0 0 / 100% 25%;
}
.bars .b{
  flex:1;min-width:3px;
  background:var(--text-2);opacity:.9;
  border-radius:2px 2px 0 0;
  position:relative;
  transition:opacity .15s;
}
.bars .b:hover{opacity:1}
.bars .b.warn{background:var(--warn)}
.bars .b.fail{background:var(--fail)}
.bars .b.accent{background:var(--accent)}

.bars-legend{
  display:flex;gap:14px;font-size:11px;color:var(--muted);
  margin-top:10px;font-family:'Geist Mono',monospace;
}
.bars-legend span{display:inline-flex;align-items:center;gap:5px}
.bars-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}

/* ============================================================
   Lists / health rows
   ============================================================ */
.row-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.row-item:last-child{border-bottom:none}
.row-item .meta{margin-left:auto;font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted)}

/* ============================================================
   Live feed (mini stream on overview)
   ============================================================ */
.feed-row{
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--border);
  font-size:13px;
}
.feed-row:last-child{border-bottom:none}
.feed-row .ts{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted)}
.feed-row .desc{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-row .desc b{color:var(--text);font-weight:500}
.feed-row.new{animation:slide-in .35s ease-out}
@keyframes slide-in{
  from{opacity:0;transform:translateY(-6px);background:var(--accent-soft)}
  to{opacity:1;transform:translateY(0);background:transparent}
}

/* ============================================================
   Tweaks panel
   ============================================================ */
.tweaks{
  position:fixed;right:20px;bottom:20px;
  width:300px;
  background:var(--bg-elev);border:1px solid var(--border-strong);
  border-radius:12px;padding:16px;
  box-shadow:var(--shadow-lg);
  z-index:200;display:none;
  font-size:13px;
}
.tweaks.open{display:block;animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tweaks h4{font-size:13px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.tweaks h4::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tweaks .close{position:absolute;top:10px;right:10px;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--muted)}
.tweaks .close:hover{background:var(--bg-hover);color:var(--text)}
.tweaks .tw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.tweaks .tw-row:last-of-type{border-bottom:none}
.tweaks label{color:var(--text-2);font-size:13px}
.tweaks select,.tweaks input[type=range]{
  background:var(--bg-elev-2);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  padding:4px 6px;font-size:12px;font-family:inherit;
}
.tweaks input[type=range]{padding:0;width:120px}
.tweaks input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}

/* ============================================================
   Theme toggle
   ============================================================ */
.theme-toggle{
  display:flex;background:var(--bg-elev-2);border:1px solid var(--border);
  border-radius:8px;padding:2px;
}
.theme-toggle button{
  padding:4px 8px;border-radius:6px;font-size:11px;color:var(--muted);
  display:grid;place-items:center;width:28px;height:24px;
}
.theme-toggle button.on{background:var(--bg-elev);color:var(--text);box-shadow:var(--shadow-sm)}

/* ============================================================
   Misc
   ============================================================ */
.muted{color:var(--muted)}
.text-2{color:var(--text-2)}
hr.div{border:none;border-top:1px solid var(--border);margin:24px 0}

/* focus ring */
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent-ring);outline-offset:2px;
}

/* tenant chip rendered inside tables */
.tenant-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;
}
.tenant-chip .av{
  width:18px;height:18px;border-radius:4px;
  display:grid;place-items:center;
  font-size:9px;font-weight:600;letter-spacing:-.02em;
  color:#fff;
}

/* cost meter */
.cost-bar{
  height:6px;border-radius:3px;background:var(--bg-elev-2);overflow:hidden;margin-top:6px;
}
.cost-bar>span{display:block;height:100%;border-radius:3px;background:var(--accent)}

/* ============================================================
   02 Stream
   ============================================================ */
.screen{display:none}
.screen.active{display:block}

.stream-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:16px;
  align-items:start;
}
@media (max-width:1200px){ .stream-shell{grid-template-columns:1fr} }

.toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--border);border-radius:10px;
  background:var(--bg-elev);
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.toolbar .search{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:220px;
  padding:5px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.toolbar .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.toolbar .search svg{width:14px;height:14px;color:var(--muted);flex:none}
.toolbar .search input{border:none;outline:none;background:transparent;flex:1;font-size:13px}
.toolbar .search input::placeholder{color:var(--muted)}
.toolbar .kbd{
  font-family:'Geist Mono',monospace;font-size:10px;color:var(--muted);
  padding:1px 5px;border:1px solid var(--border);border-radius:4px;background:var(--bg-elev-2);
}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:7px;
  font-size:12px;color:var(--text-2);
  background:var(--bg-elev-2);border:1px solid var(--border);
  cursor:pointer;transition:all .15s;
  user-select:none;white-space:nowrap;
}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip .x{color:var(--muted);font-size:10px;margin-left:2px}
.chip.on .x{color:var(--accent);opacity:.7}
.chip .count{font-family:'Geist Mono',monospace;font-size:10px;color:var(--muted);margin-left:2px}

.filter-row{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-bottom:14px;
}
.filter-row .sep{width:1px;height:18px;background:var(--border);margin:0 4px}
.filter-row .label{font-size:11px;color:var(--muted);font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.04em}

.stream-stats{
  display:flex;align-items:center;gap:16px;
  padding:10px 14px;
  border:1px solid var(--border);border-radius:10px;background:var(--bg-elev);
  font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.stream-stats b{color:var(--text);font-weight:600;font-size:13px}
.stream-stats .sep{width:1px;height:14px;background:var(--border)}

/* Stream table */
.stream-card{padding:0;overflow:hidden}
.stream-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.stream-tbl col.c-time{width:88px}
.stream-tbl col.c-tenant{width:46px}
.stream-tbl col.c-src{width:190px}
.stream-tbl col.c-cat{width:130px}
.stream-tbl col.c-id{width:100px}
.stream-tbl col.c-act{width:40px}
.stream-tbl th{
  text-align:left;font-weight:500;font-size:10px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
  padding:9px 12px;border-bottom:1px solid var(--border);
  background:var(--bg-elev);position:sticky;top:0;z-index:2;
}
.stream-tbl td{
  padding:10px 12px;border-bottom:1px solid var(--border);
  vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stream-tbl tr{cursor:pointer;transition:background .1s}
.stream-tbl tr:hover td{background:var(--bg-hover)}
.stream-tbl tr.sel td{background:var(--accent-soft)}
.stream-tbl tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.stream-tbl .ts{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted)}
.stream-tbl .av-c{display:inline-block;width:22px;height:22px;border-radius:5px;color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;line-height:1}
.stream-tbl .src-name{font-family:'Geist Mono',monospace;font-size:11px;color:var(--text-2)}
.stream-tbl .src-sub{font-size:11px;color:var(--muted)}
.stream-tbl .evt-id{font-family:'Geist Mono',monospace;font-size:10px;color:var(--muted)}
.stream-tbl .act{
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:6px;color:var(--muted);background:transparent;border:1px solid transparent;
}
.stream-tbl tr:hover .act{border-color:var(--border);color:var(--text-2);background:var(--bg-elev-2)}
.stream-tbl tr.new-row{animation:row-in .4s ease-out}
@keyframes row-in{
  0%{background:var(--accent-soft);opacity:0;transform:translateY(-4px)}
  100%{background:transparent;opacity:1;transform:translateY(0)}
}

.stream-footer{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  border-top:1px solid var(--border);
  font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);
}

/* Right column */
.side-col{display:flex;flex-direction:column;gap:14px}
.mini-kpi{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.mini-kpi .val{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mini-kpi .unit{font-size:12px;color:var(--muted);font-family:'Geist Mono',monospace}

.cat-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.cat-row .n{flex:1;min-width:0}
.cat-row .bar{flex:0 0 80px;height:6px;background:var(--bg-elev-2);border-radius:3px;overflow:hidden}
.cat-row .bar>span{display:block;height:100%;background:var(--accent);border-radius:3px}
.cat-row .num{font-family:'Geist Mono',monospace;font-size:12px;color:var(--text-2);width:42px;text-align:right;font-variant-numeric:tabular-nums}

/* Selected event details */
.evt-detail .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.evt-detail .row:last-child{border-bottom:none}
.evt-detail .row .k{color:var(--muted);font-size:11px;font-family:'Geist Mono',monospace}
.evt-detail .row .v{color:var(--text);font-family:'Geist Mono',monospace;font-size:11px;text-align:right;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.evt-detail .desc-box{
  margin-top:10px;padding:10px;border-radius:8px;background:var(--bg-elev-2);
  font-size:12px;color:var(--text-2);line-height:1.5;border:1px solid var(--border);
}
.evt-detail .actions-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:30px 10px;color:var(--muted);text-align:center;font-size:12px;
}
.empty svg{width:28px;height:28px;color:var(--muted-2);opacity:.6}

/* Frequency mini-chart */
.freq-bars{display:flex;align-items:flex-end;gap:2px;height:60px;padding:4px 0;border-bottom:1px solid var(--border)}
.freq-bars .b{flex:1;background:var(--accent);opacity:.8;border-radius:2px 2px 0 0;min-width:2px;transition:height .3s}

/* Density */
body.compact .body{padding:16px}
body.compact .kpi{padding:12px}
body.compact .kpi .val{font-size:22px}
body.compact .card{padding:12px}
body.compact .stage{min-height:96px;padding:10px 12px}
body.compact .table td,body.compact .table th{padding:6px 10px;font-size:12px}
body.compact .grid{gap:12px}

/* ============================================================
   03 Tenants
   ============================================================ */
.tenant-card{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
  transition:all .18s;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.tenant-card:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow)}
.tenant-card .t-top{display:flex;align-items:center;gap:12px}
.tenant-card .t-avatar{
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:600;letter-spacing:-.02em;
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.2);
}
.tenant-card .t-name{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.tenant-card .t-id{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);margin-top:2px}
.tenant-card .t-meta{display:flex;gap:6px;align-items:center;margin-top:4px}

.tenant-card .t-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border-radius:8px;overflow:hidden;
  border:1px solid var(--border);
}
.tenant-card .t-stat{
  background:var(--bg-elev-2);padding:10px;
  display:flex;flex-direction:column;gap:4px;
}
.tenant-card .t-stat .v{font-size:18px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;line-height:1}
.tenant-card .t-stat .l{font-size:10px;color:var(--muted);font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.04em}

.tenant-card .src-grid{display:flex;flex-wrap:wrap;gap:4px}
.tenant-card .src-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Geist Mono',monospace;font-size:10px;
  padding:3px 7px;border-radius:5px;
  background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text-2);
}
.tenant-card .src-pill .d{width:5px;height:5px;border-radius:50%}

.tenant-card .t-actions{
  display:flex;gap:6px;margin-top:auto;padding-top:6px;border-top:1px solid var(--border);
}

.tenant-card.add{
  border-style:dashed;align-items:center;justify-content:center;
  min-height:220px;color:var(--muted);cursor:pointer;
}
.tenant-card.add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tenant-card.add .plus{
  width:40px;height:40px;border-radius:10px;background:var(--bg-elev-2);
  display:grid;place-items:center;font-size:22px;font-weight:300;
}

/* ============================================================
   04 Sources
   ============================================================ */
.src-layout{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;
  align-items:start;
}
@media (max-width:1200px){.src-layout{grid-template-columns:1fr}}

.src-list{overflow:hidden}
.src-list table{width:100%;border-collapse:collapse;font-size:13px}
.src-list th{
  text-align:left;font-weight:500;font-size:10px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
  padding:10px 12px;border-bottom:1px solid var(--border);
  background:var(--bg-elev);
}
.src-list td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.src-list tr{cursor:pointer}
.src-list tr:hover td{background:var(--bg-hover)}
.src-list tr.sel td{background:var(--accent-soft)}
.src-list tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.src-list .s-id{font-family:'Geist Mono',monospace;font-size:12px;color:var(--text-2)}
.src-list .s-rate{font-family:'Geist Mono',monospace;font-size:11px;color:var(--text-2)}

.src-detail .big-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.src-detail .big-stats .s{padding:10px 12px;background:var(--bg-elev-2);border-radius:8px;border:1px solid var(--border)}
.src-detail .big-stats .v{font-size:20px;font-weight:600;letter-spacing:-.01em}
.src-detail .big-stats .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-family:'Geist Mono',monospace;margin-top:2px}

.src-type-icon{
  width:38px;height:38px;border-radius:10px;background:var(--bg-elev-2);
  display:grid;place-items:center;color:var(--text-2);flex:none;
  border:1px solid var(--border);
}
.src-type-icon svg{width:18px;height:18px}

.prompt-box{
  background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;
  padding:12px;font-family:'Geist Mono',monospace;font-size:11.5px;
  line-height:1.6;color:var(--text-2);white-space:pre-wrap;word-break:break-word;
  max-height:200px;overflow:auto;
}
.prompt-box .add{background:var(--ok-soft);color:var(--ok);display:inline;padding:1px 2px;border-radius:2px}
.prompt-box .rm{background:var(--fail-soft);color:var(--fail);display:inline;padding:1px 2px;border-radius:2px;text-decoration:line-through}

/* ============================================================
   05 Queue / DLQ
   ============================================================ */
.q-bars{height:160px}
.dlq-row{
  border:1px solid var(--border);border-radius:10px;background:var(--bg-elev);
  margin-bottom:10px;overflow:hidden;
  transition:border-color .15s;
}
.dlq-row.open{border-color:var(--border-strong)}
.dlq-summary{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;cursor:pointer;
  font-size:13px;
}
.dlq-summary:hover{background:var(--bg-hover)}
.dlq-summary .chev{margin-left:auto;color:var(--muted);transition:transform .2s}
.dlq-row.open .dlq-summary .chev{transform:rotate(90deg)}
.dlq-drawer{padding:14px;border-top:1px solid var(--border);background:var(--bg-elev-2);display:none}
.dlq-row.open .dlq-drawer{display:block}
.dlq-attempts{list-style:none;padding:0;margin:8px 0;font-size:12px}
.dlq-attempts li{padding:6px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.dlq-attempts li:last-child{border-bottom:none}

.worker-dot{
  position:relative;width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;
}
.worker-dot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:var(--ok);opacity:.4;animation:pulse-ring 2.5s ease-out infinite;
}
.worker-dot.warn{background:var(--warn)}
.worker-dot.warn::after{background:var(--warn)}

/* ============================================================
   06 Event detail
   ============================================================ */
.event-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1200px){.event-layout{grid-template-columns:1fr}}

.timeline{position:relative;padding-left:28px;margin:4px 0 0}
.timeline::before{
  content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1.5px;
  background:linear-gradient(to bottom,var(--border-strong),var(--border));
}
.tl-step{position:relative;padding:6px 0 16px}
.tl-step::before{
  content:"";position:absolute;left:-25px;top:6px;
  width:18px;height:18px;border-radius:50%;
  background:var(--bg);border:2px solid var(--border-strong);
}
.tl-step::after{
  content:"";position:absolute;left:-21px;top:10px;
  width:10px;height:10px;border-radius:50%;background:var(--muted-2);
}
.tl-step.ok::before{border-color:var(--ok)}
.tl-step.ok::after{background:var(--ok)}
.tl-step.warn::before{border-color:var(--warn)}
.tl-step.warn::after{background:var(--warn)}
.tl-step.fail::before{border-color:var(--fail)}
.tl-step.fail::after{background:var(--fail)}
.tl-step .t-title{font-size:13px;font-weight:600;letter-spacing:-.005em;margin:0}
.tl-step .t-meta{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);margin-top:2px}
.tl-step .t-body{font-size:12px;color:var(--text-2);margin-top:6px;line-height:1.5}
.tl-step .t-dur{
  position:absolute;right:0;top:4px;
  font-family:'Geist Mono',monospace;font-size:10px;color:var(--muted);
  padding:2px 7px;background:var(--bg-elev-2);border-radius:4px;border:1px solid var(--border);
}

.kv-list{display:flex;flex-direction:column;gap:4px}
.kv-list .row{
  display:flex;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;
}
.kv-list .row:last-child{border-bottom:none}
.kv-list .k{color:var(--muted);font-size:11px;font-family:'Geist Mono',monospace}
.kv-list .v{color:var(--text);font-family:'Geist Mono',monospace;font-size:11.5px;text-align:right;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   07 AI
   ============================================================ */
.provider-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;
  margin-bottom:6px;
}
.provider-row .num{
  width:22px;height:22px;border-radius:6px;background:var(--bg);border:1px solid var(--border);
  display:grid;place-items:center;font-family:'Geist Mono',monospace;font-size:11px;color:var(--text-2);
}
.provider-row .pct-bar{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.provider-row .pct-bar>span{display:block;height:100%;background:var(--accent);border-radius:3px}
.provider-row.active .pct-bar>span{background:var(--ok)}

.log-panel{
  background:#050507;color:#d8d8d8;border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-family:'Geist Mono',monospace;font-size:11.5px;line-height:1.65;
  max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word;
}
:root[data-theme="light"] .log-panel{background:#fafafa;color:#27272a;border-color:var(--border)}
.log-panel .m{color:#7a7a83}
.log-panel .i{color:#60a5fa}
.log-panel .w{color:#f59e0b}
.log-panel .f{color:#ef4444}
.log-panel .g{color:#22c55e}

/* ============================================================
   08 Keys
   ============================================================ */
.role-badge{
  font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;
  padding:2px 7px;border-radius:4px;letter-spacing:.02em;
}
.role-badge.admin{background:var(--fail-soft);color:var(--fail)}
.role-badge.reader{background:var(--info-soft);color:var(--info)}
.role-badge.ingest{background:var(--warn-soft);color:var(--warn)}

.matrix-table{width:100%;border-collapse:collapse;font-size:12.5px}
.matrix-table th,.matrix-table td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:left}
.matrix-table th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:500;background:var(--bg-elev)}
.matrix-table td.c{text-align:center}
.matrix-table .chk{color:var(--ok);font-weight:600}
.matrix-table .cross{color:var(--muted-2)}
.matrix-table tr:last-child td{border-bottom:none}

.key-table .key-prefix{font-family:'Geist Mono',monospace;font-size:11.5px;color:var(--text-2)}
.key-table .key-prefix span.dots{color:var(--muted-2);letter-spacing:.1em}

/* ============================================================
   Live shell additions
   ============================================================ */
.auth-gate{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:rgba(10,10,10,.78);backdrop-filter:blur(14px);
}
.auth-gate[hidden]{display:none}
.login-card{width:min(420px,calc(100vw - 32px));background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:12px;padding:20px;box-shadow:var(--shadow-lg)}
.login-card .brand{margin-bottom:18px}
.login-card form{display:grid;gap:12px}
.login-card label{display:grid;gap:6px;font-size:12px;color:var(--muted);font-weight:500}
.login-card input{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:10px 12px;font-size:13px;outline:none}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.live-error{display:none;margin-top:10px;color:var(--fail);font-size:12px}
.live-error.on{display:block}
.live-loading{opacity:.65;pointer-events:none}
.empty-note{padding:18px;color:var(--muted);font-size:13px;text-align:center}
.source-row-live{cursor:pointer}
.source-row-live.sel td{background:var(--bg-hover)}