:root{
    --bg:#07090d;
    --bg2:#10141b;
    --panel:#141922;
    --panel2:#1a202b;
    --red:#e31b23;
    --red2:#b70e15;
    --silver:#d8dde5;
    --silver2:#aeb6c1;
    --white:#ffffff;
    --muted:#929cab;
    --line:rgba(216,221,229,.16);
    --shadow:0 32px 90px rgba(0,0,0,.48);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",Arial,sans-serif;
}

html,
body{
    width:100%;
    min-height:100%;
}

body.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
    color:var(--silver);
    background:
        radial-gradient(circle at 15% 15%,rgba(227,27,35,.16),transparent 32%),
        radial-gradient(circle at 88% 82%,rgba(216,221,229,.08),transparent 34%),
        linear-gradient(135deg,#05070a 0%,#0d1118 48%,#151a22 100%);
    overflow-x:hidden;
}

body.login-body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(216,221,229,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(216,221,229,.025) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.8) 54%,transparent 100%);
}

.login-shell{
    width:min(1360px,100%);
    min-height:790px;
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
    border:1px solid rgba(216,221,229,.22);
    border-radius:26px;
    overflow:hidden;
    background:rgba(17,21,29,.92);
    box-shadow:var(--shadow);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
}

.login-left{
    min-height:790px;
    position:relative;
    padding:52px 62px 48px;
    overflow:hidden;
    background:
        linear-gradient(135deg,rgba(5,7,11,.98),rgba(14,18,25,.96)),
        radial-gradient(circle at 68% 72%,rgba(227,27,35,.17),transparent 28%);
}

.login-left::before{
    content:"";
    position:absolute;
    width:740px;
    height:420px;
    left:-80px;
    bottom:-150px;
    opacity:.55;
    background:
        radial-gradient(circle at 20% 40%,var(--red) 0 2px,transparent 3px),
        radial-gradient(circle at 36% 28%,var(--silver2) 0 2px,transparent 3px),
        radial-gradient(circle at 58% 54%,var(--red) 0 2px,transparent 3px),
        radial-gradient(circle at 78% 35%,var(--silver) 0 2px,transparent 3px),
        linear-gradient(25deg,transparent 46%,rgba(227,27,35,.25) 47%,rgba(227,27,35,.25) 48%,transparent 49%),
        linear-gradient(-18deg,transparent 52%,rgba(216,221,229,.14) 53%,rgba(216,221,229,.14) 54%,transparent 55%);
    filter:drop-shadow(0 0 13px rgba(227,27,35,.23));
    pointer-events:none;
}

.login-left::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.24;
    pointer-events:none;
    background-image:radial-gradient(rgba(216,221,229,.72) 1px,transparent 1px);
    background-size:18px 18px;
    mask-image:linear-gradient(180deg,transparent 5%,#000 38%,#000 78%,transparent 100%);
}

.brand{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:16px;
}

.brand-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(227,27,35,.48);
    border-radius:17px;
    color:var(--red);
    background:linear-gradient(145deg,rgba(227,27,35,.16),rgba(216,221,229,.04));
    box-shadow:0 0 32px rgba(227,27,35,.20),inset 0 0 22px rgba(216,221,229,.05);
    font-size:27px;
    font-weight:900;
}

.brand h1{
    font-size:31px;
    line-height:1;
    letter-spacing:-1.4px;
}

.brand h1 span{
    color:var(--silver);
}

.brand h1 b{
    color:var(--red);
    font-weight:900;
}

.brand p{
    margin-top:7px;
    color:var(--silver2);
    font-size:10px;
    font-weight:800;
    letter-spacing:2.2px;
}

.welcome{
    position:relative;
    z-index:2;
    max-width:620px;
    margin-top:92px;
}

.welcome small{
    color:var(--red);
    font-size:14px;
    font-weight:700;
    letter-spacing:2.5px;
}

.welcome h2{
    margin-top:11px;
    font-size:71px;
    line-height:.98;
    letter-spacing:-4px;
}

.welcome h2 span{
    color:var(--silver);
}

.welcome h2 b{
    color:var(--red);
    font-weight:900;
}

.welcome h3{
    margin-top:12px;
    color:var(--silver);
    font-size:31px;
    font-weight:600;
    letter-spacing:11px;
}

.welcome .line{
    width:56px;
    height:4px;
    margin:28px 0 24px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--silver),var(--red));
    box-shadow:0 0 18px rgba(227,27,35,.45);
}

.welcome > p{
    color:var(--silver);
    font-size:22px;
    font-weight:600;
}

.welcome > em{
    display:block;
    margin-top:8px;
    color:var(--silver2);
    font-size:15px;
    font-style:normal;
}

.visual-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:50px;
}

.visual-card{
    min-height:132px;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(216,221,229,.075),rgba(216,221,229,.025));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 16px 35px rgba(0,0,0,.20);
}

.visual-card b{
    color:var(--silver);
    font-size:11px;
    font-weight:600;
}

.visual-card strong{
    display:block;
    margin-top:8px;
    color:var(--red);
    font-size:24px;
    letter-spacing:.5px;
}

