/* ==========================================================================
   remove-background-page.css — /remove-background «Удалить фон с фото» (013, 07.11.2026), стиль «Закат».
   Подключается ПОСЛЕ tool-page.css (.tp-*) и upscale-page.css (студия, сравнение .up-cmp с лупой,
   рабочее место, кинолента — общие компоненты 011). Здесь — только своё: шахматка прозрачности и
   подложка результата, вкладки примеров, действия, замена фона и AI-фон в панели, режимы.
   Классы и id инструмента (action-card, mode-card, bg-preset-btn, bg-gallery-card, #imagePreview…) —
   прежние: на них опирается js/remove-background.js. Меняется только вид.
   ========================================================================== */

/* ===== ШАХМАТКА ПРОЗРАЧНОСТИ + ПОДЛОЖКА (--rb-bg: '' → шахматка, цвет → однотонно) ===== */
.tp{--chk:repeating-conic-gradient(#d4d4d8 0% 25%,#fafafa 0% 50%) 50%/22px 22px}
.rb-chk{background:var(--chk)!important}
.rb-cmp .rb-cmp__bg{position:absolute;inset:0;z-index:0;display:none;pointer-events:none}
.rb-cmp--alpha .rb-cmp__bg{display:block;background:var(--chk)}
.rb-cmp--alpha[data-bg="white"] .rb-cmp__bg,.rb-cmp--alpha[data-bg="dark"] .rb-cmp__bg,.rb-cmp--alpha[data-bg="pick"] .rb-cmp__bg{background:var(--rb-bg)}
.rb-cmp .up-cmp__after{z-index:0}
.rb-cmp--alpha .up-cmp__after{object-fit:contain}
.rb-cmp .up-cmp__before{z-index:1}
/* подложка у окна результата задаётся на #imagePreview (data-bg/--rb-bg) — наследуем */
#imagePreview[data-bg="white"] .rb-cmp--alpha .rb-cmp__bg,#imagePreview[data-bg="dark"] .rb-cmp--alpha .rb-cmp__bg,#imagePreview[data-bg="pick"] .rb-cmp--alpha .rb-cmp__bg{background:var(--rb-bg)}
/* лупа «после» у прозрачного результата: подложку (шахматка/цвет) ставит JS вторым слоем фона */
.up-thumb__img.rb-chk{background:var(--chk)}
.up-thumb__img.rb-chk img,.up-scene img{object-fit:cover}
.up-mode__pic.rb-chk{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 40%,transparent 100%)}
.up-mode__pic.rb-chk img{object-fit:contain;object-position:50% 50%}
.up-mode__pic.rb-pic--top img{object-fit:cover;object-position:50% 8%}

/* переключатель подложки */
.rb-bgsw{display:grid;gap:6px;padding:10px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.rb-bgsw[hidden]{display:none!important}
.rb-bgsw__k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4)}
.rb-bgsw__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rb-bgsw__b{position:relative;display:flex;align-items:center;gap:7px;min-height:34px;padding:4px 8px;border-radius:10px;font-size:12.5px;font-weight:650;color:var(--text-3);cursor:pointer;background:rgba(255,255,255,.03);border:1px solid var(--line);transition:color .2s,border-color .2s,background .2s}
.rb-bgsw__b:hover{color:var(--text);border-color:rgba(244,114,182,.45)}
.rb-bgsw__b[aria-pressed="true"],.rb-bgsw__b--pick.is-on{color:#fff;border-color:rgba(244,114,182,.7);background:rgba(244,114,182,.12)}
.rb-bgsw__sw{flex:none;width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.25)}
.rb-bgsw__b--alpha .rb-bgsw__sw{background:repeating-conic-gradient(#d4d4d8 0% 25%,#fafafa 0% 50%) 50%/8px 8px}
.rb-bgsw__b--white .rb-bgsw__sw{background:#fff}
.rb-bgsw__b--dark .rb-bgsw__sw{background:#0a0e1a}
.rb-bgsw__b--pick .rb-bgsw__sw{background:var(--sw,conic-gradient(#fb7185,#f59e0b,#34d399,#60a5fa,#a78bfa,#fb7185))}
.rb-bgsw__b--pick:focus-within{outline:2px solid var(--pink);outline-offset:2px}
.rb-bgsw__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* в студии — под сценами (узкая колонка: только образцы цвета, подписи — для экранных чтецов);
   в киноленте — под кадром; у результата — строкой под окном */
.rb-studio .up-side .rb-bgsw{margin-top:auto}
.rb-studio .up-side .rb-bgsw__row{grid-template-columns:repeat(4,minmax(0,1fr))}
.rb-studio .up-side .rb-bgsw__b{justify-content:center;padding:4px}
.rb-studio .up-side .rb-bgsw__sw{width:22px;height:22px}
.rb-studio .up-side .rb-bgsw__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rb-reel .up-reel__screen{display:flex;flex-direction:column;align-items:center;gap:10px}
.rb-reel .up-reel__screen .rb-bgsw{width:100%;max-width:520px}
.rb-reel .rb-bgsw__row,.rb-bgsw--result .rb-bgsw__row{display:flex;flex-wrap:wrap}
.rb-reel .rb-bgsw__b,.rb-bgsw--result .rb-bgsw__b{flex:1 1 auto}
.rb-reel .rb-bgsw__t,.rb-bgsw--result .rb-bgsw__t{overflow:visible}
.rb-bgsw--result{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}

/* ===== HERO / СТУДИЯ ===== */
.rb-studio .up-side{gap:10px}
.rb-studio .up-cmp--hero .up-cmp__after{object-fit:cover}
.rb-studio .up-cmp--hero.rb-cmp--alpha .up-cmp__after{object-fit:cover}

/* ===== РАБОЧЕЕ МЕСТО: действие с фоном (3 кнопки) ===== */
.action-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.action-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:8px 4px;border-radius:11px;cursor:pointer;text-align:center;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--text-2);transition:background .2s,color .2s}
.action-card svg{width:18px;height:18px;color:var(--coral)}
.action-card:hover{background:rgba(255,255,255,.05);color:var(--text)}
.action-card.active{color:#fff;background:var(--grad-cta);box-shadow:0 8px 20px -10px rgba(236,72,153,.95)}
.action-card.active svg{color:#fff}
.action-card.locked{color:var(--text-3)}
.action-card .pro-badge{top:-9px;right:50%;transform:translateX(50%)}
.action-card:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* панели «Новый фон» и «Опишите новый фон» */
.rb-opts{gap:10px;padding:12px;border-radius:14px;background:rgba(244,114,182,.04);border:1px solid rgba(244,114,182,.18);animation:upIn .3s cubic-bezier(.2,.8,.2,1)}
.section-sublabel{display:block;font-size:12px;font-weight:650;color:var(--text-3);margin-bottom:6px}
.bg-presets-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bg-preset-btn{display:flex;align-items:center;gap:7px;min-height:36px;padding:4px 8px;border-radius:10px;font-size:12.5px;font-weight:650;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line);transition:all .2s}
.bg-preset-btn:hover{border-color:rgba(244,114,182,.45);color:var(--text)}
.bg-preset-btn.active{color:#fff;border-color:rgba(244,114,182,.75);background:rgba(244,114,182,.12)}
.preset-color{flex:none;width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.3)}
.preset-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.color-picker-wrapper{position:relative}
.color-picker-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.color-picker-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:4px 10px;border-radius:10px;font-size:13px;font-weight:650;color:var(--text-2);background:rgba(255,255,255,.03);border:1px dashed var(--line-2);transition:border-color .2s,color .2s}
.color-picker-btn:hover{color:var(--text);border-color:rgba(244,114,182,.5)}
.color-preview{flex:none;width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.3)}
.bg-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:76px;gap:6px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(244,114,182,.35) transparent}
.bg-gallery-card{display:flex;flex-direction:column;gap:4px;padding:3px;border-radius:11px;scroll-snap-align:start;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--line);transition:border-color .2s,transform .2s}
.bg-gallery-card:hover{border-color:rgba(244,114,182,.45);transform:translateY(-2px)}
.bg-gallery-card[aria-selected="true"]{border-color:rgba(244,114,182,.9);box-shadow:0 0 0 2px rgba(244,114,182,.3)}
.bg-gallery-card-inner{position:relative;display:block;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg-3)}
.bg-gallery-card-inner img{width:100%;height:100%;object-fit:cover}
.bg-gallery-card-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(219,39,119,.45);opacity:0;transition:opacity .2s}
.bg-gallery-card[aria-selected="true"] .bg-gallery-card-overlay{opacity:1}
.bg-gallery-check{width:22px;height:22px;color:#fff}
.bg-gallery-label{padding:0 2px 1px;font-size:10.5px;font-weight:600;line-height:1.2;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-bg-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:38px;border-radius:11px;font-size:13px;font-weight:700;color:var(--text-2);background:rgba(255,255,255,.03);border:1px dashed var(--line-2);transition:all .2s}
.upload-bg-btn svg{width:16px;height:16px;color:var(--coral)}
.upload-bg-btn:hover{color:var(--text);border-color:rgba(244,114,182,.55);background:rgba(244,114,182,.06)}

/* AI-фон: описание, стили, «Дополнительно» */
.ai-prompt-textarea{width:100%;min-height:76px;padding:10px 12px;border-radius:12px;font:inherit;font-size:13.5px;line-height:1.45;color:var(--text);resize:vertical;background:rgba(0,0,0,.28);border:1px solid var(--line-2);transition:border-color .2s}
.ai-prompt-textarea:focus{outline:none;border-color:rgba(244,114,182,.7);box-shadow:0 0 0 3px rgba(244,114,182,.15)}
.ai-prompt-textarea::placeholder{color:var(--text-4)}
.ai-prompt-label{display:block;font-size:12px;font-weight:650;color:var(--text-3);margin-bottom:6px}
.ai-prompt-hint{margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--text-4)}
.preset-chips,.negative-chips,.lighting-control{display:flex;flex-wrap:wrap;gap:6px}
.preset-chip,.neg-chip,.light-btn{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:650;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line-2);transition:all .2s}
.preset-chip:hover,.neg-chip:hover,.light-btn:hover{color:var(--text);border-color:rgba(244,114,182,.5)}
.preset-chip.active,.neg-chip.active,.light-btn.active{color:#fff;border-color:transparent;background:var(--grad-cta)}
.negative-chips{margin-top:6px}
.advanced-toggle-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 10px;border-radius:10px;font-size:13px;font-weight:700;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.advanced-toggle-btn svg{width:14px;height:14px;margin-left:auto;transition:transform .25s}
.advanced-toggle-btn.expanded svg{transform:rotate(90deg)}
.advanced-count{font:600 11px var(--mono);color:var(--text-4)}
.advanced-content{display:grid;gap:12px;margin-top:10px}
.guidance-value{float:right;font:700 12px var(--mono);color:var(--text)}
.guidance-slider{width:100%;accent-color:#f472b6}
.guidance-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text-4)}
.size-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.size-option{position:relative;cursor:pointer}
.size-option input{position:absolute;opacity:0;width:1px;height:1px}
.size-card{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);transition:all .2s}
.size-option input:checked + .size-card{border-color:rgba(244,114,182,.8);background:rgba(244,114,182,.12)}
.size-option input:focus-visible + .size-card{outline:2px solid var(--pink);outline-offset:2px}
.size-name{font:700 12.5px var(--mono);color:var(--text)}
.size-desc{font-size:10.5px;color:var(--text-4)}

