/* Just Xplored V23 — mobile app production shell.
   All rules are phone/tablet-only. Desktop layout is intentionally untouched. */

.jx-app-topbar,
.pack-mobile-tabs,
.pack-mobile-summary,
.jx-app-toast {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --jx-app-vh: 100dvh;
    --jx-app-top: calc(56px + env(safe-area-inset-top));
    --jx-app-bottom: calc(76px + env(safe-area-inset-bottom));
    --jx-app-blue: #159fe1;
    --jx-app-blue-2: #0675b7;
    --jx-app-bg: #06101c;
    --jx-app-panel: #101b29;
    --jx-app-panel-2: #152334;
    --jx-app-line: rgba(255,255,255,.12);
    --jx-app-text: #f7f4ec;
    --jx-app-muted: rgba(247,244,236,.66);
  }

  html {
    overflow-x: hidden !important;
    scroll-behavior: auto !important;
  }

  body.jx-mobile-app {
    min-width: 0 !important;
    max-width: 100vw !important;
    min-height: var(--jx-app-vh) !important;
    margin: 0 !important;
    padding: var(--jx-app-top) 0 var(--jx-app-bottom) !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 50% -10%, rgba(21,159,225,.17), transparent 35%),
      linear-gradient(180deg, #07111d 0%, #050a12 100%) !important;
    color: var(--jx-app-text);
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
  }

  body.jx-mobile-app > header.nav,
  body.jx-mobile-app > header.jx-site-nav,
  body.jx-mobile-app .jx-mobile-shell,
  body.jx-mobile-app .jx-mobile-sheet-backdrop,
  body.jx-mobile-app .jx-mobile-more-sheet,
  body.jx-mobile-app .mobile-menu,
  body.jx-mobile-app .jx-mobile-menu {
    display: none !important;
  }

  body.jx-mobile-app.jx-mobile-sheet-open {
    overflow: auto !important;
  }

  body.jx-mobile-app * {
    box-sizing: border-box;
  }

  body.jx-mobile-app button,
  body.jx-mobile-app input,
  body.jx-mobile-app select,
  body.jx-mobile-app textarea {
    font: inherit;
  }

  body.jx-mobile-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  body.jx-mobile-app select,
  body.jx-mobile-app textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  body.jx-mobile-app button,
  body.jx-mobile-app a[role="button"],
  body.jx-mobile-app .btn,
  body.jx-mobile-app .jx-btn {
    min-height: 46px;
    touch-action: manipulation;
  }

  body.jx-mobile-app :focus-visible {
    outline: 3px solid rgba(57,168,232,.92) !important;
    outline-offset: 3px !important;
  }

  .jx-app-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 30000;
    height: var(--jx-app-top);
    padding: env(safe-area-inset-top) 10px 0;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px;
    align-items: center;
    gap: 8px;
    background: rgba(5,9,15,.965);
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 34px rgba(0,0,0,.34);
    backdrop-filter: blur(22px);
  }

  .jx-app-topbar-back,
  .jx-app-topbar-home {
    width: 42px;
    height: 42px;
    min-height: 42px !important;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    background: rgba(255,255,255,.075);
    color: #fff;
    text-decoration: none;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
  }

  .jx-app-topbar-home {
    background: url("/images/jx-logo.png") center / 25px auto no-repeat, rgba(255,255,255,.055);
    color: transparent;
    font-size: 0;
  }

  .jx-app-topbar-copy {
    min-width: 0;
    display: grid;
    justify-items: center;
    line-height: 1.08;
  }

  .jx-app-topbar-copy strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .94rem;
    letter-spacing: -.015em;
  }

  .jx-app-topbar-copy small {
    max-width: 100%;
    min-height: 13px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(247,244,236,.52);
    font-size: .66rem;
    font-weight: 750;
  }

  .jx-app-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--jx-app-bottom) + 10px);
    z-index: 30100;
    max-width: calc(100vw - 30px);
    display: block;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(6,12,21,.96);
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .16s ease, transform .16s ease;
  }

  .jx-app-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .jx-app-keyboard-open .jx-app-bottom-nav,
  .jx-app-keyboard-open .mobile-tabs,
  .jx-app-keyboard-open .mobile-builder-tabs,
  .jx-app-keyboard-open .pack-mobile-tabs {
    display: none !important;
  }

  .jx-app-keyboard-open {
    padding-bottom: 18px !important;
  }

  /* ---------------------------------------------------------------------
     Travel Cards
     --------------------------------------------------------------------- */

  body.travel-cards-app-page {
    padding-bottom: var(--jx-app-bottom) !important;
  }

  body.travel-cards-app-page .tc-mobile-exit {
    display: none !important;
  }

  body.travel-cards-app-page .app {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(var(--jx-app-vh) - var(--jx-app-top)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 8px calc(var(--jx-app-bottom) + 8px) !important;
    overflow: visible !important;
  }

  body.travel-cards-app-page .sidebar,
  body.travel-cards-app-page .workspace,
  body.travel-cards-app-page .editor,
  body.travel-cards-app-page .panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  body.travel-cards-app-page .brand {
    padding: 13px !important;
  }

  body.travel-cards-app-page .brand h1 {
    font-size: 1.65rem !important;
    line-height: .96 !important;
  }

  body.travel-cards-app-page .brand > p {
    margin-top: 8px !important;
    font-size: .78rem !important;
    line-height: 1.4 !important;
  }

  body.travel-cards-app-page .tc-storage-note {
    margin-top: 9px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  body.travel-cards-app-page .tc-storage-note strong {
    font-size: .72rem !important;
  }

  body.travel-cards-app-page .tc-storage-note small {
    font-size: .66rem !important;
  }

  body.travel-cards-app-page .preview-wrap,
  body.travel-cards-app-page .editor-scroll,
  body.travel-cards-app-page .day-list {
    max-height: none !important;
    overflow: visible !important;
  }

  body.travel-cards-app-page .preview-wrap {
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.travel-cards-app-page .preview-box {
    min-height: min(650px, calc((100vw - 34px) * 1.72)) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.travel-cards-app-page .editor-scroll {
    padding: 10px !important;
  }

  body.travel-cards-app-page .section {
    margin: 0 0 10px !important;
    padding: 13px !important;
    border-radius: 18px !important;
  }

  body.travel-cards-app-page .grid-2,
  body.travel-cards-app-page .grid-3 {
    grid-template-columns: 1fr !important;
  }

  body.travel-cards-app-page .quick-buttons {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.travel-cards-app-page .mobile-tabs {
    position: fixed !important;
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    z-index: 30020 !important;
    width: auto !important;
    max-width: 620px !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 5px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    background: rgba(5,9,15,.97) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(22px) !important;
  }

  body.travel-cards-app-page .mobile-tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 5px 2px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    border-radius: 16px !important;
    font-size: .62rem !important;
    line-height: 1 !important;
  }

  body.travel-cards-app-page .mobile-tab-btn span {
    font-size: 1.1rem !important;
  }

  body.travel-cards-app-page .mobile-tab-btn small {
    font-size: .62rem !important;
    font-weight: 900 !important;
  }

  body.travel-cards-app-page #projectLibraryDialog,
  body.travel-cards-app-page #rangeDialog,
  body.travel-cards-app-page #guideDialog {
    position: fixed !important;
    inset: var(--jx-app-top) 0 0 0 !important;
    width: 100vw !important;
    height: calc(var(--jx-app-vh) - var(--jx-app-top)) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #08111e !important;
    overflow: auto !important;
  }

  body.travel-cards-app-page #projectLibraryDialog::backdrop,
  body.travel-cards-app-page #rangeDialog::backdrop,
  body.travel-cards-app-page #guideDialog::backdrop {
    background: rgba(0,0,0,.18) !important;
    backdrop-filter: none !important;
  }

  body.travel-cards-app-page .tc-library-shell {
    min-height: 100% !important;
  }

  /* ---------------------------------------------------------------------
     Postcard Builder
     --------------------------------------------------------------------- */

  body.postcard-app-page {
    padding-bottom: var(--jx-app-bottom) !important;
  }

  body.postcard-app-page main.wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(var(--jx-app-vh) - var(--jx-app-top)) !important;
    margin: 0 !important;
    padding: 8px 8px calc(var(--jx-app-bottom) + 8px) !important;
  }

  body.postcard-app-page .app-only-hero,
  body.postcard-app-page footer {
    display: none !important;
  }

  body.postcard-app-page .app-shell {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.postcard-app-page #stagePanel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.04) !important;
  }

  body.postcard-app-page .stage-top {
    min-height: 42px !important;
    margin: 0 2px 8px !important;
  }

  body.postcard-app-page .stage-title strong {
    font-size: .82rem !important;
  }

  body.postcard-app-page .stage-title span {
    font-size: .68rem !important;
  }

  body.postcard-app-page .canvas-outer {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.postcard-app-page .canvas.portrait {
    width: auto !important;
    max-width: calc(100vw - 34px) !important;
    height: min(calc(var(--jx-app-vh) - var(--jx-app-top) - var(--jx-app-bottom) - 76px), calc((100vw - 34px) * 1.7778)) !important;
    max-height: 760px !important;
    aspect-ratio: 9 / 16 !important;
  }

  body.postcard-app-page .canvas.landscape {
    width: calc(100vw - 34px) !important;
    max-width: 820px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.postcard-app-page .mobile-builder-tabs {
    position: fixed !important;
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    z-index: 30020 !important;
    width: auto !important;
    max-width: 620px !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 5px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    background: rgba(5,9,15,.97) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(22px) !important;
  }

  body.postcard-app-page .mobile-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 5px 2px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    border-radius: 16px !important;
    font-size: .59rem !important;
    line-height: 1 !important;
  }

  body.postcard-app-page .mobile-tab span {
    font-size: 1.05rem !important;
  }

  body.postcard-app-page .mobile-tab small {
    font-size: .59rem !important;
    font-weight: 900 !important;
  }

  body.postcard-app-page #canvasPanel.mobile-visible,
  body.postcard-app-page #assetsPanel.mobile-visible,
  body.postcard-app-page #toolsPanel.mobile-visible {
    position: fixed !important;
    inset: auto 7px calc(var(--jx-app-bottom) + 2px) 7px !important;
    z-index: 30010 !important;
    width: auto !important;
    max-height: min(68dvh, 610px) !important;
    margin: 0 !important;
    padding: 12px 12px 18px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 25px 25px 18px 18px !important;
    background: rgba(7,13,23,.99) !important;
    box-shadow: 0 24px 90px rgba(0,0,0,.76) !important;
    backdrop-filter: blur(22px) !important;
  }

  body.postcard-app-page .jx-sheet-grabber {
    position: sticky;
    top: -12px;
    z-index: 4;
    height: 28px;
    margin: -12px -12px 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #07101d 70%, transparent);
  }

  body.postcard-app-page .jx-sheet-grabber::before {
    content: "";
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.26);
  }

  body.postcard-app-page .jx-sheet-close {
    position: sticky;
    top: 2px;
    z-index: 5;
    float: right;
    width: 38px;
    height: 38px;
    min-height: 38px !important;
    margin: -2px 0 4px 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 1.15rem;
  }

  body.postcard-app-page #toolsPanel [data-mobile-section] {
    display: none !important;
  }

  body.postcard-app-page #toolsPanel.mobile-mode-text [data-mobile-section="text"],
  body.postcard-app-page #toolsPanel.mobile-mode-layer [data-mobile-section="layer"],
  body.postcard-app-page #toolsPanel.mobile-mode-export [data-mobile-section="export"] {
    display: block !important;
  }

  body.postcard-app-page .asset-grid,
  body.postcard-app-page .bg-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    max-height: 48dvh !important;
    overflow: auto !important;
    padding: 2px !important;
    gap: 8px !important;
  }

  body.postcard-app-page .asset-card,
  body.postcard-app-page .bg-card {
    min-height: 92px !important;
  }

  body.postcard-app-page #mobileLayerEmpty {
    padding: 18px 12px;
    border: 1px dashed rgba(255,255,255,.16);
    border-radius: 16px;
    color: var(--jx-app-muted);
    text-align: center;
    font-size: .82rem;
  }

  body.postcard-app-page #mobileLayerControls[hidden],
  body.postcard-app-page #mobileLayerEmpty[hidden] {
    display: none !important;
  }

  body.postcard-app-page .layer-tool {
    width: 38px !important;
    height: 38px !important;
  }

  body.postcard-app-page .text-layer {
    max-width: 88% !important;
  }

  /* ---------------------------------------------------------------------
     Pack List
     --------------------------------------------------------------------- */

  body.pack-app-page {
    padding-bottom: var(--jx-app-bottom) !important;
  }

  body.pack-app-page main {
    width: 100% !important;
    margin: 0 !important;
  }

  body.pack-app-page main > .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 8px calc(var(--jx-app-bottom) + 8px) !important;
  }

  body.pack-app-page .tool-hero,
  body.pack-app-page main > .wrap:last-of-type {
    display: none !important;
  }

  body.pack-app-page .app {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.pack-app-page .app > .panel {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }

  body.pack-app-page.pack-view-add .app > .panel:first-child,
  body.pack-app-page.pack-view-list .app > .panel:nth-child(2),
  body.pack-app-page.pack-view-print .app > .panel:nth-child(2) {
    display: block !important;
  }

  body.pack-app-page .panel-head {
    padding: 14px !important;
  }

  body.pack-app-page .panel-head h2 {
    font-size: 1.15rem !important;
  }

  body.pack-app-page .panel-body {
    padding: 12px !important;
  }

  .pack-mobile-summary {
    width: 100%;
    margin: 0 0 8px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(57,168,232,.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(1,119,187,.16), rgba(255,255,255,.045));
  }

  .pack-mobile-summary strong {
    display: block;
    font-size: .88rem;
  }

  .pack-mobile-summary span {
    display: block;
    margin-top: 2px;
    color: var(--jx-app-muted);
    font-size: .68rem;
  }

  .pack-mobile-summary b {
    flex: 0 0 auto;
    min-width: 46px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(57,168,232,.18);
    color: #fff;
    font-size: .76rem;
    text-align: center;
  }

  body.pack-app-page .categories {
    display: flex !important;
    gap: 7px !important;
    margin: 0 0 12px !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  body.pack-app-page .categories::-webkit-scrollbar {
    display: none;
  }

  body.pack-app-page .cat-btn {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  body.pack-app-page .preset-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.pack-app-page .preset-btn {
    min-height: 56px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    text-align: left !important;
  }

  body.pack-app-page .name-control,
  body.pack-app-page .controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.pack-app-page .controls {
    margin-bottom: 12px !important;
  }

  body.pack-app-page .table-head {
    display: none !important;
  }

  body.pack-app-page .pack-row {
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) 64px !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.045) !important;
  }

  body.pack-app-page .pack-row input[type="checkbox"] {
    width: 30px !important;
    height: 30px !important;
    justify-self: center;
  }

  body.pack-app-page .pack-row input[type="number"] {
    width: 64px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px !important;
    text-align: center !important;
  }

  body.pack-app-page .pack-row .remove {
    grid-column: 2 / 4 !important;
    justify-self: start !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
  }

  body.pack-app-page .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
  }

  body.pack-app-page.pack-view-list .actions {
    display: none !important;
  }

  body.pack-app-page.pack-view-print .name-control,
  body.pack-app-page.pack-view-print .controls,
  body.pack-app-page.pack-view-print #presetList,
  body.pack-app-page.pack-view-print #packingTable {
    display: none !important;
  }

  body.pack-app-page.pack-view-print .actions {
    display: grid !important;
  }

  body.pack-app-page .kids-mode-panel {
    border-radius: 18px !important;
  }

  .pack-mobile-tabs {
    position: fixed;
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px;
    z-index: 30020;
    max-width: 520px;
    min-height: 68px;
    margin: 0 auto;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    background: rgba(5,9,15,.97);
    box-shadow: 0 22px 70px rgba(0,0,0,.66);
    backdrop-filter: blur(22px);
  }

  .pack-mobile-tab {
    min-width: 0;
    min-height: 56px !important;
    padding: 5px 3px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    color: rgba(247,244,236,.68);
    font-size: .65rem;
    font-weight: 900;
  }

  .pack-mobile-tab span {
    font-size: 1.08rem;
  }

  .pack-mobile-tab.active {
    border-color: transparent;
    background: linear-gradient(135deg, #0177bb, #39a8e8);
    color: #fff;
  }

  .pack-mobile-tab b {
    position: absolute;
    min-width: 20px;
    margin: -34px 0 0 36px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #fff;
    color: #06101c;
    font-size: .58rem;
  }

  .pack-mobile-empty {
    padding: 28px 16px;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 18px;
    color: var(--jx-app-muted);
    text-align: center;
    line-height: 1.45;
  }

  /* ---------------------------------------------------------------------
     Greece Trip Guide
     --------------------------------------------------------------------- */

  body.trip-guide-app-page {
    padding-bottom: 0 !important;
  }

  body.trip-guide-app-page .jx-trip-hero,
  body.trip-guide-app-page footer {
    display: none !important;
  }

  body.trip-guide-app-page main {
    min-height: calc(var(--jx-app-vh) - var(--jx-app-top)) !important;
  }

  body.trip-guide-app-page .jx-section {
    min-height: calc(var(--jx-app-vh) - var(--jx-app-top)) !important;
    padding: 8px 8px calc(86px + env(safe-area-inset-bottom)) !important;
  }

  body.trip-guide-app-page .jx-wrap {
    width: 100% !important;
    max-width: 720px !important;
  }

  body.trip-guide-app-page .jx-planner-card,
  body.trip-guide-app-page .jx-result-card {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }

  body.trip-guide-app-page .jx-planner-head {
    position: sticky !important;
    top: var(--jx-app-top) !important;
    z-index: 5 !important;
    padding: 13px !important;
    background: rgba(10,18,29,.96) !important;
    backdrop-filter: blur(18px);
  }

  body.trip-guide-app-page .jx-question-panel {
    min-height: 0 !important;
    padding: 16px 13px 22px !important;
    overflow: visible !important;
  }

  body.trip-guide-app-page .jx-question-heading {
    gap: 10px !important;
  }

  body.trip-guide-app-page .jx-question-emoji {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 16px !important;
    font-size: 1.35rem !important;
  }

  body.trip-guide-app-page .jx-question-title {
    min-width: 0 !important;
    font-size: clamp(1.65rem, 8.8vw, 2.3rem) !important;
    line-height: 1 !important;
  }

  body.trip-guide-app-page .jx-question-help,
  body.trip-guide-app-page .jx-auto-note {
    font-size: .85rem !important;
    line-height: 1.45 !important;
  }

  body.trip-guide-app-page .jx-options {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.trip-guide-app-page .jx-option {
    min-height: 64px !important;
    padding: 11px !important;
    border-radius: 17px !important;
    touch-action: manipulation;
  }

  body.trip-guide-app-page .jx-planner-actions {
    position: fixed !important;
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    z-index: 30020 !important;
    min-height: 68px !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    background: rgba(5,9,15,.97) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(22px) !important;
  }

  body.trip-guide-app-page .jx-planner-actions .jx-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.trip-guide-app-page .jx-result-card {
    padding: 15px !important;
  }

  body.trip-guide-app-page .jx-result-title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  body.trip-guide-app-page .jx-result-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  body.trip-guide-app-page .jx-route-grid,
  body.trip-guide-app-page .jx-why-grid,
  body.trip-guide-app-page .jx-picks-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  body.postcard-app-page .mobile-tab,
  body.travel-cards-app-page .mobile-tab-btn {
    font-size: .54rem !important;
  }

  body.pack-app-page .preset-list {
    grid-template-columns: 1fr !important;
  }
}

@media print {
  .jx-app-topbar,
  .jx-app-toast,
  .pack-mobile-tabs,
  .pack-mobile-summary {
    display: none !important;
  }
}