:root {
  --portal-safe-top: env(safe-area-inset-top, 0px);
  --portal-safe-bottom: env(safe-area-inset-bottom, 0px);
  --portal-safe-left: env(safe-area-inset-left, 0px);
  --portal-safe-right: env(safe-area-inset-right, 0px);
  --portal-mobile-header-height: 56px;
  --portal-nav-bottom: max(6px, var(--portal-safe-bottom));
  --nav-glass: oklch(0.27 0.016 250 / 0.68);
  --nav-edge: oklch(0.9 0.015 230 / 0.28);
  --nav-highlight: oklch(1 0 0 / 0.18);
  --nav-reflection: oklch(1 0 0 / 0.035);
  --nav-icon: oklch(0.78 0.018 240);
  --nav-selected: oklch(0.98 0.008 230);
  --nav-lens: oklch(0.87 0.025 230 / 0.15);
  --nav-shadow: 0 12px 32px oklch(0.08 0.005 250 / 0.5), inset 0 1px 0 var(--nav-highlight), inset 0 -1px 0 var(--nav-reflection);
  --nav-lens-shadow: inset 0 1px 1px var(--nav-highlight), inset 0 -1px 2px var(--nav-reflection), 0 2px 8px oklch(0.1 0.01 250 / 0.15);
}

@media (max-width: 720px) {
  .app-shell[data-standalone="true"] {
    --portal-nav-bottom: max(4px, calc(var(--portal-safe-bottom) - 18px));
  }
  .app-shell .mobile-bottom-nav.crystal-nav {
    position: fixed;
    inset: auto max(12px, var(--portal-safe-right)) var(--portal-nav-bottom) max(12px, var(--portal-safe-left));
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 48px;
    grid-auto-flow: row;
    gap: 0;
    align-items: center;
    min-height: 0;
    width: auto;
    height: 62px;
    max-width: 460px;
    margin-inline: auto;
    padding: 6px;
    border: 1px solid var(--nav-edge);
    border-radius: 30px;
    background: linear-gradient(160deg, var(--nav-highlight), var(--nav-reflection) 45%), var(--nav-glass);
    box-shadow: var(--nav-shadow);
    backdrop-filter: blur(28px) saturate(155%);
    -webkit-backdrop-filter: blur(28px) saturate(155%);
    isolation: isolate;
    touch-action: none;
    user-select: none;
    overflow: hidden;
  }
  .crystal-nav-lens {
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc((100% - 12px) / 6);
    height: 48px;
    border: 1px solid var(--nav-edge);
    border-radius: 24px;
    background: var(--nav-lens);
    box-shadow: var(--nav-lens-shadow);
    transform: translateX(calc(var(--nav-position) * 100%));
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 180ms;
    pointer-events: none;
    z-index: -1;
  }
  .crystal-nav-lens[data-visible="false"] { opacity: 0; }
  .is-dragging .crystal-nav-lens { transition: none; }
  .app-shell .crystal-nav .mobile-bottom-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
    color: var(--nav-icon);
    overflow: visible;
    transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  .app-shell .crystal-nav .mobile-bottom-item svg { width: 21px; height: 21px; flex: none; color: inherit; transition: transform 220ms; }
  .app-shell .crystal-nav .mobile-bottom-item span {
    display: block;
    height: 12px;
    line-height: 12px;
    max-width: 100%;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    transition: opacity 180ms;
  }
  .app-shell .crystal-nav .mobile-bottom-item:not(.active) svg { transform: translateY(8px); }
  .app-shell .crystal-nav .mobile-bottom-item.active { color: var(--nav-selected); padding: 0; border-radius: 24px; gap: 4px; }
  .app-shell .crystal-nav .mobile-bottom-item.active { gap: 3px; }
  .app-shell .crystal-nav .mobile-bottom-item.active span { opacity: 1; visibility: visible; box-sizing: border-box; max-width: 100%; padding-inline: 5px; font-size: clamp(7px, 2vw, 8.5px); font-weight: 600; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; }
  .app-shell .crystal-nav .mobile-bottom-item:focus-visible { outline: 2px solid var(--nav-selected); outline-offset: -3px; }
  .app-shell .page-wrap { padding-bottom: calc(80px + var(--portal-nav-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .crystal-nav-lens, .app-shell .crystal-nav .mobile-bottom-item svg, .app-shell .crystal-nav .mobile-bottom-item span { transition: none; }
}