/* =====================================================================
   MOBILE VIEW — phone-only styles
   Everything lives under #mobile-app and only ever renders <=480px.
   Desktop CSS/HTML/JS in style.css / index.html / script.js is untouched.
   ===================================================================== */

#mobile-app{
  display:none; /* hidden by default (desktop) */
}

@media (max-width:480px){

  /* Desktop's body has a fixed 12px/10px padding (style.css) meant to
     frame the sidebar+content shell -- on phones that same padding was
     leaking through, leaving a visible gap around #mobile-app on every
     side where the real screen edge showed through before the app's
     content started. Reset it here, mobile-only, so #mobile-app can
     sit flush edge-to-edge.
     Also override body's display:flex (desktop-only concern, meant to
     lay .desktop-container out) to block: with .desktop-container now
     hidden entirely (see below), a leftover flex row context made
     #mobile-app's margin:0 auto center itself against whatever partial
     free space was left in that flex line instead of true page width --
     on short pages (Cart, Notifications, both near-empty on first visit)
     this visibly pushed the whole app off to the right instead of
     staying centered edge-to-edge like Home. Plain block flow makes
     margin:0 auto behave normally and consistently regardless of the
     active view's content height. */
  body{
    display:block;
    padding:0;
  }

  /* hide the desktop shell completely on phones */
  .desktop-container,
  .sidebar,
  .content-wrapper{
    display:none !important;
  }

  #mobile-app{
    display:block;
    --m-orange:#ff8c00;
    --m-orange-light:#ffcb8a;
    --m-nav-bg: rgba(255,255,255,0.92);
    --m-text-dark:#1a1a1a;
    --m-text-gray:#6b6b6b;
    --m-border-gray:#d9d9d9;

    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:#fff;
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    position:relative;
  }
  #mobile-app *{ box-sizing:border-box; }
  #mobile-app img{ max-width:none; }

  /* no scrollbars anywhere in the mobile shell — phone UI, not a desktop pane */
  #mobile-app,
  #mobile-app *{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  #mobile-app *::-webkit-scrollbar{ display:none; }

  /* ---------- shared: sticky page header (cart / notifications) ---------- */
  #mobile-app .m-page-header{
    position:sticky;
    top:0;
    z-index:30;
    background:#fff;
    padding:22px 20px 14px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  #mobile-app .m-page-title{
    font-size:22px;
    font-weight:500;
    color:var(--m-text-dark);
  }
  #mobile-app .m-page-divider{
    height:1px;
    background:#ececec;
    margin:0 20px;
    position:sticky;
    top:62px;
    z-index:29;
    box-shadow:0 4px 8px -2px rgba(0,0,0,0.06);
  }
  #mobile-app .m-menu-btn{
    background:none;
    border:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  /* ---------- HOME HEADER: brand (left) + expanding search pill (right),
     one sticky row. The pill lives inside this bar as an absolutely
     positioned element pinned to the right edge, so it can grow leftward
     without disturbing the brand row's layout. ---------- */
  #mobile-app .m-header-bar{
    position:sticky;
    top:0;
    z-index:40;
    background:none;
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 16px 14px 16px;
  }
  /* Frosted glass strip behind the header content (logo/pill row) — blurs
     whatever scrolls underneath instead of just letting it tint through,
     while staying opaque enough (--m-nav-bg is already ~92%/85% solid)
     that text/icons on top stay crisp rather than reading muddy. */
  #mobile-app .m-header-bar::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--m-nav-bg);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    z-index:-2;
  }
  #mobile-app .m-brand-row{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    overflow:hidden;
    transition:opacity .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  #mobile-app .m-brand-row:active{
    opacity:0.6;
  }
  #mobile-app .m-brand-row img{
    width:28px;
    height:27px;
    display:block;
    flex-shrink:0;
  }
  #mobile-app .m-brand-name{
    font-family:"Outfit", -apple-system, sans-serif;
    font-size:18px;
    font-weight:600;
    color:var(--m-text-dark);
    white-space:nowrap;
  }
  #mobile-app .m-header-bar.m-search-expanded .m-brand-row{
    opacity:0;
    pointer-events:none;
  }

  /* ---------- expanding search pill (ChatGPT-style: neutral grey pill,
     circular icon buttons, grows leftward from the right edge) ----------
     Base state (Studio not yet activated) shows only the menu button, so
     the pill is sized as a plain circle (46px). Once Studio is activated
     the "+" upload button joins it and .m-pill-has-upload widens it back
     out into a pill shape to fit both. */
  #mobile-app .m-header-pill{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    width:46px;
    height:46px;
    background:var(--m-nav-bg);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 30px rgba(0,0,0,0.10);
    border-radius:999px;
    padding:0 5px;
    overflow:hidden;
    transition:width .32s cubic-bezier(.4,0,.2,1);
  }
  #mobile-app .m-header-pill.m-pill-has-upload{ width:92px; }
  #mobile-app .m-header-bar.m-search-expanded .m-header-pill{
    width:calc(100% - 36px);
  }
  #mobile-app .m-header-pill .m-icon-btn,
  #mobile-app .m-search-clear-btn,
  #mobile-app #m-pill-upload-btn.m-nav-btn{
    background:none;
    border:none;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    flex-shrink:0;
  }
  /* The upload trigger now lives in this pill (relocated from the bottom
     dock) — it also carries .m-nav-btn for the shared nav click-dispatch,
     but should look like a plain pill icon button here, not a bottom-nav
     item, so its icon size/tint/active-scale are pinned explicitly
     rather than inheriting .m-nav-btn's 29px/orange-active rules. */
  #mobile-app #m-pill-upload-btn.m-nav-btn{
    transform:none;
  }
  #mobile-app #m-pill-upload-btn.m-nav-btn.active{
    transform:none;
  }
  #mobile-app #m-pill-upload-btn .m-nav-icon{
    width:27px;
    height:27px;
    filter:brightness(0) saturate(100%);
  }
  #mobile-app .m-icon-btn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
  }
  #mobile-app .m-header-pill .m-icon-btn:active,
  #mobile-app #m-pill-upload-btn.m-nav-btn:active{
    background:rgba(0,0,0,0.06);
  }
  #mobile-app #m-menu-btn svg{
    width:24px;
    height:24px;
  }
  #mobile-app .m-search-input{
    flex:0;
    width:0;
    min-width:0;
    opacity:0;
    border:none;
    outline:none;
    background:transparent;
    font-size:14px;
    font-family:inherit;
    color:var(--m-text-dark);
    padding:0;
    transition:opacity .2s ease .08s;
  }
  #mobile-app .m-header-bar.m-search-expanded .m-search-input{
    flex:1;
    width:auto;
    opacity:1;
    padding:0 2px;
  }
  #mobile-app .m-search-input::placeholder{
    color:#9a9a9a;
  }
  #mobile-app .m-search-clear-btn{
    display:none;
  }
  #mobile-app .m-header-bar.m-search-expanded .m-search-clear-btn.m-search-clear-visible{
    display:flex;
  }
  #mobile-app .m-header-bar.m-search-expanded #m-menu-btn{
    display:none;
  }
  #mobile-app .m-header-bar.m-search-expanded #m-pill-upload-btn{
    display:none;
  }

  #mobile-app .m-hero{
    margin:0 14px;
    border-radius:24px;
    overflow:hidden;
    position:relative;
    height:150px;
    background:#1c1c1c;
  }
  /* Leaves room under the last card and the loading spinner so neither
     hides behind the floating tab bar. */
  #mobile-app #m-view-home{
    padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px));
  }
  #mobile-app .m-product-list{
    padding:18px 4px 24px 4px;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  #mobile-app .m-product-card{
    display:flex;
    flex-direction:column;
    cursor:pointer;
    padding-bottom:22px;
    margin-bottom:22px;
    border-bottom:1px solid var(--m-border-gray);
  }
  #mobile-app .m-product-card:last-child{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:none;
  }
  #mobile-app .m-product-media{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    border-radius:16px;
    overflow:hidden;
    background:#e2e2e2;
    margin-bottom:12px;
    touch-action:pan-y;
  }

  /* Skeleton placeholder cards shown only on first paint of a fresh
     feed/search/filter — reuses the same .skeleton-box shimmer as
     desktop (Style.css, already loaded globally). */
  #mobile-app .m-product-skeleton{ cursor:default; pointer-events:none; }

  /* The single shared spinner (same design as the splash screen) —
     shown briefly at the bottom of the feed while the next batch of
     products loads, Instagram-style. Sized down and inline instead of
     full-screen. */
  #mobile-app .m-feed-spinner-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 0 32px;
  }
  #mobile-app .m-feed-spinner-svg{
    width:32px;
    height:32px;
  }

  /* Invisible trigger the IntersectionObserver watches — sits right
     after the product list, no visible height of its own. */
  #mobile-app .m-feed-sentinel{
    height:1px;
    width:100%;
  }

  #mobile-app .m-carousel-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-product-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    flex-shrink:0;
  }
  #mobile-app .m-carousel-chevron{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    background:rgba(0,0,0,0.25);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    z-index:2;
  }
  #mobile-app .m-carousel-chevron:active{
    transform:translateY(-50%) scale(0.9);
  }
  #mobile-app .m-carousel-chevron.left{ left:10px; }
  #mobile-app .m-carousel-chevron.right{ right:10px; }
  #mobile-app .m-carousel-chevron svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:#ffffff;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #mobile-app .m-carousel-indicators{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:5px;
    background:rgba(0,0,0,0.15);
    padding:5px 7px;
    border-radius:10px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:2;
  }
  #mobile-app .m-indicator-pill{
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,0.45);
    transition:background .3s ease, width .3s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-indicator-pill.active{
    background:#ffffff;
    width:22px;
  }
  #mobile-app .m-product-details-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding-top:8px;
  }
  #mobile-app .m-product-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    flex:1;
  }
  #mobile-app .m-product-name{
    font-size:17px;
    line-height:1.25;
    color:var(--m-text-dark);
    font-weight:700;
    letter-spacing:-0.2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #mobile-app .m-product-price{
    font-size:15px;
    font-weight:400;
    color:var(--m-text-dark);
    margin-top:2px;
  }
  #mobile-app .m-product-timestamp{
    font-size:12px;
    font-weight:500;
    color:var(--m-text-gray);
    margin-top:2px;
  }
  /* Seller avatar + name as a header row ABOVE the listing photo —
     Instagram-style post header. Sits in normal flow (not over the
     image), so it uses the theme text colors and needs no gradient. */
  #mobile-app .m-product-seller-header{
    display:flex;
    align-items:center;
    padding:0 2px 10px 2px;
  }
  #mobile-app .m-product-seller{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    max-width:100%;
  }
  #mobile-app .m-product-seller-avatar{
    width:28px;
    height:28px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    background:var(--m-border-gray, #e5e5ea);
  }
  #mobile-app .m-product-seller-initial{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    color:var(--m-text-dark);
  }
  #mobile-app .m-product-seller-name{
    font-size:14px;
    font-weight:600;
    color:var(--m-text-dark);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* heart + cart: right side of the same row as the title, just below the photo */
  #mobile-app .m-product-actions{
    display:flex;
    align-items:center;
    gap:14px;
    padding-top:2px;
    flex-shrink:0;
  }
  #mobile-app .m-action-btn{
    width:28px;
    height:28px;
    background:none;
    border:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .1s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-action-btn:active{
    transform:scale(0.85);
  }
  #mobile-app .m-action-btn i{
    font-size:22px;
    color:var(--m-text-dark);
    transition:color .2s ease;
  }
  #mobile-app .m-heart-btn.active i{
    font-weight:900;
    color:var(--m-orange);
  }
  /* same shared icons/cart.svg the bottom nav uses — forced to a plain
     dark tone via filter, same trick as .m-nav-icon, so it always matches
     regardless of the color baked into the source file. Matched to the
     heart icon's visual size (both ~22px). */
  #mobile-app .m-action-icon{
    width:22px;
    height:22px;
    display:block;
    filter:brightness(0) saturate(100%);
  }
  #mobile-app .m-empty-note{
    text-align:center;
    color:var(--m-text-gray);
    padding:60px 20px;
    font-size:14px;
  }

  /* ---------- SEARCH (full-screen view, opened from the bottom nav —
     YouTube Music style: back + input row up top, recent searches with a
     clear-all action below, swapped out for live results once typing) ---------- */
  #mobile-app .m-search-view-header{
    position:sticky;
    top:0;
    z-index:30;
    background:#fff;
    padding:18px 16px 12px 16px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  #mobile-app .m-search-view-back-btn{
    background:none;
    border:none;
    padding:6px;
    margin:-6px 0 -6px -6px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  #mobile-app .m-search-view-input-wrap{
    flex:1;
    display:flex;
    align-items:center;
    gap:8px;
    background:#f2f2f3;
    border-radius:999px;
    height:44px;
    padding:0 14px;
    min-width:0;
  }
  #mobile-app .m-search-view-input-icon{
    width:17px;
    height:17px;
    flex-shrink:0;
    filter:brightness(0) saturate(100%) opacity(0.55);
  }
  #mobile-app .m-search-view-input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    font-size:14px;
    font-family:inherit;
    color:var(--m-text-dark);
    padding:0;
  }
  #mobile-app .m-search-view-input::placeholder{
    color:#9a9a9a;
  }
  #mobile-app .m-search-view-clear-btn{
    background:none;
    border:none;
    padding:4px;
    display:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  #mobile-app .m-search-view-clear-btn.m-search-view-clear-visible{
    display:flex;
  }
  #mobile-app .m-search-view-recent{
    padding:8px 20px 130px 20px;
  }
  #mobile-app .m-search-view-recent-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0 6px 0;
  }
  #mobile-app .m-search-view-recent-title{
    font-size:15px;
    font-weight:500;
    color:var(--m-text-dark);
  }
  #mobile-app .m-search-view-clear-recent-btn{
    background:none;
    border:none;
    padding:0;
    font-size:12.5px;
    font-weight:500;
    color:var(--m-orange);
    cursor:pointer;
  }
  #mobile-app .m-search-view-recent:not(.m-has-recent) .m-search-view-clear-recent-btn{
    display:none;
  }
  #mobile-app .m-search-view-recent-list{
    display:flex;
    flex-direction:column;
  }
  #mobile-app .m-search-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:48px 20px 30px 20px;
    text-align:center;
  }
  #mobile-app .m-search-empty-state-text{
    font-size:14px;
    color:var(--m-text-gray);
  }
  #mobile-app .m-search-view-recent-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    background:none;
    border:none;
    width:100%;
    text-align:left;
    cursor:pointer;
  }
  #mobile-app .m-search-view-recent-item-icon{
    width:16px;
    height:16px;
    flex-shrink:0;
    filter:brightness(0) saturate(100%) opacity(0.45);
  }
  #mobile-app .m-search-view-recent-item-text{
    flex:1;
    min-width:0;
    font-size:14px;
    color:var(--m-text-dark);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mobile-app .m-search-view-recent-item-remove{
    background:none;
    border:none;
    padding:6px;
    margin:-6px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  #mobile-app .m-search-view-results{
    padding:12px 20px 130px 20px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  /* ---------- CART ---------- */
  #mobile-app .m-cart-list{
    padding:12px 20px 130px 20px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  #mobile-app .m-cart-item{
    display:flex;
    gap:14px;
    align-items:center;
  }
  #mobile-app .m-cart-thumb-wrap{
    position:relative;
    width:110px;
    height:96px;
    border-radius:16px;
    overflow:hidden;
    background:#e2e2e2;
    flex-shrink:0;
  }
  #mobile-app .m-cart-thumb{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
  }
  #mobile-app .m-cart-pending-overlay{
    position:absolute;
    bottom:0; left:0; right:0;
    background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color:#fff;
    font-weight:600;
    font-size:12px;
    text-align:right;
    padding:8px 10px 6px;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
  }
  #mobile-app .m-cart-thumb-wrap.m-cart-pending .m-cart-pending-overlay{
    opacity:1;
  }
  #mobile-app .m-cart-check-overlay{
    position:absolute;
    bottom:5px; right:5px;
    width:22px; height:22px;
    background:#12C143;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
    opacity:0;
    transform:scale(0.8);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
  }
  #mobile-app .m-cart-thumb-wrap.m-cart-accepted .m-cart-check-overlay{
    opacity:1;
    transform:scale(1);
  }
  #mobile-app .m-cart-info{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    min-width:0;
  }
  #mobile-app .m-cart-name{
    font-size:15px;
    line-height:1.3;
    color:var(--m-text-dark);
  }
  #mobile-app .m-cart-price-row{
    display:flex;
    align-items:center;
    gap:12px;
  }
  #mobile-app .m-cart-price{
    font-size:15px;
    font-weight:700;
    color:var(--m-text-dark);
  }
  #mobile-app .m-cart-remove-btn{
    background:none;
    border:none;
    padding:0;
    font-size:13px;
    font-weight:500;
    color:#FF3B30;
    cursor:pointer;
  }
  #mobile-app .m-cart-qty{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #dcdcdc;
    border-radius:999px;
    padding:8px 14px;
    width:fit-content;
  }
  #mobile-app .m-qty-btn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:var(--m-text-dark);
    width:16px;
  }
  #mobile-app .m-qty-value{
    font-size:14px;
    color:var(--m-text-dark);
    min-width:10px;
    text-align:center;
  }
  #mobile-app .m-trash-btn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  /* ---------- CART bottom action area (total + request/checkout) ---------- */
  #mobile-app .m-cart-bottom-area{
    position:fixed;
    left:50%;
    bottom:112px;
    transform:translateX(-50%);
    width:100%;
    max-width:430px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    z-index:60;
    pointer-events:none;
  }
  #mobile-app .m-cart-bottom-area button,
  #mobile-app .m-cart-bottom-area .m-cart-total-display{
    pointer-events:auto;
  }
  #mobile-app .m-cart-total-display{
    font-size:16px;
    font-weight:500;
    color:var(--m-text-dark);
    opacity:0;
    transition:opacity .3s ease;
    display:flex;
    gap:8px;
    background:var(--m-nav-bg);
    backdrop-filter:blur(10px);
    padding:8px 18px;
    border-radius:999px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
  }
  #mobile-app .m-cart-total-display.m-cart-total-visible{
    opacity:1;
  }
  #mobile-app .m-cart-total-display span{
    font-weight:700;
  }
  #mobile-app .m-cart-primary-btn{
    background:var(--m-orange);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:14px 32px;
    font-size:16px;
    font-weight:600;
    width:190px;
    cursor:pointer;
    transition:background .25s ease, opacity .25s ease;
  }
  #mobile-app .m-cart-primary-btn.m-cart-btn-disabled{
    background:#AFAFAF;
    pointer-events:none;
  }

  /* ---------- BOTTOM NAV ---------- */
  #mobile-app .m-bottom-nav-wrap{
    position:fixed;
    bottom:18px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    z-index:80;
  }
  #mobile-app .m-bottom-nav{
    width:calc(100% - 16px);
    max-width:412px;
    background:var(--m-nav-bg);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:999px;
    display:flex;
    align-items:center;
    padding:17px 10px;
    box-shadow:0 8px 30px rgba(0,0,0,0.10);
    position:relative;
  }
  /* iOS-style "liquid glass" indicator: one absolutely-positioned pill
     that slides/resizes to sit behind whichever tab is active, rather
     than 5 separately-animated highlight states. JS (moveNavIndicator)
     sets --nav-ind-x / --nav-ind-w to the active button's own offset/width
     so this always lines up exactly, even though every slot is equal
     width via flex:1 below. */
  #mobile-app .m-nav-indicator{
    position:absolute;
    top:7px;
    bottom:7px;
    left:0;
    width:var(--nav-ind-w, 58px);
    transform:translateX(var(--nav-ind-x, 0px));
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.4),
      inset 0 -1px 2px rgba(0,0,0,0.04),
      0 2px 10px rgba(0,0,0,0.06);
    backdrop-filter:blur(6px) saturate(160%);
    -webkit-backdrop-filter:blur(6px) saturate(160%);
    border:1px solid rgba(255,255,255,0.2);
    pointer-events:none;
    z-index:0;
    transition:transform .38s cubic-bezier(.34,1.2,.4,1), width .38s cubic-bezier(.34,1.2,.4,1);
  }
  #mobile-app .m-nav-indicator.m-nav-indicator-ready{
    opacity:1;
  }
  #mobile-app .m-nav-indicator{
    opacity:0; /* hidden until JS has measured a real position, avoids a flash at 0/58px on first paint */
  }
  #mobile-app .m-nav-btn{
    background:none;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    flex:1;
    position:relative;
    z-index:1;
    transition:transform .18s ease;
  }
  #mobile-app .m-nav-btn.active{
    transform:scale(1.06);
  }
  /* plain <img> tags, same files desktop uses — colored via a CSS filter
     computed to force true black (inactive) or the exact brand orange
     (active), regardless of whatever color is baked into the source svg. */
  /* Sized to match .m-nav-icon exactly, mirrors desktop's .nav-icon-wrap
     pattern — gives the unread dot (.noti-dot, shared with desktop CSS)
     a positioned home on the mobile bell without shifting the icon. */
  #mobile-app .m-nav-icon-wrap{
    position:relative;
    display:inline-flex;
    width:29px;
    height:29px;
    flex-shrink:0;
  }
  /* unread-notification dot, sized up slightly from its previous 6px so
     it reads clearly at the bottom-nav's icon scale */
  #mobile-app .m-nav-icon-wrap .noti-dot{
    position:absolute;
    top:-1px;
    right:-1px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ff3b30;
    box-shadow:0 0 0 2px var(--m-nav-bg);
  }
  #mobile-app .m-nav-btn .m-nav-icon{
    width:29px;
    height:29px;
    display:block;
    filter:brightness(0) saturate(100%);
  }
  /* the search icon's own artwork reads visually larger than the other
     nav icons at the same 29px box, so it's nudged down slightly to
     match — box size stays otherwise identical to keep tap targets equal */
  #mobile-app .m-nav-btn #m-nav-search-icon{
    width:26px;
    height:26px;
  }
  #mobile-app .m-nav-btn.active .m-nav-icon{
    filter:invert(49%) sepia(93%) saturate(531%) hue-rotate(356deg) brightness(98%) contrast(163%);
  }
  #mobile-app .m-nav-btn i.fa-solid{
    font-size:22px;
    color:#1a1a1a;
  }
  #mobile-app .m-nav-btn.active i.fa-solid{
    color:var(--m-orange);
  }
  #mobile-app .m-nav-icon-bg{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-nav-avatar{
    width:29px;
    height:29px;
    border-radius:50%;
    background:#ccc;
    object-fit:cover;
    display:block;
    box-shadow:0 0 0 2px transparent;
    transition:box-shadow .18s ease;
  }
  #mobile-app .m-nav-btn.active .m-nav-avatar{
    box-shadow:0 0 0 2px var(--m-orange);
  }

  /* individual mobile "screens" — one visible at a time, toggled by mobile.js.
     display is set inline by JS (so the transition below can actually run),
     this class just controls the animated opacity/position state. */
  #mobile-app .m-view{
    opacity:0;
    transition:opacity .14s ease;
  }
  #mobile-app .m-view.m-view-active{
    opacity:1;
  }

  /* ---------- PRODUCT VIEW (design: details.html, real product/seller data) ---------- */
  #mobile-app .m-product-view{
    position:fixed;
    inset:0;
    z-index:200;
    background:#ffffff;
    overflow-y:auto;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    font-family:"Outfit", -apple-system, sans-serif;
    overscroll-behavior:none;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .22s ease, transform .22s ease;
  }
  #mobile-app .m-product-view.m-pd-shown{
    opacity:1;
    transform:translateY(0);
  }
  #mobile-app .m-product-view *{
    font-family:inherit;
  }
  #mobile-app .m-product-view h1,
  #mobile-app .m-product-view h2,
  #mobile-app .m-product-view p{
    margin:0;
    padding:0;
  }

  /* Back button (lives outside the transformed panel — see index.html note) */
  #mobile-app .m-pd-back-btn{
    display:none;
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 20px);
    left:20px;
    z-index:210;
    width:36px;
    height:36px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    color:#111111;
    cursor:pointer;
    transition:transform .2s ease;
  }
  #mobile-app .m-pd-back-btn.m-pd-back-visible{
    display:flex;
  }
  #mobile-app .m-pd-back-btn:active{
    transform:scale(1.05);
  }

  /* Image carousel */
  #mobile-app .m-pd-hero{
    position:relative;
    width:100%;
    height:375px;
    flex-shrink:0;
    background:#eef1f5;
    overflow:hidden;
    cursor:pointer;
    touch-action:pan-y;
  }
  #mobile-app .m-pd-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-pd-slide{
    width:100%;
    height:100%;
    flex-shrink:0;
    object-fit:cover;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
  }
  #mobile-app .m-pd-dots{
    position:absolute;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:10;
  }
  #mobile-app .m-pd-dots .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    transition:background .3s ease, width .3s ease;
  }
  #mobile-app .m-pd-dots .dot.active{
    background:#ffffff;
    width:18px;
    border-radius:3px;
  }

  /* Details content */
  #mobile-app .m-pd-body{
    padding:24px 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
    display:flex;
    flex-direction:column;
    flex:1;
    background:#ffffff;
    position:relative;
  }
  #mobile-app .m-pd-header{
    display:block;
    margin-bottom:10px;
  }
  /* seller badge is pinned top-right so it no longer stretches the row and
     pushes "Condition" far below the price */
  #mobile-app .m-pd-title-price{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding-right:108px;
  }
  #mobile-app .m-pd-name{
    font-size:24px;
    font-weight:700;
    color:#111111;
    line-height:1.15;
    letter-spacing:-0.5px;
    overflow-wrap:break-word;
    position:relative;
  }
  /* 2-line cap + fade is applied in JS (see clampPdTitle in mobile.js) */
  #mobile-app .m-pd-name.m-pd-name-clamped::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:46%;
    height:1.15em;
    background:linear-gradient(to right, transparent, #fff 70%);
    pointer-events:none;
  }
  #mobile-app .m-pd-price{
    font-size:17px;
    font-weight:600;
    color:#111111;
    margin-top:2px;
  }

  /* Seller badge */
  #mobile-app .m-pd-seller{
    position:absolute;
    top:24px;
    right:20px;
    width:92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    cursor:pointer;
  }
  #mobile-app .m-pd-seller-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #e0e0e0;
    background:#f4f4f4;
  }
  #mobile-app .m-pd-seller-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
  }
  #mobile-app .m-pd-seller-name{
    font-size:13px;
    font-weight:600;
    color:#222222;
    text-align:center;
    max-width:92px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mobile-app .m-pd-seller-handle{
    font-size:11px;
    color:#777777;
    max-width:92px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Distance to the seller — only rendered when the buyer opted into precise
     location AND this seller has one on file (getSellerDistanceLabel). */
  #mobile-app .m-pd-seller-distance{
    margin-top:2px;
    font-size:11px;
    font-weight:600;
    color:#777777;
    background:rgba(142,142,147,0.14);
    padding:3px 8px;
    border-radius:999px;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #mobile-app .m-pd-seller-distance i{
    margin-right:3px;
    font-size:10px;
  }

  /* Section headings / text */
  #mobile-app .m-pd-section-heading{
    font-size:15px;
    font-weight:700;
    color:#111111;
    margin-bottom:2px;
  }
  #mobile-app .m-pd-condition-text{
    font-size:14px;
    font-weight:500;
    color:#333333;
    margin-bottom:22px;
  }
  #mobile-app .m-pd-desc{
    font-size:13.5px;
    color:#555555;
    line-height:1.45;
    margin-bottom:16px;
    white-space:pre-wrap;
  }

  /* Bottom order request action bar */
  #mobile-app .m-pd-actions-wrap{
    margin-top:auto;
    padding-top:10px;
    display:flex;
    justify-content:center;
    width:100%;
  }
  #mobile-app .m-pd-order-btn{
    width:100%;
    max-width:250px;
    height:52px;
    background:#ffffff;
    border:1.5px solid #222222;
    border-radius:32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6px 0 22px;
    cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,0.06);
    transition:background-color .2s ease, transform .15s ease;
  }
  #mobile-app .m-pd-order-btn:active{
    background-color:#fafafa;
    transform:translateY(-1px);
  }
  #mobile-app .m-pd-order-text{
    font-size:16px;
    font-weight:600;
    color:#111111;
    letter-spacing:-0.2px;
  }
  #mobile-app .m-pd-order-capsule{
    width:62px;
    height:38px;
    background:#ffffff;
    border:1px solid #e0e0e0;
    border-radius:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff5722;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
    transition:transform .2s ease;
  }
  #mobile-app .m-pd-order-btn:active .m-pd-order-capsule{
    transform:translateX(2px);
  }
  #mobile-app .m-pd-order-btn:disabled{
    border-color:rgba(0,0,0,0.12);
    background:#ececec;
    box-shadow:none;
    cursor:not-allowed;
  }
  #mobile-app .m-pd-order-btn:disabled .m-pd-order-text{ color:#a1a1a6; }
  #mobile-app .m-pd-order-btn:disabled .m-pd-order-capsule{ color:#a1a1a6; box-shadow:none; }
  #mobile-app .m-pd-order-btn:disabled:active{ transform:none; background:#ececec; }

  /* Seller-own-listing read-only stats (shown instead of the button) */
  #mobile-app .m-pd-owner-stats{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:auto;
    padding-top:10px;
  }
  #mobile-app .m-pd-owner-stat-box{
    width:100%;
    border-radius:999px;
    padding:16px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
  }
  #mobile-app .m-pd-owner-stat-box.outline{
    border:1.5px solid #222222;
    background:#fff;
  }
  #mobile-app .m-pd-owner-stat-box.filled{
    background:#4a4a4a;
  }
  #mobile-app .m-pd-owner-stat-label{
    font-size:15px;
    font-weight:500;
    color:#111111;
  }
  #mobile-app .m-pd-owner-stat-box.filled .m-pd-owner-stat-label{ color:#fff; }
  #mobile-app .m-pd-owner-stat-value{
    font-size:22px;
    font-weight:700;
    color:#111111;
  }
  #mobile-app .m-pd-owner-stat-box.filled .m-pd-owner-stat-value{ color:#fff; }

  /* ---------- SELLER SHOP — same slide-in overlay pattern as
     .m-product-view (back button outside the transformed panel; see the
     note on .m-pd-back-btn above for why). Banner/avatar/stats/follow
     layout follows the same channel-page convention as YouTube/TikTok
     profile screens, built from the same m- design tokens as the rest
     of the mobile shell. ---------- */
  #mobile-app .m-shop-view{
    position:fixed;
    inset:0;
    z-index:220;
    background:#fff;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    padding-bottom:60px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .22s ease, transform .22s ease;
    display:none;
  }
  #mobile-app .m-shop-view.m-shop-shown{
    opacity:1;
    transform:translateY(0);
  }
  /* Loading state while goToSellerMarketplace()'s real Supabase round
     trips (follower count, follow status, popular-order tally) are
     still in flight — a soft pulse on the header/grid areas rather than
     a blank flash of unfilled DOM. Cleared the moment the mirror runs
     with real data. */
  #mobile-app .m-shop-view.m-shop-loading .m-shop-avatar,
  #mobile-app .m-shop-view.m-shop-loading .m-shop-banner,
  #mobile-app .m-shop-view.m-shop-loading .m-shop-products-grid{
    animation:m-shop-pulse 1.1s ease-in-out infinite;
  }
  @keyframes m-shop-pulse{
    0%, 100% { opacity:1; }
    50% { opacity:.5; }
  }
  #mobile-app .m-shop-back-btn{
    display:none;
    position:fixed;
    top:56px;
    left:20px;
    z-index:230;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    background:#fff;
    border:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    cursor:pointer;
  }
  #mobile-app .m-shop-back-btn.m-shop-back-visible{
    display:flex;
  }
  #mobile-app .m-shop-banner{
    width:100%;
    height:120px;
    background:linear-gradient(135deg, #8e8e93, #a1a1a6);
    background-size:cover;
    background-position:center;
  }
  #mobile-app .m-shop-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding:0 18px;
    margin-top:-40px;
  }
  #mobile-app .m-shop-avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    object-fit:cover;
    background:#ccc;
    border:3px solid #fff;
  }
  #mobile-app .m-shop-actions{
    display:flex;
    align-items:center;
    gap:8px;
    padding-bottom:10px;
  }
  #mobile-app .m-shop-follow-btn{
    border:none;
    border-radius:999px;
    background:var(--m-orange);
    color:#fff;
    font-size:14px;
    font-weight:700;
    padding:9px 20px;
    cursor:pointer;
  }
  #mobile-app .m-shop-follow-btn.is-following{
    background:#e8e8e8;
    color:var(--m-text-dark);
  }
  #mobile-app .m-shop-more-wrap{
    position:relative;
  }
  #mobile-app .m-shop-more-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1.5px solid var(--m-border-gray);
    background:#fff;
    color:var(--m-text-dark);
    cursor:pointer;
  }
  #mobile-app .m-shop-more-menu{
    display:none;
    position:absolute;
    right:0;
    top:42px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    overflow:hidden;
    z-index:10;
    min-width:150px;
  }
  #mobile-app .m-shop-more-menu.active{
    display:block;
  }
  #mobile-app .m-shop-more-menu button{
    display:block;
    width:100%;
    text-align:left;
    padding:12px 16px;
    border:none;
    background:none;
    font-size:14px;
    color:var(--m-text-dark);
    cursor:pointer;
  }
  #mobile-app .m-shop-more-menu button:active{
    background:rgba(0,0,0,0.04);
  }
  #mobile-app .m-shop-identity{
    padding:14px 18px 0 18px;
  }
  #mobile-app .m-shop-identity h2{
    font-size:19px;
    font-weight:700;
    color:var(--m-text-dark);
    margin:0;
  }
  #mobile-app .m-shop-handle{
    font-size:14px;
    color:var(--m-text-gray);
    margin:2px 0 0 0;
  }
  #mobile-app .m-shop-stats{
    padding:10px 18px 0 18px;
    font-size:13px;
    color:var(--m-text-gray);
  }
  #mobile-app .m-shop-stats strong{
    color:var(--m-text-dark);
  }
  #mobile-app .m-shop-dot{
    margin:0 6px;
  }
  #mobile-app .m-shop-bio{
    padding:10px 18px 0 18px;
    font-size:14px;
    line-height:1.45;
    color:var(--m-text-dark);
    margin:0;
  }
  #mobile-app .m-shop-products-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:20px 18px 0 18px;
  }
  #mobile-app .m-shop-product-card{
    cursor:pointer;
  }
  #mobile-app .m-shop-product-img{
    width:100%;
    aspect-ratio:1/1;
    border-radius:14px;
    object-fit:cover;
    background:#e2e2e2;
    margin-bottom:8px;
  }
  #mobile-app .m-shop-product-price{
    font-size:14px;
    font-weight:700;
    color:var(--m-text-dark);
  }
  #mobile-app .m-shop-product-name{
    font-size:13px;
    color:var(--m-text-gray);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.dark-theme #mobile-app .m-shop-view{ background:#121212; }
  body.dark-theme #mobile-app .m-shop-back-btn{ background:#1e1e20; }
  body.dark-theme #mobile-app .m-shop-back-btn svg path{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-shop-avatar{ border-color:#121212; }
  body.dark-theme #mobile-app .m-shop-identity h2,
  body.dark-theme #mobile-app .m-shop-bio,
  body.dark-theme #mobile-app .m-shop-stats strong{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-shop-more-menu{ background:#1e1e1e; }
  body.dark-theme #mobile-app .m-shop-more-menu button{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-shop-follow-btn.is-following{ background:#2c2c2e; color:#f0f0f0; }
  body.dark-theme #mobile-app .m-shop-more-btn{ background:#1e1e1e; border-color:#3a3a3c; color:#f0f0f0; }

  /* ---------- ORDER SUMMARY / PAYMENT / OTP shared "sub-screen" chrome
     (fixed full-panel overlay above the cart, same structural pattern as
     .m-product-view: back button lives outside the transformed panel so
     position:fixed on it isn't broken by the panel's own transform). ---------- */
  #mobile-app .m-ord-view,
  #mobile-app .m-pay-view,
  #mobile-app .m-otp-view{
    position:fixed;
    inset:0;
    z-index:200;
    background:#FAFAFA;
    overflow-y:auto;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    padding:110px 0 60px 0;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .22s ease, transform .22s ease;
    display:none;
  }
  #mobile-app .m-ord-view.m-ord-shown,
  #mobile-app .m-pay-view.m-pay-shown,
  #mobile-app .m-otp-view.m-otp-shown{
    opacity:1;
    transform:translateY(0);
  }
  #mobile-app .m-ord-back-btn,
  #mobile-app .m-pay-back-btn,
  #mobile-app .m-otp-back-btn{
    display:none;
    position:fixed;
    top:56px;
    left:20px;
    z-index:210;
    width:38px;
    height:38px;
    padding:0;
    border-radius:50%;
    background:#fff;
    border:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    cursor:pointer;
  }
  #mobile-app .m-ord-back-btn.m-ord-back-visible,
  #mobile-app .m-pay-back-btn.m-pay-back-visible,
  #mobile-app .m-otp-back-btn.m-otp-back-visible{
    display:flex;
  }

  /* ---------- ORDER SUMMARY ---------- */
  #mobile-app .m-ord-summary-card{
    background:#fff;
    margin:0 20px;
    padding:12px;
    border-radius:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.03);
    display:flex;
    gap:16px;
    align-items:center;
  }
  #mobile-app .m-ord-summary-img{
    width:100px;
    height:75px;
    border-radius:12px;
    object-fit:cover;
    background:#e2e2e2;
    flex-shrink:0;
  }
  #mobile-app .m-ord-summary-text h3{
    margin:0 0 4px;
    font-size:16px;
    font-weight:500;
    color:var(--m-text-dark);
    line-height:1.3;
  }
  #mobile-app .m-ord-summary-text p{
    margin:0;
    font-size:16px;
    font-weight:600;
    color:var(--m-text-dark);
  }
  #mobile-app .m-ord-section-title{
    margin:30px 20px 10px;
    font-size:15px;
    font-weight:600;
    color:var(--m-text-dark);
    text-decoration:underline;
    text-underline-offset:4px;
  }
  #mobile-app .m-ord-location-header{
    margin:20px 20px 10px;
    font-size:15px;
    color:var(--m-text-dark);
    display:flex;
    align-items:center;
    gap:6px;
  }
  #mobile-app .m-ord-location-card{
    background:#fff;
    margin:0 20px;
    padding:16px;
    border-radius:16px;
    box-shadow:0 2px 10px rgba(0,0,0,0.03);
  }
  #mobile-app .m-ord-location-label{
    font-size:13px;
    color:var(--m-text-gray);
    margin-bottom:4px;
  }
  #mobile-app .m-ord-location-value{
    font-size:15px;
    font-weight:500;
    color:var(--m-text-dark);
  }
  #mobile-app .m-ord-bottom-btn-container{
    display:flex;
    justify-content:center;
    margin-top:60px;
  }
  #mobile-app .m-ord-pay-btn{
    background:var(--m-orange);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:14px 0;
    width:180px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
  }

  /* ---------- PAYMENT SELECTION ---------- */
  #mobile-app .m-pay-title{
    font-size:20px;
    font-weight:500;
    text-align:center;
    margin-bottom:24px;
    color:var(--m-text-dark);
  }
  #mobile-app .m-pay-accordion{
    padding:0 20px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  #mobile-app .m-pay-card{
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
    overflow:hidden;
    transition:all .3s ease;
  }
  #mobile-app .m-pay-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
  }
  #mobile-app .m-pay-mpesa-text{ color:#12C143; }
  #mobile-app .m-pay-airtel-text{ color:#FF0000; }
  #mobile-app .m-pay-chevron{ transition:transform .3s ease; }
  #mobile-app .m-pay-card-content{
    max-height:0;
    opacity:0;
    transition:all .3s ease;
  }
  #mobile-app .m-pay-card.active .m-pay-card-content{
    max-height:200px;
    opacity:1;
    margin-top:20px;
  }
  #mobile-app .m-pay-card.active .m-pay-chevron{
    transform:rotate(180deg);
  }
  #mobile-app .m-pay-input-label{
    font-size:13px;
    color:var(--m-text-gray);
    margin-bottom:8px;
    font-weight:500;
  }
  #mobile-app .m-pay-phone-input{
    width:100%;
    box-sizing:border-box;
    padding:16px;
    border:1px solid #C7C7CC;
    border-radius:12px;
    font-size:16px;
    outline:none;
    margin-bottom:12px;
    font-family:inherit;
    color:var(--m-text-dark);
    background:#fff;
  }
  #mobile-app .m-pay-helper-text{
    font-size:12px;
    color:var(--m-text-dark);
    line-height:1.4;
  }
  #mobile-app .m-pay-bottom-btn-container{
    display:flex;
    justify-content:center;
    margin-top:40px;
    padding:0 20px;
  }
  #mobile-app .m-pay-confirm-btn{
    background:var(--m-orange);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:14px 0;
    width:100%;
    max-width:280px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
  }

  /* ---------- OTP VERIFY ---------- */
  #mobile-app .m-otp-success-container{
    text-align:center;
    margin-top:0;
  }
  #mobile-app .m-otp-success-title{
    font-size:18px;
    font-weight:500;
    color:var(--m-text-dark);
    margin-bottom:24px;
  }
  #mobile-app .m-otp-success-circle{
    width:120px;
    height:120px;
    border:4px solid var(--m-orange);
    border-radius:50%;
    margin:0 auto 30px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-otp-instruction-text{
    font-size:15px;
    font-weight:500;
    color:var(--m-text-dark);
    max-width:280px;
    margin:0 auto 40px;
    line-height:1.4;
  }
  #mobile-app .m-otp-container{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-bottom:50px;
  }
  #mobile-app .m-otp-input{
    width:45px;
    height:50px;
    border:1.5px solid var(--m-text-dark);
    border-radius:12px;
    text-align:center;
    font-size:24px;
    font-weight:600;
    background:transparent;
    outline:none;
    color:var(--m-text-dark);
    font-family:inherit;
  }
  #mobile-app .m-otp-input:focus{
    border-color:var(--m-orange);
  }
  #mobile-app .m-otp-verify-btn{
    display:block;
    margin:0 auto;
    color:#A0A0A0;
    font-size:18px;
    font-weight:500;
    width:160px;
    padding:14px 0;
    border:2px solid transparent;
    border-radius:30px;
    background-image:linear-gradient(#FAFAFA, #FAFAFA), linear-gradient(to right, #FF3B30, #FF9500);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    cursor:pointer;
    outline:none;
    transition:color .3s ease;
  }
  #mobile-app .m-otp-verify-btn.m-otp-ready{
    color:var(--m-orange);
    font-weight:600;
  }

  /* ---------- FILTER SHEET (real category/condition/price data) ---------- */
  #mobile-app .m-menu-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.3);
    z-index:220;
    display:none;
  }
  #mobile-app .m-menu-backdrop.m-menu-open{
    display:block;
  }
  #mobile-app .m-menu-modal{
    position:fixed;
    top:56px;
    right:16px;
    width:220px;
    max-width:calc(100% - 32px);
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,0.16);
    z-index:230;
    padding:8px;
    opacity:0;
    transform:translateY(-8px) scale(0.97);
    transform-origin:top right;
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  #mobile-app .m-menu-modal.m-menu-open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  #mobile-app .m-menu-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    background:none;
    border:none;
    padding:12px 10px;
    font-size:14px;
    font-weight:500;
    color:var(--m-text-dark);
    border-radius:10px;
    cursor:pointer;
    text-align:left;
  }
  #mobile-app .m-menu-item:active{
    background:#f2f2f2;
  }
  #mobile-app .m-menu-item.m-menu-item-active{
    color:var(--m-orange);
  }
  #mobile-app .m-menu-item.m-menu-item-active .m-menu-item-icon{
    color:var(--m-orange);
  }
  #mobile-app .m-menu-item-icon{
    width:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--m-text-dark);
    font-size:14px;
  }
  #mobile-app .m-menu-item-label{
    flex:1;
  }
  #mobile-app .m-menu-cat-chevron{
    transition:transform .2s ease;
    flex-shrink:0;
  }
  #mobile-app .m-menu-cat-toggle.m-menu-cat-expanded .m-menu-cat-chevron{
    transform:rotate(180deg);
  }
  /* dropdown reveal for the category option list, directly under the
     Categories row inside the same modal panel */
  #mobile-app .m-menu-cat-dropdown{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .22s ease, opacity .18s ease;
  }
  #mobile-app .m-menu-cat-dropdown.m-menu-cat-dropdown-open{
    max-height:240px;
    opacity:1;
    overflow-y:auto;
  }
  #mobile-app .m-menu-cat-option{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:10px 10px 10px 36px;
    font-size:13.5px;
    color:var(--m-text-gray);
    border-radius:8px;
    cursor:pointer;
  }
  #mobile-app .m-menu-cat-option:active{
    background:#f2f2f2;
  }
  #mobile-app .m-menu-cat-option.active{
    color:var(--m-orange);
    font-weight:600;
  }
}

