/* Русяев.ИИ — лента блога на главной (07.10.2026) и «Забрать бонус» (v2 — 11.10.2026).
   Отдельный файл: разметку вставляет social-follow.js, app.js не трогаем.
   Лента: цвета и радиусы — токены сайта (--accent, --surface, --border, --r-*), светлая и тёмная темы работают сами.
   Движение — по образцам kinetics.colorion.co: Toast Overshoot (появление панели), Hover Lift (карточки), Sheen Sweep
   (один блик на кнопке после загрузки).
   «Забрать бонус» с 11.10.2026 стоит не только в приложении, но и в блоге, законах, на справочных страницах и «Карте
   доказательств» — поэтому у кнопки и панели свои стили и свои токены (--sb-*) с запасными значениями обеих тем. */

/* ── Лента «Разборы практики» под карточкой корпуса ─────────────────── */
.sf-reads{max-width:800px;margin:12px auto 0;text-align:left}
.sf-rh{display:flex;align-items:center;gap:10px;margin:0 2px 8px}
.sf-rt{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.sf-rs{font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sf-rsp{flex:1}
.sf-rb,.sf-rp{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);cursor:pointer;padding:0;font:inherit;transition:background .15s,color .15s,border-color .15s}
.sf-rb:hover,.sf-rp:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-2)}
.sf-rb:focus-visible,.sf-rp:focus-visible,.sf-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sf-rb[aria-disabled="true"]{opacity:.4;cursor:default}
.sf-rb svg,.sf-rp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sf-rp .sf-i-play{display:none}
.sf-rp[aria-pressed="true"] .sf-i-play{display:block}
.sf-rp[aria-pressed="true"] .sf-i-pause{display:none}
.sf-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px;border-radius:var(--r-m,14px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
.sf-track.sf-end{-webkit-mask-image:none;mask-image:none}
.sf-track::-webkit-scrollbar{display:none}
.sf-card{flex:0 0 calc((100% - 24px) / 3);scroll-snap-align:start;min-height:124px;box-sizing:border-box;display:flex;flex-direction:column;
  gap:6px;padding:12px 14px 11px;border-radius:var(--r-m,14px);border:1px solid var(--border);background:var(--surface);
  color:var(--text);text-decoration:none;box-shadow:var(--sh-1);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .15s ease,box-shadow .25s ease}
.sf-card:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--sh-2)}
.sf-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sf-cm{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.sf-cm i{font-style:normal;opacity:.6}
.sf-ct{font-size:14.5px;line-height:1.36;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sf-cc{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent-ink);
  background:var(--accent-soft);border-radius:7px;padding:3px 7px}
.sf-card-cta{background:linear-gradient(160deg,var(--accent-soft),var(--surface) 70%);border-color:var(--accent-line)}
.sf-card-cta .sf-cti{display:flex;align-items:center;gap:8px}
.sf-card-cta .sf-cti svg{width:26px;height:26px;border-radius:50%}
.sf-card-cta .sf-go{margin-top:auto;align-self:flex-start}
.sf-card-cta:hover .sf-go{background:var(--accent);color:var(--on-accent)}
.sf-rf{display:flex;align-items:center;gap:12px;margin:6px 2px 0}
.sf-prog{flex:1;height:2px;border-radius:2px;background:var(--border);overflow:hidden}
.sf-prog i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.sf-prog.sf-run i{animation:sf-prog var(--sf-step,7s) linear forwards}
.sf-prog.sf-hold i{animation-play-state:paused}
@keyframes sf-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sf-all{flex:none;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.sf-all:hover{text-decoration:underline}
.sf-skel{flex:0 0 calc((100% - 24px) / 3);min-height:124px;border-radius:var(--r-m,14px);border:1px solid var(--border);
  background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%) 0 0/300% 100%;
  animation:sf-skel 1.4s linear infinite}
@keyframes sf-skel{to{background-position:-150% 0}}
/* кнопка «Подписаться» в карточке Telegram-канала */
.sf-go{flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:var(--r-pill,100px);
  font-size:12.5px;font-weight:650;color:var(--accent-ink);background:var(--accent-soft);transition:background .15s,color .15s}
.sf-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .sf-reads{margin-top:14px}
  .sf-rs{display:none}
  .sf-card,.sf-skel{flex-basis:78%}
}
@media (max-width:420px){.sf-go{padding:7px 10px}.sf-go .sf-gl{display:none}}
@media (prefers-reduced-motion:reduce){
  .sf-card{transition:none}
  .sf-skel{animation:none}
  .sf-track{scroll-behavior:auto}
  .sf-prog{display:none}
}

