:root {
  --bg: #050b18;
  --panel: #0b1424;
  --panel-2: #101b2d;
  --line: #1a2b43;
  --text: #edf5ff;
  --muted: #7c8da6;
  --cyan: #1a96f3;
  --blue: #147ff3;
  --violet: #7588ff;
  --green: #00df91;
  --accent: #168cf4;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 7px 8px 25px;
}
.brand-logo {
  display: block;
  width: 100%;
  height: 42px;
  object-fit: contain;
  background: linear-gradient(135deg, #ffffff, #edf6ff);
  border: 1px solid rgba(123, 182, 230, 0.28);
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
  padding: 6px 9px;
}
.brand > small {
  text-align: center;
  color: #66809f;
  font-size: 7px;
  letter-spacing: 1.6px;
}
.login-logo {
  display: block;
  width: 210px;
  height: 70px;
  object-fit: contain;
  margin: 0 auto 23px;
  background: linear-gradient(135deg, #ffffff, #edf6ff);
  border: 1px solid rgba(123, 182, 230, 0.28);
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  padding: 10px 14px;
}
.primary {
  background: linear-gradient(135deg, #21a9f5, #147cf1);
  color: white;
}
.status-strip {
  border-color: rgba(32, 164, 243, 0.25);
  background: linear-gradient(
    90deg,
    rgba(16, 75, 135, 0.25),
    rgba(7, 20, 39, 0.75)
  );
}
.sidebar {
  background: rgba(5, 12, 26, 0.97);
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 7px 8px 25px;
}
.logo img {
  display: block;
  width: 100%;
  height: 48px;
  object-fit: contain;
  background: linear-gradient(135deg, #ffffff, #edf6ff);
  border: 1px solid rgba(123, 182, 230, 0.28);
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
  padding: 6px 9px;
}
.logo > small {
  text-align: center;
  color: #66809f;
  font-size: 7px;
  letter-spacing: 1.6px;
}
.logo + nav button.active,
.logo + nav button:hover {
  background: #0d2542;
  color: #39b8ff;
}
form button {
  background: linear-gradient(135deg, #21a9f5, #147cf1) !important;
  color: white !important;
}