*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth;font-size:16px}
        body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#000;color:#fff;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}

        :root{
            --primary:#00ffaa;
            --secondary:#0077ff;
            --accent:#ff8800;
            --bg:#000;
            --card:rgba(17,17,17,0.85);
            --muted:#9ca3af;
            --border:rgba(255,255,255,0.08);
            --radius-sm:0.5rem;
            --radius-md:1rem;
            --radius-lg:1.5rem;
            --radius-full:9999px;
            --shadow-glow:0 0 40px rgba(0,255,170,0.2);
            --transition:.3s ease;
        }

        /* CANVAS BG */
        #vortex-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:.6;pointer-events:none}

        /* LAYOUT */
        .page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

        /* NAV */
        .nav{padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between}
        .nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}
        .nav-logo img{height:80px;width:auto}
        .nav-back{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.875rem;font-weight:500;text-decoration:none;transition:var(--transition);border:1px solid var(--border);padding:.5rem 1rem;border-radius:var(--radius-full)}
        .nav-back:hover{color:var(--primary);border-color:rgba(0,255,170,0.3)}
        .nav-back svg{width:16px;height:16px;transition:var(--transition)}
        .nav-back:hover svg{transform:translateX(-3px)}

        /* MAIN */
        .main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}

        /* CARD */
        .auth-card{width:100%;max-width:460px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 32px 80px rgba(0,0,0,0.6),var(--shadow-glow);position:relative;overflow:hidden}
        .auth-card::before{content:'';position:absolute;top:-80px;right:-80px;width:220px;height:220px;background:radial-gradient(circle,rgba(0,255,170,0.08),transparent 70%);border-radius:50%;pointer-events:none}
        .auth-card::after{content:'';position:absolute;bottom:-60px;left:-60px;width:180px;height:180px;background:radial-gradient(circle,rgba(0,119,255,0.06),transparent 70%);border-radius:50%;pointer-events:none}

        /* HEADER CARD */
        .auth-header{text-align:center;margin-bottom:2rem}
        .auth-icon{width:56px;height:56px;background:rgba(0,255,170,0.1);border:1px solid rgba(0,255,170,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
        .auth-icon svg{width:26px;height:26px;color:var(--primary)}
        .auth-title{font-size:1.75rem;font-weight:800;margin-bottom:.4rem;letter-spacing:-.02em}
        .auth-subtitle{color:var(--muted);font-size:.9rem}

        /* TABS */
        .auth-tabs{display:flex;background:rgba(0,0,0,0.4);border-radius:var(--radius-full);padding:4px;margin-bottom:2rem;border:1px solid var(--border)}
        .auth-tab{flex:1;padding:.6rem 1rem;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:.875rem;font-weight:600;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition)}
        .auth-tab.active{background:var(--primary);color:#000}
        .auth-tab:not(.active):hover{color:#fff}

        /* PANELS */
        .auth-panel{display:none}
        .auth-panel.active{display:block;animation:fadeSlide .35s ease}
        @keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

        /* FORM */
        .form-group{margin-bottom:1.25rem}
        .form-label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.04em}
        .form-input-wrap{position:relative}
        .form-input-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:#555;width:18px;height:18px;pointer-events:none;transition:var(--transition)}
        .form-input{width:100%;padding:.85rem 1rem .85rem 2.75rem;background:rgba(0,0,0,0.5);border:1px solid #222;border-radius:var(--radius-md);color:#fff;font-family:inherit;font-size:.95rem;transition:var(--transition)}
        .form-input::placeholder{color:#444}
        .form-input:focus{outline:none;border-color:var(--primary);background:rgba(0,0,0,0.7);box-shadow:0 0 0 3px rgba(0,255,170,0.08)}
        .form-input:focus~.form-input-icon,.form-input-wrap:focus-within .form-input-icon{color:var(--primary)}

        /* Password toggle */
        .form-input-wrap .toggle-pw{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#555;cursor:pointer;padding:0;transition:var(--transition);display:flex;align-items:center}
        .form-input-wrap .toggle-pw:hover{color:var(--primary)}
        .form-input-wrap .toggle-pw svg{width:18px;height:18px}
        .form-input.has-toggle{padding-right:2.75rem}

        /* PASSWORD STRENGTH */
        .pw-strength{margin-top:.5rem;display:none}
        .pw-strength.visible{display:block}
        .pw-strength-bar{height:3px;background:#1a1a1a;border-radius:2px;overflow:hidden;margin-bottom:.35rem}
        .pw-strength-fill{height:100%;width:0;border-radius:2px;transition:.4s ease}
        .pw-strength-fill.weak{width:33%;background:#ef4444}
        .pw-strength-fill.medium{width:66%;background:var(--accent)}
        .pw-strength-fill.strong{width:100%;background:var(--primary)}
        .pw-strength-label{font-size:.75rem;color:var(--muted)}

        /* CHECKBOX */
        .form-check{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem}
        .form-check-input{width:18px;height:18px;accent-color:var(--primary);flex-shrink:0;margin-top:1px;cursor:pointer}
        .form-check-label{font-size:.8rem;color:var(--muted);line-height:1.5}
        .form-check-label a{color:var(--primary);text-decoration:none}
        .form-check-label a:hover{text-decoration:underline}

        /* FORGOT */
        .form-forgot{display:block;text-align:right;font-size:.8rem;color:var(--muted);text-decoration:none;margin-top:-.75rem;margin-bottom:1.25rem;transition:var(--transition)}
        .form-forgot:hover{color:var(--primary)}

        /* SUBMIT */
        .btn-submit{width:100%;padding:.95rem;background:var(--primary);color:#000;font-family:inherit;font-size:.95rem;font-weight:700;border:none;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}
        .btn-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transform:translateX(-100%);transition:.6s ease}
        .btn-submit:hover{transform:scale(1.02);box-shadow:0 0 30px rgba(0,255,170,0.35)}
        .btn-submit:hover::before{transform:translateX(100%)}
        .btn-submit:active{transform:scale(0.98)}
        .btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
        .btn-submit-inner{display:flex;align-items:center;justify-content:center;gap:.5rem}

        /* LOADER */
        .spinner{width:18px;height:18px;border:2px solid rgba(0,0,0,0.3);border-top-color:#000;border-radius:50%;animation:spin .7s linear infinite;display:none}
        @keyframes spin{to{transform:rotate(360deg)}}
        .loading .spinner{display:block}
        .loading .btn-label{display:none}

        /* DIVIDER */
        .divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:#333;font-size:.75rem}
        .divider::before,.divider::after{content:'';flex:1;height:1px;background:#1e1e1e}

        /* SOCIAL BTNS */
        .social-btns{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
        .btn-social{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:rgba(255,255,255,0.04);border:1px solid #222;border-radius:var(--radius-md);color:#ccc;font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:var(--transition)}
        .btn-social:hover{background:rgba(255,255,255,0.08);border-color:#333;color:#fff}
        .btn-social svg{width:18px;height:18px}

        /* MESSAGE */
        .form-message{padding:.875rem 1rem;border-radius:var(--radius-md);font-size:.85rem;font-weight:500;margin-bottom:1.25rem;display:none;animation:fadeSlide .3s ease}
        .form-message.success{display:block;background:rgba(0,255,170,0.08);border:1px solid rgba(0,255,170,0.25);color:var(--primary)}
        .form-message.error{display:block;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);color:#f87171}

        /* FOOTER */
        .auth-footer{margin-top:1.5rem;text-align:center;color:var(--muted);font-size:.8rem}
        .auth-footer a{color:var(--primary);text-decoration:none}
        .auth-footer a:hover{text-decoration:underline}

        /* PAGE FOOTER */
        .footer{padding:1.5rem 2rem;text-align:center;color:#333;font-size:.75rem;border-top:1px solid var(--border)}

        /* RESPONSIVE */
        @media(max-width:480px){
            .nav{padding:1rem}
            .auth-card{padding:1.75rem 1.25rem}
            .auth-title{font-size:1.4rem}
            .social-btns{grid-template-columns:1fr}
        }

        /* Focus visible */
        :focus-visible{outline:2px solid var(--primary);outline-offset:2px}