/* ── «Забрать бонус» v2 (11.10.2026) ─────────────────────────────────── */
/* Свои токены: берут токен страницы, а если его нет (вне приложения нет --accent-ink, --on-accent, --ok-*, --sh-3,
   на «Карте доказательств» — даже --surface), — запасное значение своей темы. Тёмная тема — по тем же двум правилам,
   что у сайта: системная, если светлая не выбрана вручную, и выбранная вручную [data-theme]. Приглушённый текст —
   свой, как --text-3 приложения: у справочных страниц и блога он светлее (#9E9EA4) и мелкие подписи не читались бы. */
.sb-btn,.sb-pop{
  --sb-accent:var(--accent,#7454F5);--sb-accent-2:var(--accent-2,#6A48F0);--sb-acc-ink:var(--accent-ink,#5B3BE0);
  --sb-soft:var(--accent-soft,#F2EEFF);--sb-line:var(--accent-line,#DDD3FF);--sb-on:var(--on-accent,#FFFFFF);
  --sb-surface:var(--surface,#FFFFFF);--sb-surface-2:var(--surface-2,#F4F4F5);
  --sb-border:var(--border,#E8E8E9);--sb-border-2:var(--border-2,#DCDCDE);
  --sb-text:var(--text,#1B1B1B);--sb-text-2:var(--text-2,#6B6B70);--sb-text-3:#6E6E73;
  --sb-ok:var(--ok,#2E9E5B);--sb-ok-soft:var(--ok-soft,#E9F7EE);--sb-ok-ink:var(--ok-ink,#1F7A45);--sb-on-ok:#FFFFFF;
  --sb-warn:var(--warn,#A86400);--sb-warn-soft:var(--warn-soft,#FDF3E3);
  --sb-shadow:var(--sh-3,0 10px 40px rgba(0,0,0,.12));
  --sb-tile:#EEF0F3;--sb-ink:#1F2430;
  --sb-sans:"Golos Text",var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI","PT Sans","Helvetica Neue",Arial,sans-serif);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sb-btn,:root:not([data-theme="light"]) .sb-pop{
  --sb-accent:var(--accent,#9B84FF);--sb-accent-2:var(--accent-2,#AE9BFF);--sb-acc-ink:var(--accent-ink,#9B84FF);
  --sb-soft:var(--accent-soft,#221E36);--sb-line:var(--accent-line,#3A3358);--sb-on:var(--on-accent,#16121F);
  --sb-surface:var(--surface,#1A1A1C);--sb-surface-2:var(--surface-2,#232326);
  --sb-border:var(--border,#2A2A2D);--sb-border-2:var(--border-2,#38383C);
  --sb-text:var(--text,#F2F2F3);--sb-text-2:var(--text-2,#A6A6AC);--sb-text-3:#93939A;
  --sb-ok:var(--ok,#5CC182);--sb-ok-soft:var(--ok-soft,#17281D);--sb-ok-ink:var(--ok-ink,#5CC182);--sb-on-ok:#0E1F14;
  --sb-warn:var(--warn,#D8A248);--sb-warn-soft:var(--warn-soft,#2A2213);
  --sb-shadow:var(--sh-3,0 10px 40px rgba(0,0,0,.6));
  --sb-tile:#2C2C31;--sb-ink:#F2F2F3;
}}
:root[data-theme="dark"] .sb-btn,:root[data-theme="dark"] .sb-pop{
  --sb-accent:var(--accent,#9B84FF);--sb-accent-2:var(--accent-2,#AE9BFF);--sb-acc-ink:var(--accent-ink,#9B84FF);
  --sb-soft:var(--accent-soft,#221E36);--sb-line:var(--accent-line,#3A3358);--sb-on:var(--on-accent,#16121F);
  --sb-surface:var(--surface,#1A1A1C);--sb-surface-2:var(--surface-2,#232326);
  --sb-border:var(--border,#2A2A2D);--sb-border-2:var(--border-2,#38383C);
  --sb-text:var(--text,#F2F2F3);--sb-text-2:var(--text-2,#A6A6AC);--sb-text-3:#93939A;
  --sb-ok:var(--ok,#5CC182);--sb-ok-soft:var(--ok-soft,#17281D);--sb-ok-ink:var(--ok-ink,#5CC182);--sb-on-ok:#0E1F14;
  --sb-warn:var(--warn,#D8A248);--sb-warn-soft:var(--warn-soft,#2A2213);
  --sb-shadow:var(--sh-3,0 10px 40px rgba(0,0,0,.6));
  --sb-tile:#2C2C31;--sb-ink:#F2F2F3;
}

/* ── Кнопка ──────────────────────────────────────────────────────────── */
/* Своя основа кнопки: вне приложения нет ни .tbtn, ни сброса button — без неё браузер рисовал выпуклую рамку. */
.sb-slot{display:inline-flex;align-items:center;flex:none;min-width:0}
.sb-slot[hidden],.sb-btn[hidden]{display:none!important}
.sb-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;margin:0;
  padding:5px 13px 5px 10px;border:1px solid var(--sb-line);border-radius:999px;background:var(--sb-soft);color:var(--sb-acc-ink);
  font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;letter-spacing:normal;text-align:center;text-decoration:none;
  text-transform:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
.sb-btn:hover{border-color:var(--sb-accent);color:var(--sb-acc-ink);background:var(--sb-soft)}
.sb-btn:focus-visible{outline:2px solid var(--sb-accent);outline-offset:2px}
.sb-btn[aria-expanded="true"]{border-color:var(--sb-accent);box-shadow:0 0 0 3px var(--sb-line)}
.sb-gw{position:relative;display:inline-flex;flex:none}
.sb-gi{display:block;width:17px;height:17px;flex:none;color:var(--sb-accent)}
.sb-dot{display:none;position:absolute;top:-3px;right:-4px;width:7px;height:7px;border-radius:50%;background:#F04438;
  box-shadow:0 0 0 2px var(--sb-soft)}
.sb-btn.sb-new .sb-dot{display:block}
.sb-short{display:none}
.sb-btn.sb-done{color:var(--sb-text-2);background:var(--sb-surface);border-color:var(--sb-border)}
.sb-btn.sb-done:hover{color:var(--sb-text);border-color:var(--sb-border-2)}
.sb-btn.sb-done .sb-gi{color:var(--sb-text-3)}
/* блик один раз за сеанс: полоса света едет по фону, поэтому кнопке не нужен overflow:hidden (он резал бы зону нажатия) */
.sb-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;
  background-size:250% 100%;background-position:120% 0}
.sb-btn.sb-sheen::after{opacity:1;animation:sb-sheen 1.1s .2s cubic-bezier(.65,0,.35,1) 1 both}
@keyframes sb-sheen{from{background-position:120% 0}to{background-position:-20% 0}}
/* в тесных строках (приложение, шапки) кнопка ниже 44 px — зону нажатия расширяем невидимо, соседей не задевая */
.sb-v-spa::before,.sb-v-tnav::before,.sb-v-karta::before{content:"";position:absolute;inset:-7px -3px}

/* приложение: верхняя строка, перед «Ваш тариф» — как было */
@media (max-width:900px){
  .sb-v-spa{padding:5px 11px 5px 9px;gap:5px}
  .sb-v-spa .sb-lbl{display:none}
  .sb-v-spa .sb-short{display:inline}
  .sb-v-spa.sb-done{padding:5px 9px}
  .sb-v-spa.sb-done .sb-short{display:none}
}
@media (max-width:350px){.sb-v-spa .sb-short{display:none}.sb-v-spa{padding:5px 9px}}
/* 10.10.2026 (замечание root-bf): на узком телефоне на странице проекта в шапке ещё и «Назад» — «Бонус» обрезался,
   поэтому при видимой «Назад» у бонуса только значок подарка */
@media (max-width:480px){.top:has(#backBtn:not(.hidden)) .sb-v-spa .sb-short{display:none}.top:has(#backBtn:not(.hidden)) .sb-v-spa{padding:5px 9px}}

/* блог и законы, компьютер: строкой во всю ширину боковой панели, сразу под меню — список «Свежее в блоге» длинный,
   и низ панели уходит за экран. Место под кнопку держим заранее, чтобы список не прыгал, когда она появится. */
.sb-slot-side{display:block;min-height:40px;margin:2px 0 0}
.sb-v-side{display:flex;width:100%;justify-content:flex-start;gap:10px;padding:9px 12px;border-radius:10px;font-size:14.5px;line-height:1.3}
.sb-v-side .sb-gi{width:18px;height:18px}
@media (max-width:900px){.sb-slot-side{display:none}}

/* блог и законы, телефон: значок 44×44 в верхней строке, в цветах кнопки «Войти» */
.sb-v-arttop{width:44px;height:44px;padding:0;gap:0;border:0;border-radius:12px;
  background:var(--pk-soft-bg,var(--sb-soft));color:var(--pk-accent,var(--sb-acc-ink))}
.sb-v-arttop:hover{background:var(--pk-soft-bg,var(--sb-soft));color:var(--pk-accent,var(--sb-acc-ink))}
.sb-v-arttop[aria-expanded="true"]{box-shadow:0 0 0 2px var(--sb-accent)}
.sb-v-arttop .sb-gi{width:22px;height:22px;color:currentColor}
.sb-v-arttop .sb-lbl,.sb-v-arttop .sb-short{display:none}
.sb-v-arttop .sb-dot{top:-4px;right:-5px;box-shadow:0 0 0 2px var(--pk-soft-bg,var(--sb-soft))}
.sb-v-arttop.sb-done{background:var(--sb-surface-2);color:var(--sb-text-2)}
/* У вошедшего в строке ещё инициалы и «Главная»: на узком телефоне подпись «Главная» прячем (остаются инициалы),
   на самых узких — плотнее промежутки и логотип чуть меньше, чтобы ничего не уезжало за край. */
@media (max-width:400px){body.artpage .arttop .tlogin.tme .tlab{display:none}body.artpage .arttop .tlogin.tme{padding:0 7px}}
@media (max-width:360px){body.artpage .arttop{gap:8px}}
@media (max-width:340px){body.artpage .arttop .tbrand{--rlg-h:30px}}

/* справочные страницы (тарифы, оплата, контакты…): в шапке перед меню; на 721–900 px — значком, чтобы меню
   не переносилось; на телефоне шапка в несколько строк — кнопка встаёт в первую, справа от логотипа */
.sb-v-tnav{font-size:14px;padding:6px 14px 6px 11px}
@media (min-width:721px) and (max-width:900px){.sb-v-tnav{padding:6px 9px;gap:0}.sb-v-tnav .sb-lbl{display:none}}
@media (max-width:720px){.top>.rlg{order:-2}.top>.sb-slot[data-sb-mount="tnav"]{order:-1;margin-left:auto}}

/* «Карта доказательств»: рядом с «Открыть сервис»; на телефоне — значком */
.sb-v-karta{font-size:14px;padding:6px 14px 6px 11px}
@media (max-width:480px){.sb-v-karta{width:44px;height:44px;padding:0;gap:0;border-radius:12px}.sb-v-karta .sb-lbl{display:none}
  .sb-v-karta .sb-gi{width:20px;height:20px}}

/* ── Панель (компьютер: всплывает у кнопки; ≤ 900 px: лист снизу) ────── */
/* Выше плашки cookie (.ymck, z-index 9000) на страницах вне приложения — иначе низ листа на телефоне закрыт ею. */
.sb-pop{position:fixed;z-index:9100;top:0;left:0;width:404px;max-width:calc(100vw - 24px);box-sizing:border-box;margin:0;
  padding:18px 18px 14px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  background:var(--sb-surface);color:var(--sb-text);border:1px solid var(--sb-border);border-radius:var(--r-l,18px);
  box-shadow:var(--sb-shadow);font-family:var(--sb-sans);font-size:14px;font-weight:400;line-height:1.45;letter-spacing:normal;
  text-align:left;outline:none;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity .18s ease,transform .45s cubic-bezier(.18,1.25,.4,1)}
.sb-pop[data-open]{opacity:1;transform:none}
.sb-pop[hidden]{display:none}
.sb-back{position:fixed;inset:0;z-index:9090;background:rgba(10,10,14,.42);opacity:0;transition:opacity .2s ease}
.sb-back[data-open]{opacity:1}
.sb-back[hidden]{display:none}
.sb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
/* Правила страниц для p, h2, ul, li, a (поля, цвета, маркеры) внутри панели не действуют — всё задано здесь. */
.sb-pop *{box-sizing:border-box}
.sb-pop p{margin:0;color:inherit}
.sb-pop a{color:inherit;text-decoration:none}
.sb-pop svg{display:block}
.sb-grab{display:none}
.sb-head{position:relative;padding-right:34px}
.sb-pop .sb-kick{margin:0 0 6px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--sb-acc-ink)}
.sb-pop .sb-t{margin:0;padding:0;font-family:inherit;font-size:19px;font-weight:700;line-height:1.22;letter-spacing:-.015em;
  color:var(--sb-text);text-transform:none;border:0;text-wrap:balance}
.sb-pop .sb-s{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--sb-text-2);text-wrap:pretty}
.sb-x{position:absolute;top:-11px;right:-11px;width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:0;
  border-radius:50%;background:transparent;color:var(--sb-text-2);cursor:pointer;font:inherit;font-size:22px;line-height:1}
.sb-x:hover{background:var(--sb-surface-2);color:var(--sb-text)}
.sb-x:focus-visible{outline:2px solid var(--sb-accent);outline-offset:-4px}
.sb-pop .sb-meter{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:12.5px;line-height:1.3;color:var(--sb-text-2);
  font-variant-numeric:tabular-nums}
.sb-bar{flex:1;height:4px;min-width:40px;border-radius:4px;background:var(--sb-surface-2);overflow:hidden}
.sb-bar i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:var(--sb-ok);
  transition:width .7s cubic-bezier(.22,1,.36,1)}
.sb-pop .sb-flash{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:9px 12px;border-radius:var(--r-m,14px);
  background:var(--sb-ok-soft);color:var(--sb-ok-ink);font-size:13.5px;font-weight:600;line-height:1.35}
.sb-pop .sb-flash.sb-warn{background:var(--sb-warn-soft);color:var(--sb-warn)}
.sb-flash svg{width:17px;height:17px;flex:none}
.sb-retry{flex:none;margin:0 0 0 auto;padding:6px 10px;border:1px solid currentColor;border-radius:999px;background:transparent;
  color:inherit;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.sb-login{display:block;width:100%;min-height:44px;margin:12px 0 2px;padding:11px 14px;border:0;border-radius:var(--r-m,14px);
  background:var(--sb-accent);color:var(--sb-on);font:inherit;font-size:14.5px;font-weight:650;line-height:1.3;text-align:center;cursor:pointer}
.sb-login:hover{background:var(--sb-accent-2)}
.sb-login:focus-visible{outline:2px solid var(--sb-accent);outline-offset:2px}

/* Сетка способов: как системное меню «Поделиться» — значок и подпись, без рамок; три в ряд. Группы: без VPN,
   «Нужен VPN» (в России заблокированы), «Ещё способы». Полученный бонус — галочка на значке. */
.sb-grp{margin:12px 0 0}
.sb-pop .sb-gh{display:flex;align-items:center;gap:10px;margin:0 2px 2px;font-size:12px;font-weight:600;line-height:1.3;color:var(--sb-text-3)}
.sb-gh::after{content:"";flex:1;height:1px;background:var(--sb-border)}
.sb-pop .sb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px}
.sb-pop .sb-grid li{margin:0;padding:0;min-width:0;list-style:none;color:inherit}
.sb-pop .sb-grid li::before,.sb-pop .sb-grid li::marker{content:none}
.sb-pop .sb-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  width:100%;height:100%;min-height:76px;margin:0;padding:9px 4px 8px;border:0;border-radius:14px;background:transparent;
  color:var(--sb-text);font:inherit;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s ease}
.sb-pop .sb-tile:hover{background:var(--sb-surface-2);color:var(--sb-text);text-decoration:none}
.sb-pop .sb-tile:focus-visible{outline:2px solid var(--sb-accent);outline-offset:-2px}
.sb-pop .sb-tile[aria-disabled="true"]{cursor:progress}
.sb-pop .sb-tile[aria-disabled="true"] .sb-ic{opacity:.55}
.sb-pop .sb-tile.sb-off .sb-ic{opacity:.7}
.sb-ic{position:relative;flex:none;width:42px;height:42px}
.sb-ic>svg{width:42px;height:42px;border-radius:12px}
.sb-tx{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;max-width:100%}
.sb-nm{display:block;max-width:100%;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--sb-text);overflow-wrap:anywhere}
.sb-cap{display:block;font-size:11.5px;line-height:1.25;color:var(--sb-text-3)}
/* «Ещё способы» (ссылка, системное меню, почта, СМС) — строками в две колонки, как действия в системном меню «Поделиться»:
   два способа на компьютере и четыре на телефоне ложатся ровно, без одинокой плитки во втором ряду */
.sb-grp-x .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}
.sb-pop .sb-grp-x .sb-tile{flex-direction:row;justify-content:flex-start;gap:10px;min-height:52px;padding:7px 8px;text-align:left}
.sb-grp-x .sb-tx{align-items:flex-start}
.sb-grp-x .sb-ic,.sb-grp-x .sb-ic>svg{width:36px;height:36px}
.sb-grp-x .sb-ic>svg{border-radius:11px}
.sb-grp-x .sb-badge{top:-4px;right:-5px;width:18px;height:18px}
.sb-grp-x .sb-badge svg{width:11px;height:11px}
.sb-badge{position:absolute;top:-5px;right:-6px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:var(--sb-ok);color:var(--sb-on-ok);box-shadow:0 0 0 2px var(--sb-surface)}
.sb-badge svg{width:12px;height:12px}
/* только что полученный бонус: галочка появляется с отскоком — единственное «праздничное» движение панели */
.sb-justgot .sb-badge{animation:sb-pop .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes sb-pop{from{transform:scale(0)}to{transform:none}}
/* у чёрной плитки X и нейтральных плиток в тёмной теме край сливался с панелью — тонкий светлый ободок */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sb-ic>svg{box-shadow:0 0 0 1px rgba(255,255,255,.08)}}
:root[data-theme="dark"] .sb-ic>svg{box-shadow:0 0 0 1px rgba(255,255,255,.08)}

.sb-link{margin:12px 0 0}
.sb-pop .sb-link label{display:block;margin:0 0 5px;font-size:12px;font-weight:600;line-height:1.3;color:var(--sb-text-3)}
.sb-pop .sb-link input{display:block;width:100%;min-height:40px;margin:0;padding:9px 11px;border:1px solid var(--sb-border);
  border-radius:10px;background:var(--sb-surface-2);color:var(--sb-text);font:inherit;font-size:13px;line-height:1.3;box-shadow:none}
.sb-pop .sb-link input:focus{outline:2px solid var(--sb-accent);outline-offset:1px}
.sb-pop .sb-follow{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--sb-text-2)}
.sb-pop .sb-follow a{color:var(--sb-acc-ink)}
.sb-pop .sb-follow a:hover{text-decoration:underline}
.sb-pop .sb-foot{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--sb-text-3)}

@media (max-width:900px){
  /* лист снизу: не выше экрана без 24 px, дальше прокрутка внутри; поле ссылки 16 px — иначе iPhone увеличит страницу */
  .sb-pop{left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;
    max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px)!important;border-radius:22px 22px 0 0;border-bottom:0;
    padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));opacity:1;transform:translateY(100%);
    transform-origin:bottom center!important;transition:transform .42s cubic-bezier(.22,1,.36,1)}
  .sb-pop[data-open]{transform:none}
  .sb-grab{display:block;width:40px;height:4px;border-radius:4px;background:var(--sb-border-2);margin:0 auto 12px}
  .sb-ic,.sb-ic>svg{width:44px;height:44px}
  .sb-ic>svg{border-radius:13px}
  .sb-pop .sb-link input{font-size:16px}
}
@media (max-width:380px){.sb-nm{font-size:12px}}
@media (max-width:359px){.sb-pop .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:299px){.sb-pop .sb-grp-x .sb-grid{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  .sb-pop,.sb-back,.sb-btn,.sb-pop .sb-tile,.sb-bar i{transition:none}
  .sb-btn.sb-sheen::after,.sb-justgot .sb-badge{animation:none}
}
@media print{.sb-slot,.sb-btn,.sb-pop,.sb-back{display:none!important}}