/* =====================================================================
   Blaze Edge — WAF panel design system (dark-first).
   Full skin: variables, app-shell, sidebar/topbar, cards, tables, forms.
   Loads AFTER Bootstrap CDN so component overrides win. Remixicon (ri-*)
   is still used inside page content; the sidebar uses iconify solar icons.
   ===================================================================== */

:root {
  --primary-50:#ECF3FF; --primary-100:#DCE9FF; --primary-200:#BFD6FF; --primary-300:#6BB1FF;
  --primary-400:#519FFF; --primary-500:#458EFF; --primary-600:#487FFF; --primary-700:#486CEA;
  --primary-800:#4759D6; --primary-900:#4536B6;
  --neutral-50:#F5F6FA; --neutral-100:#F3F4F6; --neutral-200:#EBECEF; --neutral-300:#D1D5DB;
  --neutral-400:#9CA3AF; --neutral-500:#6B7280; --neutral-600:#4B5563; --neutral-700:#374151;
  --neutral-800:#1F2937; --neutral-900:#111827;
  --success:#45B369; --success-surface:#DAF0E1; --warning:#FF9F29; --warning-surface:#FFF3E6;
  --danger:#EF4770; --danger-surface:#FDE7ED; --info:#2FB6E7; --info-surface:#E0F4FB;
  --purple:#8C5BFF; --purple-surface:#EDE4FF;
  --blaze:#f6821f; --blaze-2:#ff5b2e;

  --bg:#f5f6fa; --surface:#ffffff; --surface-2:#f8f9fc; --sidebar-bg:#ffffff;
  --border:#e6e8ee; --border-soft:#eef0f4;
  --text:#1f2937; --text-dim:#4b5563; --text-muted:#9ca3af;
  --brand:var(--primary-600); --brand-soft:var(--primary-50);
  --primary-rgb:72 127 255;

  --shadow-sm:0 1px 2px rgba(16,24,40,.05); --shadow:0 6px 24px rgba(16,24,40,.08);
  --shadow-lg:0 16px 48px rgba(16,24,40,.14);
  --radius:16px; --radius-md:12px; --radius-sm:8px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

[data-theme=dark] {
  --neutral-50:#1B2431; --neutral-100:#273142; --neutral-200:#323D4E; --neutral-300:#4B5563;
  --neutral-400:#6B7280; --neutral-500:#9CA3AF; --neutral-600:#D1D5DB; --neutral-700:#EBECEF;
  --neutral-800:#F3F4F6; --neutral-900:#F5F6FA;
  --bg:#15202e; --surface:#1b2431; --surface-2:#202c3c; --sidebar-bg:#1b2431;
  --border:#2c3a4d; --border-soft:#243044;
  --text:#e9edf5; --text-dim:#aeb9ca; --text-muted:#6b7a90;
  --brand-soft:rgba(72,127,255,.16);
  --success-surface:#183028; --warning-surface:#33291a; --danger-surface:#331a24; --info-surface:#16303a; --purple-surface:#241a3a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 6px 24px rgba(0,0,0,.35); --shadow-lg:0 16px 48px rgba(0,0,0,.5);
}

* { box-sizing:border-box; }
html, body { max-width:100%; }
body {
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background .2s, color .2s;
}
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:none; }
iconify-icon { display:inline-flex; vertical-align:middle; }
img { max-width:100%; height:auto; }

/* =====================================================================
   App shell — sidebar + main
   ===================================================================== */
.app-shell { display:flex; min-height:100vh; }

.sidebar {
  width:264px; background:var(--sidebar-bg); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:1040;
  box-shadow:var(--shadow-sm); transition:transform .2s;
}
.sidebar-brand {
  display:flex; align-items:center; gap:12px; padding:20px 22px;
  border-bottom:1px solid var(--border-soft);
}
.sidebar-brand .brand-emblem {
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center;
  font-size:22px; color:#fff; background:linear-gradient(135deg,var(--blaze),var(--blaze-2));
  box-shadow:0 6px 16px rgba(246,130,31,.35);
}
.sidebar-brand .brand-logo-tile {
  width:42px; height:42px; border-radius:12px; flex-shrink:0; overflow:hidden;
  background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.18), 0 0 0 1px var(--border-soft);
}
.sidebar-brand .brand-logo-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.sidebar-brand .brand-name { font-weight:700; font-size:18px; letter-spacing:-.3px; color:var(--text); }
.sidebar-brand .brand-name b { color:var(--brand); }
.sidebar-brand .brand-sub { font-size:11.5px; color:var(--text-muted); font-weight:500; }

