/* =====================================================================
   [v1585] Вход в 2 шага («Вход 4»), регистрация «вариант 8» (Fable «Два шага + Telegram»), вход через Telegram.
   Страницы: account/login, account/register, account/simpleregister (форма Simple — поверх её разметки).
   Цвета — переменные --f17-* из sp-f17.css (тёмная тема html.sp-dark переопределяет их там же).
   Отступы: внутри карточки 28/26 (ПК) и 20/18 (телефон), верх = низ, лево = право; касаемые зоны ≥ 44 px.
   Шаги переключаются атрибутом data-step на .spa — без JS (html без .spa-js) видна вся форма целиком,
   поэтому вход работает и при сбое скрипта.
   ===================================================================== */
.spa{--a-ink:var(--f17-ink,#1B1730);--a-mu:var(--f17-muted,#6E6A85);--a-line:var(--f17-line,#E6E2F0);--a-card:var(--f17-card,#fff);
  --a-pur:var(--f17-pur,#5B3FA0);--a-purt:var(--f17-purt,rgba(91,63,160,.10));--a-hov:var(--f17-hov,#F6F4FC);--a-red:#E31E2A;--a-tg:#229ED9;
  --a-tgt:rgba(34,158,217,.10);--a-ok:#1E9E5A;--a-okt:rgba(30,158,90,.12);--a-sh:0 18px 40px -18px rgba(27,23,48,.25);
  display:grid;grid-template-columns:minmax(0,460px);justify-content:center;gap:44px;align-items:start;margin:8px auto 40px;color:var(--a-ink);font-family:Rubik,system-ui,-apple-system,"Segoe UI",sans-serif}
html.sp-dark .spa{--a-tgt:rgba(34,158,217,.18);--a-okt:rgba(59,209,111,.16);--a-ok:#7BE39A;--a-sh:0 28px 64px -12px rgba(0,0,0,.66)}
.spa.spa-two{grid-template-columns:minmax(0,460px) minmax(0,380px)}
.spa *,.spa *::before,.spa *::after{box-sizing:border-box}
.spa [hidden]{display:none !important}
.spa a{color:var(--a-pur)}
.spa-card{background:var(--a-card);border:1px solid var(--a-line);border-radius:20px;padding:28px 26px;box-shadow:var(--a-sh);display:grid;gap:16px;align-content:start;min-width:0}
.spa-h{margin:0;font:600 26px/1.2 Rubik,sans-serif;letter-spacing:-.01em;color:var(--a-ink);text-wrap:balance}
.spa-sub{margin:-8px 0 0;color:var(--a-mu);font-size:14px;line-height:1.45}
.spa-sub a{font-weight:500}
.spa-steps{display:flex;gap:8px;align-items:center;font-size:12px;line-height:20px;color:var(--a-mu)}
.spa-steps span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.spa-steps b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--a-line);color:var(--a-mu);font-size:11px;font-weight:600}
.spa-steps .on{color:var(--a-ink)}.spa-steps .on b{background:var(--a-pur);color:#fff}
html.sp-dark .spa-steps .on b{color:#1B1730}
.spa-steps i{flex:1;height:1px;background:var(--a-line)}
.spa-grp{display:grid;gap:16px}
/* поле */
.spa-f{display:grid;gap:6px;min-width:0}
.spa-l{display:flex;justify-content:space-between;align-items:center;gap:8px;font:500 13px/18px Rubik,sans-serif;color:var(--a-ink);margin:0}
.spa-l a{font-weight:500;font-size:13px}
.spa-badge{font:500 11.5px/16px Rubik,sans-serif;color:var(--a-mu);background:var(--a-hov);border-radius:999px;padding:2px 8px}
.spa-in{position:relative;display:flex;align-items:center}
.spa .spa-in input,.spa input.spa-inp{width:100%;height:48px;margin:0;border:1.5px solid var(--a-line);border-radius:12px;background:var(--a-card);color:var(--a-ink);font:400 15px/20px Rubik,sans-serif;padding:0 14px;outline:0;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.spa .spa-in input:focus{border-color:var(--a-pur);box-shadow:0 0 0 3px var(--a-purt)}
.spa .spa-in input.is-bad{border-color:var(--a-red)}
.spa-in .spa-pre{position:absolute;left:14px;top:0;bottom:0;display:flex;align-items:center;color:var(--a-mu);font-size:15px;pointer-events:none}
.spa .spa-in .spa-pre~input{padding-left:30px}
.spa .spa-in input.has-eye{padding-right:48px}
.spa-eye{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;background:none;color:var(--a-mu);cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0}
.spa-eye:hover{background:var(--a-hov)}
.spa-err{display:none;color:var(--a-red);font-size:12.5px;line-height:17px}
.spa-err.on{display:block}
.spa-hint{color:var(--a-mu);font-size:12.5px;line-height:17px;margin:0}
.spa-bar{height:4px;background:var(--a-line);border-radius:2px;overflow:hidden}
.spa-bar i{display:block;height:100%;width:0;background:var(--a-red);transition:width .25s,background-color .25s}
/* кнопки */
.spa .spa-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin:0;padding:0 18px;border:0;border-radius:12px;background:var(--a-red);color:#fff !important;font:500 16px/20px Rubik,sans-serif;text-decoration:none !important;cursor:pointer;box-shadow:none;transition:filter .15s,transform .1s;text-transform:none;letter-spacing:0}
.spa .spa-btn:hover{filter:brightness(1.07)}
.spa .spa-btn:active{transform:translateY(1px)}
.spa .spa-btn[disabled]{opacity:.6;cursor:default}
.spa .spa-btn.p{background:var(--a-pur)}
html.sp-dark .spa .spa-btn.p{color:#1B1730 !important}
.spa .spa-btn.tg{background:var(--a-tg)}
.spa .spa-btn.g{background:transparent;color:var(--a-ink) !important;border:1.5px solid var(--a-line)}
.spa .spa-btn.g:hover{border-color:var(--a-pur);background:var(--a-hov);filter:none}
.spa .spa-btn.sm{min-height:44px;font-size:14.5px}
.spa-btn .spa-pill{display:inline-flex;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.2);font-size:12px;font-weight:600}
.spa-or{display:flex;align-items:center;gap:10px;color:var(--a-mu);font-size:12.5px;line-height:16px}
.spa-or::before,.spa-or::after{content:"";flex:1;height:1px;background:var(--a-line)}
.spa-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:6px 6px 6px 14px;border-radius:12px;background:var(--a-hov);font-size:14px}
.spa-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spa .spa-chip button{flex:none;height:32px;border:0;background:var(--a-card);color:var(--a-pur);font:500 13px/32px Rubik,sans-serif;border-radius:9px;padding:0 12px;cursor:pointer}
.spa-chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:19px;color:var(--a-ink);cursor:pointer;margin:0;font-weight:400}
.spa-chk input{width:18px;height:18px;margin:0 !important;flex:none;accent-color:var(--a-pur)}
.spa-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.spa-note{padding:12px 14px;border-radius:12px;background:var(--a-hov);font-size:14px;line-height:1.45}
.spa-note b{display:block;margin-bottom:2px}
.spa-note.warn{background:rgba(227,30,42,.08)}
html.sp-dark .spa-note.warn{background:rgba(255,59,71,.14)}
/* соцсети: модуль socnetauth2 выводит заголовок и список картинок — делаем из них три кнопки.
   [v1585.2] вариант 01 владельца, растянутый по ширине как кнопка Telegram: три равные контурные кнопки на всю ширину,
   высота 50 px как у Telegram. header-only.min.css и sp-dark.min.css делают из списка flex с !important
   и квадратики 42–52 px — поэтому здесь селекторы сильнее (.spa + html.sp-dark) и !important. Только внутри .spa:
   вход, account/register и Simple; в остальных местах сайта кнопки плагина прежние. */
.spa .sna_header{display:none}
.spa .sna_icons{margin:0;width:100%;text-align:left}
.spa .sna_icons br{display:none}
.spa .sna_icons ul,.spa .sna_icons .sna_bline_ul,html.sp-dark .spa .sna_icons .sna_bline_ul{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px !important;width:100%;margin:0 !important;padding:0 !important;list-style:none !important}
.spa .sna_icons li,.spa .sna_icons .sna_bline_ul li,html.sp-dark .spa .sna_icons .sna_bline_ul li{float:none !important;display:block !important;width:auto;min-width:0;padding:0 !important;margin:0 !important;list-style:none}
.spa .sna_icons li a,.spa .sna_icons .sna_bline_ul li a,html.sp-dark .spa .sna_icons .sna_bline_ul li a{display:flex !important;align-items:center;justify-content:center;gap:8px;width:100% !important;height:50px !important;padding:0 10px !important;line-height:20px;overflow:hidden;border:1.5px solid var(--a-line) !important;border-radius:12px !important;background:var(--a-card) !important;color:var(--a-ink) !important;font:500 15px/20px Rubik,sans-serif;text-decoration:none !important;white-space:nowrap;transform:none !important;box-shadow:none !important;transition:border-color .15s,background-color .15s}
.spa .sna_icons li a:hover,.spa .sna_icons .sna_bline_ul li a:hover,html.sp-dark .spa .sna_icons .sna_bline_ul li a:hover{border-color:var(--a-pur) !important;background:var(--a-hov) !important;transform:none !important;box-shadow:none !important}
.spa .sna_icons li a img,.spa .sna_icons .sna_bline_ul li img,html.sp-dark .spa .sna_icons .sna_bline_ul li a img{display:block;flex:none;width:24px !important;height:24px !important;border-radius:6px;opacity:1 !important;object-fit:contain;filter:none !important}
.spa .sna_icons li a span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* блок Telegram в регистрации */
.spa-tgbox{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--a-tgt);border:1px solid rgba(34,158,217,.28)}
.spa-tgbox-t{display:flex;gap:10px;align-items:center;font:500 14px/20px Rubik,sans-serif}
.spa-tgbox-t svg{flex:none}
.spa-tgbox-d{margin:-4px 0 0 32px;font-size:12.5px;line-height:17px;color:var(--a-mu)}
.spa-why{position:relative;margin-left:auto}
.spa .spa-why>button{width:28px;height:28px;border-radius:50%;border:1px solid var(--a-line);background:var(--a-card);color:var(--a-pur);font:700 13px/26px Georgia,serif;cursor:pointer;padding:0}
.spa-why-pop{position:absolute;right:0;top:34px;z-index:30;width:260px;padding:12px 14px;border-radius:12px;background:var(--a-card);border:1px solid var(--a-line);box-shadow:var(--a-sh);font-size:13px;line-height:1.4;color:var(--a-ink)}
.spa-why-pop b{display:block;margin-bottom:6px}
.spa-why-pop ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.spa-why-pop li{display:flex;gap:8px}.spa-why-pop li::before{content:"✓";color:var(--a-ok);font-weight:700}
.spa-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--a-card);border:1px solid var(--a-line);border-radius:12px;padding:3px}
.spa .spa-tabs button{min-height:38px;border:0;background:none;color:var(--a-mu);font:500 13px/16px Rubik,sans-serif;border-radius:9px;cursor:pointer;padding:4px 6px}
.spa .spa-tabs button.on{background:var(--a-pur);color:#fff}
html.sp-dark .spa .spa-tabs button.on{color:#1B1730}
.spa-st{display:flex;gap:6px;align-items:center;font-size:12.5px;line-height:17px;color:var(--a-mu)}
.spa-st.ok{color:var(--a-ok);font-weight:500}
.spa-st.bad{color:var(--a-red)}
/* панель входа через Telegram */
.spa-tgp{display:grid;gap:12px;padding:16px;border-radius:14px;border:1px solid var(--a-line);background:var(--a-hov);text-align:center}
.spa-tgp-t{font:600 15px/20px Rubik,sans-serif}
.spa-pin{font:700 44px/1 Rubik,sans-serif;letter-spacing:.06em;color:var(--a-pur);font-variant-numeric:tabular-nums}
.spa-tgp .spa-hint{text-align:center}
.spa-tgp .spa-row{justify-content:center}
.spa .spa-link{border:0;background:none;color:var(--a-pur);font:500 13.5px/20px Rubik,sans-serif;cursor:pointer;padding:6px 8px;min-height:32px;text-decoration:underline;text-underline-offset:3px}
.spa-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spa-rot .8s linear infinite;flex:none}
@keyframes spa-rot{to{transform:rotate(360deg)}}
/* «Что даёт аккаунт» */
.spa-side{padding-top:8px;display:grid;gap:22px;min-width:0}
.spa-side h2{font:600 18px/1.3 Rubik,sans-serif;margin:0;color:var(--a-ink)}
.spa-ben{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.spa-ben li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.35}
.spa-ben li span{display:block;color:var(--a-mu);font-size:12.5px;margin-top:2px}
.spa-ben .ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--a-purt);color:var(--a-pur);display:flex;align-items:center;justify-content:center}
.spa-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.spa-num div{background:var(--a-card);border:1px solid var(--a-line);border-radius:14px;padding:12px 8px;text-align:center}
.spa-num b{display:block;font:600 19px/1.2 Rubik,sans-serif;color:var(--a-pur)}
.spa-num small{display:block;margin-top:2px;font-size:11.5px;line-height:14px;color:var(--a-mu)}
/* штатные куски формы внутри карточки */
.spa .form-group{margin:0}
.spa .checkbox{margin:0}
.spa .checkbox label,.spa label[for="input-rememberme"]{display:flex;gap:10px;align-items:center;min-height:24px;padding-left:0;font-size:14px;font-weight:400;color:var(--a-ink);cursor:pointer}
.spa .checkbox input[type=checkbox]{position:static;margin:0;width:18px;height:18px;accent-color:var(--a-pur)}
.spa .spa-cap:empty{display:none}
.spa .spa-cap .form-group{display:block}
.spa .spa-cap .control-label,.spa .spa-cap legend{display:none}
.spa .spa-cap .col-sm-10,.spa .spa-cap .col-sm-12{width:auto;float:none;padding:0}
.spa .text-danger{font-size:12.5px;line-height:17px;margin-top:4px}

