/* Auth page styles — assets/css/auth.css */
:root{
  --jb2d-blue: #005baa;
  --jb2d-accent: #00bfff;
  --jb2d-yellow: #f1c40f;
  --card-radius: 18px;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body.auth-body{
  font-family: var(--font-sans);
  background: linear-gradient(180deg, #f7fbff 0%, #eef7ff 60%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:#0f1724;
}

.auth-header{ background:transparent; }
.auth-logo{ height:48px; width:48px; object-fit:cover; border-radius:8px; }
.brand{ font-weight:700; color:var(--jb2d-blue); font-size:1.05rem; }

.auth-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:32px 16px; }

.auth-card{
  width:100%;
  max-width:1100px;
  border-radius: var(--card-radius);
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(250,250,250,0.9) 100%);
}

.auth-left{
  background: linear-gradient(135deg,var(--jb2d-blue), var(--jb2d-accent));
  color:#fff;
  min-height:420px;
}

.auth-left h2{ font-weight:700; letter-spacing: -0.02em; }
.auth-left p{ opacity:0.95; }

.auth-tabs{ padding:6px; background:transparent; }
.tab-btn{
  border: none;
  padding:10px 18px;
  border-radius:12px;
  background:transparent;
  font-weight:600;
  color: #344054;
  cursor:pointer;
}
.tab-btn.active{
  background: linear-gradient(90deg,var(--jb2d-blue), var(--jb2d-accent));
  color:#fff;
  box-shadow: 0 8px 30px rgba(0,90,170,0.12);
}

.auth-form .form-label{ font-weight:600; font-size:0.95rem; }
.auth-form .form-control{ border-radius:10px; padding:12px 14px; }

.toggle-pass{ border-radius:0 10px 10px 0; }

.recaptcha-placeholder{
  background:#f5f7fb; border:1px dashed #d8e6fb; padding:12px; border-radius:10px; text-align:center; color:#6b7280; font-size:0.9rem;
}

/* social buttons */
.social-login .social-btn{ display:flex; align-items:center; justify-content:center; gap:8px; }
.social-icon{ width:18px; height:18px; opacity:0.95; }

/* password meter */
.password-meter{ height:8px; background:#eef2ff; border-radius:6px; overflow:hidden; }
.password-meter .meter-bar{ height:100%; width:0%; background:linear-gradient(90deg,#ff7a18,#ff4b2b); transition:width 220ms ease; }

/* responsive tweaks */
@media (max-width: 991px){
  .auth-left{ display:none; }
  .auth-card{ border-radius:14px; }
}

/* small footer */
.auth-footer{ padding:12px 8px; }