/* 👤 вход и «Командный центр» в шапке (account.js): справа, слева от «RU / EN» (RU / EN прижат к краю и не двигается).
   ❗ «Предложение по улучшению» (#ideaBtn, .idea-hb — в HTML страниц прямо перед .acct): круглая кнопка слева от входа; вправо прижимается она, .acct — за ней.
   Ширина элемента постоянная для каждого состояния (html[data-acct] ставит account.js из кеша ещё до отрисовки):
   g — гость (круглая кнопка), a — админ, ao — админ своим входом (+ ▾ «Выйти»), m — модератор.
   Подпись у золотой/серебристой кнопки прячется (остаётся значок, подпись — в aria-label), когда шапке не хватает места — «лесенка» ниже (@container sst-bar).
   Телефон (≤ 480 px): окошко входа — на всю ширину под шапкой.
   Приложение (html.dk-tb): шапка — полоса заголовка; элементы (❗ и вход) нажимаются (no-drag) и стоят левее ⬇ обновления и кнопок Windows. */
html { --acct-h:32px; --acct-wa:166px; --acct-wm:124px; }
html[data-lang="en"] { --acct-wa:158px; --acct-wm:128px; }
html.dk-tb { --acct-h:28px; }

.acct { --acct-w:var(--acct-h); flex:none; position:relative; display:flex; align-items:center; justify-content:flex-end;
  width:var(--acct-w); height:var(--acct-h); margin-left:auto; }
html[data-acct="a"] .acct { --acct-w:var(--acct-wa); }
html[data-acct="ao"] .acct { --acct-w:calc(var(--acct-wa) + var(--acct-mw, 26px)); }   /* --acct-mw — место под ▾ (лесенка меняет на .acct) */
html[data-acct="m"] .acct { --acct-w:var(--acct-wm); }
/* ❗ «Предложение по улучшению» стоит прямо перед .acct: вправо прижимается она (margin-left:auto), .acct — сразу за ней (обычный gap .bar-in) */
.bar-in > .idea-hb:not([hidden]) + .acct { margin-left:0; }
@media (min-width: 761px) { .dk-promo:not([hidden]) + .idea-hb, .dk-promo:not([hidden]) + .acct { margin-left:0; } }   /* «Приложение для Windows» уже прижато вправо */
.bar-in > .acct + .lang-sw { margin-left:0; }

/* общие кнопки */
.acct-b { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:var(--acct-h); padding:0; border:0;
  font:inherit; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s, color .15s, box-shadow .2s, filter .15s, transform .12s; }
