/* Общая одежда меню профиля и кабинетов.

   Один файл на все четыре входа (главный сайт, кабинет партнёра, кабинет
   бизнеса, админка платформы): у человека часто несколько ролей сразу, и
   переключатель кабинетов он видит в каждом из них. Пока стили жили внутри
   каждой страницы, одно и то же меню выглядело в трёх местах по-разному.

   Здесь же цвета кабинетов. Каждый кабинет — свой оттенок: партнёрский
   сливовый, деловой хвойный, служебный стальной. Тем же оттенком залита
   шапка самого кабинета, чтобы переход был узнаваем ещё до чтения заголовка.
   Оттенки приглушённые: бренд остаётся золотым, цвет кабинета только
   размечает роль, а не спорит с ним за внимание. */

:root{
  --cab-partner:#6B5AA6;  --cab-partner-strong:#54438A; --cab-partner-soft:#F0ECFA; --cab-partner-deep:#453A6E; --cab-partner-line:rgba(107,90,166,0.28);
  --cab-business:#1F7A63; --cab-business-strong:#186153; --cab-business-soft:#E4F2ED; --cab-business-deep:#17544A; --cab-business-line:rgba(31,122,99,0.28);
  --cab-platform:#41577A; --cab-platform-strong:#334660; --cab-platform-soft:#E5EBF4; --cab-platform-deep:#2C3E58; --cab-platform-line:rgba(65,87,122,0.28);
  --cab-bonus:#3B6FE0; --cab-bonus-bg:#E8EEFC;
  --cab-steps:#C4941F; --cab-steps-bg:rgba(227,179,65,0.16);
  --cab-on-deep:#FFFFFF;
  --cab-on-deep-muted:rgba(255,255,255,0.66);
  --cab-on-deep-line:rgba(255,255,255,0.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cab-partner:#A99AE0;  --cab-partner-strong:#BCB0EA; --cab-partner-soft:rgba(169,154,224,0.15); --cab-partner-deep:#332B52; --cab-partner-line:rgba(169,154,224,0.34);
    --cab-business:#5FC3A6; --cab-business-strong:#7BD2B9; --cab-business-soft:rgba(95,195,166,0.15); --cab-business-deep:#173F37; --cab-business-line:rgba(95,195,166,0.34);
    --cab-platform:#93AECE; --cab-platform-strong:#AFC4DC; --cab-platform-soft:rgba(147,174,206,0.15); --cab-platform-deep:#243343; --cab-platform-line:rgba(147,174,206,0.34);
    --cab-bonus:#7E9DF5; --cab-bonus-bg:rgba(126,157,245,0.16);
    --cab-steps:#E8BE55; --cab-steps-bg:rgba(232,190,85,0.16);
  }
}
:root[data-theme="dark"]{
  --cab-partner:#A99AE0;  --cab-partner-strong:#BCB0EA; --cab-partner-soft:rgba(169,154,224,0.15); --cab-partner-deep:#332B52; --cab-partner-line:rgba(169,154,224,0.34);
  --cab-business:#5FC3A6; --cab-business-strong:#7BD2B9; --cab-business-soft:rgba(95,195,166,0.15); --cab-business-deep:#173F37; --cab-business-line:rgba(95,195,166,0.34);
  --cab-platform:#93AECE; --cab-platform-strong:#AFC4DC; --cab-platform-soft:rgba(147,174,206,0.15); --cab-platform-deep:#243343; --cab-platform-line:rgba(147,174,206,0.34);
  --cab-bonus:#7E9DF5; --cab-bonus-bg:rgba(126,157,245,0.16);
  --cab-steps:#E8BE55; --cab-steps-bg:rgba(232,190,85,0.16);
}

/* ---------- шильдики баланса ----------
   Бонусы и шаги переехали из шапки сайта в меню профиля: в шапке они
   отнимали место у навигации и на телефоне всё равно прятались. */
