:root {
            --blue-900: #0a1628;
            --blue-800: #0f2347;
            --blue-700: #1a3a6e;
            --blue-600: #1e4fad;
            --blue-500: #2563eb;
            --blue-400: #3b82f6;
            --blue-300: #60a5fa;
            --blue-100: #dbeafe;
            --blue-50:  #eff6ff;
            --white:    #ffffff;
            --gray-400: #94a3b8;
            --gray-600: #475569;
            --gray-800: #1e293b;
            --red-500:  #ef4444;
            --red-50:   #fef2f2;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'DM Sans', sans-serif;
            background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 50%, #0d2d6b 100%);
            min-height: 100vh;
            display: flex; align-items:center; justify-content:center;
            padding: 20px;
            position:relative; overflow:hidden;
        }
        body::before {
            content:'';
            position:absolute; top:-10%; right:-10%;
            width:600px; height:600px; border-radius:50%;
            background:radial-gradient(circle, rgba(37,99,235,.25) 0%, transparent 70%);
            pointer-events:none;
        }
        body::after {
            content:'';
            position:absolute; bottom:-20%; left:-5%;
            width:400px; height:400px; border-radius:50%;
            background:radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%);
            pointer-events:none;
        }
        h1,h2,h3 { font-family:'Plus Jakarta Sans',sans-serif; }

        .login-container {
            display:grid; grid-template-columns:1fr 1fr;
            max-width:900px; width:100%;
            border-radius:24px; overflow:hidden;
            box-shadow: 0 32px 80px rgba(0,0,0,.5);
            position:relative; z-index:2;
        }

        /* LEFT PANEL */
        .panel-left {
            background: linear-gradient(160deg, var(--blue-700) 0%, var(--blue-900) 100%);
            padding: 48px 40px;
            display:flex; flex-direction:column; justify-content:center;
            position:relative; overflow:hidden;
        }
        .panel-left::before {
            content:'';
            position:absolute; bottom:-60px; right:-60px;
            width:220px; height:220px; border-radius:50%;
            border: 2px solid rgba(255,255,255,.06);
        }
        .panel-left::after {
            content:'';
            position:absolute; bottom:-100px; right:-100px;
            width:320px; height:320px; border-radius:50%;
            border: 2px solid rgba(255,255,255,.04);
        }
        .panel-logo {
            font-size:1.8rem; font-weight:900; color:#fff;
            letter-spacing:-0.5px; margin-bottom:40px;
        }
        .panel-logo span { color:var(--blue-300); }
        .panel-left h2 {
            font-size:1.6rem; font-weight:800; color:#fff;
            margin-bottom:12px; line-height:1.3;
        }
        .panel-left p {
            color:rgba(255,255,255,.55); font-size:.9rem;
            line-height:1.7; margin-bottom:36px;
        }
        .feature-list { display:flex; flex-direction:column; gap:12px; }
        .feature-item {
            display:flex; align-items:center; gap:10px;
            color:rgba(255,255,255,.7); font-size:.85rem;
        }
        .feature-item i {
            width:28px; height:28px; border-radius:8px;
            background:rgba(37,99,235,.35); color:var(--blue-300);
            display:flex; align-items:center; justify-content:center;
            font-size:.75rem; flex-shrink:0;
        }

        /* RIGHT PANEL (Form) */
        .panel-right {
            background: var(--white);
            padding: 48px 44px;
            display:flex; flex-direction:column; justify-content:center;
        }
        .form-header { margin-bottom:32px; }
        .form-header h3 {
            font-size:1.5rem; font-weight:800; color:var(--gray-800);
            letter-spacing:-0.5px; margin-bottom:6px;
        }
        .form-header p { color:var(--gray-400); font-size:.88rem; }

        .alert-error {
            background:var(--red-50); border:1px solid #fecaca;
            color:#991b1b; padding:12px 16px; border-radius:10px;
            margin-bottom:20px; font-size:.85rem;
            display:flex; align-items:center; gap:8px;
        }
        .alert-success {
            background:#ecfdf5; border:1px solid #a7f3d0;
            color:#065f46; padding:12px 16px; border-radius:10px;
            margin-bottom:20px; font-size:.85rem;
            display:flex; align-items:center; gap:8px;
        }

        .form-group { margin-bottom:20px; }
        .form-label {
            display:block; font-size:.83rem; font-weight:600;
            color:var(--gray-600); margin-bottom:8px;
        }
        .input-wrap {
            position:relative; display:flex; align-items:center;
        }
        .input-icon {
            position:absolute; left:14px;
            color:var(--gray-400); font-size:.85rem; pointer-events:none;
        }
        .form-input {
            width:100%; padding:12px 14px 12px 40px;
            border:2px solid #e2e8f0; border-radius:10px;
            font-size:.9rem; font-family:'DM Sans',sans-serif;
            color:var(--gray-800); transition:all .2s;
            outline:none; background:var(--white);
        }
        .form-input:focus {
            border-color:var(--blue-400);
            box-shadow:0 0 0 4px rgba(37,99,235,.08);
        }
        .form-input.is-invalid { border-color:var(--red-500); }
        .invalid-feedback {
            color:var(--red-500); font-size:.78rem;
            margin-top:5px; display:flex; align-items:center; gap:4px;
        }

        .btn-toggle-pass {
            position:absolute; right:12px;
            background:none; border:none;
            color:var(--gray-400); cursor:pointer;
            font-size:.85rem; padding:4px;
            transition:color .2s;
        }
        .btn-toggle-pass:hover { color:var(--blue-500); }

        .form-options {
            display:flex; align-items:center; justify-content:space-between;
            margin-bottom:24px; font-size:.83rem;
        }
        .checkbox-wrap {
            display:flex; align-items:center; gap:8px;
            color:var(--gray-600); cursor:pointer;
        }
        .checkbox-wrap input { accent-color:var(--blue-500); }
        .forgot-link { color:var(--blue-500); text-decoration:none; font-weight:500; }
        .forgot-link:hover { color:var(--blue-400); }

        .btn-login {
            width:100%; padding:14px;
            background:var(--blue-500); color:#fff;
            border:none; border-radius:10px;
            font-size:.95rem; font-weight:700;
            font-family:'Plus Jakarta Sans',sans-serif;
            cursor:pointer; transition:all .3s;
            display:flex; align-items:center; justify-content:center; gap:8px;
            letter-spacing:.02em;
        }
        .btn-login:hover {
            background:var(--blue-400);
            box-shadow:0 4px 20px rgba(37,99,235,.45);
            transform:translateY(-1px);
        }
        .btn-login:active { transform:translateY(0); }

        .back-link {
            display:flex; align-items:center; justify-content:center;
            gap:6px; margin-top:20px;
            color:var(--gray-400); font-size:.82rem; text-decoration:none;
            transition:color .2s;
        }
        .back-link:hover { color:var(--blue-500); }

        @media(max-width:680px){
            .login-container { grid-template-columns:1fr; }
            .panel-left { display:none; }
            .panel-right { border-radius:24px; }
        }