/* ============================================================
   xbm console — terminal ops admin (approach B, hi-fi)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

*{ box-sizing:border-box; }
html,body,#root{ height:100%; margin:0; }
body{ overflow:hidden; }

:root{
  /* dark (default) */
  --bg:      #0a0c10;
  --bg-2:    #0f1217;
  --panel:   #14181f;
  --panel-2: #1a1f28;
  --panel-3: #20262f;
  --border:  #262d38;
  --border-2:#323a47;
  --text:    #d7dbe2;
  --text-2:  #aab1bd;
  --muted:   #707782;
  --dim:     #4d545f;

  --accent:  #42d18f;            /* themable via tweak */
  --ok:      #42d18f;
  --warn:    #e0a84e;
  --bad:     #ec6a5e;
  --info:    #5ab6e6;

  --accent-soft:  color-mix(in oklch, var(--accent) 16%, transparent);
  --accent-line:  color-mix(in oklch, var(--accent) 45%, var(--border));
  --warn-soft:    color-mix(in oklch, var(--warn) 15%, transparent);
  --bad-soft:     color-mix(in oklch, var(--bad) 16%, transparent);

  --row: 1.45;
  --pad: 16px;
  --r: 7px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

[data-theme="light"]{
  --bg:      #eef0f3;
  --bg-2:    #e7eaee;
  --panel:   #ffffff;
  --panel-2: #f5f7f9;
  --panel-3: #eceff3;
  --border:  #dde1e7;
  --border-2:#cbd1da;
  --text:    #1b2026;
  --text-2:  #3f4651;
  --muted:   #717883;
  --dim:     #9aa1ac;

  --ok:      #1aa463;
  --warn:    #c4882a;
  --bad:     #d2503f;
  --info:    #2c87bf;
  --shadow: 0 18px 50px rgba(40,50,70,.18);
}

.app{
  height:100%; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 80% at 80% -10%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13.5px; line-height:var(--row);
  font-variant-ligatures:none;
}
[data-density="compact"] .app{ font-size:12.5px; --pad:11px; --row:1.35; }

/* optional scanlines */
[data-scan="on"] .app::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.5;
}

