/* ============================================================
   MIRRIM · Онбординг блогера — компоненты, специфичные для
   этого направления (реф-ссылка/шеринг/статистика/площадки).
   Общие компоненты — /static/onboarding/ob-core.css + ob-wizard.css.
   ============================================================ */

/* multiselect площадок */
.ob-multi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ob-plat{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;border:1.5px solid var(--glass-line);background:var(--glass-soft);text-align:left;transition:.16s;font:600 13.5px/1.2 var(--font);color:var(--ink-2)}
.ob-plat:hover{border-color:var(--purple-200);background:var(--glass-strong)}
.ob-plat.on{border-color:var(--purple-500);background:rgba(124,58,237,.08);color:var(--purple-700)}
.ob-plat .bx{width:20px;height:20px;border-radius:6px;border:2px solid var(--ink-4);flex-shrink:0;display:grid;place-items:center;transition:.14s}
.ob-plat.on .bx{background:var(--purple-500);border-color:var(--purple-500)}
.ob-plat .bx svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:.14s}
.ob-plat.on .bx svg{opacity:1}

/* реферальная ссылка */
.ob-reflink{display:flex;align-items:center;gap:10px;padding:16px 18px;border-radius:16px;background:linear-gradient(120deg,rgba(124,58,237,.1),rgba(198,244,50,.08));border:1.5px solid var(--purple-200);margin-bottom:18px}
.ob-reflink .url{flex:1;font:700 14px/1.3 "SFMono-Regular",Consolas,monospace;color:var(--purple-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-reflink .copy{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:10px;background:var(--glass-strong);border:1px solid var(--glass-line);font:700 12.5px/1 var(--font);color:var(--ink-2);transition:.16s}
.ob-reflink .copy:hover{color:var(--purple-500);border-color:var(--purple-200)}
.ob-reflink .copy.done{background:rgba(93,211,60,.16);color:#2E9E1E;border-color:transparent}
.ob-reflink .copy svg{width:15px;height:15px;stroke-width:2.2;fill:none;stroke:currentColor}

/* кнопки шеринга */
.ob-share{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.ob-share a{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;background:var(--glass-soft);border:1.5px solid var(--glass-line);font:700 13px/1 var(--font);color:var(--ink-2);transition:.16s}
.ob-share a:hover{border-color:var(--purple-200);background:var(--glass-strong);color:var(--purple-500)}

/* статистика-заглушка */
.ob-refstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;text-align:left}
.ob-refstats .st{padding:18px 16px;border-radius:16px;border:1.5px solid var(--glass-line);background:var(--glass-soft)}
.ob-refstats .st .v{font:800 22px/1 var(--font);color:var(--purple-500)}
.ob-refstats .st .l{font:500 12px/1.3 var(--font);color:var(--ink-3);margin-top:6px}

@media (max-width:768px){
  .ob-multi{grid-template-columns:1fr 1fr}
}
@media (max-width:430px){
  .ob-multi{grid-template-columns:1fr}
  .ob-refstats{grid-template-columns:1fr}
  .ob-reflink{flex-wrap:wrap}
  .ob-reflink .url{width:100%}
}