*{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            font-family:'Inter', sans-serif;
            min-height:100vh;
            background: linear-gradient(90deg, #f2f0f3 0%, #49e5b1 100%);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:30px 15px 110px;
        }
        .login-wrapper{
            width:100%;
            max-width:980px;
            background:#f7f7f7;
            border-radius:14px;
            box-shadow:0 20px 50px rgba(0,0,0,.18);
            overflow:hidden;
        }
        .login-container{
            display:flex;
            min-height:560px;
        }
        .left-panel,.right-panel{
            width:50%;
            padding:34px 40px;
            background:#f7f7f7;
        }
        .left-panel{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
        }
        .right-panel{
            border-left:1px solid #ddd;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .logo-box{
            margin-bottom:18px;
            text-align:center;
        }
        .logo-box img{
            width:130px;
            max-width:100%;
            object-fit:contain;
        }
        .form-box{
            width:100%;
            max-width:390px;
        }
        .google-btn{
            width:100%;
            height:52px;
            border:1.5px solid #d7dce3;
            background:#fff;
            border-radius:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            text-decoration:none;
            color:#1f2937;
            font-size:15px;
            font-weight:600;
            margin-bottom:16px;
            transition:.25s ease;
        }
        .google-btn:hover{
            border-color:#7d006c;
            box-shadow:0 8px 18px rgba(125,0,108,.10);
            transform:translateY(-1px);
        }
        .google-icon{
            width:22px;
            height:22px;
            border-radius:50%;
            background:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:800;
            color:#db4437;
            font-size:18px;
        }
        .divider{
            display:flex;
            align-items:center;
            gap:14px;
            color:#6b7280;
            font-size:14px;
            margin:6px 0 16px;
        }
        .divider::before,
        .divider::after{
            content:"";
            flex:1;
            height:1px;
            background:#dcdcdc;
        }
        .input-group{
            position:relative;
            margin-bottom:16px;
        }
        .input-group input{
            width:100%;
            height:56px;
            border:1.5px solid #bfc4cb;
            border-radius:12px;
            padding:0 18px;
            font-size:17px;
            color:#222;
            background:#fff;
            outline:none;
            transition:.25s ease;
        }
        .input-group input:focus{
            border-color:#7d006c;
            box-shadow:0 0 0 4px rgba(125,0,108,.10);
        }
        .password-group input{
            padding-right:62px;
        }
        .toggle-password{
            position:absolute;
            top:50%;
            right:14px;
            transform:translateY(-50%);
            border:none;
            background:transparent;
            cursor:pointer;
            width:36px;
            height:36px;
            border-radius:8px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .toggle-password:hover{
            background:rgba(0,0,0,.05);
        }
        .toggle-password svg{
            width:22px;
            height:22px;
            stroke:#28323d;
        }
        .login-btn{
            width:100%;
            height:54px;
            border:none;
            border-radius:12px;
            background:#76005f;
            color:#fff;
            font-size:18px;
            font-weight:600;
            cursor:pointer;
            transition:.25s ease;
            margin-top:2px;
        }
        .login-btn:hover{
            background:#5f004c;
            transform:translateY(-1px);
        }
        .forgot-link,
        .register-link{
            display:block;
            text-align:center;
            margin-top:16px;
            color:#7a156e;
            text-decoration:none;
            font-size:15px;
            font-weight:500;
        }
        .forgot-link:hover,
        .register-link:hover{
            text-decoration:underline;
        }
        .right-panel h2{
            font-size:30px;
            line-height:1.2;
            color:#0f2237;
            font-weight:800;
            margin-bottom:14px;
        }
        .right-panel p{
            font-size:17px;
            line-height:1.6;
            color:#253040;
            margin-bottom:28px;
            max-width:430px;
        }
        .video-box{
            width:100%;
            max-width:390px;
            aspect-ratio:16/9;
            background:#111;
            border-radius:2px;
            overflow:hidden;
            box-shadow:0 8px 20px rgba(0,0,0,.10);
        }
        .video-box iframe{
            width:100%;
            height:100%;
            border:0;
        }
        .cookie-notice-link{
            margin-top:28px;
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#7a156e;
            text-decoration:none;
            font-size:16px;
            font-weight:500;
        }
        .cookie-notice-link .icon{
            width:18px;
            height:18px;
            border-radius:50%;
            background:#7a156e;
            color:#fff;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            font-size:12px;
            font-weight:700;
        }
        .alert-error{
            width:100%;
            max-width:390px;
            background:#ffe8e8;
            color:#b00020;
            border:1px solid #f2b3b3;
            padding:12px 14px;
            border-radius:10px;
            margin-bottom:14px;
            font-size:14px;
            font-weight:500;
        }
        .cookie-bar{
            position:fixed;
            left:0;
            bottom:0;
            width:100%;
            color:#fff;
            text-align:center;
            padding:18px 20px 16px;
            z-index:999;
        }
        .cookie-bar p{
            margin-bottom:4px;
            font-size:14px;
            color:#f1f1f1;
        }
        .cookie-bar a{
            color:#fff;
            font-weight:600;
        }
        .cookie-bar .continue-btn{
            margin-top:8px;
            background:none;
            border:none;
            color:#ffcc33;
            font-size:16px;
            font-weight:800;
            cursor:pointer;
        }
        .close-cookie{
            position:absolute;
            right:16px;
            top:10px;
            background:none;
            border:none;
            color:#666;
            font-size:22px;
            cursor:pointer;
        }
        @media (max-width: 900px){
            .login-container{flex-direction:column;}
            .left-panel,.right-panel{width:100%;padding:30px 22px;}
            .right-panel{border-left:none;border-top:1px solid #ddd;text-align:center;align-items:center;}
            .right-panel p{max-width:100%;}
            .video-box{max-width:100%;}
        }