/* Ширина по содержимому, а не половина строки: со стрелкой в равных
   колонках число обрезалось многоточием — «90 000 бону…». */
.cab-balances{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 2px;}
.cab-chip{
  display:flex; align-items:center; gap:7px; min-width:0;
  padding:8px 11px; border:none; border-radius:9px;
  font:inherit; font-weight:800; font-size:0.83rem; line-height:1.15;
  text-align:left; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.cab-chip .cab-chip-ic{flex-shrink:0; display:inline-flex; align-items:center; font-size:0.95em;}
/* Подчёркнутое число и стрелка справа: без них шильдик читался как ярлык с
   балансом, и люди не понимали, что по нему можно перейти в раздел. */
.cab-chip .cab-chip-val{overflow:hidden; text-overflow:ellipsis; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:currentColor;}
.cab-chip .cab-chip-go{margin-left:auto; padding-left:4px; font-weight:800; opacity:0.7; flex-shrink:0; transition:opacity 0.14s ease, transform 0.14s ease;}
.cab-chip:hover .cab-chip-go{opacity:1; transform:translateX(1px);}
.cab-chip .cab-chip-sub{display:block; font-weight:600; font-size:0.72rem; opacity:0.75; margin-top:2px;}
.cab-chip img.steps-icon{width:0.82em; height:1.22em; object-fit:contain; display:inline-block; flex-shrink:0;}
.cab-chip--bonus{background:var(--points-bg, var(--cab-bonus-bg)); color:var(--points, var(--cab-bonus));}
.cab-chip--steps{background:var(--steps-bg, var(--cab-steps-bg)); color:var(--steps, var(--cab-steps));}
.cab-chip:hover{filter:brightness(0.97);}

/* ---------- пункты «мои кабинеты» ---------- */
.cab-item{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:11px 13px 11px 16px; border-radius:11px; overflow:hidden;
  background:var(--cab-soft, var(--bg-sunken)); color:var(--text);
  border:1px solid transparent; text-align:left; text-decoration:none;
  font:inherit; cursor:pointer;
}
.cab-item::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cab-color, var(--accent));}
.cab-item b{display:block; font-size:0.89rem; font-weight:800;}
.cab-item .sub, .cab-item .cab-hint{display:block; font-size:0.76rem; font-weight:500; line-height:1.35; margin-top:2px; color:var(--text-muted);}
.cab-item .cab-arrow, .cab-item .chev{color:var(--cab-color, var(--accent-strong)); font-weight:800; flex-shrink:0;}
.cab-item:hover{border-color:var(--cab-line, var(--line-strong));}
.cab-item.here{background:transparent; border:1px dashed var(--cab-line, var(--line-strong)); color:var(--text-muted); cursor:default;}
.cab-item.here::before{opacity:0.5;}
.cab-item .cab-flag{font-size:0.7rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--cab-color, var(--text-faint)); flex-shrink:0;}
.cab-item--partner{--cab-color:var(--cab-partner-strong); --cab-soft:var(--cab-partner-soft); --cab-line:var(--cab-partner-line);}
.cab-item--business{--cab-color:var(--cab-business-strong); --cab-soft:var(--cab-business-soft); --cab-line:var(--cab-business-line);}
.cab-item--platform{--cab-color:var(--cab-platform-strong); --cab-soft:var(--cab-platform-soft); --cab-line:var(--cab-platform-line);}
.cab-item--client{--cab-color:var(--accent-strong); --cab-soft:var(--bg-sunken); --cab-line:var(--line-strong);}

