/* Independent app navigation. Desktop header rules are left intact. */
.ft-app-ui { display: none; }
.ft-app-panel { display: none; }

@media (max-width: 1180px), (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .ft-site-header { display: none; }
  .ft-app-ui { display: contents; color: var(--ft-app-text, #12343b); font-family: var(--ft-body-font); }
  body.ft-has-app-dock { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  body.ft-app-menu-open { overflow: hidden; }
  html:has(.ft-app-menu-open) { overflow: hidden; }
  .ft-app-header { position: fixed; z-index: 9990; top: calc(12px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 14px; color: var(--ft-app-bar-text, #fff); background: var(--ft-app-bar-background, #023b47); border: 1px solid rgba(255,255,255,.18); border-radius: var(--ft-app-radius, 20px); box-shadow: 0 8px 30px rgba(1, 40, 48, .18); }
  .admin-bar .ft-app-header { top: calc(44px + env(safe-area-inset-top, 0px)); }
  .ft-app-header .ft-brand { min-width: 0; color: inherit; }
  .ft-app-header .custom-logo { width: auto; max-width: min(215px, 42vw); height: 38px; object-fit: contain; }
  .ft-app-header .ft-brand-text { gap: 9px; }
  .ft-app-header .ft-brand-text b { color: inherit; font-size: 14px; letter-spacing: .12em; line-height: 1.2; }
  .ft-app-header .ft-brand-text small { color: inherit; opacity: .75; font-size: 7px; letter-spacing: .16em; line-height: 1.5; }
  .ft-app-header .ft-brand-symbol { width: 33px; height: 33px; }
  .ft-app-header-actions { display: flex; flex: 0 0 auto; gap: 6px; }
  .ft-app-action, .ft-app-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.07); color: inherit; }
  .ft-app-action svg, .ft-app-close svg { width: 21px; height: 21px; }
  .ft-app-action:active { background: rgba(255,255,255,.18); }
  .ft-app-dock { position: fixed; z-index: 9991; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 50%; display: flex; width: min(620px, calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); padding: 6px; color: var(--ft-app-muted, #61777c); background: var(--ft-app-background, #fff); border: 1px solid rgba(6, 121, 133, .13); border-radius: var(--ft-app-radius, 20px); box-shadow: 0 6px 36px rgba(1, 40, 48, .15); transform: translateX(-50%); }
  .ft-app-tab { position: relative; display: flex; flex: 1 1 0; min-width: 0; min-height: 60px; padding: 6px 3px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border-radius: max(8px, calc(var(--ft-app-radius, 20px) - 6px)); color: inherit; font-size: var(--ft-app-label-size, 11px); font-weight: 600; line-height: 1.25; text-align: center; -webkit-tap-highlight-color: transparent; }
  .ft-app-tab > span:last-child { max-width: 100%; overflow-wrap: anywhere; }
  .ft-app-tab-icon { position: relative; display: grid; place-items: center; min-height: 24px; }
  .ft-app-tab-icon > svg { width: var(--ft-app-icon-size, 22px); height: var(--ft-app-icon-size, 22px); }
  .ft-app-tab[aria-current="page"], .ft-app-tab[aria-expanded="true"] { color: var(--ft-app-accent, #067985); background: var(--ft-app-active-background, #eaf8f6); }
  .ft-app-tab .ft-cart-count { top: -6px; right: -11px; min-width: 17px; height: 17px; padding: 0 3px; border: 2px solid var(--ft-app-background, #fff); color: #fff; background: var(--ft-app-accent, #067985); font-size: 9px; line-height: 1; }
  .ft-app-panel[open] { position: fixed; inset: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); display: block; width: min(520px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); margin: auto 0 auto auto; padding: 22px; color: var(--ft-app-text, #12343b); background: var(--ft-app-background, #fff); border: 1px solid rgba(6, 121, 133, .13); border-radius: var(--ft-app-radius, 20px); box-shadow: 0 24px 80px rgba(0, 24, 30, .3); overflow-y: auto; overscroll-behavior: contain; }
  .ft-app-panel::backdrop { background: rgba(1, 26, 34, .62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .ft-app-panel-top { position: sticky; z-index: 2; top: -22px; display: flex; align-items: center; justify-content: space-between; margin: -22px -22px 14px; padding: 14px 20px; background: var(--ft-app-background, #fff); border-bottom: 1px solid rgba(6,121,133,.09); }
  .ft-app-panel-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ft-app-active-background, #eaf8f6); color: var(--ft-app-accent, #067985); }
  .ft-app-panel-mark svg { width: 25px; }
  .ft-app-close { border-color: rgba(6,121,133,.1); color: var(--ft-app-text, #12343b); background: var(--ft-app-background, #fff); }
  .ft-app-panel h2, .ft-app-panel h3 { font-family: inherit; }
  .ft-app-panel-heading h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; }
  .ft-app-panel-heading p { margin: 8px 0 20px; color: var(--ft-app-muted, #61777c); font-size: 14px; line-height: 1.6; }
  .ft-app-search { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 4px 6px 4px 14px; border: 1px solid rgba(6,121,133,.15); border-radius: 14px; background: var(--ft-app-background, #fff); }
  .ft-app-search > svg { flex: 0 0 19px; width: 19px; color: var(--ft-app-muted, #61777c); }
  .ft-app-search input[type="search"] { min-width: 0; width: 100%; min-height: 44px; padding: 4px 0; border: 0; border-radius: 0; color: var(--ft-app-text, #12343b); background: transparent; font-family: inherit; font-size: 16px; }
  .ft-app-search input::placeholder { color: var(--ft-app-muted, #61777c); opacity: 1; }
  .ft-app-search button { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--ft-app-active-background, #eaf8f6); color: var(--ft-app-accent, #067985); }
  .ft-app-equipment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .ft-app-equipment-tile { display: flex; min-width: 0; min-height: 130px; padding: 16px; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 12px; border: 1px solid rgba(6,121,133,.12); border-radius: var(--ft-app-radius, 20px); background: var(--ft-app-active-background, #eaf8f6); font-size: 14px; font-weight: 600; line-height: 1.4; }
  .ft-app-equipment-tile:nth-child(2) { background: var(--ft-app-background, #fff); }
  .ft-app-equipment-tile > svg { display: none; }
  .ft-app-link-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--ft-app-accent, #067985); background: var(--ft-app-active-background, #eaf8f6); }
  .ft-app-equipment-tile .ft-app-link-icon { width: 42px; height: 42px; background: var(--ft-app-background, #fff); }
  .ft-app-equipment-tile .ft-app-link-icon svg { width: 27px; height: 27px; }
  .ft-app-accessories { margin: 0 0 16px; }
  .ft-app-accessories h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ft-app-muted, #61777c); letter-spacing: .04em; }
  .ft-app-accessories nav { padding: 4px 8px; border: 1px solid rgba(6,121,133,.12); border-radius: var(--ft-app-radius, 20px); }
  .ft-app-accessories nav > a, .ft-app-pages > a, .ft-app-section nav > a { display: flex; min-width: 0; align-items: center; gap: 12px; min-height: 52px; padding: 8px; border-radius: 10px; font-size: 14px; font-weight: 550; line-height: 1.5; }
  .ft-app-accessories nav > a > span:not(.ft-app-link-icon), .ft-app-pages > a > span:not(.ft-app-link-icon), .ft-app-section nav > a > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .ft-app-accessories nav > a > svg, .ft-app-pages > a > svg, .ft-app-section nav > a > svg { flex: 0 0 16px; width: 16px; color: var(--ft-app-muted, #61777c); }
  .ft-app-accessories nav > a + a { border-top: 1px solid rgba(6,121,133,.09); border-radius: 0 0 10px 10px; }
  .ft-app-section { padding: 0; border-bottom: 1px solid rgba(6,121,133,.1); }
  .ft-app-section summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 8px; font-size: 15px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
  .ft-app-section summary::-webkit-details-marker { display: none; }
  .ft-app-section summary::marker { content: ""; }
  .ft-app-section summary > span { flex: 1; }
  .ft-app-section summary > svg:first-child { color: var(--ft-app-accent, #067985); }
  .ft-app-section summary > svg:last-child { width: 16px; transform: rotate(90deg); }
  .ft-app-section[open] summary > svg:last-child { transform: rotate(-90deg); }
  .ft-app-section nav { margin-bottom: 8px; padding: 4px; border-radius: 12px; background: var(--ft-app-active-background, #eaf8f6); }
  .ft-app-section nav > a { padding: 10px 12px; }
  .ft-app-section nav > a .ft-app-link-icon { display: none; }
  .ft-app-pages { padding: 10px 0; border-bottom: 1px solid rgba(6,121,133,.1); }
  .ft-app-custom-links > a { padding-left: calc(12px + var(--ft-app-depth, 0) * 12px) !important; }
  .ft-app-mission { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 16px; border-radius: var(--ft-app-radius, 20px); color: var(--ft-app-bar-text, #fff); background: var(--ft-app-bar-background, #023b47); }
  .ft-app-mission > span:not(.ft-app-link-icon) { flex: 1; min-width: 0; }
  .ft-app-mission .ft-app-link-icon { color: inherit; background: rgba(255,255,255,.1); }
  .ft-app-mission strong { display: block; font-size: 15px; font-weight: 600; }
  .ft-app-mission small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; opacity: .8; }
  .ft-app-mission > svg { flex: 0 0 18px; width: 18px; }
  .ft-app-ui a:focus-visible, .ft-app-ui button:focus-visible, .ft-app-ui summary:focus-visible { outline: 2px solid var(--ft-app-accent, #067985); outline-offset: 2px; }
  .ft-app-search:focus-within { border-color: var(--ft-app-accent, #067985); }
  .ft-app-ui a:active { filter: brightness(.95); }
  .ft-app-ui[data-motion="true"] .ft-app-tab, .ft-app-ui[data-motion="true"] .ft-app-action, .ft-app-ui[data-motion="true"] .ft-app-equipment-tile, .ft-app-ui[data-motion="true"] .ft-app-section summary > svg:last-child { transition: background .18s ease, color .18s ease, transform .18s ease; }
  .ft-app-ui[data-motion="true"] .ft-app-tab:active, .ft-app-ui[data-motion="true"] .ft-app-action:active, .ft-app-ui[data-motion="true"] .ft-app-equipment-tile:active { transform: scale(.96); }
  .ft-app-ui[data-motion="true"] .ft-app-panel[open] { animation: ft-app-panel-in .25s cubic-bezier(.2,.75,.2,1) both; }
  @keyframes ft-app-panel-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 782px) {
  .admin-bar .ft-app-header { top: calc(58px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 600px) {
  .ft-app-panel[open] { width: calc(100% - 20px); inset-inline: 10px; margin-inline: auto; padding: 18px; }
  .ft-app-panel-top { top: -18px; margin: -18px -18px 14px; padding: 12px 16px; }
  .ft-app-header { padding-inline: 12px; }
}
@media (max-width: 360px) {
  .ft-app-header .ft-brand-symbol { display: none; }
  .ft-app-header .ft-brand-text b { font-size: 13px; }
  .ft-app-equipment-tile { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-app-ui[data-motion="true"] *, .ft-app-ui[data-motion="true"] *::before { animation: none !important; transition: none !important; }
}