/* ======= Общая оболочка страниц AIBrofist =======
   Одинаковая шапка и сетка на телефоне и на компьютере. */

:root{
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --soft:#f6f8fa;
  --blue:#2196F3; --green:#22a45d; --red:#e04141; --gold:#b8860b;
  --hdr:56px;
  /* лёгкая подсветка под курсором для обычных (не залитых цветом) кнопок:
     тёмный полупрозрачный слой поверх светлой темы, светлый — поверх тёмной.
     Кнопке не нужно знать, какая сейчас тема — цвет меняет сама переменная. */
  --hover: rgba(17,24,39,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:#fff;-webkit-text-size-adjust:100%}

/* ---------- шапка ---------- */
/* Шапка не должна переноситься на несколько строк: вендорные страницы
   тащат за собой свои правила, поэтому фиксируем всё явно. */
.bfHead{position:sticky;top:0;z-index:60;height:var(--hdr);min-height:var(--hdr);
  background:#f5f5f5;border-bottom:1px solid var(--line);
  display:flex !important;flex-wrap:nowrap !important;align-items:center;
  gap:6px;padding:0 8px;box-sizing:border-box;width:100%;overflow:hidden}
.bfHead > *{float:none !important}
.bfBrand{display:flex !important;align-items:center;gap:7px;text-decoration:none;
  color:#000;flex:0 0 auto;white-space:nowrap}
.bfBrand b{font-size:19px;letter-spacing:.5px}
.bfBrandMark{width:14px;height:26px;position:relative;flex:0 0 auto}
.bfBrandMark i{position:absolute;left:0;background:#000;display:block}
.bfBrandMark i:nth-child(1){top:0;width:14px;height:14px;border-radius:50%}
.bfBrandMark i:nth-child(2){top:17px;width:14px;height:9px;border-radius:3px}
.bfNav{display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:2px;
  flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;height:100%}
.bfNav::-webkit-scrollbar{display:none}
.bfNav a,.bfNav button{background:none;border:none;font:inherit;color:var(--ink);
  padding:9px 11px;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap;font-size:15px}
.bfNav a:hover,.bfNav button:hover{background:var(--hover)}
.bfNav a.on,.bfNav button.on{background:var(--blue);color:#fff}
.bfRight{flex:0 0 auto;display:flex !important;flex-wrap:nowrap !important;
  align-items:center;gap:8px;margin-left:auto}
.bfCoin{display:flex;align-items:center;gap:4px;font-weight:700;color:var(--gold);
  font-size:15px;white-space:nowrap}
.bfAvatar{border:1px solid #cfd6de;cursor:pointer}

/* ---------- каркас страницы ---------- */
.bfWrap{max-width:1080px;margin:0 auto;padding:16px 14px 90px}
.bfTitle{font-size:24px;font-weight:800;margin:4px 0 2px}
.bfSub{color:var(--muted);font-size:14px;margin-bottom:14px}

.bfPanel{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px}
.bfBtn{display:block;width:100%;font-size:16px;padding:12px 0;border-radius:10px;
  border:1px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;margin-bottom:9px}
.bfBtn:hover{background:var(--blue);color:#fff}
.bfBtn.ghost{border-color:#cfd6de;color:var(--muted)}
.bfBtn.ghost:hover{background:var(--hover);color:var(--ink)}
.bfBtn.go{background:var(--blue);color:#fff}
.bfBtn.go:hover{background:#0d7fd4}
.bfInput,.bfSelect{width:100%;font-size:15px;padding:11px 12px;border:1px solid #cfd6de;
  border-radius:10px;background:#fff;color:var(--ink);margin-bottom:9px}
.bfMsg{text-align:center;font-size:14px;min-height:19px;margin-top:4px}

/* ---------- сетка карточек ---------- */
.bfGrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bfCard{border:2px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;background:#fff}
.bfCard.on{border-color:var(--blue)}
.bfCard svg{display:block;margin:0 auto}
.bfCardName{font-size:13px;color:#374151;margin:6px 0 2px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfCardMeta{font-size:12px;color:var(--muted);margin-bottom:6px}
.bfMini{font-size:13px;padding:8px 0;border-radius:8px;border:1px solid var(--blue);
  background:#fff;color:var(--blue);cursor:pointer;width:100%}
.bfMini:hover{background:var(--blue);color:#fff}
.bfMini.own{border-color:var(--green);color:var(--green)}
.bfMini.own:hover{background:var(--green);color:#fff}
.bfMini[disabled]{border-color:#cbd5e1;color:#94a3b8;background:#f8fafc;cursor:default}

/* ---------- чипы-слоты ---------- */
.bfChips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.bfChip{border:1px solid #d7dee6;border-radius:22px;padding:8px 16px;cursor:pointer;
  font-size:14px;background:#fff;white-space:nowrap}
.bfChip.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- вкладки ---------- */
.bfTabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;
  scrollbar-width:none}
.bfTabs::-webkit-scrollbar{display:none}
.bfTab{padding:11px 18px;cursor:pointer;font-weight:700;color:#8b93a1;
  border-bottom:3px solid transparent;white-space:nowrap}
.bfTab.on{color:var(--ink);border-bottom-color:var(--blue)}

/* ---------- оценки ---------- */
.bfVote{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.bfVote button{flex:1;font-size:13px;padding:6px 0;border-radius:8px;border:1px solid #d7dee6;
  background:#fff;cursor:pointer;color:#4b5563}
.bfVote button.up.on{border-color:var(--green);color:var(--green);background:#f0fdf4}
.bfVote button.down.on{border-color:var(--red);color:var(--red);background:#fef2f2}

.bfHint{color:#8b93a1;font-size:14px;text-align:center;padding:30px 10px}
.bfPager{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 4px}
.bfPager button{width:42px;height:42px;border-radius:50%;border:1px solid var(--blue);
  background:#fff;color:var(--blue);font-size:17px;cursor:pointer}
.bfPager button[disabled]{border-color:#dbe1e8;color:#cbd5e1;cursor:default}

/* ---------- телефон ---------- */
@media (max-width:640px){
  :root{--hdr:52px}
  .bfBrand b{display:none}
  .bfNav a,.bfNav button{padding:9px 9px;font-size:14px}
  .bfWrap{padding:12px 10px 90px}
  .bfTitle{font-size:20px}
  .bfGrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .bfChip{padding:8px 13px;font-size:13.5px}
}
@media (max-width:380px){
  .bfGrid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- единая шапка: кнопка «Меню» и выпадающие списки ---------- */
.bfMenuBtn{background:none;border:none;font:inherit;color:var(--ink);padding:9px 11px;
  border-radius:8px;cursor:pointer;white-space:nowrap;font-size:15px}
.bfMenuBtn:hover{background:var(--hover)}

.bfDrop{position:fixed;top:calc(var(--hdr) + 4px);right:10px;min-width:210px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(15,23,42,.18);
  padding:5px 0;z-index:95;display:none;max-height:calc(100vh - var(--hdr) - 16px);overflow-y:auto}
.bfDrop.open{display:block}
.bfDropItem{display:block;padding:12px 18px;color:var(--ink);text-decoration:none;
  cursor:pointer;font-size:15px;white-space:nowrap}
.bfDropItem:hover{background:var(--hover)}
.bfDropItem.on{background:var(--hover);font-weight:700}
.bfDropSep{height:1px;background:var(--line);margin:5px 0}
.bfDropName{padding:10px 18px 6px;font-weight:700;font-size:13px;color:var(--muted)}
.bfDropOut{color:#dc2626}
.bfProf{right:10px}
.bfNavDrop{right:auto;min-width:190px}

@media (max-width:640px){
  .bfDrop{left:8px;right:8px;min-width:0}
  .bfMenuBtn{padding:9px 9px;font-size:14px}
}