/* ---------- шаги: видно только при работающем JS ---------- */
.spa-js .spa[data-step="1"] .spa-s2,.spa-js .spa[data-step="1"] .spa-s2n,.spa-js .spa[data-step="1"] .spa-only2{display:none !important}
.spa-js .spa[data-step="2"] .spa-s1,.spa-js .spa[data-step="2"] .spa-only1,.spa-js .spa[data-step="2"] .spa-s2n{display:none !important}
.spa-js .spa[data-step="2n"] .spa-s1,.spa-js .spa[data-step="2n"] .spa-s2,.spa-js .spa[data-step="2n"] .spa-only1,.spa-js .spa[data-step="2n"] .spa-only2{display:none !important}
.spa-js .spa[data-step="tg"] .spa-s1,.spa-js .spa[data-step="tg"] .spa-s2,.spa-js .spa[data-step="tg"] .spa-s2n,.spa-js .spa[data-step="tg"] .spa-only1,.spa-js .spa[data-step="tg"] .spa-only2,.spa-js .spa[data-step="tg"] .spa-alt{display:none !important}
/* соцсети вставляет модификация (не в нашем блоке) — прячем их везде, кроме шага 1 */
.spa-js .spa:not([data-step="1"]) .sna_icons{display:none !important}
.spa-tgw{display:none}
.spa-js .spa[data-step="tg"] .spa-tgw{display:grid}
/* без JS: подтверждение пароля и запасные поля видны, кнопок шагов нет */
html:not(.spa-js) .spa-jsonly{display:none !important}
.spa-js .spa .spa-nojs{display:none !important}
.spa-in1{animation:spa-in .22s cubic-bezier(.2,.7,.2,1)}
@keyframes spa-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Simple (/simpleregister/): своя разметка модуля, строки — .form-group.row-register_<поле> ---------- */
.spa-simple .simpleregister-have-account{display:none}
.spa-simple .simpleregister-block-content{margin:0}
.spa-simple fieldset.form-horizontal{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;border:0;min-width:0}
.spa-simple fieldset .form-group{display:grid !important;gap:6px;margin:0 !important;padding:0 !important;grid-template-columns:minmax(0,1fr)}
.spa-simple fieldset .form-group::before,.spa-simple fieldset .form-group::after{display:none !important}
.spa-simple fieldset .form-group>.col-sm-2,.spa-simple fieldset .form-group>.col-sm-10,.spa-simple fieldset .form-group>.col-sm-12{width:auto !important;float:none !important;padding:0 !important;margin:0 !important;max-width:none !important;text-align:left !important}
.spa-simple fieldset .form-group:first-child{display:none !important}
.spa-simple fieldset .control-label{display:flex !important;align-items:center;gap:8px;font:500 13px/18px Rubik,sans-serif !important;color:var(--a-ink) !important;padding:0 !important;text-align:left !important;margin:0 !important}
.spa-simple fieldset .form-group.required .control-label::after{content:none !important}
.spa-simple .sp-reg-ic{display:none !important}
.spa-simple fieldset input.form-control{width:100%;height:48px !important;border:1.5px solid var(--a-line) !important;border-radius:12px !important;background:var(--a-card) !important;color:var(--a-ink) !important;font:400 15px/20px Rubik,sans-serif !important;padding:0 14px !important;box-shadow:none !important}
.spa-simple fieldset input.form-control:focus{border-color:var(--a-pur) !important;box-shadow:0 0 0 3px var(--a-purt) !important}
.spa-simple .simplecheckout-error-text{font-size:12.5px;line-height:17px;margin-top:4px;color:var(--a-red)}
.spa-simple .simplecheckout-tooltip{display:none !important}
.spa-simple .row-register_email{order:1}
.spa-simple .row-register_firstname{order:2}
.spa-simple .row-register_password{order:3}
.spa-simple .row-register_confirm_password{order:4}
.spa-simple .spa-tgslot{order:5}
.spa-simple .row-register_telephone{order:6}
.spa-simple .row-register_address_1{order:7}
.spa-simple .row-register_lastname{order:8}
.spa-simple .row-register_newsletter{order:9}
.spa-simple .row-register_captcha{order:10}
.spa-simple .row-register_newsletter .col-sm-10>div{display:flex;gap:16px}
.spa-simple .row-register_newsletter .radio{margin:0}
.spa-simple .row-register_captcha .control-label{display:none !important}
.spa-js .spa-simple .row-register_confirm_password,.spa-js .spa-simple .row-register_lastname{display:none !important}
.spa-simple .simpleregister-button-block{margin:0;padding:0;border:0;background:none}
.spa-simple .simpleregister-button-right{display:grid;gap:16px;float:none;text-align:left}
.spa-simple .sp-agree{margin:0}
.spa-simple .sp-agree-row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:19px;margin:0;font-weight:400}
.spa-simple .sp-agree-row input{margin:0 !important;width:18px;height:18px;flex:none;accent-color:var(--a-pur)}
.spa-simple #simpleregister_button_confirm{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:0;border-radius:12px;background:var(--a-red) !important;color:#fff !important;font:500 16px/20px Rubik,sans-serif;text-decoration:none;box-shadow:none}
/* шаг 1 у Simple: почта + соцсети + согласие; шаг 2: имя, пароль, Telegram, телефон, ссылка, рассылка, капча */
.spa-js .spa-simple[data-step="1"] fieldset .form-group:not(.row-register_email),.spa-js .spa-simple[data-step="1"] .spa-tgslot,.spa-js .spa-simple[data-step="1"] #simpleregister_button_confirm{display:none !important}
.spa-js .spa-simple[data-step="2"] .row-register_email,.spa-js .spa-simple[data-step="2"] .sp-agree,.spa-js .spa-simple[data-step="2"] .sna_icons,.spa-js .spa-simple[data-step="2"] .spa-or-soc{display:none !important}
/* [v1585.3] Simple на боевом: simple.css даёт .simpleregister label{display:inline-block !important} — галка
   переставала быть флексом, текст согласия уходил под неё и вставал ниже галки; .simpleregister-block-content
   {padding:10px} — поле почты на 20 px уже кнопки «Продолжить»; header-only.min.css — рамку и поля 28 px
   у #simpleregister (вторая карточка внутри карточки) и 12.5 px у текста согласия. Снимаем только внутри .spa-simple. */