.sidebar-scroll {
  overflow-y:auto; flex:1; min-height:0; scroll-behavior:smooth; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:transparent transparent; padding-bottom:8px;
}
.sidebar-scroll:hover { scrollbar-color:var(--neutral-300) transparent; }
.sidebar-scroll::-webkit-scrollbar { width:8px; }
.sidebar-scroll::-webkit-scrollbar-track { background:transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:100px; border:2px solid transparent; background-clip:content-box; }
.sidebar-scroll:hover::-webkit-scrollbar-thumb { background:var(--neutral-300); background-clip:content-box; }

.nav-group { padding:14px 14px 4px; }
.nav-group-label {
  font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted);
  padding:8px 12px; font-weight:700;
}
.nav-item {
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--radius-sm);
  color:var(--text-dim); font-weight:500; font-size:14px; margin-bottom:3px;
  transition:all .14s; position:relative;
}
.nav-item:hover { background:var(--neutral-100); color:var(--text); }
.nav-item.active { background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(72,127,255,.30); }
.nav-item.active iconify-icon, .nav-item.active i { color:#fff; }
.nav-item iconify-icon { font-size:20px; flex-shrink:0; opacity:.95; }
.nav-item i { font-size:19px; flex-shrink:0; width:20px; text-align:center; opacity:.95; }

.sidebar-foot { padding:16px; border-top:1px solid var(--border-soft); }
.sidebar-foot .user-row { display:flex; align-items:center; gap:11px; }
.sidebar-foot .user-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-size:15px; font-weight:700; color:#fff; overflow:hidden;
  background:linear-gradient(135deg,var(--brand),#6d7ce0);
}
.sidebar-foot .user-name { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-foot .user-sub { font-size:11.5px; color:var(--text-muted); }

/* Main column */
.main { flex:1; margin-left:264px; display:flex; flex-direction:column; min-width:0; }
.topbar {
  min-height:72px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center;
  justify-content:space-between; padding:0 28px; background:var(--surface);
  position:sticky; top:0; z-index:1020; gap:16px;
}
.topbar h1 { font-size:20px; font-weight:700; letter-spacing:-.3px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-left { display:flex; align-items:center; gap:14px; min-width:0; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.topbar-profile { display:flex; align-items:center; gap:10px; cursor:pointer; }
.topbar-profile::after { margin-left:2px; } /* keep Bootstrap caret tidy */
.icon-btn {
  width:42px; height:42px; border-radius:50%; border:none; background:var(--neutral-100);
  color:var(--text-dim); display:grid; place-items:center; font-size:20px; transition:all .14s;
}
.icon-btn:hover { background:var(--brand-soft); color:var(--brand); }
.icon-btn iconify-icon { font-size:20px; }

.content { padding:28px; flex:1; }
.content > .container-fluid { max-width:1360px; padding:0; }

.mobile-toggle { display:none; }

/* =====================================================================
   Cards
   ===================================================================== */
.card, .card.custom-card {
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); margin-bottom:20px; color:var(--text);
}
.card > .card-body, .card-body { padding:22px; }
.card-header {
  display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border-soft);
  background:transparent; border-radius:var(--radius) var(--radius) 0 0;
}
.card-header.justify-content-between { justify-content:space-between; }
.card-title { font-size:16px; font-weight:700; letter-spacing:-.2px; margin:0; color:var(--text); }
.card-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; }
.card-h h3 { font-size:16px; font-weight:700; letter-spacing:-.2px; }
.card-h .sub { font-size:12.5px; color:var(--text-muted); }

/* Grids */
.grid { display:grid; gap:20px; }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

/* Stat pieces */
.stat-card { position:relative; overflow:hidden; }
.stat-corner-icon { position:absolute; inset-inline-end:1.1rem; inset-block-start:1.1rem; font-size:1.9rem; opacity:.16; }
.stat-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.stat-value { font-size:24px; font-weight:800; color:var(--text); line-height:1.1; letter-spacing:-.4px; }
.stat-label { font-size:12px; color:var(--text-muted); font-weight:500; margin-top:2px; }
.soft-orange{background:rgba(246,130,31,.14);color:var(--blaze);} .soft-blue{background:rgba(69,170,242,.14);color:#45aaf2;}
.soft-violet{background:rgba(140,91,255,.14);color:var(--purple);} .soft-rose{background:rgba(239,71,112,.14);color:var(--danger);}
.soft-emerald{background:rgba(69,179,105,.14);color:var(--success);} .soft-amber{background:rgba(255,159,41,.16);color:var(--warning);}
.soft-slate{background:rgba(72,127,255,.12);color:var(--brand);} .soft-primary{background:var(--brand-soft);color:var(--brand);}

/* Status pills */
.status { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:30px; white-space:nowrap; }
.status i { font-size:7px; }
.status-green{background:rgba(69,179,105,.16);color:var(--success);} .status-red{background:rgba(239,71,112,.16);color:var(--danger);}
.status-amber{background:rgba(255,159,41,.18);color:var(--warning);} .status-blue{background:rgba(69,170,242,.16);color:var(--info);}
.status-slate{background:rgba(72,127,255,.14);color:var(--brand);} .status-violet{background:rgba(140,91,255,.16);color:var(--purple);}

/* Avatar */
.avatar-initial {
  width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#6d7ce0);
}

/* =====================================================================
   Tables — both Bootstrap .table and the ported .tbl
   ===================================================================== */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Bootstrap .table dark-mode variables (otherwise cells render light) */
.table {
  --bs-table-bg:transparent; --bs-table-color:var(--text);
  --bs-table-border-color:var(--border-soft);
  --bs-table-striped-bg:var(--surface-2); --bs-table-striped-color:var(--text);
  --bs-table-hover-bg:var(--surface-2); --bs-table-hover-color:var(--text);
  --bs-table-active-bg:var(--surface-2); --bs-table-active-color:var(--text);
  color:var(--text);
}
.table-responsive { background:transparent; }
.card-footer { background:transparent; border-top:1px solid var(--border-soft); color:var(--text-dim); padding:14px 22px; }
table.tbl, table.table { width:100%; border-collapse:collapse; font-size:13px; color:var(--text); }
.tbl thead th, .table thead th {
  text-align:left; padding:12px 14px; color:var(--text-muted); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border-soft);
  background:var(--surface-2); white-space:nowrap;
}
.tbl tbody td, .table tbody td { padding:14px; border-bottom:1px solid var(--border-soft); vertical-align:middle; font-size:14px; }
.tbl tbody tr:last-child td, .table tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr, .table tbody tr { transition:background .12s; }
.tbl tbody tr:hover td, .table tbody tr:hover td { background:var(--surface-2); }
.tbl .t-strong, .t-strong { font-weight:600; color:var(--text); }
.tbl .t-muted, .t-muted { color:var(--text-muted); font-weight:400; }

.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em; }

