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

:root {
  --bg:    #080b10;
  --s1:    #0d1117;
  --s2:    #111827;
  --s3:    #1c2433;
  --s4:    #253047;
  --s5:    #2e3d5c;
  --txt:   #c9d6e8;
  --txt2:  #6b85a8;
  --txt3:  #2d3f5a;
  --acc:   #00ff88;
  --acc2:  #00c8ff;
  --red:   #ff4757;
  --amb:   #ffb830;
  --pur:   #a78bfa;
  --pink:  #f472b6;
  --mono:  'IBM Plex Mono', monospace;
  --sans:  'IBM Plex Sans', sans-serif;
  --sb-w:  260px;
  --tb-h:  50px;
  --r:     10px;
  --r-sm:  7px;
}

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

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 1024px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--s5); }

/* ── Animations ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes spin   { to{transform:rotate(360deg)} }
@keyframes fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes pulse-ring {
  0%   { box-shadow:0 0 0 0 rgba(0,255,136,.4) }
  70%  { box-shadow:0 0 0 8px rgba(0,255,136,0) }
  100% { box-shadow:0 0 0 0 rgba(0,255,136,0) }
}

/* ── Status dot ── */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--txt3);
  flex-shrink: 0;
}
.dot.active   { background: var(--acc); animation: pulse-ring 2s infinite; }
.dot.inactive,.dot.failed { background: var(--red); }
.dot.activating,.dot.deactivating { background: var(--amb); animation: blink 1s infinite; }
.dot.unknown  { background: var(--txt3); }

/* ── Badges ── */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge.active   { background:rgba(0,255,136,.1); color:var(--acc);  border-color:rgba(0,255,136,.25); }
.badge.inactive,.badge.failed { background:rgba(255,71,87,.1);  color:var(--red);  border-color:rgba(255,71,87,.25); }
.badge.activating,.badge.unknown { background:rgba(255,184,48,.1); color:var(--amb);  border-color:rgba(255,184,48,.25); }
.badge.ok     { background:rgba(0,255,136,.1); color:var(--acc);  border-color:rgba(0,255,136,.25); }
.badge.warn   { background:rgba(255,184,48,.1); color:var(--amb);  border-color:rgba(255,184,48,.25); }
.badge.err    { background:rgba(255,71,87,.1);  color:var(--red);  border-color:rgba(255,71,87,.25); }
.badge.info   { background:rgba(0,200,255,.1);  color:var(--acc2); border-color:rgba(0,200,255,.25); }
.badge.pur    { background:rgba(167,139,250,.1);color:var(--pur);  border-color:rgba(167,139,250,.25); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--s4);
  background: transparent;
  color: var(--txt2);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 500;
  transition: all .15s;
  white-space: nowrap;
  letter-spacing: .03em;
}
.btn:hover { background: var(--s2); color: var(--txt); border-color: var(--s5); }
.btn.acc   { background: var(--acc);  border-color: var(--acc);  color: #000; font-weight: 700; }
.btn.acc:hover  { opacity: .85; }
.btn.acc2  { background: var(--acc2); border-color: var(--acc2); color: #000; font-weight: 700; }
.btn.red   { border-color:rgba(255,71,87,.4);  color: var(--red); }
.btn.red:hover  { background:rgba(255,71,87,.1); }
.btn.amb   { border-color:rgba(255,184,48,.4);  color: var(--amb); }
.btn.amb:hover  { background:rgba(255,184,48,.1); }
.btn.pur   { border-color:rgba(167,139,250,.4); color: var(--pur); }
.btn.pur:hover  { background:rgba(167,139,250,.1); }
.btn.ghost { border-color: var(--s3); color: var(--txt3); }
.btn.ghost:hover { color: var(--txt); border-color: var(--s4); }
.btn.sm    { padding: 5px 10px; font-size: 10px; }
.btn.icon-only { padding: 6px; width: 30px; height: 30px; }
.btn:disabled { opacity: .35; pointer-events: none; }

/* ── Card ── */
.card {
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 12px;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--s3);
}
.card-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt2);
  flex: 1;
}
.card-body { padding: 16px; }
.card-body.p0 { padding: 0; }

/* ── Progress bar ── */
.bar { height: 3px; background: var(--s3); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.bar-fill { height: 100%; border-radius: 2px; background: var(--acc); transition: width .5s; }
.bar-fill.warn { background: var(--amb); }
.bar-fill.crit { background: var(--red); }

/* ── Form inputs ── */
.input {
  background: var(--bg);
  border: 1px solid var(--s3);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  color: var(--txt);
  font-size: 12px;
  font-family: var(--mono);
  outline: none;
  width: 100%;
  transition: border .15s;
}
.input:focus { border-color: var(--acc); }
.input::placeholder { color: var(--txt3); }
.input.sm { padding: 5px 10px; font-size: 11px; }

label.field-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--txt3);
  text-transform: uppercase;
  font-family: var(--mono);
  display: block;
  margin-bottom: 5px;
}

/* ── Toast ── */
#toast-wrap {
  position: fixed;
  bottom: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999; pointer-events: none;
}
.toast {
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 11px;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(8px);
  transition: all .22s;
  max-width: 320px;
  border: 1px solid;
  pointer-events: none;
  animation: fadein .22s forwards;
}
.toast.show { opacity: 1; transform: none; }
.toast.ok   { background:#0a1f14; border-color:rgba(0,255,136,.25); color:var(--acc); }
.toast.err  { background:#1a0a0a; border-color:rgba(255,71,87,.25);  color:var(--red); }
.toast.info { background:#0d1420; border-color:rgba(0,200,255,.2);   color:var(--acc2); }
.toast.warn { background:#1a1000; border-color:rgba(255,184,48,.2);  color:var(--amb); }

/* ── Modal ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 800;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  margin-bottom: 20px;
}
.modal-box{
  width: 92vw;
  height: 92vh;
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }

/* ── Section label ── */
.section-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--txt3);
  text-transform: uppercase;
  padding: 12px 14px 6px;
}

/* ── Divider ── */
.divider { height: 1px; background: var(--s3); margin: 0; }

/* ── Mono text helpers ── */
.mono  { font-family: var(--mono); }
.txt2  { color: var(--txt2); }
.txt3  { color: var(--txt3); }
.c-acc  { color: var(--acc); }
.c-acc2 { color: var(--acc2); }
.c-red  { color: var(--red); }
.c-amb  { color: var(--amb); }
.c-pur  { color: var(--pur); }

/* ── Code block ── */
.codeblock {
  background: var(--bg);
  border: 1px solid var(--s3);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}