:root {
  --bg: #000000;
  --panel: #050505;
  --panel-2: #0a0a0a;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #1e293b;
  --accent: #38bdf8;
  --accent-soft: #7dd3fc;
  --ok: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
}

body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(56,189,248,.10), transparent 55%),
    radial-gradient(900px 450px at 88% -8%, rgba(14,165,233,.08), transparent 50%),
    var(--bg) !important;
  color: var(--text) !important;
  letter-spacing: .01em;
}

.wrap { max-width: 1600px !important; padding: 20px !important; }

h1,h2,h3,strong,.title { color: #f8fafc !important; }
.small,.mini,.sub, .l, .muted { color: var(--muted) !important; }

.card,
.biz,
.agent,
.event,
.event-row,
.kpi,
.pc-tile {
  background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(56,189,248,.03),
    0 6px 18px rgba(2,6,23,.18);
}

.card:hover,
.biz:hover,
.agent:hover,
.pc-tile:hover {
  border-color: rgba(56,189,248,.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(56,189,248,.08),
    0 10px 26px rgba(14,165,233,.12);
}

.btn,
button,
.close-btn,
.user-btn {
  background: #020202 !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.btn:hover,
button:hover,
.close-btn:hover,
.user-btn:hover {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 1px #0ea5e955 inset, 0 8px 20px rgba(14,165,233,.12);
  transform: translateY(-1px);
}

input,
textarea,
select {
  background: #020202 !important;
  color: var(--text) !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
}

table { width: 100%; border-collapse: collapse; }
th,td { border-bottom: 1px solid var(--border) !important; }
th { color: var(--muted) !important; font-weight: 600 !important; }

.pill,
.tag,
.badge {
  border-radius: 999px !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  background: #020202 !important;
  color: #cfe8ff !important;
}

.ok{color:var(--ok)!important}
.warn{color:var(--warn)!important}
.bad{color:var(--bad)!important}

.flow,
#remoteChatFeed,
#chatFrame,
.modal-content,
.dropdown,
.mc-menu-panel {
  background: #020202 !important;
  border-color: var(--border) !important;
}

canvas { filter: saturate(1.03) contrast(1.02); }

@media (max-width: 1100px) {
  .wrap { padding: 14px !important; }
}