@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #080810;
  --surface:  #0f0f1a;
  --surface2: #161625;
  --border:   rgba(99,102,241,.12);
  --border-h: rgba(99,102,241,.28);
  --accent:   #6366f1;
  --cpu:      #38bdf8;
  --ram:      #a78bfa;
  --disk:     #34d399;
  --success:  #22d3ee;
  --warning:  #fbbf24;
  --danger:   #f87171;
  --t1:       #f1f5f9;
  --t2:       #94a3b8;
  --t3:       #475569;
  --tab-h:    56px;
  --hdr-h:    56px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--t1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ─── LAYOUT ────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.app-header {
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.header-left { display: flex; align-items: center; gap: 10px; }

.server-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.online-dot { background: var(--disk); box-shadow: 0 0 6px var(--disk); }
.offline-dot { background: var(--danger); }

.server-ip { font-size: 13px; font-weight: 600; color: var(--t1); }
.server-uptime { font-size: 11px; color: var(--t3); margin-top: 1px; }

.load-badge {
  font-size: 11px;
  color: var(--t3);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  padding-bottom: calc(var(--tab-h) + 16px);
  -webkit-overflow-scrolling: touch;
}

.tab-pane { display: none; animation: fadeSlide .15s ease; }
.tab-pane.active { display: block; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── TAB BAR ───────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--tab-h);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 100;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--t3);
  font-size: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s;
  position: relative;
}
.tab-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .15s;
}
.tab-btn.active { color: var(--accent); }
.tab-btn.active::after { opacity: 1; }
.tab-btn svg { transition: transform .15s; }
.tab-btn.active svg { transform: scale(1.1); }

/* ─── GAUGES ────────────────────────────────────────── */
.gauges-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.gauge-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  transition: border-color .2s;
}
.gauge-card:hover { border-color: var(--border-h); }

.gauge-svg {
  width: 72px; height: 72px;
  transform: rotate(-90deg);
}

.gauge-track {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 4;
}

.gauge-fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}

.cpu-stroke  { stroke: var(--cpu); }
.ram-stroke  { stroke: var(--ram); }
.disk-stroke { stroke: var(--disk); }

.gauge-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -48px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.gauge-val {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.gauge-lbl {
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Colors */
.cpu-color  { color: var(--cpu); }
.ram-color  { color: var(--ram); }
.disk-color { color: var(--disk); }
.cpu-bg     { background: var(--cpu); }
.ram-bg     { background: var(--ram); }

/* ─── INFO CARDS ─────────────────────────────────────── */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}

.info-label {
  font-size: 10px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  font-family: 'JetBrains Mono', monospace;
}

/* ─── SECTION TITLE ──────────────────────────────────── */
.section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.refresh-btn {
  font-size: 10px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── DASHBOARD PROC LIST ────────────────────────────── */
.dash-proc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-proc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.proc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.proc-dot.online  { background: var(--disk); }
.proc-dot.stopped { background: var(--danger); }
.proc-dot.errored { background: var(--warning); }

.dash-proc-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.dash-proc-stats {
  font-size: 11px;
  color: var(--t3);
  font-family: 'JetBrains Mono', monospace;
}

/* ─── PROCESS LIST (Tab 2) ───────────────────────────── */
.proc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  active-scale: .98;
}
.proc-card:hover { border-color: var(--border-h); background: var(--surface2); }
.proc-card:active { transform: scale(.99); }

.proc-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.proc-name {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

.status-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-pill.online  { background: rgba(52,211,153,.15); color: var(--disk); }
.status-pill.stopped { background: rgba(248,113,113,.15); color: var(--danger); }
.status-pill.errored { background: rgba(251,191,36,.15);  color: var(--warning); }

.proc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.proc-metric {
  text-align: center;
}

.proc-metric-val {
  font-size: 14px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.proc-metric-lbl {
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}

.proc-arrow {
  color: var(--t3);
  margin-left: auto;
  font-size: 16px;
  flex-shrink: 0;
}

/* ─── OVERLAY ────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.overlay:not(.hidden) { transform: translateX(0); }
.overlay.hidden { transform: translateX(100%); }

.overlay-header {
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.overlay-title {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.status-badge.online  { background: rgba(52,211,153,.15); color: var(--disk); }
.status-badge.stopped { background: rgba(248,113,113,.15); color: var(--danger); }

.overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* ─── STAT ROW (overlay) ─────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.stat-label {
  font-size: 10px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── ACTION GRID ────────────────────────────────────── */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .15s;
}
.action-btn:active { transform: scale(.97); }

.action-btn.success {
  background: rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.2);
  color: var(--disk);
}
.action-btn.warning {
  background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.2);
  color: var(--warning);
}
.action-btn.accent {
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.2);
  color: var(--accent);
}

