:root{
  --brand: #d90000;
  --glass-border: rgba(255,255,255,.2);
}

body{
  min-height:100vh;
  background: radial-gradient(1200px 800px at 70% -20%, #1e3a4f 0%, #0e1a24 55%, #0b141b 100%);
  color:#eaf1f6;
}

.app-header{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-bottom:1px solid var(--glass-border);
}

.brand-title{
  letter-spacing:.08em;
  font-weight:800;
  color:var(--brand);
}

.logo{ height:38px; }

.hero{ display:grid; place-items:center; padding:80px 16px; }
.hero-card{
  background: rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:40px;
  max-width:600px;
  text-align:center;
}

.btn-brand{
  background:var(--brand);
  color:#fff;
  border:none;
}
.btn-brand:hover{ filter:brightness(1.05); }

/* === Offcanvas login/registro === */
.offcanvas {
  background: rgba(15,25,35,.95);
  backdrop-filter: blur(10px);
  color: #eaf1f6;
  border-left: 1px solid var(--glass-border);
}

/* Formularios dentro del panel */
.offcanvas .form-control {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}
.offcanvas .form-control::placeholder {
  color: #cad6de;
  opacity: .7;
}
.offcanvas .form-control:focus {
  border-color: #53a7ff;
  box-shadow: 0 0 0 .25rem rgba(83,167,255,.25);
}

.offcanvas .form-label {
  color: #eaf1f6;
}

.offcanvas .btn-brand {
  background: var(--brand);
  color: #fff;
  border: none;
  width: 100%;
  margin-top: .5rem;
}