/* ---------- шапка кабинета в его цвете ---------- */
.cab-topbar{background:var(--cab-head-bg, var(--bg-panel)) !important; border-bottom:1px solid var(--cab-on-deep-line) !important; color:var(--cab-on-deep);}
.cab-topbar--partner{--cab-head-bg:var(--cab-partner-deep);}
.cab-topbar--business{--cab-head-bg:var(--cab-business-deep);}
.cab-topbar--platform{--cab-head-bg:var(--cab-platform-deep);}
.cab-topbar .brand, .cab-topbar .brand-home{color:var(--cab-on-deep);}
.cab-topbar .brand .sub, .cab-topbar .brand .divider{color:var(--cab-on-deep-muted);}
.cab-topbar .nav-btn, .cab-topbar .tabbar button{color:var(--cab-on-deep-muted);}
.cab-topbar .nav-btn:hover, .cab-topbar .tabbar button:hover{color:var(--cab-on-deep);}
.cab-topbar .nav-btn.active, .cab-topbar .tabbar button.active{color:var(--cab-on-deep); border-bottom-color:var(--accent);}
.cab-topbar .profile-btn{background:rgba(255,255,255,0.10); border-color:var(--cab-on-deep-line); color:var(--cab-on-deep);}
.cab-topbar .profile-btn:hover{background:rgba(255,255,255,0.17);}
.cab-topbar .profile-btn .avatar-dot{background:var(--cab-on-deep); color:var(--cab-head-bg);}
.cab-topbar .meta, .cab-topbar .token-row .meta{color:var(--cab-on-deep-muted);}
.cab-topbar .hamburger-btn{color:var(--cab-on-deep); border-color:var(--cab-on-deep-line);}
.cab-topbar .btn-outline{background:rgba(255,255,255,0.10); border-color:var(--cab-on-deep-line); color:var(--cab-on-deep);}
.cab-topbar .btn-outline:hover{background:rgba(255,255,255,0.17);}
/* Само меню лежит внутри шапки, но живёт на своей белой карточке —
   светлый текст шапки в него наследоваться не должен. */
.cab-topbar .profile-menu, .cab-topbar .client-profile-menu, .cab-topbar .drawer{color:var(--text);}
/* И всё, что светлая шапка перекрашивает под себя, внутри меню возвращается
   к обычным цветам: кнопки в меню на белой карточке иначе белые на белом. */
.cab-topbar .profile-menu .btn-outline, .cab-topbar .client-profile-menu .btn-outline,
.cab-topbar .profile-menu .btn, .cab-topbar .client-profile-menu .btn{background:var(--bg-panel); border-color:var(--line-strong); color:var(--text);}
.cab-topbar .profile-menu .btn-outline:hover, .cab-topbar .client-profile-menu .btn-outline:hover,
.cab-topbar .profile-menu .btn:hover, .cab-topbar .client-profile-menu .btn:hover{background:var(--bg-sunken);}
.cab-topbar .profile-menu .btn-primary, .cab-topbar .client-profile-menu .btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.cab-topbar .profile-menu .btn-danger-outline, .cab-topbar .client-profile-menu .btn-danger-outline,
.cab-topbar .profile-menu [style*="--danger"], .cab-topbar .client-profile-menu [style*="--danger"]{color:var(--danger);}
.cab-topbar .profile-menu .meta, .cab-topbar .client-profile-menu .meta{color:var(--text-muted);}

/* На телефоне меню остаётся меню: узкая карточка у своей кнопки справа,
   а не панель во весь экран. Ширины хватает, чтобы подписи разделов
   читались в одну-две строки. */
@media (max-width:520px){
  .cab-balances{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px;}
  .cab-chip{padding:7px 9px; gap:6px; font-size:0.78rem;}
  .cab-item{padding:10px 10px 10px 14px;}
  .cab-item b{font-size:0.86rem;}
  .cab-item .sub, .cab-item .cab-hint{font-size:0.73rem;}
}

/* ---------- меню профиля: один вид на все четыре входа ----------
   Главный сайт (.client-profile-menu), кабинеты партнёра и бизнеса, админка
   (.profile-menu) — все получают класс .pm-menu. Позиционирование задаёт сама
   страница, здесь только внешний вид и поведение.

   Одно тёмное пятно — карта участника с именем и балансами; ниже тихий список
   без рамок и плиток, кабинеты цветными метками, действия текстом в подвале.
   Меню раскрывается из кнопки, дети появляются с задержкой по порядку
   (nth-child), золотой блик на карте идёт за курсором (data-pm-sheen).
   Карта тёмная в обеих темах — её цвета заданы своими переменными. */
