:root {
  --bg: #0e1320;
  --card: #1a2238;
  --card-2: #25314f;
  --muted: #9aa3b2;
  --text: #e8ecf1;
  --accent: #7aa2ff;
  --accent-2: #52d1c6;
  --error: #ff6b6b;
  --ok: #10b981;
  --shadow: 0 8px 22px rgba(0,0,0,.35);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #213057 0%, transparent 60%),
              radial-gradient(900px 600px at 110% 10%, #16223f 0%, transparent 60%),
              var(--bg);
}

/* Header */
.shell { max-width: 1280px; margin: 0 auto; padding: 28px 20px 40px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .2px; }
.brand .logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg,var(--accent),var(--accent-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), var(--shadow); display: grid; place-items: center; }
.brand .logo svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.actions { display:flex; gap:10px; }
.btn { appearance: none; border: 1px solid rgba(255,255,255,.12); background: #0f172a66; color: var(--text); padding: 10px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); transition: .2s ease; }
.btn:hover { border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
.btn.primary { border-color: transparent; background: linear-gradient(145deg,var(--accent),#5e89ff); box-shadow: 0 8px 20px rgba(122,162,255,.25); }


/* Table */
.card { margin-top: 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.table-wrap { overflow: auto; max-height: 62vh; }

table { width: 1600px; border-collapse: separate; border-spacing: 0; }
thead th { position: sticky; top: 0; z-index: 3; background: var(--card); padding: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; }
tbody td { background: #1a2238; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }

/* sticky first two columns */
.sticky-0 { position: sticky; left: 0; z-index: 4; }
.sticky-1 { position: sticky; left: 70px; z-index: 4; }

/* row hover */
tbody tr:hover td { background: #223055; }

/* checkbox + switch */
.checkbox { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.35); display:inline-grid; place-items:center; cursor: pointer; }
.checkbox input { display:none; }
.checkbox svg { opacity: 0; transform: scale(.7); transition: .15s ease; }
.checkbox input:checked + svg { opacity: 1; transform: scale(1); }


.right { text-align: right; }
.muted { color: var(--muted); font-size: 12px; opacity: .85; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #2a3556; border: 1px solid rgba(255,255,255,.10); }
.badge.error { color: #ffc9c9; background: rgba(255,107,107,.08); border-color: rgba(255,107,107,.25); }

/* Footer totalizer */
tfoot th, tfoot td { position: sticky; bottom: 0; background: var(--card); z-index: 2; padding: 12px; border-top: 1px solid rgba(255,255,255,.12); }

/* Sort indicators */
.th-sort { cursor: pointer; user-select: none; }
.th-sort svg { width: 12px; height: 12px; margin-left: 6px; opacity: .55; }

/* Responsive */
@media (max-width: 920px) {
  table { width: 1200px; }
}