:root{color-scheme:dark;--bg:#111212;--surface:#171819;--line:#303334;--text:#f4f4f1;--muted:#969a9a;--red:#e8323a;--font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;background:var(--bg)}
body{font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased}
.auth-page{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;overflow:hidden;padding:92px 20px 72px;background:radial-gradient(ellipse at 50% 41%,#222425 0%,#171819 36%,#111212 74%)}
.brand{position:absolute;z-index:2;top:34px;left:clamp(24px,6vw,88px);color:#f4f4f1;text-decoration:none;font-size:21px;font-weight:760;letter-spacing:-1px}
.brand span{color:var(--red)}
.ambient{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(2px)}
.ambient-one{width:510px;height:510px;top:-300px;right:-225px;border:1px solid #ffffff08}
.ambient-two{width:700px;height:700px;bottom:-590px;left:-280px;border:1px solid #ffffff06}
.auth-card{width:min(100%,420px);padding:36px 36px 28px;border:1px solid #303334;border-radius:8px;background:linear-gradient(155deg,#191b1c,#151718);box-shadow:0 24px 90px #0005}
.auth-heading{text-align:center;margin:0 0 27px}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;color:#919696;font-size:8px;font-weight:650;letter-spacing:.17em}
.eyebrow span{width:5px;height:5px;border-radius:50%;background:var(--red)}
.auth-heading h1{margin:0;color:#f3f3ef;font-size:29px;line-height:1.15;letter-spacing:-.055em;font-weight:620}
.auth-heading>p:last-child{margin:9px 0 0;color:#9a9e9d;font-size:12px}
.social-options{display:grid;gap:10px}
.social-button{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:46px;border-radius:4px;font:inherit;font-size:12px;font-weight:580;cursor:pointer;transition:transform .16s,border-color .16s,background .16s}
.social-button:hover{transform:translateY(-1px)}
.social-button svg{width:17px;height:18px;flex:none}
.google-button{border:1px solid #414546;background:#1c1e1f;color:#e8e9e6}
.google-button:hover{border-color:#656a6b;background:#222425}
.divider{display:flex;align-items:center;gap:11px;margin:23px 0 21px}
.divider span{height:1px;flex:1;background:#343839}
.divider p{margin:0;color:#858a89;font-size:8px;letter-spacing:.12em;white-space:nowrap}
#auth-form{display:grid;gap:9px}
.field-label{color:#d8dad7;font-size:10px;font-weight:560}
#email,#password,#confirm-password{width:100%;height:44px;padding:0 12px;border:1px solid #373b3c;border-radius:4px;outline:0;background:#121414;color:#f4f4f1;font:inherit;font-size:12px;transition:border-color .16s,box-shadow .16s}
#email::placeholder,#password::placeholder,#confirm-password::placeholder{color:#696e6e}
#email:focus,#password:focus,#confirm-password:focus{border-color:#9d3439;box-shadow:0 0 0 3px #e8323a17}
.password-label-row{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.password-label-row a{color:#b6b8b5;text-decoration:none;font-size:9px}
.password-label-row a:hover{color:#fff}
.confirm-field{display:grid;gap:9px;margin-top:7px}
.confirm-field[hidden]{display:none}
.submit-button{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;height:47px;margin-top:9px;border:0;border-radius:4px;background:var(--red);color:#fff;font:inherit;font-size:12px;font-weight:650;cursor:pointer;transition:background .16s,transform .16s}
.submit-button:hover{background:#f04047;transform:translateY(-1px)}
.arrow{font-size:18px;font-weight:350;line-height:1}
.status-message{min-height:16px;margin:12px 0 0;color:#c7a6a6;text-align:center;font-size:10px;line-height:1.45}
.status-message:empty{display:none}
.mode-switch{margin:20px 0 0;padding-top:18px;border-top:1px solid #303334;color:#9a9e9c;text-align:center;font-size:11px}
.mode-switch button{padding:0;border:0;background:none;color:#f0f0ed;font:inherit;font-weight:620;cursor:pointer}
.mode-switch button:hover{color:#ff5960}
.auth-footer{position:absolute;bottom:25px;left:clamp(24px,6vw,88px);right:clamp(24px,6vw,88px);display:flex;justify-content:space-between;color:#6f7474;font-size:8px;letter-spacing:.15em}
.auth-footer span:last-child{font-size:10px;letter-spacing:0}
button:focus-visible,a:focus-visible{outline:2px solid #ff777d;outline-offset:3px}
@media(max-width:520px){.auth-page{justify-content:flex-start;padding:100px 16px 70px}.brand{top:25px;left:22px;font-size:19px}.auth-card{padding:29px 22px 23px;border-radius:6px}.auth-heading{margin-bottom:23px}.auth-heading h1{font-size:27px}.social-button{height:45px}.auth-footer{bottom:17px;left:22px;right:22px}}
@media(max-height:700px) and (min-width:521px){.auth-page{padding-top:70px;padding-bottom:55px}.auth-card{padding-top:27px;padding-bottom:22px}.auth-heading{margin-bottom:18px}.divider{margin:16px 0}.auth-footer{bottom:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}