/* Телефоны: в кнопке роли только аватар, роль видна на главной и в меню */
@media (max-width: 479px) {
  .role-chip { padding-right: 8px; }
  .role-chip .role-chip-text { display: none; }
}

/* Очень узкие экраны (320 px) */
@media (max-width: 359px) {
  #view { padding-left: 12px; padding-right: 12px; }
  .hero { margin: 0 -12px; padding-left: 16px; padding-right: 16px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .logo-sub { font-size: 14px; }
  .tab { font-size: 10px; }
  .stats { gap: 6px; }
  .stat b { font-size: 19px; }
}

/* Планшет и desktop: тот же Mini App, колонкой по центру экрана */
@media (min-width: 560px) {
  body { background: var(--page-bg); }
  .main-col {
    max-width: var(--app-w);
    min-height: 100vh;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--line), 0 10px 40px rgba(15, 23, 42, .08);
  }
  .tabbar {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: var(--app-w);
  }
  .sheet { max-width: var(--app-w); }
  .toast { max-width: calc(var(--app-w) - 32px); }
}