body { background:#0a0f18; color:#e5e7eb; margin:0; }
.tab-hidden { display:none !important; }
.ico { width:16px; height:16px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ico-sm { width:14px; height:14px; }
.ico-lg { width:18px; height:18px; }
.field { width:100%; border:1px solid #1f2a3a; background:#0a0f18; border-radius:4px; padding:.5rem .65rem; font-size:.875rem; outline:none; color:#e5e7eb; }
.field:focus { border-color:#4f46e5; box-shadow:0 0 0 1px rgba(79,70,229,.35); }
.field:disabled { opacity:.55; }
select.field {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .65rem center; padding-right:2rem; cursor:pointer;
}
select.field option { background:#0f1623; color:#e5e7eb; }
input[type="checkbox"] {
  appearance:none; -webkit-appearance:none; width:15px; height:15px; margin:0; flex-shrink:0;
  border:1px solid #2a3548; border-radius:3px; background:#0a0f18; cursor:pointer; vertical-align:middle;
  display:inline-grid; place-content:center;
}
input[type="checkbox"]::before {
  content:""; width:9px; height:9px; transform:scale(0);
  background:linear-gradient(#4f46e5,#4338ca); border-radius:1px; transition:transform .08s ease-in;
}
input[type="checkbox"]:checked { border-color:#4f46e5; background:#111827; }
input[type="checkbox"]:checked::before { transform:scale(1); }
input[type="checkbox"]:focus-visible { outline:2px solid rgba(79,70,229,.45); outline-offset:2px; }
input[type="number"].field { font-variant-numeric:tabular-nums; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:4px; padding:.45rem .85rem; font-size:.8125rem; font-weight:500; cursor:pointer; border:none; font-family:inherit; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:#4f46e5; color:#fff; }
.btn-primary:hover:not(:disabled) { background:#4338ca; }
.btn-ghost { background:transparent; border:1px solid #1f2a3a; color:#d1d5db; }
.btn-ghost:hover:not(:disabled) { background:#111827; border-color:#2a3548; }
.btn-danger { background:transparent; border:1px solid #7f1d1d; color:#fca5a5; }
.btn-danger:hover:not(:disabled) { background:#7f1d1d; color:#fff; }
.btn-warn { background:transparent; border:1px solid #92400e; color:#fcd34d; }
.btn-warn:hover:not(:disabled) { background:#78350f; color:#fff; }
.tag { display:inline-flex; align-items:center; gap:.25rem; font-family:'IBM Plex Mono',monospace; font-size:.6875rem; font-weight:500; letter-spacing:.02em; padding:.12rem .4rem; border:1px solid #1f2a3a; border-radius:2px; color:#9ca3af; text-transform:uppercase; }
.tag-ok { border-color:#065f46; color:#6ee7b7; background:#022c22; }
.tag-warn { border-color:#92400e; color:#fcd34d; background:#1c1408; }
.tag-bad { border-color:#7f1d1d; color:#fca5a5; background:#1c0808; }
.tag-info { border-color:#3730a3; color:#a5b4fc; background:#1e1b4b; }
table.data { width:100%; border-collapse:collapse; }
table.data th { font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; padding:.55rem .5rem; border-bottom:1px solid #1f2a3a; text-align:left; }
table.data td { font-size:.8125rem; padding:.6rem .5rem; border-bottom:1px solid #151c28; vertical-align:middle; }
table.data tr:hover td { background:rgba(17,24,39,.55); }
.nav-btn { display:flex; width:100%; align-items:center; gap:.65rem; border-radius:4px; padding:.55rem .7rem; font-size:.8125rem; font-weight:500; color:#9ca3af; text-align:left; border:none; border-left:2px solid transparent; background:transparent; cursor:pointer; font-family:inherit; text-decoration:none; }
.nav-btn:hover { background:#111827; color:#e5e7eb; }
.nav-btn.active { background:#111827; color:#fff; border-left-color:#4f46e5; }
.nav-btn.active .ico { color:#818cf8; }
.panel { border:1px solid #1f2a3a; background:#0f1623; border-radius:4px; }
.stat-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:4px; border:1px solid #1f2a3a; background:#0a0f18; }
.page-title { display:flex; align-items:center; gap:.55rem; font-size:15px; font-weight:600; color:#fff; margin:0; }
.label { display:block; margin-bottom:.25rem; font-size:12px; color:#6b7280; }
.impersonate-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem 1rem; background:#1c1408; border-bottom:1px solid #92400e; color:#fcd34d; font-size:13px; }
#toasts { z-index:80; }
.modal-root { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem 2rem; background:rgba(5,8,14,.72); backdrop-filter:blur(2px); overflow:auto; }
.modal-root.tab-hidden { display:none !important; }
.modal-card { width:100%; max-width:40rem; border:1px solid #1f2a3a; background:#0f1623; border-radius:6px; box-shadow:0 24px 64px rgba(0,0,0,.45); }
.modal-card.wide { max-width:44rem; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid #1f2a3a; }
.modal-head h3 { margin:0; font-size:.95rem; font-weight:600; color:#f3f4f6; display:flex; align-items:center; gap:.45rem; }
.modal-body { padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.85rem; }
.modal-foot { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; padding:0 1.1rem 1.1rem; }
.modal-section { font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; margin-top:.25rem; }
@media (max-width:900px) {
  #shell { flex-direction:column; }
  #sidebar { width:100% !important; height:auto !important; position:relative !important; border-right:none; border-bottom:1px solid #1f2a3a; }
  #sidebar nav { display:flex; flex-wrap:wrap; gap:.25rem; }
  #sidebar .nav-btn { width:auto; border-left:none; border-bottom:2px solid transparent; padding:.45rem .65rem; }
  #sidebar .nav-btn.active { border-bottom-color:#4f46e5; }
  #sidebar .nav-section { display:none; }
}