/* =====================================================================
   Buttons — override Bootstrap so they wear the Blaze skin
   ===================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px;
  border-radius:var(--radius-sm); font-size:14px; font-weight:600; border:1px solid var(--border);
  background:var(--surface); color:var(--text); transition:all .14s; white-space:nowrap; line-height:1.2;
}
.btn:hover { background:var(--neutral-100); color:var(--text); }
.btn:disabled, .btn.disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn.sm, .btn-sm { padding:8px 14px; font-size:13px; }
.btn.btn-lg, .btn-lg { padding:13px 24px; font-size:15px; }

.btn-primary, .btn.primary {
  background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(72,127,255,.28);
}
.btn-primary:hover, .btn.primary:hover { filter:brightness(.96); background:var(--brand); color:#fff; }
.btn-primary-light, .btn-primary-soft {
  background:var(--brand-soft); border-color:transparent; color:var(--brand);
}
.btn-primary-light:hover { background:var(--brand-soft); filter:brightness(.97); color:var(--brand); }
.btn-danger, .btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover { filter:brightness(.95); background:var(--danger); color:#fff; }
.btn-success { background:var(--success); border-color:var(--success); color:#fff; }
.btn-outline-primary { background:transparent; border-color:var(--brand); color:var(--brand); }
.btn-outline-primary:hover { background:var(--brand); color:#fff; }
.btn-light, .btn-outline-secondary { background:var(--surface); border-color:var(--border); color:var(--text-dim); }
.btn.ghost, .btn-ghost { background:transparent; border-color:transparent; color:var(--text-dim); }
.btn.ghost:hover, .btn-ghost:hover { color:var(--text); background:var(--neutral-100); }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }

/* =====================================================================
   Forms — Bootstrap + ported
   ===================================================================== */
