.cp-name-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:390px;max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:#101513;color:#e8ede9;font-family:Estedad,Vazirmatn,sans-serif;direction:rtl;text-align:start;color-scheme:dark}
.cp-name-dialog[open]{animation:cpNameIn .3s cubic-bezier(.22,.9,.28,1) both}
.cp-name-dialog::backdrop{background:rgba(4,7,6,.74);animation:cpNameFadeIn .22s ease both}
.cp-name-form{display:flex;flex-direction:column;gap:10px}
.cp-name-dialog h2{margin:0 0 6px;font-size:17px;font-weight:800;text-align:center}
.cp-name-dialog p{margin:0 0 10px;line-height:1.9;font-size:12.5px;color:#aab6ae}
#cp-name-description{text-align:center}
.cp-name-form label{font-size:14px;font-weight:650}
.cp-name-form input{box-sizing:border-box;width:100%;min-height:48px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);color:#e8ede9;padding:10px 14px;font:inherit;font-size:14px;margin-bottom:6px;caret-color:#34d399}
.cp-name-form input::placeholder{color:#9aa59d}
.cp-name-form button{min-height:48px;border:0;border-radius:14px;background:#34d399;color:#04231a;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s ease}
.cp-name-form button:hover:not(:disabled){background:#57dfac}
.cp-name-form button:disabled{background:#8fa69a;cursor:wait}
.cp-name-form input:focus-visible,.cp-name-form button:focus-visible{outline:3px solid #64e8b8;outline-offset:3px}
.cp-name-form input[aria-invalid=true]{border-color:#f3959b}
.cp-name-form .cp-name-error{color:#ffa4aa;margin:0;min-height:0}
.cp-name-error:empty{display:none}
.cp-mobile-form [hidden]{display:none!important}
.cp-mobile-code{display:flex;flex-direction:column;gap:10px}
.cp-mobile-form input[readonly]{color:#aab6ae}
.cp-mobile-form #cp-mobile-description{text-align:center}
.cp-mobile-form .cp-mobile-status{color:#77dfb8}
.cp-mobile-status:empty{display:none}
.cp-mobile-form .cp-mobile-resend,.cp-mobile-form .cp-mobile-edit{background:transparent;color:#cfd8d1;border:1px solid rgba(255,255,255,.12);font-weight:600}
.cp-name-form[hidden],.cp-name-success[hidden]{display:none}
.cp-name-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;box-sizing:border-box;border:1px solid rgba(52,211,153,.3);border-radius:16px;color:#34d399;background:rgba(52,211,153,.08);margin:0 auto 4px}
.cp-name-success{text-align:center;animation:cpNameFadeIn .2s ease both;outline:none;padding-block:8px}
.cp-name-success .cp-name-icon{margin-bottom:14px}
.cp-name-success p{margin-bottom:18px}
.cp-name-reloading{font-size:12px;color:#aab6ae}
.cp-name-check{stroke-dasharray:26;stroke-dashoffset:0;animation:cpNameCheck .35s ease-out both}
.cp-name-dialog.is-closing{animation:cpNameOut .2s ease-in both;pointer-events:none}
.cp-name-dialog.is-closing::backdrop{animation:cpNameFadeOut .2s ease-in both}
@keyframes cpNameIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cpNameOut{to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes cpNameFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cpNameFadeOut{to{opacity:0}}
@keyframes cpNameCheck{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.cp-name-dialog[open]{animation:cpNameFadeIn .08s ease both}.cp-name-dialog.is-closing{animation:cpNameFadeOut .08s ease both}.cp-name-dialog::backdrop,.cp-name-dialog.is-closing::backdrop{animation-duration:.08s}.cp-name-check{animation:none}}