/* ═══════════════════════════════════════════════════════════════════════════
   fleet-blog · публичная страница блога специалиста
   Перенос макета `apps/pika/design-lab/blog/Pika Blog.dc.html` 1-в-1.

   Макет нарисован инлайн-стилями в двух замороженных ширинах (390 и 1280).
   Здесь те же самые объявления разложены по классам: значения скопированы
   подряд, без округлений. Ширины разведены ОДНИМ порогом 1100px:
   344 (колонка) + 32 (зазор) + 640 (лента) + 80 (поля) = 1096.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── шрифт: те же четыре подмножества, что в приложении ─────────────────── */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/app/pika/fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/app/pika/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/app/pika/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/app/pika/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─── токены: :root и тёмная тема из макета, один в один ─────────────────── */
:root{
--font:'Manrope',"SF Pro Rounded","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--bg:#F7F6FC;--card:#FFFFFF;--soft:#F2EFFB;--ink:#1B1830;--ink2:#3D3856;--muted:#6E6A85;
--faint:#9A96AE;--line:#ECEAF4;--violet:#6C47F5;--violet2:#8A63FF;
--violetRGB:108,71,245;--violet2RGB:138,99,255;
--navy:#0E1018;--ok:#12A150;--okbg:#E4F6EC;--warn:#E0603A;--warnbg:#FBEAE3;
--pink:#E14D8B;--pinkbg:#FCE9F1;--teal:#0EA5A5;--tealbg:#E2F5F4;--amber:#F1730B;--amberbg:#FDEEDD;
--gold:#9A6B08;--goldbg:#FBF0D2;--goldln:#E3C56A;
--shadow:0 10px 30px rgba(30,20,70,.08),0 2px 6px rgba(30,20,70,.05);
--hair:var(--line);
--r-card:18px;--r-plate:9px;--r-av:14px;
--tg:#2AABEE;--ya:#FC3F1D;--ln:#06C755;
--blog-onacc:#FFFFFF;
--blog-ph:repeating-linear-gradient(135deg,#EDEAF7 0 9px,#F5F3FC 9px 18px);
--blog-thread:rgba(var(--violetRGB),.28);
--blog-mask:rgba(27,24,48,.44);
--blog-chip:var(--soft);
}
html[data-theme="dark"]{
--bg:#0b0d13;--card:#14161f;--soft:#191d2b;--ink:#f4f5f7;--ink2:#c3c7d1;--muted:#8b90a0;
--faint:#6b7180;--line:#22252f;
--violet:#8b7bff;--violet2:#9a86ff;--violetRGB:139,123,255;--violet2RGB:154,134,255;
--ok:#5ecb8f;--okbg:#123021;--warn:#ff8b73;--warnbg:#3A2018;--pink:#f08bb4;--pinkbg:#331A27;
--teal:#4fc7c7;--tealbg:#0F2E2E;--amber:#f0c452;--amberbg:#33240F;
--gold:#F0CE7A;--goldbg:#332811;--goldln:#7A5E1E;
--shadow:0 10px 30px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.32);
--hair:rgba(255,255,255,.07);
--blog-onacc:#0d0a1e;
--blog-ph:repeating-linear-gradient(135deg,#1c2030 0 9px,#232838 9px 18px);
--blog-thread:rgba(var(--violetRGB),.42);
--blog-mask:rgba(0,0,0,.62);
--blog-chip:rgba(255,255,255,.06);
}
@media (prefers-color-scheme:dark){
html:not([data-theme="light"]){
--bg:#0b0d13;--card:#14161f;--soft:#191d2b;--ink:#f4f5f7;--ink2:#c3c7d1;--muted:#8b90a0;
--faint:#6b7180;--line:#22252f;
--violet:#8b7bff;--violet2:#9a86ff;--violetRGB:139,123,255;--violet2RGB:154,134,255;
--ok:#5ecb8f;--okbg:#123021;--warn:#ff8b73;--warnbg:#3A2018;--pink:#f08bb4;--pinkbg:#331A27;
--teal:#4fc7c7;--tealbg:#0F2E2E;--amber:#f0c452;--amberbg:#33240F;
--gold:#F0CE7A;--goldbg:#332811;--goldln:#7A5E1E;
--shadow:0 10px 30px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.32);
--hair:rgba(255,255,255,.07);
--blog-onacc:#0d0a1e;
--blog-ph:repeating-linear-gradient(135deg,#1c2030 0 9px,#232838 9px 18px);
--blog-thread:rgba(var(--violetRGB),.42);
--blog-mask:rgba(0,0,0,.62);
--blog-chip:rgba(255,255,255,.06);
}}

/* ─── база ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* 🔴 Атрибут `hidden` — это display:none в браузере ТОЛЬКО пока класс не задал свой
   display. `.b-rxb{display:inline-flex}` перебивал его, и спрятанные кнопки реакций
   оставались на экране, а «+» не прятался вовсе (жалоба владельца 2026-08-09). */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{background:var(--bg);font-family:var(--font);color:var(--ink);-webkit-text-size-adjust:100%}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
a{color:var(--violet)}
a:hover{color:var(--violet2)}
img{max-width:100%}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}

/* видимость по ширине: макет A2/B2 против A1/B1.
   `revert` вместо `block` — чтобы span оставался строчным, а div блочным. */
.dsk{display:none}
@media (min-width:1100px){.dsk{display:revert}.mob{display:none}}

