:root{
    --bg:#050b12;
    --panel:#0b1520;
    --panel2:#111d2b;
    --line:rgba(255,255,255,.10);
    --line2:rgba(142,224,111,.22);
    --text:#f8fafc;
    --muted:#a8b8cc;
    --green:#7cc64b;
    --green2:#5bbd3a;
    --green3:#a7e75f;
    --danger:#ef4444;
    --warning:#f59e0b;
    --shadow:0 35px 100px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;width:100%;overflow-x:hidden}
body{
    font-family:Inter,Arial,sans-serif;
    background:
        radial-gradient(circle at 12% 18%,rgba(48,91,135,.38),transparent 30%),
        radial-gradient(circle at 82% 10%,rgba(91,189,58,.18),transparent 28%),
        linear-gradient(135deg,#06111e 0%,#050b12 55%,#02060a 100%);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
}

.login-shell{
    width:min(1220px,100%);
    min-height:680px;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    background:linear-gradient(135deg,rgba(17,31,45,.94),rgba(6,14,24,.96));
    border:1px solid rgba(148,163,184,.22);
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--shadow);
    position:relative;
}

.login-shell::before{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(124,198,75,.16),transparent 22%,transparent 78%,rgba(124,198,75,.09)),
        radial-gradient(circle at 38% 76%,rgba(124,198,75,.17),transparent 34%);
    opacity:.9;
}

.brand-panel,.login-panel{
    position:relative;
    z-index:1;
}

.brand-panel{
    padding:52px 50px;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 22% 18%,rgba(124,198,75,.22),transparent 22%),
        radial-gradient(circle at 65% 44%,rgba(14,165,233,.20),transparent 30%),
        linear-gradient(150deg,rgba(15,40,61,.74),rgba(4,12,20,.92));
}

.brand-panel::after{
    content:"";
    position:absolute;
    left:-120px;
    right:-120px;
    bottom:-170px;
    height:360px;
    background:
        radial-gradient(circle at 35% 20%,rgba(124,198,75,.36),transparent 5%,transparent 7%),
        radial-gradient(circle at 44% 36%,rgba(124,198,75,.28),transparent 4%,transparent 6%),
        radial-gradient(circle at 53% 24%,rgba(124,198,75,.26),transparent 4%,transparent 6%),
        linear-gradient(22deg,transparent 0 47%,rgba(124,198,75,.25) 48%,transparent 49% 100%),
        repeating-linear-gradient(25deg,rgba(124,198,75,.22) 0 1px,transparent 1px 62px),
        repeating-linear-gradient(-19deg,rgba(56,189,248,.16) 0 1px,transparent 1px 78px);
    opacity:.62;
    transform:perspective(700px) rotateX(62deg);
}

.brand-city{
    position:absolute;
    right:-20px;
    top:78px;
    width:330px;
    height:300px;
    opacity:.48;
    pointer-events:none;
}

.building{
    position:absolute;
    bottom:0;
    width:34px;
    border:1px solid rgba(56,189,248,.28);
    background:linear-gradient(180deg,rgba(15,118,110,.34),rgba(8,47,73,.20));
    box-shadow:0 0 26px rgba(56,189,248,.12);
}
.building::before{
    content:"";
    position:absolute;
    left:8px;right:8px;top:-45px;
    height:45px;
    background:linear-gradient(180deg,rgba(56,189,248,.44),rgba(56,189,248,0));
    clip-path:polygon(50% 0,62% 100%,38% 100%);
}
.building::after{
    content:"";
    position:absolute;
    inset:12px 7px;
    background:repeating-linear-gradient(180deg,rgba(125,211,252,.42) 0 2px,transparent 2px 14px);
    opacity:.55;
}
.b1{height:155px;left:28px}.b2{height:225px;left:88px;width:46px}.b3{height:292px;left:165px;width:52px}.b4{height:192px;left:246px;width:40px}

.brand-logo-symbol{
    width:148px;
    height:148px;
    object-fit:contain;
    filter:drop-shadow(0 22px 46px rgba(91,189,58,.25));
    margin-bottom:18px;
}