/* ---------------- header ---------------- */
.hdr{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--border);
  background:linear-gradient(var(--bg-2), var(--panel)); position:relative; z-index:10;
}
.prompt{ font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.prompt .blink{ color:var(--accent); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.prompt b{ color:var(--accent); }
.hdr .sp{ flex:1; }
.hdr-stat{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.clock{ color:var(--muted); font-variant-numeric:tabular-nums; }
.ver{ color:var(--dim); font-size:11.5px; }

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border:1px solid var(--border); border-radius:20px; background:var(--panel-2);
  color:var(--text-2); font-size:11.5px; white-space:nowrap;
}
.chip.k{ border-color:var(--border-2); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 0 transparent; }
.dot.ok{ background:var(--ok); box-shadow:0 0 7px color-mix(in oklch, var(--ok) 70%, transparent); }
.dot.warn{ background:var(--warn); box-shadow:0 0 7px color-mix(in oklch, var(--warn) 60%, transparent); }
.dot.bad{ background:var(--bad); box-shadow:0 0 8px color-mix(in oklch, var(--bad) 70%, transparent); animation:pulse 1.4s ease-in-out infinite; }
.dot.info{ background:var(--info); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ---------------- tabs ---------------- */
.tabs{
  display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--border);
  background:var(--bg-2); position:relative; z-index:9; overflow-x:auto;
}
.tab{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:var(--muted);
  padding:10px 14px 9px; border-bottom:2px solid transparent; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.tab .kbd{ font-size:10px; color:var(--dim); border:1px solid var(--border-2); border-radius:3px; padding:0 4px; }
.tab:hover{ color:var(--text-2); }
.tab.active{ color:var(--text); border-bottom-color:var(--accent); }
.tab.active .kbd{ color:var(--accent); border-color:var(--accent-line); }
.tab .badge{ background:var(--bad); color:#fff; border-radius:9px; font-size:10px; padding:0 5px; }

/* ---------------- body ---------------- */
.body{ flex:1; overflow:auto; padding:18px; position:relative; z-index:1; }
.body-wrap{ max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

.scn-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.scn-head h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:.2px; }
.scn-head .sub{ color:var(--muted); font-size:12px; }
.scn-head .sp{ flex:1; }

.lbl{ color:var(--muted); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; }

/* cards / grids */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); }
.card.p{ padding:var(--pad); }
.card-h{ display:flex; align-items:center; gap:10px; padding:11px var(--pad); border-bottom:1px solid var(--border); }
.card-h h3{ margin:0; font-size:12.5px; font-weight:600; }
.card-h .sp{ flex:1; }
.grid{ display:grid; gap:14px; }
.g2{ grid-template-columns:1fr 1fr; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1.55fr .95fr; gap:16px; align-items:start; }

/* metric */
.metric{ padding:var(--pad); display:flex; flex-direction:column; gap:5px; }
.metric .v{ font-size:27px; font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; line-height:1; }
.metric .v.sm{ font-size:21px; }
.metric .k{ color:var(--muted); font-size:11px; }
.metric .d{ color:var(--dim); font-size:10.5px; }
.tone-ok .v{ color:var(--ok); } .tone-warn .v{ color:var(--warn); } .tone-bad .v{ color:var(--bad); } .tone-info .v{ color:var(--info); }

/* buttons */
.btn{
  appearance:none; font-family:inherit; font-size:12px; cursor:pointer;
  border:1px solid var(--border-2); border-radius:6px; background:var(--panel-2);
  color:var(--text); padding:6px 11px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:.12s;
}
.btn:hover{ background:var(--panel-3); border-color:var(--dim); }
.btn:active{ transform:translateY(1px); }
.btn.sm{ font-size:11px; padding:4px 8px; }
.btn.accent{ background:var(--accent); border-color:var(--accent); color:#06120b; font-weight:600; }
.btn.accent:hover{ filter:brightness(1.08); }
.btn.ghost{ background:transparent; }
.btn.danger{ color:var(--bad); border-color:color-mix(in oklch, var(--bad) 45%, var(--border)); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* segmented */
.seg{ display:inline-flex; border:1px solid var(--border-2); border-radius:6px; overflow:hidden; }
.seg button{ appearance:none; font-family:inherit; font-size:11.5px; cursor:pointer; background:var(--panel-2); color:var(--muted); border:0; border-right:1px solid var(--border); padding:5px 11px; }
.seg button:last-child{ border-right:0; }
.seg button.on{ background:var(--accent-soft); color:var(--accent); }
.seg button:hover:not(.on){ color:var(--text); }

/* chips/tags inline */
.tag{ font-size:11px; padding:2px 8px; border-radius:5px; background:var(--panel-2); border:1px solid var(--border); color:var(--text-2); }
.tag.accent{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.tag.warn{ color:var(--warn); border-color:color-mix(in oklch,var(--warn) 40%,var(--border)); background:var(--warn-soft); }
.tag.bad{ color:var(--bad); border-color:color-mix(in oklch,var(--bad) 40%,var(--border)); background:var(--bad-soft); }

/* ---------------- table ---------------- */
.t{ width:100%; border-collapse:collapse; font-size:12.5px; }
.t th{ text-align:left; color:var(--muted); font-weight:500; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; cursor:default; }
.t th.sortable{ cursor:pointer; } .t th.sortable:hover{ color:var(--text); }
.t td{ padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
.t tbody tr:last-child td{ border-bottom:0; }
.t tbody tr{ transition:background .1s; }
.t tbody tr:hover td{ background:var(--panel-2); }
.t tr.row-bad td{ background:color-mix(in oklch, var(--bad) 7%, transparent); }
.t tr.row-bad:hover td{ background:color-mix(in oklch, var(--bad) 11%, transparent); }
.num{ font-variant-numeric:tabular-nums; }
.mono-dim{ color:var(--muted); }

.meter{ width:84px; height:7px; border-radius:5px; background:var(--panel-3); overflow:hidden; display:inline-block; vertical-align:middle; border:1px solid var(--border); }
.meter > i{ display:block; height:100%; background:var(--ok); transition:width .5s ease, background .3s; }
.meter.warn > i{ background:var(--warn); }
.meter.bad > i{ background:var(--bad); }

/* ---------------- phantom alert ---------------- */
.alert{
  border:1px solid var(--warn); border-radius:var(--r); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--warn-soft) 0 1px, transparent 1px 13px),
    var(--panel);
  transition:.4s;
}
.alert.resolved{ border-color:var(--accent); background:repeating-linear-gradient(135deg, var(--accent-soft) 0 1px, transparent 1px 13px), var(--panel); }
.alert-top{ display:flex; align-items:center; gap:16px; padding:16px var(--pad); flex-wrap:wrap; }
.alert .glyph{ font-size:30px; line-height:1; }
.alert .big{ font-size:30px; font-weight:700; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--warn); transition:color .4s; }
.alert.resolved .big{ color:var(--accent); }
.alert .sp{ flex:1; }
.alert-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:10px var(--pad); border-top:1px solid var(--border); background:color-mix(in oklch, var(--warn) 5%, var(--panel)); font-size:11.5px; color:var(--muted); }
.alert.resolved .alert-foot{ background:color-mix(in oklch, var(--accent) 5%, var(--panel)); }
.kv b{ color:var(--text); }
.kv .ar{ color:var(--accent); }

/* cascade */
.casc{ display:flex; flex-direction:column; gap:0; padding:4px 0; }
.casc .step{ border:1px solid var(--border-2); border-radius:6px; padding:7px 11px; background:var(--panel-2); font-size:12px; display:flex; align-items:center; gap:8px; }
.casc .step .n{ color:var(--accent); font-size:10.5px; }
.casc .step.last{ border-style:dashed; color:var(--muted); }
.casc .arr{ text-align:center; color:var(--dim); font-size:11px; padding:3px 0; }

/* ---------------- forms ---------------- */
.subtabs{ display:flex; gap:4px; flex-wrap:wrap; }
.subtab{ appearance:none; font-family:inherit; font-size:11.5px; cursor:pointer; padding:5px 11px; border-radius:6px; border:1px solid var(--border); background:var(--panel-2); color:var(--muted); }
.subtab.on{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.subtab:hover:not(.on){ color:var(--text); }

.field{ display:grid; grid-template-columns:230px 1fr; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.field:last-child{ border-bottom:0; }
.field .fl{ font-size:12.5px; }
.field .fl small{ display:block; color:var(--muted); font-size:11px; margin-top:2px; line-height:1.3; }
.field .fl .warnmark{ color:var(--warn); }
.input{ width:100%; font-family:inherit; font-size:12.5px; color:var(--text); background:var(--bg-2); border:1px solid var(--border-2); border-radius:6px; padding:7px 10px; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input.narrow{ max-width:160px; }
textarea.input{ resize:vertical; line-height:1.55; white-space:pre; }

.toggle{ width:42px; height:23px; border-radius:20px; border:1px solid var(--border-2); background:var(--panel-3); position:relative; cursor:pointer; transition:.15s; flex:none; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--muted); transition:.15s; }
.toggle.on{ background:var(--accent-soft); border-color:var(--accent-line); }
.toggle.on::after{ left:21px; background:var(--accent); }

/* json view */
.json{ font-size:12px; line-height:1.65; white-space:pre; overflow:auto; color:var(--text-2); padding:14px; background:var(--bg-2); border-radius:6px; max-height:440px; }
.json .k{ color:var(--info); } .json .s{ color:var(--ok); } .json .n{ color:var(--warn); } .json .p{ color:var(--muted); }

/* ---------------- log rail ---------------- */
.rail{ border-top:1px solid var(--border); background:var(--bg-2); display:flex; flex-direction:column; position:relative; z-index:8; }
.rail-h{ display:flex; align-items:center; gap:12px; padding:7px 14px; border-bottom:1px solid var(--border); }
.rail-h .ttl{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
.rail-h .sp{ flex:1; }
.rail-body{ height:128px; overflow:auto; padding:7px 14px; font-size:12px; }
[data-density="compact"] .rail-body{ height:104px; }
.logrow{ display:flex; gap:10px; padding:1.5px 0; white-space:nowrap; }
.logrow .ts{ color:var(--dim); flex:none; font-variant-numeric:tabular-nums; }
.logrow .lv{ flex:none; width:38px; font-weight:600; }
.logrow .lv.INFO{ color:var(--info); } .logrow .lv.OK{ color:var(--ok); } .logrow .lv.WARN{ color:var(--warn); } .logrow .lv.ERR{ color:var(--bad); }
.logrow .msg{ color:var(--text-2); overflow:hidden; text-overflow:ellipsis; }
.logrow.new{ animation:logIn .4s ease; }
@keyframes logIn{ from{ opacity:0; transform:translateX(-6px); background:var(--accent-soft); } }

/* logs fullscreen view */
.logview{ font-size:12.5px; height:100%; overflow:auto; padding:4px 0; }
.logview .logrow{ padding:3px 4px; border-radius:4px; }
.logview .logrow:hover{ background:var(--panel-2); }

/* ---------------- toast ---------------- */
.toasts{ position:fixed; bottom:152px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast{ background:var(--panel); border:1px solid var(--border-2); border-left:3px solid var(--accent); border-radius:6px; padding:9px 14px; font-size:12px; box-shadow:var(--shadow); display:flex; align-items:center; gap:9px; animation:toastIn .25s ease; max-width:360px; }
.toast.warn{ border-left-color:var(--warn); } .toast.bad{ border-left-color:var(--bad); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } }

/* drawer (node detail) */
.drawer-bg{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150; animation:fade .2s; }
@keyframes fade{ from{ opacity:0; } }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--panel); border-left:1px solid var(--border-2); z-index:151; box-shadow:var(--shadow); display:flex; flex-direction:column; animation:slideIn .25s ease; }
@keyframes slideIn{ from{ transform:translateX(30px); opacity:.6; } }
.drawer-h{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.drawer-b{ padding:16px; overflow:auto; display:flex; flex-direction:column; gap:14px; }

.spark{ display:flex; align-items:flex-end; gap:2px; height:44px; }
.spark i{ flex:1; background:var(--accent-soft); border-radius:2px 2px 0 0; min-height:3px; }
.spark i.hot{ background:var(--bad-soft); }

.empty{ color:var(--muted); text-align:center; padding:40px; font-size:12.5px; }

/* scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-track{ background:transparent; }

/* responsive */
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .g4{ grid-template-columns:1fr 1fr; }
  .g3{ grid-template-columns:1fr; }
  .field{ grid-template-columns:1fr; gap:7px; }
  .body{ padding:13px; }
  .hdr .ver{ display:none; }
}