/* tok.re — тема веб-воронки (чекаут, кабинет, вход, лендинг).
   Отдельный файл от tok.css: на старом висят /oferta, /geetest, /altcha — их не трогаем.
   Светлая тёплая база. Тёмная подхватывается системной настройкой. */

/* Акцент интерфейса — зелёный. Красный с логотипа в UI НЕ используем: рамка и заливка
   красным читаются как ошибка валидации, а не как «выбрано». Фирменный красный живёт
   в самом знаке, интерфейс остаётся спокойным; красный здесь означает только ошибку. */
:root{
  --bg:#F7F5F0; --card:#ffffff; --card2:#FCFBF8; --soft:#F1EFE8;
  --line:#E2DFD5; --line2:#C9C5B8;
  --tx:#1B1B20; --mut:#6B6B73; --mut2:#9A9890;
  --acc:#16A34A; --acc-d:#14532D; --acc-bg:#DCFCE7; --acc-soft:rgba(22,163,74,.05);
  --ok:#16A34A; --ok-d:#14532D; --ok-bg:#DCFCE7;
  --warn-bg:#FAEEDA; --warn-tx:#854F0B;
  --err-bg:#FCEBEB; --err-tx:#A32D2D;
  --tg:#2AABEE;
  --r:12px; --r-sm:10px; --r-lg:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12131A; --card:#1B1D26; --card2:#171922; --soft:#22252F;
    --line:#2C2F3A; --line2:#3A3E4C;
    --tx:#ECEDF2; --mut:#9EA2B0; --mut2:#6E7382;
    --acc:#22C55E; --acc-d:#DCFCE7; --acc-bg:#10331F; --acc-soft:rgba(34,197,94,.09);
    --ok:#22C55E; --ok-d:#DCFCE7; --ok-bg:#10331F;
    --warn-bg:#3A2E14; --warn-tx:#F5C871;
    --err-bg:#3A1D1D; --err-tx:#F49999;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
a{color:inherit}

/* ── каркас ── */
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 40px}
.wrap.wide{max-width:820px}
.top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;letter-spacing:.2px}
/* логотип круглый сам по себе (прозрачный фон) — скругление контейнера не нужно */
.brand img{width:34px;height:34px;display:block}
.brand b{font-weight:600}
.top .lnk{font-size:14px;color:var(--mut);text-decoration:none;max-width:45%;overflow:hidden;
          text-overflow:ellipsis;white-space:nowrap;flex:none}
.top .brand{flex:none}
.foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:12.5px;color:var(--mut)}
.foot a{color:var(--mut)}

/* ── карточки ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px}
.card.flat{background:var(--soft);border-color:transparent}
.card h2{font-size:16px;font-weight:600;margin:0 0 4px}
.card .sub{font-size:13px;color:var(--mut);margin-bottom:12px}
.hr{height:1px;background:var(--line);margin:12px 0}

/* ── шаг с номером ── */
.step{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step .n{width:23px;height:23px;flex:none;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mut)}
.step .t{font-weight:600}

/* ── радио-карточки (тариф, способ) ── */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts .full{grid-column:span 2}
.opt{position:relative;display:block;border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:pointer;background:var(--card);
     -webkit-tap-highlight-color:transparent;transition:border-color .12s}
