/* «Чекап кабинета» — плавающий чек-лист первичной настройки (public/js/onboarding.js).
   Стиль — общий для Zefir: белые карточки, navy-акцент var(--red) (#2C4870), мягкие
   фоны var(--s1)/var(--s2), зелёный var(--green) для выполненного. Шрифт Manrope. */
.obc-root{position:fixed;right:20px;bottom:20px;z-index:400;font-family:var(--font-body);}

/* ── Свёрнутое состояние: «горящая» кнопка-напоминание ── */
.obc-pill{display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--s2);
  border-radius:50px;cursor:pointer;background:var(--white);color:var(--red);
  font:700 13px var(--font-body);box-shadow:0 8px 24px rgba(44,72,112,.18);
  animation:obc-glow 2.6s ease-in-out infinite;transition:transform .15s;}
.obc-pill:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(44,72,112,.24);}
.obc-pill img{width:18px;height:18px;border-radius:5px;}
.obc-pill-bar{width:52px;height:4px;border-radius:2px;background:var(--s2);overflow:hidden;}
.obc-pill-bar i{display:block;height:100%;border-radius:2px;background:var(--red);transition:width .3s;}
@keyframes obc-glow{
  0%,100%{box-shadow:0 8px 24px rgba(44,72,112,.18),0 0 0 0 rgba(44,72,112,.28);}
  50%{box-shadow:0 8px 24px rgba(44,72,112,.18),0 0 0 9px rgba(44,72,112,0);}
}

/* ── Развёрнутая карточка ── */
.obc-card{width:min(340px,calc(100vw - 32px));border-radius:18px;overflow:hidden;background:var(--white);
  box-shadow:0 18px 50px rgba(25,18,24,.18);border:1px solid var(--s2);animation:obc-in .25s ease;}
@keyframes obc-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.obc-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;}
.obc-logo{width:30px;height:30px;border-radius:8px;flex:none;}
.obc-head-t{flex:1;min-width:0;}
.obc-title{font-size:14px;font-weight:800;color:var(--text);line-height:1.25;}
.obc-sub{font-size:11.5px;color:var(--muted);margin-top:1px;}
/* Крестик: фиксированная квадратная кнопка, иконка строго по центру (flex), крупный хитбокс */
.obc-close{flex:none;width:30px;height:30px;padding:0;border:none;border-radius:8px;cursor:pointer;
  background:var(--s1);color:var(--muted);display:flex;align-items:center;justify-content:center;}
.obc-close:hover{background:var(--s2);color:var(--text);}

.obc-barwrap{display:flex;align-items:center;gap:10px;padding:2px 16px 12px;}
.obc-bar{flex:1;height:6px;border-radius:3px;background:var(--s2);overflow:hidden;}
.obc-bar i{display:block;height:100%;border-radius:3px;background:var(--red);transition:width .35s;}
.obc-barwrap span{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;}

.obc-steps{padding:2px 8px 8px;max-height:min(52vh,420px);overflow-y:auto;}
.obc-step{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;border-radius:10px;
  background:none;cursor:pointer;text-align:left;font-family:var(--font-body);}
.obc-step:not(.done):hover{background:var(--s1);}
.obc-ico{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--s2);color:transparent;font-size:12px;font-weight:800;transition:all .2s;background:var(--white);}
.obc-step.done .obc-ico{border-color:var(--green);background:var(--green);color:#fff;}
.obc-txt{flex:1;min-width:0;}
.obc-t{font-size:13px;font-weight:600;color:var(--text);}
.obc-step.done .obc-t{color:var(--muted);text-decoration:line-through;}
.obc-h{font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.obc-step.done .obc-h{display:none;}
.obc-chev{flex:none;color:var(--muted);font-size:15px;}
.obc-step.done .obc-chev{display:none;}

.obc-foot{padding:2px 12px 12px;text-align:center;}
.obc-never{border:none;background:none;cursor:pointer;font-size:11.5px;color:var(--muted);text-decoration:underline;}
.obc-never:hover{color:var(--text);}

/* ── Всё готово ── */
.obc-done-body{padding:22px 18px;text-align:center;}
.obc-done-emoji{font-size:34px;}
.obc-done-t{font-size:14px;font-weight:700;margin-top:8px;color:var(--text);}
.obc-done-s{font-size:12px;color:var(--muted);margin-top:4px;}

@media (max-width:640px){
  .obc-root{right:12px;bottom:12px;}
}