:root{
            --proda-blue:#00AEEF;
            --proda-blue-dark:#0072FF;
            --proda-blue-soft:rgba(0,174,239,.10);
            --proda-orange:#F59E0B;
            --proda-bg:#F5F7FB;
            --proda-border:#E2E8F0;
            --proda-text:#111827;
            --proda-muted:#6B7280;
            --proda-shadow:0 18px 50px rgba(15,23,42,.08);
        }

        *{box-sizing:border-box}

        body{
            margin:0;
            min-height:100vh;
            font-family:"Open Sans","Segoe UI",sans-serif;
            background:
                radial-gradient(circle at top left, rgba(0,174,239,.10), transparent 28%),
                radial-gradient(circle at bottom right, rgba(245,158,11,.10), transparent 24%),
                var(--proda-bg);
            color:var(--proda-text);
        }

        .login-page{
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:24px;
        }

        .login-shell{
            width:100%;
            max-width:1120px;
            display:grid;
            grid-template-columns:1.1fr .9fr;
            background:rgba(255,255,255,.72);
            border:1px solid rgba(226,232,240,.9);
            border-radius:28px;
            overflow:hidden;
            box-shadow:var(--proda-shadow);
            backdrop-filter:blur(10px);
        }

        .login-brand-side{
            position:relative;
            padding:48px;
            background:
                linear-gradient(135deg, rgba(0,174,239,.08), rgba(0,114,255,.05)),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border-right:1px solid var(--proda-border);
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }

        .login-brand-side::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at top right, rgba(0,174,239,.12), transparent 30%),
                radial-gradient(circle at bottom left, rgba(245,158,11,.10), transparent 26%);
            pointer-events:none;
        }

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

        .brand-logo img{
            max-width:220px;
            width:100%;
            height:auto;
        }

        .brand-badge,
        .login-card-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            border-radius:999px;
            font-size:12px;
            font-weight:700;
        }

        .brand-badge{
            padding:8px 14px;
            background:#fff;
            border:1px solid rgba(0,174,239,.14);
            color:var(--proda-blue-dark);
            box-shadow:0 8px 20px rgba(15,23,42,.04);
            margin:24px 0 18px;
        }

        .brand-title{
            font-size:38px;
            line-height:1.1;
            font-weight:800;
            letter-spacing:-1px;
            margin-bottom:14px;
        }

        .brand-text,
        .login-subtitle{
            color:var(--proda-muted);
            line-height:1.7;
        }

        .brand-features{
            display:grid;
            gap:14px;
            max-width:460px;
            margin-top:28px;
        }

        .brand-feature{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:14px 16px;
            border:1px solid rgba(226,232,240,.9);
            border-radius:16px;
            background:rgba(255,255,255,.72);
        }

        .brand-feature-icon{
            width:40px;
            height:40px;
            border-radius:12px;
            background:linear-gradient(135deg, rgba(0,174,239,.14), rgba(245,158,11,.14));
            color:var(--proda-blue-dark);
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
        }

        .brand-feature strong{
            display:block;
            font-size:14px;
            margin-bottom:3px;
        }

        .brand-feature span,
        .login-footer-note,
        .login-brand-footer{
            font-size:13px;
            color:var(--proda-muted);
        }

        .login-form-side{
            background:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:48px 34px;
        }

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

        .login-card-badge{
            padding:7px 12px;
            background:var(--proda-blue-soft);
            color:var(--proda-blue-dark);
            margin-bottom:14px;
        }

        .login-title{
            font-size:30px;
            line-height:1.15;
            font-weight:800;
            letter-spacing:-.8px;
            margin-bottom:8px;
        }

        .form-label{
            font-size:13px;
            font-weight:600;
            margin-bottom:8px;
        }

        .input-shell{
            position:relative;
        }

        .input-icon{
            position:absolute;
            top:50%;
            left:14px;
            transform:translateY(-50%);
            color:#94a3b8;
            font-size:14px;
            pointer-events:none;
        }

        .form-control{
            min-height:52px;
            border:1px solid var(--proda-border);
            border-radius:16px;
            background:#fbfdff;
            box-shadow:none !important;
            font-size:14px;
            padding-left:42px;
        }

        .form-control:focus{
            border-color:rgba(0,174,239,.40);
            background:#fff;
            box-shadow:0 0 0 .22rem rgba(0,174,239,.10) !important;
        }

        .password-toggle{
            position:absolute;
            top:50%;
            right:14px;
            transform:translateY(-50%);
            border:none;
            background:transparent;
            color:#94a3b8;
            padding:0;
            font-size:14px;
        }

        .login-actions{
            margin:10px 0 22px;
        }

        .btn-login{
            min-height:54px;
            border:none;
            border-radius:16px;
            background:linear-gradient(135deg, var(--proda-blue-dark), var(--proda-blue));
            color:#fff;
            font-weight:700;
            font-size:15px;
            box-shadow:0 16px 28px rgba(0,114,255,.22);
        }

        .btn-login:hover{
            color:#fff;
            background:linear-gradient(135deg, #0064e6, #0097e6);
        }

        .login-footer-note a{
            color:var(--proda-blue-dark);
            text-decoration:none;
            font-weight:600;
        }

        @media (max-width: 991.98px){
            .login-shell{grid-template-columns:1fr}
            .login-brand-side{
                border-right:none;
                border-bottom:1px solid var(--proda-border);
                padding:34px 24px;
            }
            .login-form-side{padding:34px 22px}
            .brand-title{font-size:30px}
        }

        @media (max-width: 575.98px){
            .login-page{padding:14px}
            .login-shell{border-radius:22px}
            .login-brand-side,.login-form-side{padding:22px 18px}
            .brand-title,.login-title{font-size:26px}
        }