/* Loaded after the desktop stylesheet so iPhone viewport rules stay authoritative. */
.settings-page-grid > .ios-app-settings-card {
  grid-column: 1 / -1;
  background:
    radial-gradient(
      circle at 94% 10%,
      rgba(var(--accent-rgb), 0.16),
      transparent 20rem
    ),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 50%),
    var(--panel);
}

@media (max-width: 760px) {
  html {
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  body,
  .app-shell {
    min-height: 100svh;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  html[data-ios-standalone="true"] body {
    overscroll-behavior-y: none;
  }

  .topbar {
    position: sticky;
    z-index: 60;
    top: 0;
    display: flex;
    min-height: calc(62px + env(safe-area-inset-top));
    align-items: flex-end;
    justify-content: space-between;
    padding-top: env(safe-area-inset-top);
    padding-right: max(15px, env(safe-area-inset-right));
    padding-bottom: 10px;
    padding-left: max(15px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 96%, var(--panel-strong));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .topbar .brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .topbar .brand > span,
  .topbar .brand strong {
    display: block;
  }

  .topbar .brand strong {
    font-size: 12px;
  }

  .topbar .brand small,
  .topbar-status .paper-pill,
  .topbar-status .user-button > span,
  .topbar-status .user-button > i {
    display: none;
  }

  .topbar-status {
    margin-left: auto;
  }

  .topbar-status .user-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .topbar-status .user-button {
    padding: 3px;
  }

  .topbar-status .user-button img {
    width: 32px;
    height: 32px;
  }

  .primary-nav {
    position: fixed;
    z-index: 70;
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    display: grid;
    overflow: visible;
    width: auto;
    height: 64px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    gap: 2px;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: saturate(190%) blur(30px);
    -webkit-backdrop-filter: saturate(190%) blur(30px);
  }

  .primary-nav button {
    display: flex;
    overflow: hidden;
    min-width: 0;
    height: 52px;
    align-items: center;
    justify-content: center;
    flex: initial;
    flex-direction: column;
    gap: 0;
    padding: 0 2px;
    border-radius: 14px;
    font-size: 0;
    -webkit-touch-callout: none;
  }

  .primary-nav button::before {
    display: block;
    color: currentColor;
    font-family: var(--sans);
    font-size: 21px;
    font-weight: 470;
    line-height: 1;
  }

  .primary-nav button::after {
    display: none;
  }

  .primary-nav button[data-view="dashboard"]::before {
    content: "▦";
  }
  .primary-nav button[data-view="analytics"]::before {
    content: "⌁";
  }
  .primary-nav button[data-view="configurator"]::before {
    content: "◇";
  }
  .primary-nav button[data-view="backtest"]::before {
    content: "↺";
  }

  .primary-nav button.active {
    color: var(--accent-strong);
    background: rgba(var(--accent-rgb), 0.105);
    box-shadow: none;
  }

  main {
    padding-top: 10px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .chart-toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 48px;
    flex-wrap: nowrap !important;
    gap: 13px;
    padding: 6px 12px;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .chart-toolbar::-webkit-scrollbar,
  .table-scroll::-webkit-scrollbar {
    display: none;
  }

  .chart-toolbar > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .chart-toolbar label {
    min-height: 34px;
  }

  .chart-toolbar input {
    width: 16px;
    height: 16px;
  }

  .chart-navigation {
    order: initial;
  }

  .chart-navigation button {
    min-width: 34px;
    height: 32px;
  }

  .chart-axis-hint {
    display: none;
  }

  .live-candle-note {
    width: auto;
    margin-left: 0;
  }

  .chart-wrap {
    height: min(54svh, 430px);
    min-height: 330px;
  }

  #market-chart {
    touch-action: none;
  }

  .dashboard-intelligence-grid,
  .settings-page-grid,
  .portfolio-analysis-grid,
  .portfolio-table-grid {
    grid-template-columns: 1fr;
  }

  .app-footer {
    min-height: 0;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    padding: 17px max(14px, env(safe-area-inset-right))
      calc(96px + env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    text-align: center;
  }

  .app-footer p,
  .app-footer span:last-child {
    width: 100%;
    text-align: center;
  }

  .footer-right {
    justify-content: center;
  }

  .login-form-panel {
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: calc(86px + env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .login-mobile-header {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    min-height: calc(67px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 94%, var(--panel-strong));
  }

  .login-card {
    margin: auto 0;
    padding: 22px 0;
  }

  .login-footer {
    position: static;
    width: 100%;
    margin-top: 4px;
  }

  .ios-install-sheet {
    align-items: end;
    padding: 0;
  }

  .ios-install-dialog {
    width: 100%;
    max-height: calc(94svh - env(safe-area-inset-top));
    padding: 23px max(18px, env(safe-area-inset-right))
      calc(20px + env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
    border-width: 1px 0 0;
    border-radius: 27px 27px 0 0;
    transform: translateY(36px);
  }
}

@media (max-width: 390px) {
  .topbar .brand > span {
    display: none;
  }
}