/* Оболочка портала RobX: шапка, профильное меню, мобильное меню, фон и
   типографика страниц личного кабинета.
   
   Вынесена из main/lk/menu.php без изменений правил, чтобы этот же вид могли
   переиспользовать другие порталы (как chat-kit): botbox-front подключает
   файл по адресу https://robx.online/shared/rx-shell/rx-shell.css.
   
   Переменные --accent/--accent-light/--accent-rgb здесь НЕ задаются: они
   зависят от организации и вычисляются на странице (см. menu.php). */
:root {
  --ink:   #14213a;
  --ink-2: #4a5870;
  --ink-3: #8794ab;
  --brand: #2563eb;
  --brand-700: #1d4ed8;
  --brand-2: #60a5fa;
  --danger: #e0294a;
  --maxw: 1180px;
  --radius-lg: 22px;
  --line: rgba(15,23,42,0.08);
  --rx-line: rgba(15,23,42,0.08);
  --sh-warm: rgba(122,42,21,0.16);
  --shadow-glass: 0 40px 80px -30px var(--sh-warm), 0 14px 30px -14px rgba(20,30,60,0.22);
  /* Фон кабинета и отступ под фикс-навбаром — ОДНИ на все страницы ЛК.
     Раньше каждая страница красила себя сама (.pdp-root, .edu-root,
     #app.sch-root, а где-то и вовсе никто), и фон то обрывался под
     контентом, то отличался от соседней страницы. */
  --rx-bg: #f0f4f9;
  --rx-nav-h: 74px;              /* низ навбара: top 8 + высота 66 */
  --rx-page-top: 80px;           /* с него начинается содержимое страницы */
}

/* Фон — на html И на body: только body не хватает, когда страница короче
   экрана или когда браузер тянет оверскролл (на iOS видна белая полоса).
   Лендинги этот файл не подключают — он приезжает с меню кабинета, — так
   что их фон не трогается. */
html { background: var(--rx-bg); }
body { background: var(--rx-bg); min-height: 100vh; }
/* Футер (footer.php) в кабинете — в край шапки и панелей: у них отступ 8px
   от экрана, а у публичных страниц полотно уже, и футер там с полями.
   body — чтобы перебить стили футера, которые идут в разметке позже. */
body .rx-footer { padding-left: 0; padding-right: 0; }
/* ── Liquid-glass bar (rounded-rect, вариант 2 макета) ──
   position:fixed; lk-страницы рассчитывают на ~64px фиксированный отступ
   сверху, поэтому держим компактную высоту и top:8px/left:8px/right:8px. */