/* ─── LOG BOX ────────────────────────────────────────── */
.log-box {
  background: #060610;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 200px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1.6;
  color: #94a3b8;
  white-space: pre-wrap;
  word-break: break-all;
}
.log-placeholder { color: var(--t3); font-style: italic; }
.log-err { color: var(--danger); }

/* ─── SHELL ──────────────────────────────────────────── */
.shell-box {
  background: #060610;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.shell-output {
  padding: 10px 12px;
  min-height: 80px;
  max-height: 160px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1.6;
  color: #94a3b8;
  white-space: pre-wrap;
  word-break: break-all;
}

.shell-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

.shell-prompt {
  color: var(--disk);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  flex-shrink: 0;
}

.shell-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--t1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.shell-run {
  background: var(--accent);
  border: none;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.shell-run:active { background: #4f52d9; }

/* ─── CHARTS & REPORTS (Tab 3) ───────────────────────── */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--t2);
}

.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.chart-wrap {
  height: 130px;
  position: relative;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.report-label {
  font-size: 10px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.report-val {
  font-size: 22px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t1);
}

.metrics-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.metrics-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 8px 12px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.metrics-row:last-child { border-bottom: none; }
.metrics-row.header {
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

/* ─── SKELETON ───────────────────────────────────────── */
.skeleton-line {
  height: 40px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: shimmer 1.5s infinite;
  margin-bottom: 8px;
}
.skeleton-line.short { width: 60%; height: 32px; }

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── TOAST ──────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--tab-h) + 12px);
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface2);
  border: 1px solid var(--border-h);
  color: var(--t1);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  transition: all .2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 300;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ─── API MANAGER (Tab 4) ────────────────────────────── */
.success-color { color: var(--disk); }
.warning-color { color: var(--warning); }

.api-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.api-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.api-icon {
  font-size: 24px;
  width: 44px; height: 44px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.api-main-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}

.api-subtitle {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
}

.api-add-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.api-add-btn:active { transform: scale(.97); background: #4f52d9; }

/* Horizontal scroll container for LLM cards */
.api-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.api-cards::-webkit-scrollbar { display: none; }

/* ─── LLM CARDS (premium redesign) ──────────────────── */
.llm-card {
  min-width: 148px;
  max-width: 148px;
  height: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color .2s, transform .15s;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.llm-card:hover  { border-color: var(--border-h); transform: translateY(-2px); }
.llm-card:active { transform: scale(.97) translateY(0); }

/* Status dot */
.llm-card-status-dot {
  position: absolute;
  top: 10px; right: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  z-index: 4;
}
.llm-card-status-dot.active   { background: var(--disk); box-shadow: 0 0 6px var(--disk); }
.llm-card-status-dot.inactive { background: var(--t3); }

/* Logo zone — top half of card */
.llm-card-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 12px;
  position: relative;
  z-index: 2;
}
.llm-card-logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(255,255,255,.15));
}
.llm-card-logo > div {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}

