/* Friday Funded Mini App — premium dark icon dock. */
@media (max-width: 768px) {
  html.miniapp-dashboard body:not(.admin-page) .app-shell {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .app-shell > .bottom-nav,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .app-shell > .bottom-nav {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 52px !important;
    gap: 2px !important;
    width: auto !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 18px !important;
    background: rgba(12, 14, 18, 0.96) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    transform: none !important;
    isolation: isolate !important;
    z-index: 90 !important;
  }

  html.miniapp-dashboard body.bank-tab-enabled:not(.admin-page) .app-shell > .bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav::before {
    content: none !important;
    display: none !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .bottom-nav .nav-button,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .bottom-nav .nav-button.is-active {
    position: relative !important;
    display: grid !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 52px !important;
    max-height: 52px !important;
    height: 52px !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #858c97 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 150ms ease, color 150ms ease, transform 120ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button + .nav-button {
    box-shadow: none !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button[hidden],
  html.miniapp-dashboard body.backtest-mode .bottom-nav .nav-button[data-tab="tournaments"],
  html.miniapp-dashboard body.backtest-mode .bottom-nav .nav-button[data-tab="bank"] {
    display: none !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button::before,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .bottom-nav .nav-button::before {
    content: none !important;
    display: none !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button .nav-icon,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .bottom-nav .nav-button .nav-icon,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .bottom-nav .nav-button.is-active .nav-icon {
    display: grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-icon svg,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .bottom-nav .nav-icon svg {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button.is-active,
  html.miniapp-dashboard body.view-accounts-active:not(.admin-page) .bottom-nav .nav-button.is-active {
    border-color: rgba(255, 255, 255, 0.085) !important;
    background: #1a1d23 !important;
    color: #ef4b55 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 5px 14px rgba(0, 0, 0, 0.22) !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button:active {
    transform: scale(0.94) !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button:focus-visible {
    outline: 1px solid rgba(239, 75, 85, 0.76) !important;
    outline-offset: -3px !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-label,
  html.miniapp-dashboard[lang="ru"] body:not(.admin-page) .bottom-nav .nav-label {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html.miniapp-dashboard body.terminal-keyboard-open .bottom-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }
}

@media (max-width: 340px) {
  html.miniapp-dashboard body:not(.admin-page) .app-shell > .bottom-nav {
    left: 6px !important;
    right: 6px !important;
    gap: 0 !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-button .nav-icon {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  html.miniapp-dashboard body:not(.admin-page) .bottom-nav .nav-icon svg {
    width: 21px !important;
    height: 21px !important;
  }
}