/* AUTH OVERLAY */
.auth-overlay { position:fixed; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.45); z-index:999; }

/* Auth card */
.auth-container { width:380px; background:#fff; border-radius:14px; padding:22px; box-shadow:0 12px 40px rgba(0,0,0,0.25); animation:fadeIn .36s ease; }
.auth-form h1 { text-align:center; margin-bottom:16px; font-size:22px; color:#222; }

/* inputs */
.input-box { position:relative; margin:12px 0; }
.input-box i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#888 }
.input-box input { width:100%; padding:12px 12px 12px 42px; border-radius:10px; border:1px solid #e6e6e6; outline:none; font-size:15px; }
.input-box input:focus { box-shadow:0 6px 18px rgba(102,126,234,0.12); border-color:#667eea; }

/* remember/forgot */
.remember-forget { display:flex; justify-content:space-between; font-size:13px; margin:8px 0 14px; color:#555; }
.remember-forget a { color:#667eea; text-decoration:none; }

/* CTA */
.btn { width:100%; padding:12px; background:#667eea; color:#fff; border-radius:10px; border:none; font-weight:600; cursor:pointer; }
.btn:hover { background:#5649c5; }

/* link */
.register-link { text-align:center; margin-top:12px; font-size:14px; }
.register-link a { color:#764ba2; text-decoration:none; font-weight:600; }

/* theme toggle inside auth */
.theme-toggle { text-align:center; margin-top:10px; }
.theme-toggle button { padding:8px 14px; border-radius:8px; border:1px solid #ddd; background:transparent; cursor:pointer; }

/* dark style for auth container */
body.dark .auth-container { background:#252634; color:#eee; box-shadow:0 12px 40px rgba(0,0,0,0.6); }
body.dark .input-box input { background:#2b2b3a; border:1px solid #444; color:#eee; }
body.dark .register-link a, body.dark .remember-forget a { color:#9d7dff; }

/* small animation */
@keyframes fadeIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }

/* responsive */
@media (max-width:420px) {
  .auth-container { width:94%; padding:16px; }
}