/* =====================================================================
   MOBILE UPLOAD FLOW ("+" nav button)
   A phone-native multi-step flow (source -> form -> preview -> publish)
   skinned to match the rest of #mobile-app. Under the hood it drives the
   real desktop listing wizard (#listing-sheet-overlay in index.html /
   script.js) -- same Supabase inserts, same photo upload, same validation
   -- mobile.js just fills its hidden fields and reads its real result.
   ===================================================================== */
@media (max-width:480px){

  #mobile-app .m-upload-overlay{
    position:fixed;
    inset:0;
    z-index:300;
    background:transparent;
    display:none;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
  }
  #mobile-app .m-upload-overlay.m-up-open{
    display:block;
  }

  #mobile-app .m-up-screen{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    background:#fff;
    padding-bottom:24px;
  }
  #mobile-app .m-up-screen.active{ display:flex; }

  #mobile-app .m-up-nav-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    height:52px;
    padding-top:14px;
    font-size:16px;
    font-weight:600;
    color:var(--m-text-dark);
    position:relative;
    flex-shrink:0;
  }
  #mobile-app .m-up-nav-back{
    position:absolute;
    left:16px;
    top:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#f5f5f5;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  /* ---------- source picker modal (tap outside to dismiss, no X) ----------
     Apple-style sheet: backdrop fades in, sheet slides up from off-screen.
     Stays in the DOM/display:flex once opened so the transition can run;
     mobile.js toggles the .m-up-source-visible class on open/close. */
  #mobile-app #m-up-screen-source{
    justify-content:flex-end;
    background:transparent;
    padding-bottom:0;
    pointer-events:none;
  }
  #mobile-app .m-up-source-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.4);
    opacity:0;
    pointer-events:none;
    transition:opacity .32s cubic-bezier(.4,0,.2,1);
  }
  #mobile-app #m-up-screen-source.m-up-source-visible .m-up-source-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  #mobile-app .m-up-source-sheet{
    position:relative;
    background:#fff;
    border-radius:24px 24px 0 0;
    padding:14px 20px 30px 20px;
    display:flex;
    flex-direction:column;
    pointer-events:none;
    transform:translateY(100%);
    transition:transform .38s cubic-bezier(.32,.72,0,1);
  }
  #mobile-app #m-up-screen-source.m-up-source-visible .m-up-source-sheet{
    transform:translateY(0);
    pointer-events:auto;
  }
  #mobile-app .m-up-source-handle{
    width:40px;
    height:4px;
    border-radius:999px;
    background:#e2e2e4;
    margin:4px auto 18px auto;
  }
  #mobile-app .m-up-source-option{
    width:100%;
    border:none;
    background:none;
    padding:14px 4px;
    display:flex;
    align-items:center;
    gap:16px;
    font-size:16px;
    font-weight:500;
    color:var(--m-text-dark);
    font-family:inherit;
    text-align:left;
    cursor:pointer;
  }
  #mobile-app .m-up-source-icon{
    width:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:var(--m-text-dark);
    flex-shrink:0;
  }

  /* ---------- form ---------- */
  #mobile-app .m-up-form-body{
    flex:1;
    overflow-y:auto;
    padding:8px 20px 20px 20px;
    display:flex;
    flex-direction:column;
  }
  #mobile-app .m-up-photo-row{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:10px;
    margin:8px 0 20px 0;
    -webkit-overflow-scrolling:touch;
  }
  #mobile-app .m-up-photo-add{
    width:84px;
    height:84px;
    border-radius:16px;
    border:1.5px dashed rgba(0,0,0,0.25);
    background:rgba(0,0,0,0.02);
    color:#a3a3a3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:11px;
    cursor:pointer;
    flex-shrink:0;
  }
  #mobile-app .m-up-photo-add i{ font-size:20px; }
  #mobile-app .m-up-photo-thumb{
    width:84px;
    height:84px;
    border-radius:16px;
    position:relative;
    flex-shrink:0;
    overflow:hidden;
  }
  #mobile-app .m-up-photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  #mobile-app .m-up-photo-remove{
    position:absolute;
    top:4px;
    right:4px;
    width:20px;
    height:20px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-up-photo-crop{
    position:absolute;
    bottom:4px;
    left:4px;
    width:22px;
    height:22px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-up-field{ margin-bottom:14px; }
  #mobile-app .m-up-field label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--m-text-gray);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.3px;
  }
  #mobile-app .m-up-field input,
  #mobile-app .m-up-field select,
  #mobile-app .m-up-field textarea{
    width:100%;
    background:#f2f2f4;
    border:none;
    border-radius:12px;
    padding:13px 14px;
    font-size:15px;
    font-family:inherit;
    color:var(--m-text-dark);
    outline:none;
  }
  #mobile-app .m-up-field textarea{ resize:none; min-height:80px; line-height:1.45; }
  #mobile-app .m-up-textarea-wrap{ position:relative; }
  #mobile-app .m-up-textarea-wrap textarea{ padding-bottom:26px; overflow:hidden; }
  #mobile-app .m-up-char-count{
    position:absolute;
    right:12px;
    bottom:9px;
    font-size:11px;
    color:#9a9a9e;
    pointer-events:none;
  }
  #mobile-app .m-up-char-count.limit-near{ color:#e0392b; }
  #mobile-app .m-up-field-row{ display:flex; gap:12px; }
  #mobile-app .m-up-field-row .m-up-field{ flex:1; }
  #mobile-app .m-up-stepper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#f2f2f4;
    border-radius:12px;
    padding:10px 14px;
  }
  #mobile-app .m-up-stepper button{
    background:none;
    border:none;
    font-size:17px;
    color:var(--m-text-dark);
    cursor:pointer;
    width:20px;
  }
  #mobile-app .m-up-condition-toggle{ display:flex; gap:10px; }
  #mobile-app .m-up-condition-opt{
    flex:1;
    border:1.5px solid #dcdcdc;
    background:#fff;
    border-radius:999px;
    padding:10px;
    font-size:14px;
    font-weight:500;
    color:var(--m-text-dark);
    cursor:pointer;
  }
  #mobile-app .m-up-condition-opt.active{
    border-color:var(--m-orange);
    color:var(--m-orange);
    font-weight:600;
  }
  #mobile-app .m-up-bottom-cta{ margin-top:auto; padding-top:10px; }
  #mobile-app .m-up-primary-btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    color:#fff;
    background:#d9c2a3;
    font-family:inherit;
    cursor:not-allowed;
    transition:background .2s ease;
  }
  #mobile-app .m-up-primary-btn.enabled{ background:var(--m-orange); cursor:pointer; }
  #mobile-app .m-up-text-btn{
    display:block;
    margin:14px auto 0 auto;
    background:none;
    border:none;
    color:var(--m-text-gray);
    font-size:14px;
    font-family:inherit;
    cursor:pointer;
  }

  /* ---------- preview ---------- */
  #mobile-app .m-up-preview-card{
    background:#fafafa;
    border-radius:18px;
    padding:16px;
    margin-top:8px;
  }
  #mobile-app .m-up-preview-image{
    width:100%;
    aspect-ratio:16/11;
    border-radius:14px;
    background:#e2e2e2;
    background-size:cover;
    background-position:center;
    margin-bottom:14px;
  }
  #mobile-app .m-up-preview-title{ font-size:18px; font-weight:700; color:var(--m-text-dark); margin:0 0 4px 0; }
  #mobile-app .m-up-preview-price{ font-size:16px; font-weight:700; color:var(--m-orange); margin:0 0 8px 0; }
  #mobile-app .m-up-preview-desc{ font-size:14px; color:var(--m-text-gray); line-height:1.5; margin:0; }

  /* ---------- uploading / success / error ---------- */
  #mobile-app #m-up-screen-progress{ align-items:center; justify-content:center; padding:20px; text-align:center; }
  #mobile-app .m-up-progress-wrap,
  #mobile-app .m-up-success-wrap,
  #mobile-app .m-up-error-wrap{
    display:none;
    flex-direction:column;
    align-items:center;
  }
  #mobile-app .m-up-progress-wrap.active,
  #mobile-app .m-up-success-wrap.active,
  #mobile-app .m-up-error-wrap.active{ display:flex; }

  #mobile-app .m-up-ring-wrap{ position:relative; width:150px; height:150px; margin-bottom:24px; }
  #mobile-app .m-up-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
  #mobile-app .m-up-ring-bg{ fill:none; stroke:#f0f0f0; stroke-width:8; }
  #mobile-app .m-up-ring-fg{ fill:none; stroke:var(--m-orange); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .15s linear; }
  #mobile-app .m-up-ring-percent{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:var(--m-text-dark); }

  #mobile-app .m-up-item-card{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f2f2f4;
    border-radius:14px;
    padding:10px 14px;
    width:100%;
    max-width:280px;
    text-align:left;
  }
  #mobile-app .m-up-item-thumb{ width:42px; height:42px; border-radius:10px; background:#dcdcdc; background-size:cover; background-position:center; flex-shrink:0; }
  #mobile-app .m-up-item-title{ font-size:14px; font-weight:600; color:var(--m-text-dark); }
  #mobile-app .m-up-item-sub{ font-size:12px; color:var(--m-text-gray); margin-top:2px; }

  #mobile-app .m-up-success-check{
    width:72px; height:72px; border-radius:50%;
    background:#34c759;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  #mobile-app .m-up-success-title{ font-size:19px; font-weight:700; color:var(--m-text-dark); margin-bottom:6px; }
  #mobile-app .m-up-success-sub{ font-size:14px; color:var(--m-text-gray); margin-bottom:6px; }
  #mobile-app .m-up-error-title{ font-size:16px; font-weight:600; color:var(--m-text-dark); margin-bottom:18px; max-width:280px; }

  /* ---------- ios-style alert (policy confirm) ---------- */
  #mobile-app .m-up-modal-overlay{
    position:absolute; inset:0; background:rgba(0,0,0,0.35);
    display:none; align-items:center; justify-content:center; z-index:320;
  }
  #mobile-app .m-up-modal-overlay.m-up-open{ display:flex; }
  #mobile-app .m-up-ios-alert{
    width:270px; background:rgba(247,247,247,0.94); backdrop-filter:blur(20px);
    border-radius:14px; overflow:hidden; text-align:center;
  }
  #mobile-app .m-up-alert-title{ font-size:16px; font-weight:600; padding:18px 16px 4px 16px; color:var(--m-text-dark); }
  #mobile-app .m-up-alert-body{ font-size:13px; color:var(--m-text-dark); padding:0 16px 16px 16px; line-height:1.4; }
  #mobile-app .m-up-alert-actions{ display:flex; border-top:0.5px solid #dcdcdc; }
  #mobile-app .m-up-alert-actions button{
    flex:1; border:none; background:none; padding:13px 8px; font-size:16px;
    color:var(--m-orange); font-family:inherit; border-right:0.5px solid #dcdcdc;
  }
  #mobile-app .m-up-alert-actions button:last-child{ border-right:none; }
  #mobile-app .m-up-alert-actions button.bold{ font-weight:600; }
}