.spa-simple #simpleregister{border:0 !important;border-radius:0 !important;padding:0 !important;background:none !important;max-width:none !important;margin:0 !important;box-shadow:none !important}
.spa-simple .simpleregister-block-content{margin:0 !important;padding:0 !important}
.spa-simple .simpleregister label.sp-agree-row,.spa-simple label.sp-agree-row{display:flex !important;gap:10px;align-items:flex-start;font-size:13.5px;line-height:19px;margin:0;font-weight:400;color:var(--a-mu);cursor:pointer}
.spa-simple .sp-agree-row span{font-size:13.5px;line-height:19px;color:var(--a-mu)}
/* галка 18 px против строки 19 px: на 1 px ниже — центр галки на середине строчных букв первой строки */
.spa-simple .sp-agree-row input,.spa .spa-chk input{margin:1px 0 0 !important}

@media (max-width:900px){
  .spa,.spa.spa-two{grid-template-columns:minmax(0,1fr);gap:26px;max-width:520px}
}
@media (max-width:600px){
  .spa{margin:0 0 28px}
  .spa-card{padding:20px 18px;border-radius:16px;gap:14px}
  .spa-h{font-size:23px}
  .spa-num b{font-size:17px}
  .spa-why-pop{width:min(260px,calc(100vw - 64px))}
}
/* [v1585.2] очень узкий экран: три подписи не влезают — только иконки (название остаётся в alt/title картинки) */
@media (max-width:600px){
  .spa .sna_icons li a,.spa .sna_icons .sna_bline_ul li a,html.sp-dark .spa .sna_icons .sna_bline_ul li a{gap:6px;padding:0 4px !important;font-size:14px}
  .spa .sna_icons li a img,.spa .sna_icons .sna_bline_ul li img,html.sp-dark .spa .sna_icons .sna_bline_ul li a img{width:20px !important;height:20px !important}
}
@media (max-width:359px){
  .spa .sna_icons li a span{display:none}
}
@media (prefers-reduced-motion:reduce){.spa-in1,.spa-spin{animation:none}.spa *{transition:none !important}}