:root {
  color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #111111;
  color: #f5f7ff;
  --arkham-bg: #111111;
  --arkham-panel: #171717;
  --arkham-primary: #A855F7;
  --arkham-secondary: #C026D3;
  --arkham-sky: #6B21A8;
  --arkham-ice: #4C1D95;
  --arkham-violet: #312E81;
  --arkham-text: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 32px clamp(16px, 3vw, 48px);
  background: radial-gradient(circle at 15% 20%, #1f1140, var(--arkham-bg) 55%);
  color: var(--arkham-text);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: #7d8abf;
  margin: 0 0 6px;
}

header h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.timestamp { font-size: 0.95rem; color: #8c9bd1; }

.main-nav {
  margin: 24px 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.main-nav button {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(49, 46, 129, 0.6);
  color: #c8d8ff;
  padding: 10px 18px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.main-nav button.active {
  border-color: var(--arkham-secondary);
  color: var(--arkham-secondary);
  box-shadow: 0 0 12px rgba(192,38,211,0.35);
}

main { display: flex; flex-direction: column; gap: 20px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.metric-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  background: rgba(10,14,26,0.8);
  backdrop-filter: blur(12px);
}

.metric-card .label { margin: 0; color: #8a97c4; font-size: 0.85rem; }
.metric-card .value { margin: 4px 0 0; font-size: 1.8rem; font-weight: 600; }
.metric-card .sub { margin: 4px 0 0; color: #6e7caf; font-size: 0.85rem; }

.chart-panel {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 20px;
  background: var(--arkham-panel);
}
.chart-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.chart-header h2 { margin:0; font-size:1rem; color:#dce4ff; }
.range-switch { display:flex; gap:8px; flex-wrap:wrap; }
.range-switch button {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(6,12,22,0.8);
  color: #9db5ff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
}
.range-switch button.active {
  border-color: var(--arkham-secondary);
  color: var(--arkham-secondary);
  box-shadow: 0 0 8px rgba(192,38,211,0.35);
}
.chart { width: 100%; height: 260px; }

.agent-board,
.panel {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 20px;
  background: rgba(23,17,23,0.9);
  backdrop-filter: blur(14px);
}
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.legend { display: flex; gap: 10px; font-size: 0.8rem; color: #8da5d8; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 4px; }
.legend .dot.busy { background: var(--arkham-secondary); }
.legend .dot.idle { background: var(--arkham-ice); }
.legend .dot.blocked { background: var(--arkham-violet); }
.legend .dot.offline { background: rgba(255,255,255,0.35); }

.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.agent-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; background: rgba(168,85,247,0.05); display: flex; flex-direction: column; gap: 12px; }
.agent-heading { display: flex; gap: 12px; align-items: center; }
.avatar { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.agent-name { margin: 0; font-weight: 600; }
.chip { padding: 2px 12px; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.chip.busy { background: rgba(0,255,198,0.18); color: var(--arkham-secondary); }
.chip.idle { background: rgba(255,208,99,0.2); color: var(--arkham-ice); }
.chip.blocked { background: rgba(255,111,144,0.2); color: var(--arkham-violet); }
.chip.offline { background: rgba(90,99,153,0.2); color: #747fa9; }
.agent-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.agent-stats dt { margin: 0; color: #8395c9; font-size: 0.75rem; }
.agent-stats dd { margin: 2px 0 0; font-size: 0.95rem; }
.recent-stream { font-size: 0.78rem; color: #93a5d6; display: grid; gap: 4px; }
.recent-stream p { display: flex; justify-content: space-between; margin: 0; }

.flow-matrix table, .analytics-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.flow-matrix th, .flow-matrix td, .analytics-table th, .analytics-table td {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 8px;
  text-align: center;
}

.analytics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.analytics-card .value { font-size: 1.8rem; margin: 8px 0 0; }
.analytics-card .sub { color: #8da5d8; margin: 4px 0 0; }

.control-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.token-field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.token-field label {
  width: 100%;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8da5d8;
}
.token-field input {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(6,12,22,0.8);
  color: #dfe8ff;
}
.token-field button {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(12,22,35,0.9);
  color: #cde7ff;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.token-field button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.control-buttons button {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(12,22,35,0.9);
  color: #cde7ff;
  cursor: pointer;
}
.control-buttons button:disabled { opacity: 0.6; cursor: not-allowed; }
.status { margin-top: 12px; color: var(--arkham-secondary); }
.hint { font-size: 0.85rem; color: #8da5d8; }

.events-stream { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: #9eb1e4; }

footer { margin-top: 24px; font-size: 0.8rem; color: #7685b5; text-align: center; }

.view { animation: fade 0.2s ease-in; }
@keyframes fade { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0,255,198,0.08), transparent 45%),
              radial-gradient(circle at 70% 30%, rgba(111,141,255,0.08), transparent 40%);
  pointer-events: none;
}

.panel::after,
.holo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(168,85,247,0.12);
  pointer-events: none;
}

.panel { position: relative; overflow: hidden; }
.holo-panel { background: rgba(9,14,28,0.9); box-shadow: 0 0 20px rgba(192,38,211,0.15); }

.panel-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }

.node-cloud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.node-chip {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(20,32,58,0.75);
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.node-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(168,85,247,0.16), rgba(49,45,129,0.12));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.node-chip:hover::before { opacity: 1; }
.node-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.node-meta { flex: 1; position: relative; z-index: 1; }
.node-name { margin: 0; font-weight: 600; }
.node-sub { margin: 6px 0 0; font-size: 0.78rem; color: #90a6d9; }
.node-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  margin-top: 6px;
  overflow: hidden;
}
.node-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--arkham-primary), var(--arkham-secondary));
  box-shadow: 0 0 10px rgba(168,85,247,0.6);
}

.analytics-card { position: relative; overflow: hidden; }
.analytics-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(168,85,247,0.22), transparent 70%);
}

.table-agent { display: flex; align-items: center; gap: 8px; }
.table-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.table-bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--arkham-sky), var(--arkham-ice));
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(192,38,211,0.5);
}
.table-bar em {
  position: absolute;
  top: -18px;
  right: 0;
  font-size: 0.7rem;
  color: #cdd9ff;
}

.view.controls .panel {
  background: rgba(10,16,26,0.92);
  border: 1px solid rgba(168,85,247,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.control-buttons button {
  position: relative;
  overflow: hidden;
}
.control-buttons button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(192,38,211,0.25);
}

.view.analytics { position: relative; }
.view.analytics::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 0%, rgba(95,156,255,0.08), transparent 50%);
  pointer-events: none;
}

.sigma-wrapper {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(12,18,34,0.7);
}
.sigma-wrapper h3 { margin: 0 0 8px; font-size: 0.9rem; color: #cdd9ff; }
.sigma-container {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  background: rgba(5,8,16,0.9);
}

.sigma-wrapper {
  width: 100%;
  height: 320px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(17,17,17,0.9);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

button.mini {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(49,46,129,0.6);
  color: var(--arkham-text);
  cursor: pointer;
}
button.mini:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}