.auth-modal{position:fixed;inset:0;z-index:9001;height:fit-content;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:22px 24px 24px;border:1px solid var(--clr-border);border-radius:18px;background:var(--white,#fff);color:var(--clr-text);box-shadow:0 30px 70px -20px rgba(14,8,30,.45)}
.auth-modal[data-step=register]{width:min(580px,calc(100vw - 32px))}
.auth-modal[open]{animation:auth-in .22s cubic-bezier(.16,1,.3,1)}
.auth-backdrop{position:fixed;inset:0;z-index:9000;background:rgba(14,8,30,.55);backdrop-filter:blur(4px)}
@keyframes auth-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth-modal[open]{animation:none}}
html.auth-modal-open{overflow:hidden}
.auth-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.auth-modal-title{font-size:1.25rem;font-weight:800;margin:0;color:var(--clr-text)}
.auth-modal-close{flex-shrink:0;width:34px;height:34px;border:none;border-radius:50%;background:var(--clr-bg-alt);color:var(--clr-muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.auth-modal-close:hover{color:var(--clr-text)}
.auth-modal-close svg{width:18px;height:18px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--clr-bg-alt);border-radius:12px;margin-bottom:18px}
.auth-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:none;padding:9px 10px;border-radius:9px;font:inherit;font-size:.875rem;font-weight:700;color:var(--clr-muted);cursor:pointer}
.auth-tab svg{width:16px;height:16px}
.auth-tab.is-active{background:var(--white,#fff);color:var(--clr-primary);box-shadow:0 2px 8px -2px rgba(14,8,30,.18)}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.auth-span2{grid-column:1/-1}
.auth-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.auth-modal .login-input-wrap input{background:var(--white,#fff)}
#loginDropdown.auth-modal .login-link{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:4px;border:none;background:none;font:inherit;font-size:.85rem;color:var(--clr-primary);cursor:pointer}
#loginDropdown.auth-modal .login-link:hover{text-decoration:underline}
.auth-modal .btn-link{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;padding:8px;border:none;background:none;font:inherit;font-size:.8rem;color:var(--clr-primary);cursor:pointer}
.auth-modal .btn svg,.auth-modal .btn-link svg{width:16px;height:16px}
.auth-modal .btn.sb-w100{justify-content:center;padding:11px 16px}
.auth-consent{align-items:flex-start;line-height:1.45}
.auth-consent input{margin-top:2px;flex-shrink:0}
.auth-consent a{color:var(--clr-primary)}
.auth-done-icon{width:56px;height:56px;margin:4px auto 12px;border-radius:50%;background:#d1fae5;color:#059669;display:flex;align-items:center;justify-content:center}
.auth-done-icon svg{width:26px;height:26px}
html[data-theme=dark] .auth-done-icon{background:rgba(16,185,129,.18);color:#34d399}
.auth-done-msg{text-align:center;font-size:.9rem;line-height:1.5;color:var(--clr-text);margin:0 0 16px}
@media (max-width:480px){.auth-grid{grid-template-columns:1fr}.auth-modal{padding:18px 16px 20px}}
html[data-theme=dark] .auth-modal .login-code-input{background:repeating-linear-gradient(90deg,var(--clr-bg-alt) 0 var(--cw),transparent var(--cw) calc(var(--cw) + var(--cg)))!important;color:var(--clr-text)}
html[data-theme=dark] .auth-modal .login-error{color:#f87171}
.auth-modal [hidden],.auth-backdrop[hidden]{display:none!important}
.auth-modal .login-otp-msg{text-align:center}
.auth-code{position:relative;width:max-content;margin:8px auto 18px}
.auth-code-cells{display:grid;grid-template-columns:repeat(6,46px);gap:8px;pointer-events:none}
.auth-code-cells span{height:56px;border:1.5px solid var(--clr-border);border-radius:12px;background:var(--clr-bg-alt);display:flex;align-items:center;justify-content:center;font:700 1.5rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--clr-text);transition:border-color .15s ease,box-shadow .15s ease}
.auth-code-cells span.is-filled{border-color:var(--clr-primary)}
.auth-code-cells span.is-active{border-color:var(--clr-primary);box-shadow:0 0 0 4px rgba(124,58,237,.22)}
.auth-code-cells span.is-active:empty::after{content:"";width:2px;height:26px;background:var(--clr-primary);animation:auth-caret 1s step-end infinite}
@keyframes auth-caret{50%{opacity:0}}
.auth-code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font-size:16px;cursor:text}
.auth-modal [data-step=otp] .btn.sb-w100,.auth-modal [data-step=totp] .btn.sb-w100{margin-top:4px}
@media (max-width:400px){.auth-code-cells{grid-template-columns:repeat(6,40px);gap:6px}.auth-code-cells span{height:50px}}
.auth-modal .login-error{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:10px 12px;border:1px solid rgba(239,68,68,.35);border-radius:10px;background:rgba(239,68,68,.08);color:#b91c1c;font-size:.84rem;font-weight:600;line-height:1.4;text-align:left;animation:auth-pop .22s ease}
.auth-modal .login-error::before{content:"!";flex-shrink:0;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;font-size:.72rem;font-weight:800;line-height:18px;text-align:center}
.auth-modal .login-error:empty{display:none}
.auth-modal .login-error.is-info{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.1);color:#047857}
.auth-modal .login-error.is-info::before{content:"✓";background:#10b981}
html[data-theme=dark] .auth-modal .login-error.is-info{color:#6ee7b7}
@keyframes auth-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.auth-code.is-busy .auth-code-cells span{border-color:var(--clr-primary);animation:auth-pulse 1s ease-in-out infinite}
.auth-code.is-busy .auth-code-cells span:nth-child(2){animation-delay:.08s}
.auth-code.is-busy .auth-code-cells span:nth-child(3){animation-delay:.16s}
.auth-code.is-busy .auth-code-cells span:nth-child(4){animation-delay:.24s}
.auth-code.is-busy .auth-code-cells span:nth-child(5){animation-delay:.32s}
.auth-code.is-busy .auth-code-cells span:nth-child(6){animation-delay:.4s}
@keyframes auth-pulse{0%,100%{transform:none;box-shadow:none}50%{transform:translateY(-4px);box-shadow:0 6px 14px -6px rgba(124,58,237,.6)}}
.auth-code.is-error .auth-code-cells{animation:auth-shake .42s ease}
.auth-code.is-error .auth-code-cells span{border-color:#ef4444;background:rgba(239,68,68,.08)}
@keyframes auth-shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.auth-code.is-ok .auth-code-cells span{border-color:#10b981;background:rgba(16,185,129,.12);color:#059669;transition:background .2s ease}
html[data-theme=dark] .auth-code.is-ok .auth-code-cells span{color:#34d399}
.auth-modal .btn.is-loading{pointer-events:none;opacity:.9}
.auth-modal .btn.is-loading svg{display:none}
.auth-modal .btn.is-loading::before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:auth-spin .7s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-code.is-busy .auth-code-cells span,.auth-code.is-error .auth-code-cells,.auth-modal .login-error{animation:none}}
.cpick-wrap{position:relative}
.reg-phone{display:flex;gap:6px}
.auth-modal .reg-phone input[data-phone-local]{flex:1;min-width:0;padding-left:12px}
.cpick-btn{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:9px 10px;border:1.5px solid var(--clr-border);border-radius:var(--radius-sm);background:var(--white,#fff);color:var(--clr-text);font:inherit;font-size:.875rem;cursor:pointer;white-space:nowrap}
.cpick-btn::after{content:"";width:12px;height:12px;margin-left:2px;background:var(--clr-muted);-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s ease}
.cpick-btn:focus-visible{outline:none;border-color:var(--clr-primary)}
.cpick-btn[aria-expanded=true]{border-color:var(--clr-primary);background:color-mix(in srgb,var(--clr-primary) 9%,var(--white,#fff));color:var(--clr-primary)}
.cpick-btn[aria-expanded=true]::after{background:var(--clr-primary);transform:rotate(180deg)}
.cpick-btn-full{width:100%;justify-content:flex-start}
.cpick-btn-full::after{margin-left:auto}
.cpick-menu,.reg-suggest{position:fixed;z-index:20;display:flex;flex-direction:column;border:1.5px solid var(--clr-primary);border-radius:12px;background:var(--white,#fff);box-shadow:0 14px 36px rgba(15,23,42,.18),0 0 0 4px color-mix(in srgb,var(--clr-primary) 10%,transparent);animation:cpick-in .14s ease-out}
.cpick-menu{padding:8px}
.cpick-menu.is-up,.reg-suggest.is-up{animation-name:cpick-up}
.auth-modal .login-input-wrap .cpick-search{flex-shrink:0;padding:7px 10px;margin-bottom:6px;font-size:.84rem}
.cpick-list,.reg-suggest{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.cpick-list{flex:1}
.cpick-list::-webkit-scrollbar,.reg-suggest::-webkit-scrollbar{width:12px}
.cpick-list::-webkit-scrollbar-track,.reg-suggest::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.cpick-list::-webkit-scrollbar-thumb,.reg-suggest::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--clr-primary) 45%,transparent);border:4px solid transparent;border-radius:99px;background-clip:padding-box}
.cpick-list::-webkit-scrollbar-thumb:hover,.reg-suggest::-webkit-scrollbar-thumb:hover{background-color:var(--clr-primary)}
@supports not selector(::-webkit-scrollbar){.cpick-list,.reg-suggest{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--clr-primary) 45%,transparent) transparent}}
.cpick-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:none;border-radius:8px;background:none;color:var(--clr-text);font:inherit;font-size:.84rem;text-align:left;cursor:pointer}
.cpick-item:hover,.cpick-item:focus{background:color-mix(in srgb,var(--clr-primary) 9%,transparent);color:var(--clr-primary);outline:none}
.cpick-name{flex:1}
.cpick-dial{color:var(--clr-muted);font-size:.78rem}
.cpick-empty{padding:6px 8px;font-size:.8rem;color:var(--clr-muted)}
.reg-ares-status{min-height:1em;margin:-6px 0 10px;font-size:.8rem;color:var(--clr-muted)}
.reg-ares-status:empty{display:none}
.reg-ares-status.is-ok{color:#059669}
.reg-ares-status.is-err{color:#dc2626}
html[data-theme=dark] .reg-ares-status.is-ok{color:#34d399}
html[data-theme=dark] .reg-ares-status.is-err{color:#f87171}
.reg-suggest{padding:4px}
.reg-suggest-item{display:flex;flex-direction:column;flex-shrink:0;width:100%;padding:8px 10px;border:none;border-radius:8px;background:none;color:var(--clr-text);font:inherit;font-size:.84rem;text-align:left;cursor:pointer}
.reg-suggest-item:hover,.reg-suggest-item:focus{background:color-mix(in srgb,var(--clr-primary) 9%,transparent);outline:none}
.reg-suggest-loc{color:var(--clr-muted);font-size:.75rem}
.auth-modal .cpick-menu[hidden],.auth-modal .reg-suggest[hidden]{display:none!important}
@keyframes cpick-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@keyframes cpick-up{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.cpick-menu,.reg-suggest{animation:none}}
.cpick-item.is-sel{background:color-mix(in srgb,var(--clr-primary) 14%,transparent);color:var(--clr-primary);font-weight:700}
