/* Shared responsive shell. Desktop >1024; tablet 768–1024; phone <=767;
   compact phone <=480. Component arrangements live in their own stylesheets. */
.mobile-menu-toggle, .mobile-account { display: none; }
.mobile-menu { padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.scroll-region { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }

@media (max-width: 1024px) {
  :root { --mobile-gutter: 20px; --mobile-gap: 20px; }
  body .site-layout.site-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mobile-gap); padding: 20px var(--mobile-gutter) 40px; }
  .site-layout > .page-content { grid-column: 1; grid-row: 1; width: 100%; }
  .site-layout > .sidebar { display: block; position: static; width: 100%; grid-column: 1; }
  .site-layout > .sidebar-rating { grid-row: 2; }
  .site-layout > .sidebar-advertising { grid-row: 3; }
  .site-layout > .sidebar .ad-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content :where(section, article, form, fieldset, label, nav, header, aside) { min-width: 0; }
  .page-content :where(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-width: 0; max-width: 100%; }
  .site-header { padding: max(8px, env(safe-area-inset-top)) var(--mobile-gutter) 8px; }
  .site-header .header-inner { min-width: 0; min-height: 44px; padding: 0; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'logo actions' 'account account' 'pages pages'; }
  .site-header .brand { font-size: 15px; white-space: nowrap; letter-spacing: .055em; margin: 0; }
  .site-header .desktop-navigation { display: none; }
  .header-actions { gap: 4px; }
  .site-header .header-inner { grid-template-areas: 'logo actions' 'search search' 'account account' 'pages pages'; }
  .site-header .header-inner > .search-toggle { grid-area: search; width: 100%; min-height: 44px; }
  .header-actions .mobile-menu-toggle { display: inline-flex; order: 10; }
  .site-header .header-actions .icon-button { flex: 0 0 44px; width: 44px; min-width: 44px; }
  .mobile-account:not(:empty) { display: flex; align-items: stretch; gap: 8px; grid-area: account; min-width: 0; }
  .mobile-account .header-balance { display: flex; flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; padding: 8px 12px; }
  .mobile-account .header-balance strong { font-size: 14px; }
  .mobile-account .balance-button { flex: 0 0 auto; padding: 8px 12px; }
  .mobile-account .balance-button span { display: inline; }
  .site-header .header-search { grid-area: pages; width: 100%; min-width: 0; gap: 8px; padding: 4px 0; }
  .header-search input { width: 100%; min-width: 0; font-size: 16px; }
  .header-search .button { flex-shrink: 0; padding: 10px 12px; }
  html:has(.mobile-menu[open]) { overflow: hidden; }
  .mobile-menu { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(360px, calc(100% - 24px)); max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 20px 0 0 20px; overflow-y: auto; overscroll-behavior: contain; padding: max(12px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  .mobile-menu::backdrop { background: rgb(5 16 26 / 55%); }
  .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -12px; z-index: 2; background: var(--surface); padding: 8px 0 12px; }
  .mobile-menu-heading strong { font-size: 20px; }
  .mobile-navigation { display: grid; gap: 4px; }
  .mobile-navigation a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: 12px; line-height: 1.4; overflow-wrap: anywhere; font-weight: 600; }
  .mobile-navigation a:hover, .mobile-navigation [aria-current] { background: var(--accent-soft); color: var(--accent); }
  .mobile-menu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 20px; margin-top: 16px; border-top: 1px solid var(--border); }
  .mobile-menu-tools .support-notifications { flex-basis: 100%; }
  .mobile-menu-tools .support-notification-panel { position: static; width: 100%; max-width: 100%; max-height: 50dvh; overflow: auto; margin-top: 8px; }
  .mobile-menu-tools .support-presence { min-height: 44px; }
  .mobile-navigation a:focus-visible, .mobile-menu button:focus-visible { background: var(--accent-soft); color: var(--accent); }
  .mobile-menu-tools .balance-button span { display: inline; }
  .mobile-menu-tools .profile-button { width: auto; padding: 8px 12px; }
  .mobile-menu-tools .profile-button::after { content: 'Профиль'; }
  .mobile-menu-tools .profile-button[data-auth-open]::after { content: 'Войти'; }
  .header-actions .sw-launcher { width: 44px; height: 44px; margin: 0; }
  .support-widget:not(.sw-embedded) { position: static; width: 0; height: 0; margin: 0; }
  .support-widget:not(.sw-embedded) .sw-panel { position: fixed; z-index: 45; inset: auto 12px max(12px, env(safe-area-inset-bottom)); width: auto; max-width: 430px; margin: 0 0 0 auto; height: min(600px, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  .footer-inner, .footer-inner--articles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .footer-brand-block { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --mobile-gutter: 16px; --mobile-gap: 24px; }
  .site-header { position: relative; }
  .surface { padding: 20px; }
  .page-content :is(.market-slide__image, .rating-hero-image, .predictions-hero-image, .free-hero-image) { height: 100%; object-fit: cover; }
  .page-content { font-size: 16px; }
  .page-content h1 { font-size: clamp(26px, 6vw, 34px); }
  .page-content h2 { font-size: clamp(20px, 4.5vw, 24px); }
  .page-content :where(p, h1, h2, h3, a, code, dd, strong) { overflow-wrap: anywhere; }
  .button { min-height: 44px; max-width: 100%; white-space: normal; text-align: center; }
  body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { font-size: 16px; }
  body :is(select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color])) { min-height: 44px; }
  input[type=checkbox], input[type=radio] { flex-shrink: 0; }
  dialog:not(.mobile-menu) { max-width: calc(100% - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .auth-close { position: sticky; top: 0; float: right; z-index: 3; background: var(--surface); margin: -16px -4px 0 4px; }
  .prediction-buy-heading, .prediction-share-heading { position: sticky; top: 0; z-index: 3; background: var(--surface); }
  .sidebar .capper-rating-panel { padding: 16px; }
  .capper-row { grid-template-columns: 28px 44px minmax(0, 1fr); gap: 10px; padding-block: 12px; }
  .capper-avatar { width: 44px; height: 44px; }
  .capper-name { font-size: 15px; white-space: normal; }
  .capper-score, .capper-stats { font-size: 12px; gap: 4px 8px; }
  .capper-rating-all { min-height: 44px; font-size: 14px; align-items: center; }
  .capper-rating-panel:hover { transform: none; }
  .footer-inner, .footer-inner--articles { grid-template-columns: 1fr; gap: 20px; padding: 24px var(--mobile-gutter); }
  .footer-column:last-child { grid-column: auto; }
  .footer-links { gap: 0; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
  .footer-bottom { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .sw-embedded .sw-panel { height: min(620px, 80dvh); min-height: 320px; }
  .sw-heading, .sw-toolbar, .sw-form { flex-shrink: 0; }
  .chat-emoji-panel { max-height: min(280px, 45dvh); overflow-y: auto; }
  .scroll-region { border-radius: 12px; }
}

@media (max-width: 480px) {
  :root { --mobile-gutter: 12px; --mobile-gap: 20px; }
  .surface { padding: 16px; }
  .site-header .brand { font-size: 13px; letter-spacing: .025em; }
  .header-actions { gap: 2px; }
  .site-layout > .sidebar .ad-list { grid-template-columns: minmax(0, 1fr); }
  .auth-body { padding: 24px 16px 16px; }
}

@media (max-width: 1024px) {
  .mobile-account .header-register, .mobile-account .header-login {padding:10px 12px;justify-content:center;flex:1;min-width:0;font-size:14px}
}

/* Reserve the final header slots before deferred controls move into them. */
@media (max-width: 1024px) {
  .site-header .mobile-account { display: flex; align-items: stretch; gap: 8px; grid-area: account; min-width: 0; min-height: 44px; }
  .header-actions > :is(.header-register, .header-login, .header-balance, .balance-button, .profile-button, .theme-toggle, .support-presence, .support-notifications, [data-presence-error], a[aria-label="Расширенная админка"]) { display: none; }
  .header-actions :is(.mobile-menu-toggle, .search-toggle)[hidden] { display: inline-flex !important; visibility: hidden; }
}
@media (min-width: 1025px) {
  .header-actions :is(.theme-toggle, .search-toggle)[hidden] { display: inline-flex !important; visibility: hidden; }
}
.catalog-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }