/* Identidade visual Tracker Gestor — versão 16.8.3 */
:root {
  --navy: #0b1020;
  --navy-dark: #070b16;
  --black: #0b1020;
  --blue: #6c3dff;
  --blue-dark: #5124d8;
  --blue-soft: #f1edff;
  --red: #6c3dff;
  --red-dark: #5124d8;
  --brand-purple: #6c3dff;
  --brand-blue: #1d63e2;
  --brand-teal: #00c2a8;
  --brand-gradient: linear-gradient(135deg, #6c3dff 0%, #1d63e2 52%, #00c2a8 100%);
}

.login-shell {
  background:
    radial-gradient(circle at 12% 12%, rgba(108, 61, 255, .16), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(0, 194, 168, .13), transparent 30%),
    linear-gradient(135deg, #f8f9ff, #eef4f8);
}

.login-card {
  border-top-color: transparent;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--brand-gradient);
}

.login-logo {
  width: min(350px, 100%);
  height: 120px;
  padding: 8px 12px;
  border-radius: 0;
  background: transparent;
}

.topbar .brand img {
  width: 52px;
  height: 52px;
}

.topbar .brand strong {
  color: #fff;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 14px;
  letter-spacing: .055em;
}

.tracking-icon {
  background: linear-gradient(145deg, #070b16, #121b34);
}

.tracking-icon img {
  width: 150px;
  height: 150px;
}

.primary,
nav button.active,
nav button:hover {
  background: var(--brand-gradient);
}

.primary:hover {
  background: linear-gradient(135deg, #5124d8, #1554c5 55%, #00a990);
}

.sidebar.topbar {
  background: linear-gradient(90deg, #070b16, #111a31);
  border-bottom-color: var(--brand-purple);
}

.sidebar.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: var(--brand-gradient);
}

.topbar .brand small {
  color: #a4a7b3;
}

.eyebrow,
.panel-kicker,
.quick-actions button:hover,
.quick-actions i {
  color: var(--brand-purple);
}

.received-line,
.goal-line {
  stroke: var(--brand-purple);
}

.received-area {
  opacity: .82;
}

.goal-ring,
.goal-track span,
.ranking-list span > i em,
.expense-bars i em,
.card .accent,
.bar span {
  background-color: var(--brand-purple);
}

.command-kpi.brand > i {
  background: #f1edff;
  color: var(--brand-purple);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(108, 61, 255, .14);
}

@media (max-width: 760px) {
  .login-logo {
    width: min(315px, 100%);
    height: 108px;
  }

  .topbar .brand img {
    width: 46px;
    height: 46px;
  }
}