/* ===== AUTH PAGES CSS - Healthline Dashboard ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1E3A8A 0%, #4FD1C5 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

/* Animated Background Shapes */
.bg-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.shape { position: absolute; border-radius: 50%; opacity: 0.12; animation: floatShape 8s ease-in-out infinite alternate; }
.shape-1 { width: 300px; height: 300px; background: #fff; top: -80px; left: -80px; animation-delay: 0s; }
.shape-2 { width: 200px; height: 200px; background: #4FD1C5; top: 60%; right: -50px; animation-delay: 2s; }
.shape-3 { width: 150px; height: 150px; background: #fff; bottom: 10%; left: 15%; animation-delay: 1s; }
.shape-4 { width: 100px; height: 100px; background: #1E3A8A; top: 20%; right: 20%; animation-delay: 3s; }
.shape-5 { width: 250px; height: 250px; background: #4FD1C5; bottom: -100px; right: 30%; animation-delay: 4s; }

@keyframes floatShape {
    0% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-30px) rotate(10deg) scale(1.05); }
    100% { transform: translateY(10px) rotate(-5deg) scale(0.95); }
}

/* Auth Container */
.auth-container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 30px 15px; }

/* Auth Card */
.auth-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 40px rgba(79,209,197,0.15);
    padding: 50px 40px 40px;
    width: 100%;
    max-width: 440px;
    text-align: center;
    animation: cardSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardSlideUp {
    0% { opacity: 0; transform: translateY(40px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Auth Graphic / Logo */
.auth-graphic {
    width: 90px; height: 90px;
    background: linear-gradient(135deg, #1E3A8A, #4FD1C5);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 10px 30px rgba(30,58,138,0.3);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}
.auth-graphic i { font-size: 40px; color: #fff; }
@keyframes pulseGlow {
    0% { box-shadow: 0 10px 30px rgba(30,58,138,0.3); transform: scale(1); }
    100% { box-shadow: 0 15px 45px rgba(79,209,197,0.5); transform: scale(1.05); }
}

/* Title & Subtitle */
.auth-title { font-size: 2rem; font-weight: 700; color: #1E3A8A; margin-bottom: 6px; }
.auth-subtitle { font-size: 1rem; color: #718096; margin-bottom: 30px; }

/* Auth Form */
.auth-form { display: flex; flex-direction: column; gap: 16px; }

/* Input Group */
.input-group {
    position: relative; display: flex; align-items: center;
    background: #F7FAFC; border: 2px solid #E2E8F0; border-radius: 14px;
    transition: all 0.3s ease; overflow: hidden;
}
.input-group:focus-within { border-color: #4FD1C5; box-shadow: 0 0 0 4px rgba(79,209,197,0.15); background: #fff; }
.input-group i { padding: 0 16px; color: #A0AEC0; font-size: 1.1rem; transition: color 0.3s; }
.input-group:focus-within i { color: #1E3A8A; }
.input-group input {
    flex: 1; border: none; background: transparent;
    padding: 16px 16px 16px 0; font-size: 1.1rem; font-family: 'Poppins', sans-serif;
    color: #2D3748; outline: none; width: 100%;
}
.input-group input::placeholder { color: #A0AEC0; }

/* Auth Button */
.auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px;
    background: linear-gradient(135deg, #1E3A8A, #4FD1C5);
    color: #fff; font-size: 1.2rem; font-weight: 600; font-family: 'Poppins', sans-serif;
    border: none; border-radius: 14px; cursor: pointer; margin-top: 8px;
    transition: all 0.3s ease; position: relative; overflow: hidden;
}
.auth-btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(30,58,138,0.35); }
.auth-btn:hover::before { left: 100%; }
.auth-btn:active { transform: translateY(0); }

/* Auth Links */
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.auth-links a { color: #1E3A8A; text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }
.auth-links a:hover { color: #4FD1C5; text-decoration: underline; }

/* Auth Footer */
.auth-footer { margin-top: 25px; padding-top: 20px; border-top: 1px solid #E2E8F0; }
.auth-footer a { color: #718096; text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.auth-footer a:hover { color: #1E3A8A; }
.auth-footer a i { margin-right: 6px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .auth-card { padding: 40px 25px 30px; border-radius: 20px; max-width: 95vw; }
    .auth-title { font-size: 1.6rem; }
    .auth-graphic { width: 75px; height: 75px; }
    .auth-graphic i { font-size: 32px; }
    .shape-1 { width: 200px; height: 200px; }
    .shape-2 { width: 130px; height: 130px; }
    .shape-5 { width: 160px; height: 160px; }
}
@media (max-width: 480px) {
    .auth-container { padding: 15px 10px; }
    .auth-card { padding: 30px 18px 25px; border-radius: 18px; }
    .auth-title { font-size: 1.4rem; }
    .auth-subtitle { font-size: 0.9rem; }
    .input-group input { font-size: 1rem; padding: 14px 14px 14px 0; }
    .auth-btn { font-size: 1.05rem; padding: 14px; }
    .auth-links { flex-direction: column; align-items: center; }
}
@media (max-width: 360px) {
    .auth-card { padding: 25px 14px 20px; }
    .auth-graphic { width: 65px; height: 65px; }
    .auth-graphic i { font-size: 28px; }
    .auth-title { font-size: 1.25rem; }
}