.form-control, .form-select, .input, .select, textarea.input {
  width:100%; padding:10px 13px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:14px; color:var(--text); transition:border-color .15s, box-shadow .15s; font-family:inherit;
}
.form-control:focus, .form-select:focus, .input:focus, .select:focus, textarea.input:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:var(--surface);
}
.form-control::placeholder { color:var(--text-muted); }
.form-select { -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239CA3AF'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px; padding-right:34px; }
.form-select.form-select-sm, .form-control-sm { padding:7px 11px; font-size:13px; }
.form-label, .field > label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:7px; }
.field { margin-bottom:18px; }
.field-hint, .form-text { font-size:12px; color:var(--text-muted); margin-top:6px; }
.form-actions { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }

.form-check-input { background-color:var(--surface-2); border:1px solid var(--border); }
.form-check-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }
.form-check-input.l4-toggle { cursor:pointer; }
.form-check-input.l4-toggle:disabled { cursor:wait; }
/* Switches: visible track + thumb in the dark theme */
.form-switch .form-check-input {
  width:40px; height:22px; margin-top:1px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23aeb9ca'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-label { cursor:pointer; }

/* =====================================================================
   Badges / alerts / dropdowns — dark-aware
   ===================================================================== */
.badge { font-weight:600; border-radius:6px; padding:.35em .6em; font-size:11.5px; }
.badge.bg-primary { background:var(--brand) !important; }
.badge.bg-success { background:var(--success) !important; }
.badge.bg-danger { background:var(--danger) !important; }
.badge.bg-warning { background:var(--warning) !important; color:#3a2a0a; }
.badge.bg-info { background:var(--info) !important; }
.badge.bg-secondary { background:var(--neutral-300) !important; color:var(--text); }
/* Dashtic "transparent" tinted badges (used by abuse rows) */
.badge.bg-primary-transparent { background:var(--brand-soft); color:var(--brand); }
.badge.bg-danger-transparent { background:rgba(239,71,112,.15); color:var(--danger); }
.badge.bg-warning-transparent { background:rgba(255,159,41,.16); color:var(--warning); }
.badge.bg-success-transparent { background:rgba(69,179,105,.16); color:var(--success); }
.badge.bg-info-transparent { background:rgba(47,182,231,.16); color:var(--info); }
.badge.bg-secondary-transparent { background:var(--neutral-100); color:var(--text-dim); }

.alert { border-radius:var(--radius-md); border:1px solid transparent; padding:13px 16px; font-size:13.5px; margin-bottom:16px; }
.alert-success { background:var(--success-surface); border-color:rgba(69,179,105,.35); color:var(--success); }
.alert-danger { background:var(--danger-surface); border-color:rgba(239,71,112,.35); color:var(--danger); }
.alert-warning { background:var(--warning-surface); border-color:rgba(255,159,41,.35); color:var(--warning); }
.alert-info { background:var(--info-surface); border-color:rgba(47,182,231,.35); color:var(--info); }

/* Modals — dark, theme-aware */
.modal-content {
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.modal-header, .modal-footer { border-color:var(--border-soft); }
.modal-title { color:var(--text); }
.modal-body { color:var(--text); }
.btn-close { filter:invert(1) grayscale(1) brightness(1.6); opacity:.7; }
.btn-close:hover { opacity:1; }
[data-theme="light"] .btn-close { filter:none; }
.modal-backdrop.show { opacity:.62; }

.dropdown-menu {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow); color:var(--text); padding:6px;
}
.dropdown-item { border-radius:var(--radius-sm); color:var(--text-dim); font-size:13.5px; padding:9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background:var(--neutral-100); color:var(--text); }
.dropdown-item.text-danger { color:var(--danger) !important; }
.dropdown-divider { border-color:var(--border-soft); }
.dropdown-header { color:var(--text-muted); }

/* Text color helpers used by pages */
.text-primary { color:var(--brand) !important; }
.text-muted { color:var(--text-muted) !important; }
.text-white { color:#fff !important; }
.dim { color:var(--text-dim); }
.border, .border-top, .border-bottom { border-color:var(--border-soft) !important; }

/* =====================================================================
   Empty state + code block
   ===================================================================== */
.empty { text-align:center; padding:54px 20px; color:var(--text-muted); }
.empty i { font-size:40px; color:var(--text-muted); margin-bottom:14px; display:block; opacity:.6; }
.empty h3 { font-size:16px; font-weight:700; color:var(--text); margin:0 0 6px; }
.code-block {
  background:#0f1830; color:#dbe1ff; border-radius:var(--radius-sm); padding:16px; overflow-x:auto;
  font-family:ui-monospace,Menlo,monospace; font-size:12px; line-height:1.6; border:1px solid var(--border-soft);
}

/* Page header inside views */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.page-head h1 { font-size:20px; font-weight:700; margin:0; color:var(--text); letter-spacing:-.3px; }
.page-head .muted { color:var(--text-muted); font-size:13px; margin:4px 0 0; font-weight:400; }

/* Dashboard welcome banner */
.dash-welcome {
  border:none !important; color:#fff !important;
  background:linear-gradient(120deg,var(--brand) 0%,#3a5bd6 55%,#1e2a6b 100%) !important;
}
.dash-welcome .card-body { color:#fff; }
.dash-welcome .stat-icon { border-radius:16px; }
.bg-white-transparent { background:rgba(255,255,255,.16) !important; color:#fff; }

/* Telemetry chart containers keep a stable height */
.chart-box { position:relative; height:300px; }
.chart-box canvas { max-width:100%; }

/* =====================================================================
   Toasts
   ===================================================================== */
.app-toast-host { position:fixed; right:24px; bottom:24px; display:flex; flex-direction:column; gap:12px; z-index:2000; }
.app-toast {
  padding:12px 16px; border-radius:var(--radius-sm); background:var(--surface); color:var(--text);
  border:1px solid var(--border); box-shadow:var(--shadow); min-width:240px; font-size:13px;
  animation:app-toast-in .18s ease;
}
.app-toast.ok { border-left:3px solid var(--success); }
.app-toast.err { border-left:3px solid var(--danger); }
@keyframes app-toast-in { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* Live auto-refresh indicator */
.live-indicator { background:rgba(69,179,105,.10); border:1px solid rgba(69,179,105,.30); border-radius:999px; padding:5px 14px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--success); flex:0 0 auto; animation:livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(69,179,105,.55);} 70%{box-shadow:0 0 0 8px rgba(69,179,105,0);} 100%{box-shadow:0 0 0 0 rgba(69,179,105,0);} }

/* Spinner + chart loading skeleton */
.spinner {
  display:inline-block; width:26px; height:26px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--brand); animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.chart-wrap { position:relative; min-height:240px; border-radius:10px; overflow:hidden; }
.chart-wrap img { width:100%; height:auto; display:block; border-radius:10px; }
.chart-loading {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));
  background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; color:var(--text-muted); font-size:12.5px;
}
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* SSL provisioning step list (Domains → SSL Al modal) */
.ssl-steps { list-style:none; margin:0; padding:0; }
.ssl-step { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border-soft); }
.ssl-step:last-child { border-bottom:none; }
.ssl-step .ss-ico { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:14px; flex-shrink:0; background:var(--neutral-100); color:var(--text-muted); }
.ssl-step .ss-label { font-weight:500; flex:1; }
.ssl-step .ss-detail { font-size:12px; color:var(--text-muted); }
.ssl-step.done .ss-ico { background:rgba(69,179,105,.16); color:var(--success); }
.ssl-step.running .ss-ico { background:rgba(72,127,255,.16); color:var(--brand); animation:attackPulse 1.2s ease-in-out infinite; }
.ssl-step.error .ss-ico { background:rgba(239,71,112,.16); color:var(--danger); }
.ssl-step.skipped .ss-ico { opacity:.6; }
.ssl-step.pending { opacity:.6; }

/* Topbar live-traffic pill */
.live-pill {
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  background:rgba(69,179,105,.10); border:1px solid rgba(69,179,105,.30);
  font-size:12.5px; font-weight:600; color:var(--text-dim);
}
.live-pill.attack { background:rgba(239,71,112,.12); border-color:rgba(239,71,112,.40); color:var(--danger); }
.live-pill.attack .live-dot { background:var(--danger); animation:livePulse 1s ease-out infinite; }

/* Full-width attack alert bar (slides down from the top) */
#attackAlert {
  position:fixed; top:0; left:0; right:0; z-index:3000; transform:translateY(-110%);
  transition:transform .3s ease; background:linear-gradient(90deg,var(--danger),#c81e4e);
  color:#fff; box-shadow:0 8px 28px rgba(239,71,112,.4);
}
#attackAlert.show { transform:translateY(0); }
#attackAlert .inner { display:flex; align-items:center; gap:14px; padding:12px 22px; max-width:1360px; margin:0 auto; }
#attackAlert .ico { font-size:26px; flex-shrink:0; animation:attackShake .5s ease-in-out infinite; }
#attackAlert .txt { flex:1; min-width:0; }
#attackAlert .txt b { font-size:15px; }
#attackAlert .txt small { display:block; opacity:.9; font-size:12.5px; }
#attackAlert .close { background:rgba(255,255,255,.2); border:none; color:#fff; width:32px; height:32px; border-radius:50%; font-size:18px; cursor:pointer; flex-shrink:0; }
@keyframes attackShake { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-12deg);} 75%{transform:rotate(12deg);} }

