@layer theme,base;@layer components{.auth-card{background:var(--color-white);border:1px solid var(--color-line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);justify-self:end;width:100%;max-width:480px;padding:clamp(32px,3vw,44px)}.auth-card :is(h1,h2)[tabindex="-1"]{outline:none}.form-alert{border:1px solid color-mix(in srgb, var(--color-danger) 18%, transparent);border-radius:var(--radius-md);background:var(--color-danger-bg);color:var(--color-ink);font-size:var(--text-ui);grid-template-columns:20px minmax(0,1fr);gap:12px;margin-bottom:24px;padding:16px 20px;line-height:1.6;display:grid}.form-alert svg{width:18px;height:18px;color:var(--color-danger);margin-top:3px}.text-link{color:var(--color-accent-deep);text-underline-offset:3px;font-weight:500;text-decoration:underline}.auth-card h2{font-size:var(--text-h3);letter-spacing:-.02em}.card-sub{font-size:var(--text-ui);color:var(--color-ink-2);margin-top:12px;line-height:1.55}.card-sub b{color:var(--color-ink);overflow-wrap:anywhere;font-weight:600}.auth-form{margin-top:28px}.field label,.field-legend,.otp-label{font:500 var(--text-small) / 1 var(--font-body);letter-spacing:.01em;margin-bottom:12px;display:block}.field input:is([type=email],[type=text]){border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-paper);width:100%;height:56px;font:400 var(--text-ui) / 1 var(--font-body);color:var(--color-ink);transition:background-color .22s var(--ease-soft);padding:0 20px}.field input::placeholder{color:var(--color-ink-3)}.field input:focus{background:var(--color-white)}.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--color-danger)}.field textarea{field-sizing:content;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-paper);width:100%;min-height:112px;max-height:240px;font:400 var(--text-ui) / 1.5 var(--font-body);color:var(--color-ink);resize:vertical;transition:background-color .22s var(--ease-soft);padding:16px 20px;display:block}.field textarea:focus{background:var(--color-white)}.field-hint{font-size:var(--text-small);color:var(--color-ink-3);margin-top:8px;line-height:1.5}.auth-form :is(.field,.pick-field)+:is(.field,.pick-field){margin-top:24px}.form-fields,.form-fields fieldset{min-width:0}.auth-form .form-fields{margin-top:24px}.sent-list{border-top:1px solid var(--color-line-soft);margin-top:20px}.sent-list>div{border-bottom:1px solid var(--color-line-soft);font-size:var(--text-small);grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;line-height:1.5;display:grid}.sent-list dt{color:var(--color-ink-3)}.sent-list dd{color:var(--color-ink);white-space:pre-line;overflow-wrap:anywhere}.form-msg{font-size:var(--text-small);min-height:1.5em;margin-top:16px;line-height:1.5}.form-msg:empty{min-height:0;margin-top:0}.form-msg.is-err{color:var(--color-danger)}.form-msg.is-ok{color:var(--color-accent-deep)}.consent{border:0;flex-direction:column;gap:12px;margin-top:20px;display:flex}.check{font-size:var(--text-small);color:var(--color-ink-2);cursor:pointer;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px;line-height:1.5;display:grid}.check input{appearance:none;border-radius:var(--radius-xs);border:1.5px solid var(--color-ink-4);background:var(--color-white);cursor:pointer;place-items:center;width:20px;height:20px;margin-top:1px;transition:background .12s linear,border-color .12s linear;display:grid}.check input:checked{background:var(--color-ink);border-color:var(--color-ink)}.check input:checked:after{content:"";border:2px solid var(--color-white);border-top:0;border-right:0;width:9px;height:5px;transform:rotate(-45deg)translate(1px,-1px)}.check input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.check a,.terms-note a{color:var(--color-accent-deep);text-underline-offset:3px;text-decoration:underline}.terms-note{font-size:var(--text-small);color:var(--color-ink-2);margin-top:16px;line-height:1.5}.otp{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.2vw,12px);display:grid}.otp input{border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-paper);text-align:center;width:100%;height:60px;font:500 var(--text-title) / 1 var(--font-mono);color:var(--color-ink);caret-color:var(--color-accent);transition:background-color .22s var(--ease-soft)}.otp input:focus{background:var(--color-white)}.otp.is-err input{border-color:var(--color-danger);background:var(--color-danger-bg)}.otp.shake,.field.shake{animation:shake .42s var(--ease-soft)}.code-links{flex-wrap:wrap;gap:8px 24px;margin-top:20px;display:flex}.text-btn{font:500 var(--text-small) / 1.4 var(--font-body);color:var(--color-accent-deep);text-underline-offset:3px;text-decoration:underline}.text-btn:disabled{color:var(--color-ink-3);cursor:not-allowed;text-decoration:none}.back-btn{margin-top:20px}.devices{border:0;flex-direction:column;gap:12px;display:flex}.device{border-radius:var(--radius-md);border:1px solid var(--color-line);cursor:pointer;transition:background-color .22s var(--ease-soft);grid-template-columns:44px minmax(0,1fr);align-items:center;gap:16px;padding:16px;display:grid;position:relative}@media (hover:hover){.device:hover{background:var(--color-paper-2)}}.device input{opacity:0;cursor:pointer;position:absolute;inset:0}.device.is-picked{border-color:var(--color-ink);background:var(--color-paper);box-shadow:inset 0 0 0 1px var(--color-ink)}.device:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}.dev-ic{border-radius:var(--radius-sm);background:var(--color-ice);width:44px;height:44px;color:var(--color-accent-deep);place-items:center;display:grid}.dev-ic svg{width:21px;height:21px}.dev-t b{font:500 var(--text-ui) / 1.3 var(--font-body);display:block}.dev-t small{font-size:var(--text-caption);color:var(--color-ink-3);margin-top:2px;display:block}.confirm{border-radius:var(--radius-md);background:var(--color-warning-bg);font-size:var(--text-small);color:var(--color-ink);margin-top:20px;padding:16px;line-height:1.55}.confirm-btns{gap:12px;margin-top:12px;display:flex}.done-ic{background:var(--color-success-bg);width:56px;height:56px;color:var(--color-success);border-radius:50%;place-items:center;margin-bottom:20px;display:grid}.done-ic svg{width:26px;height:26px}@media (width<=1080px){.auth-card{justify-self:start;max-width:560px}}@media (width<=640px){.otp input{border-radius:var(--radius-sm);height:54px}}@media (prefers-reduced-motion:reduce){.otp.shake,.field.shake{animation:none}}}@layer utilities;@keyframes shake{20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}