/* =====================================================================
   MOBILE PROFILE FLOW (bottom-nav "profile" button)
   Profile / Edit profile / Orders / History / Studio / About.
   Real data — mirrors the same desktop elements/functions the rest of
   mobile.js already mirrors from (user-photo, pf-info-*, loadMyListings,
   logout-btn, studio-save-btn) instead of any hardcoded name/photo.
   ===================================================================== */
@media (max-width:480px){

  #mobile-app .m-profile-overlay{
    position:fixed;
    inset:0;
    z-index:300;
    background:#f6f6f6;
    display:none;
    width:100%;
    max-width:430px;
    margin:0 auto;
    left:0;
    right:0;
    overflow:hidden;
  }
  #mobile-app .m-profile-overlay.m-pf-open{ display:block; }

  /* On the main Profile screen only, drop below the bottom nav's stacking
     context so it stays visible for quick navigation (Home/Cart/etc).
     Sub-screens (Orders, Studio, Edit profile...) keep the full-screen
     z-index so they aren't cut off by the nav. The guest login screen
     gets its own dedicated bottom-sheet treatment instead (see
     .m-pf-login-sheet-mode below) rather than reusing this rule. */
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-on-root{
    z-index:70;
  }

  /* ---- Guest login: bottom sheet, not a full-page takeover ----
     #m-pf-screen-login keeps its normal .m-pf-screen behavior completely
     untouched (same translateX slide system every profile screen uses)
     — it's wrapped in its own .m-pf-login-sheet container, positioned
     as a sheet pinned to the bottom ~78% of the viewport, which gets
     its own independent translateY slide-up animation. This avoids the
     two transform systems (translateX page-nav vs translateY sheet)
     fighting over the same element. */
  #mobile-app .m-pf-login-scrim{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    opacity:0;
    transition:opacity .28s ease;
    pointer-events:none;
    display:none;
    z-index:1;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode{
    background:transparent;
    pointer-events:none; /* only the scrim + sheet itself should catch clicks */
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode .m-pf-login-scrim{
    display:block;
    pointer-events:auto;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode.m-pf-login-sheet-visible .m-pf-login-scrim{
    opacity:1;
  }
  #mobile-app .m-pf-login-sheet{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:78%;
    max-height:78%;
    background:#fff;
    border-radius:28px 28px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,0.18);
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.32,.72,0,1);
    overflow:hidden;
    z-index:2;
    display:none;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode .m-pf-login-sheet{
    display:block;
    pointer-events:auto;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode.m-pf-login-sheet-visible .m-pf-login-sheet{
    transform:translateY(0);
  }
  #mobile-app .m-pf-login-sheet .m-pf-screen{
    padding-bottom:max(24px, env(safe-area-inset-bottom));
    position:relative;
    inset:auto;
    height:100%;
    transform:none !important;
    transition:none !important;
  }

  #mobile-app .m-pf-screen{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:20px 16px 120px 16px;
    transform:translateX(0);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  #mobile-app #m-pf-screen-profile{
    padding-bottom:130px; /* keep content clear of the fixed bottom nav */
  }
  #mobile-app .m-pf-screen.active{ display:flex; }

  /* page-to-page navigation: forward screens enter from the left / exit to
     the right, back navigation is the exact mirror of that ---------- */
  #mobile-app .m-pf-screen.m-pf-enter-left{ transform:translateX(-100%); }
  #mobile-app .m-pf-screen.m-pf-enter-right{ transform:translateX(100%); }
  #mobile-app .m-pf-screen.m-pf-exit-left{ transform:translateX(-100%); }
  #mobile-app .m-pf-screen.m-pf-exit-right{ transform:translateX(100%); }

  #mobile-app .m-pf-title{
    font-size:24px;
    font-weight:700;
    color:var(--m-text-dark);
    margin:4px 0 18px 0;
    letter-spacing:-0.3px;
  }
  #mobile-app .m-pf-back-row{ margin-bottom:14px; }
  /* Back button + title stay pinned while the screen's content scrolls
     (History, Orders, Preferences, About). Negative margins/padding pull
     the solid backing out to the screen edges so nothing shows through. */
  #mobile-app .m-pf-sticky-head{
    position:sticky;
    top:-20px;
    z-index:6;
    margin:-20px -16px 0 -16px;
    padding:20px 16px 2px 16px;
    background:#f6f6f6;
  }
  body.dark-theme #mobile-app .m-pf-sticky-head{ background:#121212; }
  #mobile-app .m-pf-back-circle{
    width:38px; height:38px; border-radius:50%;
    background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.05);
    border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }

  #mobile-app .m-pf-header-card{
    background:#fff;
    border-radius:20px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
    margin:0 0 12px 0;
  }
  #mobile-app .m-pf-header-avatar{
    width:54px; height:54px; border-radius:50%; object-fit:cover; background:#e5e5e5; flex-shrink:0;
  }
  #mobile-app .m-pf-header-name{ font-size:16px; font-weight:600; color:var(--m-text-dark); margin:0 0 2px 0; }
  #mobile-app .m-pf-header-email{ font-size:13px; color:var(--m-text-gray); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  #mobile-app .m-pf-stats-row{
    display:flex;
    background:#fff;
    border-radius:20px;
    margin:0 0 12px 0;
    overflow:hidden;
  }
  #mobile-app .m-pf-stat{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:14px 0;
    background:none;
    border:none;
    cursor:pointer;
  }
  #mobile-app .m-pf-stat:first-child{
    position:relative;
  }
  #mobile-app .m-pf-stat:first-child::after{
    content:'';
    position:absolute;
    right:0;
    top:20%;
    bottom:20%;
    width:1px;
    background:#f0f0f2;
  }
  #mobile-app .m-pf-stat-value{ font-size:17px; font-weight:700; color:var(--m-text-dark); }
  #mobile-app .m-pf-stat-label{ font-size:12px; color:var(--m-text-gray); }

  #mobile-app .m-pf-section-label{ font-size:13px; font-weight:500; color:var(--m-text-gray); margin:12px 0 8px 4px; }

  #mobile-app .m-pf-card{
    background:#fff;
    border-radius:20px;
    padding:2px 16px;
    box-shadow:0 4px 14px rgba(0,0,0,0.02);
    margin:0 0 12px 0;
  }
  #mobile-app .m-pf-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    cursor:pointer;
    position:relative;
  }
  #mobile-app .m-pf-row:not(:last-child)::after{
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:1px;
    background:#f0f0f2;
  }
  #mobile-app .m-pf-row-icon{ width:22px; display:flex; align-items:center; justify-content:center; color:var(--m-text-dark); flex-shrink:0; }
  #mobile-app .m-pf-row-icon i{ font-size:19px; }
  #mobile-app .m-pf-row-icon img{ filter:brightness(0) saturate(100%); opacity:0.88; }
  #mobile-app .m-pf-row-text{ font-size:15px; font-weight:600; color:var(--m-text-dark); flex:1; }
  #mobile-app .m-pf-row-value{
    font-size:14px;
    font-weight:500;
    color:var(--m-text-gray);
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #mobile-app .m-pf-row-chevron{ color:#c4c4c7; display:flex; }

  /* ---------- edit profile ---------- */
  #mobile-app .m-pf-avatar-wrap{ display:flex; flex-direction:column; align-items:center; margin:8px 0 22px 0; }
  #mobile-app .m-pf-avatar-lg{ width:92px; height:92px; border-radius:50%; object-fit:cover; background:#e5e5e5; margin-bottom:8px; }
  #mobile-app .m-pf-avatar-edit-tap{ position:relative; width:92px; height:92px; cursor:pointer; }
  #mobile-app .m-pf-avatar-edit-tap .m-pf-avatar-lg{ margin-bottom:0; }
  #mobile-app .m-pf-avatar-edit-badge{
    position:absolute;
    right:-2px;
    bottom:6px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--m-orange, #ff8c00);
    border:2.5px solid #fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-app .m-pf-field{ margin-bottom:14px; }
  #mobile-app .m-pf-field label{ display:block; font-size:13px; font-weight:500; color:#444; margin:0 0 6px 10px; }
  #mobile-app .m-pf-pill{
    background:#ececed;
    border-radius:999px;
    padding:13px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  #mobile-app .m-pf-pill input{
    background:transparent; border:none; outline:none;
    font-size:15px; font-weight:600; color:var(--m-text-dark);
    width:100%; padding:0; font-family:inherit;
  }
  #mobile-app .m-pf-pill.readonly input{ color:#6d6d72; }
  #mobile-app .m-pf-save-btn{
    background:var(--m-orange);
    border:none;
    border-radius:999px;
    padding:14px;
    width:100%;
    color:#fff;
    font-size:15px;
    font-weight:600;
    margin-top:10px;
    cursor:pointer;
  }
  #mobile-app .m-pf-logout-btn{
    background:transparent;
    border:1.5px solid #666;
    border-radius:999px;
    padding:12px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:15px;
    font-weight:700;
    color:var(--m-text-dark);
    width:150px;
    margin:30px auto 6px auto;
    cursor:pointer;
  }

  /* ---------- empty state ---------- */
  #mobile-app .m-pf-empty-box{
    display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:70px; color:var(--m-text-gray);
  }
  #mobile-app .m-pf-empty-box i{ font-size:44px; margin-bottom:18px; color:#c9c9cc; }
  #mobile-app .m-pf-empty-title{ font-size:16px; font-weight:500; color:var(--m-text-dark); line-height:1.4; margin-bottom:8px; }
  #mobile-app .m-pf-browse-btn{
    background:#fff; border:1px solid #eaeaea; border-radius:999px;
    padding:10px 32px; color:var(--m-orange); font-size:15px; font-weight:700;
    box-shadow:0 4px 10px rgba(0,0,0,0.02); cursor:pointer; margin-top:20px;
  }

  /* ---------- orders ---------- */
  #mobile-app .m-pf-orders-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
  #mobile-app .m-pf-order-group-label{ font-size:13px; font-weight:600; color:var(--m-text-gray); margin:18px 0 10px 2px; text-transform:uppercase; letter-spacing:0.3px; }
  #mobile-app .m-pf-order-row{
    background:#fff;
    border-radius:16px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
    font-size:15px;
    color:var(--m-text-dark);
    font-weight:500;
  }
  #mobile-app .m-pf-order-status{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:11px; }
  #mobile-app .m-pf-order-status.delivered{ background:#e4f8ea; color:#2fa84f; }
  #mobile-app .m-pf-order-status.pending{ background:#fdeceb; color:#e0483a; }
  #mobile-app .m-pf-order-empty{ font-size:14px; color:var(--m-text-gray); padding:10px 2px 4px 2px; }

  /* ---------- studio (ported literally from provided design) ---------- */
  #mobile-app .m-pf-segment-bar{
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1.5px solid #2a2a2a;
    border-radius: 30px;
    padding: 3px;
    margin-bottom: 16px;
    background-color: #ffffff;
  }
  #mobile-app .m-pf-segment-btn{
    position: relative;
    z-index: 2;
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    cursor: pointer;
    border-radius: 20px;
    transition: color 0.25s ease;
  }
  #mobile-app .m-pf-segment-btn.active{ color: #ffffff; }
  #mobile-app .m-pf-segment-indicator{
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    background-color: #333333;
    border-radius: 20px;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #mobile-app .m-pf-studio-sub{ display:none; }
  #mobile-app .m-pf-studio-sub.active{ display:block; }

  #mobile-app .m-pf-studio-banner{
    width: 100%;
    height: 125px;
    background-color: #f2f2f2;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
    border: none;
  }
  #mobile-app .m-pf-studio-banner svg{ margin-bottom: 6px; }
  #mobile-app .m-pf-studio-banner span{
    font-size: 16px;
    font-weight: 700;
    color: #555555;
  }
  /* Once a real banner photo is set, hide the "Upload banner" placeholder
     icon/label so they don't sit on top of the photo — set alongside the
     background-image by applyBannerEverywhere() in script.js. */
  #mobile-app .m-pf-studio-banner.m-pf-has-banner svg,
  #mobile-app .m-pf-studio-banner.m-pf-has-banner span{
    display: none;
  }

  #mobile-app .m-pf-pill{
    background-color: #f2f2f2;
    border-radius: 24px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
  }
  #mobile-app .m-pf-pill input{
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    width: 100%;
    padding: 0;
    font-family: inherit;
  }
  #mobile-app .m-pf-pill-icon{ margin-right: 8px; display: flex; align-items: center; }

  #mobile-app .m-pf-field{ margin-bottom: 12px; }
  #mobile-app .m-pf-field label{
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 6px;
  }

  #mobile-app .m-pf-bio-box{
    background-color: #f2f2f2;
    border-radius: 18px;
    padding: 16px;
    min-height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #mobile-app .m-pf-bio-box span{
    font-size: 15px;
    font-weight: 500;
    color: #666666;
  }
  #mobile-app .m-pf-bio-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #mobile-app .m-pf-bio-charcount{
    font-size: 12px;
    font-weight: 600;
    color: #444444;
  }

  #mobile-app .m-pf-save-btn-outline{
    width: 100%;
    padding: 12px 0;
    border: 2px solid #ff3000;
    background-color: #ffffff;
    color: #ff3000;
    font-size: 17px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  #mobile-app .m-pf-save-btn-outline:hover{
    background-color: #ff3000;
    color: #ffffff;
  }

  #mobile-app .m-pf-studio-product-row{
    display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
    padding:10px; margin-bottom:12px;
  }
  #mobile-app .m-pf-studio-thumb{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:#e5e5e5; flex-shrink:0; }
  #mobile-app .m-pf-studio-info{ flex:1; min-width:0; }
  #mobile-app .m-pf-studio-name{ font-size:14px; font-weight:600; color:var(--m-text-dark); }
  #mobile-app .m-pf-studio-sub-text{ font-size:12px; color:var(--m-text-gray); margin-top:2px; }
  #mobile-app .m-pf-studio-stats-row{
    display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap;
  }
  #mobile-app .m-pf-studio-stat{
    display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
    color:var(--m-text-gray);
  }
  #mobile-app .m-pf-studio-stat i{ font-size:11px; color:#a0a0a5; }
  #mobile-app .m-pf-studio-delete-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:#fdeeee; border:none; display:flex; align-items:center; justify-content:center;
    color:#e0453c; font-size:14px; cursor:pointer;
  }
  #mobile-app .m-pf-studio-delete-btn:active{ background:#f9d9d8; }
  #mobile-app .m-pf-na-card{
    background:#fff; border-radius:20px; padding:32px 24px; text-align:center; margin-top:30px;
  }
  #mobile-app .m-pf-na-title{ font-size:15px; font-weight:700; color:var(--m-text-dark); margin:10px 0 6px 0; }
  #mobile-app .m-pf-na-desc{ font-size:13px; color:#444; line-height:1.4; }

  /* ---------- buyer orders (redesigned cards) ---------- */
  #mobile-app .m-pf-order-card{
    display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
    padding:12px; margin-bottom:10px; box-shadow:0 2px 10px rgba(0,0,0,0.04);
  }
  #mobile-app .m-pf-order-card-img{
    width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0; background:#ececee;
  }
  #mobile-app .m-pf-order-card-noimg{
    display:flex; align-items:center; justify-content:center; color:#9a9a9e; font-size:18px;
  }
  #mobile-app .m-pf-order-card-main{ flex:1; min-width:0; }
  #mobile-app .m-pf-order-card-title{
    font-size:14.5px; font-weight:700; color:var(--m-text-dark);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #mobile-app .m-pf-order-card-meta{ font-size:12px; color:var(--m-text-gray); margin-top:3px; }
  #mobile-app .m-pf-order-pill{
    font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; flex-shrink:0; white-space:nowrap;
  }
  #mobile-app .m-pf-order-pill-pending,
  #mobile-app .m-pf-order-pill-waiting{ background:rgba(255,149,0,0.15); color:#b86e00; }
  #mobile-app .m-pf-order-pill-delivered,
  #mobile-app .m-pf-order-pill-approved{ background:rgba(52,199,89,0.14); color:#248a3d; }
  #mobile-app .m-pf-order-pill-declined{ background:rgba(255,59,48,0.12); color:#d70015; }
  body.dark-theme #mobile-app .m-pf-order-card{ background:#1e1e20; box-shadow:none; }
  body.dark-theme #mobile-app .m-pf-order-card-img{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pf-order-pill-pending,
  body.dark-theme #mobile-app .m-pf-order-pill-waiting{ background:rgba(255,159,10,0.2); color:#ffb340; }
  body.dark-theme #mobile-app .m-pf-order-pill-delivered,
  body.dark-theme #mobile-app .m-pf-order-pill-approved{ background:rgba(48,209,88,0.2); color:#5fdc7f; }
  body.dark-theme #mobile-app .m-pf-order-pill-declined{ background:rgba(255,69,58,0.2); color:#ff6b62; }

  /* ---------- studio orders ---------- */
  #mobile-app .m-pf-studio-orders-subtabs{
    display:flex; gap:8px; margin-bottom:14px; overflow-x:auto;
  }
  #mobile-app .m-pf-studio-orders-subtab{
    background:#f0f0f2; border:none; font-family:inherit; font-size:13px; font-weight:600;
    color:var(--m-text-gray); padding:7px 14px; border-radius:999px; cursor:pointer; flex-shrink:0;
  }
  #mobile-app .m-pf-studio-orders-subtab.active{ background:#ff3000; color:#fff; }
  #mobile-app .m-pf-studio-order-row{
    display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
    padding:10px; margin-bottom:12px; flex-wrap:wrap;
  }
  #mobile-app .m-pf-studio-order-buyer{
    display:flex; align-items:center; gap:6px;
  }
  #mobile-app .m-pf-studio-order-buyer img{
    width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0;
  }
  #mobile-app .m-pf-studio-order-actions{
    display:flex; gap:8px; width:100%; margin-top:8px; padding-left:68px;
  }
  #mobile-app .m-pf-studio-order-approve-btn,
  #mobile-app .m-pf-studio-order-decline-btn{
    font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 12px;
    border-radius:10px; border:none; cursor:pointer;
  }
  #mobile-app .m-pf-studio-order-approve-btn{ background:#ff3000; color:#fff; }
  #mobile-app .m-pf-studio-order-decline-btn{ background:#f0f0f2; color:var(--m-text-dark); }
  #mobile-app .m-pf-order-status-approved,
  #mobile-app .m-pf-order-status-declined{
    font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; margin-left:auto;
  }
  #mobile-app .m-pf-order-status-approved{ background:rgba(52,199,89,0.14); color:#248a3d; }
  #mobile-app .m-pf-order-status-declined{ background:rgba(255,59,48,0.12); color:#d70015; }

  /* ---------- about ---------- */
  #mobile-app .m-pf-toggle-bar{ background:#fff; border:1px solid #eaeaea; border-radius:999px; display:inline-flex; padding:4px; margin-bottom:24px; }
  #mobile-app .m-pf-toggle-item{ padding:8px 22px; border-radius:999px; font-size:14px; font-weight:600; color:#666; cursor:pointer; }
  #mobile-app .m-pf-toggle-item.active{ background:#999; color:#fff; }
  #mobile-app .m-pf-about-title{ font-size:15px; font-weight:600; color:var(--m-text-dark); margin-bottom:12px; }
  #mobile-app .m-pf-about-p{ font-size:13px; color:var(--m-text-dark); line-height:1.55; margin:0 0 16px 0; }
  #mobile-app .m-pf-help-row{
    background:#fff; border:1px solid #eaeaea; border-radius:16px; padding:15px 16px;
    display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:500;
    color:var(--m-text-dark); margin-top:40px; cursor:pointer;
  }
  #mobile-app .m-pf-copyright{ text-align:center; font-size:11px; color:#666; margin-top:40px; }

  /* ---------- preferences ---------- */
  #mobile-app .m-pf-row.m-pf-currency-trigger::after{ content:none; }
  #mobile-app .m-pf-currency-code{ font-size:14px; font-weight:500; color:var(--m-text-gray); }

  #mobile-app .m-pf-theme-row{ align-items:center; }
  #mobile-app .m-pf-theme-seg{
    display:flex; align-items:center;
    background:#ececed; border-radius:999px; padding:3px; gap:2px;
  }
  #mobile-app .m-pf-theme-opt{
    display:flex; align-items:center; justify-content:center;
    padding:7px 9px; border-radius:999px; border:none; background:transparent;
    cursor:pointer; gap:6px;
    transition:background .35s cubic-bezier(.16,1,.3,1), padding .35s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-pf-theme-opt.active{ background:var(--m-orange); padding:7px 14px; }
  #mobile-app .m-pf-theme-icon{
    width:16px; height:16px; flex-shrink:0;
    filter:brightness(0) saturate(100%); opacity:0.7;
    transition:filter .35s ease, opacity .35s ease;
  }
  #mobile-app .m-pf-theme-opt.active .m-pf-theme-icon{
    filter:brightness(0) saturate(100%) invert(1); opacity:1;
  }
  #mobile-app .m-pf-theme-badge{
    width:16px; height:16px; border-radius:50%; border:1.5px solid var(--m-text-dark);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:var(--m-text-dark); flex-shrink:0;
    transition:border-color .35s ease, color .35s ease;
  }
  #mobile-app .m-pf-theme-opt.active .m-pf-theme-badge{ border-color:#fff; color:#fff; }
  #mobile-app .m-pf-theme-label{
    max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
    font-size:13px; font-weight:600; color:#fff;
    transition:max-width .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  }
  #mobile-app .m-pf-theme-opt.active .m-pf-theme-label{ max-width:40px; opacity:1; }

  #mobile-app .m-pf-switch{
    position:relative; width:50px; height:28px; border-radius:14px;
    background:#d1d1d6; border:none; padding:0; cursor:pointer; flex-shrink:0;
    transition:background-color .3s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-pf-switch.active{ background:var(--m-orange); }
  #mobile-app .m-pf-switch-thumb{
    position:absolute; top:3px; left:3px; width:26px; height:22px; border-radius:11px;
    background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.15);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  #mobile-app .m-pf-switch.active .m-pf-switch-thumb{ transform:translateX(18px); }

  #mobile-app .m-pf-currency-trigger{ cursor:pointer; }
  #mobile-app .m-pf-currency-chevron{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
  #mobile-app .m-pf-currency-chevron.open{ transform:rotate(90deg); }
  #mobile-app .m-pf-currency-list{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, margin-top .3s ease;
    margin-top:0;
  }
  #mobile-app .m-pf-currency-list.open{
    max-height:400px; opacity:1; margin-top:6px;
    border-top:0.5px solid #f0f0f2; padding-top:6px;
  }
  #mobile-app .m-pf-currency-option{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 4px; cursor:pointer; border-radius:8px;
  }
  #mobile-app .m-pf-currency-option:active{ background:#f6f6f6; }
  #mobile-app .m-pf-currency-option-code{ font-size:14px; font-weight:700; color:var(--m-text-dark); }
  #mobile-app .m-pf-currency-option-name{ font-size:13px; color:var(--m-text-gray); }
  #mobile-app .m-pf-currency-check{ width:16px; height:16px; opacity:0; transition:opacity .2s ease; flex-shrink:0; }
  #mobile-app .m-pf-currency-option.active .m-pf-currency-check{ opacity:1; }
}