.opt:hover{border-color:var(--line2)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .tick{position:absolute;right:10px;top:11px;width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.opt .tick i{width:7px;height:7px;border-radius:50%;background:transparent;display:block}
.opt.on{border-color:var(--acc);border-width:2px;padding:11px;background:var(--acc-soft)}
.opt.on .tick{border-color:var(--acc)}
.opt.on .tick i{background:var(--acc)}
.opt .nm{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-right:22px}
.opt .pr{display:block;font-size:19px;font-weight:600;margin-top:14px;line-height:1.2}
.opt .pr small{font-size:13px;font-weight:400;color:var(--mut2);text-decoration:line-through;margin-left:6px}
.opt .ps{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.opt.trial{border-style:dashed;background:var(--card2)}
.opt.trial .pr{margin-top:8px;color:var(--ok)}
.opt.trial.on{border-style:solid}

/* строка способа оплаты */
.pm{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;background:var(--card);position:relative}
.pm.on{border-color:var(--acc);border-width:2px;padding:11px 13px;background:var(--acc-soft)}
.pm input{position:absolute;opacity:0;pointer-events:none}
.pm .tick{width:15px;height:15px;flex:none;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.pm .tick i{width:7px;height:7px;border-radius:50%;background:transparent;display:block}
.pm.on .tick{border-color:var(--acc)} .pm.on .tick i{background:var(--acc)}
.pm .g{flex:1;min-width:0}
.pm .nm{display:block;font-size:13.5px} .pm .ps{display:block;font-size:12px;color:var(--mut)}
.pmline{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mut)}

/* ── бейджи ── */
.bdg{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--soft);color:var(--mut);white-space:nowrap}
.bdg.ok{background:var(--ok-bg);color:var(--ok-d)}
.bdg.dot{display:inline-flex;align-items:center;gap:6px}
.bdg.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ── формы ── */
.field{margin-bottom:10px}
.field label{display:block;font-size:13px;color:var(--mut);margin-bottom:5px}
.input{width:100%;border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px 12px;font-size:15px;
       background:var(--card2);color:var(--tx);font-family:inherit;outline:none;transition:border-color .12s}
.input:focus{border-color:var(--acc)}
.input::placeholder{color:var(--mut2)}
.input.err{border-color:var(--err-tx);background:var(--err-bg)}
.input.code{text-align:center;font-size:26px;letter-spacing:9px;font-weight:600;padding:13px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.seg .s{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px;text-align:center;font-size:13.5px;color:var(--mut);cursor:pointer;background:var(--card)}
.seg .s.on{border-color:var(--acc);border-width:2px;padding:8px;color:var(--tx);background:var(--acc-soft)}
.hint{font-size:12px;color:var(--mut);margin-top:7px}

/* ── кнопки ── */
.btn{display:block;width:100%;border:0;border-radius:var(--r-sm);padding:13px;font-size:15.5px;font-weight:600;
     text-align:center;text-decoration:none;cursor:pointer;font-family:inherit;background:var(--acc);color:#fff;
     transition:opacity .12s}
.btn:active{opacity:.85}
.btn[disabled]{opacity:.45;cursor:default}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line);font-weight:500;font-size:14px;padding:11px}
.btn.soft{background:transparent;color:var(--acc);border:1px solid var(--acc);font-weight:500;font-size:14px;padding:11px}
.btn.tg{background:var(--tg)}
.btn.sm{padding:9px 14px;font-size:13.5px;width:auto;display:inline-block}
.btn+.btn{margin-top:8px}
.btnrow{display:flex;gap:8px}
.btnrow .btn{margin-top:0}

/* ── заметки ── */
.note{border-radius:var(--r-sm);padding:10px 12px;font-size:13px;display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.note.ok{background:var(--ok-bg);color:var(--ok-d)}
.note.warn{background:var(--warn-bg);color:var(--warn-tx)}
.note.err{background:var(--err-bg);color:var(--err-tx)}
.note.info{background:var(--soft);color:var(--mut)}
.note a{color:inherit}

/* ── итого ── */
.tot .r{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:13px;color:var(--mut)}
.tot .r b{font-size:19px;font-weight:600;color:var(--tx)}
.tot .r.small b{font-size:13.5px;font-weight:500}
.tot .perks{display:flex;flex-direction:column;gap:6px;font-size:13px;padding:12px 0;border-top:1px solid var(--line);margin-top:12px}
.tot .perks span{display:flex;align-items:center;gap:8px}
.tot .perks span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.tot .fine{text-align:center;font-size:12px;color:var(--mut);margin-top:9px}
.tot .fine a{color:var(--mut)}

/* ── список строк (устройства, платежи) ── */
.rows .row{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.rows .row:first-child{border-top:0}
.rows .row .ic{font-size:19px;width:22px;text-align:center;flex:none}
.rows .row .g{flex:1;min-width:0}
.rows .row .nm{display:block;font-size:13.5px;font-weight:500}
.rows .row .ps{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.rows .row .act{font-size:13px;color:var(--mut2);text-decoration:none;flex:none}

/* ── ссылка подписки / моно ── */
.mono{padding:10px 11px;background:var(--soft);border-radius:9px;font:11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
      color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrbox{display:flex;justify-content:center;padding:14px 0}
.qrbox>div{background:#fff;padding:10px;border-radius:10px;line-height:0}

/* ── статус подписки ── */
.status{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
.status .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--mut2);margin-top:7px}
.status .dot.ok{background:var(--ok)} .status .dot.warn{background:#EF9F27} .status .dot.off{background:#E24B4A}
.status .big{font-weight:600;display:block}
.status .small{font-size:13px;color:var(--mut)}

/* ── вкладки кабинета ── */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font-size:13.5px;padding:7px 14px;border-radius:20px;white-space:nowrap;text-decoration:none;
        background:var(--card);border:1px solid var(--line);color:var(--mut)}
.tabs a.on{background:var(--tx);border-color:var(--tx);color:var(--bg)}

/* ── статистика ── */
.stats{display:flex;gap:22px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.stats .v{font-size:19px;font-weight:600;display:block}
.stats .k{font-size:12px;color:var(--mut)}

/* ── прочее ── */
.center{text-align:center}
.muted{color:var(--mut)}
.sm{font-size:13px}
.mt0{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-size:12px}
.hero h1{font-size:23px;font-weight:600;line-height:1.28;margin:0 0 8px}
.hero p{font-size:14px;color:var(--mut);margin:0}
.spin{width:26px;height:26px;border:2.5px solid var(--line);border-top-color:var(--acc);border-radius:50%;
      margin:0 auto;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hide{display:none!important}

@media (max-width:380px){
  .wrap{padding:14px 12px 32px}
  .opts{grid-template-columns:1fr}
  .opts .full{grid-column:span 1}
  .stats{gap:14px}
}