/* Attack ("panic") mode active banner — pulsing danger. */
.attack-active {
  border-left-color:var(--warning) !important;
  background:linear-gradient(90deg, rgba(255,159,41,.10), transparent 60%) !important;
  animation:attackPulse 2s ease-in-out infinite;
}
@keyframes attackPulse {
  0%,100% { box-shadow:var(--shadow-sm); }
  50% { box-shadow:0 0 0 4px rgba(255,159,41,.18); }
}

/* Abuse: unread row + new dot */
.abuse-unread { background:rgba(246,130,31,.07); }
.abuse-row:hover { background:var(--surface-2); }
.abuse-dot { width:8px; height:8px; border-radius:50%; background:var(--blaze); display:inline-block; flex-shrink:0; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1200px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .mobile-toggle{display:grid;}
  .topbar{padding:0 18px 0 64px;}
}
@media (max-width:760px){
  .grid-4{grid-template-columns:1fr;}
  .grid{gap:14px;}
  .content{padding:18px;}
}
@media (max-width:420px){ .btn{padding:10px 16px;font-size:13.5px;} }

/* Sidebar backdrop on mobile */
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1035; }
.sidebar-backdrop.show { display:block; }

/* =====================================================================
   Auth / login (split-screen aurora hero) — preserved
   ===================================================================== */
