@import "https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Serif+Display&display=swap";
.auth-container{--bg:#0e0e10;--surface:#18181b;--surface2:#222228;--border:#ffffff14;--border2:#ffffff24;--accent:#e8ff47;--accent-dim:#e8ff471a;--accent-dim2:#e8ff472e;--text:#f0f0f0;--muted:#fff9;--muted2:#888890;--correct:#4ade80;--wrong:#f87171;--font-mono:"Space Mono", monospace;--font-serif:"DM Serif Display", serif;background:var(--bg);color:var(--text);font-family:var(--font-mono);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.auth-container:before{content:"";background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);pointer-events:none;z-index:0;background-size:48px 48px;position:absolute;inset:0}.auth-container:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#e8ff4712 0%,#0000 70%);border-radius:50%;width:520px;height:520px;position:absolute;top:-120px;right:-120px}.wrapper{z-index:1;width:100%;max-width:420px;padding:20px;position:relative}.brand{text-align:center;margin-bottom:32px;animation:.5s both fadeDown}.brand-name{font-family:var(--font-serif);color:var(--accent);letter-spacing:-.5px;font-size:2rem}.brand-tag{color:var(--muted2);letter-spacing:.18em;text-transform:uppercase;margin-top:4px;font-size:.65rem}.card{background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:36px 32px 32px;animation:.5s .1s both fadeUp;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);height:2px;position:absolute;top:0;left:0;right:0}.tabs{background:var(--surface2);border:1px solid var(--border);border-radius:10px;grid-template-columns:1fr 1fr;margin-bottom:28px;padding:4px;display:grid}.tab-btn{color:var(--muted2);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-radius:7px;padding:9px 12px;font-size:.72rem;transition:all .22s}.tab-btn.active{background:var(--accent);color:#0e0e10;font-weight:700}.field{margin-bottom:16px;animation:.35s both fadeUp}.field:first-child{animation-delay:50ms}.field:nth-child(2){animation-delay:.1s}.field:nth-child(3){animation-delay:.15s}.field:nth-child(4){animation-delay:.2s}label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px;font-size:.65rem;display:block}input{background:var(--surface2);border:1px solid var(--border2);width:100%;color:var(--text);font-family:var(--font-mono);border-radius:9px;outline:none;padding:11px 14px;font-size:.85rem;transition:border-color .2s,box-shadow .2s,background .2s}input::placeholder{color:var(--muted2)}input:focus{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px var(--accent-dim)}input.error{border-color:var(--wrong);box-shadow:0 0 0 3px #f871711f}input.success{border-color:var(--correct);box-shadow:0 0 0 3px #4ade801a}.input-wrap{position:relative}.toggle-pw{cursor:pointer;color:var(--muted2);letter-spacing:.06em;font-size:.78rem;font-family:var(--font-mono);background:0 0;border:none;padding:0;transition:color .2s;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.toggle-pw:hover{color:var(--accent)}.field-msg{letter-spacing:.04em;min-height:14px;margin-top:5px;font-size:.63rem}.field-msg.err{color:var(--wrong)}.field-msg.ok{color:var(--correct)}.strength-bar{gap:4px;margin-top:7px;display:flex}.strength-seg{background:var(--border2);border-radius:99px;flex:1;height:3px;transition:background .3s}.options-row{justify-content:space-between;align-items:center;margin-top:-4px;margin-bottom:22px;display:flex}.remember{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none;align-items:center;gap:7px;font-size:.7rem;display:flex}.remember input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;border:none;border-radius:3px;padding:0}.forgot{color:var(--muted2);font-size:.7rem;text-decoration:none;transition:color .2s}.forgot:hover{color:var(--accent)}.btn-primary{background:var(--accent);color:#0e0e10;width:100%;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:none;border-radius:9px;padding:13px;font-size:.78rem;font-weight:700;transition:opacity .2s,transform .15s,box-shadow .2s;position:relative;overflow:hidden}.btn-primary:hover{opacity:.9;box-shadow:0 0 24px var(--accent-dim2);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary .spinner{border:2px solid #0000004d;border-top-color:#0e0e10;border-radius:50%;width:15px;height:15px;margin:0 auto;animation:.7s linear infinite spin;display:none}.btn-primary.loading .btn-text{display:none}.btn-primary.loading .spinner{display:block}.divider{color:var(--muted2);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:12px;margin:20px 0;font-size:.62rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border2);flex:1;height:1px}.oauth-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.btn-oauth{background:var(--surface2);border:1px solid var(--border2);color:var(--muted);font-family:var(--font-mono);letter-spacing:.06em;cursor:pointer;text-transform:uppercase;border-radius:9px;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:.68rem;transition:border-color .2s,color .2s,background .2s;display:flex}.btn-oauth:hover{border-color:var(--border2);background:var(--accent-dim);color:var(--accent)}.btn-oauth svg{flex-shrink:0;width:15px;height:15px}.terms-note{text-align:center;color:var(--muted2);margin-top:16px;font-size:.61rem;line-height:1.6}.terms-note a{color:var(--muted);text-decoration:none;transition:color .2s}.terms-note a:hover{color:var(--accent)}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}