.visual-card span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
    line-height:1.6;
}

.login-right{
    min-height:790px;
    padding:78px 64px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 18%,rgba(227,27,35,.11),transparent 26%),
        linear-gradient(160deg,#1a1f28 0%,#121721 58%,#0c1017 100%);
}

.lock{
    width:102px;
    height:102px;
    margin:0 auto 26px;
    display:grid;
    place-items:center;
    position:relative;
    border:7px solid rgba(216,221,229,.19);
    border-top-color:var(--red);
    border-right-color:var(--red);
    border-radius:50%;
    background:rgba(227,27,35,.05);
    color:var(--silver);
    font-size:38px;
    box-shadow:0 0 34px rgba(227,27,35,.17),inset 0 0 28px rgba(216,221,229,.04);
}

.login-right > h2{
    color:var(--silver);
    text-align:center;
    font-size:36px;
    font-weight:700;
    letter-spacing:-1px;
}

.login-right > p{
    margin-top:8px;
    color:var(--muted);
    text-align:center;
    font-size:14px;
}

.login-right form{
    margin-top:42px;
}

.login-right form > label{
    display:block;
    margin:20px 0 9px;
    color:var(--silver);
    font-size:11px;
    font-weight:600;
    letter-spacing:.8px;
}

.login-right form > label:first-child{
    margin-top:0;
}

.login-right input[type="text"],
.login-right input[type="password"]{
    width:100%;
    height:60px;
    padding:0 18px;
    border:1px solid rgba(216,221,229,.22);
    border-radius:13px;
    outline:none;
    color:var(--silver);
    background:rgba(5,7,11,.52);
    font-size:14px;
    font-weight:500;
    transition:.2s ease;
}

.login-right input::placeholder{
    color:#737c89;
}

.login-right input[type="text"]:focus,
.login-right input[type="password"]:focus{
    border-color:rgba(227,27,35,.86);
    background:rgba(5,7,11,.72);
    box-shadow:0 0 0 4px rgba(227,27,35,.12);
}

.login-options{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.login-options label{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--silver2);
    font-size:12px;
    cursor:pointer;
}

.login-options input[type="checkbox"]{
    width:17px;
    height:17px;
    accent-color:var(--red);
}

.login-options a{
    color:var(--red);
    font-size:12px;
    font-weight:600;
    text-decoration:none;
}

.login-options a:hover{
    text-decoration:underline;
}

.login-right button[type="submit"]{
    width:100%;
    height:60px;
    margin-top:28px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(90deg,var(--red2) 0%,var(--red) 100%);
    font-size:14px;
    font-weight:800;
    letter-spacing:.7px;
    cursor:pointer;
    box-shadow:0 15px 34px rgba(227,27,35,.26);
    transition:.2s ease;
}

.login-right button[type="submit"]:hover{
    transform:translateY(-2px);
    filter:brightness(1.07);
}

.login-right button[type="submit"]:active{
    transform:translateY(0);
}

.admin-line{
    margin-top:30px;
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--silver2);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.7px;
}

.admin-line::before,
.admin-line::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(216,221,229,.15);
}

.admin-btn{
    width:100%;
    height:54px;
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(216,221,229,.35);
    border-radius:12px;
    color:var(--silver);
    background:rgba(216,221,229,.025);
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    text-decoration:none;
    transition:.2s ease;
}

.admin-btn:hover{
    color:#fff;
    border-color:var(--red);
    background:rgba(227,27,35,.10);
    box-shadow:0 0 0 3px rgba(227,27,35,.08);
}

@media(max-width:1080px){
    body.login-body{
        padding:20px;
    }

    .login-shell{
        grid-template-columns:1fr 430px;
    }

    .login-left{
        padding:42px 40px;
    }

    .welcome h2{
        font-size:58px;
    }

    .welcome h3{
        font-size:25px;
        letter-spacing:8px;
    }

    .login-right{
        padding:60px 38px 44px;
    }
}

@media(max-width:820px){
    body.login-body{
        display:block;
        padding:0;
        background:#090c11;
    }

    .login-shell{
        width:100%;
        min-height:100vh;
        grid-template-columns:1fr;
        border:0;
        border-radius:0;
    }

    .login-left{
        min-height:auto;
        padding:26px 22px 38px;
    }

    .welcome{
        margin-top:48px;
    }

    .welcome h2{
        font-size:48px;
        letter-spacing:-2.8px;
    }

    .welcome h3{
        font-size:20px;
        letter-spacing:6px;
    }

    .visual-grid{
        margin-top:32px;
    }

    .login-right{
        min-height:auto;
        padding:48px 22px 46px;
    }
}

@media(max-width:520px){
    .brand-icon{
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:22px;
    }

    .brand h1{
        font-size:26px;
    }

    .welcome h2{
        font-size:42px;
    }

    .welcome > p{
        font-size:18px;
    }

    .welcome > em{
        font-size:13px;
    }

    .visual-grid{
        grid-template-columns:1fr;
    }

    .login-right > h2{
        font-size:30px;
    }

    .login-options{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }
}