*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    width:100%;
    overflow-x:hidden;
}

body{
    min-height:100vh;
    min-height:100dvh;
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px 16px;
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    color:#f5e6c8;
    background:
        radial-gradient(ellipse at 20% 15%, rgba(212,175,55,0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 85%, rgba(90,10,30,0.55) 0%, transparent 50%),
        linear-gradient(160deg, #2a0610 0%, #5c0a1d 42%, #3d0714 100%);
}

.login-box{
    width:100%;
    max-width:380px;
    margin:0 auto;
    padding:32px 26px 28px;
    border-radius:18px;
    text-align:center;
    background:linear-gradient(165deg, #6b1228 0%, #4a0c1c 48%, #3a0916 100%);
    border:1.5px solid rgba(212,175,55,0.72);
    box-shadow:
        0 0 0 1px rgba(245,230,200,0.08) inset,
        0 0 28px rgba(212,175,55,0.18),
        0 18px 42px rgba(0,0,0,0.45);
}

.login-box .logo{
    font-size:1.75rem;
    line-height:1;
    margin:0 0 10px;
    text-shadow:0 0 18px rgba(212,175,55,0.35);
}

.login-box h2{
    font-family:"Cinzel",Georgia,serif;
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:0.06em;
    line-height:1.35;
    color:#f0d78c;
    text-shadow:
        0 1px 0 rgba(212,175,55,0.45),
        0 2px 14px rgba(0,0,0,0.4);
    margin:0 0 8px;
}

.login-box > p{
    font-family:"Cinzel",Georgia,serif;
    font-size:0.78rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:rgba(245,230,200,0.92);
    margin:0 0 26px;
}

.login-box input[type="email"],
.login-box input[type="password"]{
    width:100%;
    max-width:100%;
    display:block;
    padding:13px 14px;
    margin:0 0 14px;
    border:1px solid rgba(212,175,55,0.35);
    border-radius:12px;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:1rem;
    color:#2a0610;
    background:#faf6ee;
    outline:none;
    text-align:left;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance:none;
    appearance:none;
}

.login-box input[type="email"]::placeholder,
.login-box input[type="password"]::placeholder{
    color:#8a6f4e;
    opacity:0.85;
}

.login-box input[type="email"]:focus,
.login-box input[type="password"]:focus{
    border-color:#d4af37;
    box-shadow:0 0 0 3px rgba(212,175,55,0.28), 0 0 14px rgba(212,175,55,0.22);
}

.login-box .remember{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin:4px 0 18px;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:0.98rem;
    color:#f0e0c0;
    cursor:pointer;
    user-select:none;
    line-height:1.2;
    text-align:left;
}

.login-box .remember input[type="checkbox"]{
    width:18px;
    height:18px;
    min-width:18px;
    margin:0;
    flex-shrink:0;
    accent-color:#d4af37;
    cursor:pointer;
}

.login-box button{
    width:100%;
    max-width:100%;
    padding:13px 16px;
    border:none;
    border-radius:12px;
    font-family:"Cinzel",Georgia,serif;
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    color:#3a0916;
    background:linear-gradient(180deg, #f0d78c 0%, #d4af37 48%, #b8942a 100%);
    box-shadow:0 4px 14px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.35) inset;
    transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.login-box button:hover{
    filter:brightness(1.06);
    box-shadow:0 6px 18px rgba(212,175,55,0.35), 0 1px 0 rgba(255,255,255,0.4) inset;
    transform:translateY(-1px);
}

.login-box button:active{
    transform:translateY(1px) scale(0.985);
    filter:brightness(0.97);
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

@media (max-width:420px){
    body{
        padding:18px 14px;
    }

    .login-box{
        padding:28px 18px 24px;
        border-radius:16px;
    }

    .login-box h2{
        font-size:1.02rem;
        letter-spacing:0.04em;
    }

    .login-box > p{
        font-size:0.72rem;
        margin-bottom:22px;
    }

    .login-box input[type="email"],
    .login-box input[type="password"]{
        font-size:16px; /* avoids iOS zoom */
        padding:12px 13px;
    }

    .login-box button{
        font-size:0.88rem;
        padding:12px 14px;
    }
}