/* Layout "Top bar" (2026-10-31, owner): the menu runs across the top instead of down the left; the content takes the full width.
   Same markup as the classic layout (templates/layout.php), so every page works as before. Phones keep the usual top bar and tab bar. */
@media (min-width: 901px) {
  body.layout-topnav { --tn-h: 62px; }
  body.layout-topnav .side {
    inset: 0 0 auto 0; width: auto; height: var(--tn-h); padding: 0 22px; flex-direction: row; align-items: center; gap: 2px;
    border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; z-index: 40;
  }
  body.layout-topnav .side .logo { padding: 0; margin-right: 20px; font-size: 19px; flex: none; }
  body.layout-topnav .side .logo .logo-img { max-height: 40px; width: auto; }
  body.layout-topnav .side-toggle, body.layout-topnav .side .side-sep { display: none; }
  body.layout-topnav .side .nav-item { padding: 8px 13px; gap: 8px; flex: none; white-space: nowrap; }
  body.layout-topnav .side .nav-item .count { margin-left: 2px; }
  /* notifications, profile, admin: icons only, a dot for the count */
  body.layout-topnav .side-sep ~ .nav-item { padding: 9px; }
  body.layout-topnav .side-sep ~ .nav-item .nav-label { display: none; }
  body.layout-topnav .side-sep ~ .nav-item .count { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  body.layout-topnav .side .lang-links { margin: 0 0 0 10px; flex: none; }
  body.layout-topnav .side .lang-links a { padding: 5px 8px; }
  body.layout-topnav .side-bottom { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 8px; flex: none; }
  body.layout-topnav .credit-card { padding: 6px 8px 6px 12px; gap: 8px; border-radius: 99px; box-shadow: none; }
  body.layout-topnav .credit-card svg { width: 20px; height: 20px; }
  body.layout-topnav .credit-card b { font-size: 15px; display: inline; }
  body.layout-topnav .credit-card .small { display: none; }
  body.layout-topnav .credit-card .btn { padding: 4px 10px; min-height: 0; font-size: 12px; border-radius: 99px; }
  body.layout-topnav .me-chip { padding: 3px 10px 3px 3px; border-radius: 99px; }
  body.layout-topnav .me-chip .grow .xs { display: none; }
  body.layout-topnav .me-chip .grow { max-width: 130px; }
  body.layout-topnav .side-bottom .btn-block { width: auto; padding: 8px 16px; }
  body.layout-topnav .main { margin-left: 0; padding: calc(var(--tn-h) + 22px) 28px 60px; }
  body.layout-topnav .wrap { max-width: 1480px; }
  body.layout-topnav.has-rail .main { margin-right: var(--rail-w); }
  body.layout-topnav .rail { top: var(--tn-h); }
  body.layout-topnav .pinfo { top: calc(var(--tn-h) + 18px); }
  body.layout-topnav .swipe-filters { top: calc(var(--tn-h) + 16px); max-height: calc(100vh - var(--tn-h) - 32px); }
  body.layout-topnav.chat-page .main { padding-top: calc(var(--tn-h) + 16px); }
  body.layout-topnav .pdrawer { top: var(--tn-h); }
}
/* a narrower desktop: the main menu goes to icons too, so it stays on one line */
@media (min-width: 901px) and (max-width: 1180px) {
  body.layout-topnav .side .nav-item { padding: 9px; }
  body.layout-topnav .side .nav-item .nav-label { display: none; }
  body.layout-topnav .side .nav-item .count { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; margin: 0; }
  body.layout-topnav .me-chip .grow { display: none; }
  body.layout-topnav .me-chip { padding: 3px; }
}