/* Единая форма регистрации и входа (web/sk-auth.js, №253). Работает и на сайте (style.css), и в кабинете (pro.css, светлая и
темная тема): только свои классы .ska-*, цвета - токены страницы с запасными значениями. Акцент - цвет площадки страницы. */
.ska{--ska-acc:var(--acc,var(--a2b,#7A1FC2));--ska-ink:var(--ink,#121118);--ska-on:var(--on-ink,var(--bg,#fff));--ska-mute:var(--mute,#686774);
--ska-line:var(--line3,rgba(24,20,40,.18));--ska-field:var(--field,#FBFBFA);--ska-card:var(--card,#fff);--ska-red:var(--red,#C42838);
display:flex;flex-direction:column;gap:16px;text-align:left;color:var(--ska-ink);font-size:15px}
.ska [hidden]{display:none!important}
/* переключатель «Регистрация / Вход» */
.ska .ska-seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--ska-ink) 5%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ska-ink) 6%,transparent)}
.ska .ska-seg button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:40px;border-radius:9px;cursor:pointer;
font-family:inherit;font-weight:500;font-size:14.5px;line-height:1;color:var(--ska-mute);-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s,box-shadow .15s}
.ska .ska-seg button:hover{color:var(--ska-ink)}
.ska .ska-seg button.on{background:var(--ska-card);color:var(--ska-ink);font-weight:600;
box-shadow:0 1px 2px rgba(24,20,40,.1),0 0 0 1px color-mix(in srgb,var(--ska-ink) 8%,transparent)}
.ska .ska-seg button:focus-visible{outline:2px solid var(--ska-acc);outline-offset:1px}
/* поля */
.ska .ska-f{display:flex;flex-direction:column;gap:14px;margin:0}
.ska .ska-s1,.ska .ska-s2{display:flex;flex-direction:column;gap:14px}
.ska .ska-fld{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;font-weight:500;color:var(--ink2,var(--ska-ink));cursor:default}
.ska .ska-fld small{font-size:12.5px;font-weight:400;color:var(--ska-mute);line-height:1.4}
.ska .ska-fld input{box-sizing:border-box;width:100%;height:50px;margin:0;padding:0 15px;border:1px solid var(--ska-line);border-radius:12px;
background:var(--ska-field);color:var(--ska-ink);font-family:inherit;font-weight:400;font-size:16px;line-height:1.2;outline:0;box-shadow:none;
caret-color:var(--ska-acc);transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
.ska .ska-fld input::placeholder{color:var(--faint,#A3A2AE)}
.ska .ska-fld input:hover{border-color:color-mix(in srgb,var(--ska-ink) 30%,transparent)}
.ska .ska-fld input:focus{border-color:var(--ska-acc);background:var(--ska-card);box-shadow:0 0 0 3px color-mix(in srgb,var(--ska-acc) 22%,transparent)}
.ska .ska-fld input:focus-visible{outline:0}
/* автозаполнение браузера: без голубой заливки Chrome, цвета формы */
.ska .ska-fld input:-webkit-autofill,.ska .ska-fld input:-webkit-autofill:hover,.ska .ska-fld input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--ska-ink);-webkit-box-shadow:0 0 0 40px var(--ska-field) inset;transition:background-color 9999s 0s}
.ska #phNum{font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* маска телефона: напечатанное + бледный остаток шаблона «+7 (000) 000-00-00» поверх поля, на том же месте */
.ska .ska-phw{position:relative;display:block}
.ska .ska-ghost{position:absolute;left:16px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;white-space:pre;
font-family:inherit;font-weight:400;font-size:16px;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--faint,#B9B8C2)}
.ska .ska-ghost i{font-style:normal;color:transparent}
.ska .ska-codef input{height:58px;text-align:center;font:600 26px/1 var(--mono,ui-monospace,'SF Mono',Menlo,monospace);letter-spacing:.42em;padding:0 0 0 .42em}
.ska .ska-codef input::placeholder{letter-spacing:.42em;color:var(--faint,#C9C8D0)}
/* согласие: своя галочка в цвет площадки (без системной синей) */
.ska .ska-chk{position:relative;display:flex;gap:10px;align-items:flex-start;margin:0;font-size:13px;line-height:1.45;color:var(--ska-mute);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ska .ska-chk input{position:absolute;opacity:0;width:20px;height:20px;margin:0;left:0;top:0;cursor:pointer}
.ska .ska-chk i{flex:none;width:20px;height:20px;margin-top:-1px;border-radius:6px;border:1.5px solid var(--ska-line);background:var(--ska-field);
display:grid;place-items:center;transition:background .15s,border-color .15s,box-shadow .15s}
.ska .ska-chk i:after{content:"";width:11px;height:11px;background:var(--ska-on);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
.ska .ska-chk input:checked+i{background:var(--ska-acc);border-color:var(--ska-acc)}
.ska .ska-chk input:checked+i:after{opacity:1;transform:none}
.ska .ska-chk input:focus-visible+i{box-shadow:0 0 0 3px color-mix(in srgb,var(--ska-acc) 25%,transparent)}
.ska .ska-chk:hover i{border-color:color-mix(in srgb,var(--ska-ink) 35%,transparent)}
.ska a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.ska a:hover{color:var(--ska-ink);text-decoration-color:currentColor}
/* код отправлен, повтор */
.ska .ska-sent{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font-size:14px;color:var(--ska-mute)}
.ska .ska-sent b{color:var(--ska-ink);font-weight:600;font-variant-numeric:tabular-nums}
.ska .ska-resend{margin:-4px 0 0;font-size:13px;color:var(--ska-mute)}
/* №253б: SMS не пришло - код на почту */
.ska .ska-late{margin:-8px 0 0;font-size:13px;color:var(--ska-mute)}
/* кнопки */
.ska .ska-go{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 20px;
border-radius:12px;background:var(--btn,var(--ska-ink));color:var(--ska-on);font-family:inherit;font-weight:600;font-size:16px;line-height:1.25;text-align:center;cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -12px rgba(24,20,40,.55);-webkit-tap-highlight-color:transparent;transition:background .18s,transform .12s,opacity .15s}
.ska .ska-go:hover{background:var(--btn-h,color-mix(in srgb,var(--ska-ink),var(--ska-acc) 30%))}
.ska .ska-go:active{transform:scale(.985)}
.ska .ska-go:focus-visible{outline:2px solid var(--ska-acc);outline-offset:2px}
.ska .ska-go:disabled{opacity:.6;cursor:progress;transform:none}
.ska .ska-go:after,.ska .ska-lnk:after,.ska .ska-seg button:after{content:none!important}
.ska .ska-lnk{all:unset;display:inline;cursor:pointer;color:var(--ska-ink);font:inherit;font-weight:500;text-decoration:underline;
text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
.ska .ska-lnk:hover{text-decoration-color:currentColor}
.ska .ska-lnk:focus-visible{outline:2px solid var(--ska-acc);outline-offset:2px;border-radius:3px}
.ska .ska-lnk:disabled{color:var(--ska-mute);text-decoration:none;cursor:default}
.ska .ska-alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin:0;font-size:14px}
.ska .ska-legal{margin:-4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ska-mute)}
.ska .ska-note{margin:0;padding:11px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--ink2,var(--ska-ink));
background:color-mix(in srgb,var(--ska-acc) 7%,var(--ska-card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ska-acc) 14%,transparent)}
.ska .ska-pwf .ska-note{background:color-mix(in srgb,var(--ska-ink) 4%,transparent);box-shadow:none;color:var(--ska-mute)}
.ska .ska-err{margin:0;color:var(--ska-red);font-size:13.5px;line-height:1.45}
.ska .ska-err .ska-lnk{color:var(--ska-red)}
.ska .ska-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media (max-width:420px){.ska .ska-codef input{letter-spacing:.32em;padding-left:.32em}}