/* AITextPilot Login CSS */
:root{--primary:#4f46e5;--secondary:#06b6d4;--border:#e2e8f0}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;font-family:Inter,sans-serif;background:radial-gradient(circle at top left,#4f46e5,transparent 35%),radial-gradient(circle at bottom right,#06b6d4,transparent 30%),#0f172a;color:#fff}
body{display:flex;align-items:center;justify-content:center;padding:40px}
.login-wrapper{width:100%;max-width:1280px;display:grid;grid-template-columns:1fr 520px;background:rgba(255,255,255,.06);backdrop-filter:blur(18px);border-radius:28px;overflow:hidden}
.login-left{padding:70px}.brand{display:flex;align-items:center;gap:18px}.logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px}
.brand-text h1{font-size:34px}.hero{margin-top:90px}.hero h2{font-size:54px;line-height:1.1}.hero p{margin-top:20px;line-height:1.8;color:#cbd5e1}.features{margin-top:60px;display:grid;gap:18px}.feature{display:flex;gap:14px}.icon{width:34px;height:34px;border-radius:50%;background:#16a34a;display:flex;align-items:center;justify-content:center}.version{margin-top:80px;color:#94a3b8}
.login-right{background:#fff;color:#111827;display:flex;align-items:center;justify-content:center;padding:60px}.login-card{width:100%}.login-header{margin-bottom:30px}.login-header h2{font-size:36px}.login-header p{color:#64748b}.alert{padding:14px;border-radius:12px;margin-bottom:20px}.error{background:#fee2e2;color:#991b1b}.form-group{margin-bottom:22px}.form-group label{display:block;margin-bottom:8px;font-weight:600}.form-group input{width:100%;height:56px;border:1px solid var(--border);border-radius:14px;padding:0 18px}.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(79,70,229,.12)}.password-wrapper{position:relative}.toggle-password{position:absolute;right:16px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer}.form-options{display:flex;justify-content:space-between;margin-bottom:24px}.forgot-password{text-decoration:none;color:var(--primary)}.login-btn{width:100%;height:58px;border:none;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-size:17px;font-weight:700;cursor:pointer}.login-btn:hover{transform:translateY(-2px)}.footer-text{text-align:center;color:#64748b;margin-top:28px}
@media(max-width:992px){.login-wrapper{grid-template-columns:1fr}.login-left{display:none}.login-right{padding:32px}body{padding:20px}}


/* =========================================================
   Login Type Selector
========================================================= */

.login-type-switch {

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;

    margin-bottom:22px;

}


.login-type-option {

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    padding:12px;

    border:1px solid var(--border, #e5e7eb);

    border-radius:12px;

    background:var(--surface, #ffffff);

    color:var(--text, #111827);

    text-align:left;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;

}


.login-type-option:hover {

    transform:translateY(-1px);

}


.login-type-option.active {

    border-color:var(--primary, #4f46e5);

    background:rgba(79,70,229,.07);

}


.login-type-icon {

    width:36px;

    height:36px;

    flex:0 0 36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    background:rgba(79,70,229,.10);

    color:var(--primary, #4f46e5);

    font-size:16px;

}


.login-type-option strong {

    display:block;

    font-size:12px;

    font-weight:700;

}


.login-type-option small {

    display:block;

    margin-top:3px;

    color:var(--text-secondary, #6b7280);

    font-size:10px;

}


@media (max-width:520px) {

    .login-type-switch {

        grid-template-columns:1fr;

    }

}


/* =========================================================
   Login Type Icons
========================================================= */

.login-type-icon i {

    display:block;

    font-size:18px;

    line-height:1;

}


.login-type-option.active .login-type-icon {

    background:var(--primary, #4f46e5);

    color:#fff;

}


