:root {
  --player-blue: #ffffff;
  --player-blue-deep: #171717;
  --player-green: #ffffff;
  --player-cyan: #d4d4d4;
  --player-black: #000000;
}

body[data-theme="dark"] {
  --brand-strong: #ffffff;
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, .09);
  --bg: #000000;
  --panel: #0b0b0b;
  --panel-subtle: #141414;
  --control: #050505;
  --sidebar: #000000;
  --sidebar-soft: #101010;
  --sidebar-line: rgba(255, 255, 255, .18);
  --text: #ffffff;
  --muted: #b8b8b8;
  --line: #2b2b2b;
  --soft: rgba(255, 255, 255, .07);
  --table-head: #080808;
  --hover: #191919;
  --login-bg: #000000;
  --mobile-nav: rgba(0, 0, 0, .98);
  background: radial-gradient(circle at 88% 5%, rgba(255, 255, 255, .08), transparent 30%), var(--bg);
}

body[data-theme="dark"] .sidebar {
  border-right-color: var(--sidebar-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 24%), #000000;
}

.nav-item.active,
.button.primary {
  border-color: #ffffff;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
}

.button.primary:hover {
  border-color: #d4d4d4;
  background: #d4d4d4;
  color: #000000;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .16);
}

.hero-panel,
.metric-card,
.content-panel,
.card {
  border-color: #2b2b2b;
  background: linear-gradient(155deg, rgba(20, 20, 20, .98), rgba(6, 6, 6, .98));
}

.metric-card,
.metric-card:nth-child(2),
.metric-card:nth-child(3) {
  border-top-color: #ffffff;
}

.haventel-login {
  background-color: #000000;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 18% 25%, rgba(255, 255, 255, .12), transparent 34%);
}

.haventel-login .login-topline {
  border-bottom-color: rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .92);
  color: #ffffff;
}

.haventel-login .login-card,
.haventel-login .login-signal-card,
.haventel-login .login-client,
.haventel-login .login-card input {
  border-color: #353535;
}

.haventel-login .login-card,
.haventel-login .login-signal-card {
  background: linear-gradient(145deg, rgba(22, 22, 22, .97), rgba(4, 4, 4, .97));
}

.haventel-login .login-card {
  border-top-color: #ffffff;
}

.haventel-login .login-card .button.primary {
  border-color: #ffffff;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 12px 28px rgba(255, 255, 255, .12);
}

.haventel-login .login-card .button.primary:hover {
  border-color: #d4d4d4;
  background: #d4d4d4;
  color: #000000;
}

.haventel-login .login-card input {
  background: #050505;
}

.haventel-login .login-card input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .15);
}

.haventel-login .login-logo.player-one-login-logo {
  width: min(580px, 80vw);
  height: 220px;
  object-fit: cover;
  object-position: 50% 49%;
  mix-blend-mode: normal;
}

.haventel-login .login-client-logo {
  width: 200px;
  height: 80px;
  flex-basis: 200px;
  object-fit: cover;
  object-position: 50% 49%;
  mix-blend-mode: normal;
}

@media (max-width: 760px) {
  .haventel-login .login-logo.player-one-login-logo {
    width: min(340px, 88vw);
    height: 130px;
  }

  .haventel-login .login-client-logo {
    width: 170px;
    height: 68px;
    flex-basis: 170px;
  }
}