/* экспорт: маска и подсказка про форматы */
.download-mask-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border-radius:12px;font-size:13.5px;font-weight:700;color:var(--text-2);background:rgba(255,255,255,.04);border:1px solid var(--line-2);transition:all .2s}
.download-mask-btn svg{width:16px;height:16px}
.download-mask-btn:hover{color:var(--text);border-color:rgba(244,114,182,.5)}
.download-mask-btn.hidden{display:none}
.rb-export-note{flex-basis:100%;margin:0;font-size:12px;line-height:1.45;color:var(--text-4)}
.export-zone .up-next{flex-basis:100%}

/* окно результата: прозрачный результат — подложка-шахматка видна и вокруг кадра */
.rb-preview.rb-preview--alpha{background:radial-gradient(circle at 50% 38%,rgba(244,114,182,.08),transparent 62%),linear-gradient(180deg,rgba(13,19,34,.8),rgba(10,14,26,.9))}
.rb-preview .up-cmp--result.rb-cmp--alpha .up-cmp__after{object-fit:contain}

/* ===== 01 ПРИМЕРЫ: вкладки ===== */
.rb-tabs{display:flex;flex-wrap:wrap;gap:8px}
.rb-tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:700;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line-2);transition:all .2s}
.rb-tab:hover{color:var(--text);border-color:rgba(244,114,182,.5)}
.rb-tab[aria-selected="true"]{color:#fff;border-color:transparent;background:var(--grad-cta);box-shadow:0 10px 24px -12px rgba(236,72,153,.9)}
.rb-tab__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font:700 11px var(--mono);background:rgba(0,0,0,.28)}
.rb-reel .up-thumb[hidden]{display:none}
.rb-facts dd{white-space:normal;line-height:1.35}
.rb-reel .up-cmp--reel{height:min(560px,68vh)}

/* ===== 04 ВОЗМОЖНОСТИ (3 карточки) и 05 РЕЖИМЫ ===== */
.up-modes.rb-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.rb-actions .up-mode__pic{height:170px}
.rb-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rb-mode{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-lg)}
.rb-mode__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(145deg,rgba(251,113,133,.5),rgba(245,158,11,.3));border:1px solid rgba(251,113,133,.45)}
.rb-mode__ico svg{width:19px;height:19px}
.rb-mode h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 4px;font-size:16px;font-weight:750;color:var(--text)}
.rb-mode p{font-size:13.5px;line-height:1.5;color:var(--text-3)}
.rb-mode--pro{border-color:rgba(251,191,36,.28);background:linear-gradient(180deg,rgba(245,158,11,.06),transparent 60%),var(--panel)}
.rb-mode--pro .rb-mode__ico{background:linear-gradient(145deg,rgba(251,191,36,.55),rgba(234,88,12,.35));border-color:rgba(251,191,36,.55)}

/* ===== АДАПТИВ ===== */
@media (max-width:1180px){
  .rb-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  /* телефон/планшет: действие, кнопка и счётчик — сразу под фото; режим, фоны и опции — ниже */
  .panel-section--action{order:1}
  #replaceBackgroundOptions{order:2}
  #aiRedrawOptions{order:2}
  .rb-studio .panel-section--run{order:3}
  .rb-studio .panel-section--usage{order:4}
  .rb-studio .panel-section--mode{order:5}
  .rb-studio .panel-section--options{order:6}
  .up-modes.rb-actions{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(320px,80vw);overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:2px var(--gut) 10px;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none}
  .up-modes.rb-actions::-webkit-scrollbar{display:none}
  .rb-actions .up-mode{scroll-snap-align:start}
  /* под кадром во всю ширину — снова с подписями; кнопки переносятся строкой, а не режут подпись */
  .rb-studio .up-side .rb-bgsw__row{display:flex;flex-wrap:wrap}
  .rb-studio .up-side .rb-bgsw__b{flex:1 1 auto;justify-content:flex-start;padding:4px 8px}
  .rb-studio .up-side .rb-bgsw__sw{width:18px;height:18px}
  .rb-studio .up-side .rb-bgsw__t{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .rb-reel .up-cmp--reel{height:auto}
}
@media (max-width:600px){
  .rb-modes{grid-template-columns:1fr;gap:8px}
  .rb-mode{padding:12px 14px}
  .rb-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;scrollbar-width:none}
  .rb-tabs::-webkit-scrollbar{display:none}
  .rb-tab{flex:none;height:38px;padding:0 13px;font-size:13.5px}
  .rb-bgsw{padding:8px}
  .rb-bgsw__b{padding:4px 6px;font-size:12px;gap:5px}
  .rb-bgsw__sw{width:16px;height:16px}
  .rb-bgsw--result{grid-template-columns:1fr}
  .download-mask-btn{width:100%;justify-content:center}
  .action-card{min-height:54px;font-size:12px}
  .bg-presets-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:380px){
  /* 320 px: «Создать аккаунт бесплатно» не влезает в одну строку — переносим, а не обрезаем */
  .tp-price .tp-btn{height:auto;min-height:48px;padding:10px 14px;white-space:normal;text-align:center;line-height:1.3}
}

/* ==========================================================================
   07 ГАЙД (013, v2 по замечанию владельца 07.11): тот же SEO-текст, но не «простыня»:
   темы-якоря, сетка 12 колонок разной ширины, у каждой карточки — своя схема/картинка,
   оговорки — плашкой. Схемы aria-hidden (кроме кнопок фона у флакона).
   ========================================================================== */
.rb-gnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.rb-gnav a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:650;color:var(--text-2);background:rgba(255,255,255,.035);border:1px solid var(--line-2);transition:color .2s,border-color .2s,background .2s,transform .2s}
.rb-gnav a:hover{color:#fff;border-color:rgba(244,114,182,.55);background:rgba(244,114,182,.1);transform:translateY(-1px)}
.rb-gnav svg{width:15px;height:15px;flex:none;color:var(--coral)}
.rb-guide{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.rb-g{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);scroll-margin-top:96px;transition:transform .3s,border-color .3s}
.rb-g:hover{transform:translateY(-3px);border-color:rgba(244,114,182,.3)}
.rb-g:target{border-color:rgba(244,114,182,.6);box-shadow:0 0 0 3px rgba(244,114,182,.18)}
.rb-g--w5{grid-column:span 5}.rb-g--w6{grid-column:span 6}.rb-g--w7{grid-column:span 7}.rb-g--w12{grid-column:1/-1}
/* широкая карточка: схема и текст рядом (flip — схема справа) */
.rb-g--row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rb-g--row .rb-gv-wipe__frame{flex:1 1 auto;aspect-ratio:auto;min-height:240px}
.rb-g--row .rb-gv-flow{flex-wrap:nowrap;gap:4px}
.rb-g--row .rb-gv-flow span{padding:0 8px;font-size:12px;gap:5px}
.rb-g--row.rb-g--flip .rb-g__viz{order:2;border-right:0;border-left:1px solid var(--line)}
.rb-g--row .rb-g__viz{border-bottom:0;border-right:1px solid var(--line)}
.rb-g__viz{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px;background:radial-gradient(120% 90% at 50% 0%,rgba(244,114,182,.09),transparent 60%),rgba(6,9,18,.45);border-bottom:1px solid var(--line)}
.rb-g__body{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.2vw,24px)}
.rb-g__head{display:flex;align-items:center;gap:10px}
.rb-g__ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(145deg,rgba(251,113,133,.5),rgba(245,158,11,.3));border:1px solid rgba(251,113,133,.45);box-shadow:0 10px 24px -12px rgba(236,72,153,.8)}
.rb-g__ico svg{width:18px;height:18px}
.rb-g__k{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:600 11.5px/1 var(--mono);letter-spacing:.02em;color:#fecdd3;background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.25)}
.rb-g h3{font-size:clamp(17px,1.6vw,19px);line-height:1.3;font-weight:750;letter-spacing:-.01em;color:var(--text);margin:0}
.rb-g p{font-size:15px;line-height:1.62;color:var(--text-3);margin:0;text-wrap:pretty}
.rb-g strong,.rb-g b{color:var(--text);font-weight:650}
.rb-g a{color:var(--pink);border-bottom:1px solid rgba(244,114,182,.35);transition:color .2s,border-color .2s}
.rb-g a:hover{color:var(--orange);border-color:var(--orange)}
/* шаги — плашки с номерами */
.rb-g__steps{display:grid;gap:8px;counter-reset:rg}
.rb-g__steps li{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px 8px 10px;border-radius:12px;font-size:14.5px;line-height:1.45;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line);counter-increment:rg}
.rb-g__steps li::before{content:counter(rg,decimal-leading-zero);flex:none;display:grid;place-items:center;width:30px;height:26px;border-radius:8px;font:700 11.5px/1 var(--mono);color:#fff;background:var(--grad-cta);box-shadow:0 6px 14px -6px rgba(236,72,153,.9)}
/* оговорка / совет — плашкой */
.rb-g .rb-g__note{display:flex;gap:10px;padding:11px 13px;border-radius:12px;font-size:14px;line-height:1.55;color:var(--text-3);background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2)}
.rb-g .rb-g__note > svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--amber)}
.rb-g .rb-g__note--tip{background:rgba(244,114,182,.07);border-color:rgba(244,114,182,.22)}
.rb-g .rb-g__note--tip > svg{color:var(--pink)}
/* шахматка для схем (мельче, чем у результата) */
.rb-gv-chk{background:repeating-conic-gradient(#d4d4d8 0% 25%,#fafafa 0% 50%) 50%/16px 16px}
.rb-g__viz svg{width:16px;height:16px;flex:none}
/* — 1. «Как убрать фон»: линия проходит по кроссовку и стирает фон до шахматки (только пока на экране) — */
.rb-gv-wipe__frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.rb-gv-wipe__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.rb-gv-wipe__before{clip-path:inset(0 0 0 0);animation:rbWipe 6.5s cubic-bezier(.6,0,.4,1) infinite;animation-play-state:paused}
.rb-gv-wipe__scan{position:absolute;top:0;bottom:0;left:0;width:0;pointer-events:none;animation:rbScan 6.5s cubic-bezier(.6,0,.4,1) infinite;animation-play-state:paused;opacity:0}
.rb-gv-wipe__scan i{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,#fb7185,#f472b6,#f59e0b);box-shadow:0 0 14px 2px rgba(244,114,182,.75),0 0 40px 8px rgba(245,158,11,.3)}
.is-play .rb-gv-wipe__before,.is-play .rb-gv-wipe__scan{animation-play-state:running}
@keyframes rbWipe{0%,14%{clip-path:inset(0 0 0 0)}52%,84%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}
@keyframes rbScan{0%,14%{left:0;opacity:0}18%,48%{opacity:1}52%,84%{left:100%;opacity:0}100%{left:0;opacity:0}}
.rb-gv-flow{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.rb-gv-flow span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:9px;font-size:12.5px;font-weight:650;color:var(--text-3);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.rb-gv-flow span svg{width:14px;height:14px;color:var(--coral)}
.rb-gv-flow span.on{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:0 8px 18px -10px rgba(236,72,153,.9)}
.rb-gv-flow span.on svg{color:#fff}
.rb-gv-flow__arr{width:14px!important;height:14px!important;color:var(--text-4)}

/* — 2. «Прозрачный фон»: PNG / WEBP — прозрачность, JPG — белый — */
.rb-gv-fmt{flex-direction:row;align-items:stretch;gap:10px}
.rb-gv-fmt__i{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;margin:0}
.rb-gv-fmt__pic{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line-2)}
.rb-gv-fmt__pic.is-white{background:#fff}
.rb-gv-fmt__pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.55)}
.rb-gv-fmt__i figcaption{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.rb-gv-fmt__i figcaption b{font:700 13px/1 var(--mono);color:var(--text);letter-spacing:.04em}
.rb-gv-fmt__i figcaption span{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600}
.rb-gv-fmt__i figcaption svg{width:12px;height:12px}
.rb-gv-fmt .ok{color:var(--green)}
.rb-gv-fmt .no{color:var(--red)}
.rb-gv-fmt__i.is-no .rb-gv-fmt__pic{border-color:rgba(248,113,113,.35)}

/* — 3. «Заменить фон»: под чашкой сам меняется фон (кнопки — можно выбрать) — */
.rb-gv-swap__stage{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.rb-gv-swap__bg{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.rb-gv-swap__bg--alpha{background:repeating-conic-gradient(#d4d4d8 0% 25%,#fafafa 0% 50%) 50%/16px 16px}
.rb-gv-swap__bg--white{background:#fff}
.rb-gv-swap__bg--gray{background:#9ca3af}
.rb-gv-swap__bg--grad{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 45%,#3b82f6 100%)}
.rb-gv-swap__bg--photo{background:#f4c7c3 url(/assets/remove-background/examples/guide-bd-studio.webp) 50% 30%/cover no-repeat}
.rb-gv-swap__stage[data-bg="alpha"] .rb-gv-swap__bg--alpha,.rb-gv-swap__stage[data-bg="white"] .rb-gv-swap__bg--white,
.rb-gv-swap__stage[data-bg="gray"] .rb-gv-swap__bg--gray,
.rb-gv-swap__stage[data-bg="grad"] .rb-gv-swap__bg--grad,.rb-gv-swap__stage[data-bg="photo"] .rb-gv-swap__bg--photo{opacity:1}
.rb-gv-swap__stage img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 82%}
.rb-gv-swap__row{display:flex;justify-content:center;gap:8px}
.rb-gv-swap__row button{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);transition:border-color .2s,background .2s,transform .2s}
.rb-gv-swap__row button:hover{border-color:rgba(244,114,182,.55);transform:translateY(-1px)}
.rb-gv-swap__row button[aria-pressed="true"]{border-color:rgba(244,114,182,.85);background:rgba(244,114,182,.14);box-shadow:0 0 0 3px rgba(244,114,182,.14)}
.rb-gv-swap__row .sw{width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.3)}
.sw--alpha{background:repeating-conic-gradient(#d4d4d8 0% 25%,#fafafa 0% 50%) 50%/8px 8px}
.sw--white{background:#fff}.sw--gray{background:#9ca3af}
.sw--grad{background:linear-gradient(135deg,#6366f1,#8b5cf6 45%,#3b82f6)}
.sw--photo{background:#f4c7c3 url(/assets/remove-background/examples/guide-bd-studio.webp) 50% 30%/cover}
/* — 4. «Белый фон для маркетплейса»: макет карточки товара (без цен и логотипов) + галочки — */
.rb-gv-card{flex-direction:row;align-items:center;gap:16px}
.rb-gv-card__item{flex:0 0 40%;max-width:200px;padding:8px;border-radius:16px;background:#fff;box-shadow:0 24px 44px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
.rb-gv-card__pic{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#fff}
.rb-gv-card__pic img{width:100%;height:100%;object-fit:contain;padding:6%}
.rb-gv-card__fav{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;background:var(--grad-cta)}
.rb-gv-card__fav svg{width:13px!important;height:13px!important}
.rb-gv-card__meta{display:grid;gap:6px;padding:10px 4px 4px}
.rb-gv-card__meta i{display:block;height:8px;border-radius:4px;background:#e5e7eb}
.rb-gv-card__meta i.hi{height:11px;background:#d1d5db}
.rb-gv-card__meta .w70{width:70%}.rb-gv-card__meta .w45{width:45%}.rb-gv-card__meta .w55{width:55%}
.rb-gv-card__checks{flex:1;display:grid;gap:8px;min-width:0}
.rb-gv-card__checks li{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;font-size:13px;font-weight:600;line-height:1.35;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.rb-gv-card__checks svg{width:15px!important;height:15px!important;color:var(--green)}
.rb-gv-card__checks li:last-child svg{color:var(--coral)}

/* — 5. «Без потери качества»: лупа на прядях + цифры — */
.rb-gv-q{flex-direction:row;align-items:center;gap:16px}
.rb-gv-q__lens{position:relative;flex:none;width:clamp(120px,13vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(244,114,182,.5),0 0 0 7px rgba(244,114,182,.12),0 22px 40px -20px rgba(0,0,0,.9)}
.rb-gv-q__lens img{width:100%;height:100%;object-fit:cover}
.rb-gv-q__zoom{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font:700 11px/1 var(--mono);color:#fff;background:rgba(10,14,26,.82)}
.rb-gv-q__zoom svg{width:12px!important;height:12px!important;color:var(--amber)}
.rb-gv-q__stats{flex:1;display:grid;gap:8px;min-width:0;margin:0}
.rb-gv-q__stats div{padding:8px 11px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.rb-gv-q__stats dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.rb-gv-q__stats dd{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:2px 0 0;font-size:13.5px;font-weight:650;color:var(--text)}
.rb-gv-q__stats dd svg{width:13px!important;height:13px!important;color:var(--text-4)}
.rb-gv-q__stats .hi{color:var(--green)}

/* — 6. «Белый или чёрный фон»: логотип на белом → без фона → на тёмном + шкала сложности — */
.rb-gv-plain__row{display:flex;align-items:center;justify-content:center;gap:8px}
.rb-gv-plain__row figure{flex:1 1 0;min-width:0;max-width:120px;display:flex;flex-direction:column;gap:6px;margin:0}
.rb-gv-plain__pic{aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line-2)}
.rb-gv-plain__pic.is-white{background:#fff}
.rb-gv-plain__pic.is-dark{background:#0a0e1a}
.rb-gv-plain__pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.45)}
.rb-gv-plain__row figcaption{text-align:center;font-size:11.5px;font-weight:600;color:var(--text-4)}
.rb-gv-plain__arr{color:var(--pink);margin-bottom:20px}
.rb-gv-plain__scale{display:grid;gap:6px}
.rb-gv-plain__scale li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;border-radius:11px;font-size:13px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.rb-gv-plain__scale .tp-dots i{height:16px;width:8px}
/* — 7. «Какая нейросеть»: режим → модель — */
.rb-g--model{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.rb-g--model .rb-g__body{grid-row:span 2}
.rb-gv-map{display:grid;gap:8px;padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px) 0}
.rb-gv-map li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.rb-gv-map li.is-pro{border-color:rgba(251,191,36,.25);background:linear-gradient(90deg,rgba(245,158,11,.06),transparent 70%),rgba(255,255,255,.02)}
.rb-gv-map__mode{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text)}
.rb-gv-map__mode svg{width:16px;height:16px;flex:none;color:var(--coral)}
.rb-gv-map li.is-pro .rb-gv-map__mode svg{color:var(--amber)}
.rb-gv-map__arr{width:16px;height:16px;color:var(--pink)}
.rb-gv-map__model{display:flex;flex-direction:column;font:700 13px/1.25 var(--mono);color:#fecdd3}
.rb-gv-map__model small{font-family:inherit;font-size:12px;font-weight:500;line-height:1.3;color:var(--text-4)}
.rb-gv-map__foot{display:flex;flex-wrap:wrap;gap:8px;padding:12px clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px)}
.rb-gv-map__foot span{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--text-2);background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.22)}
.rb-gv-map__foot svg{width:13px;height:13px;flex:none;color:var(--green)}
.rb-gv-map__foot .pro{background:rgba(251,191,36,.07);border-color:rgba(251,191,36,.25)}
.rb-gv-map__foot .pro svg{color:var(--amber)}

/* карточки появляются по очереди */
.tp-js #guideSection .rb-g{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),border-color .3s}
.tp-js #guideSection.in .rb-g{opacity:1;transform:none}
#guideSection.in .rb-g:nth-child(2){transition-delay:.06s}#guideSection.in .rb-g:nth-child(3){transition-delay:.12s}
#guideSection.in .rb-g:nth-child(4){transition-delay:.18s}#guideSection.in .rb-g:nth-child(5){transition-delay:.24s}
#guideSection.in .rb-g:nth-child(6){transition-delay:.3s}#guideSection.in .rb-g:nth-child(7){transition-delay:.36s}
.tp-js #guideSection.in .rb-g:hover{transform:translateY(-3px)}

/* адаптив гайда */
@media (max-width:1100px){
  .rb-g--w5,.rb-g--w6,.rb-g--w7{grid-column:span 6}
  .rb-g--row{display:flex}
  .rb-g--row .rb-g__viz,.rb-g--row.rb-g--flip .rb-g__viz{order:0;border-right:0;border-left:0;border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  .rb-gnav{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut)) 16px;padding:0 var(--gut) 4px;scrollbar-width:none}
  .rb-gnav::-webkit-scrollbar{display:none}
  .rb-gnav a{flex:none}
  .rb-guide{grid-template-columns:1fr;gap:12px}
  .rb-g--w5,.rb-g--w6,.rb-g--w7,.rb-g--w12{grid-column:auto}
  .rb-g--model{display:flex;align-items:stretch}
  .rb-g__viz{padding:14px}
  .rb-gv-wipe__frame,.rb-gv-swap__stage{aspect-ratio:16/10}
  .rb-g p{font-size:14.5px}
}
@media (max-width:420px){
  .rb-gv-card{gap:12px}
  .rb-gv-card__item{flex:0 0 42%;max-width:none;padding:6px}
  .rb-gv-card__checks li{padding:8px 9px;font-size:12px;gap:7px}
  .rb-gv-q{flex-direction:column;align-items:stretch}
  .rb-gv-q__lens{align-self:center;width:132px}
  .rb-gv-q__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .rb-gv-q__stats div:first-child{grid-column:1/-1}
  .rb-gv-q__stats div{padding:7px 9px}
  .rb-gv-q__stats dt{font-size:10px;letter-spacing:.06em}
  .rb-gv-q__stats dd{font-size:12.5px}
  .rb-gv-map li{grid-template-columns:1fr;gap:4px}
  .rb-gv-map__arr{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* без движения: кроссовок — половина «до», половина «после» */
  .rb-gv-wipe__before{animation:none!important;clip-path:inset(0 50% 0 0)}
  .rb-gv-wipe__scan{animation:none!important;opacity:1;left:50%}
  .tp-js #guideSection .rb-g{opacity:1;transform:none}
}