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

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

        body{
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            background:
                radial-gradient(circle at 15% 20%, rgba(59,130,246,0.30), transparent 25%),
                radial-gradient(circle at 85% 80%, rgba(168,85,247,0.24), transparent 28%),
                radial-gradient(circle at 50% 50%, rgba(14,165,233,0.12), transparent 35%),
                linear-gradient(135deg,#071120 0%, #0b1730 35%, #111827 70%, #1e1b4b 100%);
            background-repeat:no-repeat;
            background-size:cover;
            background-attachment:fixed;
            overflow-x:hidden;
            position:relative;
            padding:30px 20px;
        }

        body::before,
        body::after{
            content:"";
            position:absolute;
            border-radius:50%;
            filter:blur(100px);
            z-index:0;
            opacity:.9;
        }

        body::before{
            width:320px;
            height:320px;
            top:-60px;
            left:-60px;
            background:rgba(59,130,246,0.25);
        }

        body::after{
            width:360px;
            height:360px;
            right:-90px;
            bottom:-100px;
            background:rgba(168,85,247,0.22);
        }

        .bg-glass{
            position:fixed;
            inset:0;
            width:100%;
            height:100%;
            overflow:hidden;
            z-index:0;
            pointer-events:none;
        }

        .bg-glass span{
            position:absolute;
            display:block;
            backdrop-filter:blur(14px);
            -webkit-backdrop-filter:blur(14px);
            background:rgba(255,255,255,0.07);
            border:1px solid rgba(255,255,255,0.10);
            box-shadow:0 10px 40px rgba(0,0,0,0.12);
        }

        .bg-glass span:nth-child(1){
            width:140px;
            height:140px;
            top:8%;
            left:10%;
            border-radius:28px;
            transform:rotate(18deg);
        }

        .bg-glass span:nth-child(2){
            width:100px;
            height:100px;
            top:65%;
            left:8%;
            border-radius:50%;
        }

        .bg-glass span:nth-child(3){
            width:170px;
            height:170px;
            top:10%;
            right:12%;
            border-radius:50%;
        }

        .bg-glass span:nth-child(4){
            width:120px;
            height:120px;
            bottom:10%;
            right:10%;
            border-radius:24px;
            transform:rotate(-20deg);
        }

        .page-shell{
            position:relative;
            z-index:2;
            width:100%;
            max-width:1180px;
        }

        .login-wrapper{
            width:100%;
        }

        .login-card{
            display:grid;
            grid-template-columns:1fr 1fr;
            min-height:700px;
            background:rgba(255,255,255,0.08);
            border:1px solid rgba(255,255,255,0.14);
            backdrop-filter:blur(20px);
            -webkit-backdrop-filter:blur(20px);
            border-radius:32px;
            overflow:hidden;
            box-shadow:0 30px 80px rgba(0,0,0,0.35);
        }

        .login-left{
            position:relative;
            padding:55px 45px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
                linear-gradient(135deg,#2563eb,#4f46e5,#7c3aed);
            color:#fff;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            overflow:hidden;
            text-align:center;
            align-items:center;
        }

        .login-left::before{
            content:"";
            position:absolute;
            width:220px;
            height:220px;
            border:1px solid rgba(255,255,255,0.15);
            border-radius:50%;
            top:-60px;
            right:-50px;
        }

        .login-left::after{
            content:"";
            position:absolute;
            width:180px;
            height:180px;
            background:rgba(255,255,255,0.08);
            border-radius:30px;
            bottom:30px;
            right:30px;
            transform:rotate(20deg);
        }

        .brand-top{
            position:relative;
            z-index:2;
            display:flex;
            flex-direction:column;
            align-items:center;
            width:100%;
        }

        .brand-badge{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:10px 18px;
            border-radius:50px;
            background:rgba(255,255,255,0.14);
            border:1px solid rgba(255,255,255,0.18);
            font-size:13px;
            font-weight:500;
            margin-bottom:20px;
        }

        .brand-logo{
            width:64px;
            height:64px;
            border-radius:18px;
            object-fit:cover;
            background:#fff;
            padding:8px;
            margin-bottom:18px;
            box-shadow:0 10px 30px rgba(0,0,0,0.18);
        }

        .login-left h1{
            font-size:38px;
            font-weight:800;
            line-height:1.25;
            margin-bottom:12px;
        }

        .login-left p{
            font-size:15px;
            line-height:1.8;
            color:rgba(255,255,255,0.9);
            max-width:470px;
            text-align:center;
        }

        .feature-list{
            position:relative;
            z-index:2;
            display:grid;
            gap:14px;
            margin-top:35px;
            width:100%;
            max-width:460px;
        }

        .feature-item{
            display:flex;
            align-items:center;
            gap:12px;
            background:rgba(255,255,255,0.10);
            border:1px solid rgba(255,255,255,0.14);
            padding:14px 16px;
            border-radius:18px;
            font-size:14px;
            font-weight:500;
            text-align:left;
        }

        .feature-icon{
            width:38px;
            height:38px;
            border-radius:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,255,255,0.18);
            font-size:18px;
            flex-shrink:0;
        }

        .left-bottom{
            position:relative;
            z-index:2;
            margin-top:35px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            width:100%;
            gap:20px;
            flex-wrap:wrap;
        }

        .left-bottom small{
            color:rgba(255,255,255,0.85);
            font-size:13px;
        }

        .login-right{
            background:rgba(255,255,255,0.94);
            padding:55px 42px 35px;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .form-box{
            width:100%;
            max-width:430px;
        }

        .form-box .welcome-tag{
            display:inline-block;
            padding:8px 16px;
            border-radius:999px;
            background:#eef2ff;
            color:#4f46e5;
            font-size:12px;
            font-weight:700;
            letter-spacing:.5px;
            margin-bottom:18px;
            text-transform:uppercase;
        }

        .form-box h2{
            font-size:34px;
            font-weight:800;
            color:#0f172a;
            margin-bottom:8px;
            text-align:center;
        }

        .form-box .subtext{
            color:#64748b;
            font-size:14px;
            margin-bottom:28px;
            text-align:center;
        }

        .input-group-custom{
            margin-bottom:18px;
        }

        .input-group-custom label{
            display:block;
            margin-bottom:8px;
            font-size:14px;
            font-weight:600;
            color:#1e293b;
        }

        .input-wrap{
            position:relative;
        }

        .input-wrap input{
            width:100%;
            height:56px;
            border:none;
            outline:none;
            border-radius:18px;
            padding:0 54px 0 18px;
            background:#f8fafc;
            border:1px solid #e2e8f0;
            font-size:15px;
            color:#0f172a;
            transition:all .3s ease;
        }

        .input-wrap input:focus{
            border-color:#6366f1;
            background:#fff;
            box-shadow:0 0 0 4px rgba(99,102,241,0.12);
        }

        .input-icon,
        .toggle-pass{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            color:#64748b;
            font-size:18px;
        }

        .input-icon{
            right:16px;
            pointer-events:none;
        }

        .toggle-pass{
            right:14px;
            width:32px;
            height:32px;
            border:none;
            background:transparent;
            cursor:pointer;
            border-radius:50%;
        }

        .toggle-pass:hover{
            background:#eef2ff;
            color:#4f46e5;
        }

        .options-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:15px;
            flex-wrap:wrap;
            margin:8px 0 22px;
        }

        .check-box{
            display:flex;
            align-items:center;
            gap:10px;
            font-size:14px;
            color:#475569;
            font-weight:500;
        }

        .check-box input{
            width:18px;
            height:18px;
            accent-color:#4f46e5;
        }

        .forgot-link{
            color:#4f46e5;
            text-decoration:none;
            font-size:14px;
            font-weight:600;
        }

        .forgot-link:hover{
            text-decoration:underline;
        }

        .terms-box{
            display:flex;
            align-items:flex-start;
            gap:10px;
            background:#f8fafc;
            border:1px solid #e2e8f0;
            border-radius:16px;
            padding:14px 16px;
            margin-bottom:22px;
        }

        .terms-box input{
            margin-top:3px;
            width:18px;
            height:18px;
            accent-color:#4f46e5;
            flex-shrink:0;
        }

        .terms-box label{
            font-size:14px;
            color:#475569;
            line-height:1.6;
        }

        .terms-box a{
            color:#4f46e5;
            text-decoration:none;
            font-weight:600;
        }

        .terms-box a:hover{
            text-decoration:underline;
        }

        .login-btn{
            width:100%;
            height:56px;
            border:none;
            border-radius:18px;
            background:linear-gradient(135deg,#2563eb,#4f46e5,#7c3aed);
            color:#fff;
            font-size:16px;
            font-weight:700;
            cursor:pointer;
            box-shadow:0 16px 35px rgba(79,70,229,0.28);
            transition:all .3s ease;
        }

        .login-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 20px 38px rgba(79,70,229,0.35);
        }

        .login-btn:disabled{
            opacity:.6;
            cursor:not-allowed;
            transform:none;
            box-shadow:none;
        }

        .divider{
            display:flex;
            align-items:center;
            text-align:center;
            gap:14px;
            margin:24px 0 20px;
            color:#94a3b8;
            font-size:13px;
            font-weight:600;
        }

        .divider::before,
        .divider::after{
            content:"";
            flex:1;
            height:1px;
            background:#e2e8f0;
        }

        .google-btn{
            width:100%;
            min-height:56px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:12px;
            text-decoration:none;
            border-radius:18px;
            border:1px solid #e2e8f0;
            background:#fff;
            color:#0f172a;
            font-weight:600;
            transition:all .3s ease;
            box-shadow:0 10px 25px rgba(15,23,42,0.04);
        }

        .google-btn:hover{
            transform:translateY(-2px);
            border-color:#cbd5e1;
            box-shadow:0 18px 30px rgba(15,23,42,0.08);
            text-decoration:none;
            color:#0f172a;
        }

        .google-btn img{
            width:22px;
            height:22px;
        }

        .bottom-row{
            margin-top:22px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:12px;
            flex-wrap:wrap;
        }

        .register-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:12px 24px;
            border-radius:14px;
            text-decoration:none;
            border:1px solid #cbd5e1;
            color:#334155;
            font-size:14px;
            font-weight:600;
            transition:all .3s ease;
            min-width:210px;
        }

        .register-btn:hover{
            background:#f8fafc;
            text-decoration:none;
            color:#0f172a;
        }

        .helper-text{
            text-align:center;
            font-size:13px;
            color:#64748b;
            margin-top:16px;
            line-height:1.7;
        }

        .login-footer{
            margin-top:22px;
            text-align:center;
            color:#64748b;
            font-size:13px;
            line-height:1.6;
        }

        .login-footer strong{
            color:#334155;
            font-weight:600;
        }

        @media (max-width: 992px){
            .login-card{
                grid-template-columns:1fr;
            }

            .login-left{
                min-height:280px;
            }
        }

        @media (max-width: 768px){
            body{
                padding:12px;
            }

            .page-shell{
                max-width:100%;
            }

            .login-card{
                grid-template-columns:1fr;
                min-height:auto;
                border-radius:24px;
            }

            .login-left{
                display:none;
            }

            .login-right{
                width:100%;
                padding:30px 20px 26px;
                min-height:auto;
                border-radius:24px;
            }

            .form-box{
                max-width:100%;
            }

            .form-box h2{
                font-size:28px;
            }

            .form-box .subtext{
                font-size:13px;
                margin-bottom:22px;
            }

            .input-wrap input,
            .login-btn,
            .google-btn{
                height:52px;
                border-radius:16px;
            }

            .terms-box{
                padding:12px 14px;
                border-radius:14px;
            }

            .options-row{
                flex-direction:column;
                align-items:flex-start;
            }

            .bottom-row{
                justify-content:center;
            }

            .register-btn{
                width:100%;
                max-width:260px;
            }
        }

        @media (max-width: 480px){
            .login-right{
                padding:24px 16px 22px;
            }

            .form-box h2{
                font-size:24px;
            }

            .input-group-custom{
                margin-bottom:15px;
            }

            .divider{
                margin:20px 0 16px;
            }

            .helper-text,
            .login-footer{
                font-size:12px;
            }
        }