:root{
      --brand:#2563eb;
      --brand2:#06b6d4;
      --border:rgba(15,23,42,.08);
      --surface:#ffffff;
    }

    body{
      background:
        radial-gradient(1100px circle at 12% 8%, rgba(37,99,235,.18), transparent 55%),
        radial-gradient(900px circle at 92% 22%, rgba(6,182,212,.14), transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 40%, #f8fafc 100%);
    }
    .btn-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none;
  color: #fff !important;
  transition: opacity .15s ease;
}

.btn-brand:hover {
  opacity: .9;
}

    /* Brand icon */
    .brand-dot{
      width:36px;
      height:36px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      color:#fff;
    }

    /* ✅ AUTH LAYOUT: keeps login centered */
    .auth-layout{
      min-height: calc(100vh - 64px);
      display:grid;
      place-items:center;
      padding:1.5rem;
    }

    /* ✅ FULL VIEWPORT OFFCANVAS */
    .offcanvas{
      height:100vh !important;
    }
    .offcanvas-body{
      overflow-y:auto;
    }

    @media (max-width: 991.98px){
      .offcanvas-start{
        width:100vw;
      }
    }