/* Fade gradient from transparent to card bg */
.llm-card-fade {
  position: absolute;
  bottom: 72px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  z-index: 3;
  pointer-events: none;
}

/* Info — bottom of card */
.llm-card-info {
  position: relative;
  z-index: 4;
  background: var(--surface);
  padding: 0 12px 12px;
}

.llm-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.llm-card-model {
  font-size: 10px;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.llm-card-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.llm-stat-num {
  font-size: 18px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

.llm-stat-lbl {
  font-size: 10px;
  color: var(--t3);
}

/* Stats grid */
.api-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.api-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.api-stat-val {
  font-size: 24px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t1);
}

.api-stat-lbl {
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}

/* Category list */
.api-categories {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.api-cat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.api-cat-row:last-child { border-bottom: none; }
.api-cat-row:hover { background: var(--surface2); }
.api-cat-row:active { background: var(--surface2); }

.api-cat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.api-cat-info { flex: 1; min-width: 0; }

.api-cat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}

.api-cat-desc {
  font-size: 10px;
  color: var(--t3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-cat-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.api-arrow {
  color: var(--t3);
  font-size: 18px;
  flex-shrink: 0;
  margin-left: 2px;
}

/* ─── NEW STYLES ────────────────────────────────────────── */

/* LLM Card */
.llm-card {
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}
.llm-card:hover { border-color: var(--border-h); background: var(--surface2); }
.llm-card-status {
  position: absolute;
  top: 12px; right: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.llm-card-status.active { background: var(--disk); }
.llm-card-status.inactive { background: var(--t3); }

/* TG Bot Card */
.tg-bot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .2s;
  margin-bottom: 10px;
}
.tg-bot-card:hover { border-color: var(--border-h); background: var(--surface2); }

/* Model Chips */
.model-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--t2);
  margin: 3px;
  cursor: pointer;
}

/* User Row */
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 8px;
}
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* Last calls */
.call-row {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t2);
}
.call-row:last-child { border-bottom: none; }

/* Inner tabs */
.inner-tabs {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.inner-tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--t3);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
}
.inner-tab-btn.active {
  background: var(--surface2);
  color: var(--t1);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.inner-tab-pane {
  display: none;
}
.inner-tab-pane.active {
  display: block;
}

/* ─── LLM OVERLAY — HERO HEADER ─────────────────────── */
.llm-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.llm-hero-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}
.llm-hero-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.12));
}
.llm-hero-logo > div {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

.llm-hero-info { flex: 1; min-width: 0; }

.llm-hero-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-hero-models {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ─── LLM STATS ROW ──────────────────────────────────── */
.llm-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.llm-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}

.llm-stat-big {
  font-size: 22px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--t1);
  line-height: 1;
}

.llm-stat-sub {
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}

/* ─── LLM CHART CARD ─────────────────────────────────── */
.llm-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

/* ─── LLM SCRIPTS LIST ───────────────────────────────── */
.llm-scripts-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.llm-script-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.llm-script-row:last-child { border-bottom: none; }

.llm-script-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.llm-script-file {
  font-size: 12px;
  font-weight: 600;
  color: var(--t1);
  font-family: 'JetBrains Mono', monospace;
}

.llm-script-purpose {
  font-size: 10px;
  color: var(--t3);
  margin-top: 1px;
}

/* ─── LLM LAST CALLS ─────────────────────────────────── */
.llm-calls-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}

.llm-call-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.llm-call-row:last-child { border-bottom: none; }

.llm-call-time { color: var(--t3); width: 52px; flex-shrink: 0; font-family: monospace; }
.llm-call-model { flex: 1; color: var(--t2); }
.llm-call-tokens { color: var(--accent); font-family: monospace; flex-shrink: 0; }

/* ================================================================
   PROCESS ADMIN OVERLAY
   ================================================================ */
.proc-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 56px;
  z-index: 10;
  overflow-x: auto;
  scrollbar-width: none;
}
.proc-tabs::-webkit-scrollbar { display: none; }

.proc-tab-btn {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.proc-tab-btn.active { color: var(--t1); border-bottom-color: var(--accent); }
.proc-tab-btn:hover:not(.active) { color: var(--t2); }

.proc-tab-panel { display: none; }
.proc-tab-panel.active { display: block; }

/* -- Overview -- */
.proc-status-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.proc-status-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.proc-status-info { flex: 1; min-width: 0; }
.proc-status-name { font-size: 16px; font-weight: 700; color: var(--t1); }
.proc-status-sub  { font-size: 11px; color: var(--t3); margin-top: 2px; }

.proc-action-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.proc-action-btn {
  flex: 1; padding: 9px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t1);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.proc-action-btn:hover { background: var(--border); }
.proc-action-btn.danger { color: var(--danger); border-color: rgba(239,68,68,.3); }
.proc-action-btn.danger:hover { background: rgba(239,68,68,.08); }
.proc-action-btn.success { color: var(--disk); border-color: rgba(34,197,94,.3); }

/* -- API tab -- */
.proc-api-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.proc-api-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.proc-api-row:last-child { border-bottom: none; }
.proc-api-logo {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.proc-api-logo img { width: 28px; height: 28px; object-fit: contain; }
.proc-api-logo-text {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.proc-api-info { flex: 1; min-width: 0; }
.proc-api-name { font-size: 13px; font-weight: 600; color: var(--t1); }
.proc-api-detail { font-size: 10px; color: var(--t3); margin-top: 2px; }
.proc-api-stat { font-size: 11px; color: var(--t2); text-align: right; flex-shrink: 0; }
.proc-api-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.proc-api-dot.ok   { background: var(--disk); box-shadow: 0 0 5px var(--disk); }
.proc-api-dot.warn { background: #f59e0b; }
.proc-api-dot.err  { background: var(--danger); }

/* -- Users tab -- */
.proc-users-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.proc-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.proc-user-row:last-child { border-bottom: none; }
.proc-user-row:hover { background: rgba(255,255,255,.02); }
.proc-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0; color: #fff;
}
.proc-user-info { flex: 1; min-width: 0; }
.proc-user-name {
  font-size: 13px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proc-user-meta { font-size: 10px; color: var(--t3); font-family: monospace; margin-top: 1px; }
.proc-user-badge {
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; flex-shrink: 0;
}
.proc-user-badge.admin { background: rgba(99,102,241,.2); color: var(--accent); }
.proc-user-badge.user  { background: rgba(255,255,255,.06); color: var(--t3); }
.proc-user-badge.active{ background: rgba(34,197,94,.15); color: var(--disk); }
.proc-user-badge.expired{ background: rgba(239,68,68,.12); color: var(--danger); }
.proc-user-gens { font-size: 11px; color: var(--t2); flex-shrink: 0; text-align: right; }

/* -- Generations tab -- */
.proc-gen-task {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.proc-gen-task-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.proc-gen-type {
  font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(99,102,241,.15); color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em;
}
.proc-gen-status { font-size: 10px; color: var(--t3); margin-left: auto; }
.proc-gen-keyword { font-size: 12px; font-weight: 600; color: var(--t1); }
.proc-gen-meta    { font-size: 10px; color: var(--t3); margin-top: 2px; }
.proc-gen-progress {
  margin-top: 8px; height: 3px;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.proc-gen-bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #818cf8);
  transition: width .3s;
}

/* -- Shared empty state -- */
.proc-empty {
  text-align: center; padding: 40px 20px;
  color: var(--t3); font-size: 13px;
}
.proc-empty-icon { font-size: 32px; margin-bottom: 8px; }

/* -- Log snippet -- */
.proc-log-box {
  background: #0a0a0f;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #7cf;
  max-height: 130px;
  overflow-y: auto;
  line-height: 1.5;
}