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

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            position: relative;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background:
                radial-gradient(ellipse at 20% 50%, rgba(67, 97, 238, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(13, 202, 136, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 60% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
        }

        .auth-wrapper {
            display: flex;
            width: 100%;
            max-width: 960px;
            min-height: 540px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
            position: relative;
            z-index: 1;
        }

        /* === Brand Panel (Left) === */
        .brand-panel {
            flex: 1;
            background: linear-gradient(160deg, #1a1f3c 0%, #0d1b3e 50%, #162447 100%);
            padding: 48px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .brand-panel::before {
            content: '';
            position: absolute;
            top: -100px; left: -100px;
            width: 350px; height: 350px;
            background: radial-gradient(circle, rgba(67, 97, 238, 0.3) 0%, transparent 70%);
            border-radius: 50%;
        }

        .brand-panel::after {
            content: '';
            position: absolute;
            bottom: -120px; right: -80px;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(13, 202, 140, 0.15) 0%, transparent 70%);
            border-radius: 50%;
        }

        .brand-panel > * { position: relative; z-index: 1; }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 32px;
        }

        .brand-icon {
            width: 52px; height: 52px;
            background: linear-gradient(135deg, #4361ee, #3a86ff);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(67, 97, 238, 0.4);
        }

        .brand-icon svg { width: 26px; height: 26px; color: #fff; }

        .brand-name {
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .brand-title {
            color: #ffffff;
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .brand-desc {
            color: rgba(255, 255, 255, 0.55);
            font-size: 14px;
            line-height: 1.8;
            margin-bottom: 40px;
        }

        .feature-list { list-style: none; }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 14px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            margin-bottom: 18px;
            padding: 10px 14px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
        }

        .feature-list li:last-child { margin-bottom: 0; }

        .feature-icon {
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .feature-icon svg { width: 16px; height: 16px; }

        .feature-icon.blue { background: rgba(67, 97, 238, 0.2); color: #60a5fa; }
        .feature-icon.green { background: rgba(13, 202, 136, 0.2); color: #34d399; }
        .feature-icon.orange { background: rgba(240, 140, 0, 0.2); color: #fbbf24; }
        .feature-icon.purple { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }

        /* === Form Panel (Right) === */
        .form-panel {
            flex: 1;
            background: #ffffff;
            padding: 48px 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .form-panel::before {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 200px; height: 200px;
            background: radial-gradient(circle, rgba(67, 97, 238, 0.06) 0%, transparent 70%);
            border-radius: 0 0 0 200px;
        }

        .form-panel > * { position: relative; z-index: 1; }

        /* === Mobile Responsive === */
        @media (max-width: 768px) {
            body {
                padding: 0;
                height: 100vh;
                height: 100dvh;
                align-items: stretch;
                justify-content: flex-start;
            }
            body::before { display: none; }
            .auth-wrapper {
                width: 100%;
                max-width: 100%;
                height: 100vh;
                height: 100dvh;
                border-radius: 0;
                box-shadow: none;
                flex-direction: column;
            }
            .brand-panel { display: none !important; }
            .form-panel {
                flex: 1;
                padding: 32px 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .form-panel::before { display: none; }
            .toast-container { top: auto; bottom: 24px; left: 16px; right: 16px; }
        }

        @media (max-width: 480px) {
            .form-panel { padding: 28px 20px; }
        }

/* Toast Notifications */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); font-size: 14px; font-weight: 500; transform: translateX(120%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-width: 280px; max-width: 420px; }
.toast.show { transform: translateX(0); }
.toast-icon { width: 20px; height: 20px; flex-shrink: 0; }
.toast-icon svg { width: 100%; height: 100%; }
.toast-msg { flex: 1; }
.toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast-success .toast-icon { color: #10b981; }
.toast-error, .toast-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.toast-error .toast-icon, .toast-danger .toast-icon { color: #ef4444; }
.toast-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.toast-info .toast-icon { color: #3b82f6; }
@media (max-width: 480px) { .toast-container { right: 10px; left: 10px; } .toast { min-width: auto; max-width: 100%; } }
/* Dark mode */
[data-theme="dark"] .form-panel{background:#1a1d2e}
[data-theme="dark"] .form-panel h2{color:#e5e7eb}
[data-theme="dark"] .form-panel p{color:#94a3b8}
[data-theme="dark"] .form-group label{color:#cbd5e1}
[data-theme="dark"] .form-group input{background:#252836;color:#e5e7eb;border-color:#3a3d4e}
[data-theme="dark"] .form-group input:focus{background:#2a2d3e;border-color:#6366f1}
[data-theme="dark"] .toast-success{background:#064e3b;color:#a7f3d0;border-color:#047857}
[data-theme="dark"] .toast-error,.toast-danger{background:#7f1d1d;color:#fecaca;border-color:#dc2626}
[data-theme="dark"] .toast-info{background:#1e3a5f;color:#93c5fd;border-color:#3b82f6}