.brand-word{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:22px;
}
.brand-word::before{
    content:"";
    width:4px;
    height:112px;
    border-radius:4px;
    background:linear-gradient(180deg,var(--green3),var(--green2));
    box-shadow:0 0 26px rgba(124,198,75,.35);
    flex:0 0 auto;
}
.brand-title{
    font-size:46px;
    line-height:1.02;
    font-weight:900;
    letter-spacing:3px;
}
.brand-title span{
    color:var(--green2);
}
.brand-sub{
    color:var(--green);
    font-size:28px;
    font-weight:800;
    letter-spacing:4px;
    margin-top:8px;
}
.brand-copy{
    font-size:19px;
    line-height:1.6;
    color:#e2e8f0;
    max-width:560px;
    margin-bottom:30px;
}

.brand-icons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    max-width:530px;
    margin-bottom:26px;
}
.brand-icon{
    padding:0 18px;
    border-right:1px solid rgba(255,255,255,.12);
}
.brand-icon:first-child{padding-left:0}
.brand-icon:last-child{border-right:0}
.brand-icon strong{
    display:block;
    color:#dbeafe;
    font-size:14px;
    margin-top:9px;
}
.icon-line{
    width:42px;height:42px;
    border-radius:12px;
    border:1px solid rgba(124,198,75,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--green3);
    font-size:22px;
    background:rgba(124,198,75,.06);
}
.brand-slogan{
    color:var(--green3);
    font-weight:900;
    font-size:20px;
    letter-spacing:.4px;
}

.login-panel{
    padding:64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:
        radial-gradient(circle at 92% 14%,rgba(30,64,175,.14),transparent 30%),
        linear-gradient(160deg,rgba(8,18,30,.78),rgba(5,11,18,.92));
}

.login-panel h1{
    font-size:42px;
    line-height:1;
    margin-bottom:14px;
}
.login-panel p{
    color:var(--muted);
    font-size:18px;
    margin-bottom:38px;
}

.form-group{
    margin-bottom:22px;
}
label{
    display:block;
    font-weight:900;
    color:#e5eef9;
    margin-bottom:10px;
}
.input-wrap{
    position:relative;
}
.input-icon{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:var(--green3);
    font-size:20px;
    opacity:.9;
}
input,select,textarea{
    width:100%;
    padding:17px 18px;
    border-radius:15px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));
    border:1px solid rgba(148,163,184,.25);
    color:var(--text);
    font-size:16px;
    outline:none;
    font-family:Inter,Arial,sans-serif;
}
.input-wrap input{
    padding-left:54px;
}
input:focus,select:focus,textarea:focus{
    border-color:rgba(124,198,75,.7);
    box-shadow:0 0 0 4px rgba(124,198,75,.12);
}
select option{background:#0d1a26;color:white}
textarea{min-height:100px}
.toggle-password{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    background:transparent;
    border:0;
    color:var(--green3);
    font-size:18px;
    cursor:pointer;
    width:auto;
    padding:0;
    margin:0;
}
button,.btn{
    display:inline-block;
    width:100%;
    text-align:center;
    padding:17px 18px;
    border-radius:15px;
    border:0;
    background:linear-gradient(180deg,#9fe45c,#6fbd42);
    color:#07111b;
    font-size:18px;
    font-weight:900;
    cursor:pointer;
    text-decoration:none;
    box-shadow:0 18px 35px rgba(124,198,75,.18);
}
.btn.secondary{
    background:rgba(255,255,255,.08);
    color:#f8fafc;
    border:1px solid var(--line);
    box-shadow:none;
}
.auth-links{
    display:flex;
    justify-content:space-between;
    gap:22px;
    margin-top:30px;
    flex-wrap:wrap;
}
.auth-links a{
    color:var(--green3);
    font-weight:800;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
}
.error,.success{
    padding:13px 15px;
    border-radius:13px;
    margin-bottom:18px;
    line-height:1.45;
}
.error{
    color:#fecaca;
    background:rgba(239,68,68,.13);
    border:1px solid rgba(239,68,68,.24);
}
.success{
    color:#bbf7d0;
    background:rgba(91,189,58,.13);
    border:1px solid rgba(91,189,58,.25);
}
.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.small-note{
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

@media(max-width:1050px){
    body{padding:18px}
    .login-shell{grid-template-columns:1fr;min-height:auto}
    .brand-panel{border-right:0;border-bottom:1px solid var(--line)}
    .brand-city{right:0;opacity:.35}
}
@media(max-width:650px){
    .brand-panel,.login-panel{padding:34px 26px}
    .brand-title{font-size:34px}
    .brand-sub{font-size:21px}
    .brand-icons{grid-template-columns:repeat(2,1fr);gap:18px}
    .brand-icon{border-right:0;padding:0}
    .grid{grid-template-columns:1fr}
}