/* =====================================================================
   MOBILE DARK THEME
   Driven by the same body.dark-theme class the desktop theme control
   already applies (localStorage "themeMode": light / dark / auto — see
   the theme-opt proxy buttons in mobile.js). Redefining the shared
   --m-text-dark / --m-text-gray / --m-border-gray / --m-nav-bg variables
   here re-colors every component that already reads them; everything
   else below covers the colors that were hardcoded instead of using
   those variables.
   ===================================================================== */
@media (max-width:480px){

  body.dark-theme #mobile-app{
    --m-text-dark:#f0f0f0;
    --m-text-gray:#9a9a9e;
    --m-border-gray:#3a3a3c;
    --m-nav-bg: rgba(30,30,32,0.85);
    background:#121212;
  }

  /* headers / search */
  body.dark-theme #mobile-app .m-page-header{ background:#121212; }

  /* header pill icons are inline svgs with a hardcoded dark stroke —
     override it here so search/clear/filter/menu turn light in dark mode */
  body.dark-theme #mobile-app .m-header-pill svg circle,
  body.dark-theme #mobile-app .m-header-pill svg line,
  body.dark-theme #mobile-app .m-header-pill svg path{
    stroke:#e8e8e8;
  }
  /* the upload trigger (relocated into this pill) is an <img>, not an
     inline svg, so it needs the same img-filter treatment as the bottom
     nav icons rather than the stroke override above */
  body.dark-theme #mobile-app #m-pill-upload-btn .m-nav-icon{
    filter:brightness(0) saturate(100%) invert(1);
  }
  body.dark-theme #mobile-app .m-page-divider{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-search-input::placeholder{ color:#8a8a8e; }

  /* full-screen search view */
  body.dark-theme #mobile-app .m-search-view-header{ background:#121212; }
  body.dark-theme #mobile-app .m-search-view-back-btn svg{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-search-view-input-wrap{ background:#242426; }
  body.dark-theme #mobile-app .m-search-view-input{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-search-view-input::placeholder{ color:#8a8a8e; }
  body.dark-theme #mobile-app .m-search-view-input-icon,
  body.dark-theme #mobile-app .m-search-view-recent-item-icon{
    filter:brightness(0) saturate(100%) invert(1) opacity(0.55);
  }
  body.dark-theme #mobile-app .m-search-view-recent-title{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-search-view-recent-item-text{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-search-empty-state svg circle,
  body.dark-theme #mobile-app .m-search-empty-state svg line{
    stroke:#5a5a5e;
  }

  /* home / product cards */
  body.dark-theme #mobile-app .m-product-media,
  body.dark-theme #mobile-app .m-cart-thumb,
  body.dark-theme #mobile-app .m-up-preview-image{ background:#2a2a2c; }

  /* cart */
  body.dark-theme #mobile-app .m-cart-qty{ border-color:#3a3a3c; }

  /* bottom nav */
  body.dark-theme #mobile-app .m-nav-btn i.fa-solid{ color:#e8e8e8; }
  body.dark-theme #mobile-app .m-nav-btn .m-nav-icon{
    filter:brightness(0) saturate(100%) invert(1);
  }
  body.dark-theme #mobile-app .m-nav-indicator{
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.09),
      inset 0 -1px 2px rgba(0,0,0,0.2),
      0 2px 10px rgba(0,0,0,0.2);
    border:1px solid rgba(255,255,255,0.05);
  }

  /* feed card actions */
  body.dark-theme #mobile-app .m-action-btn i{ color:#e8e8e8; }
  body.dark-theme #mobile-app .m-heart-btn.active i{ color:var(--m-orange); }
  body.dark-theme #mobile-app .m-action-icon{
    filter:brightness(0) saturate(100%) invert(1);
  }

  body.dark-theme #mobile-app .m-nav-btn.active .m-nav-icon{
    filter:invert(49%) sepia(93%) saturate(531%) hue-rotate(356deg) brightness(98%) contrast(163%);
  }
  body.dark-theme #mobile-app .m-nav-avatar{ background:#3a3a3c; }

  /* product detail view */
  body.dark-theme #mobile-app .m-product-view,
  body.dark-theme #mobile-app .m-pd-body{ background:#121212; }
  body.dark-theme #mobile-app .m-pd-hero{ background:#1c1c1e; }
  body.dark-theme #mobile-app .m-pd-back-btn{ background:rgba(30,30,32,0.78); color:#e8e8e8; }
  body.dark-theme #mobile-app .m-pd-name,
  body.dark-theme #mobile-app .m-pd-price,
  body.dark-theme #mobile-app .m-pd-section-heading,
  body.dark-theme #mobile-app .m-pd-seller-name,
  body.dark-theme #mobile-app .m-pd-order-text,
  body.dark-theme #mobile-app .m-pd-owner-stat-label,
  body.dark-theme #mobile-app .m-pd-owner-stat-value{ color:#f2f2f2; }
  body.dark-theme #mobile-app .m-pd-owner-stat-box.filled .m-pd-owner-stat-label,
  body.dark-theme #mobile-app .m-pd-owner-stat-box.filled .m-pd-owner-stat-value{ color:#fff; }
  body.dark-theme #mobile-app .m-pd-condition-text{ color:#d1d1d6; }
  body.dark-theme #mobile-app .m-pd-desc{ color:#aeaeb2; }
  body.dark-theme #mobile-app .m-pd-seller-handle{ color:#8e8e93; }
  body.dark-theme #mobile-app .m-pd-seller-avatar{ border-color:#3a3a3c; background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pd-name.m-pd-name-clamped::after{
    background:linear-gradient(to right, transparent, #121212 70%);
  }
  body.dark-theme #mobile-app .m-pd-order-btn{ background:#1e1e20; border-color:#4a4a4d; }
  body.dark-theme #mobile-app .m-pd-order-capsule{ background:#2a2a2c; border-color:#4a4a4d; }
  body.dark-theme #mobile-app .m-pd-order-btn:disabled{
    background:#3a3a3c;
    border-color:#48484a;
  }
  body.dark-theme #mobile-app .m-pd-order-btn:disabled .m-pd-order-text,
  body.dark-theme #mobile-app .m-pd-order-btn:disabled .m-pd-order-capsule{ color:#6e6e73; }
  body.dark-theme #mobile-app .m-pd-owner-stat-box.outline{
    background:#1e1e20; border-color:#4a4a4d;
  }
  body.dark-theme #mobile-app .m-pd-seller-distance{
    background:rgba(142,142,147,0.22);
    color:#aeaeb2;
  }

  /* order summary / payment / otp screens */
  body.dark-theme #mobile-app .m-ord-view,
  body.dark-theme #mobile-app .m-pay-view,
  body.dark-theme #mobile-app .m-otp-view{ background:#121212; }
  body.dark-theme #mobile-app .m-ord-back-btn,
  body.dark-theme #mobile-app .m-pay-back-btn,
  body.dark-theme #mobile-app .m-otp-back-btn{ background:#1e1e20; }
  body.dark-theme #mobile-app .m-ord-back-btn svg path,
  body.dark-theme #mobile-app .m-pay-back-btn svg path,
  body.dark-theme #mobile-app .m-otp-back-btn svg path{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-ord-summary-card,
  body.dark-theme #mobile-app .m-ord-location-card,
  body.dark-theme #mobile-app .m-pay-card{ background:#1e1e20; box-shadow:none; }
  body.dark-theme #mobile-app .m-ord-location-header svg{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-pay-card-header{ color:#e8e8e8; }
  body.dark-theme #mobile-app .m-pay-chevron{ stroke:#e8e8e8; }
  body.dark-theme #mobile-app .m-pay-phone-input{ background:#2a2a2c; border-color:#3a3a3c; color:#f0f0f0; }
  body.dark-theme #mobile-app .m-cart-total-display{ background:rgba(30,30,32,0.85); }
  body.dark-theme #mobile-app .m-otp-input{ border-color:#e8e8e8; color:#f0f0f0; }
  body.dark-theme #mobile-app .m-otp-verify-btn{
    background-image:linear-gradient(#121212, #121212), linear-gradient(to right, #FF3B30, #FF9500);
  }

  /* hamburger menu modal */
  body.dark-theme #mobile-app .m-menu-modal{ background:#1c1c1e; box-shadow:0 8px 30px rgba(0,0,0,0.5); }
  body.dark-theme #mobile-app .m-menu-item{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-menu-item:active{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-menu-item-icon{ color:#f0f0f0; }
  body.dark-theme #mobile-app .m-menu-cat-chevron path{ stroke:#f0f0f0; }
  body.dark-theme #mobile-app .m-menu-cat-option{ color:#a0a0a0; }
  body.dark-theme #mobile-app .m-menu-cat-option:active{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-menu-cat-option.active{ color:var(--m-orange); }

  /* upload flow */
  body.dark-theme #mobile-app .m-up-screen{ background:#121212; }
  body.dark-theme #mobile-app .m-up-nav-back{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-up-source-sheet{ background:#1c1c1e; }
  body.dark-theme #mobile-app .m-up-source-handle{ background:#3a3a3c; }
  body.dark-theme #mobile-app .m-up-photo-add{ border-color:rgba(255,255,255,0.25); color:#8a8a8e; background:rgba(255,255,255,0.03); }
  body.dark-theme #mobile-app .m-up-field input,
  body.dark-theme #mobile-app .m-up-field select,
  body.dark-theme #mobile-app .m-up-field textarea,
  body.dark-theme #mobile-app .m-up-stepper,
  body.dark-theme #mobile-app .m-up-item-card{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-up-item-thumb{ background:#3a3a3c; }
  body.dark-theme #mobile-app .m-up-condition-opt{
    background:#1e1e20; border-color:#3a3a3c;
  }
  body.dark-theme #mobile-app .m-up-primary-btn{ background:#4a3f30; }
  body.dark-theme #mobile-app .m-up-preview-card{ background:#1c1c1e; }
  body.dark-theme #mobile-app .m-up-ring-bg{ stroke:#2a2a2c; }
  body.dark-theme #mobile-app .m-up-ios-alert{ background:rgba(40,40,42,0.94); }
  body.dark-theme #mobile-app .m-up-alert-actions,
  body.dark-theme #mobile-app .m-up-alert-actions button{ border-color:#48484a; }

  /* profile flow */
  body.dark-theme #mobile-app .m-profile-overlay{ background:#121212; }
  body.dark-theme #mobile-app .m-pf-back-circle,
  body.dark-theme #mobile-app .m-pf-header-card,
  body.dark-theme #mobile-app .m-pf-card,
  body.dark-theme #mobile-app .m-pf-stats-row,
  body.dark-theme #mobile-app .m-pf-browse-btn,
  body.dark-theme #mobile-app .m-pf-order-row,
  body.dark-theme #mobile-app .m-pf-studio-product-row,
  body.dark-theme #mobile-app .m-pf-na-card,
  body.dark-theme #mobile-app .m-pf-toggle-bar,
  body.dark-theme #mobile-app .m-pf-help-row{
    background:#1e1e20;
  }
  body.dark-theme #mobile-app .m-pf-browse-btn,
  body.dark-theme #mobile-app .m-pf-toggle-bar,
  body.dark-theme #mobile-app .m-pf-help-row{
    border-color:#333;
  }
  body.dark-theme #mobile-app .m-pf-segment-bar{ background:#1e1e20; border-color:#48484a; }
  /* Studio tabs in dark theme: labels readable, moving pill clearly visible
     (the buttons used to get an opaque dark fill that covered the pill). */
  body.dark-theme #mobile-app .m-pf-segment-btn{ background:transparent; color:#d1d1d6; }
  body.dark-theme #mobile-app .m-pf-segment-btn.active{ color:#ffffff; }
  body.dark-theme #mobile-app .m-pf-segment-indicator{ background:#ff3000; }
  body.dark-theme #mobile-app .m-pf-studio-orders-subtab{ background:#2a2a2c; color:#d1d1d6; }
  body.dark-theme #mobile-app .m-pf-studio-orders-subtab.active{ background:#ff3000; color:#ffffff; }
  body.dark-theme #mobile-app .m-pf-studio-order-row{ background:#1e1e20; }
  body.dark-theme #mobile-app .m-pf-studio-order-decline-btn{ background:#2a2a2c; color:#f2f2f2; }
  body.dark-theme #mobile-app .m-pf-order-status-approved{ background:rgba(48,209,88,0.2); color:#5fdc7f; }
  body.dark-theme #mobile-app .m-pf-order-status-declined{ background:rgba(255,69,58,0.2); color:#ff6b62; }
  body.dark-theme #mobile-app .m-pf-order-group-label,
  body.dark-theme #mobile-app .m-pf-order-empty{ color:#a8a8ac; }
  body.dark-theme #mobile-app .m-pf-title,
  body.dark-theme #mobile-app .m-pf-about-title,
  body.dark-theme #mobile-app .m-pf-about-p{ color:#f2f2f2; }
  body.dark-theme #mobile-app .m-pf-na-title{ color:#f2f2f2; }
  /* .m-product-seller-avatar / -initial / -name use --m-border-gray and
     --m-text-dark, which already flip in dark theme, so the seller header
     row needs no dark override of its own. */
  body.dark-theme #mobile-app .m-pf-studio-banner{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pf-studio-banner span{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-studio-banner svg{ stroke:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-row:not(:last-child)::after{ background:#2e2e30; }
  body.dark-theme #mobile-app .m-pf-row-chevron{ color:#6e6e72; }
  body.dark-theme #mobile-app .m-pf-row-icon img{ filter:brightness(0) saturate(100%) invert(1); opacity:0.8; }
  body.dark-theme #mobile-app .m-pf-field label{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-pill,
  body.dark-theme #mobile-app .m-pf-bio-box,
  body.dark-theme #mobile-app .m-pf-theme-seg{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pf-pill.readonly input{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-avatar-lg,
  body.dark-theme #mobile-app .m-pf-studio-thumb{ background:#2a2a2c; }
  body.dark-theme #mobile-app .m-pf-studio-delete-btn{ background:#3a1e1d; color:#ff6b61; }
  body.dark-theme #mobile-app .m-pf-studio-delete-btn:active{ background:#4a2624; }
  body.dark-theme #mobile-app .m-pf-empty-box i{ color:#48484a; }
  body.dark-theme #mobile-app .m-pf-na-desc{ color:#a8a8ac; }
  body.dark-theme #mobile-app .m-pf-na-card{ color:var(--m-text-gray); }
  body.dark-theme #mobile-app .m-pf-toggle-item{ color:#9a9a9e; }
  body.dark-theme #mobile-app .m-pf-toggle-item.active{ background:#5a5a5d; }
  body.dark-theme #mobile-app .m-pf-copyright{ color:#8a8a8e; }
  body.dark-theme #mobile-app .m-pf-help-row svg path,
  body.dark-theme #mobile-app .m-pf-help-row svg polyline,
  body.dark-theme #mobile-app .m-pf-help-row svg line{ stroke:#aaaaae; }
  body.dark-theme #mobile-app .m-pf-order-status.delivered{ background:rgba(47,168,79,0.18); color:#57cf78; }
  body.dark-theme #mobile-app .m-pf-order-status.pending{ background:rgba(224,72,58,0.18); color:#ff7a6b; }

  /* preferences */
  body.dark-theme #mobile-app .m-pf-theme-icon{ filter:brightness(0) saturate(100%) invert(1); opacity:0.7; }
  body.dark-theme #mobile-app .m-pf-theme-opt.active .m-pf-theme-icon{ filter:brightness(0) saturate(100%) invert(1); opacity:1; }
  body.dark-theme #mobile-app .m-pf-theme-badge{ border-color:#e8e8e8; color:#e8e8e8; }
  body.dark-theme #mobile-app .m-pf-switch{ background:#48484a; }
  body.dark-theme #mobile-app .m-pf-currency-option:active{ background:#2a2a2c; }

  /* Reused desktop login/signup card (relocated into the profile
     overlay — see Mobile.js). style.css sizes it for a centered
     desktop page (60px card padding, 400px max-width, flex context
     assumptions); restyled here to match this app's own mobile
     language instead — full-width, m-pf-title-style heading, no
     leftover desktop centering/padding. */
  #mobile-app .m-pf-screen #guest-wrapper,
  #mobile-app .m-pf-screen .auth-card{
    display:block;
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
  }
  #mobile-app .m-pf-screen .auth-card-header{
    text-align:left;
    margin-bottom:22px;
  }
  #mobile-app .m-pf-screen .auth-title{
    font-size:24px;
    font-weight:700;
    letter-spacing:-0.3px;
    margin:4px 0 0 0;
  }
  #mobile-app .m-pf-screen .auth-subtitle{
    font-size:14px;
    font-weight:400;
    color:var(--m-text-gray);
    margin:6px 0 0 0;
  }
  #mobile-app .m-pf-screen .auth-form-container{
    display:block;
    width:100%;
    max-width:100%;
  }
  #mobile-app .m-pf-screen .input-group input{
    font-size:16px; /* >=16px keeps iOS Safari from auto-zooming on focus */
    border-radius:14px;
  }
  #mobile-app .m-pf-screen .main-login-btn{
    border-radius:14px;
    height:52px;
  }
  #mobile-app .m-pf-screen .auth-divider{
    margin:20px 0;
  }
  #mobile-app .m-pf-screen .auth-social-row{
    display:flex;
    width:100%;
  }
  #mobile-app .m-pf-screen .auth-social-row .social-btn{
    flex:1 1 auto;
    width:100%;
    border-radius:14px;
    height:52px !important;
  }
  #mobile-app .m-pf-screen .auth-footer-row,
  #mobile-app .m-pf-screen .auth-switch-row{
    margin-top:18px;
    font-size:13px;
  }
  /* signup card's terms/switch links wrap awkwardly at desktop line
     length; let them wrap naturally at mobile width */
  #mobile-app .m-pf-screen .auth-footer-row p{
    line-height:1.5;
  }

  /* ---------- change password modal (shared #reset-password-modal, used
     from both desktop and mobile — see m-pf-change-password-row in
     Mobile.js). Desktop sizes it as a centered card with generous
     padding; here it's restyled as a compact bottom sheet matching
     this app's other mobile modals/cards instead. Scoped to the same
     max-width:480px query as the rest of this mobile layout, so
     desktop (a different media context) is unaffected. ---------- */
  #reset-password-modal.modal-overlay{
    align-items:flex-end;
  }
  #reset-password-modal .feedback-content{
    width:100%;
    max-width:100%;
    border-radius:24px 24px 0 0;
    padding:24px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(0,0,0,0.12);
  }
  #reset-password-modal .feedback-header h1{
    font-size:20px;
    font-weight:700;
    letter-spacing:-0.3px;
  }
  #reset-password-modal .feedback-header p{
    font-size:13px;
  }
  #reset-password-modal .input-group input{
    font-size:16px; /* keeps iOS Safari from auto-zooming on focus */
    border-radius:14px;
  }
  #reset-password-modal .main-login-btn{
    border-radius:14px;
    height:52px;
  }
}

/* ================================
   OFFLINE BANNER (mobile tweaks)
   ================================ */
@media (max-width: 480px) {
  #offline-banner{
    padding-top: max(10px, env(safe-area-inset-top));
    font-size: 13px;
  }

  #mobile-app .m-pf-bio-box textarea{
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #666666;
    font-family: inherit;
    padding: 0;
  }

  #mobile-app .m-pf-handle-status{
    display: block;
    min-height: 16px;
    font-size: 12px;
    margin-top: 6px;
    margin-left: 10px;
  }
  #mobile-app .m-pf-handle-status.checking{ color: #8e8e93; }
  #mobile-app .m-pf-handle-status.available{ color: #1fa34d; }
  #mobile-app .m-pf-handle-status.taken,
  #mobile-app .m-pf-handle-status.invalid{ color: #e0392b; }

  body.dark-theme #mobile-app .m-pf-bio-box textarea{ color: #9a9a9e; }
}

@media (max-width: 480px) {
  /* Mirrored desktop cart-empty-state has height:100% which collapses
     without an explicit parent height on mobile — give it real breathing
     room so it reads as a proper empty-state screen, same as notifications. */
  #mobile-app .m-cart-list .cart-empty-state{
    height: auto;
    padding: 70px 20px;
  }
}


/* =====================================================================
   UNIFIED FLOATING BACK BUTTONS + ORDER BUTTON FIX
   Every floating back button (product, seller shop, order summary,
   payment, OTP) shares one position, size and look. Position/size are
   defined once here so they can never drift apart again.
   ===================================================================== */
@media (max-width:480px){
  #mobile-app .m-pd-back-btn,
  #mobile-app .m-shop-back-btn,
  #mobile-app .m-ord-back-btn,
  #mobile-app .m-pay-back-btn,
  #mobile-app .m-otp-back-btn{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 20px);
    left:max(20px, calc((100vw - 430px) / 2 + 20px));
    width:36px;
    height:36px;
    padding:0;
    margin:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    color:#111111;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  #mobile-app .m-pd-back-btn svg,
  #mobile-app .m-shop-back-btn svg,
  #mobile-app .m-ord-back-btn svg,
  #mobile-app .m-pay-back-btn svg,
  #mobile-app .m-otp-back-btn svg{
    pointer-events:none; /* taps always land on the button itself */
  }
  body.dark-theme #mobile-app .m-pd-back-btn,
  body.dark-theme #mobile-app .m-shop-back-btn,
  body.dark-theme #mobile-app .m-ord-back-btn,
  body.dark-theme #mobile-app .m-pay-back-btn,
  body.dark-theme #mobile-app .m-otp-back-btn{
    background:rgba(30,30,32,0.78);
    color:#e8e8e8;
  }

  /* Order request button — hard-reset so no inherited/global button styling
     can change it, then the exact design from details.html. */
  #mobile-app .m-pd-order-btn{
    -webkit-appearance:none;
    appearance:none;
    box-sizing:border-box;
    margin:0;
    font:inherit;
    line-height:normal;
    text-transform:none;
    width:100%;
    max-width:250px;
    height:52px;
    min-height:52px;
    background:#ffffff;
    border:1.5px solid #222222;
    border-radius:32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6px 0 22px;
    box-shadow:0 4px 16px rgba(0,0,0,0.06);
    -webkit-tap-highlight-color:transparent;
  }
  #mobile-app .m-pd-order-btn .m-pd-order-text{
    font-size:16px;
    font-weight:600;
    color:#111111;
    letter-spacing:-0.2px;
    line-height:1;
  }
  #mobile-app .m-pd-order-btn .m-pd-order-capsule{
    flex-shrink:0;
    width:62px;
    height:38px;
    background:#ffffff;
    border:1px solid #e0e0e0;
    border-radius:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff5722;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
  }
  #mobile-app .m-pd-order-btn .m-pd-order-capsule svg{
    display:block;
    stroke:currentColor;
    fill:none;
  }
  body.dark-theme #mobile-app .m-pd-order-btn{ background:#1e1e20; border-color:#4a4a4d; }
  body.dark-theme #mobile-app .m-pd-order-btn .m-pd-order-text{ color:#f2f2f2; }
  body.dark-theme #mobile-app .m-pd-order-btn .m-pd-order-capsule{ background:#2a2a2c; border-color:#4a4a4d; }
  #mobile-app .m-pd-order-btn:disabled{ background:#ececec; border-color:rgba(0,0,0,0.12); box-shadow:none; }
  #mobile-app .m-pd-order-btn:disabled .m-pd-order-text,
  #mobile-app .m-pd-order-btn:disabled .m-pd-order-capsule{ color:#a1a1a6; box-shadow:none; }
  body.dark-theme #mobile-app .m-pd-order-btn:disabled{ background:#3a3a3c; border-color:#48484a; }
  body.dark-theme #mobile-app .m-pd-order-btn:disabled .m-pd-order-text,
  body.dark-theme #mobile-app .m-pd-order-btn:disabled .m-pd-order-capsule{ color:#6e6e73; }
}


/* =====================================================================
   FINAL TWEAKS
   ===================================================================== */
@media (max-width:480px){

  /* ---- image viewer: phone-native back replaces the X ---- */
  #lightbox-close{ display:none !important; }

  /* ---- no black offline bar on phones ---- */
  #offline-banner{ display:none !important; }

  /* ---- guest login sheet: size to content so "Continue with Google" is
         always reachable (scrolls inside if the screen is short) ---- */
  #mobile-app .m-pf-login-sheet{
    height:auto;
    max-height:94%;
    display:none;
    flex-direction:column;
  }
  #mobile-app .m-profile-overlay.m-pf-open.m-pf-login-sheet-mode .m-pf-login-sheet{
    display:flex;
  }
  #mobile-app .m-pf-login-sheet .m-pf-screen{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    max-height:100%;
    overflow-y:auto;
    padding:22px 16px calc(32px + env(safe-area-inset-bottom, 0px)) 16px;
  }
  /* small grab handle hinting at pull-down-to-close */
  #mobile-app .m-pf-login-sheet::before{
    content:"";
    display:block;
    flex-shrink:0;
    width:38px;
    height:4px;
    border-radius:999px;
    background:rgba(120,120,128,0.35);
    margin:8px auto 0 auto;
  }

  /* ---- Log in button: very round, orange text, not a filled shape ---- */
  #mobile-app .m-pf-screen #login-submit-btn{
    border-radius:999px;
    background:#ffffff;
    color:var(--m-orange, #ff8c00);
    border:1.5px solid #d2d2d7;
    box-shadow:none;
    font-weight:700;
  }
  #mobile-app .m-pf-screen #login-submit-btn:active{
    background:#fafafa;
  }
  body.dark-theme #mobile-app .m-pf-screen #login-submit-btn{
    background:transparent;
    border-color:#4a4a4d;
  }
}


/* ---- Log in button: no glow / shadow / ring in any state ---- */
@media (max-width:480px){
  #mobile-app .m-pf-screen #login-submit-btn,
  #mobile-app .m-pf-screen #login-submit-btn:hover,
  #mobile-app .m-pf-screen #login-submit-btn:focus,
  #mobile-app .m-pf-screen #login-submit-btn:focus-visible,
  #mobile-app .m-pf-screen #login-submit-btn:active{
    box-shadow:none !important;
    filter:none !important;
    text-shadow:none !important;
    outline:none !important;
    animation:none !important;
    -webkit-tap-highlight-color:transparent;
  }
  #mobile-app .m-pf-screen #login-submit-btn::before,
  #mobile-app .m-pf-screen #login-submit-btn::after{
    content:none !important;
    display:none !important;
    box-shadow:none !important;
  }
}


/* =====================================================================
   MOBILE: banner slideshow, upload carousel, publish card (desktop parity)
   ===================================================================== */
@media (max-width:480px){

  /* ---- hero banner: rounded, shuffled Apple-smooth crossfade ---- */
  #mobile-app .m-hero{ isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(white, black); }
  #mobile-app .m-hero .m-hero-slide{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; border-radius:inherit;
    opacity:0; transform:scale(1.035);
    transition:
      opacity 1600ms cubic-bezier(0.4,0,0.2,1),
      transform 6400ms cubic-bezier(0.16,1,0.3,1);
    will-change:opacity,transform;
    pointer-events:none; user-select:none; -webkit-user-drag:none;
  }
  #mobile-app .m-hero .m-hero-slide.show{ opacity:1; transform:scale(1); }

  /* ---- screens ease in like the desktop wizard tiles ---- */
  #mobile-app .m-up-screen.active{ animation:mUpScreenIn .45s cubic-bezier(0.16,1,0.3,1) both; }
  #mobile-app #m-up-screen-source.active{ animation:none; }
  @keyframes mUpScreenIn{
    from{ opacity:0; transform:translateX(18px) scale(.985); }
    to{ opacity:1; transform:none; }
  }

  /* ---- photo row = horizontal carousel (never grows the screen) ---- */
  #mobile-app .m-up-photo-row{
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    padding:2px 2px 4px;
    gap:12px;
  }
  #mobile-app .m-up-photo-thumb,
  #mobile-app .m-up-photo-add{
    width:calc((100% - 24px) / 3.25);
    height:auto;
    aspect-ratio:1/1;
    min-width:92px;
    border-radius:20px;
    scroll-snap-align:start;
  }
  #mobile-app .m-up-photo-thumb{ animation:mUpThumbIn .4s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes mUpThumbIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }

  /* ---- publish screen: frosted backdrop + desktop-style card ---- */
  #mobile-app #m-up-screen-progress{
    background:rgba(238,238,238,.55);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  #mobile-app .m-up-progress-wrap{ gap:14px; width:100%; }
  #mobile-app .m-up-pub-card{
    display:flex; flex-direction:column; align-items:center; gap:18px;
    width:100%; max-width:300px;
    padding:32px 28px 26px;
    background:#eeeeee; border:1px solid #dcdcdc; border-radius:32px;
    box-shadow:0 24px 60px rgba(0,0,0,.15);
    animation:mUpCardIn .5s cubic-bezier(0.16,1,0.3,1) both;
  }
  @keyframes mUpCardIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
  #mobile-app .m-up-pub-card .m-up-ring-wrap{ width:132px; height:132px; margin-bottom:0; }
  #mobile-app .m-up-ring-bg{ stroke:#dcdcdc; }
  #mobile-app .m-up-ring-fg{ transition:stroke .3s ease; }
  #mobile-app .m-up-ring-percent{ font-family:"Outfit",-apple-system,sans-serif; transition:opacity .3s ease, transform .3s ease; }
  #mobile-app .m-up-ring-check{
    position:absolute; inset:0; margin:auto; width:52px; height:52px;
    color:#12b76a; opacity:0; transform:scale(.6);
    transition:opacity .35s ease, transform .45s cubic-bezier(0.34,1.56,0.64,1);
  }
  #mobile-app .m-up-progress-wrap.done .m-up-ring-percent{ opacity:0; transform:scale(.8); }
  #mobile-app .m-up-progress-wrap.done .m-up-ring-check{ opacity:1; transform:scale(1); }
  #mobile-app .m-up-progress-wrap.done .m-up-ring-fg{ stroke:#12b76a; }
  #mobile-app .m-up-pub-card .m-up-item-card{ background:#e4e4e4; max-width:none; }
  #mobile-app .m-up-pub-cancel{
    width:112px; height:38px; border:none; border-radius:19px;
    background:#e4e4e4; color:#111; font-family:"Outfit",-apple-system,sans-serif;
    font-size:14px; font-weight:600; cursor:pointer;
    transition:background .2s ease, transform .15s ease, opacity .3s ease;
    animation:mUpCardIn .5s .08s cubic-bezier(0.16,1,0.3,1) both;
  }
  #mobile-app .m-up-pub-cancel:active{ transform:scale(.97); }
  #mobile-app .m-up-pub-cancel:disabled{ opacity:.4; cursor:default; }
  #mobile-app .m-up-progress-wrap.done .m-up-pub-cancel{ visibility:hidden; }

  #mobile-app .m-up-success-check{ animation:mUpPop .5s cubic-bezier(0.34,1.56,0.64,1) both; }
  @keyframes mUpPop{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:none; } }

  /* ---- dark theme ---- */
  body.dark-theme #mobile-app .m-up-screen{ background:#121212; }
  body.dark-theme #mobile-app #m-up-screen-source{ background:transparent; }
  body.dark-theme #mobile-app #m-up-screen-progress{ background:rgba(0,0,0,.45); }
  body.dark-theme #mobile-app .m-up-pub-card{ background:#1c1c1e; border-color:#2c2c2e; box-shadow:0 24px 60px rgba(0,0,0,.55); }
  body.dark-theme #mobile-app .m-up-ring-bg{ stroke:#2c2c2e; }
  body.dark-theme #mobile-app .m-up-ring-percent{ color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-pub-card .m-up-item-card{ background:#2c2c2e; }
  body.dark-theme #mobile-app .m-up-item-title,
  body.dark-theme #mobile-app .m-up-success-title,
  body.dark-theme #mobile-app .m-up-error-title{ color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-item-sub,
  body.dark-theme #mobile-app .m-up-success-sub{ color:#a8a8ad; }
  body.dark-theme #mobile-app .m-up-pub-cancel{ background:#2c2c2e; color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-progress-wrap.done .m-up-ring-fg{ stroke:#32d74b; }
  body.dark-theme #mobile-app .m-up-ring-check{ color:#32d74b; }
  body.dark-theme #mobile-app .m-up-nav-bar{ color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-nav-back{ background:#2c2c2e; }
  body.dark-theme #mobile-app .m-up-nav-back svg path{ stroke:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-field input,
  body.dark-theme #mobile-app .m-up-field select,
  body.dark-theme #mobile-app .m-up-field textarea,
  body.dark-theme #mobile-app .m-up-stepper{ background:#242426; color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-stepper button,
  body.dark-theme #mobile-app .m-up-condition-opt{ color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-condition-opt{ background:#1c1c1e; border-color:#3a3a3c; }
  body.dark-theme #mobile-app .m-up-condition-opt.active{ color:var(--m-orange); border-color:var(--m-orange); }
  body.dark-theme #mobile-app .m-up-photo-add{ border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.03); }
  body.dark-theme #mobile-app .m-up-preview-card{ background:#1c1c1e; }
  body.dark-theme #mobile-app .m-up-preview-title{ color:#f5f5f7; }
}
@media (prefers-reduced-motion:reduce){
  #mobile-app .m-hero .m-hero-slide{ transition-duration:.01s; transform:none; }
  #mobile-app .m-up-screen.active,#mobile-app .m-up-pub-card,#mobile-app .m-up-pub-cancel,#mobile-app .m-up-photo-thumb{ animation:none; }
}

/* =====================================================================
   MOBILE: rounded shuffled banner + upload flow matching desktop wizard
   ===================================================================== */
@media (max-width:480px){

  /* ---- Home banner: rounded, crossfading slideshow ---- */
  #mobile-app .m-hero{
    margin:10px 14px 0 14px;
    border-radius:22px;
    overflow:hidden;
    isolation:isolate;
  }
  #mobile-app .m-hero .m-hero-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    border-radius:inherit;
    opacity:0;
    transform:scale(1.035);
    transition:opacity 1.6s cubic-bezier(.4,0,.2,1), transform 6.4s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }
  #mobile-app .m-hero .m-hero-slide.show{ opacity:1; transform:scale(1); }

  /* ---- Screens: same soft entrance as the desktop wizard tiles ---- */
  #mobile-app .m-up-screen.active:not(#m-up-screen-source){
    animation:mUpScreenIn .45s cubic-bezier(.16,1,.3,1);
  }
  @keyframes mUpScreenIn{
    from{ opacity:0; transform:translateY(14px) scale(.985); }
    to{ opacity:1; transform:none; }
  }
  #mobile-app .m-up-screen:not(#m-up-screen-source){ background:#eeeeee; }

  /* ---- Photos: horizontal snapping carousel (never grows the screen) ---- */
  #mobile-app .m-up-photo-row{
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    padding:2px;
  }
  #mobile-app .m-up-photo-add,
  #mobile-app .m-up-photo-thumb{
    scroll-snap-align:start;
    width:calc((100% - 20px) / 3.15);
    height:auto;
    aspect-ratio:1/1;
    flex:0 0 calc((100% - 20px) / 3.15);
    border-radius:20px;
  }
  #mobile-app .m-up-photo-thumb{ background:#fff; border:1px solid #ccc; }
  #mobile-app .m-up-photo-add{ background:#e4e4e4; border:1px solid #ccc; color:#111; font-weight:600; font-size:13px; }

  /* ---- Fields look like the desktop sheet ---- */
  #mobile-app .m-up-field input,
  #mobile-app .m-up-field select,
  #mobile-app .m-up-field textarea,
  #mobile-app .m-up-stepper{ background:#fff; border:1px solid #dcdcdc; }
  #mobile-app .m-up-primary-btn.enabled{ background:#222; }

  /* ---- Publishing: blurred stage, desktop-style card, small Cancel ---- */
  #mobile-app #m-up-screen-progress{
    background:rgba(238,238,238,.72);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  #mobile-app .m-up-progress-wrap{ gap:14px; }
  #mobile-app .m-up-pub-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    width:min(300px, 84vw);
    padding:32px 26px 24px;
    background:#eeeeee;
    border:1px solid #dcdcdc;
    border-radius:32px;
    box-shadow:0 24px 60px rgba(0,0,0,.15);
    animation:mUpCardIn .5s cubic-bezier(.16,1,.3,1);
  }
  @keyframes mUpCardIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
  #mobile-app .m-up-pub-card .m-up-ring-wrap{ width:132px; height:132px; margin:0; }
  #mobile-app .m-up-ring-bg{ stroke:#dcdcdc; }
  #mobile-app .m-up-ring-fg{ stroke:#ff8c00; transition:stroke .3s ease; }
  #mobile-app .m-up-ring-percent{ transition:opacity .3s ease, transform .3s ease; }
  #mobile-app .m-up-ring-check{
    position:absolute; left:50%; top:50%;
    width:46px; height:46px; margin:-23px 0 0 -23px;
    color:#12b76a; opacity:0; transform:scale(.8);
    transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  #mobile-app .m-up-progress-wrap.done .m-up-ring-percent{ opacity:0; transform:scale(.8); }
  #mobile-app .m-up-progress-wrap.done .m-up-ring-check{ opacity:1; transform:scale(1); }
  #mobile-app .m-up-progress-wrap.done .m-up-ring-fg{ stroke:#12b76a; }
  #mobile-app .m-up-pub-card .m-up-item-card{ background:#e4e4e4; max-width:none; }
  #mobile-app .m-up-pub-cancel{
    width:112px; height:38px; border:none; border-radius:19px;
    background:#e4e4e4; color:#111; font-size:14px; font-weight:600;
    font-family:inherit; cursor:pointer;
    animation:mUpCardIn .6s cubic-bezier(.16,1,.3,1);
    transition:background .2s ease, transform .15s ease, opacity .3s ease;
  }
  #mobile-app .m-up-pub-cancel:active{ transform:scale(.97); }
  #mobile-app .m-up-pub-cancel:disabled{ opacity:.4; cursor:default; }
  #mobile-app .m-up-progress-wrap.done .m-up-pub-cancel{ visibility:hidden; }
  #mobile-app .m-up-success-check{ animation:mUpPop .55s cubic-bezier(.34,1.56,.64,1); }
  @keyframes mUpPop{ from{ transform:scale(.5); opacity:0; } to{ transform:none; opacity:1; } }

  /* ---- Dark theme ---- */
  body.dark-theme #mobile-app .m-up-screen:not(#m-up-screen-source){ background:#1c1c1e; }
  body.dark-theme #mobile-app #m-up-screen-progress{ background:rgba(0,0,0,.5); }
  body.dark-theme #mobile-app .m-up-nav-bar{ color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-nav-back{ background:#2c2c2e; }
  body.dark-theme #mobile-app .m-up-nav-back svg path{ stroke:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-field input,
  body.dark-theme #mobile-app .m-up-field select,
  body.dark-theme #mobile-app .m-up-field textarea,
  body.dark-theme #mobile-app .m-up-stepper{ background:#2c2c2e; border-color:#3a3a3c; color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-stepper button{ color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-condition-opt{ background:#2c2c2e; border-color:#3a3a3c; color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-condition-opt.active{ border-color:#ff8c00; color:#ff8c00; }
  body.dark-theme #mobile-app .m-up-photo-thumb{ background:#2c2c2e; border-color:#3a3a3c; }
  body.dark-theme #mobile-app .m-up-photo-add{ background:#2c2c2e; border-color:#3a3a3c; color:#f5f5f7; }
  body.dark-theme #mobile-app .m-up-primary-btn.enabled{ background:#f5f5f7; color:#1c1c1e; }
  body.dark-theme #mobile-app .m-up-preview-card{ background:#2c2c2e; }
  body.dark-theme #mobile-app .m-up-pub-card{ background:#1c1c1e; border-color:#2c2c2e; box-shadow:0 24px 60px rgba(0,0,0,.55); }
  body.dark-theme #mobile-app .m-up-ring-bg{ stroke:#2c2c2e; }
  body.dark-theme #mobile-app .m-up-pub-card .m-up-item-card{ background:#2c2c2e; }
  body.dark-theme #mobile-app .m-up-ring-check{ color:#32d74b; }
  body.dark-theme #mobile-app .m-up-progress-wrap.done .m-up-ring-fg{ stroke:#32d74b; }
  body.dark-theme #mobile-app .m-up-pub-cancel{ background:#2c2c2e; color:#f5f5f7; }
}

/* Mobile banner: square, edge-to-edge (no rounded corners) */
@media (max-width:480px){
  #mobile-app .m-hero{ margin:0; border-radius:0; }
  #mobile-app .m-hero .m-hero-slide{ border-radius:0; }
}

/* =====================================================================
   Upload on phones = the desktop listing wizard, sized for a phone
   ===================================================================== */
@media (max-width:480px){
  #listing-sheet-overlay.modal-overlay{
    z-index:2500;
    align-items:center;
    padding:0 12px;
  }
  #listing-sheet-overlay .listing-sheet{
    width:100%;
    max-width:430px;
    max-height:92dvh;
    padding:28px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius:28px;
  }
  #listing-sheet-overlay .listing-tile-title{ font-size:19px; margin-bottom:18px; }
  #listing-sheet-overlay .listing-action-btn{ max-width:none; }
  #listing-sheet-overlay input,
  #listing-sheet-overlay textarea,
  #listing-sheet-overlay select{ font-size:16px; } /* stops iOS zoom-on-focus */
  .listing-publish-card{ width:min(300px, 84vw); padding:30px 24px 24px; }
  #delete-listing-modal.modal-overlay{ padding:0 12px; }
}

/* =====================================================================
   LISTING DETAILS SHEET (bottom pop-up after crop) — design from flow.html,
   app font + app easing, scoped so it can't leak into anything else.
   ===================================================================== */
@media (max-width:480px){
  #m-fl-backdrop{
    position:fixed; inset:0; z-index:2400;
    background:rgba(0,0,0,.35);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; pointer-events:none;
    transition:opacity .35s ease;
  }
  #m-fl-backdrop.m-fl-show{ opacity:1; pointer-events:auto; }

  #m-fl-sheet.sheet-modal{
    position:fixed; left:50%; bottom:8px; z-index:2450;
    width:calc(100% - 16px); max-width:414px;
    height:min(720px, 88dvh);
    margin-left:calc(min(100% - 16px, 414px) / -2);
    background:#f7f7f8;
    border-radius:36px;
    box-shadow:0 25px 70px rgba(0,0,0,.45);
    display:none; flex-direction:column;
    padding:12px 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
    overflow:hidden;
    transform:translateY(calc(100% + 24px));
    transition:transform .45s cubic-bezier(.16,1,.3,1);
  }
  #m-fl-sheet.sheet-modal.m-fl-open{ transform:translateY(0); }

  #m-fl-sheet, #m-fl-sheet *{
    box-sizing:border-box; margin:0; padding:0;
    font-family:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  #m-fl-sheet .grab-handle{ width:60px; height:5px; background:#d0d0d5; border-radius:3px; margin:4px auto 16px auto; flex-shrink:0; }
  #m-fl-sheet .viewport-mask{ width:100%; height:100%; overflow:hidden; position:relative; display:flex; flex-direction:column; }
  #m-fl-sheet .screens-track{ display:flex; width:300%; height:100%; transition:transform .45s cubic-bezier(.16,1,.3,1); }
  #m-fl-sheet .screen-page{ width:33.3333%; flex:0 0 33.3333%; height:100%; display:flex; flex-direction:column; position:relative; overflow-y:auto; padding-right:4px; }
  #m-fl-sheet .back-btn-pill{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#666; cursor:pointer; margin-bottom:10px; width:fit-content; }
  #m-fl-sheet .page-title{ font-size:22px; font-weight:700; color:#000; line-height:1.25; margin-bottom:18px; letter-spacing:-.3px; }
  #m-fl-sheet .field-label{ font-size:13px; font-weight:600; color:#333; margin-bottom:6px; }
  #m-fl-sheet .form-group{ margin-bottom:18px; }
  #m-fl-sheet .pill-textarea-box{ width:100%; min-height:44px; max-height:80px; background:transparent; border:1.5px solid #d0d0d5; border-radius:22px; padding:11px 16px; font-size:16px; font-weight:500; color:#000; outline:none; resize:none; line-height:1.3; transition:border-color .2s ease, box-shadow .2s ease; }
  #m-fl-sheet .pill-textarea-box:focus{ border-color:#000; box-shadow:0 0 0 2px rgba(0,0,0,.05); }
  #m-fl-sheet .price-combined-pill{ width:100%; height:44px; background:transparent; border:1.5px solid #d0d0d5; border-radius:22px; padding:3px 4px 3px 16px; display:flex; align-items:center; justify-content:space-between; transition:border-color .2s ease, box-shadow .2s ease; }
  #m-fl-sheet .price-combined-pill:focus-within{ border-color:#000; box-shadow:0 0 0 2px rgba(0,0,0,.05); }
  #m-fl-sheet .price-field-input{ border:none; background:transparent; font-size:16px; font-weight:500; color:#000; width:100%; outline:none; }
  #m-fl-sheet .capsule-arrow-btn{ width:60px; height:34px; background:#000; border-radius:17px; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; flex-shrink:0; transition:transform .15s ease, background-color .2s ease; }
  #m-fl-sheet .capsule-arrow-btn:active{ transform:scale(.96); }
  #m-fl-sheet .single-capsule-track{ position:relative; display:flex; align-items:center; width:170px; height:44px; background:transparent; border:1.5px solid #d0d0d5; border-radius:22px; padding:3px; margin-bottom:20px; cursor:pointer; user-select:none; }
  #m-fl-sheet .sliding-capsule-bg{ position:absolute; top:3px; left:3px; width:80px; height:35px; background:#000; border-radius:18px; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:transform .35s cubic-bezier(.16,1,.3,1); }
  #m-fl-sheet .single-capsule-track.selected-used .sliding-capsule-bg{ transform:translateX(80px); }
  #m-fl-sheet .capsule-option{ position:relative; z-index:2; flex:1; text-align:center; font-size:14px; font-weight:700; color:#555; transition:color .2s ease; }
  #m-fl-sheet .capsule-option.active{ color:#fff; }
  #m-fl-sheet .description-card-container{ width:100%; height:160px; background:transparent; border:1.5px solid #d0d0d5; border-radius:24px; padding:16px; position:relative; display:flex; flex-direction:column; transition:border-color .2s ease, box-shadow .2s ease; }
  #m-fl-sheet .description-card-container:focus-within{ border-color:#000; box-shadow:0 0 0 2px rgba(0,0,0,.05); }
  #m-fl-sheet .description-textarea{ width:100%; height:85px; border:none; background:transparent; outline:none; resize:none; font-size:16px; font-weight:500; color:#000; line-height:1.35; }
  #m-fl-sheet .description-textarea::placeholder{ color:#888; font-weight:400; }
  #m-fl-sheet .card-bottom-right-btn{ position:absolute; bottom:12px; right:12px; }
  #m-fl-sheet .preview-image-box{ width:100%; height:185px; border-radius:20px; overflow:hidden; margin-bottom:14px; background:#111520; flex-shrink:0; }
  #m-fl-sheet .preview-image-box img{ width:100%; height:100%; max-width:none; object-fit:cover; display:block; }
  #m-fl-sheet .preview-price-text{ font-size:20px; font-weight:700; color:#000; margin-bottom:4px; }
  #m-fl-sheet .preview-title-text{ font-size:18px; font-weight:600; color:#000; margin-bottom:8px; word-break:break-word; }
  #m-fl-sheet .preview-bold-spec-text{ font-size:13px; font-weight:700; color:#000; line-height:1.35; margin-bottom:4px; word-break:break-word; }
  #m-fl-sheet .preview-body-desc-text{ font-size:13px; font-weight:400; color:#333; line-height:1.35; margin-bottom:16px; word-break:break-word; }
  #m-fl-sheet .bottom-cta-wrap{ margin-top:auto; padding-top:8px; padding-bottom:8px; }
  #m-fl-sheet .post-pill-btn{ width:100%; height:52px; background:#000; color:#fff; border:none; border-radius:26px; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, transform .15s ease; }
  #m-fl-sheet .post-pill-btn:active{ transform:scale(.98); }

  /* uploading stage (circle) */
  #m-fl-stage{
    position:fixed; inset:0; z-index:2600;
    display:none; align-items:center; justify-content:center;
    background:rgba(238,238,238,.72);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    opacity:0; transition:opacity .35s ease;
    padding:20px;
  }
  #m-fl-stage.m-fl-show{ display:flex; opacity:1; animation:mUpScreenIn .45s cubic-bezier(.16,1,.3,1); }
  #m-fl-stage .m-up-success-wrap,
  #m-fl-stage .m-up-error-wrap{ text-align:center; }

  /* dark theme */
  body.dark-theme #m-fl-sheet.sheet-modal{ background:#1c1c1e; }
  body.dark-theme #m-fl-sheet .grab-handle{ background:#48484a; }
  body.dark-theme #m-fl-sheet .page-title,
  body.dark-theme #m-fl-sheet .preview-price-text,
  body.dark-theme #m-fl-sheet .preview-title-text,
  body.dark-theme #m-fl-sheet .preview-bold-spec-text,
  body.dark-theme #m-fl-sheet .pill-textarea-box,
  body.dark-theme #m-fl-sheet .price-field-input,
  body.dark-theme #m-fl-sheet .description-textarea{ color:#f5f5f7; }
  body.dark-theme #m-fl-sheet .field-label,
  body.dark-theme #m-fl-sheet .preview-body-desc-text{ color:#c7c7cc; }
  body.dark-theme #m-fl-sheet .back-btn-pill{ color:#a8a8ad; }
  body.dark-theme #m-fl-sheet .pill-textarea-box,
  body.dark-theme #m-fl-sheet .price-combined-pill,
  body.dark-theme #m-fl-sheet .single-capsule-track,
  body.dark-theme #m-fl-sheet .description-card-container{ border-color:#3a3a3c; }
  body.dark-theme #m-fl-sheet .pill-textarea-box:focus,
  body.dark-theme #m-fl-sheet .price-combined-pill:focus-within,
  body.dark-theme #m-fl-sheet .description-card-container:focus-within{ border-color:#f5f5f7; box-shadow:none; }
  body.dark-theme #m-fl-sheet .capsule-arrow-btn,
  body.dark-theme #m-fl-sheet .sliding-capsule-bg,
  body.dark-theme #m-fl-sheet .post-pill-btn{ background:#f5f5f7; color:#1c1c1e; }
  body.dark-theme #m-fl-sheet .capsule-option{ color:#a8a8ad; }
  body.dark-theme #m-fl-sheet .capsule-option.active{ color:#1c1c1e; }
  body.dark-theme #m-fl-stage{ background:rgba(0,0,0,.5); }
}

/* =====================================================================
   FIXES: sheet rises from the bottom exactly like the login sheet,
   no leaking neighbour screens, tick fixed, stage as a bottom sheet
   ===================================================================== */
@media (max-width:480px){
  #m-fl-backdrop{
    background:rgba(0,0,0,.45);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    transition:opacity .28s ease;
  }
  #m-fl-sheet.sheet-modal{
    left:50%; right:auto; bottom:0;
    width:100%; max-width:430px; margin-left:0;
    height:min(720px, 82dvh);
    border-radius:28px 28px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.18);
    transform:translate(-50%, 100%);
    transition:transform .32s cubic-bezier(.32,.72,0,1);
    padding:12px 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
    will-change:transform;
  }
  #m-fl-sheet.sheet-modal.m-fl-open{ transform:translate(-50%, 0); }
  #m-fl-sheet .viewport-mask{ contain:paint; clip-path:inset(0); flex:1; min-height:0; height:auto; }
  #m-fl-sheet .screens-track{ transition:transform .32s cubic-bezier(.32,.72,0,1); }
  /* only the current screen is visible/focusable, so neighbours can never show */
  #m-fl-sheet .screen-page{
    visibility:hidden;
    transition:visibility 0s linear .32s;
    padding-bottom:8px;
  }
  #m-fl-sheet .screen-page.m-fl-on{ visibility:visible; transition-delay:0s; }

  /* tick: the ring-wrap svg rule was stretching and rotating it */
  #mobile-app .m-up-ring-wrap svg.m-up-ring-check{
    position:absolute; left:50%; top:50%;
    width:46px; height:46px; margin:-23px 0 0 -23px;
    transform:scale(.8);
  }
  #mobile-app .m-up-progress-wrap.done .m-up-ring-wrap svg.m-up-ring-check{ transform:scale(1); opacity:1; }
  #mobile-app .m-up-success-check svg{ display:block; width:34px; height:34px; transform:none; }

  /* uploading / success / error = bottom sheet, same motion as login */
  #m-fl-stage{
    display:block; padding:0;
    background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    pointer-events:none; visibility:hidden; opacity:1; animation:none;
    transition:visibility 0s linear .32s;
  }
  #m-fl-stage::before{
    content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);
    opacity:0; transition:opacity .28s ease;
  }
  #m-fl-stage.m-fl-show{ visibility:visible; pointer-events:auto; transition-delay:0s; animation:none; }
  #m-fl-stage.m-fl-show::before{ opacity:1; }
  #m-fl-panel{
    position:absolute; left:50%; bottom:0;
    width:100%; max-width:430px; height:min(560px, 74dvh);
    background:#f7f7f8;
    border-radius:28px 28px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.18);
    transform:translate(-50%, 100%);
    transition:transform .32s cubic-bezier(.32,.72,0,1);
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow:hidden;
  }
  #m-fl-stage.m-fl-show #m-fl-panel{ transform:translate(-50%, 0); }
  #m-fl-panel .m-up-progress-wrap,
  #m-fl-panel .m-up-success-wrap,
  #m-fl-panel .m-up-error-wrap{ width:100%; align-items:center; }
  #m-fl-panel .m-up-pub-card{ background:transparent; border:none; box-shadow:none; animation:none; padding:8px 0 4px; }
  #m-fl-panel .m-up-pub-card .m-up-item-card{ background:#ececef; }
  body.dark-theme #m-fl-panel{ background:#1c1c1e; }
  body.dark-theme #m-fl-panel .m-up-pub-card .m-up-item-card{ background:#2c2c2e; }
  body.dark-theme #m-fl-stage::before{ background:rgba(0,0,0,.6); }
}