/* Login specific styles (corporate split-screen) */
.login-root{
    min-height:100vh;
    display:flex;
    background:linear-gradient(180deg,#f7f9fe,#f2f6ff);
}

.login-left{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
}

.login-inner{
    width:100%;
    max-width:420px;
}

.login-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.brand-mark{flex:0 0 auto;}

.brand-icon{
    flex:0 0 auto;
    width:44px;
    height:44px;
    border-radius:14px;
    padding:8px;
    background:linear-gradient(135deg, rgba(37,99,235,0.14), rgba(6,182,212,0.10));
    border:1px solid rgba(37,99,235,0.18);
}

.brand-title{
    margin:0;
    font-size:34px;
    line-height:1.1;
    display:flex;
    align-items:baseline;
    gap:8px;
}

.word-nexus{
    font-weight:950;
    letter-spacing:1.1px;
    font-size:34px;
    color:transparent;
    background:linear-gradient(135deg, #22d3ee, #2563eb 55%, #6366f1);
    -webkit-background-clip:text;
    background-clip:text;
}

.word-erp{
    font-weight:950;
    letter-spacing:1.1px;
    font-size:34px;
    color:transparent;
    background:linear-gradient(135deg, #22d3ee, #2563eb 55%, #6366f1);
    -webkit-background-clip:text;
    background-clip:text;
}

.brand-sub{
    margin:4px 0 0 0;
    color:var(--muted);
    font-size:14px;
}

.login-card{
    padding:22px;
    border-radius:16px;
    border:1px solid rgba(148,163,184,0.22);
    box-shadow:0 12px 40px rgba(15,23,42,0.08);
}

.login-card-head h2{
    margin:0;
    font-size:18px;
    color:#0f172a;
}

.login-card-head p{
    margin:6px 0 0 0;
    font-size:13px;
    color:#64748b;
}

.login-form{
    margin-top:14px;
}

.field{margin-bottom:12px;}

.login-form .label{
    display:block;
    font-size:12px;
    color:#475569;
    font-weight:800;
    letter-spacing:0.3px;
    margin-bottom:6px;
}

.login-form input{
    width:100%;
    padding:11px 12px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,0.35);
    background:#ffffff;
    outline:none;
    transition:border-color 140ms ease, box-shadow 140ms ease;
}

.login-form input:focus{
    border-color: rgba(37,99,235,0.6);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.label-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}

.password-wrap{position:relative;}

.password-wrap input{padding-right:46px;}

.btn-eye{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(148,163,184,0.25);
    background:rgba(241,245,249,0.7);
    cursor:pointer;
}

.btn-eye:hover{background:#f1f5f9;}

.btn-eye:focus{outline:2px solid rgba(37,99,235,0.18);outline-offset:2px;}

.btn-eye .eye{
    display:block;
    width:14px;
    height:14px;
    margin:0 auto;
    border-radius:999px;
    border:2px solid #475569;
    position:relative;
}

.btn-eye .eye::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:4px;
    height:4px;
    border-radius:999px;
    background:#475569;
}

.btn-block{width:100%;display:inline-block}

.login-foot{margin-top:14px;font-size:12px;color:#94a3b8}

.login-right{
    width:46%;
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:
        radial-gradient(1200px 800px at 20% 20%, rgba(6,182,212,0.22), transparent 60%),
        radial-gradient(900px 700px at 80% 30%, rgba(37,99,235,0.26), transparent 55%),
        radial-gradient(800px 600px at 60% 85%, rgba(99,102,241,0.18), transparent 55%),
        linear-gradient(135deg, #0b1220, #0f1b2e);
}

.login-right::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity:0.35;
    pointer-events:none;
}

.hero-overlay{
    position:relative;
    max-width:520px;
    color:#fff;
    text-align:left;
    padding:22px;
    border-radius:18px;
    border:1px solid rgba(226,232,240,0.16);
    background:rgba(2,6,23,0.45);
    box-shadow: 0 18px 60px rgba(0,0,0,0.28);
    backdrop-filter: blur(10px);
}

.hero-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    color:rgba(255,255,255,0.92);
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
}

.hero-overlay h2{font-size:28px;margin:12px 0 8px;line-height:1.15}

.hero-overlay p{margin:0;color:rgba(255,255,255,0.86);font-size:14px;line-height:1.5}

.hero-list{margin:14px 0 0 0;padding:0;list-style:none;display:grid;gap:10px}

.hero-list li{
    padding-left:22px;
    position:relative;
    color:rgba(255,255,255,0.9);
    font-size:13px;
}

.hero-list li::before{
    content:'';
    position:absolute;
    left:0;
    top:6px;
    width:10px;
    height:10px;
    border-radius:999px;
    background:rgba(34,197,94,0.9);
    box-shadow:0 0 0 4px rgba(34,197,94,0.18);
}

@media (max-width:900px){
    .login-root{flex-direction:column}
    .login-right{width:100%;min-height:340px}
    .login-left{width:100%;padding:22px}
}

@media (max-width:420px){
    .login-card{padding:18px;border-radius:14px}
    .brand-title{font-size:30px}
}