.text-fixed-white { color:#fff; }
.auth-hero { width:46%; background:radial-gradient(120% 120% at 30% 15%,#182357 0%,#0c1236 55%,#070a24 100%); }
.auth-hero-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }
.auth-hero-bg .blob { position:absolute; border-radius:50%; filter:blur(72px); opacity:.55; mix-blend-mode:screen; will-change:transform; }
.auth-hero-bg .b1 { width:360px; height:360px; background:#f97316; top:-70px; left:-50px; animation:heroDrift1 15s ease-in-out infinite; }
.auth-hero-bg .b2 { width:320px; height:320px; background:#2f6fe0; bottom:-90px; right:-50px; animation:heroDrift2 18s ease-in-out infinite; }
.auth-hero-bg .b3 { width:280px; height:280px; background:#7a5cf0; top:34%; left:34%; animation:heroDrift3 20s ease-in-out infinite; }
.auth-hero-bg .b4 { width:240px; height:240px; background:#fb5b51; bottom:16%; left:-40px; animation:heroDrift2 22s ease-in-out infinite reverse; }
@keyframes heroDrift1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(70px,50px) scale(1.15);} }
@keyframes heroDrift2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-60px,-40px) scale(1.1);} }
@keyframes heroDrift3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-60px) scale(1.2);} }
.auth-hero-grid { position:absolute; inset:0; z-index:1; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at center,#000 25%,transparent 78%); mask-image:radial-gradient(circle at center,#000 25%,transparent 78%); }
.auth-hero-vignette { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(4,6,20,.55) 100%); }
.auth-hero-title { color:#fff; letter-spacing:.2px; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.login-shield { position:relative; width:300px; height:300px; display:flex; align-items:center; justify-content:center; }
.login-shield .ring { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.14); }
.login-shield .r1 { width:300px; height:300px; border-color:rgba(249,115,22,.25); animation:loginPulse 4s ease-out infinite; }
.login-shield .r2 { width:230px; height:230px; border-color:rgba(47,111,224,.30); animation:loginPulse 4s ease-out infinite .8s; }
.login-shield .r3 { width:168px; height:168px; border-color:rgba(255,255,255,.24); }
.login-shield .shield-glow { position:absolute; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 38% 42%,rgba(249,115,22,.55),transparent 60%),radial-gradient(circle at 65% 60%,rgba(47,111,224,.55),transparent 62%);
  filter:blur(26px); z-index:0; animation:heroDrift3 12s ease-in-out infinite; }
.login-shield .shield-core { position:relative; z-index:1; padding:0; }
.login-shield .shield-core img { width:210px; max-width:60vw; height:auto; display:block; }
@keyframes loginPulse { 0%{transform:scale(.85);opacity:.8;} 70%{transform:scale(1.08);opacity:0;} 100%{transform:scale(1.08);opacity:0;} }