/* ── Variables (mirroring style.css) ── */
        :root {
            --bg: #f4f6f9;
            --surface: #ffffff;
            --surface-2: #f8fafc;
            --border: #e4e9f0;
            --border-dk: #d0d9e6;
            --blue-50: #eff6ff;
            --blue-100: #dbeafe;
            --blue-400: #60a5fa;
            --blue-500: #3b82f6;
            --blue-600: #2563eb;
            --blue-700: #1d4ed8;
            --red-50: #fef2f2;
            --red-100: #fecaca;
            --red-500: #ef4444;
            --green-50: #ecfdf5;
            --green-100: #a7f3d0;
            --green-500: #10b981;
            --green-700: #047857;
            --slate-400: #94a3b8;
            --slate-500: #64748b;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            --font-display: 'Instrument Sans', sans-serif;
            --font-body: 'Sora', sans-serif;
            --r: 10px; --r-lg: 16px; --r-xl: 20px;
            --sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
            --sh: 0 4px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
            --sh-lg: 0 16px 48px rgba(15,23,42,.14), 0 4px 16px rgba(15,23,42,.07);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: var(--font-body);
            background: var(--bg);
            color: var(--slate-800);
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            display: flex;
        }

        /* ── LEFT PANEL ── */
        .login-left {
            flex: 1;
            background: linear-gradient(145deg, #1d4ed8 0%, #2563eb 40%, #3b82f6 100%);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 40px 48px;
            position: relative;
            overflow: hidden;
        }

        /* Background decorative circles */
        .login-left::before {
            content: '';
            position: absolute;
            width: 480px; height: 480px;
            background: rgba(255,255,255,.06);
            border-radius: 50%;
            top: -120px; right: -120px;
        }
        .login-left::after {
            content: '';
            position: absolute;
            width: 320px; height: 320px;
            background: rgba(255,255,255,.05);
            border-radius: 50%;
            bottom: -80px; left: -80px;
        }

        .brand-header {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            z-index: 1;
        }

        .brand-logo-box {
            width: 44px; height: 44px;
            background: rgba(255,255,255,.15);
            border: 1px solid rgba(255,255,255,.25);
            border-radius: var(--r);
            display: flex; align-items: center; justify-content: center;
            backdrop-filter: blur(4px);
        }

        .brand-logo-box svg path { fill: white; }

        .brand-label { color: white; }
        .brand-label h1 { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; }
        .brand-label p  { font-size: 12px; opacity: .65; margin-top: 2px; }

        /* Illustration area */
        .left-body {
            position: relative;
            z-index: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 40px 0;
        }

        .left-tagline {
            color: white;
        }
        .left-tagline h2 {
            font-family: var(--font-display);
            font-size: 36px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -.5px;
            margin-bottom: 14px;
        }
        .left-tagline p {
            font-size: 15px;
            opacity: .75;
            line-height: 1.75;
            max-width: 360px;
        }

        /* SVG Illustration */
        .left-illustration {
            margin-top: 48px;
            width: 100%;
            max-width: 400px;
        }
        .left-illustration svg { width: 100%; height: auto; }

        /* Floating stat chips */
        .stat-chips {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 32px;
        }
        .stat-chip {
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 100px;
            padding: 8px 16px;
            color: white;
            font-size: 12.5px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            backdrop-filter: blur(4px);
        }
        .stat-chip i { font-size: 14px; opacity: .8; }

        /* Footer left */
        .left-footer {
            font-size: 12px;
            color: rgba(255,255,255,.45);
            position: relative;
            z-index: 1;
        }

        /* ── RIGHT PANEL ── */
        .login-right {
            width: 480px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 48px;
            background: var(--surface);
            box-shadow: -8px 0 40px rgba(15,23,42,.06);
        }

        .form-container {
            width: 100%;
            max-width: 380px;
        }

        .form-head {
            margin-bottom: 32px;
        }
        .form-head h2 {
            font-family: var(--font-display);
            font-size: 26px;
            font-weight: 700;
            color: var(--slate-900);
            letter-spacing: -.3px;
        }
        .form-head p {
            font-size: 13px;
            color: var(--slate-500);
            margin-top: 6px;
            line-height: 1.6;
        }

        /* Alert banners */
        .alert {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px;
            border-radius: var(--r);
            font-size: 13px;
            line-height: 1.55;
            margin-bottom: 22px;
            animation: fadeSlideIn .25s ease;
        }
        .alert i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
        .alert.error   { background: var(--red-50);   color: #b91c1c; border: 1px solid var(--red-100); }
        .alert.success { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); }

        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Form groups */
        .field-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 16px;
        }

        .field-label {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--slate-600);
        }

        .field-wrap {
            position: relative;
        }

        .field-icon {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 17px;
            color: var(--slate-400);
            pointer-events: none;
            transition: color .2s;
        }

        .field-input {
            width: 100%;
            padding: 11px 13px 11px 40px;
            background: var(--surface-2);
            border: 1.5px solid var(--border);
            border-radius: var(--r);
            font-family: var(--font-body);
            font-size: 14px;
            color: var(--slate-800);
            outline: none;
            transition: border-color .2s, background .2s;
        }

        .field-input::placeholder { color: var(--slate-400); }

        .field-input:focus {
            border-color: var(--blue-400);
            background: var(--surface);
            box-shadow: 0 0 0 3px rgba(96,165,250,.15);
        }

        .field-input:focus + .field-icon,
        .field-wrap:focus-within .field-icon {
            color: var(--blue-500);
        }

        /* Password toggle */
        .pw-input-wrap { position: relative; }
        .pw-input-wrap .field-input { padding-right: 44px; }
        .pw-toggle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: var(--slate-400);
            padding: 4px;
            transition: color .2s;
        }
        .pw-toggle:hover { color: var(--slate-600); }

        /* Remember row */
        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            color: var(--slate-600);
            cursor: pointer;
        }

        .checkbox-label input[type="checkbox"] {
            accent-color: var(--blue-500);
            width: 15px;
            height: 15px;
            cursor: pointer;
        }

        .forgot-link {
            font-size: 12.5px;
            color: var(--blue-600);
            text-decoration: none;
            font-weight: 500;
            transition: color .15s;
        }
        .forgot-link:hover { color: var(--blue-700); text-decoration: underline; }

        /* Submit button */
        .btn-login {
            width: 100%;
            padding: 12px;
            background: var(--blue-600);
            color: white;
            border: none;
            border-radius: var(--r);
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 3px 14px rgba(37,99,235,.3);
            transition: all .2s;
            letter-spacing: -.1px;
        }

        .btn-login:hover {
            background: var(--blue-700);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(37,99,235,.35);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .btn-login.loading {
            pointer-events: none;
            opacity: .8;
        }

        /* Spinner */
        .spinner {
            width: 17px; height: 17px;
            border: 2.5px solid rgba(255,255,255,.4);
            border-top-color: white;
            border-radius: 50%;
            animation: spin .7s linear infinite;
            display: none;
        }

        .btn-login.loading .spinner { display: block; }
        .btn-login.loading .btn-text { display: none; }

        @keyframes spin { to { transform: rotate(360deg); } }

        /* Divider */
        .divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0;
            color: var(--slate-400);
            font-size: 12px;
        }
        .divider::before, .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        /* Default account hint */
        .hint-box {
            background: var(--blue-50);
            border: 1px solid var(--blue-100);
            border-radius: var(--r);
            padding: 12px 14px;
            font-size: 12px;
            color: var(--slate-600);
            line-height: 1.7;
        }
        .hint-box strong { color: var(--blue-700); }

        /* Form footer */
        .form-footer {
            margin-top: 28px;
            text-align: center;
            font-size: 12px;
            color: var(--slate-400);
        }

        /* Complain Button specific (white bg, blue text) */
        .btn-complain {
            background: white !important;
            color: var(--blue-600) !important;
            border: 1.5px solid var(--blue-600) !important;
            box-shadow: 0 4px 12px rgba(37,99,235,.1) !important;
        }
        .btn-complain:hover {
            background: var(--blue-50) !important;
            box-shadow: 0 6px 16px rgba(37,99,235,.15) !important;
        }

        /* ── Modals & Overlay (Sync with dashboard style) ── */
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, .35);
            backdrop-filter: blur(4px);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s;
        }
        .overlay.show { opacity: 1; pointer-events: all; }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -46%);
            width: min(600px, 94vw);
            max-height: 88vh;
            background: var(--surface);
            border-radius: var(--r-xl);
            box-shadow: var(--sh-lg);
            z-index: 1100;
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s, transform .25s;
            overflow: hidden;
            padding: 0; /* Dashboard modals use internal padding */
        }
        .modal.open {
            opacity: 1;
            pointer-events: all;
            transform: translate(-50%, -50%);
        }

        .modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 24px 24px 0;
            flex-shrink: 0;
        }
        .modal-eyebrow {
            font-size: 11px;
            font-weight: 600;
            color: var(--blue-500);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }
        .modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--slate-900); }
        .modal-close {
            background: var(--surface-2); border: 1px solid var(--border);
            width: 32px; height: 32px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 17px; color: var(--slate-500);
            transition: all .15s; flex-shrink: 0;
        }
        .modal-close:hover { background: var(--red-50); color: var(--red-500); border-color: var(--red-100); }

        .modal-body { padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

        /* Form Grid logic from dashboard */
        .form-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 24px 0;
            overflow-y: auto; flex: 1;
        }
        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-group.full { grid-column: 1/-1; }
        .form-group label { font-size: 12px; font-weight: 600; color: var(--slate-600); }
        
        .form-group input, .form-group select, .form-group textarea {
            background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
            padding: 10px 12px; font-family: var(--font-body); font-size: 14px;
            color: var(--slate-900); transition: .2s; outline: none; width: 100%;
        }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            background: #ffffff; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100);
        }

        .form-actions {
            display: flex; align-items: center; justify-content: flex-end; gap: 10px;
            padding: 16px 24px; border-top: 1px solid var(--border);
            background: var(--surface-2); flex-shrink: 0;
        }

        .btn-cancel {
            background: none; border: 1px solid var(--border); color: var(--slate-600);
            padding: 9px 20px; border-radius: var(--r); font-family: var(--font-display);
            font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s;
        }
        .btn-cancel:hover { background: var(--border); color: var(--slate-800); }

        .btn-submit {
            display: flex; align-items: center; gap: 7px; background: var(--blue-600);
            color: white; border: none; padding: 9px 22px; border-radius: var(--r);
            font-family: var(--font-display); font-size: 14px; font-weight: 600;
            cursor: pointer; box-shadow: 0 2px 10px rgba(37, 99, 235, .2); transition: all .2s;
        }
        .btn-submit:hover { background: var(--blue-700); transform: translateY(-1px); }

        .qr-reader-wrap {
            width: 100%; border-radius: 12px; overflow: hidden; background: #000;
            min-height: 200px; position: relative;
        }

        .complain-btn-module {
            width: calc(100% - 48px); margin: 0 24px 24px; padding: 20px; background: var(--surface-2);
            border: 2px solid var(--border); border-radius: var(--r-lg); text-align: left;
            cursor: pointer; transition: .2s; display: flex; align-items: center; gap: 16px;
        }
        .complain-btn-module:hover { border-color: var(--blue-400); background: var(--blue-50); }
        .complain-btn-module i { font-size: 32px; color: var(--blue-500); }
        .complain-btn-module div h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 2px; }
        .complain-btn-module div p { font-size: 12px; color: var(--slate-500); }

        /* Toast Sync */
        .toast {
            position: fixed; bottom: 28px; right: 28px; background: var(--slate-900);
            color: white; padding: 13px 20px; border-radius: var(--r);
            display: flex; align-items: center; gap: 10px; font-size: 13.5px;
            font-weight: 500; box-shadow: var(--sh-lg); z-index: 2000;
            transform: translateY(80px); opacity: 0; transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
        }
        .toast.show { transform: translateY(0); opacity: 1; }

        @media (max-width: 900px) {
            .login-left { display: none; }
            .login-right { width: 100%; }
        }

        @media (max-width: 480px) {
            .modal { width: 95%; }
            .login-right { padding: 32px 24px; }
            .form-grid { grid-template-columns: 1fr; }
        }