body{
    font-family:"Poppins",sans-serif;
    margin:0;
    min-width:320px;
    background:
        radial-gradient(circle at 12% 12%, rgba(74,127,222,0.22), transparent 40%),
        radial-gradient(circle at 88% 16%, rgba(15,118,110,0.14), transparent 42%),
        radial-gradient(circle at 30% 92%, rgba(99,102,241,0.14), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 40%),
        #f6f7fb;
    background-attachment:fixed;
    color:#1e3558;
}

html{
    scroll-behavior:smooth;
}

::view-transition-old(root),
::view-transition-new(root){
    animation-duration:.22s;
    animation-timing-function:ease;
}

.auth-shell{
    min-height:100vh;
    transition:opacity .22s ease,transform .22s ease,filter .22s ease;
}

.auth-frame{
    max-width:1280px;
    margin:0 auto;
    padding:14px 18px 56px;
}

.auth-frame-wide .auth-panel{
    max-width:860px;
}

.auth-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 6px 16px;
    border-bottom:1px solid #dde3ee;
}

.brand-mark{
    font-size:18px;
    font-weight:700;
    color:#243a5e;
}

.auth-switch{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:4px;
    width:min(100%,244px);
    border-radius:999px;
    background:#fff;
    border:1px solid #cfd8e6;
    box-shadow:0 8px 20px rgba(34,58,97,0.06);
}

.switch-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    border-radius:999px;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    color:#687d9b;
    transition:all .2s ease;
}

.switch-link.active{
    background:linear-gradient(135deg,#4a7fde,#3c73d4);
    color:#fff;
    box-shadow:0 10px 18px rgba(60,115,212,0.22);
}

.auth-panel{
    width:100%;
    max-width:430px;
    margin:42px auto 0;
}

.auth-copy{
    text-align:center;
    margin-bottom:24px;
}

.auth-title{
    margin:0;
    font-size:23px;
    font-weight:700;
    color:#223759;
}

.auth-subtitle{
    margin:10px 0 0;
    font-size:14px;
    line-height:1.6;
    color:#7a8aa4;
}

.alert{
    border-radius:14px;
    font-size:14px;
    margin-bottom:14px;
}

.register-form{
    display:grid;
    gap:14px;
}

.form-section{
    padding:18px;
    border:1px solid #dde4ef;
    border-radius:16px;
    background:#ffffff;
}

.form-section h6{
    margin:0 0 14px;
    color:#223759;
    font-size:16px;
    font-weight:700;
}

.modern-input{
    min-height:50px;
    border-radius:12px;
    border:1px solid #cfd7e2;
    background:#fff;
    padding-left:14px;
    font-size:15px;
    color:#1e3558;
}

.modern-input::placeholder{
    color:#8b9ab1;
}

.modern-input:focus{
    border-color:#4a7fde;
    box-shadow:0 0 0 4px rgba(74,127,222,0.12);
}

.file-input{
    padding-top:11px;
}

.create-btn{
    height:54px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#4a7fde,#3c73d4);
    color:#fff;
    font-size:16px;
    font-weight:600;
    box-shadow:0 12px 22px rgba(60,115,212,0.2);
    transition:transform .2s ease,box-shadow .2s ease;
}

.create-btn:hover{
    transform:translateY(-1px);
    color:#fff;
}

body.is-switching .auth-shell{
    opacity:0;
    transform:translateY(10px);
    filter:blur(4px);
}

@media (max-width:640px){
    .auth-frame{
        padding:12px 12px 34px;
    }

    .auth-header{
        flex-direction:column;
        align-items:flex-start;
        padding-bottom:14px;
    }

    .auth-switch{
        width:100%;
        max-width:260px;
        align-self:center;
    }

    .auth-panel{
        margin-top:32px;
    }

    .auth-title{
        font-size:20px;
    }

    .form-section{
        padding:14px;
    }

    .modern-input,
    .create-btn{
        min-height:48px;
        font-size:15px;
    }
}