/* Utyliti Fit — Tema de Marca (Bootstrap 5 overrides) */
:root{
  --bg:#0f1115;
  --surface:#11131a;
  --text:#e9ecf1;
  --muted:#a7b0c0;
  --line:rgba(255,255,255,.08);
  --brand:#6a5cff;
  --brand-2:#3db8ff;
  --ring:0 0 0 8px rgb(106 92 255 / .12);
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:12px;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--line);
  --bs-link-color: var(--text);
  --bs-emphasis-color: var(--text);

  --bs-primary: #5b7cfd; /* fallback bootstrap tokens */
  --bs-primary-rgb: 91,124,253;
}

/* Fundo com gradientes de marca */
body.brand-dark{
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(61,184,255,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(106,92,255,.18), transparent 55%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar translucida */
.navbar-brand-badge{
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 30px rgba(106,92,255,.35), 0 6px 18px rgba(61,184,255,.25);
}
.navbar-utyliti{
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(15,17,21,.8), rgba(15,17,21,.4)) !important;
  border-bottom:1px solid var(--line);
}
.navbar-utyliti .navbar-brand,
.navbar-utyliti .nav-link{ color:var(--text) !important }

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:var(--text);
}
.card .text-muted{ color: var(--muted) !important }

/* Botões */
.btn-primary{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 12px 30px rgba(106,92,255,.35), 0 8px 26px rgba(61,184,255,.25);
}
.btn-primary:hover{ filter:brightness(1.05); box-shadow:var(--ring) }

/* Inputs */
.form-control, .form-select{
  background-color: rgba(255,255,255,.03);
  color: var(--text);
  border-color: var(--line);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(106,92,255,.25);
  border-color: var(--brand);
}

/* Util classes */
.text-muted { color: var(--muted) !important }
.shadow-soft { box-shadow:0 10px 30px rgba(0,0,0,.25) }

/* Auth layout */
.auth-wrap{ min-height: calc(100vh - 64px); display:grid; place-items:center; }
.auth-card{ max-width: 560px; width:100% }