:root{--shadow:0 20px 55px #18203014}
[data-theme=dark]{--shadow:0 24px 65px #0005}
.auth-page{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 15%,color-mix(in srgb,var(--accent) 9%,var(--bg)),var(--bg) 44%)}
.auth-page .wrap{width:min(100%,420px)}
.auth-page .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.auth-page .back{color:var(--muted);text-decoration:none;font-size:13px}
.auth-page .theme{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer}
.auth-page .theme svg{width:19px}
.auth-page .card{padding:34px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow)}
.auth-page .mark{width:52px;height:52px;margin-bottom:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#ff8b3d);color:#211707}
.auth-page .mark svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.auth-page h1{margin:0 0 8px;font-size:29px;letter-spacing:-.055em}
.auth-page p{margin:0 0 24px;color:var(--muted);font-size:14px}
.auth-page .google{width:100%;height:50px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.auth-page .google svg{width:18px;height:18px}
.auth-page .status{display:none;margin:12px 0 0;text-align:center;color:var(--muted);font-size:11px}
.auth-page .divider{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--muted);font-size:11px}
.auth-page .divider::before,.auth-page .divider::after{content:"";height:1px;flex:1;background:var(--line)}
.auth-page .field{display:grid;gap:8px;margin-top:16px}
.auth-page .field label{font-size:12px;font-weight:800}
.auth-page .input-wrap{position:relative}
.auth-page .field input{width:100%;height:50px;border:1px solid var(--line);border-radius:13px;padding:0 14px;background:var(--soft);color:var(--text);font:inherit;font-size:14px;outline:none}
.auth-page .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.auth-page .field input::placeholder{color:var(--muted)}
.auth-page .password input{padding-right:54px}
.auth-page .show{position:absolute;right:8px;top:7px;height:36px;border:0;border-radius:9px;padding:0 8px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;outline:none;box-shadow:none}
.auth-page .show:hover,.auth-page .show:active,.auth-page .show:focus{background:transparent;box-shadow:none;outline:none}
.auth-page .show:focus-visible{color:var(--text);outline:1px solid var(--accent);outline-offset:1px}
.auth-page .submit{width:100%;height:50px;margin-top:24px;border:0;border-radius:13px;background:var(--accent);color:#201608;font:inherit;font-weight:900;cursor:pointer}
.auth-page .submit:hover{filter:brightness(1.03)}
.auth-page .submit:active{filter:none}
.auth-page .signup,.auth-page .login{text-align:center;margin:20px 0 0;font-size:13px;color:var(--muted)}
.auth-page .signup a,.auth-page .login a{margin-left:5px;color:var(--text);font-weight:850;text-decoration:none}
.auth-page .back:active,.auth-page .theme:active,.auth-page .google:active,.auth-page .show:active,.auth-page .submit:active,.auth-page .signup a:active,.auth-page .login a:active{box-shadow:none;filter:none}
@media(max-width:520px){.auth-page{padding:16px}.auth-page .card{padding:26px 20px;border-radius:20px}.auth-page .mark{width:46px;height:46px;margin-bottom:20px}.auth-page .mark svg{width:21px}.auth-page h1{font-size:26px}}