:root,
body[data-theme] {
  --bg: #070707;
  --panel: #111111;
  --panel2: #171717;
  --line: #262626;
  --text: #f5f5f5;
  --muted: #8b8b8b;
  --green: #f5f5f5;
  --green2: #d6d6d6;
  --amber: #f2b84b;
  --blue: #8ca8ff;
  --purple: #b7a2ff;
  --red: #ff6e65;
}

body {
  background: var(--bg);
  letter-spacing: -.01em;
}

.noise,
.controller-visual {
  display: none;
}

.sidebar {
  width: 236px;
  padding: 24px 14px;
  background: #0a0a0a;
  border-color: #1f1f1f;
}

.brand {
  min-height: 48px;
  padding: 0 8px 28px;
}

.brand img {
  width: 184px;
}

.nav-item {
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  color: #777;
  font-size: 13px;
}

.nav-item:hover,
.nav-item.active {
  color: #fff;
  background: #171717;
  box-shadow: none;
}

.nav-item .icon,
.nav-item.active .icon {
  color: currentColor;
}

.controller-mini {
  grid-template-columns: 34px 1fr 8px;
  background: #111;
  border-color: #242424;
  border-radius: 14px;
  padding: 12px;
}

.controller-icon {
  border: 0;
  border-radius: 8px;
  background: #f3f3f3;
  color: #090909;
  font-weight: 800;
}

.status-dot.online {
  background: #8de26d;
  box-shadow: 0 0 0 4px #8de26d18;
}

main {
  margin-left: 236px;
}

.topbar {
  height: 92px;
  padding: 20px 30px;
  background: #070707e8;
  border-color: #202020;
}

.eyebrow,
.kicker {
  color: #737373;
  letter-spacing: .08em;
}

.eyebrow span {
  color: #fff;
}

h1 {
  font-size: 24px;
  font-weight: 650;
}

.btn {
  min-height: 40px;
  border-color: #303030;
  background: #151515;
  border-radius: 11px;
  color: #eee;
}

.btn:hover {
  border-color: #555;
  transform: none;
}

.btn.primary {
  background: #f2f2f2;
  border-color: #f2f2f2;
  color: #080808;
}

.connect-dot {
  background: #080808;
}

.view {
  padding: 28px 30px 64px;
  max-width: 1320px;
}

.alert {
  min-height: 64px;
  padding: 14px 16px;
  background: #12100c;
  border-color: #332c20;
  border-left-width: 1px;
  border-radius: 16px;
}

.alert-icon {
  border: 0;
  background: #2b2110;
}

.hero-grid,
.lower-grid,
.tune-layout,
.diagnostics-grid {
  gap: 14px;
}

.controller-card,
.profile-card,
.panel,
.metric,
.profile-tile,
.empty-hero {
  background: #111;
  border-color: #242424;
  border-radius: 18px;
  box-shadow: none;
}

.controller-card {
  min-height: 248px;
  display: flex;
  flex-direction: column;
}

.controller-card .device-stats {
  margin-top: auto;
}

.profile-card {
  padding: 22px;
}

.profile-copy {
  color: #888;
}

.pill {
  border-radius: 8px;
}

.pill.offline {
  background: #181818;
  border-color: #303030;
}

.pill.online {
  color: #9be47f;
  background: #152110;
  border-color: #294022;
}

.score-bar,
.summary-ring circle {
  background: #242424;
}

.score-bar i,
.summary-ring circle.progress {
  background: #f3f3f3;
  stroke: #f3f3f3;
}

.metric-grid {
  gap: 10px;
}

.metric {
  min-height: 132px;
  padding: 18px;
}

.metric-icon {
  background: #1d1d1d !important;
  color: #ddd !important;
  border-radius: 9px;
}

.metric strong {
  font-size: 25px;
}

.tab-row {
  padding: 5px;
  background: #101010;
  border-color: #252525;
  border-radius: 14px;
}

.tab-row button {
  border-radius: 10px;
}

.tab-row button.active {
  background: #f2f2f2;
  color: #080808;
  box-shadow: none;
}

.control-row {
  border-color: #262626;
}

input[type=range]::-webkit-slider-thumb {
  background: #f4f4f4;
  border-color: #111;
  box-shadow: 0 0 0 1px #fff;
}

.range-wrap .range-fill {
  background: #f4f4f4;
}

.value-box {
  background: #0a0a0a;
  border-color: #303030;
}

.risk {
  background: #121712;
  border-color: #263126;
}

.empty-hero,
.diag-hero {
  background: #111;
}

.empty-hero h2,
.diag-hero h2 {
  font-weight: 650;
}

.profile-tile:hover {
  border-color: #555;
  transform: none;
}

.profile-tile.active {
  box-shadow: inset 0 0 0 1px #e7e7e7;
}

.modal-backdrop {
  background: #000d;
}

.modal {
  background: #101010;
  border-color: #2c2c2c;
  border-radius: 20px;
}

.choice {
  background: #171717;
  border-color: #2d2d2d;
  border-radius: 13px;
}

.choice:hover {
  border-color: #777;
}

.choice-icon {
  background: #f1f1f1;
  color: #090909;
  border-radius: 9px;
}

.theme-popover {
  background: #111;
  border-color: #2c2c2c;
  border-radius: 16px;
}

.theme-choice {
  border-radius: 11px;
}

@media (max-width: 760px) {
  .sidebar {
    width: 242px;
  }

  .topbar {
    min-height: 82px;
    padding: 14px 16px;
  }

  .view {
    padding: 16px 14px 44px;
  }

  .controller-card,
  .profile-card,
  .panel,
  .metric,
  .empty-hero {
    border-radius: 16px;
  }
}