/* =========================
   AUTH PAGE (FULL SCREEN)
========================= */

.auth-page{
    position:relative;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #eef2ff,
        #f8fbff
    );
}

/* =========================
   LOGO
========================= */

.auth-logo{
    position:absolute;
    top:24px;
    left:28px;

    font-size:22px;
    font-weight:700;
    color:#4f46e5;
    letter-spacing:.5px;

    z-index:2;
}

/* =========================
   HEART FLOAT BACKGROUND
========================= */

.heartbeat-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.heartbeat-bg::before,
.heartbeat-bg::after{
    content:"❤";
    position:absolute;
    font-size:120px;
    color:rgba(255,120,150,0.08);

    animation:floatHeart 12s linear infinite;
}

.heartbeat-bg::after{
    left:70%;
    animation-delay:6s;
}

@keyframes floatHeart{
    from{
        transform:translateY(100vh) scale(.8);
        opacity:0;
    }
    30%{opacity:.4;}
    to{
        transform:translateY(-20vh) scale(1.2);
        opacity:0;
    }
}

/* =========================
   HEARTBEAT LINE (FIXED)
========================= */

.auth-page::after{
    content:"";
    position:absolute;
    left:0;
    top:60%;

    width:200%;
    height:80px;

    background-repeat:repeat-x;
    background-size:600px 80px;

    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='600' height='80' viewBox='0 0 600 80'>\
<polyline points='0,40 80,40 100,10 120,70 140,30 160,40 240,40 260,10 280,70 300,30 320,40 600,40' \
fill='none' stroke='%23ff7aa2' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/>\
</svg>");

    animation:ecgMove 6s linear infinite;

    opacity:.6;
    z-index:0;

    /* ✨ thêm để mượt hơn */
    will-change: transform;
}

@keyframes heartbeatLine{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

/* =========================
   CARD (GIỮ NGUYÊN + TINH CHỈNH)
========================= */

.auth-card{
    position:relative;
    z-index:1;

    width:360px;
    padding:34px;

    background:rgba(255,255,255,.7);
    backdrop-filter:blur(18px);

    border-radius:18px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);

    display:flex;
    flex-direction:column;
    gap:14px;

    animation:fadeIn .5s ease;
}

/* =========================
   TEXT
========================= */

.auth-card h2{
    font-size:22px;
    font-weight:700;
}

.auth-sub{
    font-size:14px;
    color:#64748b;
    margin-bottom:6px;
}

/* =========================
   INPUT
========================= */

.auth-card input{
    padding:12px;
    border:none;
    border-radius:12px;
    background:#f1f5f9;
    outline:none;
    font-size:14px;

    transition:.2s;
}

.auth-card input:focus{
    background:#e8edff;
    box-shadow:0 0 0 2px rgba(108,140,255,.2);
}

/* =========================
   BUTTON
========================= */

.auth-btn{
    border:none;
    padding:12px;
    border-radius:12px;

    background:linear-gradient(
        135deg,
        #6c8cff,
        #9aaeff
    );

    color:white;
    font-weight:600;

    cursor:pointer;
    transition:.25s;
}

.auth-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(108,140,255,.35);
}

/* =========================
   LINK
========================= */

.auth-link{
    text-align:center;
    font-size:13px;
    color:#6c8cff;
    text-decoration:none;
}

.auth-link:hover{
    text-decoration:underline;
}

/* =========================
   ERROR
========================= */

.auth-error{
    background:#fee2e2;
    color:#991b1b;
    padding:8px 12px;
    border-radius:10px;
    font-size:13px;
}

/* =========================
   ANIMATION
========================= */

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
@keyframes ecgMove{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-600px); /* 🔥 phải đúng bằng background-size */
    }
}
.password-field {
    position: relative;
    display: flex;
    align-items: center;
    width:100%;
}

.password-field input {
    width: 100%;
    padding-right: 40px;
    flex:1;
}

.toggle-password {
    position: absolute;
    right: 12px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
}

.toggle-password:hover {
    opacity: 1;
}
.input-field,
.password-field {
    width: 100%;
}

.input-field input,
.password-field input {
    width: 100%;
    display: block;
    box-sizing: border-box;
}
.auth-brand{
    position:absolute;
    top:20px;
    left:30px;

    display:flex;
    align-items:center;
    gap:6px;

    font-size:16px;
    font-weight:600;
    z-index:10;
}

/* robot */
.robot-auth{
    width:36px;
    height:36px;
    animation: robotFloatAuth 2.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(91,108,255,0.3));
}

/* arm */
.robot-arm-auth{
    transform-origin: 50px 30px;
    animation: waveAuth 1.6s ease-in-out infinite;
}

/* heart */
.heart-auth{
    width:20px;
    height:20px;
    animation: heartBeatAuth 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255,107,138,0.4));
}

/* text */
.brand-text-auth{
    color:#5b6cff;
    font-size:20px;
}

/* =========================
   ANIMATIONS
========================= */

/* robot float */
@keyframes robotFloatAuth{
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* arm wave */
@keyframes waveAuth{
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

/* heart beat */
@keyframes heartBeatAuth{
    0% { transform: scale(1); opacity:0.8; }
    25% { transform: scale(1.2); opacity:1; }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); opacity:0.85; }
}