.rx-nav {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Спек рисует padding:11px 24px, но lk-страницы рассчитывают на ~64px высоту
     фикс-навбара — держим вертикальный паддинг 8px, чтобы бар не наезжал на
     контент, сохраняя роскошный горизонтальный 24px из макета. */
  padding: 8px 24px;
  font-family: "Montserrat", Arial, sans-serif;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 20px 44px -24px rgba(40,60,130,0.3), 0 3px 10px -6px rgba(40,60,130,0.16);
}
.rx-spacer { flex: 1 1 auto; }
.rx-logo { text-decoration: none; flex: none; min-width: 0; padding-left: 4px; }
.rx-logo-mark {
  /* Настоящий жирный (Montserrat ExtraBold, самохост под отдельным именем
     в /static/fonts/logo-font.css) — псевдо-жирный остальных текстов не трогаем */
  font-family: 'Montserrat Logo', 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.rx-nav-pill { display: flex; align-items: center; gap: 2px; }
.rx-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.16s, color 0.16s;
}
.rx-nav-link i { font-size: 15px; color: var(--ink-3); transition: color 0.16s; }
.rx-nav-link:hover { background: rgba(15,23,42,0.05); color: var(--ink); }
.rx-nav-link:hover i { color: var(--brand); }
.rx-nav-link-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 14px -4px rgba(30, 60, 130, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.rx-nav-link-active i { color: var(--brand); }
.rx-nav-right {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
/* ── Объединённая шапка: второй ряд-вкладки внутри стеклянного бара ── */
.rx-nav-r1 { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.rx-nav.has-row2 { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px; border-radius: 28px; }
.rx-nav-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2,.9,.3,1.05); }
.rx-nav-reveal.show { grid-template-rows: 1fr; }
.rx-nav-reveal-inner { overflow: hidden; min-height: 0; }
.rx-nav-tabs {
  display: flex; align-items: center; gap: 5px; overflow-x: auto;
  padding-top: 11px; margin-top: 9px; border-top: 1px solid rgba(15,23,42,0.06);
  scrollbar-width: none;
}
.rx-nav-tabs::-webkit-scrollbar { display: none; }
.rx-tab {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  height: 46px; padding: 0 16px 0 9px; border: none; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--ink-2); font-family: inherit;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: background .16s, color .16s, box-shadow .16s;
}
.rx-tab .chip {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; transition: .16s;
  background: color-mix(in srgb, var(--c, #2563eb) 12%, #fff); color: var(--c, #2563eb);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, #2563eb) 42%, transparent);
}
.rx-tab .chip svg { width: 19px; height: 19px; }
.rx-tab:hover { color: var(--ink); }
.rx-tab:hover .chip { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, #2563eb) 62%, transparent); }
.rx-tab.active {
  background: #fff; color: var(--ink); font-weight: 700;
  box-shadow: 0 12px 26px -14px var(--sh-warm), inset 0 0 0 1px rgba(15,23,42,0.05);
}
.rx-tab.active .chip {
  color: #fff; background: var(--c, #2563eb);
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--c, #2563eb) 74%, #fff), var(--c, #2563eb));
  box-shadow: 0 7px 15px -6px color-mix(in srgb, var(--c, #2563eb) 65%, transparent), inset 0 1px 0 rgba(255,255,255,0.35);
}
/* Ряд ужимается в ДВА шага, а не одним порогом в 640px.
   Вкладок в админке восемь, и в полном виде ряд занимает 1268 px (замерено в
   Montserrat) — на экране 1280 он уже не помещался, и последняя вкладка
   («Настройки») уезжала за край: прокрутка у ряда есть, но полоса скрыта
   (scrollbar-width:none), и снаружи это выглядело как пропавшая вкладка.
   Сначала ужимаются отступы и подпись (ряд становится 1117 px), потом
   подписи убираются вовсе — кроме активной, по ней видно, где находишься.
   Пороги взяты с запасом к замеру: ширина ряда = ширина окна минус 48 px
   (поля .rx-nav). Правишь набор вкладок или шрифт — перемеряй. */
@media (max-width: 1400px) {
  .rx-nav-tabs { gap: 3px; }
  .rx-nav-tabs .rx-tab { height: 42px; padding: 0 12px 0 7px; gap: 8px; font-size: 13.5px; }
  .rx-nav-tabs .rx-tab .chip { width: 30px; height: 30px; }
  .rx-nav-tabs .rx-tab .chip svg { width: 17px; height: 17px; }
}
@media (max-width: 1200px) {
  .rx-nav-tabs .rx-tab { padding: 0 6px; }
  .rx-nav-tabs .rx-tab .rx-tab-label { display: none; }
  .rx-nav-tabs .rx-tab.active { padding: 0 12px 0 6px; }
  .rx-nav-tabs .rx-tab.active .rx-tab-label { display: inline; padding-left: 2px; }
}
/* ── Round icon buttons (кот, чат, сервисы) ── */
.rx-icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  color: var(--ink-2);
  background: #fff;
  border: none;
  box-shadow: inset 0 0 0 1.5px rgba(15,23,42,0.10);
  transition: transform 0.12s, color 0.14s, box-shadow 0.14s;
  text-decoration: none;
}
.rx-icon-btn svg { width: 22px; height: 22px; }
.rx-icon-btn:hover { color: var(--brand); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px rgba(37,99,235,0.55); }
.rx-icon-btn-active { color: var(--brand); box-shadow: inset 0 0 0 1.5px rgba(37,99,235,0.6); }
.rx-world-btn svg { width: 25px; height: 25px; }
/* Glass card (solid white surface with warm elevation) */
.rx-glass-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
/* ── Apps grid button & popover ── */
.rx-apps-wrap { position: relative; display: inline-flex; }
.rx-apps-wrap > .rx-apps-menu { position: absolute; top: calc(100% + 12px); right: 0; }
.rx-apps-menu {
  display: none;
  box-sizing: border-box; /* ширина вместе с полями — как у панели витрин (site-kit) */
  width: 300px; padding: 12px;
  border-radius: 18px; z-index: 200; overflow: hidden;
  font-family: "Montserrat", Arial, sans-serif;
  transform-origin: top right;
}
.rx-apps-menu.open {
  display: block;
  animation: rx-apps-in 0.22s cubic-bezier(.2,.8,.25,1.05) both;
}
@keyframes rx-apps-in {
  from { opacity:0; transform:translateY(-8px) scale(0.985); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.rx-apps-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 10px;
}
.rx-apps-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.rx-apps-head svg { width: 17px; height: 17px; color: var(--ink-3); }
/* featured "Учебное приложение" */
.rx-feat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 13px;
  background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.12);
}
.rx-feat-head { display: flex; align-items: center; gap: 10px; }
.rx-feat-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #2563eb;
  background: rgba(37,99,235,0.14);
}
.rx-feat-ic svg { width: 20px; height: 20px; }
.rx-feat-tx { flex: 1; min-width: 0; }
.rx-feat-tx b { font-size: 14px; font-weight: 700; display: block; color: var(--ink); line-height: 1.15; }
.rx-feat-tx i { font-size: 11.5px; font-style: normal; color: var(--ink-3); }
.rx-feat-apps { display: flex; gap: 7px; }
.rx-feat-app {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff;
  text-decoration: none; transition: transform 0.12s, filter 0.14s;
}
.rx-feat-app:hover { transform: translateY(-1px); filter: brightness(1.06); }
.rx-feat-app i { font-size: 14px; }
.rx-feat-app.tg  { background: #229ED9; }
.rx-feat-app.max { background: #5b2be0; }
/* usage bars (токены + диск): шапка строки и трек на всю ширину —
   так «Пополнить» никогда не выталкивается за край панели */
.rx-usage { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.rx-usage-row {
  padding: 7px 10px 8px; border-radius: 11px;
  background: rgba(15,23,42,0.035); border: 1px solid rgba(15,23,42,0.05);
}
.rx-usage-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rx-usage-top > svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.rx-usage-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex: none; }
.rx-usage-count {
  margin-left: auto; overflow: hidden; text-overflow: ellipsis;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rx-usage-add { font-size: 12px; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; flex: none; }
.rx-usage-add:hover { text-decoration: underline; }
.rx-usage-track { margin-top: 6px; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.1); overflow: hidden; }
.rx-usage-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
  transition: width 0.4s cubic-bezier(.4,.8,.3,1);
}
.rx-usage-fill.warn { background: #f59e0b; }
.rx-usage-fill.over { background: #ef4444; }
/* groups + grid tiles */
.rx-apps-group { padding: 3px 0 0; }
.rx-apps-group-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 4px 6px;
}
.rx-apps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.rx-app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px 7px; border-radius: 12px; text-align: center;
  text-decoration: none; color: inherit;
  transition: background 0.13s, transform 0.12s;
}
.rx-app-tile:hover { background: rgba(37,99,235,0.06); transform: translateY(-1px); }
.rx-app-tile-active { background: rgba(37,99,235,0.10); }
.rx-app-orb {
  position: relative; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  color: var(--orb-ink, #2563eb);
  background: var(--orb-bg, rgba(37,99,235,0.12));
}
.rx-app-orb svg { width: 20px; height: 20px; }
/* Значок строго по центру квадрата: и <svg>, и обёртка v-html — строчные,
   поэтому в них попадает line-height строки и глиф уезжает вверх на
   высоту «хвостика» под базовой линией. Гасим строку и делаем детей
   блочными. */
.rx-app-orb { line-height: 0; }
.rx-app-orb > * { display: flex; align-items: center; justify-content: center; }
.rx-app-orb svg { display: block; }
.rx-app-tile-blue   { --orb-bg: color-mix(in srgb,#2563eb 15%,#fff); --orb-ink:#2563eb; }
.rx-app-tile-mint   { --orb-bg: color-mix(in srgb,#16a34a 15%,#fff); --orb-ink:#16a34a; }
.rx-app-tile-amber  { --orb-bg: color-mix(in srgb,#f59e0b 15%,#fff); --orb-ink:#f59e0b; }
.rx-app-tile-orange { --orb-bg: color-mix(in srgb,#ea580c 15%,#fff); --orb-ink:#ea580c; }
.rx-app-tile-violet { --orb-bg: color-mix(in srgb,#7c3aed 15%,#fff); --orb-ink:#7c3aed; }
.rx-app-tile-cyan   { --orb-bg: color-mix(in srgb,#0891b2 15%,#fff); --orb-ink:#0891b2; }
.rx-app-label { font-size: 12px; font-weight: 600; color: var(--ink); }
@media (max-width: 600px) {
  /* Поповер на телефоне якорится к правому краю ЭКРАНА, а не к кнопке
     «9 точек»: кнопка стоит не у края (справа ещё профиль), и панель,
     привязанная к ней, уезжала за левый край. Ширина — как на компьютере:
     панель во весь экран (left:8px; right:8px) заказчик забраковал
     («растягивается в ширину, не очень красиво»), а три колонки плиток
     в 320 px помещаются. Нюанс: у .rx-nav есть backdrop-filter, из-за
     которого шапка может стать containing block для fixed; шапка во всю
     ширину, так что отступ справа тот же. */
  .rx-apps-wrap > .rx-apps-menu {
    position: fixed;
    top: 74px; right: 8px; left: auto;
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  /* Плотнее: на телефоне ужимаем ВСЮ панель — шапку, блок учебного
     приложения, usage-бары и плитки. Иначе она занимает пол-экрана и
     выглядит рыхлой рядом с компактной десктопной. */
  .rx-apps-menu { padding: 8px; border-radius: 14px; }
  .rx-apps-head { padding: 2px 2px 6px; }
  .rx-apps-title { font-size: 14px; }
  .rx-apps-head svg { width: 15px; height: 15px; }

  .rx-feat { padding: 8px; border-radius: 11px; gap: 6px; }
  .rx-feat-head { gap: 8px; }
  .rx-feat-ic { width: 30px; height: 30px; border-radius: 9px; }
  .rx-feat-ic svg { width: 17px; height: 17px; }
  .rx-feat-tx b { font-size: 13px; }
  .rx-feat-tx i { font-size: 10.5px; }
  .rx-feat-apps { gap: 6px; }
  .rx-feat-app { height: 30px; border-radius: 9px; font-size: 12.5px; gap: 6px; }

  .rx-usage { gap: 5px; margin: 6px 0 0; }
  .rx-usage-row { padding: 6px 9px 7px; border-radius: 10px; }
  .rx-usage-top { gap: 6px; }
  .rx-usage-top > svg { width: 14px; height: 14px; }
  .rx-usage-name { font-size: 12px; }
  .rx-usage-count { font-size: 11px; }
  .rx-usage-add { font-size: 11.5px; }
  .rx-usage-track { margin-top: 5px; height: 4px; }

  .rx-apps-group { padding: 0; }
  .rx-apps-group-label { padding: 7px 4px 2px; font-size: 9.5px; letter-spacing: 0.1em; }
  .rx-apps-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .rx-app-tile { padding: 6px 2px 5px; gap: 4px; border-radius: 10px; }
  .rx-app-orb { width: 34px; height: 34px; border-radius: 10px; }
  .rx-app-orb svg { width: 17px; height: 17px; }
  .rx-app-label { font-size: 10.5px; line-height: 1.2; }
}
/* Profile pill button */
.nav-profile-btn {
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;color:var(--ink);
  padding:4px 12px 4px 5px;height:48px;
  border-radius:999px;cursor:pointer;transition:background .14s;
  background:transparent;border:none;white-space:nowrap;
  font-family:inherit;
}
.nav-profile-btn:hover { background:rgba(15,23,42,0.05); }
.nav-profile-btn .uchev { color:var(--ink-3);font-size:11px; }
/* Profile dropdown (hero + list) */
.nav-profile-drop { position:relative; display:inline-flex; align-items:center; }
.nav-profile-drop .nav-profile-menu {
  display:none; position:absolute; right:0; top:calc(100% + 12px);
  box-sizing:border-box; width:308px; max-width:calc(100vw - 24px); z-index:10000; overflow:hidden; border-radius:20px;
  font-family:"Montserrat", Arial, sans-serif;
}
.nav-profile-drop .nav-profile-menu.open { display:block; animation: rx-apps-in 0.2s cubic-bezier(.2,.8,.25,1.05) both; }
.nav-pf-hero { display:flex; align-items:center; gap:13px; padding:18px 18px 16px; }
.nav-pf-hero .nav-avatar,
.nav-pf-hero .nav-avatar-fallback { width:52px;height:52px;font-size:18px; }
.nav-pf-hero .pn { font-size:16px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-pf-hero .pr { font-size:13px; color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-pf-hr { height:1px; background:var(--line); margin:0; }
.nav-pf-list { padding:6px; }
.nav-profile-menu a {
  display:flex;align-items:center;gap:14px;
  color:var(--ink);padding:9px 12px;text-decoration:none;font-size:15px;font-weight:600;
  border-radius:13px;transition:background .12s;
}
.nav-profile-menu a .pfi {
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;color:var(--brand);background:rgba(37,99,235,0.11);
}
.nav-profile-menu a .pfi svg { width:18px;height:18px; }
.nav-profile-menu a:hover { background:rgba(37,99,235,.07); }
.nav-profile-menu a.danger { color:var(--danger); }
.nav-profile-menu a.danger .pfi { color:var(--danger); background:rgba(224,41,74,0.1); }
/* User avatar */
.nav-avatar {
  width:40px;height:40px;border-radius:50%;object-fit:cover;
  flex-shrink:0;box-shadow:0 6px 16px -6px rgba(40,60,130,0.5);
}
.nav-avatar-fallback {
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#5b9bff,var(--brand));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;flex-shrink:0;
  box-shadow:0 6px 16px -6px rgba(40,60,130,0.5);
}
/* Chat icon (round button matching .rx-icon-btn) */
.nav-chat-link {
  position:relative;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;transition:transform .12s,color .14s,box-shadow .14s;
  color:var(--ink-2);text-decoration:none;
  background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(15,23,42,0.10);
}
.nav-chat-link:hover { color:var(--brand);transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px rgba(37,99,235,0.55); }
.nav-chat-link-active { color:var(--brand);box-shadow:inset 0 0 0 1.5px rgba(37,99,235,0.6); }
.nav-chat-link svg { width:22px;height:22px; }
.chat-badge {
  display:none;position:absolute;top:0;right:-2px;
  background:#d93025;color:#fff;font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:10px;min-width:16px;
  text-align:center;line-height:14px;
}
/* ── Responsive ── */
@media (max-width:900px) {
  /* Единый вид шапки на телефоне (и в ЛК, и на публичных страницах):
     логотип + круглые кнопки (вселенная, чат, «9 точек») + аватар-профиль.
     Раньше в ЛК круглые кнопки прятались и оставался один аватар, а на
     главной наоборот выводилось ещё и имя с фамилией — из-за чего шапка
     на одном и том же телефоне выглядела по-разному и уезжала за край. */
  .rx-nav .rx-nav-pill { display:none; }
  /* Имя рядом с аватаром на телефоне не нужно: место занимает, а профиль
     всё равно открывается по аватару. Меню — то же, что на компьютере и
     на публичных страницах (site-nav.css прячет имя так же). */
  .rx-nav .rx-nav-right #menu-profile-name { display:none; }
  .rx-nav .rx-nav-right .nav-profile-btn { padding:4px 8px 4px 4px; height:44px; }
  .rx-nav .rx-nav-right { gap:6px; }
  .rx-nav .rx-icon-btn, .rx-nav .nav-chat-link { width:38px; height:38px; }
  .rx-nav .rx-icon-btn svg, .rx-nav .nav-chat-link svg { width:20px; height:20px; }
  .rx-nav .rx-world-btn svg { width:22px; height:22px; }
  .rx-logo-mark { max-width:38vw; font-size:19px; }
}
/* Кнопки шапки на телефоне ниже (38 вместо 44 px) — и низ шапки выше. */
@media (max-width:900px) {
  :root { --rx-nav-h: 68px; }
}
/* Совсем узкие экраны: круглых кнопок три, аватар и логотип — чат
   прячем, он есть в панели «Сервисы RobX». */
@media (max-width:380px) {
  .rx-nav .rx-nav-right .nav-chat-link { display:none; }
}
/* ── Единый шрифт ЛК (Montserrat, как на chat.php) ──
   menu.php подключается в <body> позже <head>-стилей страницы, поэтому правило с
   той же специфичностью выигрывает по порядку источника и унифицирует шрифт на
   всех страницах, которые включают это меню.
   ВАЖНО: ссылку на шрифт держим как `family=Montserrat` (вес 400) — НЕ добавляем
   реальные жирные начертания, иначе у уже существующего псевдо-жирного текста
   (например, имён в chat.php) поменяется вид (станет «слишком жирным»).
   Исключения: игровое полотно котика (.game-root — свой Baloo 2/Comfortaa) и
   blox.php (не подключает это меню, поэтому сохраняет свой шрифт). */
body, h1, h2, h3, h4, h5, h6, .w3-bar, button, input, textarea, select {
  font-family: "Montserrat", Arial, sans-serif;
}
.game-root, .game-root * { font-family: 'Baloo 2','Comfortaa', sans-serif; }

/* ── Кнопки ЛК ──
   Канон — из lk/models.php (.mdl-root .rx-btn): та же геометрия, те же цвета.
   Здесь правила без страничного скоупа, поэтому страницы со своей копией
   (models.php, panel.php) по специфичности выигрывают и выглядят как прежде,
   а порталы, которые подключают только rx-shell.css, получают те же кнопки.
   text-decoration:none — чтобы класс можно было вешать и на <a> (как в
   panel.php). */
.rx-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  border: 1px solid transparent; text-decoration: none;
  transition: background .15s, transform .12s;
}
.rx-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.rx-btn-primary:hover { background: #1d4ed8; }
.rx-btn-glass { background: #fff; color: #3c4043; border-color: rgba(0,0,0,.08); }
.rx-btn-glass:hover { background: #f8f9fa; }
.rx-btn-danger { background: rgba(217,48,37,.08); color: #d93025; border-color: rgba(217,48,37,.2); }
.rx-btn-danger:hover { background: rgba(217,48,37,.14); }
.rx-btn:disabled { opacity: .5; cursor: not-allowed; }
.rx-btn-icon { padding: 8px 10px; }

/* ── Контейнер страницы ──
   Ширина и верхний отступ были у каждого раздела свои (900px/80px против
   980px/128px у DNS), и при переходе между разделами содержимое прыгало.
   Числа взяты с DNS — раздел, по которому равняемся. */
.rx-page { max-width: 980px; margin: 0 auto; padding: 128px 16px 48px; }
@media (max-width: 760px) {
  /* Поля по бокам — те же 8px, что у шапки (.rx-nav), чтобы блоки стояли
     под ней стенка в стенку. */
  .rx-page { padding: 84px 8px 32px; }
}

/* ── Шапка страницы ──
   Канон — «Мои устройства» (lk/panel.php, .pdp-page-h): пилюля возврата,
   крупный заголовок раздела, серая строка контекста под ним и кнопки справа.
   Школьные разделы рисовали шапку каждый по-своему — где мелкий h2 со
   стрелкой, где h1 со склеенным названием школы в одну строку, — и страницы
   выглядели из разных приложений. Правила живут здесь, а не на странице:
   rx-shell.css подключает menu.php, то есть их получает КАЖДАЯ страница
   кабинета, и следующий раздел не заведёт себе шестой вариант шапки.

   Скоупа нет намеренно: у страниц со своей копией (panel.php, models.php)
   селекторы длиннее и по специфичности выигрывают — их вид не меняется. */
.rx-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.rx-page-head-main { min-width: 0; }
.rx-page-head h1 {
  margin: 0; font-size: 30px; font-weight: 600;
  letter-spacing: -.5px; color: #202124; line-height: 1.15;
}
/* Строка контекста под заголовком: чья это школа, сколько чего. Пока данные
   не приехали, строка пустая — но место под неё держим, иначе заголовок
   прыгает при загрузке. */
.rx-page-sub { font-size: 13.5px; color: #80868b; margin-top: 4px; min-height: 18px; }
.rx-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Пилюля возврата — над заголовком, как на странице DNS. */
.rx-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 12px; padding: 7px 15px; border-radius: 999px;
  background: rgba(15,23,42,.05); color: #3c4043;
  font-size: 13px; font-weight: 500; text-decoration: none;
  transition: background .15s;
}
.rx-back:hover { background: rgba(15,23,42,.09); color: #202124; }
.rx-back svg { flex: none; }
/* Вводный абзац раздела — под шапкой, а не внутри неё: это объяснение, а не
   часть заголовка. */
.rx-page-lead {
  margin: -6px 0 22px; max-width: 760px;
  font-size: 13.5px; line-height: 1.55; color: #5f6368;
}
.rx-page-lead a { color: var(--brand); }

@media (max-width: 760px) {
  .rx-page-head { gap: 12px; margin-bottom: 14px; }
  .rx-page-head h1 { font-size: 22px; }
  .rx-page-actions { width: 100%; }
}