:root { --bg:#0b0f19; --surface:#111827; --ink:#1a2332; --border:#1f2937; --text:#f1f5f9; --muted:#94a3b8; --accent:#38bdf8; --accent-2:#818cf8; }
    .auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--bg); position:relative; }
    .auth-page::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%, rgba(56,189,248,0.08) 0%, transparent 50%); pointer-events:none; }
    .auth-card { width:100%; max-width:460px; background:var(--surface); border:1px solid var(--border); border-radius:1.25rem; padding:2.5rem; position:relative; z-index:1; }
    .auth-card .logo { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.5rem; font-size:1.5rem; font-weight:700; color:var(--text); }
    .auth-card .logo i { color:var(--accent); }
    .auth-card h1 { font-size:1.5rem; font-weight:600; margin-bottom:0.5rem; color:var(--text); }
    .auth-card .subtitle { color:var(--muted); font-size:0.9rem; margin-bottom:2rem; }
    .form-group { margin-bottom:1.25rem; }
    .form-group label { display:block; font-size:0.8rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:0.4rem; }
    .form-group label .required { color:#ef4444; }
    .form-group input { width:100%; padding:0.85rem 1rem; background:var(--ink); border:1px solid var(--border); border-radius:0.6rem; color:var(--text); font-size:0.95rem; transition:all 0.2s; }
    .form-group input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,189,248,0.1); }
    .auth-btn { width:100%; padding:0.9rem; background:var(--accent); color:#0f172a; font-weight:600; border:none; border-radius:0.6rem; font-size:1rem; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
    .auth-btn:hover { background:var(--accent-2); }
    .auth-btn:disabled { opacity:0.6; cursor:not-allowed; }
    .auth-footer { text-align:center; margin-top:1.5rem; color:var(--muted); font-size:0.9rem; }
    .auth-footer a { color:var(--accent); text-decoration:none; font-weight:500; }
    .alert { padding:0.85rem 1rem; border-radius:0.6rem; margin-bottom:1rem; font-size:0.9rem; display:none; align-items:center; gap:0.6rem; }
    .alert.show { display:flex; }
    .alert-error { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:#f87171; }
    .alert-success { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); color:#4ade80; }
    .back-link { display:inline-flex; align-items:center; gap:0.4rem; color:var(--muted); text-decoration:none; font-size:0.85rem; margin-bottom:1.5rem; transition:color 0.2s; }
    .back-link:hover { color:var(--text); }
    .type-select { display:grid; grid-template-columns:repeat(2, 1fr); gap:0.75rem; margin-bottom:1.25rem; max-height:300px; overflow-y:auto; }
    .type-option { padding:1rem; border:1px solid var(--border); border-radius:0.6rem; cursor:pointer; text-align:center; transition:all 0.2s; color:var(--muted); }
    .type-option:hover { border-color:var(--accent); color:var(--text); }
    .type-option.selected { border-color:var(--accent); background:rgba(56,189,248,0.1); color:var(--text); }
    .type-option i { font-size:1.5rem; margin-bottom:0.5rem; display:block; color:var(--accent); }
    .type-option span { font-size:0.8rem; font-weight:500; display:block; }
    .password-strength { height:4px; background:var(--border); border-radius:2px; margin-top:0.5rem; overflow:hidden; }
    .password-strength-bar { height:100%; width:0; transition:all 0.3s; border-radius:2px; }
    .strength-weak { background:#ef4444; width:33%; }
    .strength-medium { background:#f59e0b; width:66%; }
    .strength-strong { background:#22c55e; width:100%; }
    .loading { text-align:center; padding:2rem; color:var(--muted); }
    .loading i { font-size:2rem; animation:spin 1s linear infinite; }
    @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }