/*
 * Mobile foundation only. This file intentionally contains no reference-page
 * geometry: it is a shell and shared-control contract for screens up to 767px.
 */
.mobile-menu-button {
  display: none;
}

@media (min-width: 768px) {
  .mobile-cashbox-request-overlay { display: none !important; }
}

.footer-provider-copy {
  display: none;
}

.orders-mobile-runtime {
  display: none;
}

.mobile-terminal-drawer-overlay {
  display: none !important;
}

.mobile-project-runtime {
  display: none;
}

.project-moderation-overlay__mobile {
  display: none;
}

@media (max-width: 767px) {
  /* Remove the browser's transient touch flash without hiding keyboard focus. */
  button,
  a,
  [role="button"],
  summary {
    -webkit-tap-highlight-color: transparent;
  }

  @media (hover: none) and (pointer: coarse) {
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible),
    [role="button"]:focus:not(:focus-visible),
    summary:focus:not(:focus-visible) {
      outline: none;
    }
  }

  .mobile-terminal-drawer-overlay {
    display: grid !important;
  }

  #figmaFrame:has(.mobile-project-reference, .mobile-project-runtime) .merchant-project-detail-page > :not(.mobile-project-reference):not(.mobile-project-runtime):not(.payhot-overlay),
  .figma-frame:has(.mobile-project-reference, .mobile-project-runtime) .merchant-project-detail-page > :not(.mobile-project-reference):not(.mobile-project-runtime):not(.payhot-overlay) {
    display: none;
  }

  #figmaFrame:has(.mobile-project-reference, .mobile-project-runtime) .merchant-project-detail-page.orders-page,
  .figma-frame:has(.mobile-project-reference, .mobile-project-runtime) .merchant-project-detail-page.orders-page {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .mobile-project-moderation-static-overlay .payhot-overlay-panel.mobile-project-moderation-static-panel {
    width: min(375px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 24px;
    background: #f0f4f8;
  }

  .merchant-projects-page {
    display: none !important;
  }

  .payhot-overlay--fullscreen.mobile-navigation-overlay .mobile-navigation-panel {
    animation: payhot-mobile-menu-enter 220ms cubic-bezier(.22, .8, .2, 1) both;
  }

  .mobile-navigation__header {
    background: rgba(240, 244, 248, .96);
  }

  .mobile-navigation__content {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 24px var(--payhot-mobile-safe-right) calc(28px + var(--payhot-mobile-safe-bottom)) var(--payhot-mobile-safe-left);
  }

  .mobile-navigation__create-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #fd2226 0%, #ec0a46 100%);
    color: #fff;
    font: 600 15px/1 var(--font-ui);
    text-align: left;
  }

  .mobile-navigation__create-link > span {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .mobile-navigation__create-link > span::before,
  .mobile-navigation__create-link > span::after {
    position: absolute;
    top: 7px;
    left: 2px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    content: "";
  }

  .mobile-navigation__create-link > span::after { transform: rotate(90deg); }

  .mobile-navigation__list {
    gap: 8px;
    padding: 2px 4px;
  }

  .mobile-navigation__link {
    position: relative;
    min-height: 48px;
    gap: 18px;
    padding: 0 12px;
    border-radius: 16px;
    color: #1d1d1d;
    font-size: 15px;
    font-weight: 500;
  }

  .mobile-navigation__link img {
    width: 20px;
    height: 20px;
  }

  .mobile-navigation__link.active {
    gap: 12px;
    color: #fd2226;
    font-weight: 600;
    background: rgba(185, 193, 204, .2);
  }

  .mobile-navigation__link.active::before {
    width: 48px;
    height: 48px;
    margin-left: -12px;
    border-radius: 16px;
    background: #fd2226;
    content: "";
  }

  .mobile-navigation__link.active img {
    width: 48px;
    height: 48px;
    margin-left: -60px;
    padding: 14px;
    border-radius: 16px;
    filter: brightness(0) invert(1);
  }

  .mobile-navigation__technical-group { display:grid; gap:4px; }
  .mobile-navigation__technical-toggle { position:relative; width:100%; min-height:48px; display:flex; align-items:center; gap:18px; padding:0 12px; border:0; border-radius:16px; color:#1d1d1d; background:transparent; font:500 15px/1 var(--font-ui); text-align:left; }
  .mobile-navigation__technical-toggle img { width:20px; height:20px; }
  .mobile-navigation__technical-toggle i { width:8px; height:8px; margin-left:auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .16s ease; }
  .mobile-navigation__technical-toggle.is-expanded { color:#ec0a46; font-weight:600; background:rgba(185,193,204,.2); }
  .mobile-navigation__technical-toggle.is-expanded i { transform:rotate(225deg) translateY(-2px); }
  .mobile-navigation__technical-items { display:grid; gap:3px; margin:0 0 5px 42px; padding:3px 0 4px; border-left:1px solid rgba(103,118,140,.24); }
  .mobile-navigation__technical-link { min-height:34px; display:flex; align-items:center; padding:0 12px; border-radius:9px; color:#67768c; font:500 13px/1 var(--font-ui); }
  .mobile-navigation__technical-link.active { color:#ec0a46; font-weight:700; background:rgba(236,10,70,.07); }

  .mobile-navigation__telegram {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    margin: 8px 4px 0;
    overflow: hidden;
    padding: 16px;
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
  }

  .mobile-navigation__telegram-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-navigation__telegram-icon,
  .mobile-navigation__telegram-arrow {
    width: 20px;
    height: 20px;
  }

  .mobile-navigation__telegram-icon { width: 42px; height: 42px; }
  .mobile-navigation__telegram > span { display: grid; gap: 5px; min-width: 0; }
  .mobile-navigation__telegram small { color: rgba(255, 255, 255, .78); font: 500 12px/1 var(--font-ui); }
  .mobile-navigation__telegram > span img { width: 78px; height: auto; }

  #figmaFrame .page-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    min-width: 0;
    margin: 28px 0 0;
    padding: 32px 24px calc(28px + var(--payhot-mobile-safe-bottom));
    border: 1px solid #d4dce5;
    border-radius: 32px;
    background: #f0f4f8;
  }

  #figmaFrame .page-footer .footer-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: 100%;
    min-width: 0;
  }

  #figmaFrame .page-footer .footer-links > span { font: 600 14px/1.2 var(--font-ui); }
  #figmaFrame .page-footer .footer-links a { display: flex; align-items: center; gap: 12px; min-height: 28px; color: #1d1d1d; font: 600 14px/1.25 var(--font-ui); text-decoration: none; }
  #figmaFrame .page-footer .footer-links a > img { width: 20px; height: 20px; opacity: .55; }
  #figmaFrame .page-footer .footer-links .uptime { margin-top: 4px; }
  #figmaFrame .page-footer .footer-links .uptime img { width: 106px; height: auto; opacity: 1; }

  #figmaFrame .page-footer .footer-provider-copy {
    margin: 0;
    color: #b0b6be;
    font: 500 12px/1.5 var(--font-ui);
  }

  #figmaFrame .page-footer .footer-hot-wallet,
  #figmaFrame .page-footer .socials { display: none; }

  #figmaFrame .page-footer .footer-apps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  #figmaFrame .page-footer .footer-apps a { display: block; width: 100%; min-width: 0; }
  #figmaFrame .page-footer .footer-apps img { display: block; width: 100%; height: auto; max-width: 100%; }

  @keyframes payhot-mobile-menu-enter {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .payhot-overlay--fullscreen.mobile-navigation-overlay .mobile-navigation-panel { animation: none; }
  }
}

@media (max-width: 767px) {
  #figmaFrame:has(.mobile-payment-terminals-runtime) .admin-payhot-page,
  #figmaFrame:has(.mobile-payment-terminals-runtime) .admin-payhot-backdrop,
  #figmaFrame:has(.mobile-payment-terminals-runtime) .admin-payhot-drawer {
    display: none !important;
  }

  .mobile-terminal-drawer-overlay .payhot-overlay-panel.mobile-terminal-drawer-panel {
    width: min(375px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 24px;
    background: #f0f4f8;
  }

  .mobile-terminals-filter-overlay .payhot-overlay-panel.mobile-terminals-filter-panel {
    width: min(375px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 20px;
    background: #f0f4f8;
  }

  :root {
    --payhot-mobile-gutter: 16px;
    --payhot-mobile-safe-top: max(12px, env(safe-area-inset-top, 0px));
    --payhot-mobile-safe-right: max(12px, env(safe-area-inset-right, 0px));
    --payhot-mobile-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    --payhot-mobile-safe-left: max(12px, env(safe-area-inset-left, 0px));
    --payhot-mobile-panel-edge: 12px;
    --payhot-mobile-control-height: 44px;
  }

  html,
  body {
    min-width: 320px;
    min-height: 100svh;
    min-height: 100dvh;
  }

  #figmaFrame.figma-frame,
  #figmaFrame.figma-frame.cabinet-fluid-frame,
  #figmaFrame.figma-frame.dashboard-fluid-frame {
    width: 100%;
    min-width: 320px;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    margin: 0;
    overflow: visible;
    transform: none !important;
  }

  #figmaFrame .cabinet-shell-underlay {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
  }

  #figmaFrame .side-menu,
  #figmaFrame .telegram-widget {
    display: none;
  }

  #figmaFrame .cabinet-page-slot {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    padding: 16px var(--payhot-mobile-gutter) calc(28px + var(--payhot-mobile-safe-bottom));
  }

  #figmaFrame .cabinet-content-rail {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #figmaFrame .page-footer {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding: 16px var(--payhot-mobile-gutter) calc(16px + var(--payhot-mobile-safe-bottom));
  }

  /* Compact shell header. Its controls stay in normal flex flow, unlike desktop. */
  #figmaFrame .topbar {
    position: sticky;
    inset: auto;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--payhot-mobile-safe-right) 0 var(--payhot-mobile-safe-left);
    background: rgba(240, 244, 248, 0.9);
    border-bottom: 1px solid rgba(46, 74, 105, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  #figmaFrame .topbar .brand {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: 44px;
    min-width: 0;
  }

  #figmaFrame .topbar .brand-logo {
    position: static;
    display: block;
    width: 82px;
    height: 20px;
  }

  #figmaFrame .topbar .theme-toggle,
  #figmaFrame .topbar .balance-card {
    display: none;
  }

  #figmaFrame .mobile-menu-button,
  #figmaFrame .topbar .bell-button,
  #figmaFrame .topbar .profile-button {
    position: static;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }

  #figmaFrame .mobile-menu-button {
    gap: 4px;
  }

  #figmaFrame .mobile-menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #1d1d1d;
  }

  #figmaFrame .topbar .bell-button {
    margin-left: auto;
  }

  #figmaFrame .topbar .bell-button img,
  #figmaFrame .topbar .profile-button img {
    position: static;
    width: 20px;
    height: 20px;
  }

  #figmaFrame .topbar .bell-button > span {
    position: absolute;
    top: 6px;
    right: 5px;
  }

  #figmaFrame .profile-dropdown-backdrop {
    position: fixed;
    inset: 0;
  }

  #figmaFrame .profile-dropdown {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px) + 8px);
    right: var(--payhot-mobile-safe-right);
    left: var(--payhot-mobile-safe-left);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }

  /* Fullscreen mobile navigation still uses the shared overlay and scroll lock. */
  .payhot-overlay--fullscreen.mobile-navigation-overlay {
    z-index: calc(var(--payhot-modal-panel-z, 2147483010) + 20);
  }

  .payhot-overlay--fullscreen.mobile-navigation-overlay .payhot-overlay-backdrop {
    background: rgba(11, 18, 30, 0.35);
  }

  .payhot-overlay--fullscreen.mobile-navigation-overlay .mobile-navigation-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100svh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f0f4f8;
    box-shadow: none;
  }

  .mobile-navigation {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    min-height: 100dvh;
    color: #1d1d1d;
    font-family: var(--font-ui);
  }

  .mobile-navigation__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--payhot-mobile-safe-right) 0 var(--payhot-mobile-safe-left);
    border-bottom: 1px solid rgba(46, 74, 105, 0.08);
  }

  .mobile-navigation__brand img {
    display: block;
    width: 94px;
    height: auto;
  }

  .mobile-navigation__close {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: #fff;
  }

  .mobile-navigation__close span {
    position: absolute;
    top: 21px;
    left: 13px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #1d1d1d;
  }

  .mobile-navigation__close span:first-child { transform: rotate(45deg); }
  .mobile-navigation__close span:last-child { transform: rotate(-45deg); }

  .mobile-navigation__content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px var(--payhot-mobile-safe-right) 24px var(--payhot-mobile-safe-left);
  }

  .mobile-navigation__quick-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
  }

  .mobile-navigation__primary-action,
  .mobile-navigation__secondary-action {
    min-height: var(--payhot-mobile-control-height);
    padding: 0 16px;
    border-radius: 12px;
    font: 700 14px/1 var(--font-ui);
    text-align: left;
  }

  .mobile-navigation__primary-action {
    border: 1px solid #fd2226;
    background: #fd2226;
    color: #fff;
  }

  .mobile-navigation__secondary-action {
    border: 1px solid rgba(46, 74, 105, 0.12);
    background: #fff;
    color: #1d1d1d;
  }

  .mobile-navigation__list {
    display: grid;
    gap: 4px;
  }

  .mobile-navigation__link,
  .mobile-navigation__account-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    color: #1d1d1d;
    background: transparent;
    font: 650 14px/1 var(--font-ui);
    text-align: left;
    text-decoration: none;
  }

  .mobile-navigation__link.active,
  .mobile-navigation__link:active,
  .mobile-navigation__account-link:active {
    background: #fff;
    color: #fd2226;
  }

  .mobile-navigation__link img,
  .mobile-navigation__account-link img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .mobile-navigation__link span,
  .mobile-navigation__account-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-navigation__account {
    display: grid;
    gap: 4px;
    padding: 16px var(--payhot-mobile-safe-right) calc(16px + var(--payhot-mobile-safe-bottom)) var(--payhot-mobile-safe-left);
    border-top: 1px solid rgba(46, 74, 105, 0.08);
    background: rgba(255, 255, 255, 0.54);
  }

  .mobile-navigation__account form { margin: 4px 0 0; }

  .mobile-navigation__logout {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #fd2226;
    font: 700 14px/1 var(--font-ui);
    text-align: left;
  }

  /* Portal dropdowns remain on the visual viewport; option scrolling is local. */
  #figmaFrame .payhot-dropdown-menu.is-portal,
  #figmaFrame .payhot-dropdown-menu.is-field-anchored {
    max-height: min(360px, calc(100dvh - var(--payhot-mobile-safe-top) - var(--payhot-mobile-safe-bottom) - 24px));
    -webkit-overflow-scrolling: touch;
  }

  #figmaFrame .payhot-dropdown-menu button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }

  /* Existing modal callers keep their own variants, but receive mobile safe edges. */
  .payhot-overlay--drawer-right .payhot-overlay-panel {
    --payhot-overlay-edge: var(--payhot-mobile-panel-edge);
    width: min(var(--payhot-overlay-width, 512px), calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
  }

  /* The archived 2FA canvas is desktop-only. Mobile gets one compact, scrollable flow. */
  .profile-payhot-overlay .payhot-overlay-panel.profile-twofa-drawer {
    --payhot-overlay-edge: 8px;
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(375px, calc(100dvw - 16px));
    max-width: calc(100dvw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 24px;
    background: #f0f4f8;
    transform: translate(-50%, -50%);
  }

  .profile-payhot-overlay .profile-twofa-desktop-canvas { display: none !important; }

  /* The confirmation drawers are archived desktop canvases. Keep the content
     in a real mobile flow instead of clipping their 1440px coordinates. */
  #figmaFrame .profile-payhot-overlay .payhot-overlay-panel:is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) {
    --payhot-overlay-edge: 8px;
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(375px, calc(100dvw - 16px));
    max-width: calc(100dvw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 24px;
    background: #fff;
    transform: translate(-50%, -50%);
  }

  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .two-factor-deactivate-autohtml {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
  }

  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .deactivate-drawer {
    position: relative;
    inset: auto;
    display: grid;
    width: 100%;
    min-height: 0;
    gap: 16px;
    margin: 0;
    padding: 76px 20px 20px;
    overflow: visible;
    background: #fff;
  }

  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) :is(.deactivate-drawer-outer, .deactivate-drawer-inner) { display: none; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .deactivate-close { top: 16px; right: 16px; left: auto; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .deactivate-icon { position: relative; display: grid; width: 72px; height: 72px; margin: 0 auto; place-items: center; border-radius: 50%; background: #dbe2e9; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .deactivate-icon span { display: none; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .deactivate-icon img { position: static; width: 38px; height: 38px; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .deactivate-drawer h2 { position: static; width: auto; margin: 0; color: #000; font: 500 20px/1.05 var(--font-title); text-align: center; letter-spacing: 0; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .profile-deactivate-warning { position: static; width: auto; margin: -4px 0 0; color: #67768c; font: 600 13px/1.4 var(--font-ui); text-align: center; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .profile-deactivate-password { position: static; display: grid; width: 100%; height: auto; gap: 8px; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .profile-deactivate-password span { position: static; color: #67768c; font: 600 12px/1 var(--font-ui); }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .profile-deactivate-password input { position: static; width: 100%; height: 48px; min-width: 0; padding: 0 14px; font: 600 14px/1 var(--font-ui); }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) .profile-overlay-message { position: static; width: auto; margin: 0; }
  #figmaFrame .profile-payhot-overlay :is(.profile-twofa-deactivate-drawer, .profile-payout-twofa-drawer) :is(.deactivate-primary, .deactivate-secondary) { position: static; width: 100%; height: 52px; min-height: 52px; padding: 0 16px; }

  .payhot-overlay--dialog-centered {
    padding: var(--payhot-mobile-panel-edge);
  }

  .payhot-overlay--dialog-centered .payhot-overlay-panel {
    width: min(var(--payhot-overlay-width, 560px), calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
  }

  .payment-link-details-overlay .payhot-overlay-panel.payment-link-details-panel {
    width: min(375px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 24px;
    background: #f0f4f8;
  }

  .payment-link-created-overlay .payhot-overlay-panel.payment-link-created-panel {
    width: min(375px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 24px;
    background: #f0f4f8;
  }

  .payment-link-statistics-runtime-overlay .payhot-overlay-panel.payment-link-statistics-runtime-panel {
    width: min(375px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 24px;
    background: #f0f4f8;
  }

  /* Chart DOM belongs to a nested component, so its mobile layout lives here. */
  .mobile-payment-link-statistics-runtime__graph .payment-link-svg-chart {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto 248px auto;
    column-gap: 8px;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
  }

  .mobile-payment-link-statistics-runtime__graph .chart-insight {
    position: relative;
    left: auto !important;
    top: auto !important;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-height: 56px;
    margin: 0 0 12px;
    transform: none;
    border-radius: 14px;
    box-shadow: none;
    background: #f0f4f8;
  }

  .mobile-payment-link-statistics-runtime__graph .chart-numbers {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 2;
    width: 32px;
    height: 216px;
    margin-top: 8px;
  }

  .mobile-payment-link-statistics-runtime__graph .chart-grid {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: 248px;
  }

  .mobile-payment-link-statistics-runtime__graph .payment-link-svg-chart-grid { width: 100%; height: 216px; }
  .mobile-payment-link-statistics-runtime__graph .chart-labels {
    left: 0;
    top: 224px;
    bottom: auto;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .mobile-payment-link-statistics-runtime__graph .chart-labels span { width: auto; font-size: 10px; }
  .mobile-payment-link-statistics-runtime__graph .chart-labels span:first-child { text-align: left; }
  .mobile-payment-link-statistics-runtime__graph .chart-labels span:last-child { text-align: right; }

  .mobile-payment-link-statistics-runtime__graph .statistics-legend {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 16px;
  }
  .mobile-payment-link-statistics-runtime__graph .payment-link-svg-chart-empty { position: relative; left: auto; top: 90px; grid-column: 2; grid-row: 2; width: auto; }

  .payment-link-statistics-static-overlay .payhot-overlay-panel.payment-link-statistics-static-panel {
    width: min(375px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 24px;
    background: #f0f4f8;
  }

  #figmaFrame .order-detail-panel,
  #figmaFrame .admin-payhot-drawer,
  #figmaFrame .method-editor-panel,
  #figmaFrame .cashbox-admin-drawer,
  #figmaFrame .cashbox-request-panel,
  #figmaFrame .settlement-detail-panel,
  #figmaFrame .cashout-drawer,
  #figmaFrame .recurring-drawer,
  #figmaFrame .recurring-form-drawer,
  #figmaFrame .recurring-created-modal,
  #figmaFrame .exports-detail-panel,
  #figmaFrame .export-create-panel,
  #figmaFrame .project-create-modal,
  #figmaFrame .notification-detail-modal,
  #figmaFrame .notification-raw-modal,
  #figmaFrame .profile-drawer {
    max-width: calc(100dvw - (var(--payhot-mobile-panel-edge) * 2));
    max-height: calc(100dvh - (var(--payhot-mobile-panel-edge) * 2));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Project creation still uses the legacy modal markup. Keep its surface
     anchored to the visual viewport instead of the padded cabinet page slot. */
  #figmaFrame .project-create-overlay,
  .figma-frame .project-create-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    width: 100dvw;
    min-width: 0;
    height: 100dvh;
    min-height: 100dvh;
    padding: var(--payhot-mobile-panel-edge);
    place-items: center;
    overflow: hidden;
  }

  #figmaFrame .project-create-modal,
  .figma-frame .project-create-modal {
    width: min(448px, calc(100dvw - (var(--payhot-mobile-panel-edge) * 2)));
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  /* MobileFilterSheet renders its panel through a child component, so this
     global selector keeps its rounded PayHot surface reliable on every browser. */
  #figmaFrame .mobile-filter-sheet-overlay .payhot-overlay-panel.mobile-filter-sheet-panel {
    border-radius: 24px;
  }

  /* The close control is a panel sibling, so the form inner owns mobile scroll. */
  #figmaFrame .export-create-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden !important;
  }

  #figmaFrame .export-create-panel .export-create-inner {
    position: relative;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #figmaFrame .export-create-panel .export-create-close {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    margin: 0;
    z-index: 6;
  }

  /* The order detail keeps one PayhotOverlay. Only its desktop canvas is
     replaced below 768px; existing runtime sections remain available. */
  #figmaFrame .orders-detail-overlay .order-detail-panel:has(.mobile-order-details-runtime) {
    --payhot-overlay-edge: 8px;
    --payhot-overlay-width: 375px;
    inset: 50% auto auto 50%;
    width: min(375px, calc(100dvw - (var(--payhot-overlay-edge) * 2)));
    max-width: calc(100dvw - (var(--payhot-overlay-edge) * 2));
    max-height: calc(100dvh - (var(--payhot-overlay-edge) * 2));
    transform: translate(-50%, -50%);
    border-radius: 28px;
    background: #f0f4f8;
  }

  #figmaFrame .orders-detail-overlay .orders-desktop-detail {
    display: none !important;
  }

  #figmaFrame .cashbox-method-editor-reference .cashbox-reference-canvas,
  #figmaFrame .cashbox-request-overlay { display: none !important; }
  #figmaFrame .cashbox-method-editor-reference .method-editor-panel {
    --payhot-overlay-edge: 8px;
    --payhot-overlay-width: 375px;
    position: fixed;
    inset: var(--payhot-overlay-edge) auto var(--payhot-overlay-edge) 50%;
    transform: translateX(-50%);
    width: min(375px, calc(100dvw - (var(--payhot-overlay-edge) * 2)));
    max-width: calc(100dvw - (var(--payhot-overlay-edge) * 2));
    max-height: calc(100dvh - (var(--payhot-overlay-edge) * 2));
    min-height: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 28px;
    background: #f0f4f8;
  }

  #figmaFrame .cashbox-method-editor-reference .method-editor-panel > .mobile-cashbox-methods-modal {
    display: block !important;
    width: 100%;
    min-height: 0;
  }
  #figmaFrame .mobile-cashbox-request-overlay .mobile-cashbox-request-panel { --payhot-overlay-edge: 8px; width:min(100dvw - 16px,359px); padding:0; overflow:hidden; border-radius:24px; }

  /* Recurring creation used the desktop full-height drawer on a phone. Keep
     the form content-sized, with panel scrolling only when the viewport is low. */
  #figmaFrame .recurring-form-drawer {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(375px, calc(100dvw - 16px));
    height: auto;
    max-height: calc(100dvh - 16px);
    padding: 20px 16px 16px;
    gap: 14px;
    transform: translate(-50%, -50%);
    border-radius: 24px;
  }

  #figmaFrame .recurring-form-drawer .recurring-drawer-head {
    gap: 12px;
    margin-bottom: 0;
  }

  #figmaFrame .recurring-form-drawer .recurring-drawer-head h2 {
    font-size: 24px;
  }

  #figmaFrame .recurring-form-drawer .recurring-drawer-head p {
    font-size: 13px;
    line-height: 1.3;
  }

  #figmaFrame .recurring-form-drawer .recurring-close {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 22px;
  }

  #figmaFrame .recurring-form-drawer .recurring-form-grid {
    gap: 10px;
  }

  #figmaFrame .recurring-form-drawer .recurring-field input,
  #figmaFrame .recurring-form-drawer .recurring-modal-dropdown .payhot-dropdown-button {
    min-height: 44px;
    border-radius: 12px;
    font-size: 14px;
  }

  #figmaFrame .recurring-form-drawer .recurring-drawer-footer {
    margin-top: 2px;
  }

  /* The payment-link create form originates from a desktop reference canvas.
     These fields must become sequential full-width controls on a phone. */
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .currency-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-mode-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-min-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-max-field {
    position: absolute;
    right: 32px;
    width: calc(100% - 64px);
    margin: 0;
  }

  /* The form has its own mobile Razor presentation. Keep the reference-sized
     desktop canvas out of the mobile panel instead of compensating coordinates. */
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel { width:min(375px,calc(100dvw - (var(--payhot-mobile-panel-edge) * 2))); max-height:calc(100dvh - (var(--payhot-mobile-panel-edge) * 2)); padding:0; overflow:auto; border:0; border-radius:24px; background:#f0f4f8; }
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel::before,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel::after { display:none !important; }
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel > :not(.mobile-payment-link-create) { display:none !important; }

  #figmaFrame .cashout-overlay .payhot-overlay-panel.cashout-drawer { width:min(375px,calc(100dvw - (var(--payhot-mobile-panel-edge) * 2))); max-height:calc(100dvh - (var(--payhot-mobile-panel-edge) * 2)); padding:0; overflow-x:hidden; overflow-y:auto; border:0; border-radius:24px; background:#f0f4f8; }
  #figmaFrame .cashout-overlay .payhot-overlay-panel.cashout-drawer > :not(.mobile-cashout-details) { display:none !important; }

  #figmaFrame .payhot-overlay-panel.settlement-detail-panel:has(.mobile-settlement-details-runtime),
  #figmaFrame .payhot-overlay-panel.settlement-detail-panel:has(.mobile-settlement-details-static) { position:fixed; inset:var(--payhot-mobile-panel-edge) auto var(--payhot-mobile-panel-edge) 50%; width:min(375px,calc(100dvw - (var(--payhot-mobile-panel-edge) * 2))); max-height:calc(100dvh - (var(--payhot-mobile-panel-edge) * 2)); padding:0; overflow-x:hidden; overflow-y:auto; border:0; border-radius:24px; background:#f0f4f8; transform:translateX(-50%); }
  #figmaFrame .payhot-overlay-panel.settlement-detail-panel > :not(.mobile-settlement-details-runtime):not(.mobile-settlement-details-static) { display:none !important; }

  /* Static reference canvases own their 375px geometry. They intentionally use
     the complete visual viewport instead of the generic drawer side gutters. */
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel:has(.mobile-payment-link-create),
  #figmaFrame .cashout-overlay .payhot-overlay-panel.cashout-drawer:has(.mobile-cashout-details),
  #figmaFrame .payhot-overlay-panel.settlement-detail-panel:has(.mobile-settlement-details-runtime),
  #figmaFrame .payhot-overlay-panel.settlement-detail-panel:has(.mobile-settlement-details-static) {
    width:min(375px, 100dvw);
    max-height:100dvh;
    border-radius:24px;
  }

  /* The approved cashout canvas is 375px wide. Scale only on narrower phones
     so the entire reference composition remains visible without a side scroll. */
  @media (max-width:374px) {
    #figmaFrame .cashout-overlay .payhot-overlay-panel.cashout-drawer:has(.mobile-cashout-details) {
      overflow-x:hidden;
    }

    #figmaFrame .cashout-overlay .mobile-cashout-details {
      width:375px;
      min-width:375px;
      transform:scale(calc(100dvw / 375px));
      transform-origin:top left;
    }
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .currency-field { top: 715px; }
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-mode-field { top: 846px; }
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-min-field { top: 977px; }
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-max-field { top: 1108px; }
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-one .method-field { top: 1108px; }
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-multi .method-field { top: 1239px; }

  /* Payer settings follow the payment method with a stable mobile gap. The
     lifetime toggle intentionally stays in its original multi-use position. */
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel {
    --plink-mobile-payer-offset: 120px;
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .extra-fields:not(.lifetime-mode-field),
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .email-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .phone-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .fio-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .telegram-field,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .create-link-submit {
    transform: translateY(var(--plink-mobile-payer-offset));
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-one::after {
    height: 1935px;
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-one::before,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-one .create-link-shell {
    height: 1919px;
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-one .create-link-panel-bg {
    height: 1793px;
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-multi::after {
    height: 2167px;
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-multi::before,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-multi .create-link-shell {
    height: 2151px;
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel.create-link-multi .create-link-panel-bg {
    height: 2025px;
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .create-link-submit {
    min-height: 52px;
    background: linear-gradient(180deg, #fd2226 0%, #ec0a46 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgb(236 10 70 / 24%);
  }

  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .currency-field .field-box,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-field .field-box,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-min-field .field-box,
  #figmaFrame .payment-links-create-overlay .payment-links-create-panel .amount-max-field .field-box {
    width: 100%;
  }

  #figmaFrame .orders-detail-overlay .mobile-order-backoffice-details {
    margin: 0;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  }

  #figmaFrame .orders-detail-overlay .mobile-order-backoffice-details:not(.is-backoffice) {
    display: none;
  }

  #figmaFrame .orders-detail-overlay .mobile-order-backoffice-details > summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0 0 12px;
    padding: 0 16px;
    border: 1px solid #dbe3eb;
    border-radius: 16px;
    color: #1d1d1d;
    background: #fff;
    cursor: pointer;
    font: 600 13px/1 var(--font-ui);
  }

  #figmaFrame .orders-detail-overlay .mobile-order-backoffice-details > .order-runtime-detail-sections {
    padding: 0;
  }

  #figmaFrame input,
  #figmaFrame select,
  #figmaFrame textarea {
    font-size: max(16px, 1rem);
  }

  #figmaFrame button,
  #figmaFrame input,
  #figmaFrame select,
  #figmaFrame textarea {
    min-width: 0;
  }

  /* Shared mobile primitives. They are intentionally dormant until a page opts in. */
  .mobile-page-header { display: grid; gap: 12px; min-width: 0; }
  .mobile-filter-stack,
  .mobile-action-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
  .mobile-record-card { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid rgba(46, 74, 105, 0.1); border-radius: 16px; background: #fff; }
  .mobile-status-action-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  .mobile-state { min-width: 0; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.72); }

  /* Admin/support fallback: same rows and actions, presented as record cards. */
  #figmaFrame .admin-payhot-page {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
  }

  #figmaFrame .admin-payhot-page .page-card {
    width: 100%;
    min-width: 0;
    padding: 16px;
    border-radius: 16px;
  }

  #figmaFrame.figma-frame.operations-shell .cabinet-content-rail > .settings-page > .page-card > .drawer-section {
    gap: 14px;
    margin: 0;
    padding: 14px;
    border-radius: 10px;
  }

  #figmaFrame.figma-frame.operations-shell .cabinet-content-rail > .settings-page > .page-card > .drawer-section > .section-head {
    padding-bottom: 10px;
  }

  #figmaFrame .admin-payhot-page .section-head,
  #figmaFrame .admin-payhot-page .section-head-split,
  #figmaFrame .admin-payhot-page .toolbar-row,
  #figmaFrame .admin-payhot-page .toolbar-row-bottom,
  #figmaFrame .admin-payhot-page .filter-actions,
  #figmaFrame .admin-payhot-page .drawer-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 10px;
  }

  #figmaFrame .admin-payhot-page .filter-grid,
  #figmaFrame .admin-payhot-page .page-stats,
  #figmaFrame .admin-payhot-page .page-stats-three,
  #figmaFrame .admin-payhot-page .detail-grid,
  #figmaFrame .admin-payhot-page .module-grid,
  #figmaFrame .statistics-legacy-admin.admin-payhot-page .statistics-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #figmaFrame .admin-payhot-page .field-span-2 { grid-column: auto; }

  #figmaFrame .admin-payhot-page .primary-btn,
  #figmaFrame .admin-payhot-page .ghost-btn,
  #figmaFrame .admin-payhot-page .danger-btn,
  #figmaFrame .admin-payhot-page .mini-btn,
  #figmaFrame .admin-payhot-page .icon-btn {
    min-height: 44px;
  }

  #figmaFrame .admin-payhot-page .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #figmaFrame .admin-payhot-page .data-table,
  #figmaFrame .admin-payhot-page .compact-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #figmaFrame .admin-payhot-page .data-table thead { display: none; }
  #figmaFrame .admin-payhot-page .data-table tbody { display: grid; gap: 12px; }

  #figmaFrame .admin-payhot-page .data-table tbody tr,
  #figmaFrame .admin-payhot-page .data-table tbody tr:last-child {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(46, 74, 105, 0.1);
    border-radius: 16px;
    background: #fff;
  }

  #figmaFrame .admin-payhot-page .data-table td {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #figmaFrame .admin-payhot-page .data-table td::before {
    content: attr(data-mobile-label);
    min-width: 0;
    color: var(--muted, #687284);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
  }

  #figmaFrame .admin-payhot-page .data-table td:empty { display: none; }

  #figmaFrame .admin-payhot-page .row-actions {
    justify-content: flex-start;
  }

  #figmaFrame .admin-payhot-page .pager-bar {
    flex-wrap: wrap;
  }
}

/* Reference dashboard transfer overrides: intentionally last in the mobile layer. */
@media (max-width: 767px) {
  .payhot-overlay--fullscreen.mobile-navigation-overlay .mobile-navigation-panel {
    animation: payhot-mobile-menu-enter 220ms cubic-bezier(.22, .8, .2, 1) both;
  }

  .mobile-navigation__header { background: rgba(240, 244, 248, .96); }
  .mobile-navigation__content { display: grid; align-content: start; gap: 18px; padding: 24px var(--payhot-mobile-safe-right) calc(28px + var(--payhot-mobile-safe-bottom)) var(--payhot-mobile-safe-left); }
  .mobile-navigation__create-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #fd2226 0%, #ec0a46 100%); color: #fff; font: 600 15px/1 var(--font-ui); text-align: left; }
  .mobile-navigation__create-link > span { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
  .mobile-navigation__create-link > span::before,
  .mobile-navigation__create-link > span::after { position: absolute; top: 7px; left: 2px; width: 12px; height: 2px; border-radius: 2px; background: #fff; content: ""; }
  .mobile-navigation__create-link > span::after { transform: rotate(90deg); }

  .mobile-navigation__list { gap: 8px; padding: 2px 4px; }
  .mobile-navigation__link { position: relative; min-height: 48px; gap: 18px; padding: 0 12px; border-radius: 16px; color: #1d1d1d; font-size: 15px; font-weight: 500; }
  .mobile-navigation__link img { width: 20px; height: 20px; }
  .mobile-navigation__link.active { gap: 12px; color: #fd2226; font-weight: 600; background: rgba(185, 193, 204, .2); }
  .mobile-navigation__link.active::before { width: 48px; height: 48px; margin-left: -12px; border-radius: 16px; background: #fd2226; content: ""; }
  .mobile-navigation__link.active img { width: 48px; height: 48px; margin-left: -60px; padding: 14px; border-radius: 16px; filter: brightness(0) invert(1); }

  .mobile-navigation__telegram { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 84px; margin: 8px 4px 0; overflow: hidden; padding: 16px; border-radius: 18px; color: #fff; text-decoration: none; }
  .mobile-navigation__telegram-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
  .mobile-navigation__telegram-icon { width: 42px; height: 42px; }
  .mobile-navigation__telegram-arrow { width: 20px; height: 20px; }
  .mobile-navigation__telegram > span { display: grid; gap: 5px; min-width: 0; }
  .mobile-navigation__telegram small { color: rgba(255, 255, 255, .78); font: 500 12px/1 var(--font-ui); }
  .mobile-navigation__telegram > span img { width: 78px; height: auto; }

  #figmaFrame .page-footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; min-width: 0; margin: 28px 0 0; padding: 32px 24px calc(28px + var(--payhot-mobile-safe-bottom)); border: 1px solid #d4dce5; border-radius: 32px; background: #f0f4f8; }
  #figmaFrame .page-footer .footer-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; min-width: 0; }
  #figmaFrame .page-footer .footer-links > span { font: 600 14px/1.2 var(--font-ui); }
  #figmaFrame .page-footer .footer-links a { display: flex; align-items: center; gap: 12px; min-height: 28px; color: #1d1d1d; font: 600 14px/1.25 var(--font-ui); text-decoration: none; }
  #figmaFrame .page-footer .footer-links a > img { width: 20px; height: 20px; opacity: .55; }
  #figmaFrame .page-footer .footer-links .uptime { margin-top: 4px; }
  #figmaFrame .page-footer .footer-links .uptime img { width: 106px; height: auto; opacity: 1; }
  #figmaFrame .page-footer .footer-provider-copy { display: block; margin: 0; color: #b0b6be; font: 500 12px/1.5 var(--font-ui); }
  #figmaFrame .page-footer .footer-hot-wallet,
  #figmaFrame .page-footer .socials { display: none; }
  #figmaFrame .page-footer .footer-apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; min-width: 0; }
  #figmaFrame .page-footer .footer-apps a { display: block; width: 100%; min-width: 0; }
  #figmaFrame .page-footer .footer-apps img { display: block; width: 100%; height: auto; max-width: 100%; }
}

@media (max-width: 767px) {
  #figmaFrame:has(.orders-mobile-runtime) .orders-runtime-page {
    display: none;
  }


  #figmaFrame .orders-mobile-runtime {
    display: block;
  }

  #figmaFrame:has(.mobile-cashouts-runtime) .cashouts-runtime-page {
    display: none !important;
  }

  #figmaFrame:has(.mobile-settlements-runtime) .settlements-runtime-page,
  #figmaFrame:has(.mobile-settlements-static) .settlements-runtime-page {
    display: none !important;
  }

  /* These two presentation boundaries wrap parent-owned DOM. Reset the shell
     gutter here so their local 24px content inset begins directly under header. */
  #figmaFrame:has(.mobile-statistics-runtime, .mobile-exports-runtime) .cabinet-page-slot {
    padding-top: 0;
  }

  #figmaFrame:has(.mobile-statistics-runtime) .statistics-runtime-page.statistics-reference-runtime {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 24px 15px 32px;
    gap: 16px;
  }

  /* Projected statistics markup does not receive the component isolation scope. */
  .mobile-statistics-runtime .statistics-reference-filters .calendar {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 48px;
    height: 48px;
    align-items: center;
  }

  .mobile-statistics-runtime .statistics-reference-filters .calendar > img {
    pointer-events: none;
  }

  .mobile-statistics-runtime .statistics-reference-filters .calendar > input {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
  }

  .mobile-statistics-runtime .statistics-reference-ranges {
    margin-top: 0;
  }

  #figmaFrame:has(.mobile-statistics-runtime) .statistics-reference-heading .chart-simple {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  #figmaFrame:has(.mobile-statistics-runtime) .statistics-reference-heading h1 {
    font-size: 24px !important;
    line-height: .9;
  }

  #figmaFrame:has(.mobile-statistics-runtime) .statistics-reference-heading p {
    margin-top: 8px;
    font-size: 13px !important;
    line-height: 1.3;
  }

  #figmaFrame:has(.mobile-exports-runtime) .exports-runtime-page {
    min-height: 0;
    padding-bottom: 32px;
  }

  #figmaFrame:has(.mobile-exports-runtime) .exports-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 24px 15px 32px;
    gap: 16px;
  }

  #figmaFrame:has(.mobile-exports-runtime) .exports-title {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
  }

  #figmaFrame:has(.mobile-exports-runtime) .exports-title img {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  #figmaFrame:has(.mobile-exports-runtime) .exports-title h1 {
    font-size: 24px !important;
    line-height: .9;
  }

  #figmaFrame:has(.mobile-exports-runtime) .exports-title p {
    margin-top: 8px;
    font-size: 13px !important;
    line-height: 1.3;
  }

  #figmaFrame:has(.mobile-profile-runtime) .profile-reference-runtime {
    display: none !important;
  }

  #figmaFrame:has(.mobile-notifications-runtime) .notifications-page__content {
    display: none !important;
  }

  /* Notifications uses the shared overlay component, so these selectors must
     live in the global mobile layer rather than a scoped child component. */
  #figmaFrame .payhot-overlay--drawer-right.notifications-payhot-overlay {
    display: grid;
    place-items: start center;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
  }

  #figmaFrame .notifications-payhot-overlay .notifications-payhot-overlay__panel {
    position: relative !important;
    inset: auto !important;
    width: min(100dvw, 375px) !important;
    max-width: 100dvw;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    padding: 0;
    border-radius: 24px;
    background: #f0f4f8;
  }

  #figmaFrame .notifications-payhot-overlay .header-notifications-modal {
    display: none !important;
  }

  #figmaFrame:has(.mobile-api-docs-runtime) .api-docs-runtime-page,
  #figmaFrame:has(.mobile-subscriptions-runtime) .recurring-runtime-page {
    display: none !important;
  }

  #figmaFrame:has(.mobile-api-docs-runtime) .cabinet-page-slot {
    padding-top: 0;
  }

  #figmaFrame:has(.mobile-payment-links-runtime) .payment-links-runtime-page > .payment-links-content {
    display: none !important;
  }

  #figmaFrame:has(.mobile-payment-links-runtime) .payment-links-runtime-page {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
}
/* Mobile disputes reference temporarily owns the page presentation. The desktop
   runtime stays mounted to preserve the next binding step, but must not occupy
   the mobile document flow. */
