:root {
  --bg: #0e1116;
  --bg-panel: #161b23;
  --bg-card: #1c2330;
  --border: #2a3342;
  --text: #dbe2ea;
  --muted: #7d8a9c;
  --accent: #4fc3f7;
  --ok: #66bb6a;
  --warn: #ffb74d;
  --err: #ef5350;
  --busy: #fff176;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; margin: 18px 0 8px; }
h3 { font-size: 14px; margin: 0 0 8px; }
h4 { font-size: 13px; margin: 14px 0 6px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

#tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.tab-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
}
.tab-btn:hover { color: var(--text); background: var(--bg-card); }
.tab-btn.active {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--border);
}

main { padding: 14px 16px 40px; max-width: 1500px; margin: 0 auto; }
.hidden { display: none !important; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 84px;
}
.card-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.card-value { font-size: 20px; font-weight: 600; margin: 4px 0; }
.card-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

.bar { height: 6px; background: #0b0e13; border-radius: 3px; overflow: hidden; }
.bar.small-bar { width: 120px; margin-top: 4px; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .6s; }
.bar-fill.gpu { background: #ba68c8; }
.bar-fill.warm { background: var(--warn); }
.bar-fill.hot { background: var(--err); }
.bar-fill.low { background: var(--err); }
.barrow { display: flex; align-items: center; gap: 6px; }
.barrow + .barrow { margin-top: 4px; }
.barrow-label { flex: 0 0 30px; font-size: 11px; color: var(--muted); }
.barrow .bar { flex: 1 1 auto; }
.memrow { margin-top: 6px; }
.memrow .bar { margin-top: 3px; }
.memrow-text { font-size: 12px; }

.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.chart-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  height: 240px;
  display: flex;
  flex-direction: column;
}
.chart-card h3 { flex: 0 0 auto; }
.chart-card canvas { flex: 1 1 auto; min-height: 0; }

.inline-form { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
input, select, button {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 13px;
}
input::placeholder { color: var(--muted); }
.chk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 13px; color: var(--muted); user-select: none; }
.chk input { padding: 0; border: none; background: none; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }

.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table th, .table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table th { color: var(--muted); font-size: 12px; font-weight: 500; }
.table td.j-msg { white-space: normal; word-break: break-word; }
.table tbody tr:hover { background: var(--bg-card); }
.table-wrap { overflow-x: auto; }
.pname { overflow: hidden; text-overflow: ellipsis; }
.cell-clip { overflow: hidden; text-overflow: ellipsis; }

.sortlink { color: inherit; text-decoration: none; cursor: pointer; }
.sortlink.active { color: var(--accent); }

.alert {
  background: rgba(239, 83, 80, .12);
  border: 1px solid rgba(239, 83, 80, .5);
  color: #ffcdd2;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.notice {
  background: rgba(79, 195, 247, .1);
  border: 1px solid rgba(79, 195, 247, .4);
  color: #b3e5fc;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.part-list { display: flex; flex-direction: column; gap: 8px; }
.part { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.part-head { display: flex; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; align-items: baseline; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-run { background: var(--ok); }
.dot-dead { background: #555f6e; }
.dot-failed { background: var(--err); }
.dot-busy { background: var(--busy); }
.dot-sleep { background: var(--accent); }

.svc-name { cursor: pointer; color: var(--accent); }
.svc-name:hover { text-decoration: underline; }

.detail-pane { margin-top: 4px; }
.detail-pane:empty { display: none; }
.detail-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; margin-bottom: 8px; }

.jbox, #journal-logwrap {
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}
#journal-logwrap { max-height: 65vh; overflow-y: auto; padding: 6px 8px; }
.jbox { max-height: 260px; overflow-y: auto; padding: 6px 8px; }
.jline { display: flex; gap: 8px; padding: 1px 0; }
.jline .j-time { color: var(--muted); flex: 0 0 auto; }
.jline .j-ident { color: #90a4ae; flex: 0 0 200px; overflow: hidden; text-overflow: ellipsis; }
.jline .j-msg { white-space: pre-wrap; word-break: break-word; }
.j-err { background: rgba(239, 83, 80, .13); }
.j-err .j-msg { color: #ffcdd2; }
.j-warn { background: rgba(255, 183, 77, .09); }
.j-warn .j-msg { color: #ffe0b2; }

.actions { display: flex; gap: 4px; flex-wrap: wrap; }
.btn { padding: 3px 9px; font-size: 12px; }

.plugin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.badge {
  display: inline-block;
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 11.5px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge-loaded { color: #c8e6c9; border-color: rgba(102, 187, 106, .6); background: rgba(102, 187, 106, .12); }
.badge-loading { color: #fff9c4; border-color: rgba(255, 241, 118, .6); background: rgba(255, 241, 118, .1); }
.badge-unloaded { color: var(--muted); }
.badge-sleeping { color: #b3e5fc; border-color: rgba(79, 195, 247, .5); background: rgba(79, 195, 247, .1); }
.badge-failed { color: #ffcdd2; border-color: rgba(239, 83, 80, .6); background: rgba(239, 83, 80, .12); }
.badge-downloading { color: #b3e5fc; border-color: rgba(79, 195, 247, .5); background: rgba(79, 195, 247, .1); }
.llama-id { overflow: hidden; text-overflow: ellipsis; }
.llama-health {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.llama-health .dot { width: 12px; height: 12px; }
.llama-health-text { font-weight: 600; font-size: 15px; }
.llama-models { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.llama-model {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 0;
}
.llama-model .llama-id { flex: 1 1 auto; min-width: 80px; }
.llama-model-actions { display: flex; gap: 6px; margin-left: auto; }
.llama-load { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.llama-load select { max-width: 420px; }
.part-mounts { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.part-usage { margin-left: auto; }