/* Mobile concept layer. Desktop rules and server operations stay in their components. */
.mobile-users-toolbar, .mobile-drawer-brand, .mobile-login-subtitle { display: none; }
@media (max-width: 900px) {
  :root { --mobile-gold: #ffd443; --mobile-border: rgba(255, 205, 55, .65); --mobile-panel: linear-gradient(135deg, rgba(33,29,15,.88), rgba(3,10,12,.95) 55%); }
  .page, .auth-shell { font-family: 'Segoe UI', Arial, sans-serif; }
  .page .tools-title, .page .tools-subtitle, .page .speedtest-description, .page .tools-primary-button, .page .tools-section-title { font-family: 'Segoe UI',Arial,sans-serif !important; font-style: normal !important; transform: none !important; }
  .page .ninja-content { padding: 22px 18px 40px !important; }
  .page .sidebar { background: rgba(3,8,10,.94) !important; }
  .page .sidebar-brand { padding-left: 16px; }
  .page .sidebar-brand-logo { width: clamp(88px, 28vw, 165px); }
  .page .sidebar-mobile-server-switcher { left: 35% !important; right: 74px !important; }
  .page .sidebar-mobile-server-select { height: 44px; font-size: 14px; border-color: var(--mobile-border); border-radius: 10px; }
  .page .sidebar-menu-button { width: 44px; height: 44px; border-color: var(--mobile-border); }
  .page .sidebar-menu-button.is-open { position: fixed !important; left: min(calc(86vw - 62px), 338px) !important; right: auto !important; z-index: 40; }
  .page .sidebar-body { position: fixed !important; inset: 0 auto 0 0 !important; width: min(86vw, 400px); height: 100dvh; max-height: 100dvh; padding: calc(18px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); border-radius: 0 22px 22px 0; border-color: var(--mobile-border); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; transform: translateX(-105%); background: linear-gradient(180deg, transparent, #060c0e 230px), url('/images/ninja-panel-bg.png') center top / auto 310px no-repeat, #060c0e; }
  .page .sidebar-body.is-open { transform: translateX(0); }
  .page .sidebar:has(.sidebar-body.is-open) > .sidebar-brand,
  .page .sidebar:has(.sidebar-body.is-open) > .sidebar-mobile-server-switcher { visibility: hidden; }
  .mobile-drawer-brand { display: flex; align-items: flex-start; min-height: 180px; padding: 30px 0 0 4px; flex-shrink: 0; }
  .mobile-drawer-brand img { width: 65%; max-width: 240px; }
  .page .sidebar-nav { gap: 10px; }
  .page .sidebar-nav .sidebar-link { min-height: 58px; border: 1px solid rgba(255,205,55,.25); border-radius: 12px; background: rgba(5,11,13,.8); font-size: 17px; padding: 12px 16px; }
  .page .sidebar-nav .sidebar-link::after { content: '›'; margin-left: auto; color: #a5afb6; font-size: 28px; }
  .page .sidebar-nav .sidebar-link.active { border-color: var(--mobile-gold); background: linear-gradient(100deg, rgba(255,204,40,.23), rgba(255,204,40,.04)); box-shadow: inset 4px 0 var(--mobile-gold); }
  .page .sidebar-account { margin-top: auto; padding: 18px 10px; border: 1px solid var(--mobile-border); border-radius: 12px; }
  .page .sidebar-nav { margin-bottom: 28px; }
  .page .sidebar-account-name span { font-size: 12px; color: #99a3aa; }
  .page .sidebar-account-name strong { font-size: 16px; }
  .page .sidebar-account-settings-button { border-radius: 50%; }
  .page .sidebar-mobile-logout-button { color: #ff665c; border-color: #f85c51; }
  .page .sidebar-swipe-zone { display: block; left: 0; right: auto; width: 24px; touch-action: pan-y; }
  .page .qr-modal-overlay { padding-top: calc(84px + env(safe-area-inset-top)); }
  .page .qr-modal-window { max-height: calc(100dvh - 100px - env(safe-area-inset-top)) !important; }
  .page .qr-modal-card { width: min(320px,calc(100vw - 56px)) !important; border-radius: 0 !important; background: white !important; }
  .page .qr-modal-image { border-radius: 0 !important; object-fit: contain !important; image-rendering: pixelated; }
  .page .qr-modal-actions { flex-wrap: wrap; }
  .page .sidebar-menu-backdrop { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }
  .page h1.home-title, .page .home-title-block h1, .page .vpn-users-title, .page .tools-title, .page .servers-title { font-family: 'Segoe UI', Arial, sans-serif !important; font-size: clamp(27px, 5.8vw, 40px) !important; font-weight: 750; line-height: 1.15; color: #f7f8fa !important; margin: 0 0 10px; text-shadow: 0 2px 10px #000; }
  .page .home-title-block p, .page .tools-subtitle, .page .servers-subtitle, .page .traffic-subtitle { font-size: 15px !important; line-height: 1.45; color: #aebbc5; }
  .page .home-hero, .page .vpn-users-header, .page .page-header { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 18px; }
  .page .selected-server-card { width: 100%; min-height: 80px; padding: 14px 18px; border: 1px solid var(--mobile-border); border-radius: 14px; background: var(--mobile-panel); }
  .page .selected-server-card-name { font-size: 23px; }
  .page .selected-server-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
  .page .selected-server-card-quote { font-size: 30px; }
  .page .server-panel, .page .server-card, .page .traffic-card, .page .traffic-period-panel, .page .tool-network-card, .page .tools-speedtest-panel, .page .tools-info-panel { border: 1px solid var(--mobile-border) !important; border-radius: 14px !important; background: var(--mobile-panel) !important; }
  .page .server-panel { padding: 14px; margin-bottom: 12px; }
  .page .server-panel-header { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; }
  .page .server-heading { min-width: 0; }
  .page .server-name-line { flex-wrap: wrap; }
  .page .server-name-line h2 { font-size: 22px; overflow-wrap: anywhere; }
  .page .server-caption { font-size: 13px; }
  .page .connection-state { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 12px; border: 1px solid rgba(0,216,190,.35); border-radius: 10px; background: rgba(0,110,99,.12); }
  .page .connection-title { font-size: 12px; }
  .page .connection-subtitle { font-size: 12px; }
  .page .server-panel-header > .server-collapse-button { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  .page .server-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
  .page .server-metrics .metric-card { min-width: 0; min-height: 78px; padding: 10px; gap: 9px; border-radius: 10px; }
  .page .server-metrics .metric-card:first-child { grid-column: 1 / -1; }
  .page .metric-icon { width: 28px; min-width: 28px; }
  .page .metric-icon svg { width: 28px; height: 28px; }
  .page .metric-title { font-size: 11px; }
  .page .metric-value { font-size: 15px; overflow-wrap: anywhere; }
  .page .metric-description { font-size: 11px; }
  .page .vpn-add-user-button, .page .ninja-add-server-button { width: 100%; min-height: 48px; font-size: 16px; border-radius: 11px; }
  .page .vpn-users-table-wrapper { padding: 0; border: 0; background: transparent; overflow: visible; }
  .page .vpn-users-table { display: block; width: 100%; min-width: 0; }
  .page .vpn-users-table thead { display: none; }
  .page .vpn-users-table tbody { display: grid; gap: 12px; }
  .page .vpn-users-table tbody tr { position: relative; display: grid; grid-template-columns: 1.25fr 1fr .85fr; grid-template-rows: auto auto; gap: 6px 10px; padding: 14px 12px 66px; border: 1px solid var(--mobile-border); border-radius: 13px; background: var(--mobile-panel); }
  .page .vpn-users-table tbody td { display: block; width: auto !important; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 12px !important; box-shadow: none; overflow-wrap: anywhere; }
  .page .vpn-users-table td:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .page .vpn-users-table td:nth-child(2), .page .vpn-users-table td:nth-child(6), .page .vpn-users-table td:nth-child(7) { display: none; }
  .page .vpn-users-table td:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
  .page .vpn-users-table td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .page .vpn-users-table td:nth-child(5) { grid-column: 2; grid-row: 2; }
  .page .vpn-users-table tr:has(.edit-user) { padding-bottom: 14px; }
  .page .vpn-users-table tr:has(.edit-user) td:first-child { grid-column: 1 / -1; grid-row: 1; }
  .page .vpn-users-table tr:has(.edit-user) td:nth-child(3) { grid-column: 3; grid-row: 2; }
  .page .vpn-users-table tr:has(.edit-user) td:nth-child(4) { grid-column: 1; grid-row: 2; }
  .page .vpn-users-table tr:has(.edit-user) td:nth-child(5) { grid-column: 2; grid-row: 2; }
  .page .vpn-users-table .edit-user input { font-size: 16px; min-height: 44px; }
  .page .vpn-users-table .edit-buttons button { min-height: 44px; }
  .page .vpn-users-table td:nth-child(5)::after { content: 'Последний handshake'; display: block; color: #94a2ab; font-size: 10px; }
  .page .vpn-users-table td:nth-child(3)::after { content: 'Лимит скорости'; display: block; color: #94a2ab; font-size: 10px; }
  .page .vpn-users-table .user-info > .fw-semibold { font-size: 15px; color: #f5f7f8; white-space: normal !important; overflow-wrap: anywhere; }
  .page .vpn-users-table .user-info .small { font-size: 11px; color: #9daab3 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page .vpn-user-actions-row { position: absolute; left: 10px; right: 10px; bottom: 10px; width: auto !important; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .page .vpn-user-actions-row > div { display: contents !important; }
  .page .vpn-user-actions-row .edit-link { grid-column: 1; grid-row: 1; }
  .page .vpn-user-actions-row .text-danger { grid-column: 3; }
  .page .vpn-user-actions-row .vpn-user-conf-link { grid-column: 2; grid-row: 1; }
  .page .vpn-user-actions-row button, .page .vpn-user-actions-row .vpn-user-conf-link { display: flex; justify-content: center; align-items: center; min-height: 42px; width: 100%; padding: 6px !important; border: 1px solid var(--mobile-border); border-radius: 8px; font-size: 12px !important; text-decoration: none; }
  .page .vpn-user-actions-row .text-danger { border-color: #bf4940; color: #ff6c63 !important; }
  .page .vpn-user-actions-row .vpn-user-conf-link { border-color: #637078; color: #e0e5e9; }
  .page .vpn-user-conf-link.is-disabled { opacity: .4; }
  .page .vpn-users-table .speed-limit-trigger { min-height: 30px; }
  .page .vpn-add-user-workspace, .page .vpn-add-user-workspace.with-config { width: 100%; grid-template-columns: minmax(0,1fr); }
  .page .vpn-add-user-panel, .page .vpn-client-config-panel { padding: 18px; }
  .page .vpn-config-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .page .vpn-config-actions .copy-action-wrap { min-width: 0; }
  .page .vpn-config-actions button { width: 100%; min-height: 44px; padding: 8px; font-size: 12px; white-space: normal; }
  .page .vpn-config-done button { width: 100%; min-height: 46px; }
  .page .vpn-add-user-input, .page .tool-input, .page .server-form-card input { font-size: 16px !important; min-height: 46px; }
  .mobile-users-toolbar { display: grid; gap: 12px; margin: 0 0 16px; }
  .mobile-users-search { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
  .mobile-users-toolbar input, .mobile-users-toolbar select, .mobile-filter-sheet select { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--mobile-border); border-radius: 10px; background: #070e11; color: #f5f7f8; padding: 8px 10px; font-size: 16px; }
  .mobile-users-toolbar button, .mobile-filter-sheet button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--mobile-border); border-radius: 10px; background: #070e11; color: var(--mobile-gold); font-size: 13px; }
  .mobile-filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .mobile-filter-chips button { border-radius: 24px; flex-shrink: 0; }
  .mobile-filter-chips button.active, .mobile-filter-sheet .mobile-apply { color: #151000; background: linear-gradient(#ffe878,#efb91c); }
  .mobile-filter-count { color: #aebbc5; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
  .mobile-filter-backdrop { position: fixed; inset: 0; z-index: 20010; background: #0009; }
  .mobile-filter-sheet { position: fixed; z-index: 20011; bottom: 0; left: 0; right: 0; max-height: 85dvh; overflow: auto; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); border: 1px solid var(--mobile-gold); border-radius: 24px 24px 0 0; background: #0a1012; display: grid; gap: 16px; }
  .mobile-filter-sheet header { display: flex; justify-content: space-between; align-items: center; }
  .mobile-filter-sheet h2 { margin: 0; font-size: 25px; color: white; }
  .mobile-filter-sheet label { display: grid; gap: 8px; color: #e5e9ec; }
  .page .tools-dashboard { display: flex; flex-direction: column; gap: 14px; }
  .page .tools-status-panel { padding: 0 !important; background: transparent; border: 0; }
  .page .tools-status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .page .tool-status-card { padding: 12px; min-width: 0; min-height: 92px !important; flex-direction: row; gap: 10px; border: 1px solid var(--mobile-border); border-radius: 12px; background: var(--mobile-panel); }
  .page .tool-status-icon { width: 28px; height: 28px; flex: 0 0 28px; }
  .page .tool-status-title, .page .tool-status-value { font-size: 13px !important; white-space: normal; }
  .page .tool-status-detail { font-size: 11px !important; white-space: normal; overflow-wrap: anywhere; }
  .page .speedtest-brand-mark { display: none; }
  .page .speedtest-layout { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) !important; grid-template-areas: 'main ninja' 'results results' !important; align-items: center; }
  .page .speedtest-ninja-image-shell, .page .speedtest-ninja-image { height: 150px !important; }
  .page .speedtest-ninja-title { font-family: 'Segoe UI',Arial,sans-serif; font-size: 12px !important; }
  .page .speedtest-description { font-size: 13px !important; text-align: left !important; order: -1; margin: 0 0 14px !important; }
  .page .tools-speedtest-panel .tools-primary-button { padding: 10px !important; white-space: normal; }
  .page .tools-info-panel { order: 4; padding: 14px; }
  .page .tools-info-item { padding: 10px 0; }
  .page .tools-info-text { font-size: 13px; line-height: 1.5; }
  .page .tools-restart-row { padding: 14px 0 0; }
  .page .tools-danger-button { width: 100%; min-height: 46px; font-size: 14px; }
  .page .tools-restart-description { text-align: center; font-size: 11px; }
  .page .tools-speedtest-panel { padding: 16px; }
  .page .tools-network-panel { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .page .tool-network-card { padding: 16px; }
  .page .tool-network-title { font-size: 19px; }
  .page .tool-network-description { font-size: 13px; }
  .page .tool-input-group { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .page .tool-outline-button { min-height: 44px; font-size: 12px; padding: 8px 12px; }
  .page .speedtest-finished-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .page .speedtest-finished-metric { min-width: 0; padding: 12px 6px; }
  .page .speedtest-finished-metric-value { font-size: 24px; }
  .page .speedtest-finished-metric-label, .page .speedtest-finished-metric-unit { font-size: 11px; }
  .page .servers-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .page .server-card { padding: 16px; }
  .page .server-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .page .server-action-button { min-height: 44px; padding: 8px; white-space: normal; font-size: 13px; }
  .page .server-action-button.reboot-button { grid-column: 1 / -1; }
  .page .traffic-header { padding-top: 0 !important; }
  .page .traffic-period-panel { padding: 12px; }
  .page .traffic-period-row { display: block; }
  .page .traffic-period-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
  .page .traffic-period-button { min-height: 42px; font-size: 12px; }
  .page .traffic-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px !important; }
  .page .traffic-card { min-height: 90px !important; padding: 12px !important; gap: 10px; }
  .page .traffic-card:last-child { grid-column: 1 / -1; }
  .page .traffic-card-value { font-size: 21px !important; }
  .page .traffic-card-title, .page .traffic-card-description { font-size: 11px !important; }
  .page .traffic-table-wrapper { overflow-x: auto; border: 1px solid var(--mobile-border); border-radius: 14px; }
  .page .traffic-table { min-width: 570px; }
  .page .traffic-table tbody td, .page .traffic-table .total-column { font-size: 13px !important; padding: 10px 8px; }
  .page .traffic-table thead th, .page .traffic-sort-button { font-size: 12px !important; }
  .page button:focus-visible, .page a:focus-visible, .page select:focus-visible { outline: 2px solid #ffe378 !important; outline-offset: 3px; }
  .auth-shell .auth-login-card { padding: 26px 20px; border-color: #e7be39; background: linear-gradient(130deg,rgba(29,27,18,.91),rgba(3,9,11,.94)); }
  .auth-shell .auth-login-card .auth-title { font-family: 'Segoe UI',Arial,sans-serif; font-size: 27px; color: white; margin-bottom: 8px; }
  .auth-shell .auth-brand img { width: min(245px,80%); }
  .mobile-login-subtitle { display: block; color: #a3b1ba; font-size: 14px; text-align: center; margin: 0 0 24px; }
  .auth-shell .auth-login-field input { min-height: 52px; font-size: 16px !important; text-align: left; padding-left: 16px; border-color: var(--mobile-border); }
  .auth-shell .auth-login-field input::placeholder { font-family: 'Segoe UI',Arial,sans-serif; font-style: normal; }
  .auth-shell .auth-login-submit { min-height: 52px; font-size: 19px; }
}
@media (max-width: 360px) {
  .mobile-users-search { grid-template-columns: 1fr 1fr; }
  .mobile-users-search input { grid-column: 1 / -1; }
  .page .vpn-users-table tbody tr { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .page .vpn-users-table tbody td:first-child { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
  .page .vpn-users-table tbody td:nth-child(4) { grid-column: 1; grid-row: 2; }
  .page .vpn-users-table tbody td:nth-child(5) { grid-column: 1; grid-row: 3; }
  .page .vpn-users-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .page .sidebar-body, .page .sidebar-menu-backdrop { transition: none; }
}

/* =========================================================
   MOBILE/PWA — блокируем прокрутку корневого document.
   Скролл разрешён только внутри .main-shell из MainLayout.
   ========================================================= */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body {
    margin: 0;
  }
}

/* =========================================================
   VPN USERS — MOBILE FILTER SHEET SCROLL LOCK
   Пока открыта панель "Фильтры", основной контент страницы
   не прокручивается. Скролл остаётся только у самой панели,
   если её содержимое не помещается по высоте.
   ========================================================= */
@media (max-width: 900px) {
  body:has(.mobile-filter-backdrop) .main-shell {
    overflow-y: hidden !important;
    overscroll-behavior-y: none !important;
    touch-action: none !important;
  }

  .mobile-filter-backdrop {
    touch-action: none;
    overscroll-behavior: none;
  }

  .mobile-filter-sheet {
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}