@media (max-width: 767px) {
    .disputes-runtime-page {
        display: none !important;
    }

    .mobile-disputes-filter-overlay .payhot-overlay-panel {
        width: min(100%, 520px);
        max-height: min(100dvh - 24px, 760px);
        overflow: hidden;
    }

    .mobile-disputes-filter-overlay__content {
        display: grid;
        gap: 14px;
        max-height: min(100dvh - 24px, 760px);
        overflow: auto;
        overscroll-behavior: contain;
        padding: 20px;
        background: #f0f4f8;
    }

    .mobile-disputes-filter-overlay__content header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-disputes-filter-overlay__content h2 {
        margin: 0;
        color: #1d1d1d;
        font: 600 22px/1.1 var(--font-title);
    }

    .mobile-disputes-filter-overlay__content header button {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 12px;
        color: #1d1d1d;
        background: #e1e8ef;
        font-size: 24px;
    }

    .mobile-disputes-filter-overlay__content label {
        display: grid;
        gap: 7px;
        min-width: 0;
        color: #67768c;
        font-size: 12px;
    }

    .mobile-disputes-filter-overlay__content input,
    .mobile-disputes-filter-overlay__content select,
    .mobile-disputes-filter-overlay__content .payhot-dropdown,
    .mobile-disputes-filter-overlay__content .payhot-dropdown-button {
        width: 100%;
        min-height: 44px;
    }

    .mobile-disputes-filter-overlay__content input,
    .mobile-disputes-filter-overlay__content select {
        padding: 0 12px;
        border: 1px solid #d4dce5;
        border-radius: 12px;
        color: #1d1d1d;
        background: #fff;
        font: inherit;
    }

    .mobile-disputes-filter-overlay__content footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-top: 6px;
    }

    .mobile-disputes-filter-overlay__content footer button {
        min-height: 44px;
        border: 0;
        border-radius: 12px;
        font: 700 12px/1 var(--font-ui);
    }

    .mobile-disputes-filter-overlay__reset {
        color: #1d1d1d;
        background: #e1e8ef;
    }

    .mobile-disputes-filter-overlay__apply {
        color: #fff;
        background: linear-gradient(180deg, #fd2226 0%, #ec0a46 100%);
    }

    /* A viewport overlay must cover the sticky cabinet header too. The page
       slot owns the overlay's stacking context, so raise it as a unit while
       a modal is present and keep the mobile header below its backdrop. */
    #figmaFrame:has(.payhot-overlay):not(:has(.mobile-profile-menu-static-overlay, .mobile-profile-menu-runtime-overlay)) .cabinet-page-slot,
    #figmaFrame.has-cabinet-modal .cabinet-page-slot {
        z-index: calc(var(--payhot-modal-backdrop-z, 2147483000) - 10);
    }

    .mobile-project-runtime { display:grid; gap:20px; width:min(375px,100%); min-width:0; margin:0 auto; padding:0 15px 32px; color:#1d1d1d; background:#f0f4f8; }
    .mobile-project-runtime *, .mobile-project-moderation-runtime * { box-sizing:border-box; }
    .mobile-project-runtime__flow { display:flex; height:72px; margin:0 -15px; overflow:hidden; background:#fff; }.mobile-project-runtime__flow div { display:flex; min-width:133px; align-items:center; gap:12px; padding-left:15px; }.mobile-project-runtime__flow img { width:36px; height:36px; padding:10px; border-radius:50%; background:#f0f4f8; }.mobile-project-runtime__flow span { font:500 14px/.9 var(--font-title); white-space:nowrap; }.mobile-project-runtime__flow small { display:block; margin-top:4px; color:#67768c; font:500 12px/1 var(--font-ui); }
    .mobile-project-runtime__heading { display:grid; gap:10px; padding:0 0 16px; border-bottom:1px solid #d4dce5; }.mobile-project-runtime__heading h1 { margin:0; color:#000; font:500 24px/.9 var(--font-title); }.mobile-project-runtime__heading p,.mobile-project-runtime__muted { margin:0; color:#67768c; font:500 13px/1.3 var(--font-ui); }
    .mobile-project-runtime__card,.mobile-project-runtime__admin { display:grid; gap:16px; min-width:0; padding:20px 22px; border:1px solid rgba(46,74,105,.1); border-radius:24px; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(240,247,255,.5)); }.mobile-project-runtime__card h2,.mobile-project-runtime__admin h2 { margin:0; font:500 18px/.9 var(--font-title); }
    .mobile-project-runtime__notice { position:relative; padding:17px 16px 16px 54px; overflow:hidden; border:1px solid rgba(46,74,105,.1); border-radius:24px; background:linear-gradient(180deg,#fff,#f0f7ff); font:500 13px/1.3 var(--font-ui); }.mobile-project-runtime__notice::before { position:absolute; top:30px; left:0; width:2px; height:24px; background:#67768c; content:""; }.mobile-project-runtime__notice.is-blue::before { background:#4972ce; }.mobile-project-runtime__notice img { position:absolute; top:31px; left:24px; width:20px; height:20px; }.mobile-project-runtime__notice p { margin:0; }.mobile-project-runtime__notice a,.mobile-project-runtime__notice button { display:inline-flex; min-height:40px; align-items:center; margin-top:12px; padding:0 16px; border:1px solid rgba(29,29,29,.2); border-radius:12px; color:#1d1d1d; background:#fff; font:700 12px/1 var(--font-title); text-decoration:none; }
    .mobile-project-runtime__mode,.mobile-project-runtime__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.mobile-project-runtime__mode button,.mobile-project-runtime__actions button { min-height:44px; border:1px solid #d4dce5; border-radius:12px; color:#1d1d1d; background:#fff; font:600 12px/1 var(--font-ui); }.mobile-project-runtime__mode .active,.mobile-project-runtime__primary { border:0; color:#fff; background:linear-gradient(180deg,#fd2226,#ec0a46); }
    .mobile-project-runtime__field { display:grid; gap:8px; color:#67768c; font:600 13px/1 var(--font-ui); }.mobile-project-runtime__field input,.mobile-project-runtime__field .payhot-dropdown-button { width:100%; min-height:52px; padding:0 14px; border:1px solid #f0f4f8; border-radius:14px; color:#1d1d1d; background:#fff; font:600 14px/1 var(--font-ui); }.mobile-project-runtime__field input:disabled { color:#67768c; background:#f0f4f8; }.mobile-project-runtime__two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .mobile-project-runtime__step { display:flex; align-items:center; gap:8px; color:#67768c; font:600 13px/1 var(--font-ui); }.mobile-project-runtime__step b { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#fff; background:#fd2226; font-size:11px; }.mobile-project-runtime__copy,.mobile-project-runtime__token { display:flex; min-width:0; align-items:center; gap:8px; padding:12px; border-radius:14px; background:#f0f4f8; }.mobile-project-runtime__copy code,.mobile-project-runtime__token code { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mobile-project-runtime__copy button,.mobile-project-runtime__token button { flex:0 0 auto; border:0; color:#ec0a46; font:700 12px/1 var(--font-title); }.mobile-project-runtime__target { margin:-8px 0 0; color:#67768c; overflow-wrap:anywhere; font:500 12px/1.35 var(--font-ui); }
    .mobile-project-runtime__toggle { display:flex; align-items:center; gap:12px; border:0; color:#1d1d1d; background:transparent; text-align:left; }.mobile-project-runtime__toggle b { display:grid; width:60px; height:31px; place-items:center; border-radius:18px; color:#67768c; background:#dbe2e9; font:600 10px/1 var(--font-ui); }.mobile-project-runtime__toggle.is-on b { color:#fff; background:#00d512; }.mobile-project-runtime__primary { min-height:52px; border-radius:12px; font:700 13px/1 var(--font-title); }
    .mobile-project-runtime__summary { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid #e2e8ef; color:#67768c; font:500 13px/1.25 var(--font-ui); }.mobile-project-runtime__summary b { color:#1d1d1d; text-align:right; }.mobile-project-runtime__status { display:grid; gap:5px; padding:16px; border-radius:20px; background:linear-gradient(180deg,#fff,#f0f7ff); }.mobile-project-runtime__status span { font:500 13px/1 var(--font-ui); }.mobile-project-runtime__status strong { color:#00b811; font:600 14px/1 var(--font-ui); }.mobile-project-runtime__methods { display:grid; gap:8px; }.mobile-project-runtime__methods h2 { margin:4px 0; }.mobile-project-runtime__methods button { display:flex; min-height:60px; align-items:center; justify-content:space-between; padding:12px; border:1px solid rgba(46,74,105,.1); border-radius:16px; background:#fff; color:#1d1d1d; text-align:left; }.mobile-project-runtime__methods span { display:grid; gap:5px; }.mobile-project-runtime__methods small { color:#67768c; }.mobile-project-runtime__methods b { color:#67768c; font-size:22px; }.mobile-project-runtime__admin { background:#fff; }.mobile-project-runtime__admin .mobile-project-runtime__actions { grid-template-columns:1fr; }
    .mobile-project-runtime__admin fieldset { display:grid; gap:12px; min-width:0; margin:0; padding:0; border:0; }.mobile-project-runtime__admin select { width:100%; min-height:52px; padding:0 14px; border:1px solid #f0f4f8; border-radius:14px; color:#1d1d1d; background:#fff; font:600 14px/1 var(--font-ui); }.mobile-project-runtime__checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.mobile-project-runtime__checks label { display:flex; min-width:0; align-items:center; gap:8px; color:#1d1d1d; font:600 12px/1.2 var(--font-ui); }.mobile-project-runtime__checks input { width:18px; height:18px; flex:0 0 auto; }.mobile-project-runtime__delete { min-height:44px; border:1px solid #fd2226; border-radius:12px; color:#fd2226; background:#fff; font:700 12px/1 var(--font-title); }

    .project-moderation-overlay.payhot-overlay { z-index:var(--payhot-modal-backdrop-z,2147483000); }.project-moderation-overlay__desktop { display:none; }.project-moderation-overlay__mobile { display:block; width:min(375px,calc(100dvw - (var(--payhot-mobile-panel-edge) * 2))); }.project-moderation-overlay .payhot-overlay-panel.project-moderation-overlay__panel { width:min(375px,calc(100dvw - (var(--payhot-mobile-panel-edge) * 2))); max-height:calc(100dvh - (var(--payhot-mobile-panel-edge) * 2)); padding:0; overflow:auto; border:0; border-radius:24px; background:#f0f4f8; }
    .mobile-project-moderation-runtime { width:100%; min-height:600px; padding:8px; background:#f0f4f8; }.mobile-project-moderation-runtime__card { position:relative; min-height:584px; padding:188px 18px 24px; border-radius:24px; background:#fff; text-align:center; }.mobile-project-moderation-runtime__close { position:absolute; top:8px; right:8px; display:grid; width:44px; height:44px; place-items:center; border:0; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.12); font-size:22px; }.mobile-project-moderation-runtime__success { position:absolute; top:36px; left:calc(50% - 45px); display:grid; width:90px; height:90px; place-items:center; border:8px solid #dbe2e9; border-radius:50%; color:#fff; background:#00d512; font-size:42px; }.mobile-project-moderation-runtime h1 { margin:0; font:500 18px/.9 var(--font-title); }.mobile-project-moderation-runtime p { margin:18px 0 28px; color:#67768c; font:500 13px/1.3 var(--font-ui); }.mobile-project-moderation-runtime__notice { padding:18px; border:1px solid rgba(46,74,105,.1); border-radius:24px; background:linear-gradient(180deg,#fff,#f0f7ff); color:#1d1d1d; font:500 13px/1.3 var(--font-ui); text-align:left; }.mobile-project-moderation-runtime__notice a { color:#1d1d1d; font-weight:700; }.mobile-project-moderation-runtime__button { width:100%; min-height:52px; margin-top:18px; border:1px solid rgba(29,29,29,.2); border-radius:12px; background:#fff; color:#1d1d1d; font:700 13px/1 var(--font-title); }

    #figmaFrame:has(.payhot-overlay):not(:has(.mobile-profile-menu-static-overlay, .mobile-profile-menu-runtime-overlay)) .mobile-cabinet-header,
    #figmaFrame.has-cabinet-modal .mobile-cabinet-header {
        z-index: 0;
    }

    .orders-mobile-overlay.payhot-overlay .payhot-overlay-panel.orders-mobile-filter-overlay__panel {
        width:min(420px, calc(100dvw - 16px));
        height:calc(100dvh - 16px);
        max-height:calc(100dvh - (var(--payhot-mobile-panel-edge, 12px) * 2));
        min-height:0;
        padding:0;
        overflow:hidden;
        border:0;
        border-radius:24px;
        background:#f0f4f8;
        box-shadow:0 16px 38px rgba(11, 18, 30, .18);
    }

    .orders-mobile-overlay .orders-mobile-overlay__content {
        display:grid;
        grid-template-rows:auto minmax(0, 1fr) auto;
        width:100%;
        height:100%;
        min-height:0;
        max-height:none;
        overflow:hidden;
        background:#f0f4f8;
    }

    .orders-mobile-overlay .orders-mobile-overlay__head {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:18px 16px 14px;
        border-bottom:1px solid #d4dce5;
        background:#fff;
    }

    .orders-mobile-overlay .orders-mobile-overlay__head h2 {
        margin:0;
        color:#1d1d1d;
        font:500 20px/1 var(--font-title);
    }

    .orders-mobile-overlay .orders-mobile-overlay__head button {
        display:grid;
        width:40px;
        height:40px;
        flex:0 0 auto;
        place-items:center;
        padding:0;
        border:0;
        border-radius:50%;
        color:#1d1d1d;
        background:#f0f4f8;
        font:400 25px/1 var(--font-ui);
    }

    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid {
        display:grid;
        align-content:start;
        grid-template-columns:minmax(0, 1fr);
        gap:14px;
        min-width:0;
        min-height:0;
        overflow-x:hidden;
        overflow-y:auto;
        padding:16px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field {
        display:grid;
        gap:7px;
        min-width:0;
        color:#67768c;
        font:600 12px/1.15 var(--font-ui);
    }

    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field input,
    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field .payhot-dropdown,
    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field .payhot-dropdown-button {
        box-sizing:border-box;
        width:100%;
        min-width:0;
    }

    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field input,
    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field .payhot-dropdown-button {
        min-height:48px;
        padding:0 13px;
        border:1px solid #d4dce5;
        border-radius:12px;
        outline:0;
        color:#1d1d1d;
        background:#fff;
        font:500 14px/1 var(--font-ui);
    }

    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field .payhot-dropdown-button {
        position:relative;
        padding-right:42px;
        text-align:left;
    }

    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field .payhot-dropdown-arrow {
        right:13px;
        width:16px;
        height:16px;
    }

    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field input:focus,
    .orders-mobile-overlay .orders-mobile-overlay__content .filter-grid .field .payhot-dropdown-button:focus-visible {
        border-color:#ec0a46;
        box-shadow:0 0 0 3px rgba(236, 10, 70, .12);
    }

    .orders-mobile-overlay .orders-mobile-overlay__actions {
        display:grid;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);
        gap:8px;
        padding:12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top:1px solid #d4dce5;
        background:#fff;
    }

    .orders-mobile-overlay .orders-mobile-overlay__actions button {
        min-height:50px;
        border-radius:12px;
        font:700 13px/1 var(--font-title);
    }

    .orders-mobile-overlay .orders-mobile-overlay__actions .ghost-btn {
        border:1px solid rgba(29,29,29,.2);
        color:#1d1d1d;
        background:#fff;
    }

    .orders-mobile-overlay .orders-mobile-overlay__actions .primary-btn {
        border:0;
        color:#fff;
        background:linear-gradient(180deg,#fd2226,#ec0a46);
    }

    /* The fixed navigation belongs to normal cabinet pages only. Any modal or
       legacy drawer takes over the viewport and hides the bar completely. */
    #figmaFrame:has(.mobile-bottom-navigation) .cabinet-page-slot { padding-bottom:calc(102px + env(safe-area-inset-bottom, 0px)); }
    #figmaFrame:has(.mobile-bottom-navigation) .mobile-cabinet-footer { margin-bottom:calc(102px + env(safe-area-inset-bottom, 0px)); }
    /* Operations dashboards end with active controls. Keep the final section
       above the fixed navigation even if a more specific page-slot rule wins. */
    #figmaFrame.operations-shell .mobile-admin-dashboard { padding-bottom:calc(118px + env(safe-area-inset-bottom, 0px)); }
    #figmaFrame:has(.payhot-overlay, .drawer-backdrop, .cashbox-request-overlay, .cashbox-method-editor-overlay, .exports-detail-overlay, .export-create-overlay, .recurring-overlay-backdrop, .recurring-form-drawer, .header-notifications-modal.open) .mobile-bottom-navigation { display:none !important; }

    /* The mobile notification overlay is reparented by the shared overlay.
       Override legacy desktop notification geometry in the global mobile layer. */
    #figmaFrame .app-notifications-overlay-runtime .mobile-notifications-modal .notification-item { position:relative; top:auto !important; left:auto !important; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:12px; width:100%; min-height:72px; height:auto; margin:0; padding:10px 0; border:0; border-bottom:1px solid #edf1f5; border-radius:0; color:#67768c; background:transparent; text-align:left; }
    #figmaFrame .app-notifications-overlay-runtime .mobile-notifications-modal .notification-icon { position:static; grid-row:span 2; width:44px; height:44px; padding:10px; border-radius:13px; background:#edf3fa; }
    #figmaFrame .app-notifications-overlay-runtime .mobile-notifications-modal .notification-title { position:static; display:-webkit-box; width:auto; min-height:35px; overflow:hidden; color:inherit; font:600 14px/1.25 var(--font-ui); letter-spacing:-.3px; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
    #figmaFrame .app-notifications-overlay-runtime .mobile-notifications-modal .notification-date { position:static; display:flex; align-items:center; gap:6px; width:auto; margin-top:5px; color:inherit; font:500 11px/1.25 var(--font-ui); white-space:normal; }

    /* The orders reference stylesheet also contains a demo .menu2. Keep the
       shared navigation anchored to the visual viewport on the live page. */
    #figmaFrame:has(.orders-mobile-runtime):not(:has(.payhot-overlay, .drawer-backdrop, .cashbox-request-overlay, .cashbox-method-editor-overlay, .exports-detail-overlay, .export-create-overlay, .header-notifications-modal.open)) .mobile-bottom-navigation.menu2 {
        position:fixed !important;
        top:auto !important;
        right:auto !important;
        bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
        left:50% !important;
        display:block !important;
        width:min(375px, calc(100dvw - 16px)) !important;
        height:86px !important;
        transform:translateX(-50%) !important;
        z-index:70 !important;
    }

    .payhot-overlay--fullscreen.mobile-more-navigation-overlay { z-index:calc(var(--payhot-modal-panel-z, 2147483010) + 20); }
    .payhot-overlay--fullscreen.mobile-more-navigation-overlay .payhot-overlay-backdrop { background:rgba(11,18,30,.35); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); animation:mobile-more-navigation-fade-in 220ms ease-out; }
    .payhot-overlay--fullscreen.mobile-more-navigation-overlay .payhot-overlay-panel.mobile-more-navigation-panel { position:fixed; inset:auto 0 0; width:100dvw; max-width:none; height:auto; max-height:min(70dvh,620px); padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border:0; border-radius:24px 24px 0 0; background:#f0f4f8; box-shadow:0 -12px 34px rgba(11,18,30,.16); animation:mobile-more-navigation-rise 220ms cubic-bezier(.2,.8,.2,1); }
    .mobile-more-navigation-overlay.is-closing .payhot-overlay-backdrop { animation:mobile-more-navigation-fade-out 220ms ease-in forwards; }
    .mobile-more-navigation-overlay.is-closing .payhot-overlay-panel.mobile-more-navigation-panel { animation:mobile-more-navigation-fall 220ms cubic-bezier(.4,0,1,1) forwards; }
    @keyframes mobile-more-navigation-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
    @keyframes mobile-more-navigation-fall { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(24px); } }
    @keyframes mobile-more-navigation-fade-in { from { opacity:0; } to { opacity:1; } }
    @keyframes mobile-more-navigation-fade-out { from { opacity:1; } to { opacity:0; } }

    /* A transformed frame turns fixed descendants into page-relative layers.
       Drop the legacy desktop scale while the profile surface owns the viewport. */
    #figmaFrame:has(.mobile-profile-menu-static-overlay, .mobile-profile-menu-runtime-overlay) { transform:none !important; }
    /* The profile surface is a direct child of the shell frame so it can cover
       every cabinet page without being trapped by the page stacking context. */
    #figmaFrame .mobile-profile-menu-runtime-overlay { z-index:var(--payhot-modal-backdrop-z,2147483000); }
    :is(.mobile-profile-menu-static-overlay, .mobile-profile-menu-runtime-overlay) .payhot-overlay-backdrop { inset:calc(66px + env(safe-area-inset-top, 0px)) 0 0; background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
    .mobile-profile-menu-static-overlay .payhot-overlay-panel.mobile-profile-menu-static-panel,
    .mobile-profile-menu-runtime-overlay .payhot-overlay-panel.mobile-profile-menu-runtime-panel { position:fixed; inset:calc(66px + env(safe-area-inset-top, 0px)) 0 0; width:auto; max-width:none; height:auto; max-height:none; padding:0; overflow-x:hidden; overflow-y:auto; border:0; border-radius:0; background:#fff; box-shadow:none; animation:mobile-profile-menu-drop 220ms cubic-bezier(.2,.8,.2,1); }
    .mobile-profile-menu-runtime-overlay.is-closing .payhot-overlay-backdrop { animation:mobile-profile-menu-fade-out 220ms ease-in forwards; }
    .mobile-profile-menu-runtime-overlay.is-closing .payhot-overlay-panel.mobile-profile-menu-runtime-panel { animation:mobile-profile-menu-rise-out 220ms cubic-bezier(.4,0,1,1) forwards; }
    #figmaFrame:has(.mobile-profile-menu-static-overlay, .mobile-profile-menu-runtime-overlay) .mobile-cabinet-header { z-index:calc(var(--payhot-modal-panel-z,2147483010) + 20); }
    @keyframes mobile-profile-menu-drop { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
    @keyframes mobile-profile-menu-rise-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-16px); } }
    @keyframes mobile-profile-menu-fade-out { from { opacity:1; } to { opacity:0; } }
    @media (prefers-reduced-motion:reduce) { .payhot-overlay--fullscreen.mobile-more-navigation-overlay .payhot-overlay-backdrop,.payhot-overlay--fullscreen.mobile-more-navigation-overlay .payhot-overlay-panel.mobile-more-navigation-panel { animation:none !important; } }
    @media (max-width:374px) { .mobile-profile-menu-static { transform:scale(calc(100dvw / 375px)); transform-origin:top left; } }

    /* StatisticsInteractiveRuntime projects its chart content through ChildContent.
       These selectors must stay global: CSS-isolation attributes are not copied
       to the projected chart nodes. */
    .statistics-chart-shell-mobile { display:none; }
    .mobile-statistics-runtime .statistics-chart-shell-mobile { display:block; }
    .mobile-statistics-runtime .statistics-chart-shell-desktop { display:none; }
    .mobile-statistics-runtime .statistics-chart-shells { gap:16px; margin-top:18px; }
    .mobile-statistics-runtime .statistics-chart-shells article { min-height:0; padding:16px 12px; overflow:hidden; }
    .mobile-statistics-runtime .statistics-chart-shells h3 { margin:0 4px 12px; font-size:14px; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-card { min-height:350px; padding:12px 10px 16px; border-radius:18px; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-y { left:12px; top:88px; bottom:70px; width:42px; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-y span { font-size:10px; text-align:left; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-plot { left:58px; right:8px; top:88px; bottom:54px; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-svg { height:calc(100% - 28px); }
    .mobile-statistics-runtime .statistics-chart-shells .chart-insight--inline { left:0 !important; top:-76px !important; width:100%; min-height:58px; margin:0; transform:none; border-radius:14px; box-shadow:none; background:#f0f4f8; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-x { margin-top:8px; height:36px; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-x span { font-size:10px; transform:translateX(-50%); }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-x span:first-child { transform:none; }
    .mobile-statistics-runtime .statistics-chart-shells .statistics-area-chart-x span:last-child { transform:translateX(-100%); }
}

@media (min-width:768px) {
    .statistics-chart-shell-mobile { display:none; }
}
@media (max-width:767px) {
    .mobile-project-runtime__scenario-switch { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; min-width:0; height:52px; align-items:center; padding:4px; overflow:hidden; border:1px solid rgba(46,74,105,.1); border-radius:16px; background:#f0f4f8; }
    .mobile-project-runtime__scenario-thumb { position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:42px; border-radius:12px; background:#fff; box-shadow:0 8px 18px rgba(46,74,105,.12); transition:transform 180ms ease; }
    .mobile-project-runtime__scenario-switch.is-page .mobile-project-runtime__scenario-thumb { transform:translateX(100%); }
    .mobile-project-runtime__scenario-switch button { position:relative; z-index:1; min-width:0; height:42px; padding:0 6px; border:0; border-radius:12px; color:#67768c; background:transparent; font:700 12px/1 var(--font-ui); text-align:center; }
    .mobile-project-runtime__scenario-switch button.active { color:#1d1d1d; }
    .mobile-project-runtime__scenario-switch button:disabled { color:#9aa7b7; }
}