/* Nudjee 2.20.244 — universal app and modal viewport contract.
 *
 * Keep this file last in both frontend bundles. The runtime supplies exact
 * visual-viewport pixels when available; standards-based vh/dvh fallbacks keep
 * first paint and non-JavaScript states contained in older browser engines.
 */
:root {
    --pn-safe-top: env(safe-area-inset-top, 0px);
    --pn-safe-right: env(safe-area-inset-right, 0px);
    --pn-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pn-safe-left: env(safe-area-inset-left, 0px);
    --pn-visual-viewport-height: 100vh;
    --pn-visual-viewport-width: 100vw;
    --pn-visual-viewport-offset: 0px;
    --pn-visual-viewport-left: 0px;
    --pn-modal-gutter: clamp(10px, 2.25vw, 24px);
}

@supports (height: 100dvh) {
    :root { --pn-visual-viewport-height: 100dvh; }
}

/* The measured rectangle wins over layout-viewport units once app.js is ready.
   This removes Safari/Firefox toolbar gaps and Chromium/Opera keyboard crop. */
html.pn-visual-viewport-ready,
html.pn-visual-viewport-ready body.pn-app-viewport,
html.pn-visual-viewport-ready body.pn-app-viewport #pn-nudjee-page-content,
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell {
    width: var(--pn-visual-viewport-width, 100vw) !important;
    min-width: 0 !important;
    max-width: var(--pn-visual-viewport-width, 100vw) !important;
    height: var(--pn-visual-viewport-height, 100dvh) !important;
    max-height: var(--pn-visual-viewport-height, 100dvh) !important;
}

html.pn-visual-viewport-ready body.pn-landing-experience .pn-landing {
    width: var(--pn-visual-viewport-width, 100vw) !important;
    min-width: 0 !important;
    max-width: var(--pn-visual-viewport-width, 100vw) !important;
    min-height: var(--pn-visual-viewport-height, 100dvh) !important;
}

html.pn-visual-viewport-ready :is(.pn-launch-splash, .pn-guest-intent-splash) {
    width: var(--pn-visual-viewport-width, 100vw) !important;
    max-width: var(--pn-visual-viewport-width, 100vw) !important;
    height: var(--pn-visual-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--pn-visual-viewport-height, 100dvh) !important;
}

body.pn-modal-open {
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
}

/* Every overlay uses one visible-viewport coordinate system. Runtime inline
   geometry has the same values, providing a final defence against old per-ID
   rules with unusually high specificity. */
.pn-modal-overlay.pn-viewport-dialog {
    box-sizing: border-box !important;
    position: fixed !important;
    inset: auto !important;
    top: var(--pn-visual-viewport-offset, 0px) !important;
    left: var(--pn-visual-viewport-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--pn-visual-viewport-width, 100vw) !important;
    max-width: none !important;
    height: var(--pn-visual-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--pn-visual-viewport-height, 100dvh) !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.pn-modal-overlay.pn-viewport-dialog > .pn-viewport-dialog-content {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-wrap: anywhere;
    scrollbar-gutter: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

.pn-modal-overlay.pn-viewport-dialog--fullscreen {
    align-items: stretch !important;
    justify-content: stretch !important;
}

.pn-modal-overlay.pn-viewport-dialog--fullscreen > .pn-viewport-dialog-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
}

.pn-modal-overlay.pn-viewport-dialog--sheet {
    align-items: flex-end !important;
    justify-content: center !important;
}

.pn-modal-overlay.pn-viewport-dialog--sheet > .pn-viewport-dialog-content {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    border-radius: 26px 26px 0 0 !important;
}

.pn-modal-overlay.pn-viewport-dialog--centered {
    align-items: center !important;
    justify-content: center !important;
}

/* Form controls and long member-generated strings must be allowed to shrink
   inside every flex/grid modal family. */
.pn-modal-overlay :is(form, fieldset, label, header, footer, section, article, div, span),
.pn-modal-overlay :is(input, textarea, select, button) {
    min-width: 0;
    box-sizing: border-box;
}

.pn-modal-overlay :is(input, textarea, select) {
    max-width: 100%;
}

.pn-modal-overlay :is(h1, h2, h3, h4, p, strong, small, em, blockquote) {
    overflow-wrap: anywhere;
}

.pn-modal-overlay :is(img, video, canvas, svg) {
    max-width: 100%;
}

/* Close affordances remain reachable at large text sizes and in landscape
   safe areas. Do not shrink the visual icon; only guarantee the hit target. */
.pn-viewport-dialog-content .pn-modal-close,
.pn-viewport-dialog-content .pn-sheet-close {
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 auto;
}

.pn-viewport-dialog-content > .pn-sheet-close {
    top: max(12px, var(--pn-safe-top)) !important;
    right: max(12px, var(--pn-safe-right)) !important;
}

.pn-viewport-dialog-content > :is(.pn-modal-header, header) {
    min-width: 0;
    flex: 0 0 auto;
}

.pn-viewport-dialog-content > :is(.pn-modal-header, header) > :first-child {
    min-width: 0;
}

.pn-viewport-dialog-content :is(
    .pn-modal-body,
    .pn-hub-view,
    .pn-chat-messages,
    .pn-circle-chat-messages,
    .pn-notification-list,
    .pn-list-stack,
    .pn-place-manager-list,
    .pn-place-editor-form
) {
    min-width: 0;
    min-height: 0;
    overscroll-behavior: contain;
}

/* Dedicated page-like surfaces are excluded from layoutBlockingModal, so bind
   them directly to the same measured viewport variables. */
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app > #pn-hub-modal,
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app > #pn-mobile-discovery-modal,
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app > #pn-notifications-modal {
    top: var(--pn-visual-viewport-offset, 0px) !important;
    left: var(--pn-visual-viewport-left, 0px) !important;
    width: var(--pn-visual-viewport-width, 100vw) !important;
    max-width: var(--pn-visual-viewport-width, 100vw) !important;
    height: var(--pn-visual-viewport-height, 100dvh) !important;
    max-height: var(--pn-visual-viewport-height, 100dvh) !important;
}

#pn-moment-media-modal .pn-moment-media-viewer,
#pn-tap-nudge-modal .pn-tap-nudge-stage,
#pn-app > .pn-founder-welcome {
    height: var(--pn-visual-viewport-height, 100dvh) !important;
    max-height: var(--pn-visual-viewport-height, 100dvh) !important;
}

/* iOS zooms focused controls below 16px. Applying the floor to compact
   viewports also covers Firefox Android and Chromium-based Opera. */
@media (max-width: 860px), (max-height: 560px) and (max-width: 1180px), (hover: none) and (pointer: coarse) {
    .pn-modal-overlay :is(input, textarea, select) {
        font-size: 16px !important;
    }

    .pn-viewport-dialog-content {
        scroll-padding-top: max(20px, var(--pn-safe-top));
        scroll-padding-bottom: max(20px, var(--pn-safe-bottom));
    }
}

/* Very narrow foldable covers and accessibility zoom should stack decisive
   modal actions instead of squeezing labels into unusable columns. */
@media (max-width: 359px) {
    .pn-viewport-dialog-content :is(.pn-modal-actions, .pn-crossed-actions, .pn-place-form-actions),
    .pn-viewport-dialog-content form > footer {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pn-viewport-dialog-content :is(.pn-modal-actions, .pn-crossed-actions, .pn-place-form-actions) > *,
    .pn-viewport-dialog-content form > footer > * {
        width: 100%;
        max-width: 100%;
    }
}

/* Nudjee 2.20.254 — one scroll surface for every Your Account section.
   The older desktop grid held the form at 100% height and hid overflow on the
   view. Short sections left an empty grid track; long sections and the separate
   Account integration form could be clipped outside that fixed height. */
body.pn-app-viewport #pn-app #pn-view-profile {
    --pn-profile-nav-clearance: 0px;
    box-sizing: border-box;
    min-height: 0;
    padding-bottom: calc(var(--pn-profile-nav-clearance) + 12px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto;
    scroll-padding-bottom: calc(var(--pn-profile-nav-clearance) + 12px);
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-form {
    box-sizing: border-box;
    width: 100%;
    max-width: 1120px;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    margin-inline: auto;
    padding: 12px 16px 0;
}

body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 20;
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-tab {
    flex: 1 0 92px;
    min-width: 92px;
}

body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-tab-panel {
    max-height: none;
    overflow: visible !important;
    padding-bottom: 14px;
}

body.pn-app-viewport #pn-app #pn-view-profile .pn-sticky-save {
    position: sticky !important;
    bottom: var(--pn-profile-nav-clearance) !important;
    z-index: 22;
    margin: 8px -16px 0;
    padding: 9px 16px 10px;
}

body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-external-panel {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 1088px;
    max-height: none;
    margin: 12px auto 20px;
    overflow: visible;
}

body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-referral-hub .pn-referral-list {
    max-height: none;
    overflow: visible;
}

/* The measured Hub fills the viewport behind the persistent app navigation. */
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app #pn-view-profile {
    --pn-profile-nav-clearance: 76px;
}

@media (min-width: 861px) and (max-height: 820px) {
    html.pn-visual-viewport-ready body.pn-app-viewport #pn-app #pn-view-profile {
        --pn-profile-nav-clearance: 70px;
    }
}

@media (max-width: 860px) {
    body.pn-app-viewport #pn-app #pn-view-profile,
    html.pn-visual-viewport-ready body.pn-app-viewport #pn-app #pn-view-profile {
        --pn-profile-nav-clearance: calc(var(--pn-mobile-nav-height, 76px) + env(safe-area-inset-bottom));
    }

    body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-form {
        padding: 14px 14px 0 !important;
    }

    body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-tab {
        flex-basis: 78px;
        min-width: 78px;
    }

    body.pn-app-viewport #pn-app #pn-view-profile .pn-sticky-save {
        margin-inline: -14px;
        padding: 9px 14px 10px;
    }

    body.pn-app-viewport #pn-app #pn-view-profile .pn-profile-external-panel {
        width: calc(100% - 28px);
    }
}

/* Pets and neighbourhood alert: keep both the profile gallery and alert sheet scrollable. */
#pn-app .pn-pet-profile-list,
#pn-app .pn-lost-pet-select,
#pn-app .pn-lost-pet-list,
#pn-app .pn-lost-pet-detail-photos,
#pn-app .pn-story-pet-gallery { display: grid; gap: 10px; }
#pn-app .pn-pet-profile-item { display: grid; grid-template-columns: 58px minmax(0,1fr) auto auto; gap: 9px; align-items: center; min-width: 0; }
#pn-app .pn-pet-profile-item > img,
#pn-app .pn-lost-pet-choice > img,
#pn-app .pn-lost-pet-list-item > img,
#pn-app .pn-lost-pet-list-item > .pn-pet-placeholder { width: 54px; height: 54px; object-fit: cover; border-radius: 13px; }
#pn-app .pn-pet-placeholder { display: grid; place-items: center; background: #ecf6ed; font-size: 24px; }
#pn-app .pn-pet-profile-item .pn-pet-placeholder { width: 54px; height: 54px; border-radius: 13px; }
#pn-app .pn-pet-profile-item strong { min-width: 0; overflow-wrap: anywhere; }
#pn-app .pn-pet-add-controls { display: grid; gap: 12px; padding-top: 14px; }
#pn-app .pn-pet-add-controls .pn-btn { justify-self: start; }
#pn-app #pn-profile-pet-status, #pn-app #pn-lost-pet-message { min-height: 1.4em; }
#pn-lost-pet-modal .pn-lost-pet-sheet { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: min(760px, calc(100dvh - 24px)); display: flex; flex-direction: column; overflow: hidden; padding: 20px; border-radius: 25px; background: #fff; }
#pn-lost-pet-modal .pn-lost-pet-sheet h2 { margin: 4px 0 12px; }
#pn-lost-pet-modal .pn-lost-pet-tabs { display: flex; gap: 8px; flex-shrink: 0; padding-bottom: 12px; }
#pn-lost-pet-modal .pn-lost-pet-tabs button { flex: 1; min-height: 42px; border: 1px solid #dde9e5; border-radius: 12px; color: #184c40; background: #f5faf8; font-weight: 700; }
#pn-lost-pet-modal .pn-lost-pet-tabs button.is-active { border-color: #21725a; color: #fff; background: #21725a; }
#pn-lost-pet-modal .pn-lost-pet-content { min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 3px 16px; }
#pn-lost-pet-modal .pn-lost-pet-panel[hidden] { display: none !important; }
#pn-lost-pet-modal .pn-lost-pet-panel { display: grid; gap: 14px; }
#pn-lost-pet-modal .pn-lost-pet-list { display: grid; gap: 10px; }
#pn-lost-pet-modal .pn-lost-pet-panel p { margin: 0; }
#pn-lost-pet-modal .pn-lost-pet-select { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); }
#pn-lost-pet-modal .pn-lost-pet-choice { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid #dfeae3; border-radius: 14px; background: #f8fbf9; cursor: pointer; }
#pn-lost-pet-modal .pn-lost-pet-choice > img, #pn-lost-pet-modal .pn-lost-pet-choice > .pn-pet-placeholder { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; object-fit: cover; }
#pn-lost-pet-modal .pn-lost-pet-choice span:not(.pn-pet-placeholder) { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
#pn-lost-pet-modal .pn-lost-pet-choice input { width: 20px; height: 20px; accent-color: #1d895e; }
#pn-lost-pet-modal .pn-lost-pet-pin-actions, #pn-lost-pet-modal .pn-lost-pet-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#pn-lost-pet-modal .pn-lost-pet-privacy { color: #56666a; line-height: 1.4; }
#pn-lost-pet-modal .pn-lost-pet-list-item { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid #e2eae6; border-radius: 15px; background: #fff; padding: 8px; cursor: pointer; }
#pn-lost-pet-modal .pn-lost-pet-list-item > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 3px; }
#pn-lost-pet-modal .pn-lost-pet-list-item small { color: #5d6d69; }
#pn-lost-pet-modal .pn-lost-pet-detail-photos, #pn-app .pn-story-pet-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(108px,1fr)); }
#pn-lost-pet-modal .pn-lost-pet-detail-photos figure, #pn-app .pn-story-pet-gallery figure { margin: 0; display: grid; gap: 5px; text-align: center; font-weight: 700; }
#pn-lost-pet-modal .pn-lost-pet-detail-photos img, #pn-app .pn-story-pet-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }
#pn-lost-pet-modal .pn-lost-pet-detail-photos .pn-pet-placeholder, #pn-app .pn-story-pet-gallery .pn-pet-placeholder { width: 100%; aspect-ratio: 1; border-radius: 15px; }
.pn-pet-marker { display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #db7440; box-shadow: 0 3px 15px #573c275c; font-size: 20px; cursor: pointer; }
.pn-pet-map-placing { cursor: crosshair !important; }
#pn-app .pn-map-controls.is-expanded .pn-map-controls-menu { max-height: min(620px, calc(100dvh - 145px)) !important; }
@media (max-height: 650px) {
    #pn-app .pn-map-controls.is-expanded .pn-map-controls-menu { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; }
    #pn-app .pn-map-controls.is-expanded .pn-map-controls-menu .pn-map-control-label { display: none !important; }
}
@media (max-width: 560px) {
    #pn-app .pn-pet-profile-item { grid-template-columns: 52px minmax(0,1fr) auto; }
    #pn-app .pn-pet-profile-item [data-pet-delete] { grid-column: 2 / 4; justify-self: start; }
    #pn-lost-pet-modal .pn-lost-pet-sheet { padding: 16px; }
}

/* Short landscape phones keep the same information hierarchy but use less
   ornamental spacing, leaving the dialog itself as the sole scroll owner. */
@media (max-height: 560px) and (max-width: 1180px) {
    .pn-modal-overlay.pn-viewport-dialog:not(.pn-viewport-dialog--fullscreen) {
        padding-top: max(6px, var(--pn-safe-top)) !important;
    }

    .pn-modal-overlay.pn-viewport-dialog--sheet > .pn-viewport-dialog-content {
        border-radius: 20px 20px 0 0 !important;
    }

    .pn-viewport-dialog-content .pn-modal-header {
        min-height: 58px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .pn-viewport-dialog-content.pn-action-sheet > h2 {
        font-size: clamp(22px, 5.5vw, 28px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-viewport-dialog-content {
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* Nudjee 2.20.267 — the signed-in shell follows the measured visible rectangle.
   A minimum height from the original page layout must not outgrow that rectangle
   when the browser chrome or the device orientation changes. */
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell {
    box-sizing: border-box !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell > .pn-discover-view {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

/* Mobile hardware may report a desktop-width landscape viewport. It still
   uses the map-only layout and a safe-area-aware navigation row. Keep that row
   in the shell's flex flow so its bottom always coincides with the viewport. */
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-device-mobile > .pn-discover-view > .pn-map-stage,
html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-device-mobile > .pn-discover-view > .pn-map-stage > #pn-map-container {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-device-mobile > .pn-bottom-nav-reference {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(76px + max(0px, var(--pn-safe-bottom) - 8px)) !important;
    min-height: calc(76px + max(0px, var(--pn-safe-bottom) - 8px)) !important;
    flex: 0 0 calc(76px + max(0px, var(--pn-safe-bottom) - 8px)) !important;
    margin-top: auto !important;
    padding-bottom: max(8px, var(--pn-safe-bottom)) !important;
}

@media (max-width: 860px) {
    html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell > .pn-discover-view > .pn-map-stage,
    html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell > .pn-discover-view > .pn-map-stage > #pn-map-container {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    html.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell > .pn-bottom-nav-reference {
        position: relative !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: calc(76px + max(0px, var(--pn-safe-bottom) - 8px)) !important;
        min-height: calc(76px + max(0px, var(--pn-safe-bottom) - 8px)) !important;
        flex: 0 0 calc(76px + max(0px, var(--pn-safe-bottom) - 8px)) !important;
        margin-top: auto !important;
        padding-bottom: max(8px, var(--pn-safe-bottom)) !important;
    }
}

/* A shorter header and dock in phone landscape give the map the recovered
   pixels while preserving 44px or larger actions and both safe areas. */
html.pn-compact-landscape.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-device-mobile > .pn-app-header.pn-nearby-reference-header {
    height: calc(60px + var(--pn-safe-top)) !important;
    min-height: calc(60px + var(--pn-safe-top)) !important;
    padding-top: calc(7px + var(--pn-safe-top)) !important;
    padding-bottom: 7px !important;
}

html.pn-compact-landscape.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-device-mobile > .pn-bottom-nav-reference {
    height: calc(64px + var(--pn-safe-bottom)) !important;
    min-height: calc(64px + var(--pn-safe-bottom)) !important;
    flex-basis: calc(64px + var(--pn-safe-bottom)) !important;
    padding-top: 4px !important;
    padding-bottom: max(4px, var(--pn-safe-bottom)) !important;
}

@media (max-width: 860px) {
    html.pn-compact-landscape.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell > .pn-app-header.pn-nearby-reference-header {
        height: calc(60px + var(--pn-safe-top)) !important;
        min-height: calc(60px + var(--pn-safe-top)) !important;
        padding-top: calc(7px + var(--pn-safe-top)) !important;
        padding-bottom: 7px !important;
    }

    html.pn-compact-landscape.pn-visual-viewport-ready body.pn-app-viewport #pn-app.pn-app-shell > .pn-bottom-nav-reference {
        height: calc(64px + var(--pn-safe-bottom)) !important;
        min-height: calc(64px + var(--pn-safe-bottom)) !important;
        flex-basis: calc(64px + var(--pn-safe-bottom)) !important;
        padding-top: 4px !important;
        padding-bottom: max(4px, var(--pn-safe-bottom)) !important;
    }
}

/* v2.20.275 — phone/tablet portrait gate, above app sheets and launch splash. */
html.pn-portrait-blocked, html.pn-portrait-blocked body { overflow:hidden!important; overscroll-behavior:none!important; }
html.pn-portrait-blocked body > :not(#pn-portrait-guard),
html.pn-portrait-blocked body > :not(#pn-portrait-guard) * { visibility:hidden!important; pointer-events:none!important; }
#pn-portrait-guard[hidden] { display:none!important; }
#pn-portrait-guard:not([hidden]) { position:fixed!important; inset:0!important; z-index:2147483647!important; display:grid!important; place-items:center!important; box-sizing:border-box; width:100%; height:100%; min-height:100dvh; overflow:auto; padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background:linear-gradient(130deg,#eef7ff,#f3efff 65%,#fff1f6); color:#243250; text-align:center; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; outline:none; }
#pn-portrait-guard .pn-portrait-card { max-width:460px; margin:auto; }
#pn-portrait-guard svg { display:block; width:76px; height:76px; margin:0 auto 10px; color:#7162c7; }
#pn-portrait-guard span { font-size:11px; letter-spacing:3px; font-weight:800; color:#6a6e94; }
#pn-portrait-guard h1 { margin:12px 0; padding:0; font-size:clamp(23px,4vw,32px); line-height:1.2; color:#243250; }
#pn-portrait-guard p { margin:0; padding:0; font-size:15px; line-height:1.7; color:#58667f; }
@media(max-height:350px) { #pn-portrait-guard svg { width:48px; height:48px; margin-bottom:4px; } #pn-portrait-guard h1 { margin:8px 0; } }