@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background-color:var(--body-bg)}.auth__container{width:100%;max-width:28rem;margin:0 auto}@supports (background-color: light-dark()){.auth__card{background-color:var(--card-bg, light-dark(#fff, #222));border:1px solid var(--card-border, light-dark(#e0e0e0, #555))}}.auth__card{border-radius:1rem;box-shadow:0 8px 16px var(--card-shadow);padding:3rem;transition:all .25s var(--ease-out-3)}@media(width<=640px){.auth__card{padding:2rem}}.auth__title{font-size:1.875rem;font-weight:700;text-align:center;margin:0 0 .5rem;color:var(--card-text);line-height:1.25}.auth__subtitle{font-size:1rem;text-align:center;margin:0 0 2rem;color:hsl(from var(--card-text) h s l/60%);line-height:1.5}.auth__form{display:flex;flex-direction:column;gap:1.5rem}.auth__button{width:100%;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;color:#fff;background-image:linear-gradient(135deg,#28b0a9,#1f8670);border:none;border-radius:.5rem;cursor:pointer;transition:transform .25s var(--ease-out-3),opacity .25s var(--ease-out-3),box-shadow .25s var(--ease-out-3);box-shadow:0 2px 4px #00000014;outline:none}.auth__button:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.auth__button:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.auth__button:focus-visible{outline:2px solid #28b0a9;outline-offset:2px}.auth__button:disabled{opacity:.5;cursor:not-allowed;transform:none}.auth__divider{display:flex;align-items:center;text-align:center;margin:1.5rem 0;color:hsl(from var(--card-text) h s l/50%);font-size:.875rem}.auth__divider:before,.auth__divider:after{content:"";flex:1}@supports (border-color: light-dark()){.auth__divider:before,.auth__divider:after{border-bottom:1px solid var(--card-border, light-dark(#e0e0e0, #555))}}.auth__divider span{padding:0 1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{font-size:.875rem;font-weight:500;color:var(--card-text);margin:0}.form-input{width:100%;padding:.75rem 1rem;font-size:1rem;line-height:1.5;color:var(--card-text)}@supports (background-color: light-dark()){.form-input{background-color:hsl(from var(--card-bg, light-dark(#fff, #222)) h s calc(l + 2%))}}.form-input{border:1px solid var(--input-border);border-radius:.5rem;transition:color .25s var(--ease-out-3),background-color .25s var(--ease-out-3),border-color .25s var(--ease-out-3),border-color .25s var(--ease-out-3),box-shadow .25s var(--ease-out-3);outline:none}.form-input::placeholder{color:hsl(from var(--card-text) h s l/40%)}.form-input:focus{border-color:#28b0a9;box-shadow:0 0 0 3px hsl(from #28b0a9 h s l/15%)}.form-input:disabled{opacity:.5;cursor:not-allowed}.error-message{padding:.75rem 1rem;background-color:#ffebeb;color:#a32929;border:1px solid hsl(0,100%,90%);border-radius:.5rem;font-size:.875rem;line-height:1.5;margin-top:-.75rem}@media(prefers-color-scheme:dark){.error-message{background-color:#471f1f;color:#fcc;border-color:#6b2e2e}}.social-buttons{display:flex;flex-direction:column;gap:1rem}.social-button{width:100%;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;color:var(--card-text);text-decoration:none}@supports (background-color: light-dark()){.social-button{background-color:hsl(from var(--card-bg, light-dark(#fff, #222)) h s calc(l + 2%));border:1px solid var(--card-border, light-dark(#e0e0e0, #555))}}.social-button{border-radius:.5rem;cursor:pointer;transition:color .25s var(--ease-out-3),background-color .25s var(--ease-out-3),border-color .25s var(--ease-out-3),border-color .25s var(--ease-out-3),box-shadow .25s var(--ease-out-3),transform .25s var(--ease-out-3);box-shadow:0 1px 2px #0000000d;outline:none;display:flex;align-items:center;justify-content:center;gap:.75rem}.social-button svg{width:18px;height:18px;flex-shrink:0}@supports (background-color: light-dark()){.social-button:hover{background-color:hsl(from var(--card-bg, light-dark(#fff, #222)) h s calc(l - 2%));border-color:hsl(from var(--card-border, light-dark(#e0e0e0, #555)) h s calc(l - 10%))}}.social-button:hover{box-shadow:0 2px 4px #00000014;transform:translateY(-1px)}.social-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.social-button:focus-visible{outline:2px solid #28b0a9;outline-offset:2px}.social-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.footer-links{margin-top:1.5rem;text-align:center}.footer-links p{margin:0;font-size:.875rem;color:hsl(from var(--card-text) h s l/60%);line-height:1.5}.footer-link{color:#28b0a9;text-decoration:none;font-weight:500;transition:color .25s var(--ease-out-3),background-color .25s var(--ease-out-3),border-color .25s var(--ease-out-3)}.footer-link:hover{color:#1f8670;text-decoration:underline}.footer-link:focus-visible{outline:2px solid #28b0a9;outline-offset:2px;border-radius:.25rem}.loading-spinner{width:40px;height:40px;margin:2rem auto}@supports (border-color: light-dark()){.loading-spinner{border:4px solid hsl(from var(--card-border, light-dark(#e0e0e0, #555)) h s l/30%)}}.loading-spinner{border-top:4px solid #28b0a9;border-radius:100vw;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(width<=640px){.auth-page{padding:1rem}.auth__title{font-size:1.5rem}.auth__subtitle{font-size:.875rem}}.form-btns{--border-size: .1em;display:grid;grid-template-columns:repeat(auto-fit,minmax(10em,1fr));gap:calc(var(--border-size) * 7);margin-block:1em;max-width:max-content}.btn.lite{--border-size: .1em;padding:.2em .4em;margin-block:0}
