/* Operator console. Deliberately a different visual world from the customer
   portals: you should never be unsure which one you are looking at. */
:root{
  --bg:#10141C;
  --surface:#171D28;
  --surface-2:#1E2532;
  --surface-3:#262E3E;
  --border:#2C3647;
  --text:#E6ECF5;
  --muted:#8C9AAF;
  --accent:#4FD1C5;
  --accent-ink:#07211E;
  --accent-soft:rgba(79,209,197,.12);
  --ok:#3CB37A;
  --warn:#D9A430;
  --crit:#E8695E;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:14.5px;line-height:1.55;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.num{font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}

.boot{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);}
.spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--accent);animation:sp .8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}

.wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:20px 60px;}

/* ---------- top bar ---------- */
.top{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--border);
}
.mark{
  width:31px;height:31px;border-radius:8px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-weight:700;font-size:12px;flex-shrink:0;
}
.title{font-weight:600;font-size:14.5px;}
.title span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400;letter-spacing:.04em;}
.grow{flex:1 1 auto;}
.who{font-size:12px;color:var(--muted);text-align:right;line-height:1.35;}
.who b{display:block;color:var(--text);font-weight:600;}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.tab{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:none;border:none;color:var(--muted);padding:11px 10px;cursor:pointer;position:relative;
}
.tab:hover{color:var(--text);}
.tab[aria-selected="true"]{color:var(--accent);}
.tab[aria-selected="true"]::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--accent);}

/* ---------- buttons ---------- */
button{font-family:inherit;cursor:pointer;border-radius:8px;transition:.15s;font-size:13.5px;}
.btn{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);padding:8px 15px;font-weight:600;}
.btn:hover:not(:disabled){filter:brightness(1.08);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:6px 12px;font-size:12.5px;font-weight:500;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-danger{background:transparent;color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 40%,transparent);padding:6px 12px;font-size:12.5px;font-weight:500;}
.btn-danger:hover{background:color-mix(in srgb,var(--crit) 12%,transparent);}

/* ---------- cards & stats ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:16px;}
.card h2{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 3px;font-weight:600;}
.card .desc{color:var(--muted);font-size:12.5px;margin:0 0 15px;}
.card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.card-head h2{margin:0;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px 16px;}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:3px;}
.stat .v.bad{color:var(--crit);}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;
}
td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
td.actions{text-align:right;white-space:nowrap;}
td.actions button{margin-left:6px;}

.pill{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;font-weight:600;white-space:nowrap;display:inline-block;
}
.pill.active{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 36%,transparent);}
.pill.suspended,.pill.disabled{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 36%,transparent);}
.pill.admin,.pill.owner{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);}
.pill.member,.pill.operator{background:var(--surface-3);color:var(--muted);border:1px solid var(--border);}
.pill.ok{color:var(--ok);} .pill.error{color:var(--crit);} .pill.denied{color:var(--warn);}

.swatch{width:12px;height:12px;border-radius:4px;display:inline-block;vertical-align:-1px;margin-right:7px;}
.host{font-family:var(--mono);font-size:12px;color:var(--muted);}

/* ---------- forms ---------- */
label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:5px;}
input,select{
  width:100%;padding:9px 11px;font-family:inherit;font-size:14px;
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:8px;outline:none;
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
@media (max-width:620px){.grid2{grid-template-columns:1fr;}}
.field{margin-bottom:13px;}
.row-end{display:flex;justify-content:flex-end;gap:9px;margin-top:6px;flex-wrap:wrap;}

.alert{border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:14px;border:1px solid;}
.alert-err{background:color-mix(in srgb,var(--crit) 11%,transparent);border-color:color-mix(in srgb,var(--crit) 35%,transparent);color:var(--crit);}
.alert-ok{background:color-mix(in srgb,var(--ok) 11%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok);}
.alert-warn{background:color-mix(in srgb,var(--warn) 11%,transparent);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn);}

/* ---------- modal ---------- */
.veil{position:fixed;inset:0;background:rgba(6,9,14,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:22px;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;}
.modal h3{margin:0 0 4px;font-size:16px;font-weight:600;}
.modal .sub{color:var(--muted);font-size:12.5px;margin:0 0 17px;}

.secret{
  font-family:var(--mono);font-size:14px;background:var(--surface-3);border:1px solid var(--accent);
  border-radius:8px;padding:12px;margin:12px 0;word-break:break-all;color:var(--accent);text-align:center;
}

/* ---------- login ---------- */
.login-shell{min-height:88vh;display:flex;align-items:center;justify-content:center;padding:16px;}
.login{width:100%;max-width:370px;}
.login-head{text-align:center;margin-bottom:20px;}
.login-head .mark{width:46px;height:46px;border-radius:12px;font-size:16px;margin:0 auto 12px;}
.login-head h1{font-size:19px;margin:0 0 3px;font-weight:700;}
.login-head p{color:var(--muted);font-size:12.5px;margin:0;font-family:var(--mono);}

.empty{color:var(--muted);font-size:13px;padding:22px 0;text-align:center;}
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.filters select{width:auto;min-width:145px;padding:6px 10px;font-size:12.5px;}