.acct-b:active { transform:scale(.96); }
.acct-b:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.acct-i { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* гость: круглая кнопка с человечком (в цвет «RU / EN») */
.acct-guest { width:var(--acct-h); border-radius:50%; background:var(--chip); color:var(--text2); }
.acct-guest .acct-i { width:17px; height:17px; }
.acct-guest:hover, .acct-guest[aria-expanded="true"] { color:var(--text); background:var(--line); }

/* ❗ «Предложение по улучшению»: круг как у гостевой кнопки, значок янтарный (--idea-h — меньше в узком окне приложения) */
.idea-hb { flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--idea-h, var(--acct-h)); height:var(--idea-h, var(--acct-h));
  margin-left:auto; padding:0; border:0; border-radius:50%; background:var(--chip); color:#E8A100; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s, color .15s, filter .15s, transform .12s; }
.idea-hb[hidden] { display:none; }
.idea-hb .acct-i { width:17px; height:17px; }
.idea-hb:hover, .idea-hb[aria-expanded="true"] { background:var(--line); color:#FFB31A; filter:drop-shadow(0 0 3px rgba(255,179,26,.4)); }
.idea-hb:active { transform:scale(.96); }
.idea-hb:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .idea-hb { transition:none; } .idea-hb:active { transform:none; } }

/* вошёл: золотая (админ) / серебристая (модератор) кнопка с бликом при наведении */
.acct-split { display:flex; gap:2px; width:100%; height:100%; }
.acct-cmd { width:100%; min-width:0; padding:var(--hb-cp, 0 14px 0 11px); border-radius:calc(var(--acct-h) / 2); overflow:hidden; isolation:isolate; }
.acct-split .acct-cmd { flex:var(--hb-cf, 1); width:var(--hb-cw, 100%); border-radius:var(--hb-crad, calc(var(--acct-h) / 2) 6px 6px calc(var(--acct-h) / 2)); }
.acct-cmd .acct-i { width:var(--hb-ci, 16px); height:var(--hb-ci, 16px); }
.acct-more { display:var(--hb-more, inline-flex); flex:none; width:var(--hb-mw, 24px); border-radius:6px calc(var(--acct-h) / 2) calc(var(--acct-h) / 2) 6px; }
.acct-more .acct-chev { width:14px; height:14px; stroke-width:2.4; transition:transform .2s; }
.acct-more[aria-expanded="true"] .acct-chev { transform:rotate(180deg); }
.acct-t { display:var(--hb-at, block); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:.01em; }

.acct-b.gold { color:#3A2400; background:linear-gradient(135deg, #FFE58A 0%, #FFC83D 42%, #F5A00B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(150,85,0,.25), 0 1px 3px rgba(160,95,0,.35); }
.acct-b.gold .acct-crown path:first-child { fill:rgba(255,255,255,.45); }
.acct-b.gold:hover { filter:saturate(1.12) brightness(1.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(150,85,0,.25), 0 2px 12px rgba(245,160,11,.45); }
.acct-b.silver { color:#1E2530; background:linear-gradient(135deg, #FAFBFD 0%, #D5DBE3 45%, #A3ADBB 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(60,70,90,.2), 0 1px 3px rgba(40,50,70,.3); }
.acct-b.silver .acct-crown path:first-child { fill:rgba(255,255,255,.5); }
.acct-b.silver:hover { filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(60,70,90,.2), 0 2px 12px rgba(150,165,185,.45); }
@media (prefers-color-scheme: dark) {
  .acct-b.gold { box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(150,85,0,.3), 0 0 14px rgba(255,190,40,.22); }
  .acct-b.silver { box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(60,70,90,.25), 0 0 14px rgba(190,205,225,.16); }
}
/* блик: полоса света проезжает по кнопке при наведении */
.acct-cmd::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; transform:translateX(-110%);
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.6) 48%, rgba(255,255,255,.15) 56%, transparent 70%); }
.acct-cmd:hover::after { transform:translateX(110%); transition:transform .7s ease; }
.acct-cmd[aria-current="page"] { cursor:default; }
@media (prefers-reduced-motion: reduce) { .acct-cmd:hover::after { transition:none; transform:translateX(-110%); } .acct-b:active { transform:none; } }
/* ===== 🧩 «лесенка» шапки: вкладки НИКОГДА не обрезаются и не прокручиваются (пороги — по замерам в headless Edge) =====
   .bar-in — контейнер (container-type: inline-size): пороги — по её настоящей ширине (без полей), на любой странице и в приложении.
   Когда места мало, ужимается по очереди: 
   1) 💻 «Приложение для Windows» — только значок (подпись — в title и для экранных дикторов)
   2) 👑 золотая / серебристая кнопка — только значок (подпись — в aria-label и title)
   3) вкладки — короткие подписи «Запись / Войс / Передача» (со значками)
   4) плотнее: без «SST» у логотипа, у «RU / EN» — одна кнопка (другой язык), без ▾ у короны, вкладки плотнее
   5) вкладки — короткие подписи без значков
   6) вкладки — только значки (подпись — для экранных дикторов)
   В шапке: логотип, вкладки, [💻 на /talk], ❗ «Предложение по улучшению», вход (.acct), RU / EN (в приложении — ⬇ вместо RU / EN).
   Пороги — по замерам шапки (Roboto и запасной Arial, берём шире) + запас 4 px, отдельно: сайт / приложение (html.dk-tb), RU / EN, состояние входа
   (html[data-acct]: g — гость, a — админ, ao — админ своим входом, с ▾, m — модератор) и диапазон ширины окна (границы 340 / 380 / 420 / 430 / 480 / 520 / 640 / 760 px — там размеры шапки свои).
   Ярус, который в диапазоне ничего не меняет (напр. 3) при ≤ 480 px — там короткие подписи и так; 2) у гостя), не пишется.
   Приложение: в окне меньше ~414 px шапка не помещается даже значками — но окно приложения не меньше 420 px (minWidth), там запас ~6 px.
   «💻» на /talk место держим на всех страницах (ярусы 2+) — вкладки не «прыгают» при переходе между страницами; в приложении — место под ⬇.
   Каждый ярус — набор переменных --hb-* на детях .bar-in (база: var(--hb-…, обычное значение) в rec.css / desktop.css / i18n.css / выше в этом файле).
   Поменяли подписи вкладок/кнопок, отступы шапки или добавили в неё элемент — пороги надо перемерить (иначе вкладки снова могут уехать под соседей).
   Порядок правил важен: всё это — до телефонных @media ниже (там «≤ 480 px» и т. п. берут верх). */
.bar-in { container:sst-bar / inline-size; }
/* 1) 💻 «Приложение для Windows» — только значок (подпись — в title и для экранных дикторов) */
@media (width > 760px) { @container sst-bar (max-width: 797px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="g"]) .bar-in > * { --hb-ptfs:0; --hb-pgap:0; --hb-ppad:0 9px; } } }
@media (width > 760px) { @container sst-bar (max-width: 893px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="m"]) .bar-in > * { --hb-ptfs:0; --hb-pgap:0; --hb-ppad:0 9px; } } }
@media (width > 760px) { @container sst-bar (max-width: 901px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="g"]) .bar-in > * { --hb-ptfs:0; --hb-pgap:0; --hb-ppad:0 9px; } } }
@media (width > 760px) { @container sst-bar (max-width: 916px) { :where(:root[data-lang="ru"]:not(.dk-tb):is([data-acct="a"], [data-acct="ao"], [data-acct="m"]), :root[data-lang="en"]:not(.dk-tb):is([data-acct="a"], [data-acct="ao"])) .bar-in > * { --hb-ptfs:0; --hb-pgap:0; --hb-ppad:0 9px; } } }
/* 2) 👑 золотая / серебристая кнопка — только значок (подпись — в aria-label и title) */
@media (width > 760px) { @container sst-bar (max-width: 709px) { :where(:root[data-lang="en"].dk-tb[data-acct="m"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 733px) { :where(:root[data-lang="ru"].dk-tb[data-acct="m"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 739px) { :where(:root[data-lang="en"].dk-tb[data-acct="a"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 765px) { :where(:root[data-lang="en"].dk-tb[data-acct="ao"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 775px) { :where(:root[data-lang="ru"].dk-tb[data-acct="a"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 801px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 809px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="m"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 829px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="m"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 839px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="a"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 865px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 871px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="a"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width > 760px) { @container sst-bar (max-width: 897px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } } }
@media (width <= 760px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="a"], [data-acct="ao"], [data-acct="m"]), :root[data-lang="ru"]:not(.dk-tb):is([data-acct="a"], [data-acct="ao"], [data-acct="m"]), :root[data-lang="en"].dk-tb:is([data-acct="a"], [data-acct="ao"], [data-acct="m"]), :root[data-lang="en"]:not(.dk-tb):is([data-acct="a"], [data-acct="ao"], [data-acct="m"])) .bar-in > * { --acct-wa:var(--acct-h); --acct-wm:var(--acct-h); --acct-mw:24px; --hb-at:none; --hb-cp:0; --hb-ci:17px; --hb-cf:none; --hb-cw:var(--acct-h); --hb-mw:22px; } }
/* 3) вкладки — короткие подписи «Запись / Войс / Передача» (со значками) */
@media (width > 760px) { @container sst-bar (max-width: 610px) { :where(:root[data-lang="en"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (width > 760px) { @container sst-bar (max-width: 612px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (width > 760px) { @container sst-bar (max-width: 636px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (width > 760px) { @container sst-bar (max-width: 713px) { :where(:root[data-lang="en"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (width > 760px) { @container sst-bar (max-width: 737px) { :where(:root[data-lang="ru"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"]), :root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (width > 760px) { @container sst-bar (max-width: 761px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (640px < width <= 760px) { @container sst-bar (max-width: 609px) { :where(:root[data-lang="en"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (640px < width <= 760px) { @container sst-bar (max-width: 633px) { :where(:root[data-lang="en"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (640px < width <= 760px) { @container sst-bar (max-width: 637px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (640px < width <= 760px) { @container sst-bar (max-width: 661px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"], :root[data-lang="en"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (640px < width <= 760px) { @container sst-bar (max-width: 685px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (640px < width <= 760px) { @container sst-bar (max-width: 687px) { :where(:root[data-lang="ru"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (640px < width <= 760px) { @container sst-bar (max-width: 710px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 519px) { :where(:root[data-lang="en"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 543px) { :where(:root[data-lang="en"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 549px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 573px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"], :root[data-lang="en"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 597px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 598px) { :where(:root[data-lang="ru"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } } }
@media (480px < width <= 640px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } }
@media (480px < width <= 520px) { :where(:root[data-lang="ru"].dk-tb, :root[data-lang="ru"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"]), :root[data-lang="en"].dk-tb, :root[data-lang="en"]:not(.dk-tb)) .bar-in > * { --hb-tnl:none; --hb-tns:inline; } }
/* 4) плотнее: без «SST» у логотипа, у «RU / EN» — одна кнопка (другой язык), без ▾ у короны, вкладки плотнее */
@media (640px < width <= 760px) { @container sst-bar (max-width: 502px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 420px) { :where(:root[data-lang="en"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 444px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"]), :root[data-lang="en"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 468px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 489px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 374px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"]), :root[data-lang="en"].dk-tb) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 438px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 443px) { :where(:root[data-lang="en"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 465px) { :where(:root[data-lang="ru"]:not(.dk-tb):is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 467px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 488px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 334px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"]), :root[data-lang="en"].dk-tb) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 407px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 417px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 440px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (420px < width <= 430px) { @container sst-bar (max-width: 284px) { :where(:root[data-lang="en"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (420px < width <= 430px) { @container sst-bar (max-width: 408px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (420px < width <= 430px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"]), :root[data-lang="en"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } }
@media (width <= 430px) { :where(:root[data-lang="ru"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } }
@media (380px < width <= 430px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } }
@media (width <= 420px) { @container sst-bar (max-width: 274px) { :where(:root[data-lang="en"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"])) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (width <= 420px) { @container sst-bar (max-width: 381px) { :where(:root[data-lang="ru"].dk-tb:is([data-acct="g"], [data-acct="a"], [data-acct="m"]), :root[data-lang="en"].dk-tb[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (380px < width <= 420px) { @container sst-bar (max-width: 394px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (340px < width <= 380px) { @container sst-bar (max-width: 335px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (340px < width <= 380px) { @container sst-bar (max-width: 358px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (width <= 340px) { @container sst-bar (max-width: 309px) { :where(:root[data-lang="en"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } } }
@media (width <= 340px) { :where(:root[data-lang="ru"]:not(.dk-tb)[data-acct="ao"]) .bar-in > * { --hb-logo:none; --hb-lcur:none; --hb-more:none; --hb-crad:50%; --acct-mw:0px; --hb-tnp:0 8px; --hb-tng:5px; } }
/* 5) вкладки — короткие подписи без значков */
@media (520px < width <= 640px) { @container sst-bar (max-width: 392px) { :where(:root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:none; } } }
@media (520px < width <= 640px) { @container sst-bar (max-width: 416px) { :where(:root[data-lang="ru"].dk-tb) .bar-in > * { --hb-tni:none; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 374px) { :where(:root[data-lang="ru"].dk-tb, :root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:none; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 334px) { :where(:root[data-lang="ru"].dk-tb, :root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:none; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 393px) { :where(:root[data-lang="en"]:not(.dk-tb)) .bar-in > * { --hb-tni:none; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 417px) { :where(:root[data-lang="ru"]:not(.dk-tb)) .bar-in > * { --hb-tni:none; } } }
@media (420px < width <= 430px) { @container sst-bar (max-width: 284px) { :where(:root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:none; } } }
@media (420px < width <= 430px) { @container sst-bar (max-width: 387px) { :where(:root[data-lang="en"]:not(.dk-tb)) .bar-in > * { --hb-tni:none; } } }
@media (420px < width <= 430px) { @container sst-bar (max-width: 408px) { :where(:root[data-lang="ru"]:not(.dk-tb)) .bar-in > * { --hb-tni:none; } } }
@media (420px < width <= 430px) { :where(:root[data-lang="ru"].dk-tb) .bar-in > * { --hb-tni:none; } }
@media (width <= 420px) { @container sst-bar (max-width: 274px) { :where(:root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:none; } } }
@media (380px < width <= 420px) { @container sst-bar (max-width: 371px) { :where(:root[data-lang="en"]:not(.dk-tb)) .bar-in > * { --hb-tni:none; } } }
@media (width <= 420px) { @container sst-bar (max-width: 381px) { :where(:root[data-lang="ru"].dk-tb) .bar-in > * { --hb-tni:none; } } }
@media (380px < width <= 420px) { @container sst-bar (max-width: 394px) { :where(:root[data-lang="ru"]:not(.dk-tb)) .bar-in > * { --hb-tni:none; } } }
/* 6) вкладки — только значки (подпись — для экранных дикторов) */
@media (480px < width <= 520px) { @container sst-bar (max-width: 332px) { :where(:root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (480px < width <= 520px) { @container sst-bar (max-width: 356px) { :where(:root[data-lang="ru"].dk-tb) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 308px) { :where(:root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (430px < width <= 480px) { @container sst-bar (max-width: 333px) { :where(:root[data-lang="ru"].dk-tb) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (420px < width <= 430px) { @container sst-bar (max-width: 284px) { :where(:root[data-lang="ru"].dk-tb, :root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (width <= 420px) { @container sst-bar (max-width: 274px) { :where(:root[data-lang="ru"].dk-tb, :root[data-lang="en"].dk-tb) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (340px < width <= 380px) { @container sst-bar (max-width: 311px) { :where(:root[data-lang="en"]:not(.dk-tb)) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (340px < width <= 380px) { @container sst-bar (max-width: 335px) { :where(:root[data-lang="ru"]:not(.dk-tb)) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
@media (width <= 340px) { @container sst-bar (max-width: 309px) { :where(:root[data-lang="ru"]:not(.dk-tb)) .bar-in > * { --hb-tni:block; --hb-tnfs:0; --hb-tng:0; --hb-tnp:0 9px; } } }
/* ===== конец «лесенки» ===== */

/* окошко входа и меню ▾ — под кнопкой, правым краем по ней */
.acct-pop { position:absolute; z-index:30; right:0; top:calc(100% + 8px); box-sizing:border-box; display:flex; flex-direction:column; gap:8px;
  padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--text); box-shadow:0 16px 40px -14px rgba(0,0,0,.5);
  cursor:auto; -webkit-user-select:text; user-select:text; }
.acct-pop[hidden] { display:none; }
.acct-login { width:264px; }
.acct-pt { font-size:14px; font-weight:600; }
.acct-in { width:100%; min-height:38px; font-size:14px; }
.acct-err { margin:0; min-height:2.7em; font-size:12px; line-height:1.35; color:var(--bad); }   /* место под две строки — окошко не растёт */
.acct-go { min-height:36px; border:0; border-radius:18px; background:var(--text); color:var(--bg); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.acct-go:hover { opacity:.88; }
.acct-go:disabled { opacity:.5; cursor:progress; }
.acct-go:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.acct-menu { min-width:220px; padding:6px; gap:2px; }
.acct-mi { display:flex; align-items:center; min-height:36px; padding:0 12px; border:0; border-radius:9px; background:none; color:var(--text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
.acct-mi:hover, .acct-mi:focus-visible { background:var(--hover); outline:none; }
.acct-mi:disabled { opacity:.5; cursor:progress; }

/* телефон: окошко — на всю ширину прямо под шапкой (позиция — от .bar-in: у неё container-type, она и есть «рамка»; +1 px — линия .bar) */
@media (max-width: 480px) {
  .acct { position:static; }
  .acct-pop { left:0; right:0; top:calc(100% + 1px); width:auto; border-radius:0 0 16px 16px; border-left:0; border-right:0; padding:14px 16px 16px; }
  .acct-in { min-height:44px; font-size:16px; }   /* 16 px — телефон не увеличивает страницу при вводе */
  .acct-go { min-height:44px; border-radius:22px; }
  .acct-mi { min-height:44px; }
}

/* 🪟 приложение: полоса заголовка — «ручка» окна, а элемент нажимается; ⬇ обновления остаётся вплотную к кнопкам Windows */
html.dk-tb .acct, html.dk-tb .acct *, html.dk-tb .idea-hb, html.dk-tb .idea-hb * { -webkit-app-region:no-drag; app-region:no-drag; }
html.dk-tb .bar-in > .acct ~ .dk-tb-upd { margin-left:0; }
html.dk-tb .bar-in:not(:has(> .dk-tb-upd:not([hidden]))) > .acct { margin-right:8px; }   /* без ⬇ — не впритык к кнопкам Windows */
html.dk-tb .acct-pop { top:calc(100% + 7px); }
/* 🪟 узкое окно приложения (минимум ~420 px): с ❗ вкладки даже значками не помещались — шапка плотнее, ❗ чуть меньше (сильнее desktop.css) */
@media (max-width: 480px) { :root.dk-tb body .bar > .bar-in { gap:7px; } html.dk-tb { --idea-h:24px; } }

/* телефон: кнопка входа заняла место в шапке — вкладкам его возвращаем: у «RU / EN» одна кнопка (другой язык), вкладки плотнее
   (то же, что i18n.css делает с 430 px, — здесь уже с 480 px) */
@media (max-width: 480px) {
  html[data-lang="ru"] .lang-sw [data-setlang="ru"], html[data-lang="en"] .lang-sw [data-setlang="en"] { display:none; }
  .lang-sw button { min-width:30px; }
  .bar { --hb-tnp:0 8px; --hb-tng:5px; }
}
/* телефон: ▾ «Выйти» не помещается рядом с вкладками — только корона (выйти можно в Панели управления: «🔑 Свой вход» → «Выйти здесь») */
@media (max-width: 480px) {
  .acct-more { display:none; }
  .acct-split .acct-cmd { border-radius:50%; }
  .acct { --acct-mw:0px; }
}
/* узкий телефон: ещё плотнее, чтобы три вкладки помещались целиком и с кнопкой входа */
@media (max-width: 420px) {
  :root body .bar > .bar-in { gap:6px; padding-left:10px; padding-right:10px; }   /* сильнее live.css / layout.css */
  .bar .tabs-nav { gap:2px; }
  .lang-sw button { min-width:26px; padding:0 4px; }
}
@media (max-width: 340px) { html { --acct-h:28px; } .bar .tabs-nav a.tn { padding:0 5px; } }