.pm-menu{--pm-ink:#1B1A17; --pm-on:#F7F6F3; --pm-on-muted:rgba(247,246,243,0.58); --pm-on-line:rgba(247,246,243,0.12); --pm-sheen:rgba(227,179,65,0.28); --pm-bonus:#A7BDF5; --pm-steps:#F0C860; --pm-gold:var(--gold, var(--accent)); --pm-gold-ink:var(--gold-ink, var(--accent-ink)); --pm-shadow:0 1px 2px rgba(27,26,23,0.05), 0 12px 24px -12px rgba(27,26,23,0.18), 0 40px 80px -32px rgba(27,26,23,0.42);
  box-sizing:border-box; background:var(--bg-panel); color:var(--text); border:1px solid var(--line); border-radius:20px; box-shadow:var(--pm-shadow); padding:6px; text-align:left;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  transform-origin:top right; animation:pm-open 0.42s cubic-bezier(.22,1,.36,1) both;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pm-menu{--pm-ink:#0F0E0B; --pm-on:#F2F1EC; --pm-sheen:rgba(232,190,85,0.22); --pm-shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 24px -12px rgba(0,0,0,0.5), 0 40px 80px -32px rgba(0,0,0,0.8);}
}
:root[data-theme="dark"] .pm-menu{--pm-ink:#0F0E0B; --pm-on:#F2F1EC; --pm-sheen:rgba(232,190,85,0.22); --pm-shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 24px -12px rgba(0,0,0,0.5), 0 40px 80px -32px rgba(0,0,0,0.8);}
@keyframes pm-open{0%{opacity:0; transform:translateY(-6px) scale(0.96); clip-path:inset(0 0 40% 0 round 20px);} 100%{opacity:1; transform:none; clip-path:inset(0 0 0 0 round 20px);}}
@keyframes pm-item{0%{opacity:0; transform:translateY(8px);} 100%{opacity:1; transform:none;}}
.pm-menu > *{animation:pm-item 0.5s cubic-bezier(.22,1,.36,1) both;}
.pm-menu > :nth-child(1){animation-delay:0.02s;}
.pm-menu > :nth-child(2){animation-delay:0.09s;}
.pm-menu > :nth-child(3){animation-delay:0.15s;}
.pm-menu > :nth-child(4){animation-delay:0.21s;}
.pm-menu > :nth-child(5){animation-delay:0.27s;}
.pm-menu > :nth-child(6){animation-delay:0.33s;}

/* Открытое меню переживает перерисовку страницы: пришли балансы, ответил
   сервер — шапка собирается заново, и анимация появления играла второй раз,
   отчего меню на глазах моргало. Страница помечает таким меню класс
   .pm-static: оно уже на экране, показывать его «выезд» нечего. */
.pm-menu.pm-static, .pm-menu.pm-static > *{animation:none;}
/* Уход по ссылке из меню (соседний кабинет, вход). Убрать меню из документа
   нельзя — вместе с ним пропадёт ссылка, по которой человек кликнул, и
   перехода не случится; поэтому прячем стилем, а состояние закрывает страница. */
.pm-menu.pm-gone{display:none;}

/* стрелка на кнопке профиля: поворачивается, когда меню открыто */
.pm-caret{display:inline-block; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; opacity:0.6; transform:translateY(-2px) rotate(45deg); transition:transform 0.25s cubic-bezier(.2,.7,.2,1); margin-left:2px; flex-shrink:0;}
.profile-btn[aria-expanded="true"] .pm-caret, .profile-btn.active .pm-caret{transform:translateY(2px) rotate(225deg);}

/* карта участника */
.pm-menu .pm-card{position:relative; overflow:hidden; border-radius:15px; background:var(--pm-ink); color:var(--pm-on); padding:16px 16px 14px; isolation:isolate; --mx:70%; --my:20%;}
.pm-menu .pm-card::before{content:''; position:absolute; inset:-40%; z-index:-1; pointer-events:none; background:radial-gradient(closest-side at var(--mx) var(--my), var(--pm-sheen), transparent 70%); opacity:0.9;}
.pm-menu .pm-card::after{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,0.06), transparent 40%, transparent 65%, rgba(255,255,255,0.03));}
.pm-menu .pm-who{display:flex; align-items:center; gap:12px; min-width:0;}
.pm-menu .pm-who > span:last-child{min-width:0;}
.pm-menu .pm-avatar{width:42px; height:42px; border-radius:50%; background:var(--pm-gold); color:var(--pm-gold-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.92rem; letter-spacing:0.02em; flex-shrink:0;}
.pm-menu .pm-avatar--partner{background:var(--cab-partner); color:#fff;}
.pm-menu .pm-avatar--business{background:var(--cab-business); color:#fff;}
.pm-menu .pm-avatar--platform{background:var(--cab-platform); color:#fff;}
.pm-menu .pm-name{display:block; font-weight:800; font-size:1.02rem; letter-spacing:-0.015em; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0;}
.pm-menu .pm-sub{display:block; font-size:0.76rem; color:var(--pm-on-muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pm-menu .pm-sub .club{color:var(--pm-gold); font-weight:600;}
.pm-menu .pm-stats{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--pm-on-line);}
.pm-menu .pm-stats.one{grid-template-columns:1fr;}
.pm-menu .pm-stat{border:none; background:transparent; text-align:left; padding:4px; margin:0 -4px; border-radius:10px; color:inherit; font:inherit; display:block; cursor:pointer; text-decoration:none;}
.pm-menu .pm-stat small{display:block; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--pm-on-muted); font-weight:700; padding-left:2px;}
.pm-menu .pm-stat strong{display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:6px 8px 6px 9px; border-radius:11px; background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.08); font-size:1.28rem; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; line-height:1.1; white-space:nowrap; transition:background 0.18s ease, border-color 0.18s ease;}
.pm-menu .pm-stat:hover strong{background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.14);}
.pm-menu .pm-stat .ic{display:inline-flex; width:17px; height:17px; flex-shrink:0;}
.pm-menu .pm-stat .ic svg{width:100%; height:100%; display:block;}
.pm-menu .pm-stat.bonus strong{color:var(--pm-bonus);}
.pm-menu .pm-stat.steps strong{color:var(--pm-steps);}
.pm-menu .pm-stat .go{padding-left:2px; font-size:1.05rem; font-weight:700; opacity:0.7; transition:transform 0.2s ease, opacity 0.2s ease;}
/* Подпись-призыв под числом: человек видит не только остаток, но и что с ним
   делать. Лежит внутри той же кнопки, поэтому ведёт туда же, куда и цифра. */
.pm-menu .pm-stat .cta{display:block; margin-top:5px; padding-left:2px; font-size:0.68rem; font-weight:600; color:var(--pm-on-muted); transition:color 0.18s ease;}
.pm-menu .pm-stat:hover .cta{color:var(--pm-on);}

.pm-menu .pm-stat:hover .go{opacity:1; transform:translateX(2px);}

/* список разделов: без рамок, стрелка проявляется при наведении */
.pm-menu .pm-list{display:flex; flex-direction:column; padding:6px 0 2px;}
.pm-menu .pm-row{display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent; text-align:left; padding:10px 12px; border-radius:12px; text-decoration:none; position:relative; color:inherit; font:inherit; cursor:pointer; transition:background 0.16s ease; box-sizing:border-box;}
.pm-menu .pm-row:hover{background:var(--bg-sunken);}
.pm-menu .pm-row b{display:block; font-weight:700; font-size:0.92rem;}
.pm-menu .pm-row.accent b{color:var(--accent-strong);}
.pm-menu .pm-row .hint{display:block; font-size:0.76rem; color:var(--text-muted); margin-top:1px;}
.pm-menu .pm-row .hint.alert{color:var(--warn); font-weight:600;}
.pm-menu .pm-row .right{margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0;}
.pm-menu .pm-row .count{font-size:0.78rem; font-weight:700; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.pm-menu .pm-row .count.on{color:var(--warn);}
.pm-menu .pm-row .val{font-size:0.8rem; font-weight:600; color:var(--text-muted);}
.pm-menu .pm-row .val.danger{color:var(--danger);}
/* точка у «Сообщений»: серая с нулём, когда всё прочитано; жёлтая с числом — когда ответили */
.pm-menu .pm-row .dot{width:7px; height:7px; border-radius:50%; background:var(--text-faint); box-shadow:0 0 0 3px var(--bg-sunken);}
.pm-menu .pm-row .dot.on{background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg);}
.pm-menu .pm-row .chev{width:7px; height:7px; border-right:1.5px solid var(--text-faint); border-bottom:1.5px solid var(--text-faint); transform:rotate(-45deg) translate(-3px, 3px); opacity:0; transition:transform 0.2s ease, opacity 0.2s ease;}
.pm-menu .pm-row:hover .chev{opacity:1; transform:rotate(-45deg); border-color:var(--text);}
.pm-menu .pm-row.active{background:var(--bg-sunken);}
.pm-menu .pm-row.active::before{content:''; position:absolute; left:0; top:50%; width:3px; height:18px; border-radius:2px; background:var(--pm-gold); transform:translateY(-50%);}
/* строки «название — значение» (тариф, дата, статус) */
.pm-menu .pm-kv{display:flex; flex-direction:column; padding:4px 0 2px;}
.pm-menu .pm-kv div{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 12px; font-size:0.8rem; color:var(--text-muted);}
.pm-menu .pm-kv div span:last-child{color:var(--text); font-weight:600; text-align:right;}

/* кабинеты — цветные метки */
.pm-menu .pm-cap{font-size:0.66rem; font-weight:800; letter-spacing:0.11em; text-transform:uppercase; color:var(--text-faint); padding:10px 12px 4px;}
.pm-menu .pm-cabs{display:flex; flex-direction:column; padding:0 0 4px;}
.pm-menu .pm-cab{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; border:none; background:transparent; text-align:left; text-decoration:none; color:inherit; font:inherit; width:100%; box-sizing:border-box; transition:background 0.16s ease;}
.pm-menu a.pm-cab:hover{background:var(--bg-sunken);}
.pm-menu .pm-cab .sw{width:10px; height:10px; border-radius:3px; background:var(--c, var(--accent)); flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);}
.pm-menu .pm-cab b{font-weight:700; font-size:0.9rem; white-space:nowrap;}
.pm-menu .pm-cab .hint{margin-left:auto; min-width:0; font-size:0.74rem; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pm-menu .pm-cab.here{cursor:default;}
.pm-menu .pm-cab.here b{color:var(--text-muted); font-weight:600;}
.pm-menu .pm-cab.here .hint{font-size:0.66rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;}
.pm-menu .pm-cab--partner{--c:var(--cab-partner);} .pm-menu .pm-cab--business{--c:var(--cab-business);} .pm-menu .pm-cab--platform{--c:var(--cab-platform);} .pm-menu .pm-cab--client{--c:var(--pm-gold);}
.pm-menu .pm-cab.add .sw{background:transparent; box-shadow:none; position:relative;}
.pm-menu .pm-cab.add .sw::before, .pm-menu .pm-cab.add .sw::after{content:''; position:absolute; background:var(--text-muted); left:50%; top:50%; transform:translate(-50%,-50%);}
.pm-menu .pm-cab.add .sw::before{width:10px; height:1.5px;}
.pm-menu .pm-cab.add .sw::after{width:1.5px; height:10px;}
.pm-menu .pm-cab.add b{color:var(--text-muted); font-weight:600;}

/* подвал: действия текстом, выход краснеет при наведении */
.pm-menu .pm-foot{display:flex; align-items:center; justify-content:space-between; gap:4px 14px; flex-wrap:wrap; padding:8px 12px; margin-top:2px; border-top:1px solid var(--line);}
.pm-menu .pm-foot button, .pm-menu .pm-foot a{border:none; background:none; padding:6px 0; font:inherit; font-size:0.8rem; font-weight:600; color:var(--text-muted); cursor:pointer; text-decoration:none; transition:color 0.16s ease;}
.pm-menu .pm-foot button:hover, .pm-menu .pm-foot a:hover{color:var(--text);}
.pm-menu .pm-foot .out{margin-left:auto;}
.pm-menu .pm-foot .out:hover{color:var(--danger);}

/* гость: приглашение войти вместо карты */
.pm-menu .pm-guest{padding:18px 16px 8px;}
.pm-menu .pm-guest h3{margin:0; font-size:1.06rem; font-weight:800; letter-spacing:-0.015em; line-height:1.25;}
.pm-menu .pm-guest p{margin:6px 0 0; font-size:0.8rem; color:var(--text-muted); line-height:1.45;}
.pm-menu .pm-cta{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; box-sizing:border-box; margin-top:14px; background:var(--pm-ink); color:var(--pm-on); border:none; border-radius:12px; padding:12px 14px; font:inherit; font-weight:700; font-size:0.9rem; text-decoration:none; position:relative; overflow:hidden; isolation:isolate; cursor:pointer; --mx:50%; --my:50%;}
.pm-menu .pm-cta::before{content:''; position:absolute; inset:-60%; z-index:-1; background:radial-gradient(closest-side at var(--mx) var(--my), var(--pm-sheen), transparent 70%); opacity:0.9;}
.pm-menu .pm-cta .arr{transition:transform 0.2s ease;}
.pm-menu .pm-cta:hover .arr{transform:translateX(3px);}
.pm-menu .pm-row:focus-visible, .pm-menu .pm-cab:focus-visible, .pm-menu .pm-stat:focus-visible, .pm-menu .pm-foot button:focus-visible, .pm-menu .pm-foot a:focus-visible, .pm-menu .pm-cta:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .pm-menu, .pm-menu > *{animation:none;} .pm-caret{transition:none;} }

/* На телефоне — то же меню, только компактнее и без вторых строк у разделов:
   так оно целиком входит в экран без прокрутки. Прокрутка при этом остаётся
   (overflow-y выше) на случай совсем маленького экрана. Никаких шторок снизу:
   на iPhone жест от нижнего края выходит из приложения. */
@media (max-width:520px){
  .pm-menu{width:min(300px, calc(100vw - 20px)); padding:5px;}
  .pm-menu .pm-card{padding:13px 13px 11px; border-radius:14px;}
  .pm-menu .pm-avatar{width:36px; height:36px; font-size:0.82rem;}
  .pm-menu .pm-name{font-size:0.94rem;}
  .pm-menu .pm-stats{margin-top:11px; padding-top:10px;}
  .pm-menu .pm-stat strong{font-size:1.12rem; padding:5px 7px 5px 8px;}
  .pm-menu .pm-stat .ic{width:16px; height:16px;}
  .pm-menu .pm-list{padding:4px 0 0;}
  .pm-menu .pm-row{padding:8px 11px;}
  .pm-menu .pm-row b{font-size:0.88rem;}
  .pm-menu .pm-row .hint{display:none;}
  .pm-menu .pm-kv div{padding:5px 11px;}
  .pm-menu .pm-cab{padding:7px 11px;}
  .pm-menu .pm-cab .hint{display:none;}
  .pm-menu .pm-cab.here .hint{display:block;}
  .pm-menu .pm-cap{padding:8px 11px 3px;}
  .pm-menu .pm-foot{padding:6px 11px;}
  .pm-menu .pm-guest{padding:14px 12px 6px;}
}