/* ══ A. ЛЕНТА БЛОГА ═══════════════════════════════════════════════════════ */
.b-cover{height:150px;background:var(--blog-ph);background-size:cover;background-position:center;position:relative}
.b-wrap{padding:0 16px 20px}
.b-avrow{display:flex;align-items:flex-end;gap:12px;margin-top:-38px;position:relative;z-index:1}
.b-av{width:84px;height:84px;border-radius:26px;background:var(--blog-ph);background-size:cover;background-position:center;border:3px solid var(--card);box-shadow:var(--shadow);flex:none}
.b-avpad{padding-bottom:8px;min-width:0}
.b-handle{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px var(--mono);color:var(--muted);background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:6px 11px}
.b-handle2{display:none;margin-top:6px;font:700 12.5px var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-h1{margin:14px 0 0;font:800 27px/1.14 var(--font);color:var(--ink);letter-spacing:-.02em;text-wrap:pretty}
.b-desc{margin:8px 0 0;font:500 15.5px/1.5 var(--font);color:var(--ink2);text-wrap:pretty}
.b-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.b-chip{font:700 13px var(--font);color:var(--muted);background:var(--blog-chip);border-radius:999px;padding:8px 12px}
.b-ctarow{display:flex;gap:10px;margin-top:16px}
.b-cta{flex:1 1 auto;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(150deg,var(--violet2),var(--violet));color:#fff;font:800 16px var(--font);border-radius:14px;text-decoration:none;padding:0 16px;box-shadow:0 8px 22px rgba(var(--violetRGB),.34)}
.b-cta:hover{color:#fff}
.b-share{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--card);border:1px solid var(--hair);border-radius:14px;color:var(--ink);cursor:pointer}
.b-stats{display:none;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.b-statn{font:800 19px var(--font);color:var(--ink)}
.b-statl{font:600 12px var(--font);color:var(--faint)}

.b-feed{display:flex;flex-direction:column;gap:12px;padding:0 12px 26px}
.b-post{background:var(--card);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow);padding:16px}
.b-phd{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.b-pin{display:inline-flex;align-items:center;gap:5px;font:800 11.5px var(--font);color:var(--violet);background:rgba(var(--violetRGB),.12);border-radius:999px;padding:5px 10px}
.b-auto{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font);color:var(--teal);background:var(--tealbg);border-radius:999px;padding:5px 10px}
.b-autodot{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-date{font:600 13px var(--font);color:var(--faint);margin-bottom:11px}
.b-date.b-right{margin-left:auto;margin-bottom:0}
.b-txt{margin:0;font:500 16.5px/1.55 var(--font);color:var(--ink);text-wrap:pretty;overflow-wrap:anywhere}

/* галереи 1–4 фото (макет A3) */
.b-g{margin-top:12px;border-radius:16px;overflow:hidden}
.b-g i{display:block;background:var(--blog-ph);background-size:cover;background-position:center}
.b-g1 i{aspect-ratio:4/3}
.b-g2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.b-g2 i{aspect-ratio:1}
.b-g3{display:grid;grid-template-columns:2fr 1fr;gap:4px;height:200px}
.b-g3 .b-gcol{display:grid;grid-template-rows:1fr 1fr;gap:4px}
.b-g4{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.b-g4 i{aspect-ratio:1}
.b-g i[data-zoom]{cursor:zoom-in}
.b-g i[data-zoom]:focus-visible{outline:3px solid #fff;outline-offset:-5px}

/* снимок целиком поверх страницы (слой печатает `page()`, поведение — blog.js).
   🔴 `.b-lb[hidden]{display:none}` обязателен: правило `display:flex` в классе
   сильнее браузерного правила для атрибута `hidden`, и без него слой висел бы
   поверх страницы всегда. Кадр вписывается целиком (`max-*:100%`), а не крупнее
   экрана: вертикальный снимок с телефона иначе открывался бы серединой. */
.b-lb{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(12,10,26,.93);cursor:zoom-out;-webkit-tap-highlight-color:transparent}
.b-lb[hidden]{display:none}
.b-lb img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 26px 80px rgba(0,0,0,.55)}
/* Листание кадров записи. 🔴 Стрелки и счётчик обязаны иметь СВОЙ цвет и фон, а не
   наследовать скин: слой лежит вне `.b-shell`, а фон под ним всегда тёмный. */
.b-lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
/* pointer-events у значка сняты намеренно: иначе нажатие приходит от <path>,
   и обработчику пришлось бы искать кнопку вверх по дереву SVG. */
.b-lbnav svg{width:26px;height:26px;pointer-events:none}
.b-lbnav.p{left:10px}
.b-lbnav.n{right:10px}
.b-lbnav[hidden]{display:none}
.b-lbnav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.b-lbn{position:absolute;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font:700 13px var(--font);color:#fff;background:rgba(0,0,0,.45);border-radius:999px;padding:5px 12px;pointer-events:none}
.b-lbn[hidden]{display:none}
@media (min-width:1100px){
  .b-lbnav{width:56px;height:56px}
  .b-lbnav.p{left:24px}
  .b-lbnav.n{right:24px}
}

/* свой ролик: плеер во всю ширину карточки, высоту диктует сам файл.
   🔴 max-height держит вертикальные ролики с телефона: без него кадр 9:16
   выталкивает всё остальное за экран. */
.b-v{display:block;width:100%;max-height:min(70vh,560px);margin-top:12px;border-radius:16px;
  background:#000;object-fit:contain}

/* YouTube: превью, плеер только по клику */
.b-yt{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;margin-top:12px}
.b-ytph{position:absolute;inset:0;background:var(--blog-ph);background-size:cover;background-position:center}
.b-ytbtn{position:absolute;inset:0;width:100%;border:0;background:var(--blog-mask);display:grid;place-items:center;cursor:pointer}
.b-ytplay{width:66px;height:46px;border-radius:14px;background:#ff0000;display:grid;place-items:center}
.b-yttag{position:absolute;left:12px;bottom:12px;font:700 11.5px var(--font);color:#fff;background:rgba(0,0,0,.6);border-radius:8px;padding:5px 9px}
.b-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* реакции */
.b-rx{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.b-rxb{min-height:40px;display:inline-flex;align-items:center;gap:7px;font:700 14px var(--font);border-radius:999px;padding:8px 13px;background:var(--blog-chip);border:1px solid var(--hair);color:var(--ink2);cursor:pointer}
.b-rxb b,.b-rxb span{font-weight:800}
.b-rxb.on{background:rgba(var(--violetRGB),.12);border:1px solid var(--violet);color:var(--violet)}
.b-rxadd{min-width:44px;min-height:40px;display:grid;place-items:center;font:800 17px var(--font);border-radius:999px;padding:8px 13px;background:transparent;border:1px dashed var(--hair);color:var(--faint);cursor:pointer}

/* свободные окна в автозаписи */
.b-slots{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.b-slot{min-height:44px;display:inline-flex;align-items:center;font:800 14px var(--font);color:var(--violet);background:rgba(var(--violetRGB),.11);border-radius:12px;padding:10px 14px;text-decoration:none}

/* переход к комментариям */
.b-more{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:13px;border-top:1px solid var(--hair);font:700 15px var(--font);color:var(--ink2);text-decoration:none;min-height:44px}
.b-more2{display:none}

/* пагинация: работает без JS */
.b-pager{display:flex;gap:10px;justify-content:center;padding:4px 12px 30px}
.b-pgbtn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;background:var(--card);border:1px solid var(--hair);border-radius:14px;font:800 15px var(--font);color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}

/* ══ B. ЗАПИСЬ + КОММЕНТАРИИ ══════════════════════════════════════════════ */
.b-top{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:5}
.b-back{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--ink);text-decoration:none;flex:none}
.b-topmid{min-width:0;flex:1}
.b-topt{font:800 15px var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-toph{font:600 12px var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-topbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--soft);border:1px solid var(--hair);color:var(--ink);cursor:pointer;flex:none}
.b-one{padding:16px 12px 10px}
.b-chd{padding:6px 12px 0;display:flex;align-items:center;gap:10px}
.b-chd h2{margin:0;font:800 16px var(--font);color:var(--ink)}
.b-sort{font:700 12px var(--font);color:var(--faint);margin-left:auto}
.b-replywrap{padding:12px;display:flex;flex-direction:column;gap:10px}
.b-reply{background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:12px}
.b-reply textarea{display:block;width:100%;border:0;background:transparent;resize:vertical;font:500 15px/1.45 var(--font);color:var(--ink);min-height:66px;padding:0;outline:0}
.b-reply textarea::placeholder{color:var(--faint)}
.b-rfoot{display:flex;align-items:center;gap:10px;margin-top:8px}
.b-count{font:700 12px var(--mono);color:var(--faint)}
.b-count.warn{color:var(--warn)}
.b-send{margin-left:auto;min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(150deg,var(--violet2),var(--violet));color:#fff;font:800 15px var(--font);border-radius:13px;padding:0 18px;text-decoration:none;border:0;cursor:pointer}
.b-send[disabled]{opacity:.45;cursor:default}

.b-thr{padding:0 12px 28px;display:flex;flex-direction:column;gap:14px}
.b-troot{background:var(--card);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.b-c{padding:13px 14px}
.b-chdr{display:flex;align-items:center;gap:9px}
/* текст корневого комментария на телефоне идёт ПОД аватаром во всю ширину
   карточки (в макете это соседний узел, а не колонка справа) */
.b-cbody{display:block}
.b-cav{width:34px;height:34px;border-radius:12px;background:var(--blog-ph);background-size:cover;background-position:center;flex:none}
.b-cnm{min-width:0;flex:1}
.b-cname{font:800 14px var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-cmeta{font:600 11.5px var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-cdots{width:44px;height:44px;flex:none;display:grid;place-items:center;background:transparent;border:0;border-radius:12px;color:var(--faint);cursor:pointer}
.b-ctxt{margin:9px 0 0;font:500 15px/1.5 var(--font);color:var(--ink);overflow-wrap:anywhere;text-wrap:pretty}
.b-cact{display:flex;gap:2px;margin-top:6px}
.b-act{min-height:44px;padding:0 10px;background:transparent;border:0;font:800 13.5px var(--font);color:var(--violet);cursor:pointer}
.b-act.mut{font-weight:700;color:var(--faint)}
.b-act.warn{font-weight:700;color:var(--warn)}

.b-kids{border-left:2px solid var(--blog-thread);margin:0 14px 12px 16px;padding-left:12px;display:flex;flex-direction:column;gap:2px}
/* Телефон: аватар и строка имени в первом ряду, всё остальное — во всю ширину.
   🔴 Отступов вложенности НЕТ вовсе: при 390 px две ступени по 16 px съедают
   8% ширины текста, а к пятому уровню колонка превращается в лестницу. */
.b-k{display:grid;grid-template-columns:30px 1fr;column-gap:9px;padding:11px 0;border-top:1px solid var(--hair)}
.b-k>.b-kav{grid-column:1;grid-row:1}
.b-kbody{display:contents}
.b-kline{grid-column:2;grid-row:1}
.b-menrow{grid-column:1/-1}
.b-ktxt{grid-column:1/-1}
.b-kact{grid-column:1/-1}
.b-k .b-hid,.b-k .b-hidopen{grid-column:1/-1}
.b-k.hid>.b-kav,.b-k.hid .b-kline{display:none}
.b-k.del{display:flex;align-items:center;gap:9px;padding:13px 0}
.b-kav{width:30px;height:30px;border-radius:11px;background:var(--blog-ph);background-size:cover;background-position:center;flex:none}
.b-kav.author{box-shadow:0 0 0 2px var(--violet)}
.b-kline{min-width:0;flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.b-kname{font:800 13.5px var(--font);color:var(--ink)}
.b-kmeta{font:600 11.5px var(--mono);color:var(--faint)}
.b-bdga{font:800 10.5px var(--font);color:var(--violet);background:rgba(var(--violetRGB),.13);border-radius:6px;padding:3px 6px}
.b-bdgy{font:800 10.5px var(--font);color:var(--teal);background:var(--tealbg);border-radius:6px;padding:3px 6px}
.b-menrow{margin-top:7px}
.b-men{display:inline-flex;align-items:center;font:700 11.5px var(--mono);color:var(--violet);background:rgba(var(--violetRGB),.11);border-radius:7px;padding:3px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.b-ktxt{margin:6px 0 0;font:500 15px/1.5 var(--font);color:var(--ink);overflow-wrap:anywhere;text-wrap:pretty}
.b-kact{display:flex;gap:2px;margin-top:4px}

.b-hid{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:12px;padding:11px 12px}
.b-hidtx{font:600 13.5px/1.4 var(--font);color:var(--muted);flex:1;min-width:0}
.b-hidopen{border:1px dashed var(--warn);border-radius:12px;padding:11px 12px;background:var(--warnbg)}
.b-hidopen p{margin:6px 0 0;font:500 15px/1.5 var(--font);color:var(--ink2);overflow-wrap:anywhere}
.b-del{padding:13px 0;border-top:1px solid var(--hair);display:flex;align-items:center;gap:9px}
.b-delic{width:30px;height:30px;border-radius:11px;background:var(--soft);flex:none;display:grid;place-items:center;color:var(--faint)}
.b-deltx{font:600 14px var(--font);color:var(--faint);font-style:italic}
.b-lvlrow{display:none;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--hair)}
.b-lvl{font:700 11px var(--mono);color:var(--faint);background:var(--soft);border-radius:6px;padding:4px 8px;flex:none;white-space:nowrap}
.b-lvltx{font:600 13px/1.4 var(--font);color:var(--muted)}

/* ══ 1100px+ : раскладки A2 и B2 ══════════════════════════════════════════ */
@media (min-width:1100px){
  .b-cover{height:210px}
  .b-page{display:grid;grid-template-columns:344px 1fr;gap:32px;padding:0 40px 44px;align-items:start;max-width:1280px;margin:0 auto}
  .b-wrap{margin-top:-56px;position:sticky;top:20px;padding:0}
  .b-wrapin{background:var(--card);border:1px solid var(--hair);border-radius:22px;box-shadow:var(--shadow);padding:20px}
  .b-avrow{display:block;margin-top:0}
  .b-av{width:96px;height:96px;border-radius:28px}
  .b-h1{font:800 25px/1.15 var(--font);letter-spacing:-.02em}
  .b-desc{margin:10px 0 0;font:500 14.5px/1.5 var(--font)}
  .b-chip{font:700 12.5px var(--font);padding:7px 11px}
  .b-ctarow{gap:8px}
  .b-cta{min-height:48px;font:800 15px var(--font);padding:0 14px}
  .b-share{width:48px;height:48px;background:var(--soft)}
  .b-stats{display:flex}

  .b-feed{gap:16px;max-width:640px;padding:28px 0 0}
  .b-post{border-radius:22px;padding:22px 24px}
  .b-phd{margin-bottom:12px}
  .b-date{margin-bottom:12px}
  .b-txt{font:500 17px/1.55 var(--font)}
  .b-g,.b-yt,.b-v{margin-top:14px}
  .b-g3{height:300px}
  .b-rx{margin-top:16px}
  .b-pager{padding:0 0 40px}

  /* B2 */
  .b-post-page{padding:32px 40px 44px}
  .b-bwrap{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start;max-width:1100px;margin:0 auto}
  .b-one{padding:0}
  .b-chd{padding:0;margin:26px 0 14px}
  .b-chd h2{font:800 18px var(--font)}
  .b-sort{font:700 12.5px var(--font);white-space:nowrap}
  .b-replywrap{padding:0;margin-bottom:18px}
  .b-reply{border-radius:18px;padding:14px 16px}
  .b-reply textarea{min-height:48px;font:500 15px var(--font)}
  .b-rfoot{gap:12px;margin-top:0}
  .b-send{padding:0 20px}

  .b-thr{padding:0;gap:18px}
  .b-troot{border-radius:22px;box-shadow:var(--shadow);overflow:visible;padding:22px 24px}
  /* Десктоп: аватар слева колонкой, текст встаёт под строкой имени —
     тот же DOM, что и на телефоне, разложенный сеткой. */
  .b-c{display:grid;grid-template-columns:42px 1fr;column-gap:14px;padding:0}
  .b-chdr{display:contents}
  .b-cav{width:42px;height:42px;border-radius:14px;grid-column:1;grid-row:1/span 2;align-self:start}
  .b-cnm{grid-column:2;grid-row:1;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .b-cbody{grid-column:2;grid-row:2;display:block}
  .b-cdots{display:none}
  .b-more{display:none}
  .b-more2{display:inline-flex;margin-left:auto;min-height:40px;align-items:center;font:700 14.5px var(--font);color:var(--ink2);text-decoration:none;padding:8px 4px}
  .b-handle{display:none}
  .b-handle2{display:block}
  .b-menrow{display:none}
  .b-cname{font:800 15.5px var(--font);white-space:nowrap;overflow:visible}
  .b-cmeta{font:600 12.5px var(--mono);white-space:nowrap;overflow:visible}
  .b-ctxt{margin:6px 0 0;font:500 15.5px/1.55 var(--font)}
  .b-cact{gap:16px;margin-top:4px}
  .b-act{min-height:36px;padding:0;font:800 13px var(--font)}
  .b-act.mut{font-weight:700}
  .b-act.warn{font-weight:700}

  .b-kids{margin:10px 0 0 21px;padding-left:26px;border-left:2px solid var(--blog-thread);gap:20px}
  .b-k{display:flex;gap:12px;padding:0;border-top:0}
  .b-kbody{display:block;flex:1;min-width:0}
  .b-k.hid>.b-kav,.b-k.hid .b-kline{display:revert}
  .b-k.del{padding:0}
  .b-k[data-d="2"]{padding-left:28px}
  .b-k[data-d="3"],.b-k[data-d="4"],.b-k[data-d="5"],.b-k[data-d="6"]{padding-left:56px}
  .b-kav{width:34px;height:34px;border-radius:12px}
  .b-kav.author{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--violet)}
  .b-kbody{flex:1;min-width:0}
  .b-kline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .b-kname{font:800 14.5px var(--font);white-space:nowrap}
  .b-kmeta{font:600 12.5px var(--mono);white-space:nowrap}
  .b-bdga,.b-bdgy{padding:3px 7px;white-space:nowrap}
  .b-men2{font:700 11.5px var(--mono);color:var(--violet);background:rgba(var(--violetRGB),.10);border-radius:7px;padding:3px 8px;white-space:nowrap;text-decoration:none}
  .b-ktxt{margin:6px 0 0;font:500 15px/1.55 var(--font)}
  .b-kact{gap:16px;margin-top:4px}
  .b-hid{gap:12px;padding:10px 14px;margin-top:7px}
  .b-del{padding:0;border-top:0;align-items:center;gap:12px}
  .b-delic{width:34px;height:34px;border-radius:12px}
  .b-deltx{font:600 14.5px var(--font);font-style:italic}
  .b-lvlrow{display:flex}

  .b-aside{position:sticky;top:20px;background:var(--card);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow);padding:18px}
  .b-asidehd{display:flex;align-items:center;gap:11px}
  .b-asideav{width:52px;height:52px;border-radius:18px;background:var(--blog-ph);background-size:cover;background-position:center;flex:none}
  .b-asidet{font:800 15px var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .b-asideh{font:600 11.5px var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .b-asidecta{margin-top:14px;min-height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--violet2),var(--violet));color:#fff;font:800 15px var(--font);border-radius:14px;text-decoration:none}
  .b-asideshare{width:100%;cursor:pointer;font-family:var(--font)}
  .b-asidealt{margin-top:8px;min-height:44px;display:flex;align-items:center;justify-content:center;background:var(--soft);border:1px solid var(--hair);color:var(--ink);font:800 14px var(--font);border-radius:14px;text-decoration:none}
}
@media (max-width:1099px){
  .b-men2{display:none}
  /* Планшет и узкое окно получают телефонную раскладку. Без ограничения ширины
     карточка растягивалась бы на 1000 px, и строка текста становилась нечитаемой. */
  /* Каталог (b-cat/b-cards/b-profs/b-catnote) свою ширину держит сам —
     переменными `--maxw`/`--pad` в секции H, одной строкой на все блоки. */
  .b-page,.b-post-page{max-width:560px;margin-left:auto;margin-right:auto}
}

/* ══ C. ВХОД, ЧТОБЫ ПРОКОММЕНТИРОВАТЬ ═════════════════════════════════════ */
body.b-modal-open{overflow:hidden}
body.b-modal-open .b-shell{filter:blur(1.5px);opacity:.5}
.b-mask{position:fixed;inset:0;background:var(--blog-mask);z-index:60}
.b-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--card);border-radius:26px 26px 0 0;padding:8px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(30,20,70,.28)}
.b-grip{width:44px;height:5px;border-radius:999px;background:var(--line);margin:0 auto 14px}
.b-mtitle{margin:0;font:800 22px/1.2 var(--font);color:var(--ink);text-wrap:pretty}
.b-msub{margin:7px 0 0;font:500 14.5px/1.5 var(--font);color:var(--muted);text-wrap:pretty}
.b-quote{margin-top:14px;background:var(--soft);border-radius:14px;padding:12px 14px}
.b-quotelb{font:700 11px var(--mono);color:var(--faint);letter-spacing:.06em;margin-bottom:5px}
.b-quotetx{font:500 14.5px/1.45 var(--font);color:var(--ink2);overflow-wrap:anywhere}
.b-cons{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.b-consrow{display:flex;align-items:flex-start;gap:11px;text-align:left;min-height:48px;background:transparent;border:0;padding:4px 0;cursor:pointer;font:inherit;width:100%}
.b-box{width:24px;height:24px;flex:none;border-radius:8px;margin-top:1px;display:grid;place-items:center;background:transparent;border:2px solid var(--line);color:#fff}
.b-box svg{opacity:0}
.b-consrow[aria-checked="true"] .b-box{background:var(--violet);border-color:var(--violet)}
.b-consrow[aria-checked="true"] .b-box svg{opacity:1}
.b-consrow:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:10px}
.b-constx{font:600 14px/1.42 var(--font);color:var(--ink2)}
.b-constx a{color:var(--violet)}
.b-soc{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.b-soc.off{opacity:.45}
.b-socb{min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--card);border:1px solid var(--hair);border-radius:14px;font:800 14.5px/1.2 var(--font);color:var(--ink);cursor:pointer;text-decoration:none;padding:8px 10px;text-align:center}
.b-socb[disabled]{cursor:default}
.b-soci{width:20px;height:20px;flex:none}
.b-soci.g{border-radius:50%;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.b-soci.y{border-radius:50%;background:var(--ya)}
.b-soci.l{border-radius:6px;background:var(--ln)}
.b-soci.f{border-radius:50%;background:#1877F2}
.b-hint{margin-top:12px;font:600 12.5px/1.45 var(--font);color:var(--faint);text-align:center}
.b-hint.ok{color:var(--ok)}
@media (min-width:1100px){
  body.b-modal-open .b-shell{filter:blur(2px);opacity:.45}
  .b-sheet{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:520px;border-radius:24px;padding:28px;box-shadow:0 40px 90px rgba(30,20,70,.4)}
  .b-grip{display:none}
  .b-mtitle{font:800 24px/1.2 var(--font)}
  .b-msub{margin:8px 0 0;font:500 15px/1.5 var(--font)}
  .b-quote{margin-top:16px;padding:13px 15px}
  .b-quotetx{font:500 15px/1.45 var(--font)}
  .b-cons{gap:6px;margin-top:16px}
  .b-constx{font:600 14.5px/1.42 var(--font)}
  .b-soc{gap:10px;margin-top:16px}
  .b-socb{font:800 15px/1.2 var(--font)}
  .b-hint{margin-top:14px;font:600 13px/1.45 var(--font)}
}

/* ══ H0. ПОЛОСА «Я ВНУТРИ ПРИЛОЖЕНИЯ» ═════════════════════════════════════ */
/* Липкая, потому что «вернуться» должно быть доступно с любой глубины ленты,
   а не только с самого верха: иначе возврат в приложение стоит долгой прокрутки. */
.b-appbar{position:sticky;top:0;z-index:40;display:flex;gap:8px;align-items:center;
  justify-content:space-between;padding:8px 12px;
  background:var(--bg);border-bottom:1px solid var(--hair)}
.b-appbar[hidden]{display:none}
.b-appb{min-height:38px;display:inline-flex;align-items:center;padding:0 12px;
  border-radius:12px;font:800 13.5px var(--font);color:var(--ink2);
  background:var(--soft);text-decoration:none;white-space:nowrap}
.b-appb.back{color:var(--violet)}
@media (min-width:1100px){.b-appbar{padding:10px 40px}.b-appb{min-height:42px;font:800 14px var(--font)}}

/* ══ H1. ОБЩАЯ ЛЕНТА ПОДПИСОК (экран «Блог» в кабинете ученика) ═══════════ */
.b-minehd{padding-bottom:6px}
.b-minehd .b-catsub{display:block;margin:6px 0 0;font:500 13.5px var(--font);color:var(--muted)}
/* Полоса подписок скроллится вбок и НЕ переносится: перенос на второй ряд
   съедал бы первый экран ленты ради списка, который и так есть в каталоге. */
.b-subsrow{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;
  padding:10px var(--pad,14px) 12px;max-width:var(--maxw,560px);margin:0 auto}
.b-subsrow::-webkit-scrollbar{display:none}
.b-subav{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:5px;
  text-decoration:none;color:var(--ink2)}
.b-subav i{width:52px;height:52px;border-radius:18px;background:var(--blog-ph);background-size:cover;
  background-position:center;display:grid;place-items:center;font:800 19px var(--font);
  color:var(--muted);border:1px solid var(--hair)}
.b-subav span{font:700 11px var(--font);text-align:center;width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Автор над записью: в общей ленте они разные, и без подписи запись повисает
   в воздухе — в личной ленте блога эту роль играет шапка страницы. */
.b-fauth{display:flex;align-items:center;gap:9px;text-decoration:none;padding:2px 2px 0}
.b-fauth .b-fav{width:28px;height:28px;border-radius:10px;background:var(--blog-ph);
  background-size:cover;background-position:center;flex:none}
.b-fauth b{font:800 13.5px var(--font);color:var(--ink)}
.b-fauth span{font:600 12px var(--mono);color:var(--faint)}
@media (min-width:1100px){
  .b-minehd{--pad:40px;--maxw:1280px}
  .b-subsrow{--pad:40px;--maxw:760px;padding-top:4px}
  /* Лента подписок — ОДНА колонка: второй (шапки блога) здесь нет, а сетка
     `344px 1fr` без неё схлопнула бы записи в узкий столбец. */
  .b-page.b-one{grid-template-columns:minmax(0,1fr);max-width:760px}
}

/* ══ H. КАТАЛОГ БЛОГОВ ════════════════════════════════════════════════════ */
/* Горизонтальный ритм каталога держат ДВЕ переменные, а не значения, разложенные
   по блокам: шапка, карточки, профессии и сноска обязаны стоять на одной линии
   на любой ширине. Раньше `b-profs`/`b-catnote` лежали вне контейнера и на
   широком экране уезжали к самому краю окна, пока карточки стояли по центру. */
.b-cat,.b-cards,.b-profs,.b-catnote{--pad:14px;--maxw:560px;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:var(--pad);padding-right:var(--pad)}
.b-cat{padding-top:16px;padding-bottom:10px}
/* Скрытая строка поиска (см. `render.CATALOG_BAR_MIN`): `hidden` обязан
   победить и `display:flex` из десктопной ветки — иначе на широком экране
   форма осталась бы видимой. */
.b-catbar[hidden]{display:none}
.b-cat h1{margin:0;font:800 24px/1.15 var(--font);color:var(--ink);letter-spacing:-.02em}
.b-catsub{display:none}
.b-search{min-height:52px;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:0 14px;margin-top:12px;box-shadow:var(--shadow)}
.b-search svg{color:var(--faint);flex:none}
.b-search input{flex:1;min-width:0;border:0;background:transparent;font:500 15px var(--font);color:var(--ink);outline:0;padding:0;height:50px}
.b-search input::placeholder{color:var(--faint)}
.b-fil{display:flex;gap:7px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.b-fil::-webkit-scrollbar{display:none}
.b-filb{min-height:44px;display:inline-flex;align-items:center;border-radius:999px;padding:0 15px;font:800 13.5px var(--font);background:var(--soft);color:var(--ink2);white-space:nowrap;border:0;cursor:pointer;text-decoration:none}
.b-filb.on{background:var(--violet);color:#fff}
.b-city{display:none}
.b-cards{padding-top:4px;padding-bottom:22px;display:flex;flex-direction:column;gap:10px}
.b-card{background:var(--card);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow);padding:14px;text-decoration:none;display:block}
.b-cardhd{display:flex;gap:12px;align-items:center}
.b-cardav{width:54px;height:54px;border-radius:18px;background:var(--blog-ph);background-size:cover;background-position:center;flex:none}
.b-cardt{font:800 16px/1.25 var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-cardsub{font:600 12.5px var(--font);color:var(--muted);margin-top:3px}
/* Чип «клуб» в плитке каталога: карточка блога должна с первого взгляда
   отличать заведение от человека — у них разный повод подписаться. */
.b-kind{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:7px;
  font:800 10.5px/1.7 var(--font);letter-spacing:.04em;text-transform:uppercase;
  color:var(--violet);background:color-mix(in srgb,var(--violet) 13%,transparent);
  vertical-align:2px}
.b-cardex{margin:11px 0 0;font:500 14px/1.45 var(--font);color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-cardft{display:flex;align-items:center;margin-top:11px;padding-top:11px;border-top:1px solid var(--hair)}
.b-cardn{font:700 12px var(--font);color:var(--faint)}
.b-cardw{font:700 12px var(--font);color:var(--faint);margin-left:auto}
.b-cardw.fresh{color:var(--ok)}
.b-catnote{margin-top:14px;padding-bottom:26px;font:600 13px var(--font);color:var(--muted)}
@media (min-width:1100px){
  .b-cat,.b-cards,.b-profs,.b-catnote{--pad:40px;--maxw:1280px}
  .b-cat{padding-top:28px;padding-bottom:0}
  .b-cat h1{font:800 30px/1.15 var(--font)}
  .b-catsub{display:block;margin:8px 0 0;font:500 15.5px var(--font);color:var(--muted)}
  .b-catbar{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;align-items:center}
  .b-search{flex:1 1 320px;margin-top:0}
  .b-fil{display:flex;gap:7px;margin-top:0;overflow:visible}
  .b-filb{min-height:52px;border-radius:14px;padding:0 16px;font:800 14px var(--font);background:var(--card);border:1px solid var(--hair);color:var(--ink)}
  .b-filb.on{background:var(--violet);border-color:var(--violet);color:#fff}
  .b-city{min-height:52px;display:inline-flex;align-items:center;font:700 13.5px var(--font);color:var(--muted);background:var(--soft);border-radius:14px;padding:0 14px}
  /* auto-fill вместо жёстких трёх колонок: между 1100 и 1280 px карточка больше
     не сжимается до 330 px, а на 1280 раскладка та же, что в макете, — три. */
  .b-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;
    margin-top:22px;padding-top:0;padding-bottom:34px}
  .b-catnote{margin-top:16px;padding-bottom:40px}
  .b-card{border-radius:20px;padding:18px}
  .b-cardhd{gap:13px}
  .b-cardav{width:60px;height:60px;border-radius:20px}
  .b-cardt{font:800 17px/1.25 var(--font)}
  .b-cardsub{font:600 13px var(--font)}
  .b-cardex{margin:13px 0 0;font:500 14.5px/1.5 var(--font)}
  .b-cardft{gap:8px;margin-top:14px;padding-top:13px}
  .b-cardn,.b-cardw{font:700 12.5px var(--font)}
}

/* ══ I. ПУСТЫЕ И КРАЕВЫЕ СОСТОЯНИЯ ════════════════════════════════════════ */
/* I1 — блог включён, записей нет (глазами владельца) */
.b-emp{margin:20px 12px 0;background:var(--soft);border-radius:18px;padding:22px 18px;text-align:center}
.b-empic{width:52px;height:52px;border-radius:18px;background:var(--card);display:grid;place-items:center;margin:0 auto 12px;color:var(--violet)}
.b-empt{font:800 17px var(--font);color:var(--ink)}
.b-emps{margin:7px 0 14px;font:600 13.5px/1.5 var(--font);color:var(--muted);text-wrap:pretty}
.b-empb{min-height:52px;width:100%;background:linear-gradient(150deg,var(--violet2),var(--violet));border:0;border-radius:14px;font:800 16px var(--font);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
.b-empb2{margin-top:8px;min-height:48px;width:100%;background:transparent;border:1px solid var(--hair);border-radius:14px;font:800 14px var(--font);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
/* I2/I3 — блог выключен · запись удалена */
.b-mid{min-height:420px;display:grid;place-items:center;padding:30px 18px}
.b-midin{text-align:center;max-width:460px}
.b-midic{width:56px;height:56px;border-radius:20px;background:var(--soft);display:grid;place-items:center;margin:0 auto 14px;color:var(--faint)}
.b-midt{font:800 19px var(--font);color:var(--ink)}
.b-mids{margin:8px 0 16px;font:600 14px/1.5 var(--font);color:var(--muted);text-wrap:pretty}
.b-midb{min-height:52px;display:inline-flex;align-items:center;background:var(--soft);border:1px solid var(--hair);border-radius:14px;font:800 15px var(--font);color:var(--ink);text-decoration:none;padding:0 20px}
.b-midb.acc{background:linear-gradient(150deg,var(--violet2),var(--violet));border:0;color:#fff}
.b-mid.sm{min-height:300px;padding:26px 18px}
.b-mid.sm .b-midt{font:800 18px var(--font)}
.b-mid.sm .b-mids{margin:8px 0 14px}
/* I4 — человек забанен в этом блоге */
.b-ban{margin:12px 12px 0;background:var(--warnbg);border:1px solid var(--warn);border-radius:18px;padding:15px}
.b-bant{font:800 15.5px var(--font);color:var(--ink)}
.b-bans{margin:6px 0 0;font:600 13.5px/1.5 var(--font);color:var(--ink2);text-wrap:pretty}
.b-banb{margin-top:11px;min-height:44px;background:var(--card);border:1px solid var(--hair);border-radius:12px;font:800 13.5px var(--font);color:var(--ink);cursor:pointer;padding:0 14px}
/* I5 — нет сети */
.b-net{padding:11px 14px;background:var(--soft);border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:10px}
.b-netdot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none}
.b-nettx{font:700 13.5px var(--font);color:var(--ink);flex:1}
.b-post.cached{opacity:.9}
.b-queue{background:var(--card);border:1px dashed var(--amber);border-radius:18px;padding:14px}
.b-queuehd{display:flex;align-items:center;gap:9px}
.b-queuebd{font:800 11.5px var(--font);color:var(--amber);background:var(--amberbg);border-radius:7px;padding:4px 8px}
.b-queuenote{font:600 12.5px var(--font);color:var(--muted);margin-left:auto}
.b-queuetx{margin:8px 0 0;font:500 15px/1.5 var(--font);color:var(--ink2)}
.b-foot{font:600 12.5px/1.5 var(--font);color:var(--muted);padding:0 4px}
/* I6 — длинные имена и текст без пробелов */
.b-mensolo{display:inline-block;max-width:100%;font:700 11.5px var(--mono);color:var(--violet);background:rgba(var(--violetRGB),.11);border-radius:7px;padding:3px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* ══ Ф3 — личность читателя: буква вместо аватара, профиль, свои настройки ══ */
/* 🔴 Картинку из соцсети НЕ грузим (это отдало бы IP читателя Google/Meta на
   каждом показе) — рисуем букву. Тон стабилен: он выбран из @handle. */
.b-ini{display:grid;place-items:center;color:#fff;font-family:var(--font);font-weight:800;
  letter-spacing:0;line-height:1;background-image:none}
.b-cav.b-ini{font-size:15px}
.b-kav.b-ini{font-size:13px}
.b-vav.b-ini{font-size:13px}
.b-pfav.b-ini{font-size:30px}
.b-ini[data-tone="0"]{background:#6C47F5}
.b-ini[data-tone="1"]{background:#0EA5A5}
.b-ini[data-tone="2"]{background:#E14D8B}
.b-ini[data-tone="3"]{background:#F1730B}
.b-ini[data-tone="4"]{background:#2C7BE5}
.b-ini[data-tone="5"]{background:#5B8C2A}
.b-hlink{color:inherit;text-decoration:none}
.b-hlink:hover{color:var(--violet)}

/* строка «вы отвечаете как» над формой ответа */
.b-vbar{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:0 2px}
.b-vav{width:24px;height:24px;border-radius:9px;background:var(--blog-ph);
  background-size:cover;background-position:center;flex:none}
.b-vtx{font:600 12.5px var(--font);color:var(--faint)}
.b-vh{font:700 12.5px var(--mono);color:var(--violet);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* профиль читателя */
.b-pf{max-width:720px;margin:0 auto;padding:18px 14px 40px;display:flex;
  flex-direction:column;gap:14px}
.b-pfhd{display:flex;align-items:center;gap:14px;min-width:0}
.b-pfav{width:72px;height:72px;border-radius:24px;background:var(--blog-ph);
  background-size:cover;background-position:center;flex:none}
.b-pfname{margin:0;font:800 23px/1.15 var(--font);color:var(--ink);letter-spacing:-.02em;
  overflow-wrap:anywhere}
.b-pfh{margin-top:3px;font:700 13px var(--mono);color:var(--violet);overflow-wrap:anywhere}
.b-pfmeta{margin-top:5px;font:600 12.5px var(--font);color:var(--faint)}
.b-pfbox{background:var(--card);border:1px solid var(--hair);border-radius:18px;
  box-shadow:var(--shadow);padding:16px}
.b-pfh2{margin:0 0 8px;font:800 16px var(--font);color:var(--ink)}
.b-pfh3{margin:20px 0 6px;font:800 14px var(--font);color:var(--ink)}
.b-pfs{margin:0 0 12px;font:500 14px/1.5 var(--font);color:var(--muted);text-wrap:pretty}
.b-pferr{margin:0 0 12px;font:700 13.5px/1.45 var(--font);color:var(--warn);
  background:var(--warnbg);border-radius:12px;padding:10px 12px}
.b-pfrow{display:flex;align-items:center;gap:8px;background:var(--soft);
  border:1px solid var(--hair);border-radius:14px;padding:0 12px;min-height:52px}
.b-pfat{font:700 16px var(--mono);color:var(--faint);flex:none}
.b-pfinp{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font:700 16px var(--mono);color:var(--ink);padding:12px 0}
.b-pfb{margin-top:10px;min-height:48px;width:100%;border:0;border-radius:14px;
  background:var(--violet);color:#fff;font:800 15px var(--font);cursor:pointer}
.b-pfb2{min-height:48px;width:100%;border:1px solid var(--hair);border-radius:14px;
  background:var(--card);color:var(--ink);font:800 15px var(--font);cursor:pointer}
.b-pfb3{display:block;width:100%;margin-top:8px;min-height:52px;padding:10px 14px;
  border:1px solid var(--hair);border-radius:14px;background:var(--card);
  color:var(--ink2);font:700 14px/1.35 var(--font);cursor:pointer;text-align:left}
.b-pfb3.warn{color:var(--warn);border-color:var(--warn)}
.b-pfnote{font:700 13.5px var(--font);color:var(--faint);background:var(--soft);
  border-radius:12px;padding:11px 12px}
.b-pfc{display:block;padding:12px 0;border-top:1px solid var(--hair);text-decoration:none}
.b-pfbox .b-pfc:first-of-type{border-top:0;padding-top:0}
.b-pfct{font:500 15px/1.5 var(--font);color:var(--ink);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-pfcm{margin-top:5px;font:600 12px var(--font);color:var(--faint)}
.b-pfback{align-self:flex-start;font:700 14px var(--font);color:var(--violet);
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
@media (min-width:1100px){
  .b-pf{padding:32px 20px 60px;gap:16px}
  .b-pfav{width:96px;height:96px;border-radius:30px}
  .b-pfname{font:800 30px/1.12 var(--font)}
}

/* ══ лист «Поделиться»: QR + адрес + кнопки ═══════════════════════════════ */
/* 🔴 QR + адрес + три кнопки не влезают в короткий экран телефона (568 px в
   ландшафте), а лист приклеен к низу — без своей прокрутки нижняя кнопка
   оказывалась за краем. */
.b-shsheet{padding-bottom:calc(18px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.b-qrbox{display:flex;justify-content:center;margin:14px 0 12px}
/* 🔴 Подложка белая ВСЕГДА, и в тёмной теме: сканеры ждут тёмные модули на
   светлом фоне, инвертированный код дешёвые камеры читают заметно хуже. */
.b-qr{background:#fff;border-radius:16px;padding:12px;line-height:0;
  box-shadow:0 6px 20px rgba(0,0,0,.18)}
.b-qr svg{display:block;width:232px;height:232px;max-width:60vw;max-height:60vw}
.b-url{font:700 13px/1.4 var(--mono);color:var(--ink2);background:var(--soft);
  border:1px solid var(--hair);border-radius:12px;padding:11px 12px;text-align:center;
  overflow-wrap:anywhere}
.b-shbtns{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.b-shb{min-height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--hair);border-radius:14px;
  font:800 15px var(--font);color:var(--ink);cursor:pointer;padding:8px 12px}
.b-shb.pri{background:linear-gradient(150deg,var(--violet2),var(--violet));
  border:0;color:#fff;box-shadow:0 8px 22px rgba(var(--violetRGB),.34)}
.b-shclose{width:100%;min-height:48px;margin-top:12px;background:transparent;border:0;
  font:800 14.5px var(--font);color:var(--muted);cursor:pointer}
@media (min-width:1100px){
  .b-shbtns{flex-direction:row}
  .b-shb{flex:1}
}

/* ══ Ф4 — комментарии: чипы упоминаний, догрузка, значок ответов ═══════════ */
.b-men3{display:inline;font-weight:700;color:var(--violet);text-decoration:none;
  background:rgba(var(--violetRGB),.11);border-radius:6px;padding:1px 4px}
.b-men3:hover{background:rgba(var(--violetRGB),.2)}
.b-morewrap{display:flex;justify-content:center;margin:14px 0 4px}
.b-bell{margin-left:auto;flex:none;min-width:26px;height:22px;padding:0 7px;border:0;
  border-radius:999px;background:var(--violet);color:var(--blog-onacc);cursor:pointer;
  font:800 12px var(--font);display:grid;place-items:center}
.b-belln{line-height:1}
/* лист ответов читателю */
.b-notif{display:flex;flex-direction:column;gap:2px;margin-top:14px;max-height:52vh;
  overflow-y:auto}
.b-nrow{display:block;padding:11px 0;border-top:1px solid var(--hair);text-decoration:none}
.b-notif .b-nrow:first-child{border-top:0}
.b-nhd{font:800 13px var(--font);color:var(--ink)}
.b-nhd.new{color:var(--violet)}
.b-ntx{margin:4px 0 0;font:500 14px/1.45 var(--font);color:var(--ink2);
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.b-nago{margin-top:3px;font:600 11.5px var(--mono);color:var(--faint)}
.b-nsheet{max-height:88vh;overflow-y:auto;padding-bottom:calc(18px + env(safe-area-inset-bottom))}

/* ── Ф5: подписка на блог ────────────────────────────────────────────────── */
/* Кнопка растёт вправо под число подписчиков и остаётся квадратной, пока их 0:
   счётчик «0 подписчиков» на молодом блоге работает против самого блога. */
.b-sub{flex:none;min-width:52px;height:52px;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;padding:0 13px;background:var(--card);
  border:1px solid var(--hair);border-radius:14px;color:var(--ink);cursor:pointer}
.b-sub svg{flex:none}
.b-subn{font:800 14px var(--font);line-height:1}
.b-subn[hidden]{display:none}
.b-sub.on{background:var(--violet);border-color:var(--violet);color:var(--blog-onacc)}
/* ── Ф8: перелинковка каталога со страницами профессий ───────────────────── */
/* Отступы и ширину задаёт общий контейнер каталога (секция H) — здесь только
   собственная раскладка строки. Свой `margin`/`padding` тут ставить нельзя:
   шорткат затрёт `margin:auto` контейнера, и строка уедет к краю окна. */
.b-profs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin-top:2px;
  padding-bottom:26px;font:600 13px var(--font);color:var(--muted)}
.b-profs a{font-weight:700;color:var(--violet);text-decoration:none}
.b-profs a:visited{color:var(--violet)}
.b-profs a:hover{text-decoration:underline}
@media (min-width:1100px){.b-profs{margin-top:4px;padding-bottom:40px;font:600 13.5px var(--font)}}