/* RFC-006 (2026-05-10 Zain) — added by Zain — don't remove
   PWA-only layout overrides. Loaded LAST in <head> so we win the cascade
   without needing !important on most rules.

   PWA-ONLY IMPACT — by construction:
     - All rules are wrapped in `@media (display-mode: standalone)` so desktop
       browser tabs match nothing inside this file.
     - `body.pwa-mode` scoped rules need the JS class set by pwa-mode.js,
       which only adds the class for installed PWAs.

   OPTION B (Zain confirmed 2026-05-10): tablet-and-up parity.
     - PWA viewport ≥ 700 px wide → desktop layout
     - PWA viewport <  700 px wide (small phones) → no override; falls back
       to the existing responsive mobile layout. Phone PWA stays mobile-friendly.

   To revert this entire RFC: delete this file + delete pwa-mode.js +
   remove the <link>/<script> tags from base.html and base_public.html.
*/

/* ════════════════════════════════════════════════════════════════════
   Phase 1a — Mechanism verification (empty media block).
   When this file loads but matches nothing, desktop is unaffected.
   ════════════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) and (min-width: 700px) {
  /* If you can see the rule below applied (cyan top border), the mechanism works.
     Remove this debug rule before declaring Phase 1a stable. */
  /* body { border-top: 4px solid cyan; } */
}

/* ════════════════════════════════════════════════════════════════════
   Phase 1b — Landing page parity (PWA tablet/desktop only).
   Goal: show the desktop landing layout, not the mobile-collapsed one.
   ════════════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) and (min-width: 700px) {
  /* Top nav: show all items inline, hide the "المزيد" overflow dropdown that
     activates on narrow viewports. */
  .lnav-more-toggle,
  .lnav-more-menu {
    display: none !important;
  }
  /* If the overflow items get hidden by a media query in landing.css when
     window narrows, force them back on for PWA */
  .lnav-overflow-items,
  .lnav-overflow-items > * {
    display: flex !important;
  }

  /* Landing hero: prevent stacking-collapse on narrow PWA viewports.
     (Specific selectors will be tightened after Zain reviews on his iPad PWA.) */
  .landing-hero,
  .lv2-hero,
  .landing-hero-grid,
  .lv2-hero-grid {
    display: grid !important;
  }

  /* Spotlight horizontal strip: keep horizontal, don't stack */
  .spotlight-strip,
  .lv2-spotlight-rail,
  .top-slider {
    flex-direction: row !important;
    overflow-x: auto;
  }
  .spotlight-strip > *,
  .lv2-spotlight-rail > *,
  .top-slider > * {
    flex-shrink: 0;
  }

  /* Card grids: keep multi-column at PWA-tablet width */
  .lv2-card-grid,
  .lv2-cat-grid,
  .lv2-qa-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Phase 1c — Community parity (placeholder, to be filled in next pass).
   Scoped via body.pwa-mode so we can fine-tune even on phone PWA later.
   ════════════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) and (min-width: 700px) {
  /* Community feed: prefer 3-col grid on tablet PWA, not vertical stack */
  body.pwa-mode .community-feed,
  body.pwa-mode .cv2-feed,
  body.pwa-mode .feed-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Phase 1d — Cinema Studio parity (placeholder, to be filled in next pass).
   ════════════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) and (min-width: 700px) {
  /* Cinema Studio horizontal multi-shot timeline: keep horizontal */
  body.pwa-mode .cs-shots-row,
  body.pwa-mode .cs-tabs,
  body.pwa-mode .cs-side-panel {
    /* Selectors verified against cinema_studio.css in next iteration */
  }
}

/* ════════════════════════════════════════════════════════════════════
   Browser-only UI hidden in PWA mode (regardless of viewport).
   Things like "Install AFKAR pro" CTAs that don't make sense once installed.
   ════════════════════════════════════════════════════════════════════ */

body.pwa-mode .browser-only-install-cta,
body.pwa-mode .browser-only-share-bar,
body.pwa-mode .pwa-install-banner {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   RFC-006b (2026-05-10 Zain): Landing card-size flip for phone PWA only.
   Gated to (max-width: 699px) so phones get this; tablet/desktop PWA
   keep the existing landing layout. Mobile browser users unaffected
   (they don't match display-mode: standalone).

   Why: Zain reported that on phone PWA, the .hero-card top carousel
   strip felt too small and the .qa-cards central section felt too big —
   visual hierarchy was inverted vs intent. This flip:
     - .hero-card → 1.2 visible (banner-prominent, peek of next)
     - .qa-cards → 3-col tight grid (compact toolkit row)
   ──────────────────────────────────────────────────────────────────── */

@media (display-mode: standalone) and (max-width: 699px) {
  /* HERO STRIP — make each card ~80% viewport, banner-prominent */
  .hero-track > .hero-card {
    flex: 0 0 80% !important;
  }
  .hero-track {
    gap: 12px !important;
    scroll-snap-type: x mandatory;
  }
  .hero-track > .hero-card {
    scroll-snap-align: start;
  }

  /* QA CARDS — 3-col tight grid (vs default which collapses to 1 or 2 cols) */
  .qa-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .qa-card {
    padding: 6px !important;
    gap: 4px !important;
    border-radius: 12px !important;
  }
  /* Shrink the icon font inside qa-card-media */
  .qa-card-media {
    font-size: 28px !important;
    border-radius: 8px !important;
  }
  /* Title inside qa-card — smaller for compact look */
  .qa-card-title,
  .qa-card span {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* HOTFIX-11 (2026-05-11 Zain): default-hide sidebar elements on all viewports.
   Without this, desktop browsers (>920px) render sidebar HTML inline as
   unstyled text in the page flow. The @media (max-width: 920px) block below
   re-enables on phone via `display: block !important` on .mob-sidebar +
   `display: flex !important` on .mob-menu-btn (HOTFIX-1) + `.mob-overlay.open
   { display: block !important; }` for the overlay. */
.mob-menu-btn,
.mob-overlay,
.mob-sidebar {
  display: none;
}

/* ============================================================
 * RFC-013 (2026-05-11 Zain): PWA-phone mobile landing redesign
 * Gate: @media (max-width: 920px) — viewport-only (HOTFIX-5 2026-05-11 Zain dropped display-mode:standalone clause because Honor MagicOS PWAs do not report standalone display-mode to CSS; phone viewport ≤920px catches all real phone widths whether installed-PWA or mobile browser. Desktop browsers ≥1024px not affected.).
 * All rules use !important to win over landing_v2.css and
 * community_v2.css responsive blocks per existing file convention.
 * ============================================================ */
@media (max-width: 920px) {
  /* §1 Hero carousel — fade crossfade + dots below + Ken Burns */
  .hero-carousel-clip { position: relative !important; aspect-ratio: 16 / 10 !important; height: auto !important; max-height: 60vh !important; overflow: hidden !important; }
  .hero-track { position: relative !important; width: 100% !important; height: 100% !important; display: block !important; transform: none !important; gap: 0 !important; }
  .hero-track > .hero-card { position: absolute !important; inset: 0 !important; opacity: 0 !important; transition: opacity 0.7s ease !important; z-index: 1 !important; flex: none !important; scroll-snap-align: unset !important; }
  .hero-track > .hero-card.hero-active { opacity: 1 !important; z-index: 2 !important; animation: rfc013KenBurns 4s ease-out forwards !important; }
  @keyframes rfc013KenBurns { from { transform: scale(1.06); } to { transform: scale(1); } }
  .hero-dots { position: static !important; margin-top: 14px !important; display: flex !important; justify-content: center !important; gap: 8px !important; }
  .hero-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: rgba(255,255,255,0.4) !important; border: none !important; transition: background 0.3s, transform 0.3s !important; }
  .hero-dot.active { background: #fff !important; transform: scale(1.3) !important; }

  /* §2 Hero title — white stroke */
  .hero-card-title { font-size: 30px !important; font-weight: 900 !important; font-style: italic !important; margin-bottom: 8px !important; letter-spacing: 0.5px !important; font-family: 'Inter', 'Cairo', sans-serif !important; display: inline-block !important; -webkit-text-stroke: 1.5px rgba(255,255,255,0.75) !important; paint-order: stroke fill !important; }

  /* §3 QA panel — HOTFIX-3 (2026-05-11): removed 3 RFC-013 rules (.qa-heading font-size:24, .qa-panel padding:16 14 grid-template-columns:1fr, .qa-cards auto-fill 220px). Boss reported bilingual overlap ("Today?" on Arabic). Reverted to base community_v2.css responsive behaviour. If overlap persists after this revert, it's a pre-existing bug in the lang-toggle flow, not RFC-013. */

  /* §4 GPT 2 — 3-col vertical scroll. .fm-marquee hidden, .fm-vcols shown. */
  .fm-gallery { position: relative !important; z-index: 1 !important; overflow: hidden !important; height: 260px !important; mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%) !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%) !important; }
  /* HOTFIX-3 (2026-05-11): revert GPT 2 to original marquee until vcols can be properly previewed. Boss reported empty black void at this section. Local fm_img_*.png assets confirmed 200 + source structure correct; root cause likely CSS height 260px / mask-image / large PNG load time. Safer to show the known-working .fm-marquee until visual debug is possible. .fm-vcols + its keyframes/.fm-vcol rules stay in this file as dead code; can be re-enabled by flipping these 2 lines back. */
  .fm-gallery .fm-marquee { display: block !important; }
  .fm-gallery .fm-vcols { display: none !important; }
  .fm-vcol { display: flex !important; flex-direction: column !important; flex: 1 !important; min-width: 0 !important; animation: rfc013VColScroll linear infinite !important; }
  .fm-vcol-1 { animation-duration: 28s !important; animation-delay: 0s !important; }
  .fm-vcol-2 { animation-duration: 32s !important; animation-delay: -6s !important; }
  .fm-vcol-3 { animation-duration: 30s !important; animation-delay: -12s !important; }
  .fm-vcol .fm-tile { flex: 0 0 130px !important; height: 130px !important; width: 100% !important; padding-bottom: 10px !important; }
  .fm-vcol .fm-tile img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 12px !important; }
  @keyframes rfc013VColScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

  /* §5 Seedance highlight */
  .sd-highlight { font-size: 56px !important; font-weight: 900 !important; letter-spacing: -1px !important; line-height: 1.25 !important; padding: 6px 4px !important; display: inline-block !important; background: linear-gradient(135deg, #5eead4 0%, #5eead4 50%, #14b8a6 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; -webkit-text-stroke: 1.5px rgba(255,255,255,0.7) !important; paint-order: stroke fill !important; filter: drop-shadow(0 4px 20px rgba(61, 220, 151, 0.4)) !important; }
  .fm-highlight { -webkit-text-stroke: 1.5px rgba(255,255,255,0.7) !important; paint-order: stroke fill !important; }

  /* §6 Character gallery */
  .char-card-1, .char-card-5 { display: none !important; }
  .char-gallery { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
  .char-gallery::-webkit-scrollbar { display: none !important; }

  /* §7 Mobile sidebar + hamburger */
  .lnav-hamburger { display: none !important; }
  .mobile-drawer, .mobile-drawer-backdrop { display: none !important; }
  /* HOTFIX-13 (2026-05-11 Zain): hamburger is an INLINE FLEX CHILD of .landing-nav-inner.
     No fixed positioning. Sits naturally inline alongside logo + language toggle.
     In LTR, CSS `order: -1` flips it to first (leftmost) per Zain's spec.
     Default-hide outside @media (top-level rule above) keeps desktop clean. */
  .mob-menu-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(94, 234, 212, 0.08) !important;
    border: 1px solid rgba(94, 234, 212, 0.3) !important;
    border-radius: 10px !important;
    color: #5eead4 !important;
    font-size: 22px !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
  }
  .mob-menu-btn::before {
    content: "\2630" !important;
    line-height: 1 !important;
  }
  .mob-menu-btn i { display: none !important; }
  .mob-menu-btn:hover,
  .mob-menu-btn:active {
    background: rgba(94, 234, 212, 0.18) !important;
    border-color: rgba(94, 234, 212, 0.55) !important;
  }
  /* In LTR mode, hamburger goes FIRST (leftmost). Order -1 beats default 0. */
  [dir="ltr"] .landing-nav .mob-menu-btn,
  [dir="ltr"] .landing-nav-inner .mob-menu-btn {
    order: -1 !important;
  }
  .mob-overlay { display: none; position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.5) !important; backdrop-filter: blur(4px) !important; z-index: 199 !important; }
  .mob-overlay.open { display: block !important; }
  /* HOTFIX-9 (2026-05-11 Zain): direction-aware sidebar position. Use logical
     property inset-inline-end so RTL puts sidebar on right, LTR on left.
     Switched visibility/opacity gate from transform: translateX(110%) because
     translateX direction doesn't flip with dir attribute — was breaking LTR. */
  .mob-sidebar {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    width: 78vw !important;
    max-width: 320px !important;
    height: 100dvh !important;
    background: #12152a !important;
    transform: translateX(0) !important;
    transition: visibility 0.3s, opacity 0.3s ease, box-shadow 0.3s ease !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    padding: 0 0 40px !important;
    box-shadow: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .mob-sidebar.open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    box-shadow: -20px 0 60px rgba(0,0,0,0.6) !important;
  }
  .msb-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 20px !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; font-size: 20px !important; font-weight: 900 !important; }
  /* HOTFIX-8 (2026-05-11 Zain): force header brand visible inside sidebar context — base.html .brand-text/.brand-pill rules cascade strangely inside .msb-header; explicit overrides ensure brand renders white text + green pill */
  .msb-header > span,
  .msb-header > span > span {
    display: inline-block !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1 !important;
  }
  .msb-header .brand-text {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    margin-left: 6px !important;
  }
  .msb-header .brand-pill {
    background: #3DDC97 !important;
    color: #0d0822 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    display: inline-block !important;
  }
  /* HOTFIX-8 (2026-05-11 Zain): force .msb-close button properly styled (background + size + center) */
  .msb-close {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* HOTFIX-8 (2026-05-11 Zain): force Font Awesome icons visible on every .msb-item — FA cascade was hiding them */
  .msb-item .msb-icon,
  .msb-item i.fas {
    display: inline-block !important;
    width: 22px !important;
    min-width: 22px !important;
    text-align: center !important;
    color: #3DDC97 !important;
    font-size: 16px !important;
    margin-left: 4px !important;
    line-height: 1 !important;
  }
  .msb-close { background: none !important; border: none !important; color: rgba(255,255,255,0.6) !important; font-size: 18px !important; cursor: pointer !important; padding: 6px !important; }
  .msb-section-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important; padding: 16px 20px 6px !important; }
  .msb-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 20px !important; font-size: 15px !important; font-weight: 600 !important; color: rgba(255,255,255,0.85) !important; text-decoration: none !important; transition: background 0.2s !important; }
  .msb-item:hover, .msb-item:active { background: rgba(255,255,255,0.07) !important; }
  .msb-icon { width: 20px !important; text-align: center !important; color: #3DDC97 !important; font-size: 15px !important; }
  .msb-badge { margin-right: auto !important; background: #6d28d9 !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; border-radius: 20px !important; padding: 2px 8px !important; letter-spacing: 0.5px !important; }
  /* HOTFIX-10 (2026-05-11 Zain): green theme for sidebar — uses actual site palette.
     Brand pill matches topbar .lnav-logo-plus #22c55e. Teal #5eead4 alphas for dividers
     and section titles. Mint #3DDC97 for menu icons. Tap-glow at 8% alpha + active-state
     icon shifts to teal #5eead4. */

  /* Brand pill: match the topbar "برو" pill exactly (#22c55e) */
  .mob-sidebar .msb-header .brand-pill {
    background: #22c55e !important;
    color: #0A0718 !important;
  }

  /* Header bottom border: teal tint instead of plain white-alpha */
  .mob-sidebar .msb-header {
    border-bottom: 1px solid rgba(94, 234, 212, 0.18) !important;
  }

  /* Section titles ("الاستوديو" / "المزيد"): teal-tinted */
  .mob-sidebar .msb-section-title {
    color: rgba(94, 234, 212, 0.55) !important;
  }

  /* Close button: teal border instead of plain white-alpha */
  .mob-sidebar .msb-close {
    border-color: rgba(94, 234, 212, 0.25) !important;
  }
  .mob-sidebar .msb-close:hover,
  .mob-sidebar .msb-close:active {
    background: rgba(94, 234, 212, 0.12) !important;
    border-color: rgba(94, 234, 212, 0.5) !important;
  }

  /* Menu item icons: brand mint (#3DDC97) */
  .mob-sidebar .msb-item .msb-icon,
  .mob-sidebar .msb-item i.fas {
    color: #3DDC97 !important;
  }

  /* Menu item tap/hover state: green glow + slight bg shift */
  .mob-sidebar .msb-item {
    transition: background 0.18s ease, color 0.18s ease !important;
    border-inline-start: 3px solid transparent !important;
  }
  .mob-sidebar .msb-item:hover,
  .mob-sidebar .msb-item:active,
  .mob-sidebar .msb-item:focus {
    background: rgba(61, 220, 151, 0.08) !important;
    border-inline-start-color: #3DDC97 !important;
    color: #fff !important;
  }
  .mob-sidebar .msb-item:active .msb-icon,
  .mob-sidebar .msb-item:active i.fas {
    color: #5eead4 !important;
  }

  /* HOTFIX-11 (2026-05-11 Zain): explicit dir-based positions.
     HOTFIX-9's inset-inline-start/end logical properties did not match the
     intended visual outcome on the prod render. Replacing with explicit
     [dir] selectors for deterministic behavior.

     Design intent:
       - Hamburger: OPPOSITE side from the logo (avoid topbar collision).
         In RTL (Arabic), logo is on right -> hamburger goes LEFT.
         In LTR (English), logo is on left -> hamburger goes RIGHT.
       - Sidebar: NATURAL READING START side (same side as logo).
         In RTL (Arabic), sidebar opens from RIGHT.
         In LTR (English), sidebar opens from LEFT.
     This is the "cross-screen sweep" pattern: tap one side, menu slides in from the other. */

  /* HOTFIX-13: removed [dir="rtl"]/[dir="ltr"] .mob-menu-btn fixed-position rules — button no longer position:fixed, lives inline in topbar. */
  [dir="rtl"] .mob-sidebar {
    right: 0 !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
  }
  [dir="ltr"] .mob-sidebar {
    left: 0 !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
  }

  /* HOTFIX-14 (2026-05-11 Zain): restore login + signup buttons in PWA-phone
     viewport (≤920px). Root cause: landing.css line 1352 `.lnav-actions
     .lnav-btn-ghost { display: none; }` (inside @media max-width:1366px) hides
     "Sign In", and line 1361 `.lnav-actions > .lnav-btn:not([onclick*=
     "toggleLnavDropdown"]) { display: none; }` (inside @media max-width:768px)
     hides "ابدأ الآن →". Both fire at our ≤920px gate. Force-show via more-
     specific .landing-nav prefix + !important. */
  .landing-nav .lnav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .landing-nav .lnav-actions .lnav-btn-ghost,
  .landing-nav .lnav-actions .lnav-btn,
  .landing-nav a[href*="auth/login"],
  .landing-nav a[href*="auth/register"] {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-15 (2026-05-11 Zain): topbar inline layout for PWA-phone
   * After H15.1 DOM surgery, .landing-nav-inner direct children are now:
   *   [mob-menu-btn][lnav-hamburger-legacy][logo][lnav-links][lang][Sign In][Register]
   * CSS below hides children 2 + 4 and lays out the visible 5 inline.
   * Flex naturally mirrors in RTL — same DOM, opposite visual flow.
   * ════════════════════════════════════════════════════════════════════ */
  .landing-nav .landing-nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
  }

  /* HOTFIX-13 order:-1 hack no longer needed — DOM order matches both LTR and RTL. */
  [dir="ltr"] .landing-nav .mob-menu-btn,
  [dir="rtl"] .landing-nav .mob-menu-btn {
    order: 0 !important;
  }

  /* HOTFIX-20: Hide desktop nav extras + legacy desktop hamburger in phone topbar.
     Removed .lnav-bell from hide list (was no-op anyway since actual class is
     .z90-bell-btn; bell now shown at order 4 for logged-in users). */
  .landing-nav .lnav-links,
  .landing-nav .lnav-credits,
  .landing-nav .lnav-dashboard-btn,
  .landing-nav .lnav-hamburger {
    display: none !important;
  }

  /* Shrink auth buttons for phone — was desktop-sized 40-48px */
  .landing-nav .lnav-btn-ghost,
  .landing-nav a[href*="auth/login"] {
    font-size: 12px !important;
    padding: 6px 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  .landing-nav .lnav-btn,
  .landing-nav a[href*="auth/register"] {
    font-size: 12px !important;
    padding: 6px 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  /* Shrink language toggle to match */
  .landing-nav .lnav-lang-btn,
  .landing-nav button[onclick*="toggleAppLanguage"] {
    font-size: 12px !important;
    padding: 6px 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
  }

  /* Hamburger button: same height as auth buttons for visual alignment */
  .landing-nav .mob-menu-btn {
    width: 38px !important;
    height: 32px !important;
    min-width: 38px !important;
    min-height: 32px !important;
  }

  /* Logo: ensure it doesn't grow to push others off-screen */
  .landing-nav .lnav-logo {
    flex-shrink: 1 !important;
    max-width: 38vw !important;
    overflow: hidden !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-16 (2026-05-11 Zain): fixes for HOTFIX-15 regressions on
   * Honor V5 folded (~380px). Logo brand pill was being chopped by the
   * 38vw cap. Topbar order was inconsistent (landing.css order rules
   * fighting flex flow). Body horizontal overflow caused QA panel clip.
   * ════════════════════════════════════════════════════════════════════ */

  /* 1. UNCLIP the logo — remove the 38vw cap and overflow:hidden from HOTFIX-15.
        Logo gets natural width. */
  .landing-nav .lnav-logo {
    max-width: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* 2. HOTFIX-20 (2026-05-11 Zain): expanded flex order covering both
        logged-out + logged-in topbar states. Option C layout:
          hamburger → logo → lang → bell → avatar  (logged-in)
          hamburger → logo → lang → Sign In → Register  (logged-out)
        In RTL: order 1 = rightmost, order 5 = leftmost.
        In LTR: order 1 = leftmost, order 5 = rightmost.
        Bell actual selector is .z90-bell-btn / #z90BellMount (NOT .lnav-bell). */
  .landing-nav .mob-menu-btn                              { order: 1 !important; }
  .landing-nav .lnav-logo                                 { order: 2 !important; }
  .landing-nav .lnav-lang-btn,
  .landing-nav button[onclick*="lang"],
  .landing-nav a[onclick*="lang"]                         { order: 3 !important; }

  /* Position 4 — logged-out: Sign In; logged-in: bell */
  .landing-nav .lnav-btn-ghost,
  .landing-nav a[href*="auth/login"],
  .landing-nav .lnav-bell,
  .landing-nav .z90-bell-btn,
  .landing-nav #z90BellMount,
  .landing-nav [class*="bell"],
  .landing-nav [id*="bell"],
  .landing-nav [class*="notif"]                           { order: 4 !important; }

  /* Position 5 — logged-out: ابدأ الآن; logged-in: avatar+dropdown wrap */
  .landing-nav .lnav-btn:not(.lnav-btn-ghost),
  .landing-nav a[href*="auth/register"],
  .landing-nav .lnav-avatar-wrap,
  .landing-nav #lnavAvatarWrap                            { order: 5 !important; }

  /* 3. Further shrink auth + lang buttons so all 5 elements fit at 380px viewport */
  .landing-nav .lnav-btn-ghost,
  .landing-nav a[href*="auth/login"] {
    font-size: 11px !important;
    padding: 5px 9px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  .landing-nav .lnav-btn:not(.lnav-btn-ghost),
  .landing-nav a[href*="auth/register"] {
    font-size: 11px !important;
    padding: 5px 9px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  .landing-nav .lnav-lang-btn,
  .landing-nav button[onclick*="lang"] {
    font-size: 11px !important;
    padding: 5px 7px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  .landing-nav .mob-menu-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 18px !important;
  }

  /* 4. Reduce topbar gaps and padding so content fits */
  .landing-nav .landing-nav-inner {
    gap: 4px !important;
    padding: 0 8px !important;
  }

  /* 5. Prevent BODY horizontal overflow (was causing the QA panel clip).
        HOTFIX-17 amendment: keep overflow-x: hidden but explicitly allow
        overflow-y: visible so the profile dropdown extends below the 64px
        topbar without being clipped. */
  /* HOTFIX-19: remove overflow-x: hidden from .landing-nav entirely.
        CSS spec normalizes `overflow-x: hidden + overflow-y: visible` to
        `overflow: auto` on the visible axis, which clipped the dropdown.
        The topbar is fixed at 100vw width so it doesn't need its own
        horizontal-scroll guard — that guard belongs on body only. */
  .landing-nav {
    overflow: visible !important;
    max-width: 100vw !important;
  }
  .landing-nav-inner {
    overflow: visible !important;
  }
  body {
    overflow-x: hidden !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-17 (2026-05-11 Zain): profile dropdown was rendering BEHIND
   * the hero carousel / clipped by topbar overflow. Root cause: HOTFIX-16
   * added `overflow-x: hidden` to .landing-nav, which per CSS spec causes
   * overflow-y to compute as `auto`, clipping the dropdown that extends
   * below the 64px topbar (dropdown is position:absolute, top: calc(100%+10px)).
   * Fix: explicit overflow-y: visible (above) + z-index: 10000 on dropdown
   * to escape any local stacking context that landing.css may create.
   * ════════════════════════════════════════════════════════════════════ */

  /* Parent topbar must not clip dropdown — handled above with overflow-y: visible */

  /* Force dropdown above everything */
  .lnav-dropdown,
  .lnav-dropdown-menu,
  .profile-menu,
  .user-menu,
  [class*="dropdown"][class*="lnav"],
  [id*="lnavDropdown"] {
    z-index: 10000 !important;
    position: absolute !important;
  }

  /* If the dropdown trigger button creates a stacking context wrapper */
  .lnav-dropdown-wrap,
  .lnav-profile-wrap,
  [class*="dropdown-wrap"] {
    position: relative !important;
    z-index: 9999 !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-18 (2026-05-11 Zain): profile dropdown not appearing at all
   * after HOTFIX-17. Note: .lnav-avatar-wrap IS already position:relative
   * at landing.css line 295, so the original premise (wrap not positioned)
   * is incorrect. But the patch's real value: re-anchor the dropdown to
   * inset-inline-end so it stays inside viewport in RTL (currently anchored
   * to left:0 which in RTL places its anchor at the wrong edge), force
   * !important on .open visibility/opacity to defeat any cascade hide,
   * and explicit display:flex on wrap to defeat any landing.css responsive
   * media that might hide it.
   * ════════════════════════════════════════════════════════════════════ */

  /* Reaffirm positioning context on the wrap (already set in landing.css L295) */
  .landing-nav .lnav-avatar-wrap,
  .landing-nav #lnavAvatarWrap {
    position: relative !important;
  }

  /* Re-anchor dropdown to inline-end + viewport-safe sizing + override z-index */
  .landing-nav .lnav-dropdown,
  .landing-nav #lnavDropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    left: auto !important;
    right: auto !important;
    min-width: 220px !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 10000 !important;
    /* In RTL, inset-inline-end:0 places the dropdown's right edge under the
       avatar's right edge. In LTR, places its left edge under avatar's left
       edge. Both stay inside viewport. */
  }

  /* When .open class is present, override the default hidden state. The
     landing.css .lnav-dropdown.open rule has no !important, so any later
     cascade could hide it — defend with !important here. */
  .landing-nav .lnav-dropdown.open,
  .landing-nav #lnavDropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* Force avatar wrap visible — defends against any landing.css responsive
     @media rule that might hide it inside our 920px gate. */
  .landing-nav .lnav-avatar-wrap {
    display: flex !important;
    align-items: center !important;
  }

  /* HOTFIX-18 H18.2 (superseded by HOTFIX-20 expanded order block above —
     avatar wrap is now at order 5 in the logged-in layout: hamburger, logo,
     lang, bell, avatar). Note kept here for audit trail. */

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-19 (2026-05-11 Zain): dropdown teleport architecture.
   * JS now appendChild(dropdown) to document.body on first toggleLnavDropdown
   * call, escaping ANY parent overflow/stacking-context clipping. Position is
   * computed live via getBoundingClientRect against #lnavAvatarWrap and
   * applied as inline style (position:fixed + top/left/right). CSS below
   * styles the teleported dropdown via body > #lnavDropdown selector
   * (since .landing-nav .lnav-dropdown selectors no longer match after teleport).
   * ════════════════════════════════════════════════════════════════════ */

  body > #lnavDropdown,
  body > .lnav-dropdown {
    z-index: 100000 !important;
    background: rgba(12, 7, 30, 0.98) !important;
    border: 1px solid rgba(61, 220, 151, 0.3) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
    padding: 6px !important;
    min-width: 220px !important;
    max-width: calc(100vw - 16px) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  body > #lnavDropdown.open,
  body > .lnav-dropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-20 (2026-05-11 Zain): logged-in topbar layout — bell + avatar
   * sizing + body horizontal scroll guard regression fix.
   * ════════════════════════════════════════════════════════════════════ */

  /* H20.1 (cont): shrink bell to match other topbar elements (32px height).
     Bell actual class is .z90-bell-btn (NOT .lnav-bell); mount span is
     #z90BellMount. Cover both + defensive attribute selectors. */
  .landing-nav .lnav-bell,
  .landing-nav .z90-bell-btn,
  .landing-nav #z90BellMount,
  .landing-nav #z90BellMount > button,
  .landing-nav [class*="bell"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
  }
  .landing-nav .lnav-bell .lnav-bell-badge,
  .landing-nav .z90-bell-btn [class*="badge"],
  .landing-nav [class*="bell"] [class*="badge"] {
    font-size: 9px !important;
    min-width: 14px !important;
    height: 14px !important;
    padding: 0 3px !important;
  }

  /* H20.1 (cont): shrink avatar wrap so it doesn't blow up the topbar */
  .landing-nav .lnav-avatar-wrap,
  .landing-nav #lnavAvatarWrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
  }
  .landing-nav .lnav-avatar-ring,
  .landing-nav #navCredits {
    width: 36px !important;
    height: 36px !important;
  }
  .landing-nav .lnav-avatar,
  .landing-nav #lnavAvatarBtn {
    width: 32px !important;
    height: 32px !important;
  }

  /* H20.2: restore horizontal scroll guard. H19 removed it from .landing-nav
     intentionally so the dropdown could escape clip; but the body alone wasn't
     enough — hero card / QA panel were overflowing right edge. Strengthen the
     guard at html + body + main content containers (NOT on .landing-nav since
     that would re-introduce the dropdown clip we already solved via teleport). */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  main, .landing-page, .hero-carousel, .qa-panel, .featured-model {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-21 (2026-05-11 Zain): profile dropdown + Z90 notifications panel
   * mobile fit. H21.0 diagnostic confirmed:
   *   - Notification panel actual selector: .z90-panel (#z90Panel)
   *     header: .z90-panel-head, title: .z90-panel-title, mark-all: .z90-panel-mark
   *   - Profile dropdown items: .lnav-dropdown-name / .lnav-dropdown-email
   *     (NOT .lnav-dd-name / .lnav-dd-email as Zain's spec assumed —
   *     those are no-ops; actual selectors added below for coverage).
   * ════════════════════════════════════════════════════════════════════ */

  /* H21.1: profile dropdown — show ALL items with scroll, smaller fonts */
  body > #lnavDropdown,
  body > .lnav-dropdown {
    width: calc(100vw - 16px) !important;
    max-width: 240px !important;
    max-height: calc(100vh - 88px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    font-size: 13px !important;
  }

  /* User header (name + email + credits) inside dropdown.
     Spec selectors + actual class selectors both included. */
  body > #lnavDropdown .lnav-dropdown-user,
  body > .lnav-dropdown .lnav-dropdown-user {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  body > #lnavDropdown .lnav-dropdown-name,
  body > .lnav-dropdown .lnav-dropdown-name,
  body > #lnavDropdown .lnav-dd-name,
  body > .lnav-dropdown .lnav-dd-name {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  body > #lnavDropdown .lnav-dropdown-email,
  body > .lnav-dropdown .lnav-dropdown-email,
  body > #lnavDropdown .lnav-dd-email,
  body > .lnav-dropdown .lnav-dd-email {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  body > #lnavDropdown .lnav-credits-block,
  body > .lnav-dropdown .lnav-credits-block,
  body > #lnavDropdown .lnav-dd-credits,
  body > .lnav-dropdown .lnav-dd-credits {
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
  body > #lnavDropdown .lnav-credits-pct,
  body > .lnav-dropdown .lnav-credits-pct,
  body > #lnavDropdown .lnav-credits-val,
  body > .lnav-dropdown .lnav-credits-val {
    font-size: 11px !important;
  }

  /* Recharge / subscribe button */
  body > #lnavDropdown .lnav-dd-recharge,
  body > .lnav-dropdown .lnav-dd-recharge,
  body > #lnavDropdown .lnav-credits-buy,
  body > .lnav-dropdown .lnav-credits-buy,
  body > #lnavDropdown a[href*="recharge"],
  body > .lnav-dropdown a[href*="recharge"],
  body > #lnavDropdown a[href*="pricing"],
  body > .lnav-dropdown a[href*="pricing"] {
    padding: 8px 12px !important;
    font-size: 13px !important;
    margin: 8px 0 !important;
  }

  /* All menu items inside dropdown */
  body > #lnavDropdown .lnav-dropdown-item,
  body > .lnav-dropdown .lnav-dropdown-item,
  body > #lnavDropdown a,
  body > .lnav-dropdown a {
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body > #lnavDropdown .lnav-dropdown-item svg,
  body > .lnav-dropdown .lnav-dropdown-item svg,
  body > #lnavDropdown a svg,
  body > .lnav-dropdown a svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  /* Section separators */
  body > #lnavDropdown .lnav-dropdown-sep,
  body > .lnav-dropdown .lnav-dropdown-sep {
    margin: 4px 0 !important;
  }

  /* Ensure NO descendant has display:none from cascade (defensive) */
  body > #lnavDropdown.open *,
  body > .lnav-dropdown.open * {
    visibility: visible !important;
  }

  /* ──── H21.2: Z90 notifications panel — fit viewport on phone ──── */

  /* Main panel — actual selector is .z90-panel (#z90Panel) per H21.0 diagnostic.
     Defensive [class*="z90-panel"] also included. */
  .z90-panel,
  #z90Panel,
  .z90-notifications-panel,
  .z90-dropdown,
  [class*="z90-panel"],
  [class*="z90-notifications"] {
    position: fixed !important;
    top: 60px !important;
    inset-inline-start: 8px !important;
    inset-inline-end: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 13px !important;
    z-index: 100000 !important;
    padding: 8px !important;
  }

  /* Panel header (.z90-panel-head + .z90-panel-title + .z90-panel-mark) */
  .z90-panel-head,
  #z90Panel .z90-panel-head,
  [class*="z90-panel"] [class*="head"] {
    padding: 8px !important;
    font-size: 13px !important;
  }
  .z90-panel-title {
    font-size: 13px !important;
  }
  .z90-panel-mark,
  #z90MarkAll,
  .z90-panel [class*="mark"],
  [class*="z90-panel"] [class*="mark"] {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  /* Notification items inside panel */
  .z90-panel .z90-item,
  .z90-panel .z90-notification,
  #z90Panel .z90-item,
  [class*="z90-panel"] [class*="item"],
  [class*="z90-panel"] [class*="notification"] {
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Notification title + body text inside items */
  .z90-panel .z90-item *,
  #z90Panel .z90-item *,
  [class*="z90-panel"] [class*="item"] * {
    font-size: 12px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Close X buttons on each notification */
  .z90-panel .z90-close,
  #z90Panel .z90-close,
  [class*="z90-panel"] [class*="close"] {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-22 (2026-05-11 Zain): force display:flex on profile dropdown
   * menu items.
   * H22.0 diagnostic found NO landing.css @media rule hiding these items
   * (Zain's premise was incorrect). True root cause: H21 forced display:flex
   * on `<a>` elements inside the teleported dropdown via `body > .lnav-dropdown a`,
   * but the logout uses `<button type="submit" class="lnav-dropdown-item
   * lnav-dropdown-danger">` — a <button>, not <a>. H21's selector missed it.
   * H22's explicit .lnav-dropdown-item + .lnav-dropdown-danger rules cover
   * both element types. Defensive even though landing.css doesn't hide them.
   * ════════════════════════════════════════════════════════════════════ */

  body > #lnavDropdown.open .lnav-dropdown-item,
  body > .lnav-dropdown.open .lnav-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    margin: 2px 0 !important;
  }

  body > #lnavDropdown.open .lnav-dropdown-item:hover,
  body > #lnavDropdown.open .lnav-dropdown-item:active,
  body > .lnav-dropdown.open .lnav-dropdown-item:hover,
  body > .lnav-dropdown.open .lnav-dropdown-item:active {
    background: rgba(61, 220, 151, 0.10) !important;
  }

  body > #lnavDropdown.open .lnav-dropdown-item svg,
  body > .lnav-dropdown.open .lnav-dropdown-item svg {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  body > #lnavDropdown.open .lnav-dropdown-danger,
  body > .lnav-dropdown.open .lnav-dropdown-danger {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #ef4444 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    margin: 2px 0 !important;
  }

  body > #lnavDropdown.open .lnav-dropdown-danger:hover,
  body > #lnavDropdown.open .lnav-dropdown-danger:active,
  body > .lnav-dropdown.open .lnav-dropdown-danger:hover,
  body > .lnav-dropdown.open .lnav-dropdown-danger:active {
    background: rgba(239, 68, 68, 0.10) !important;
  }

  body > #lnavDropdown.open .lnav-dropdown-danger svg,
  body > .lnav-dropdown.open .lnav-dropdown-danger svg {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  body > #lnavDropdown.open .lnav-dropdown-sep,
  body > .lnav-dropdown.open .lnav-dropdown-sep {
    display: block !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin: 6px 4px !important;
    border: none !important;
  }

  /* Generic catch-all: any <a> inside the open dropdown should be visible.
     (Logout <button> covered by .lnav-dropdown-item rule above.) */
  body > #lnavDropdown.open > a,
  body > .lnav-dropdown.open > a {
    display: flex !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-25 (2026-05-11 Zain): user-info layout fix + avatar ring
   * simplification + bell icon defensive styling.
   *
   * H25.0 diagnostic findings:
   *   - .lnav-dropdown-user (name+email) and .lnav-credits-block are
   *     SIBLINGS, not nested. Both direct children of #lnavDropdown.
   *   - Avatar ring uses 42x42 SVG (.lnav-ring-svg) absolutely positioned.
   *   - ⚠️ Bell does NOT use Font Awesome — notifications_z90.js mounts
   *     an inline <svg> directly. The "fa-bell <i> renders empty"
   *     premise was incorrect. The ::before pseudo we add will layer
   *     atop the existing inline SVG (both teal #5eead4, both 18×18).
   *     Visually acceptable but a HOTFIX-26 may want to dedupe.
   * ════════════════════════════════════════════════════════════════════ */

  /* HOTFIX-25 H25.1: user-info section stacks vertically, no overlap */
  body > #lnavDropdown .lnav-dropdown-user,
  body > .lnav-dropdown .lnav-dropdown-user {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body > #lnavDropdown .lnav-dropdown-name,
  body > .lnav-dropdown .lnav-dropdown-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body > #lnavDropdown .lnav-dropdown-email,
  body > .lnav-dropdown .lnav-dropdown-email {
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,0.6) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Credits block — SEPARATE row, full width */
  body > #lnavDropdown .lnav-credits-block,
  body > .lnav-dropdown .lnav-credits-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 12px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
  }
  body > #lnavDropdown .lnav-credits-row,
  body > .lnav-dropdown .lnav-credits-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 11px !important;
    width: 100% !important;
  }
  body > #lnavDropdown .lnav-credits-pct,
  body > .lnav-dropdown .lnav-credits-pct {
    color: rgba(255,255,255,0.7) !important;
    font-size: 11px !important;
  }
  body > #lnavDropdown .lnav-credits-val,
  body > .lnav-dropdown .lnav-credits-val {
    color: #5eead4 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
  }
  body > #lnavDropdown .lnav-credits-bar,
  body > .lnav-dropdown .lnav-credits-bar {
    height: 4px !important;
    width: 100% !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  /* Bonus credits + forecast — separate rows */
  body > #lnavDropdown .lnav-credits-bonus,
  body > .lnav-dropdown .lnav-credits-bonus,
  body > #lnavDropdown .lnav-credits-forecast,
  body > .lnav-dropdown .lnav-credits-forecast {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 4px !important;
    font-size: 11px !important;
  }

  /* Recharge button — full width below credits */
  body > #lnavDropdown .lnav-credits-buy,
  body > .lnav-dropdown .lnav-credits-buy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding: 10px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
  }

  /* HOTFIX-25 H25.2: simplify avatar — hide credits progress ring on phone for cleaner topbar */
  .landing-nav .lnav-ring-svg,
  .landing-nav .lnav-avatar-ring svg {
    display: none !important;
  }
  .landing-nav .lnav-avatar-ring,
  .landing-nav #navCredits {
    border: 2px solid rgba(94, 234, 212, 0.4) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    overflow: hidden !important;
  }

  /* HOTFIX-25 H25.3: bell button styling + defensive inline-SVG fallback.
     NOTE per H25.0 diagnostic: notifications_z90.js already injects an inline
     <svg> bell. The ::before pseudo added below will LAYER on top of it
     (both teal, both 18×18). Cosmetic — may want HOTFIX-26 to dedupe. */
  .landing-nav #z90BellMount > button,
  .landing-nav .z90-bell-btn {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(94, 234, 212, 0.08) !important;
    border: 1px solid rgba(94, 234, 212, 0.3) !important;
    border-radius: 10px !important;
    color: #5eead4 !important;
  }

  /* Hide any Font Awesome <i> bell icon if present (no-op on current markup
     since notifications_z90.js uses inline <svg>, but defensive). */
  .landing-nav .z90-bell-btn i.fas,
  .landing-nav .z90-bell-btn i.fa-bell {
    display: none !important;
  }
  .landing-nav .z90-bell-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
  }

  /* Red badge positioning on top of bell */
  .landing-nav .z90-bell-btn .z90-bell-badge,
  .landing-nav [class*="bell-badge"] {
    position: absolute !important;
    top: -4px !important;
    inset-inline-end: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  /* HOTFIX-26 H26.3: hide the inline <svg> inside z90-bell-btn so only the
     ::before pseudo-element bell SVG renders. Cleaner than the doubled icon
     that resulted from H25.3 (since notifications_z90.js mounts an inline
     <svg> directly, the H25.3 ::before was layering on top of it). */
  .landing-nav .z90-bell-btn > svg,
  .landing-nav #z90BellMount > button > svg {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════════════════════
   * HOTFIX-28 (2026-05-12 Zain): constrain .char-card grid for phone.
   * H28.0 diagnostic finding: parent container is actually .char-gallery
   * (landing_v2.html line 413), NOT .char-grid/.char-row/.char-section
   * as spec assumed (those don't exist). Adding .char-gallery + > .char-card
   * to the rules alongside spec's selectors per the established
   * "add the actual selector — don't replace" pattern.
   * Decorative .char-bg-glow + .footer-glow extend past viewport for
   * radial-gradient effect; overflow-x:clip on body (H27.2) hides them.
   * ════════════════════════════════════════════════════════════════════ */

  /* Cap char-card width so it fits inside viewport */
  .char-card,
  a.char-card,
  .char-card-1,
  .char-card-2,
  .char-card-3,
  .char-card-4 {
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
  }

  /* Images inside char-cards */
  .char-card img,
  .char-card picture,
  .char-card video {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* If parent is a grid/row/gallery, make it horizontally scrollable
     instead of overflowing. .char-gallery is the actual parent per H28.0
     diagnostic; other selectors kept for defense. */
  .char-gallery,
  .char-grid,
  .char-row,
  .char-section,
  [class*="char-grid"],
  [class*="char-row"] {
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .char-gallery::-webkit-scrollbar,
  .char-grid::-webkit-scrollbar,
  .char-row::-webkit-scrollbar,
  .char-section::-webkit-scrollbar,
  [class*="char-grid"]::-webkit-scrollbar,
  [class*="char-row"]::-webkit-scrollbar {
    display: none !important;
  }
  .char-gallery > .char-card,
  .char-grid > .char-card,
  .char-row > .char-card,
  [class*="char-grid"] > .char-card,
  [class*="char-row"] > .char-card {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
   * HOTFIX-29 (2026-05-12 Zain): existing landing_v2.css caps containers
   * at max-width: 400px for narrow phones. At 472px+ viewport (foldable,
   * wider phones, Device Mode), this leaves 72-100px of dead space on
   * one side. Override to use full viewport.
   * ═══════════════════════════════════════════════════════════════════ */

  .landing-page .hero-carousel,
  section.hero-carousel,
  .hero-carousel {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .landing-page .qa-panel,
  .qa-panel,
  .landing-page .featured-model,
  .featured-model {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
  }

  .landing-page .char-gallery,
  .char-gallery {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  nav.landing-nav,
  .landing-nav {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .landing-page > section,
  .landing-page > div {
    max-width: 100% !important;
  }
}

@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .hero-track > .hero-card.hero-active { animation: none !important; transform: none !important; }
  .fm-vcol { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * RFC-015 PHASE-2 (2026-05-12 Zain): PWA-only mobile UI for /create/video.
 * Activates at ≤920px viewport. Hides desktop .app-layout. Shows the
 * #pwaVideoCreate block inserted by Phase-1 with a draggable settings sheet,
 * topbar tabs, history grid, and 4 bottom sheets (model/duration/quality/ratio).
 * Phase-3 JS will wire interactions (drag, sheet open/close, model select, etc).
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  /* ─── Hide desktop layout entirely ─── */
  .app-layout,
  #appLayout,
  .mobile-panel-fab,
  #mobilePanelFab {
    display: none !important;
  }

  /* ─── Show the Phase-1 hidden block (override HTML5 [hidden] attr) ─── */
  #pwaVideoCreate[hidden],
  #pwaVideoCreate {
    display: block !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
    overflow: hidden !important;
    background: #1a1d20 !important;
    color: #f5f3ff !important;
    font-family: 'Cairo', sans-serif !important;
    --pwa-vc-peek: 72px;
    --pwa-vc-green: #3DDC97;
    --pwa-vc-teal: #0d9488;
    --pwa-vc-teal2: #5eead4;
    --pwa-vc-bg: #1a1d20;
    --pwa-vc-bg2: #2a2e35;
    --pwa-vc-bg3: #23272d;
    --pwa-vc-border: rgba(61,220,151,0.15);
    --pwa-vc-border-h: rgba(61,220,151,0.45);
    --pwa-vc-text: #f5f3ff;
    --pwa-vc-muted: #8b7faa;
  }

  /* ─── Topbar tabs (إنشاء / نقل الحركة) ─── */
  #pwaVideoCreate .pwa-vc-topbar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 10px 16px;
    background: rgba(26,29,32,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pwa-vc-border);
    z-index: 10;
  }
  #pwaVideoCreate .pwa-vc-topbar-tabs {
    display: flex; background: rgba(61,220,151,0.07);
    border-radius: 10px; padding: 3px; gap: 2px;
    border: 1px solid var(--pwa-vc-border);
  }
  #pwaVideoCreate .pwa-vc-tab {
    padding: 7px 14px; font-size: 13px; font-weight: 700;
    font-family: 'Cairo', sans-serif; color: var(--pwa-vc-muted);
    background: none; border: none; border-radius: 8px;
    cursor: pointer; transition: background .2s, color .2s;
  }
  #pwaVideoCreate .pwa-vc-tab-active {
    background: var(--pwa-vc-green); color: #1a1d20;
  }

  /* ─── History area (scrollable background) ─── */
  #pwaVideoCreate .pwa-vc-history {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    padding-top: 56px;
    padding-bottom: var(--pwa-vc-peek);
    overflow-y: auto; scrollbar-width: none;
  }
  #pwaVideoCreate .pwa-vc-history::-webkit-scrollbar { display: none; }
  #pwaVideoCreate .pwa-vc-history-inner {
    padding: 20px 16px;
    display: flex; flex-direction: column; gap: 16px;
    min-height: 100%;
  }
  #pwaVideoCreate .pwa-vc-history-heading {
    display: flex; align-items: center; justify-content: space-between;
  }
  #pwaVideoCreate .pwa-vc-history-title {
    font-size: 18px; font-weight: 900; color: var(--pwa-vc-text);
    margin: 0;
  }
  #pwaVideoCreate .pwa-vc-view-all {
    font-size: 13px; color: var(--pwa-vc-muted);
    text-decoration: none; font-weight: 600;
  }
  #pwaVideoCreate .pwa-vc-history-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
  }
  #pwaVideoCreate .pwa-vc-history-item {
    position: relative; border-radius: 14px; overflow: hidden;
    background: var(--pwa-vc-bg2); aspect-ratio: 16/9;
  }
  #pwaVideoCreate .pwa-vc-history-video,
  #pwaVideoCreate .pwa-vc-history-thumb {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  #pwaVideoCreate .pwa-vc-history-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  }
  #pwaVideoCreate .pwa-vc-history-prompt {
    font-size: 11px; color: rgba(255,255,255,0.8);
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #pwaVideoCreate .pwa-vc-history-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 40px 20px;
    background: var(--pwa-vc-bg2);
    border: 1.5px dashed rgba(61,220,151,0.2);
    border-radius: 20px; text-align: center;
    min-height: 200px;
  }
  #pwaVideoCreate .pwa-vc-empty-icon { font-size: 48px; opacity: 0.5; }
  #pwaVideoCreate .pwa-vc-empty-title {
    font-size: 16px; font-weight: 700; color: var(--pwa-vc-muted);
  }
  #pwaVideoCreate .pwa-vc-empty-sub {
    font-size: 13px; color: var(--pwa-vc-muted);
    opacity: 0.7; line-height: 1.6;
  }

  /* ─── Settings Sheet (draggable, collapsed by default) ─── */
  #pwaVideoCreate .pwa-vc-sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 88vh; max-height: calc(100vh - 100px);
    background: var(--pwa-vc-bg3);
    border-top: 1px solid var(--pwa-vc-border);
    border-radius: 22px 22px 0 0;
    z-index: 100;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(calc(100% - var(--pwa-vc-peek)));
    transition: transform 0.42s cubic-bezier(0.32,0.72,0,1);
    will-change: transform;
  }
  #pwaVideoCreate .pwa-vc-sheet[data-state="expanded"] {
    transform: translateY(0) !important;
  }
  #pwaVideoCreate .pwa-vc-sheet-drag {
    flex-shrink: 0; padding: 10px 18px 0;
    cursor: grab; user-select: none;
  }
  #pwaVideoCreate .pwa-vc-sheet-handle {
    width: 36px; height: 4px; border-radius: 4px;
    background: rgba(61,220,151,0.3);
    margin: 0 auto 12px;
  }
  #pwaVideoCreate .pwa-vc-sheet-drag-label {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  #pwaVideoCreate .pwa-vc-sheet-title {
    font-size: 14px; font-weight: 700; color: var(--pwa-vc-muted);
  }
  #pwaVideoCreate .pwa-vc-sheet-arrow {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(61,220,151,0.08);
    border: 1px solid var(--pwa-vc-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--pwa-vc-green); font-size: 12px;
    transition: transform .3s;
  }
  #pwaVideoCreate .pwa-vc-sheet[data-state="expanded"] .pwa-vc-sheet-arrow {
    transform: rotate(180deg);
  }
  #pwaVideoCreate .pwa-vc-sheet-scroll {
    flex: 1; overflow-y: auto;
    padding: 0 16px 100px;
    display: flex; flex-direction: column; gap: 14px;
    scrollbar-width: none; overscroll-behavior: contain;
  }
  #pwaVideoCreate .pwa-vc-sheet-scroll::-webkit-scrollbar { display: none; }

  /* ─── Section labels + cards ─── */
  #pwaVideoCreate .pwa-vc-section-label {
    font-size: 12px; color: var(--pwa-vc-muted);
    font-weight: 600; margin-bottom: 8px;
  }

  /* Model card */
  #pwaVideoCreate .pwa-vc-model-card {
    position: relative; border-radius: 16px; overflow: hidden;
    height: 105px; background: var(--pwa-vc-bg2);
    border: 1px solid var(--pwa-vc-border); cursor: pointer;
  }
  #pwaVideoCreate .pwa-vc-model-bg {
    width: 100%; height: 100%; object-fit: cover; display: block;
    position: absolute; inset: 0;
  }
  #pwaVideoCreate .pwa-vc-model-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,29,32,0.9), transparent 55%);
  }
  #pwaVideoCreate .pwa-vc-model-info {
    position: absolute; bottom: 10px; right: 12px;
    display: flex; align-items: center; gap: 8px;
  }
  #pwaVideoCreate .pwa-vc-model-name {
    font-size: 15px; font-weight: 900; color: var(--pwa-vc-green);
  }
  #pwaVideoCreate .pwa-vc-model-badge {
    background: rgba(61,220,151,0.15); backdrop-filter: blur(8px);
    border: 1px solid rgba(61,220,151,0.3); border-radius: 7px;
    padding: 3px 9px; font-size: 11px; font-weight: 700;
    font-family: 'Inter', sans-serif; color: var(--pwa-vc-green);
  }
  #pwaVideoCreate .pwa-vc-model-change-btn {
    position: absolute; top: 10px; left: 10px;
    background: rgba(61,220,151,0.15); backdrop-filter: blur(8px);
    border: 1px solid rgba(61,220,151,0.3); border-radius: 8px;
    padding: 5px 12px; font-size: 12px; font-weight: 700;
    font-family: 'Cairo', sans-serif; color: var(--pwa-vc-green);
    cursor: pointer;
  }

  /* Frames grid */
  #pwaVideoCreate .pwa-vc-frames-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  #pwaVideoCreate .pwa-vc-frame-picker {
    background: var(--pwa-vc-bg2);
    border: 1.5px dashed rgba(61,220,151,0.2);
    border-radius: 13px; height: 78px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: border-color .2s;
    position: relative;
  }
  #pwaVideoCreate .pwa-vc-frame-picker:active { border-color: var(--pwa-vc-green); }
  #pwaVideoCreate .pwa-vc-frame-picker i {
    font-size: 20px; color: rgba(61,220,151,0.3);
  }
  #pwaVideoCreate .pwa-vc-frame-label {
    font-size: 11px; color: var(--pwa-vc-muted); font-weight: 600;
  }

  /* Toggle row */
  #pwaVideoCreate .pwa-vc-toggle-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--pwa-vc-bg2);
    border: 1px solid var(--pwa-vc-border);
    border-radius: 13px; padding: 13px 14px;
  }
  #pwaVideoCreate .pwa-vc-toggle-info {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
  }
  #pwaVideoCreate .pwa-vc-toggle-title { font-size: 14px; font-weight: 700; }
  #pwaVideoCreate .pwa-vc-toggle-sub { font-size: 11px; color: var(--pwa-vc-muted); }
  #pwaVideoCreate .pwa-vc-switch {
    position: relative; width: 44px; height: 25px; flex-shrink: 0;
  }
  #pwaVideoCreate .pwa-vc-switch input {
    opacity: 0; width: 0; height: 0; position: absolute;
  }
  #pwaVideoCreate .pwa-vc-track {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50px; cursor: pointer;
    transition: background .3s, border-color .3s;
  }
  #pwaVideoCreate .pwa-vc-track::before {
    content: ''; position: absolute;
    width: 19px; height: 19px; left: 3px; top: 50%;
    transform: translateY(-50%);
    background: #fff; border-radius: 50%;
    transition: transform .3s, background .3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  }
  #pwaVideoCreate .pwa-vc-switch input:checked + .pwa-vc-track {
    background: var(--pwa-vc-green); border-color: var(--pwa-vc-green);
  }
  #pwaVideoCreate .pwa-vc-switch input:checked + .pwa-vc-track::before {
    transform: translateY(-50%) translateX(19px);
    background: #1a1d20;
  }

  /* Prompt textarea */
  #pwaVideoCreate .pwa-vc-prompt {
    width: 100%; background: var(--pwa-vc-bg2);
    border: 1px solid var(--pwa-vc-border);
    border-radius: 14px; padding: 14px;
    font-family: 'Cairo', sans-serif; font-size: 14px;
    color: var(--pwa-vc-text); resize: none; height: 105px;
    line-height: 1.7; outline: none;
    transition: border-color .2s; display: block;
  }
  #pwaVideoCreate .pwa-vc-prompt::placeholder {
    color: var(--pwa-vc-muted); opacity: .6;
  }
  #pwaVideoCreate .pwa-vc-prompt:focus { border-color: var(--pwa-vc-border-h); }
  #pwaVideoCreate .pwa-vc-char-counter {
    text-align: left; font-size: 11px;
    color: var(--pwa-vc-muted); margin-top: 5px;
  }

  /* Quick-pick row */
  #pwaVideoCreate .pwa-vc-qr-row { display: flex; gap: 10px; }
  #pwaVideoCreate .pwa-vc-qr-btn {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    background: var(--pwa-vc-bg2);
    border: 1px solid var(--pwa-vc-border);
    border-radius: 13px; padding: 13px 14px;
    font-size: 14px; font-weight: 700;
    font-family: 'Cairo', sans-serif; color: var(--pwa-vc-text);
    cursor: pointer; transition: border-color .2s;
  }
  #pwaVideoCreate .pwa-vc-qr-btn:active { border-color: var(--pwa-vc-green); }
  #pwaVideoCreate .pwa-vc-qr-btn-label { color: var(--pwa-vc-muted); }
  #pwaVideoCreate .pwa-vc-qr-btn-val {
    font-family: 'Inter', sans-serif; font-size: 15px;
    font-weight: 900; color: var(--pwa-vc-green);
  }
  #pwaVideoCreate .pwa-vc-qr-btn-unit {
    font-size: 11px; color: var(--pwa-vc-muted); margin-inline-start: 2px;
  }

  /* Generate bar (sticky at sheet bottom) */
  #pwaVideoCreate .pwa-vc-gen-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px 16px 26px;
    background: linear-gradient(to top, var(--pwa-vc-bg3) 65%, transparent);
  }
  #pwaVideoCreate .pwa-vc-gen-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, #3DDC97, #0d9488);
    border: none; border-radius: 15px; padding: 17px;
    font-size: 17px; font-weight: 900; font-family: 'Cairo', sans-serif;
    color: #1a1d20; cursor: pointer;
    box-shadow: 0 8px 30px rgba(61,220,151,0.3);
    transition: transform .15s, opacity .2s;
  }
  #pwaVideoCreate .pwa-vc-gen-btn:active { transform: scale(0.98); }
  #pwaVideoCreate .pwa-vc-gen-btn:disabled { opacity: .6; cursor: not-allowed; }
  #pwaVideoCreate .pwa-vc-gen-cost {
    display: flex; align-items: center; gap: 4px;
    font-family: 'Inter', sans-serif; font-size: 15px;
  }

  /* ─── Bottom sheets (model/duration/quality/ratio) ─── */
  #pwaVideoCreate .pwa-vc-bs-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    z-index: 200;
  }
  #pwaVideoCreate .pwa-vc-bs-overlay[data-open="true"] { display: block; }
  #pwaVideoCreate .pwa-vc-bs {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--pwa-vc-bg3);
    border-top: 1px solid var(--pwa-vc-border);
    border-radius: 22px 22px 0 0;
    z-index: 201;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    max-height: 82vh; overflow-y: auto;
    scrollbar-width: none; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #pwaVideoCreate .pwa-vc-bs::-webkit-scrollbar { display: none; }
  #pwaVideoCreate .pwa-vc-bs[data-open="true"] { transform: translateY(0); }
  #pwaVideoCreate .pwa-vc-bs-handle {
    width: 36px; height: 4px; border-radius: 4px;
    background: rgba(61,220,151,0.25); margin: 12px auto 0;
  }
  #pwaVideoCreate .pwa-vc-bs-title {
    font-size: 16px; font-weight: 900;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--pwa-vc-border);
  }
  #pwaVideoCreate .pwa-vc-bs-scroll { padding: 0; }

  /* Model list inside bs */
  #pwaVideoCreate .pwa-vc-model-list { padding: 8px 0 20px; }
  #pwaVideoCreate .pwa-vc-model-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 20px; cursor: pointer;
    transition: background .15s;
  }
  #pwaVideoCreate .pwa-vc-model-row:active,
  #pwaVideoCreate .pwa-vc-model-row[data-selected="true"] {
    background: rgba(61,220,151,0.07);
  }
  #pwaVideoCreate .pwa-vc-model-row-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    background: rgba(61,220,151,0.07);
    border: 1px solid var(--pwa-vc-border);
  }
  #pwaVideoCreate .pwa-vc-model-row-info { flex: 1; }
  #pwaVideoCreate .pwa-vc-model-row-name { font-size: 14px; font-weight: 700; }
  #pwaVideoCreate .pwa-vc-model-row-sub { font-size: 11px; color: var(--pwa-vc-muted); margin-top: 1px; }
  #pwaVideoCreate .pwa-vc-model-row-badge {
    font-size: 10px; font-weight: 700; font-family: 'Inter', sans-serif;
    padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
  }
  #pwaVideoCreate .pwa-vc-badge-pro {
    background: rgba(61,220,151,0.12); color: var(--pwa-vc-green);
    border: 1px solid rgba(61,220,151,0.3);
  }
  #pwaVideoCreate .pwa-vc-badge-free {
    background: rgba(94,234,212,0.12); color: var(--pwa-vc-teal2);
    border: 1px solid rgba(94,234,212,0.3);
  }
  #pwaVideoCreate .pwa-vc-badge-new {
    background: rgba(251,146,60,0.12); color: #fb923c;
    border: 1px solid rgba(251,146,60,0.3);
  }
  #pwaVideoCreate .pwa-vc-model-row-check {
    font-size: 16px; color: var(--pwa-vc-green); flex-shrink: 0; opacity: 0;
  }
  #pwaVideoCreate .pwa-vc-model-row[data-selected="true"] .pwa-vc-model-row-check {
    opacity: 1;
  }

  /* Quality list */
  #pwaVideoCreate .pwa-vc-quality-list {
    padding: 8px 16px 24px;
    display: flex; flex-direction: column; gap: 10px;
  }
  #pwaVideoCreate .pwa-vc-quality-opt {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 16px; background: var(--pwa-vc-bg2);
    border: 1.5px solid var(--pwa-vc-border); border-radius: 14px;
    cursor: pointer; transition: border-color .2s;
  }
  #pwaVideoCreate .pwa-vc-quality-opt[data-selected="true"] {
    border-color: var(--pwa-vc-green);
    background: rgba(61,220,151,0.08);
  }
  #pwaVideoCreate .pwa-vc-quality-opt-left {
    display: flex; flex-direction: column; gap: 2px;
  }
  #pwaVideoCreate .pwa-vc-quality-opt-val {
    font-size: 16px; font-weight: 900; font-family: 'Inter', sans-serif;
  }
  #pwaVideoCreate .pwa-vc-quality-opt-sub { font-size: 11px; color: var(--pwa-vc-muted); }
  #pwaVideoCreate .pwa-vc-quality-opt-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--pwa-vc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
  }
  #pwaVideoCreate .pwa-vc-quality-opt[data-selected="true"] .pwa-vc-quality-opt-check {
    background: var(--pwa-vc-green); border-color: var(--pwa-vc-green);
    color: #1a1d20;
  }

  /* Ratio list */
  #pwaVideoCreate .pwa-vc-ratio-list {
    padding: 8px 16px 24px;
    display: flex; flex-direction: column; gap: 8px;
  }
  #pwaVideoCreate .pwa-vc-ratio-opt {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 16px; background: var(--pwa-vc-bg2);
    border: 1.5px solid var(--pwa-vc-border); border-radius: 13px;
    cursor: pointer; transition: border-color .2s;
  }
  #pwaVideoCreate .pwa-vc-ratio-opt[data-selected="true"] {
    border-color: var(--pwa-vc-green);
    background: rgba(61,220,151,0.08);
  }
  #pwaVideoCreate .pwa-vc-ratio-box {
    background: rgba(61,220,151,0.07);
    border: 1.5px solid rgba(61,220,151,0.25);
    border-radius: 5px; flex-shrink: 0;
  }
  #pwaVideoCreate .pwa-vc-ratio-opt-info { flex: 1; }
  #pwaVideoCreate .pwa-vc-ratio-opt-val {
    font-size: 15px; font-weight: 900; font-family: 'Inter', sans-serif;
  }
  #pwaVideoCreate .pwa-vc-ratio-opt-sub {
    font-size: 11px; color: var(--pwa-vc-muted); margin-top: 1px;
  }
  #pwaVideoCreate .pwa-vc-ratio-opt-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--pwa-vc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
  }
  #pwaVideoCreate .pwa-vc-ratio-opt[data-selected="true"] .pwa-vc-ratio-opt-check {
    background: var(--pwa-vc-green); border-color: var(--pwa-vc-green);
    color: #1a1d20;
  }

  /* Duration grid */
  #pwaVideoCreate .pwa-vc-dur-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    padding: 14px 16px 30px;
  }
  #pwaVideoCreate .pwa-vc-dur-chip {
    background: var(--pwa-vc-bg2);
    border: 1.5px solid var(--pwa-vc-border);
    border-radius: 13px; padding: 16px 6px;
    text-align: center; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  #pwaVideoCreate .pwa-vc-dur-chip-val {
    display: block; font-size: 17px; font-weight: 900;
    font-family: 'Inter', sans-serif; line-height: 1;
  }
  #pwaVideoCreate .pwa-vc-dur-chip-lbl {
    display: block; font-size: 10px;
    color: var(--pwa-vc-muted); margin-top: 4px; font-weight: 600;
  }
  #pwaVideoCreate .pwa-vc-dur-chip[data-selected="true"] {
    border-color: var(--pwa-vc-green);
    background: rgba(61,220,151,0.1);
  }
}
/* ═══════════ END RFC-015 PHASE-2 ═══════════ */


/* RFC-015 PHASE-4 FIX-6 (2026-05-12 Zain): closed dropdown was capturing pointer events. visibility:hidden inheritance can fail when inline styles override. Force display:none when not .open. */
body > #lnavDropdown:not(.open) { display: none !important; }


/* ════════════════════════════════════════════════════════════════════
 * RFC-015 HOTFIX-35 (2026-05-12 Zain): processing-state overlay for video tiles.
 * Server-side renders status=processing rows; this CSS shows a spinner+label so
 * users see the work is in flight. JS updates the age counter every second.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  #pwaVideoCreate .pwa-vc-history-item { position: relative; }

  #pwaVideoCreate .pwa-vc-processing-overlay,
  #pwaVideoCreate .pwa-vc-failed-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    background: rgba(26,29,32,0.75);
    backdrop-filter: blur(2px);
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
  }

  #pwaVideoCreate .pwa-vc-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(61,220,151,0.18);
    border-top-color: var(--pwa-vc-green, #3DDC97);
    border-radius: 50%;
    animation: pwaVcSpin 0.9s linear infinite;
  }
  @keyframes pwaVcSpin {
    to { transform: rotate(360deg); }
  }

  #pwaVideoCreate .pwa-vc-processing-label {
    font-size: 13px; font-weight: 700;
    color: var(--pwa-vc-green, #3DDC97);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }
  #pwaVideoCreate .pwa-vc-processing-age {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-family: 'Inter', sans-serif;
  }

  #pwaVideoCreate .pwa-vc-failed-overlay {
    background: rgba(80,20,20,0.85);
  }
  #pwaVideoCreate .pwa-vc-failed-icon {
    font-size: 32px; color: #ef4444;
  }
  #pwaVideoCreate .pwa-vc-failed-label {
    font-size: 13px; font-weight: 700; color: #fca5a5;
  }
}
/* ═══════════ END RFC-015 HOTFIX-35 ═══════════ */


/* ═══════════════════════════════════════════════════════════════════════════
 * RFC-016 PHASE-2 (2026-05-12 Zain): PWA-only mobile UI for /create/image.
 * Activates at ≤920px. Hides desktop .ic-page wrapper. Shows the #pwaImageCreate
 * block inserted by Phase-1 with: subbar (view toggle + history link), gallery
 * grid (with processing/failed overlays from H35 pattern), fixed bottom panel
 * (model picker + prompt + controls + generate), and 3 bottom sheets.
 * Phase-3 JS will wire interactions.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  /* ─── Hide desktop image-creation layout ─── */
  .ic-page {
    display: none !important;
  }

  /* ─── Show the Phase-1 hidden block (override [hidden] attr) ─── */
  #pwaImageCreate[hidden],
  #pwaImageCreate {
    display: block !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
    overflow: hidden !important;
    background: #1a1d20 !important;
    color: #f5f3ff !important;
    font-family: 'Cairo', sans-serif !important;
    --pwa-ic-green: #3DDC97;
    --pwa-ic-teal: #0d9488;
    --pwa-ic-teal2: #5eead4;
    --pwa-ic-bg: #1a1d20;
    --pwa-ic-bg2: #2a2e35;
    --pwa-ic-bg3: #23272d;
    --pwa-ic-bdr: rgba(61,220,151,0.15);
    --pwa-ic-bdr-h: rgba(61,220,151,0.45);
    --pwa-ic-text: #f5f3ff;
    --pwa-ic-muted: #8b7faa;
    --pwa-ic-panel-h: 180px;
  }

  /* ─── Subbar ─── */
  #pwaImageCreate .pwa-ic-subbar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: rgba(26,29,32,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pwa-ic-bdr);
    z-index: 10;
    height: 48px;
  }
  #pwaImageCreate .pwa-ic-subbar-left,
  #pwaImageCreate .pwa-ic-subbar-right {
    display: flex; align-items: center; gap: 6px;
  }
  #pwaImageCreate .pwa-ic-view-btn {
    width: 36px; height: 32px; border-radius: 8px;
    background: var(--pwa-ic-bg2);
    border: 1px solid var(--pwa-ic-bdr);
    color: var(--pwa-ic-muted);
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
  }
  #pwaImageCreate .pwa-ic-view-btn[data-active="true"] {
    background: rgba(61,220,151,0.12);
    border-color: var(--pwa-ic-bdr-h);
    color: var(--pwa-ic-green);
  }
  #pwaImageCreate .pwa-ic-sub-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 8px;
    background: rgba(61,220,151,0.10);
    color: var(--pwa-ic-green);
    border: 1px solid var(--pwa-ic-bdr);
    font-size: 12px; font-weight: 700;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
  }

  /* ─── Gallery area ─── */
  #pwaImageCreate .pwa-ic-gallery {
    position: absolute;
    top: 48px; left: 0; right: 0; bottom: var(--pwa-ic-panel-h);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 12px;
  }
  #pwaImageCreate .pwa-ic-gallery::-webkit-scrollbar { display: none; }

  #pwaImageCreate .pwa-ic-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  #pwaImageCreate .pwa-ic-gallery-grid[data-view="list"] {
    grid-template-columns: 1fr;
  }
  #pwaImageCreate .pwa-ic-card {
    position: relative;
    background: var(--pwa-ic-bg2);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1/1;
    cursor: pointer;
  }
  #pwaImageCreate .pwa-ic-gallery-grid[data-view="list"] .pwa-ic-card {
    aspect-ratio: 16/9;
  }
  #pwaImageCreate .pwa-ic-card-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  /* ─── Empty state ─── */
  #pwaImageCreate .pwa-ic-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 50px 24px; text-align: center;
    min-height: 240px;
    background: var(--pwa-ic-bg2);
    border: 1.5px dashed rgba(61,220,151,0.2);
    border-radius: 18px;
  }
  #pwaImageCreate .pwa-ic-empty-art { font-size: 50px; opacity: 0.5; }
  #pwaImageCreate .pwa-ic-empty-title {
    font-size: 18px; font-weight: 900; color: var(--pwa-ic-text);
    line-height: 1.3;
  }
  #pwaImageCreate .pwa-ic-empty-sub {
    font-size: 13px; color: var(--pwa-ic-muted);
    line-height: 1.6; max-width: 240px;
  }

  /* ─── Processing / failed overlays (mirror of H35) ─── */
  #pwaImageCreate .pwa-ic-card { position: relative; }
  #pwaImageCreate .pwa-ic-processing-overlay,
  #pwaImageCreate .pwa-ic-failed-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    background: rgba(26,29,32,0.75);
    backdrop-filter: blur(2px);
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
  }
  #pwaImageCreate .pwa-ic-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(61,220,151,0.18);
    border-top-color: var(--pwa-ic-green);
    border-radius: 50%;
    animation: pwaIcSpin 0.9s linear infinite;
  }
  @keyframes pwaIcSpin { to { transform: rotate(360deg); } }
  #pwaImageCreate .pwa-ic-processing-label {
    font-size: 12px; font-weight: 700;
    color: var(--pwa-ic-green);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }
  #pwaImageCreate .pwa-ic-processing-age {
    font-size: 10px; color: rgba(255,255,255,0.7);
    font-family: 'Inter', sans-serif;
  }
  #pwaImageCreate .pwa-ic-failed-overlay {
    background: rgba(80,20,20,0.85);
  }
  #pwaImageCreate .pwa-ic-failed-icon { font-size: 28px; color: #ef4444; }
  #pwaImageCreate .pwa-ic-failed-label {
    font-size: 12px; font-weight: 700; color: #fca5a5;
  }

  /* ─── Bottom panel ─── */
  #pwaImageCreate .pwa-ic-bottom-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--pwa-ic-bg3);
    border-top: 1px solid var(--pwa-ic-bdr);
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
    z-index: 100;
    display: flex; flex-direction: column;
    gap: 10px;
  }

  /* Model button */
  #pwaImageCreate .pwa-ic-model-btn {
    display: flex; align-items: center; gap: 10px;
    background: var(--pwa-ic-bg2);
    border: 1px solid var(--pwa-ic-bdr);
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer; width: 100%;
    color: var(--pwa-ic-text);
    font-family: 'Cairo', sans-serif;
  }
  #pwaImageCreate .pwa-ic-model-avatar {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--pwa-ic-green), var(--pwa-ic-teal));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 900;
    color: #1a1d20; flex-shrink: 0;
  }
  #pwaImageCreate .pwa-ic-model-btn-name {
    flex: 1; font-size: 14px; font-weight: 700;
    text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #pwaImageCreate .pwa-ic-model-btn-badge {
    font-size: 10px; font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 2px 7px; border-radius: 6px;
    flex-shrink: 0;
    background: rgba(61,220,151,0.12);
    color: var(--pwa-ic-green);
    border: 1px solid rgba(61,220,151,0.3);
  }
  #pwaImageCreate .pwa-ic-model-btn-badge:empty { display: none; }

  /* Refs row */
  #pwaImageCreate .pwa-ic-refs-row {
    display: flex; flex-direction: row; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
  }
  #pwaImageCreate .pwa-ic-refs-row::-webkit-scrollbar { display: none; }
  #pwaImageCreate .pwa-ic-refs-row[hidden] { display: none; }
  #pwaImageCreate .pwa-ic-ref-thumb {
    width: 48px; height: 48px; border-radius: 10px;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid var(--pwa-ic-bdr);
    position: relative;
  }
  #pwaImageCreate .pwa-ic-ref-wrap {
    position: relative; flex-shrink: 0;
  }
  #pwaImageCreate .pwa-ic-ref-remove {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(239,68,68,0.9);
    border: 1.5px solid var(--pwa-ic-bg3);
    color: #fff; font-size: 10px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  /* Prompt row */
  #pwaImageCreate .pwa-ic-prompt-row {
    display: flex; align-items: flex-start; gap: 7px;
  }
  #pwaImageCreate .pwa-ic-prompt {
    flex: 1;
    background: var(--pwa-ic-bg2);
    border: 1px solid var(--pwa-ic-bdr);
    border-radius: 12px;
    padding: 10px 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: var(--pwa-ic-text);
    resize: none;
    min-height: 56px;
    max-height: 100px;
    line-height: 1.5;
    outline: none;
    transition: border-color .15s;
  }
  #pwaImageCreate .pwa-ic-prompt::placeholder {
    color: var(--pwa-ic-muted); opacity: .65;
  }
  #pwaImageCreate .pwa-ic-prompt:focus {
    border-color: var(--pwa-ic-bdr-h);
  }
  #pwaImageCreate .pwa-ic-pact-col {
    display: flex; flex-direction: column; gap: 6px;
  }
  #pwaImageCreate .pwa-ic-pact-btn {
    width: 34px; height: 26px; border-radius: 8px;
    background: var(--pwa-ic-bg2);
    border: 1px solid var(--pwa-ic-bdr);
    color: var(--pwa-ic-green);
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  #pwaImageCreate .pwa-ic-pact-btn:active { transform: scale(0.95); }

  /* Controls row */
  #pwaImageCreate .pwa-ic-controls-row {
    display: flex; align-items: center; gap: 7px;
  }
  #pwaImageCreate .pwa-ic-ctrl-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--pwa-ic-bg2);
    border: 1px solid var(--pwa-ic-bdr);
    border-radius: 10px;
    padding: 0 10px;
    height: 40px;
    color: var(--pwa-ic-text);
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 800;
    cursor: pointer;
  }
  #pwaImageCreate .pwa-ic-ratio-mini {
    background: rgba(61,220,151,0.08);
    border: 1.5px solid rgba(61,220,151,0.3);
    border-radius: 3px;
    flex-shrink: 0;
  }

  #pwaImageCreate .pwa-ic-count-ctrl {
    display: flex; align-items: center;
    background: var(--pwa-ic-bg2);
    border: 1px solid var(--pwa-ic-bdr);
    border-radius: 10px;
    height: 40px;
    overflow: hidden;
  }
  #pwaImageCreate .pwa-ic-cnt-btn {
    width: 32px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700;
    color: var(--pwa-ic-muted);
    background: none; border: none;
    cursor: pointer;
  }
  #pwaImageCreate .pwa-ic-cnt-btn:active { color: var(--pwa-ic-green); }
  #pwaImageCreate .pwa-ic-cnt-val {
    padding: 0 8px; font-size: 14px; font-weight: 900;
    color: var(--pwa-ic-text);
    font-family: 'Inter', sans-serif;
    border-inline: 1px solid var(--pwa-ic-bdr);
  }

  #pwaImageCreate .pwa-ic-create-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--pwa-ic-green), var(--pwa-ic-teal));
    border: none; border-radius: 10px;
    height: 40px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px; font-weight: 900;
    color: #1a1d20;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(61,220,151,0.25);
    transition: transform .12s, opacity .2s;
  }
  #pwaImageCreate .pwa-ic-create-btn:active { transform: scale(0.97); }
  #pwaImageCreate .pwa-ic-create-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  #pwaImageCreate .pwa-ic-cred {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; opacity: 0.85;
  }

  /* ─── Bottom sheets ─── */
  #pwaImageCreate .pwa-ic-bs-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 200;
  }
  #pwaImageCreate .pwa-ic-bs-overlay[data-open="true"] { display: block; }
  #pwaImageCreate .pwa-ic-bs {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--pwa-ic-bg3);
    border-top: 1px solid var(--pwa-ic-bdr);
    border-radius: 22px 22px 0 0;
    z-index: 201;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    max-height: 82vh;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
  }
  #pwaImageCreate .pwa-ic-bs::-webkit-scrollbar { display: none; }
  #pwaImageCreate .pwa-ic-bs[data-open="true"] { transform: translateY(0); }
  #pwaImageCreate .pwa-ic-bs-handle {
    width: 36px; height: 4px; border-radius: 4px;
    background: rgba(61,220,151,0.25);
    margin: 12px auto 0;
  }
  #pwaImageCreate .pwa-ic-bs-title {
    font-size: 16px; font-weight: 900;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--pwa-ic-bdr);
  }

  /* Model list */
  #pwaImageCreate .pwa-ic-model-list { padding: 8px 0 24px; }
  #pwaImageCreate .pwa-ic-model-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    cursor: pointer; transition: background .15s;
  }
  #pwaImageCreate .pwa-ic-model-row[data-selected="true"],
  #pwaImageCreate .pwa-ic-model-row:active {
    background: rgba(61,220,151,0.07);
  }
  #pwaImageCreate .pwa-ic-model-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    background: rgba(61,220,151,0.07);
    border: 1px solid var(--pwa-ic-bdr);
  }
  #pwaImageCreate .pwa-ic-model-info { flex: 1; min-width: 0; }
  #pwaImageCreate .pwa-ic-model-name { font-size: 14px; font-weight: 700; }
  #pwaImageCreate .pwa-ic-model-sub {
    font-size: 11px; color: var(--pwa-ic-muted);
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #pwaImageCreate .pwa-ic-model-badge {
    font-size: 10px; font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 3px 8px; border-radius: 6px;
    flex-shrink: 0;
    background: rgba(61,220,151,0.12);
    color: var(--pwa-ic-green);
    border: 1px solid rgba(61,220,151,0.3);
  }
  #pwaImageCreate .pwa-ic-model-check {
    font-size: 15px; color: var(--pwa-ic-green);
    opacity: 0; flex-shrink: 0;
  }
  #pwaImageCreate .pwa-ic-model-row[data-selected="true"] .pwa-ic-model-check {
    opacity: 1;
  }

  /* Ratio grid */
  #pwaImageCreate .pwa-ic-ratio-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding: 12px 14px 28px;
  }
  #pwaImageCreate .pwa-ic-ratio-opt {
    display: flex; flex-direction: column;
    align-items: center; gap: 9px;
    background: var(--pwa-ic-bg2);
    border: 1.5px solid var(--pwa-ic-bdr);
    border-radius: 14px;
    padding: 14px 8px;
    cursor: pointer;
    transition: border-color .15s;
  }
  #pwaImageCreate .pwa-ic-ratio-opt[data-selected="true"] {
    border-color: var(--pwa-ic-green);
    background: rgba(61,220,151,0.08);
  }
  #pwaImageCreate .pwa-ic-ratio-box-big {
    background: rgba(61,220,151,0.07);
    border: 1.5px solid rgba(61,220,151,0.3);
    border-radius: 5px;
    flex-shrink: 0;
  }
  #pwaImageCreate .pwa-ic-ratio-opt-lbl {
    font-size: 13px; font-weight: 900;
    font-family: 'Inter', sans-serif;
  }
  #pwaImageCreate .pwa-ic-ratio-opt-sub {
    font-size: 10px; color: var(--pwa-ic-muted);
    margin-top: 1px;
  }

  /* Quality list */
  #pwaImageCreate .pwa-ic-quality-list {
    padding: 10px 14px 28px;
    display: flex; flex-direction: column; gap: 10px;
  }
  #pwaImageCreate .pwa-ic-quality-opt {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--pwa-ic-bg2);
    border: 1.5px solid var(--pwa-ic-bdr);
    border-radius: 14px;
    cursor: pointer; transition: border-color .15s;
  }
  #pwaImageCreate .pwa-ic-quality-opt[data-selected="true"] {
    border-color: var(--pwa-ic-green);
    background: rgba(61,220,151,0.08);
  }
  #pwaImageCreate .pwa-ic-quality-opt-left {
    display: flex; flex-direction: column; gap: 2px;
  }
  #pwaImageCreate .pwa-ic-quality-opt-val {
    font-size: 16px; font-weight: 900;
    font-family: 'Inter', sans-serif;
  }
  #pwaImageCreate .pwa-ic-quality-opt-sub {
    font-size: 11px; color: var(--pwa-ic-muted);
  }
  #pwaImageCreate .pwa-ic-quality-opt-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--pwa-ic-bdr);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
  }
  #pwaImageCreate .pwa-ic-quality-opt[data-selected="true"] .pwa-ic-quality-opt-check {
    background: var(--pwa-ic-green);
    border-color: var(--pwa-ic-green);
    color: #1a1d20;
  }
}
/* ═══════════ END RFC-016 PHASE-2 ═══════════ */


/* ===========================================================================
 * RFC-016 HOTFIX-37 (2026-05-12 Zain): Restore Font Awesome rendering inside
 * #pwaImageCreate and #pwaVideoCreate. The Cairo font-family on parent panels
 * was inheriting into <i> children, overriding FA-Free/Brands font-family and
 * causing icons to render as zero-width "none" glyphs.
 * Diagnostic confirmed: <i class="fas fa-image"> had fontFamily="Cairo, sans-serif"
 * and ::before content="none", rect width/height=0. This rule forces the FA
 * font-family back on .fas/.fab/.far/.fal/.fad icons inside the PWA roots.
 * =========================================================================== */
@media (max-width: 920px) {
  #pwaImageCreate i.fas, #pwaImageCreate i.fa-solid,
  #pwaVideoCreate i.fas, #pwaVideoCreate i.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
  }
  #pwaImageCreate i.far, #pwaImageCreate i.fa-regular,
  #pwaVideoCreate i.far, #pwaVideoCreate i.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
  }
  #pwaImageCreate i.fab, #pwaImageCreate i.fa-brands,
  #pwaVideoCreate i.fab, #pwaVideoCreate i.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
  }
}
/* =========== END RFC-016 HOTFIX-37 =========== */


/* ===========================================================================
 * RFC-016 HOTFIX-41 (2026-05-12 Zain): Character-state UI styles for mobile.
 *   .pwa-ic-char-strip — chip row above prompt when chars selected
 *   .pwa-ic-char-chip — individual @charN tag
 *   .pwa-ic-char-clear-btn — single X removes all
 *   [data-locked='true'] on model picker — visual lock state
 *   .pwa-ic-dismiss-btn — 30-min stuck-tile cosmetic dismiss
 * =========================================================================== */
@media (max-width: 920px) {
  #pwaImageCreate .pwa-ic-char-strip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 6px 8px; margin: 0 0 6px;
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(167, 139, 250, 0.30);
    border-radius: 10px;
    font-size: 11px; color: #c4b5fd;
  }
  #pwaImageCreate .pwa-ic-char-strip-lbl {
    font-weight: 800; opacity: 0.85;
  }
  #pwaImageCreate .pwa-ic-char-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(167, 139, 250, 0.25);
    color: #fff; font-weight: 700; font-size: 10.5px;
    white-space: nowrap; max-width: 140px;
    overflow: hidden; text-overflow: ellipsis;
  }
  #pwaImageCreate .pwa-ic-char-chip-tier {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff; font-size: 8px; font-weight: 900;
    padding: 1px 5px; border-radius: 4px;
    letter-spacing: 0.5px;
  }
  #pwaImageCreate .pwa-ic-char-clear-btn {
    margin-inline-start: auto;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(239, 68, 68, 0.20);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.45);
    font-size: 14px; font-weight: 900; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #pwaImageCreate .pwa-ic-char-clear-btn:active { transform: scale(0.92); }

  #pwaImageCreate .pwa-ic-model-btn[data-locked="true"]::after {
    content: "🔒"; font-size: 10px; opacity: 0.75;
    margin-inline-start: 4px;
  }

  /* 30-min stuck-tile dismiss button */
  #pwaImageCreate .pwa-ic-dismiss-btn {
    position: absolute; bottom: 8px; left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    background: rgba(239, 68, 68, 0.92);
    color: #fff; border: none; border-radius: 8px;
    padding: 5px 12px; font-size: 11px; font-weight: 800;
    cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  #pwaImageCreate .pwa-ic-dismiss-btn:active { transform: translateX(-50%) scale(0.95); }
}
/* =========== END RFC-016 HOTFIX-41 =========== */


/* ===========================================================================
 * RFC-016 HOTFIX-45 (2026-05-12 Zain): X-remove button on /create/video
 * frame thumbnails (startFrame, endFrame, motion ref_image/ref_video).
 * =========================================================================== */
@media (max-width: 920px) {
  #pwaVideoCreate .pwa-vc-frame-picker {
    position: relative;   /* anchor for absolutely-positioned remove btn */
  }
  #pwaVideoCreate .pwa-vc-frame-remove-btn {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;   /* LTR: left, RTL: right */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.92);
    color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.55);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    padding: 0;
  }
  #pwaVideoCreate .pwa-vc-frame-remove-btn:active {
    transform: scale(0.92);
  }
}
/* =========== END RFC-016 HOTFIX-45 =========== */


/* ===========================================================================
 * RFC-017 PHASE-2 (2026-05-13 Zain): PWA-only mobile UI for /create/brandkit.
 * Activates at ≤920px. Hides desktop .bk-page wrapper. Shows the Phase-1
 * #pwaBrandkitCreate block with: landing (heading + carousel + start button +
 * history list), bottom-sheet form (upload slots + character + product info
 * + mood cards + 'what you get' + Arabic toggle + generate footer), and a
 * results popup. Phase-3 JS will wire interactions.
 * =========================================================================== */
@media (max-width: 920px) {
  /* ─── Hide desktop brandkit wizard layout ─── */
  .bk-page { display: none !important; }

  /* ─── Show the Phase-1 hidden block ─── */
  #pwaBrandkitCreate[hidden],
  #pwaBrandkitCreate {
    display: block !important;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1d20;
    color: #f5f3ff;
    font-family: 'Cairo', sans-serif;
    z-index: 5;
    overflow: hidden;
  }

  /* ─── Scoped vars (kept inside #pwaBrandkitCreate to avoid global pollution) ─── */
  #pwaBrandkitCreate {
    --pwa-bk-bg:    #1a1d20;
    --pwa-bk-bg2:   #23272d;
    --pwa-bk-bg3:   #2a2e35;
    --pwa-bk-bdr:   rgba(61,220,151,0.15);
    --pwa-bk-bdrh:  rgba(61,220,151,0.45);
    --pwa-bk-green: #3DDC97;
    --pwa-bk-teal:  #0d9488;
    --pwa-bk-text:  #f5f3ff;
    --pwa-bk-muted: rgba(255,255,255,.42);
  }

  /* ─── Scroll area ─── */
  #pwaBrandkitCreate .pwa-bk-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #pwaBrandkitCreate .pwa-bk-scroll::-webkit-scrollbar { display: none; }
  #pwaBrandkitCreate .pwa-bk-content {
    padding: 20px 14px 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* ─── Heading ─── */
  #pwaBrandkitCreate .pwa-bk-heading h1 {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 4px;
    color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-heading h1 span {
    background: linear-gradient(135deg, var(--pwa-bk-green), #5eead4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  #pwaBrandkitCreate .pwa-bk-heading p {
    font-size: 13px;
    color: var(--pwa-bk-muted);
  }

  /* ─── Carousel ─── */
  #pwaBrandkitCreate .pwa-bk-carousel {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--pwa-bk-bdr);
  }
  #pwaBrandkitCreate .pwa-bk-track {
    display: flex;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  }
  #pwaBrandkitCreate .pwa-bk-card {
    flex: 0 0 100%;
    position: relative;
    overflow: hidden;
  }
  #pwaBrandkitCreate .pwa-bk-card-img {
    width: 100%;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
  #pwaBrandkitCreate .pwa-bk-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 55%, transparent 100%);
  }
  #pwaBrandkitCreate .pwa-bk-card-body {
    position: absolute;
    bottom: 0; right: 0; left: 0;
    padding: 14px 16px 18px;
  }
  #pwaBrandkitCreate .pwa-bk-card-title {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 7px;
    text-align: right;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  #pwaBrandkitCreate .pwa-bk-card-desc {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    text-align: right;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 7px 10px;
  }

  /* ─── Start button ─── */
  #pwaBrandkitCreate .pwa-bk-start-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #0f2e24 0%, #1a3d2e 100%);
    border: 1.5px solid rgba(61,220,151,.45);
    border-radius: 16px;
    height: 54px;
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: var(--pwa-bk-green);
    cursor: pointer;
    box-shadow: 0 0 28px rgba(61,220,151,.18), inset 0 1px 0 rgba(61,220,151,.1);
    transition: transform .15s, box-shadow .2s;
  }
  #pwaBrandkitCreate .pwa-bk-start-btn:active {
    transform: scale(.97);
    box-shadow: 0 0 14px rgba(61,220,151,.12);
  }
  #pwaBrandkitCreate .pwa-bk-start-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.35);
    border-radius: 20px;
    padding: 5px 13px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 900;
    color: #fbbf24;
  }
  #pwaBrandkitCreate .pwa-bk-start-cost i { font-size: 10px; }

  /* ─── History ─── */
  #pwaBrandkitCreate .pwa-bk-history-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  #pwaBrandkitCreate .pwa-bk-history-icon {
    color: var(--pwa-bk-green);
    font-size: 16px;
  }
  #pwaBrandkitCreate .pwa-bk-history-title {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #pwaBrandkitCreate .pwa-bk-hist-card {
    background: var(--pwa-bk-bg2);
    border: 1px solid var(--pwa-bk-bdr);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  #pwaBrandkitCreate .pwa-bk-hist-card:active {
    background: var(--pwa-bk-bg3);
    border-color: var(--pwa-bk-bdrh);
  }
  #pwaBrandkitCreate .pwa-bk-hist-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 88px;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-hist-thumb {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--pwa-bk-bg3);
  }
  #pwaBrandkitCreate .pwa-bk-hist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #pwaBrandkitCreate .pwa-bk-hist-thumb-empty {
    background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  }
  #pwaBrandkitCreate .pwa-bk-hist-info {
    flex: 1;
    text-align: right;
    min-width: 0;
  }
  #pwaBrandkitCreate .pwa-bk-hist-title {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #pwaBrandkitCreate .pwa-bk-hist-meta {
    font-size: 11px;
    color: var(--pwa-bk-muted);
    margin-bottom: 6px;
  }
  #pwaBrandkitCreate .pwa-bk-hist-tags {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  #pwaBrandkitCreate .pwa-bk-hist-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(61,220,151,.1);
    border: 1px solid var(--pwa-bk-bdr);
    color: var(--pwa-bk-green);
  }
  #pwaBrandkitCreate .pwa-bk-hist-arrow {
    color: var(--pwa-bk-muted);
    font-size: 13px;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-hist-empty {
    padding: 32px 18px;
    text-align: center;
    color: var(--pwa-bk-muted);
    background: var(--pwa-bk-bg2);
    border: 1px dashed var(--pwa-bk-bdr);
    border-radius: 18px;
  }
  #pwaBrandkitCreate .pwa-bk-hist-empty i {
    font-size: 32px;
    margin-bottom: 10px;
    opacity: .55;
    display: block;
  }
  #pwaBrandkitCreate .pwa-bk-hist-empty div {
    font-size: 13px;
    font-weight: 700;
  }

  /* ─── Form sheet ─── */
  #pwaBrandkitCreate .pwa-bk-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 500;
    opacity: 0;
    transition: opacity .3s;
  }
  #pwaBrandkitCreate .pwa-bk-sheet-overlay.open {
    display: block;
    opacity: 1;
  }
  #pwaBrandkitCreate .pwa-bk-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 95dvh;
    z-index: 501;
    background: var(--pwa-bk-bg);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid var(--pwa-bk-bdr);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  }
  #pwaBrandkitCreate .pwa-bk-sheet.open { transform: translateY(0); }

  #pwaBrandkitCreate .pwa-bk-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 15px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--pwa-bk-bdr);
  }
  #pwaBrandkitCreate .pwa-bk-sheet-title {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-sheet-x {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pwa-bk-bg3);
    border: 1px solid var(--pwa-bk-bdr);
    color: var(--pwa-bk-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  #pwaBrandkitCreate .pwa-bk-sheet-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #pwaBrandkitCreate .pwa-bk-sheet-body::-webkit-scrollbar { display: none; }

  /* Step boxes */
  #pwaBrandkitCreate .pwa-bk-s-box {
    background: var(--pwa-bk-bg2);
    border: 1px solid var(--pwa-bk-bdr);
    border-radius: 18px;
    padding: 16px;
  }
  #pwaBrandkitCreate .pwa-bk-s-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  #pwaBrandkitCreate .pwa-bk-s-head-right {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  #pwaBrandkitCreate .pwa-bk-s-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(61,220,151,.15);
    border: 1.5px solid var(--pwa-bk-bdrh);
    color: var(--pwa-bk-green);
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-s-label {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-s-hint {
    font-size: 11px;
    color: var(--pwa-bk-muted);
  }

  /* Upload */
  #pwaBrandkitCreate .pwa-bk-upload-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  #pwaBrandkitCreate .pwa-bk-upload-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #pwaBrandkitCreate .pwa-bk-upload-count {
    font-size: 12px;
    color: var(--pwa-bk-muted);
  }
  #pwaBrandkitCreate .pwa-bk-save-brand-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--pwa-bk-bg3);
    border: 1px solid var(--pwa-bk-bdr);
    border-radius: 10px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
  }
  #pwaBrandkitCreate .pwa-bk-upload-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }
  #pwaBrandkitCreate .pwa-bk-upload-slot {
    aspect-ratio: 1;
    background: var(--pwa-bk-bg3);
    border: 2px dashed var(--pwa-bk-bdrh);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    position: relative;
    transition: border-color .2s;
    overflow: hidden;
  }
  #pwaBrandkitCreate .pwa-bk-upload-slot:not(.pwa-bk-upload-slot-empty) {
    border-style: solid;
  }
  #pwaBrandkitCreate .pwa-bk-upload-slot-icon { font-size: 26px; }
  #pwaBrandkitCreate .pwa-bk-upload-slot-num {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pwa-bk-green);
    color: #1a1d20;
    font-size: 10px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #pwaBrandkitCreate .pwa-bk-upload-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #pwaBrandkitCreate .pwa-bk-upload-slot .pwa-bk-slot-x {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,.92);
    color: #fff;
    border: 2px solid rgba(0,0,0,.55);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    padding: 0;
  }
  #pwaBrandkitCreate .pwa-bk-upload-hint {
    font-size: 11px;
    color: var(--pwa-bk-muted);
    text-align: center;
    margin-bottom: 12px;
  }

  /* Character / person row */
  #pwaBrandkitCreate .pwa-bk-person-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #pwaBrandkitCreate .pwa-bk-add-person-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(61,220,151,.08);
    border: 1px solid var(--pwa-bk-bdr);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 800;
    color: var(--pwa-bk-green);
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    flex: 1;
    justify-content: center;
  }
  #pwaBrandkitCreate .pwa-bk-person-cost {
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.3);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 900;
    color: #fbbf24;
    font-family: 'Inter', sans-serif;
  }
  #pwaBrandkitCreate .pwa-bk-person-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--pwa-bk-bg3);
    border: 1px solid var(--pwa-bk-bdr);
    color: var(--pwa-bk-muted);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Field labels + inputs */
  #pwaBrandkitCreate .pwa-bk-field-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    margin-bottom: 6px;
  }
  #pwaBrandkitCreate .pwa-bk-field-req { color: var(--pwa-bk-green); }
  #pwaBrandkitCreate .pwa-bk-field-opt {
    color: var(--pwa-bk-muted);
    font-weight: 600;
    font-size: 12px;
  }
  #pwaBrandkitCreate .pwa-bk-field-input,
  #pwaBrandkitCreate .pwa-bk-field-textarea {
    width: 100%;
    background: var(--pwa-bk-bg3);
    border: 1px solid var(--pwa-bk-bdr);
    border-radius: 12px;
    padding: 11px 13px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: #fff;
    outline: none;
    transition: border-color .2s;
    resize: none;
  }
  #pwaBrandkitCreate .pwa-bk-field-input { height: 44px; }
  #pwaBrandkitCreate .pwa-bk-field-textarea { height: 70px; }
  #pwaBrandkitCreate .pwa-bk-field-input:focus,
  #pwaBrandkitCreate .pwa-bk-field-textarea:focus { border-color: var(--pwa-bk-bdrh); }
  #pwaBrandkitCreate .pwa-bk-field-input::placeholder,
  #pwaBrandkitCreate .pwa-bk-field-textarea::placeholder { color: var(--pwa-bk-muted); }
  #pwaBrandkitCreate .pwa-bk-field-gap { height: 12px; }

  /* Mood cards */
  #pwaBrandkitCreate .pwa-bk-mood-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pwa-bk-bg3);
    border: 1.5px solid var(--pwa-bk-bdr);
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: 8px;
  }
  #pwaBrandkitCreate .pwa-bk-mood-card:last-child { margin-bottom: 0; }
  #pwaBrandkitCreate .pwa-bk-mood-card--sel {
    border-color: var(--pwa-bk-bdrh);
    background: rgba(61,220,151,.06);
  }
  #pwaBrandkitCreate .pwa-bk-mood-emoji {
    font-size: 30px;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-mood-info {
    flex: 1;
    text-align: right;
  }
  #pwaBrandkitCreate .pwa-bk-mood-name {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2px;
  }
  #pwaBrandkitCreate .pwa-bk-mood-desc {
    font-size: 12px;
    color: var(--pwa-bk-muted);
    margin-bottom: 3px;
  }
  #pwaBrandkitCreate .pwa-bk-mood-en {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,.3);
    font-family: 'Inter', sans-serif;
  }
  #pwaBrandkitCreate .pwa-bk-mood-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--pwa-bk-bdr);
    flex-shrink: 0;
    transition: all .25s;
  }
  #pwaBrandkitCreate .pwa-bk-mood-card--sel .pwa-bk-mood-radio {
    background: var(--pwa-bk-green);
    border-color: var(--pwa-bk-green);
  }

  /* Get rows + badge */
  #pwaBrandkitCreate .pwa-bk-get-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  #pwaBrandkitCreate .pwa-bk-get-title {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-get-badge {
    background: rgba(61,220,151,.12);
    border: 1px solid var(--pwa-bk-bdrh);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--pwa-bk-green);
  }
  #pwaBrandkitCreate .pwa-bk-get-rows {
    display: flex;
    flex-direction: column;
  }
  #pwaBrandkitCreate .pwa-bk-get-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px dashed var(--pwa-bk-bdr);
  }
  #pwaBrandkitCreate .pwa-bk-get-row:last-child { border-bottom: none; }
  #pwaBrandkitCreate .pwa-bk-get-right {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  #pwaBrandkitCreate .pwa-bk-get-icon { font-size: 20px; }
  #pwaBrandkitCreate .pwa-bk-get-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-align: right;
  }
  #pwaBrandkitCreate .pwa-bk-get-sub {
    font-size: 11px;
    color: var(--pwa-bk-muted);
    text-align: right;
  }
  #pwaBrandkitCreate .pwa-bk-get-count {
    font-size: 18px;
    font-weight: 900;
    color: #fbbf24;
    font-family: 'Inter', sans-serif;
  }

  /* Toggle row */
  #pwaBrandkitCreate .pwa-bk-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--pwa-bk-bdr);
    margin-top: 4px;
  }
  #pwaBrandkitCreate .pwa-bk-toggle-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.78);
  }
  #pwaBrandkitCreate .pwa-bk-t-switch {
    position: relative;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-t-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  #pwaBrandkitCreate .pwa-bk-t-track {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25);
    cursor: pointer;
    transition: background .3s, border-color .3s;
  }
  #pwaBrandkitCreate .pwa-bk-t-track::before {
    content: '';
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    transition: transform .3s;
  }
  #pwaBrandkitCreate .pwa-bk-t-switch input:checked + .pwa-bk-t-track {
    background: var(--pwa-bk-green);
    border-color: var(--pwa-bk-green);
  }
  #pwaBrandkitCreate .pwa-bk-t-switch input:checked + .pwa-bk-t-track::before {
    transform: translateX(18px);
    background: #1a1d20;
  }
  #pwaBrandkitCreate .pwa-bk-arabic-input-wrap {
    margin-top: 10px;
  }

  /* Sheet footer */
  #pwaBrandkitCreate .pwa-bk-sheet-footer {
    flex-shrink: 0;
    padding: 12px 14px 20px;
    border-top: 1px solid var(--pwa-bk-bdr);
    background: var(--pwa-bk-bg);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #pwaBrandkitCreate .pwa-bk-footer-gen-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--pwa-bk-green), var(--pwa-bk-teal));
    border: none;
    border-radius: 14px;
    height: 50px;
    padding: 0 18px;
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: #0d1210;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(61,220,151,.25);
    transition: transform .15s;
  }
  #pwaBrandkitCreate .pwa-bk-footer-gen-btn:active { transform: scale(.97); }
  #pwaBrandkitCreate .pwa-bk-footer-gen-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
  }
  #pwaBrandkitCreate .pwa-bk-footer-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--pwa-bk-bg3);
    border: 1px solid var(--pwa-bk-bdr);
    border-radius: 20px;
    padding: 5px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: #fbbf24;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-footer-cost i { font-size: 9px; }
  #pwaBrandkitCreate .pwa-bk-footer-summary {
    flex: 1;
    font-size: 11px;
    color: var(--pwa-bk-muted);
    line-height: 1.65;
    text-align: right;
  }

  /* ─── Results popup ─── */
  #pwaBrandkitCreate .pwa-bk-res-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 600;
    opacity: 0;
    transition: opacity .3s;
  }
  #pwaBrandkitCreate .pwa-bk-res-overlay.open {
    display: block;
    opacity: 1;
  }
  #pwaBrandkitCreate .pwa-bk-res-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96dvh;
    z-index: 601;
    background: var(--pwa-bk-bg);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid var(--pwa-bk-bdr);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  }
  #pwaBrandkitCreate .pwa-bk-res-sheet.open { transform: translateY(0); }
  #pwaBrandkitCreate .pwa-bk-res-header {
    padding: 18px 18px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--pwa-bk-bdr);
  }
  #pwaBrandkitCreate .pwa-bk-res-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  #pwaBrandkitCreate .pwa-bk-res-title {
    font-size: 19px;
    font-weight: 900;
    color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-res-sub {
    font-size: 12px;
    color: var(--pwa-bk-green);
    margin-top: 3px;
  }
  #pwaBrandkitCreate .pwa-bk-res-x {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pwa-bk-bg3);
    border: 1px solid var(--pwa-bk-bdr);
    color: var(--pwa-bk-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-res-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  #pwaBrandkitCreate .pwa-bk-res-body::-webkit-scrollbar { display: none; }

  /* Format groups */
  #pwaBrandkitCreate .pwa-bk-fmt-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  #pwaBrandkitCreate .pwa-bk-fmt-group-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 900;
    color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-fmt-group-name span { font-size: 18px; }
  #pwaBrandkitCreate .pwa-bk-fmt-group-meta {
    font-size: 11px;
    color: var(--pwa-bk-muted);
    background: var(--pwa-bk-bg3);
    border: 1px solid var(--pwa-bk-bdr);
    border-radius: 20px;
    padding: 3px 10px;
  }
  #pwaBrandkitCreate .pwa-bk-fmt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Image cards */
  #pwaBrandkitCreate .pwa-bk-img-result {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: var(--pwa-bk-bg3);
  }
  #pwaBrandkitCreate .pwa-bk-img-result img {
    width: 100%;
    display: block;
    object-fit: cover;
  }
  #pwaBrandkitCreate .pwa-bk-img-result-square img { aspect-ratio: 1/1; }
  #pwaBrandkitCreate .pwa-bk-img-result-portrait img { aspect-ratio: 9/16; }
  #pwaBrandkitCreate .pwa-bk-img-label {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', sans-serif;
  }
  #pwaBrandkitCreate .pwa-bk-img-dl {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(61,220,151,.9);
    border: none;
    color: #0d1210;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .15s;
  }
  #pwaBrandkitCreate .pwa-bk-img-dl:active {
    transform: scale(.9);
    background: var(--pwa-bk-green);
  }

  /* Results footer */
  #pwaBrandkitCreate .pwa-bk-res-footer {
    flex-shrink: 0;
    padding: 12px 14px 22px;
    border-top: 1px solid var(--pwa-bk-bdr);
    background: var(--pwa-bk-bg);
  }
  #pwaBrandkitCreate .pwa-bk-dl-all-btn {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    border: none;
    font-family: 'Cairo', sans-serif;
    font-size: 17px;
    font-weight: 900;
    color: #1a1d20;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s, background .2s;
    box-shadow: 0 4px 20px rgba(255,255,255,.12);
  }
  #pwaBrandkitCreate .pwa-bk-dl-all-btn:active {
    transform: scale(.97);
    background: #f0fdf4;
  }
}
/* =========== END RFC-017 PHASE-2 =========== */


/* ===========================================================================
 * RFC-017 HOTFIX-46 (2026-05-13 Zain): mobile Arabic-text 3-input layout + suggest button.
 * =========================================================================== */
@media (max-width: 920px) {
  #pwaBrandkitCreate .pwa-bk-arabic-group {
    margin-top: 12px;
  }
  #pwaBrandkitCreate .pwa-bk-arabic-group:first-child { margin-top: 6px; }
  #pwaBrandkitCreate .pwa-bk-arabic-label {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
  }
  #pwaBrandkitCreate .pwa-bk-arabic-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--pwa-bk-muted);
  }
  #pwaBrandkitCreate .pwa-bk-suggest-btn {
    width: 100%;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(61,220,151,0.18));
    border: 1px solid rgba(167,139,250,0.35);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #c4b5fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: transform .15s, opacity .2s;
  }
  #pwaBrandkitCreate .pwa-bk-suggest-btn:active { transform: scale(.97); }
  #pwaBrandkitCreate .pwa-bk-suggest-btn:disabled { opacity: .55; cursor: not-allowed; }
  #pwaBrandkitCreate .pwa-bk-suggest-btn i { color: #a78bfa; }
}
/* =========== END RFC-017 HOTFIX-46 =========== */

/* ===========================================================================
 * RFC-027 PHASE-1 START — Zain Session A (2026-05-13)
 * PWA-mobile Photo Studio (/edit) — mint-green redesign.
 * EVERY rule below sits inside @media (max-width: 920px) — desktop never sees.
 * All selectors use .pie-* / #pwaImageEdit prefixes — zero overlap with .ps-*.
 * =========================================================================== */

/* Default-hide the mobile block on desktop (>920px). The @media block below
   shows it. Zain Session A: belt-and-suspenders so desktop NEVER renders this
   even if a CSS bug breaks the @media. */
#pwaImageEdit { display: none; }

@media (max-width: 920px) {
  /* Hide desktop .ps-root on mobile, show #pwaImageEdit instead.
     Zain Session A: this is the dual-DOM swap pattern. */
  .ps-root { display: none !important; }
  #pwaImageEdit { display: block; }

  /* CSS variables scoped to the new mobile block — mint green theme.
     Desktop palette (dark purple #0d0822) untouched outside this block. */
  #pwaImageEdit {
    --pie-bg:    #1a1d20;
    --pie-bg2:   #23272d;
    --pie-bg3:   #2a2e35;
    --pie-green: #3DDC97;
    --pie-teal:  #0d9488;
    --pie-bdr:   rgba(61,220,151,0.15);
    --pie-bdrh:  rgba(61,220,151,0.5);
    --pie-text:  #f0fdf9;
    --pie-muted: rgba(255,255,255,.45);
    --pie-topH:  62px;
    --pie-subH:  50px;
    background: var(--pie-bg);
    color: var(--pie-text);
    font-family: 'Cairo', sans-serif;
    /* Reserve space for the topbar+subbar so content doesn't underlap them. */
    padding-top: calc(var(--pie-topH) + var(--pie-subH));
    min-height: 100dvh;
  }

  /* ── TOPBAR ── */
  #pwaImageEdit .pie-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(26,29,32,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(61,220,151,.15);
    height: var(--pie-topH);
  }
  #pwaImageEdit .pie-topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; height: 100%;
  }
  #pwaImageEdit .pie-brand {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 900; font-size: 20px; text-decoration: none;
  }
  #pwaImageEdit .pie-brand-text { color: #fff; }
  #pwaImageEdit .pie-brand-pill {
    background: #3DDC97; color: #1a1d20;
    padding: 3px 10px; border-radius: 8px; font-size: 16px; font-weight: 900;
  }
  #pwaImageEdit .pie-topbar-actions { display: flex; align-items: center; gap: 8px; }
  #pwaImageEdit .pie-mob-menu-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    color: #fff; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  /* ── SUBBAR ── */
  #pwaImageEdit .pie-subbar {
    position: fixed; top: var(--pie-topH); left: 0; right: 0; z-index: 99;
    background: rgba(26,29,32,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(61,220,151,.12);
    height: var(--pie-subH);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; gap: 8px;
  }
  #pwaImageEdit .pie-subbar-title { display: flex; align-items: center; gap: 8px; }
  #pwaImageEdit .pie-subbar-title-text { font-size: 15px; font-weight: 900; color: #fff; }
  #pwaImageEdit .pie-sub-new-badge {
    font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 20px;
    background: rgba(61,220,151,.15); color: #3DDC97;
    border: 1px solid rgba(61,220,151,.3);
  }
  #pwaImageEdit .pie-subbar-actions { display: flex; align-items: center; gap: 7px; }
  #pwaImageEdit .pie-sub-upload-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all .2s; white-space: nowrap;
  }
  #pwaImageEdit .pie-sub-upload-btn:active { transform: scale(0.96); }
  #pwaImageEdit .pie-sub-upload-btn--primary {
    background: rgba(61,220,151,.1); border-color: rgba(61,220,151,.35); color: #3DDC97;
  }

  /* ── SCROLL AREA / CONTENT ── */
  #pwaImageEdit .pie-scroll-area { overflow-y: auto; overflow-x: hidden; }
  #pwaImageEdit .pie-content {
    padding: 18px 14px 30px; display: flex; flex-direction: column; gap: 20px;
  }

  /* ── Section labels ── */
  #pwaImageEdit .pie-sec-label {
    display: flex; align-items: center; gap: 8px;
    padding: 0 4px; margin-bottom: -10px;
  }
  #pwaImageEdit .pie-sec-label-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    background: rgba(61,220,151,.15);
  }
  #pwaImageEdit .pie-sec-label-hist .pie-sec-label-icon { background: rgba(255,255,255,.07); }
  #pwaImageEdit .pie-sec-label-text { font-size: 14px; font-weight: 900; color: #fff; }
  #pwaImageEdit .pie-sec-label-hint { font-size: 12px; color: var(--pie-muted); margin-right: auto; }

  /* ── TOOLS section ── */
  #pwaImageEdit .pie-tools-section {
    background: var(--pie-bg2);
    border: 1px solid rgba(61,220,151,.18);
    border-top: 2px solid rgba(61,220,151,.5);
    border-radius: 18px; padding: 16px 14px 12px;
  }
  #pwaImageEdit .pie-tools-grid {
    display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  #pwaImageEdit .pie-tools-grid::-webkit-scrollbar { display: none; }
  #pwaImageEdit .tool-chip {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 14px; padding: 14px 14px 12px;
    cursor: pointer; transition: all .2s; flex-shrink: 0; min-width: 82px;
  }
  #pwaImageEdit .tool-chip:active { transform: scale(0.95); }
  #pwaImageEdit .tool-chip.active {
    background: rgba(61,220,151,.12);
    border-color: rgba(61,220,151,.55);
  }
  #pwaImageEdit .tool-chip-icon { font-size: 22px; line-height: 1; }
  #pwaImageEdit .tool-chip-name { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75); white-space: nowrap; }
  #pwaImageEdit .tool-chip.active .tool-chip-name { color: #3DDC97; }
  #pwaImageEdit .tool-chip-cost {
    font-size: 10px; font-weight: 700; font-family: 'Inter', sans-serif;
    background: rgba(61,220,151,.1); color: #3DDC97;
    border: 1px solid rgba(61,220,151,.3); border-radius: 20px;
    padding: 2px 8px; white-space: nowrap;
  }
  #pwaImageEdit .tool-chip.active .tool-chip-cost {
    background: rgba(61,220,151,.15);
    border-color: rgba(61,220,151,.4);
  }

  /* ── UPLOAD section ── */
  #pwaImageEdit .pie-upload-section {
    background: linear-gradient(145deg, #192420, #1a1d20);
    border: 1.5px dashed rgba(61,220,151,.25);
    border-top: 2px solid rgba(61,220,151,.5);
    border-radius: 18px; padding: 28px 18px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center; cursor: pointer; transition: border-color .2s;
  }
  #pwaImageEdit .pie-upload-section:active { border-color: rgba(61,220,151,.7); }
  #pwaImageEdit .pie-upload-section[data-state="loaded"] { opacity: 0.55; }
  #pwaImageEdit .pie-upload-section[data-state="uploading"] { opacity: 0.6; pointer-events: none; }
  #pwaImageEdit .pie-upload-section-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(61,220,151,.1); border: 1px solid rgba(61,220,151,.2);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
  }
  #pwaImageEdit .pie-upload-section-title { font-size: 19px; font-weight: 900; color: #fff; }
  #pwaImageEdit .pie-upload-section-desc {
    font-size: 13px; color: var(--pie-muted);
    line-height: 1.7; max-width: 260px;
  }
  #pwaImageEdit .pie-upload-section-btn {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #3DDC97, #0d9488);
    border: none; border-radius: 13px; padding: 12px 28px;
    font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 900; color: #1a1d20;
    cursor: pointer; transition: transform .15s;
    box-shadow: 0 4px 18px rgba(61,220,151,.3);
  }
  #pwaImageEdit .pie-upload-section-btn:active { transform: scale(0.96); }

  /* ── Image preview + mask canvas ── */
  #pwaImageEdit .pie-image-stage {
    position: relative; border-radius: 14px; overflow: hidden;
    background: #000;
  }
  #pwaImageEdit .pie-image-stage img {
    display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain;
  }
  #pwaImageEdit .pie-mask-wrap {
    position: absolute; inset: 0; pointer-events: none;
  }
  #pwaImageEdit .pie-mask-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: auto; touch-action: none; cursor: crosshair;
  }
  #pwaImageEdit .pie-mask-clear {
    position: absolute; top: 8px; right: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 700;
    pointer-events: auto; cursor: pointer; z-index: 5;
  }

  /* ── OPTIONS section ── */
  #pwaImageEdit .pie-options-section {
    background: var(--pie-bg2);
    border: 1px solid rgba(61,220,151,.18);
    border-top: 2px solid rgba(61,220,151,.5);
    border-radius: 18px; overflow: hidden;
  }
  #pwaImageEdit .pie-options-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    background: rgba(61,220,151,.04);
    border-bottom: 1px solid rgba(61,220,151,.1);
  }
  #pwaImageEdit .pie-options-hdr-left { display: flex; align-items: center; gap: 10px; }
  #pwaImageEdit .pie-options-hdr-icon { font-size: 18px; }
  #pwaImageEdit .pie-options-hdr-title { font-size: 15px; font-weight: 900; color: #fff; }
  #pwaImageEdit .pie-options-hdr-badge {
    font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px;
    background: rgba(61,220,151,.15); color: #3DDC97; border: 1px solid rgba(61,220,151,.35);
  }
  #pwaImageEdit .pie-options-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
  #pwaImageEdit .pie-draw-hint {
    background: rgba(61,220,151,.05); border: 1px solid rgba(61,220,151,.15);
    border-radius: 14px; padding: 14px 16px;
    font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.7;
  }
  #pwaImageEdit .pie-draw-hint strong { color: #3DDC97; }
  #pwaImageEdit .pie-opt-sub-label {
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5);
    text-transform: uppercase; letter-spacing: .8px;
  }
  #pwaImageEdit .tool-panel { display: none; }
  #pwaImageEdit .tool-panel.active { display: flex; flex-direction: column; gap: 14px; }
  #pwaImageEdit .pie-add-prompt {
    background: rgba(255,255,255,.05); border: 1.5px solid rgba(61,220,151,.2);
    border-radius: 14px; padding: 13px 16px; color: #fff;
    font-family: 'Cairo', sans-serif; font-size: 14px; resize: none; height: 80px;
    outline: none; transition: border-color .2s; line-height: 1.6;
  }
  #pwaImageEdit .pie-add-prompt::placeholder { color: rgba(255,255,255,.3); }
  #pwaImageEdit .pie-add-prompt:focus {
    border-color: rgba(61,220,151,.55); background: rgba(61,220,151,.04);
  }

  /* Direction grid (relight) */
  #pwaImageEdit .pie-dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #pwaImageEdit .dir-btn {
    background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: 11px 0; text-align: center;
    font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700;
    color: rgba(255,255,255,.65); cursor: pointer; transition: all .2s;
  }
  #pwaImageEdit .dir-btn:active { transform: scale(0.94); }
  #pwaImageEdit .dir-btn.active {
    background: rgba(61,220,151,.12);
    border-color: rgba(61,220,151,.5); color: #3DDC97;
  }

  /* Light stage (relight) */
  #pwaImageEdit .pie-light-stage {
    position: relative; width: 100%; aspect-ratio: 1/1;
    background: radial-gradient(ellipse at center, #1e2229 0%, #13161a 100%);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 18px; overflow: hidden; cursor: crosshair; touch-action: none;
  }
  #pwaImageEdit .pie-light-stage::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 25% 25%;
  }
  #pwaImageEdit .pie-light-hint {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.35);
    white-space: nowrap; pointer-events: none; z-index: 4;
    font-family: 'Cairo', sans-serif;
  }
  #pwaImageEdit .pie-edge-arr {
    position: absolute; font-size: 13px; color: rgba(255,255,255,.25);
    pointer-events: none; z-index: 4; line-height: 1;
  }
  #pwaImageEdit .pie-edge-arr-t { top: 8px; left: 50%; transform: translateX(-50%); margin-top: 14px; }
  #pwaImageEdit .pie-edge-arr-b { bottom: 8px; left: 50%; transform: translateX(-50%); }
  #pwaImageEdit .pie-edge-arr-l { left: 8px; top: 50%; transform: translateY(-50%); }
  #pwaImageEdit .pie-edge-arr-r { right: 8px; top: 50%; transform: translateY(-50%); }
  #pwaImageEdit .pie-light-svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 2; overflow: visible;
  }
  #pwaImageEdit .pie-light-subject {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; z-index: 3; pointer-events: none;
  }
  #pwaImageEdit .pie-light-dot {
    position: absolute; transform: translate(-50%, -50%);
    cursor: grab; z-index: 5; touch-action: none;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 10px rgba(251,191,36,.7));
  }
  #pwaImageEdit .pie-light-dot:active {
    cursor: grabbing; filter: drop-shadow(0 0 18px rgba(251,191,36,.9));
  }

  /* Chips row (light type / color) */
  #pwaImageEdit .pie-chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
  #pwaImageEdit .light-chip {
    padding: 9px 18px; border-radius: 50px;
    font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.65); cursor: pointer; transition: all .2s;
  }
  #pwaImageEdit .light-chip.active {
    background: rgba(61,220,151,.12);
    border-color: rgba(61,220,151,.5); color: #3DDC97;
  }
  #pwaImageEdit .light-chip:active { transform: scale(0.95); }

  /* Style grid */
  #pwaImageEdit .pie-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  #pwaImageEdit .style-opt {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 14px; padding: 14px 8px 12px;
    cursor: pointer; transition: all .2s;
  }
  #pwaImageEdit .style-opt:active { transform: scale(0.94); }
  #pwaImageEdit .style-opt.active {
    background: rgba(61,220,151,.1); border-color: rgba(61,220,151,.5);
  }
  #pwaImageEdit .style-opt-icon { font-size: 26px; line-height: 1; }
  #pwaImageEdit .style-opt-name {
    font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75); text-align: center;
  }
  #pwaImageEdit .style-opt.active .style-opt-name { color: #3DDC97; }

  /* Upscale grid */
  #pwaImageEdit .pie-upscale-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  #pwaImageEdit .upscale-opt {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 14px; padding: 14px 8px 12px;
    cursor: pointer; transition: all .2s;
  }
  #pwaImageEdit .upscale-opt:active { transform: scale(0.94); }
  #pwaImageEdit .upscale-opt.active {
    background: rgba(61,220,151,.1); border-color: rgba(61,220,151,.5);
  }
  #pwaImageEdit .upscale-mult { font-size: 22px; font-weight: 900; color: rgba(255,255,255,.9); line-height: 1.1; }
  #pwaImageEdit .upscale-opt.active .upscale-mult { color: #3DDC97; }
  #pwaImageEdit .upscale-label { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.7); text-align: center; }
  #pwaImageEdit .upscale-opt.active .upscale-label { color: #3DDC97; }
  #pwaImageEdit .upscale-sub { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.35); text-align: center; min-height: 14px; }

  /* Creativity list */
  #pwaImageEdit .pie-creativity-list { display: flex; flex-direction: column; gap: 8px; }
  #pwaImageEdit .creativity-opt {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 13px; padding: 12px 14px;
    cursor: pointer; transition: all .2s;
  }
  #pwaImageEdit .creativity-opt:active { transform: scale(0.98); }
  #pwaImageEdit .creativity-opt.active {
    background: rgba(61,220,151,.08); border-color: rgba(61,220,151,.45);
  }
  #pwaImageEdit .creativity-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: border-color .2s;
  }
  #pwaImageEdit .creativity-opt.active .creativity-radio { border-color: #3DDC97; }
  #pwaImageEdit .creativity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #3DDC97; opacity: 0; transform: scale(0.5);
    transition: opacity .2s, transform .2s;
  }
  #pwaImageEdit .creativity-opt.active .creativity-dot { opacity: 1; transform: scale(1); }
  #pwaImageEdit .creativity-info { display: flex; flex-direction: column; gap: 2px; }
  #pwaImageEdit .creativity-name { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 7px; }
  #pwaImageEdit .creativity-opt.active .creativity-name { color: #3DDC97; }
  #pwaImageEdit .creativity-desc { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.38); }
  #pwaImageEdit .creativity-badge { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 20px; background: rgba(61,220,151,.15); color: #3DDC97; }

  /* ── COST + APPLY section ── */
  #pwaImageEdit .pie-cost-section {
    background: linear-gradient(135deg, #192420, #1a1d20);
    border: 1px solid rgba(61,220,151,.2);
    border-top: 2px solid rgba(61,220,151,.55);
    border-radius: 18px; padding: 18px 16px;
    display: flex; flex-direction: column; gap: 14px;
  }
  #pwaImageEdit .pie-cost-row { display: flex; align-items: center; justify-content: space-between; }
  #pwaImageEdit .pie-cost-label-left { display: flex; align-items: center; gap: 8px; }
  #pwaImageEdit .pie-cost-label-icon { font-size: 18px; }
  #pwaImageEdit .pie-cost-label-text { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6); }
  #pwaImageEdit .pie-cost-val {
    display: flex; align-items: center; gap: 5px;
    font-size: 22px; font-weight: 900; color: #3DDC97; font-family: 'Inter', sans-serif;
  }
  #pwaImageEdit .pie-cost-val i { font-size: 14px; }
  #pwaImageEdit .pie-cost-note { font-size: 11px; color: var(--pie-muted); line-height: 1.5; text-align: center; }
  #pwaImageEdit .pie-apply-full-btn {
    width: 100%; height: 54px; border-radius: 14px;
    background: linear-gradient(135deg, #0f2e24, #1a3d2e);
    border: 1.5px solid rgba(61,220,151,.5);
    font-family: 'Cairo', sans-serif; font-size: 17px; font-weight: 900; color: #3DDC97;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 0 22px rgba(61,220,151,.2), 0 3px 14px rgba(0,0,0,.3);
    transition: transform .15s, box-shadow .2s;
  }
  #pwaImageEdit .pie-apply-full-btn:active { transform: scale(0.97); box-shadow: 0 0 10px rgba(61,220,151,.1); }
  #pwaImageEdit .pie-apply-full-btn.is-busy { opacity: 0.6; cursor: wait; }
  #pwaImageEdit .pie-apply-tool-name { font-size: 15px; opacity: .7; }

  /* ── HISTORY section ── */
  #pwaImageEdit .pie-hist-section {
    background: var(--pie-bg2);
    border: 1px solid rgba(255,255,255,.07);
    border-top: 2px solid rgba(255,255,255,.15);
    border-radius: 18px; overflow: hidden;
  }
  #pwaImageEdit .pie-hist-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #pwaImageEdit .pie-hist-hdr-left { display: flex; align-items: center; gap: 8px; }
  #pwaImageEdit .pie-hist-hdr-icon { font-size: 16px; }
  #pwaImageEdit .pie-hist-hdr-title { font-size: 15px; font-weight: 900; color: #fff; }
  #pwaImageEdit .pie-hist-hdr-count {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    background: rgba(255,255,255,.07); color: var(--pie-muted);
  }
  #pwaImageEdit .pie-hist-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 28px 20px; text-align: center;
  }
  #pwaImageEdit .pie-hist-empty-icon { font-size: 36px; opacity: .2; }
  #pwaImageEdit .pie-hist-empty-title { font-size: 14px; font-weight: 800; color: rgba(255,255,255,.5); }
  #pwaImageEdit .pie-hist-empty-sub { font-size: 12px; color: var(--pie-muted); }
  #pwaImageEdit .pie-hist-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 12px;
  }
  #pwaImageEdit .pie-hist-list:empty { display: none; }
  #pwaImageEdit .hist-thumb {
    position: relative; aspect-ratio: 1/1; border-radius: 10px;
    overflow: hidden; cursor: pointer;
    background: rgba(0,0,0,0.3);
  }
  #pwaImageEdit .hist-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  #pwaImageEdit .hist-thumb-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 4px 8px; font-size: 10px; font-weight: 800;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: #fff;
  }
}
/* =========== END RFC-027 PHASE-1 — Zain Session A =========== */


/* ===========================================================================
 * RFC-017 HOTFIX-50 (2026-05-13 Zain): .fa-spin animation for SVG icons
 * inside PWA roots. The injector preserves `fa-spin` class on the SVG so
 * loading spinners still animate after FA→SVG conversion.
 * =========================================================================== */
@media (max-width: 920px) {
  #pwaImageCreate svg.fa-spin,
  #pwaVideoCreate svg.fa-spin,
  #pwaBrandkitCreate svg.fa-spin {
    animation: pwa-fa-spin 0.85s linear infinite;
    transform-origin: center;
  }
  #pwaImageCreate svg.fa-pulse,
  #pwaVideoCreate svg.fa-pulse,
  #pwaBrandkitCreate svg.fa-pulse {
    animation: pwa-fa-spin 1.5s steps(8) infinite;
    transform-origin: center;
  }
}
@keyframes pwa-fa-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* =========== END RFC-017 HOTFIX-50 =========== */


/* RFC-027 HOTFIX-3 — Zain Session A 2026-05-13: hide upload card when loaded;
   delete-image button; loading overlay during apply. All inside @media. */
@media (max-width: 920px) {
  /* A: actually hide upload card when image loaded (was just dimmed) */
  #pwaImageEdit .pie-upload-section[data-state="loaded"] { display: none !important; }

  /* B: delete-image floating button (top-trailing of image-stage) */
  #pwaImageEdit .pie-delete-image-btn {
    position: absolute; top: 10px; inset-inline-end: 10px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(244,63,94,0.92); border: 1.5px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 22px; font-weight: 800; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 6;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  }
  #pwaImageEdit .pie-delete-image-btn:active { transform: scale(0.92); }

  /* C: loading overlay across the image stage during apply */
  #pwaImageEdit .pie-apply-loading {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(15,18,22,0.78);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; border-radius: 14px;
  }
  #pwaImageEdit .pie-apply-loading[style*="display:none"],
  #pwaImageEdit .pie-apply-loading[style*="display: none"] { display: none !important; }
  #pwaImageEdit .pie-apply-spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 3.5px solid rgba(61,220,151,0.18);
    border-top-color: #3DDC97;
    animation: pie-spin 0.85s linear infinite;
  }
  @keyframes pie-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  #pwaImageEdit .pie-apply-text {
    font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 800; color: #3DDC97;
  }
}
/* =========== END RFC-027 HOTFIX-3 — Zain Session A =========== */


/* RFC-027 HOTFIX-4 — Zain Session A 2026-05-13:
   1. Removed مسح (clear-mask) button — single × delete-image is enough.
   2. Section labels no longer overlap section cards below — Zain reported
      icons (⚙️ 💰 🗂️) visually clashing with the mint-green top border of
      the section underneath. Original design's margin-bottom:-10px was a
      'tucked under' visual; on Honor V5 it read as overlap. Reset to 0
      and add a slight top-padding inside each section to keep the gap
      visual ratio consistent. */
@media (max-width: 920px) {
  #pwaImageEdit .pie-sec-label { margin-bottom: 4px; }

  /* Compensate inside each section so it doesn't visually float */
  #pwaImageEdit .pie-tools-section,
  #pwaImageEdit .pie-upload-section,
  #pwaImageEdit .pie-options-section,
  #pwaImageEdit .pie-cost-section,
  #pwaImageEdit .pie-hist-section { margin-top: 0; }
}
/* =========== END RFC-027 HOTFIX-4 — Zain Session A =========== */


/* RFC-027 HOTFIX-5 — Zain Session A 2026-05-13: Gallery picker modal.
   Fullscreen overlay with thumbnail grid + click-to-select. Click thumbnail
   sets state.imageUrl directly (no /api/upload-image roundtrip). */
@media (max-width: 920px) {
  #pwaImageEdit .pie-gallery-modal {
    display: none;
    position: fixed; inset: 0; z-index: 2000;
    align-items: stretch; justify-content: center;
  }
  #pwaImageEdit .pie-gallery-modal.is-open { display: flex; }
  #pwaImageEdit .pie-gallery-backdrop {
    position: absolute; inset: 0;
    background: rgba(5,8,12,0.78);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  #pwaImageEdit .pie-gallery-card {
    position: relative;
    width: 100%; max-width: 700px; height: 100dvh;
    background: linear-gradient(180deg, #1a1d20 0%, #131517 100%);
    display: flex; flex-direction: column;
    border-left: 1px solid rgba(61,220,151,0.15);
    border-right: 1px solid rgba(61,220,151,0.15);
  }
  #pwaImageEdit .pie-gallery-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(61,220,151,0.12);
    flex-shrink: 0;
    background: rgba(26,29,32,0.95);
  }
  #pwaImageEdit .pie-gallery-title {
    font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 900; color: #fff;
  }
  #pwaImageEdit .pie-gallery-close {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  #pwaImageEdit .pie-gallery-grid {
    flex: 1 1 auto; overflow-y: auto;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 12px;
    align-content: start;
  }
  #pwaImageEdit .pie-gallery-loading {
    grid-column: 1 / -1; text-align: center;
    color: rgba(255,255,255,0.45); padding: 40px 16px;
    font-family: 'Cairo', sans-serif; font-size: 13px;
  }
  #pwaImageEdit .pie-gallery-tile {
    position: relative; aspect-ratio: 1/1; border-radius: 12px;
    overflow: hidden; cursor: pointer;
    background: rgba(0,0,0,0.4); border: 1.5px solid rgba(255,255,255,0.08);
    transition: transform .15s, border-color .15s;
  }
  #pwaImageEdit .pie-gallery-tile:active {
    transform: scale(0.96); border-color: rgba(61,220,151,0.6);
  }
  #pwaImageEdit .pie-gallery-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  #pwaImageEdit .pie-gallery-footer {
    padding: 12px; text-align: center;
    color: rgba(255,255,255,0.4); font-size: 11px;
    font-family: 'Cairo', sans-serif;
    flex-shrink: 0;
  }
}
/* =========== END RFC-027 HOTFIX-5 — Zain Session A =========== */


/* ===========================================================================
 * RFC-017 HOTFIX-53 (2026-05-13 Zain): mobile-native character picker sheet.
 * Slides up from bottom (z-index 700 to sit above the form sheet at 501).
 * =========================================================================== */
@media (max-width: 920px) {
  #pwaBrandkitCreate .pwa-bk-charpick-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 700; opacity: 0; transition: opacity .3s;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-overlay.open { display: block; opacity: 1; }
  #pwaBrandkitCreate .pwa-bk-charpick-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 88dvh;
    z-index: 701;
    background: #1a1428;
    border-radius: 24px 24px 0 0;
    border-top: 1px solid rgba(167,139,250,.3);
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
  }
  #pwaBrandkitCreate .pwa-bk-charpick-sheet.open { transform: translateY(0); }
  #pwaBrandkitCreate .pwa-bk-charpick-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-title {
    font-size: 16px; font-weight: 900; color: #fff;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-close {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    color: #fff; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-tabs {
    display: flex; gap: 8px; padding: 12px 14px;
    flex-shrink: 0;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-tab {
    flex: 1; padding: 9px 12px; border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.1);
    font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-tab--active {
    background: rgba(167,139,250,.18);
    color: #fff;
    border-color: rgba(167,139,250,.35);
  }
  #pwaBrandkitCreate .pwa-bk-charpick-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
    padding: 4px 14px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-content: start;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-body::-webkit-scrollbar { display: none; }
  #pwaBrandkitCreate .pwa-bk-charpick-loading,
  #pwaBrandkitCreate .pwa-bk-charpick-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 40px 12px;
    color: rgba(255,255,255,.55); font-size: 13px;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-card {
    cursor: pointer; border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.08);
    transition: border-color .15s, transform .15s;
    aspect-ratio: 1 / 1.3;
    display: flex; flex-direction: column;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-card:active {
    transform: scale(.97);
    border-color: rgba(167,139,250,.5);
  }
  #pwaBrandkitCreate .pwa-bk-charpick-card img {
    width: 100%; height: 70%; object-fit: cover; display: block;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-card-meta {
    padding: 7px 9px;
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; justify-content: center;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-card-name {
    font-size: 12px; font-weight: 800; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #pwaBrandkitCreate .pwa-bk-charpick-card-tier {
    font-size: 10px; color: rgba(255,255,255,.5);
  }
  #pwaBrandkitCreate .pwa-bk-charpick-card-tier--pro {
    color: #fbbf24; font-weight: 800;
  }
}
/* =========== END RFC-017 HOTFIX-53 =========== */

/* RFC-027 HOTFIX-7 — Zain Session A 2026-05-13: bulletproof square tiles.
   Honor V5 webview was ignoring aspect-ratio:1/1 on .pie-gallery-tile,
   causing tiles to size by their img's intrinsic height (portrait photos
   = tall tiles = massive overlap). Switch to the classic padding-bottom
   trick + absolute-positioned img. Also explicitly set grid-auto-rows. */
@media (max-width: 920px) {
  #pwaImageEdit .pie-gallery-grid {
    grid-auto-rows: max-content;
  }
  #pwaImageEdit .pie-gallery-tile {
    /* Override H5's aspect-ratio with bulletproof fallback. */
    aspect-ratio: auto !important;
    height: 0 !important;
    padding-bottom: 100% !important;
  }
  #pwaImageEdit .pie-gallery-tile img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* =========== END RFC-027 HOTFIX-7 — Zain Session A =========== */


/* ===========================================================================
 * RFC-018 PHASE-1 (2026-05-13 Zain): active-state highlight for mobile sidebar
 * items per Furqan's hamburger-menu mockup. The current page (request.endpoint
 * match) gets a subtle bg + a 3px green vertical bar on the right edge (RTL = start).
 * Box-shadow inset is used instead of border so item layout doesn't shift.
 * =========================================================================== */
@media (max-width: 920px) {
  .mob-sidebar .msb-item--active {
    background: rgba(255,255,255,0.06) !important;
    box-shadow: inset -3px 0 0 #3DDC97 !important;
    color: #fff !important;
  }
  .mob-sidebar .msb-item--active .msb-icon {
    color: #3DDC97 !important;
  }
}
/* =========== END RFC-018 PHASE-1 =========== */


/* ════════════════════════════════════════════════════════════════════════
   WB-229 NAVBARS-CINEMA-PWA (وحش بلال 2026-05-13):
   Cinema-green overrides for mobile sidebar (.mob-sidebar / .msb-*) and
   any other PWA nav purple stragglers. Appended last so it wins.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 920px) {
  /* The "NEW" badge on mobile sidebar — was #6d28d9 purple */
  .msb-badge {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #03110a !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.30) !important;
  }

  /* Section title — green accent matching the new theme */
  .mob-sidebar .msb-section-title {
    color: rgba(134, 239, 172, 0.65) !important;
  }

  /* Active state — already green via RFC-018 PHASE-1, keep but ensure
     the green tone matches our cinema palette exactly. */
  .mob-sidebar .msb-item--active {
    background: rgba(34, 197, 94, 0.10) !important;
    box-shadow: inset -3px 0 0 #22c55e !important;
    color: #fff !important;
  }
  .mob-sidebar .msb-item--active .msb-icon {
    color: #86efac !important;
  }

  /* Hover on mobile items */
  .mob-sidebar .msb-item:hover,
  .mob-sidebar .msb-item:focus {
    background: rgba(34, 197, 94, 0.08) !important;
  }
  .msb-icon {
    color: #86efac !important;
  }

  /* mob-overlay — keep dark but tint border with green */
  .mob-overlay { background: rgba(2, 8, 4, 0.55) !important; }
}

/* PWA brandkit / community / etc. — any lingering purple becomes green */
[id^="pwa"] [class*="suggest-btn"] i,
.pwa-bk-suggest-btn i {
  color: #86efac !important;
}

/* =========================================================================
 * RFC-019 PHASE-1 + HOTFIX-1 + HOTFIX-2 (2026-05-14 Zain): image-tile kebab + dropdown menu.
 * HOTFIX-1: only 3 of 6 items showed (bottom clipped by tile overflow).
 * Per Boss: bg 90% transparent, 50% neon glow on text, smaller font to fit.
 * Replaces the 6-icon overlay row (pwa-ic-card-actions) on /create/image PWA.
 * Scoped to phone viewport (@media max-width:920px); desktop unaffected.
 * ========================================================================= */
@media (max-width: 920px) {
  /* H1: overflow:visible so the menu can extend past tile bottom if needed. */
  .pwa-ic-card { position: relative; overflow: visible; }

  .pwa-ic-card-kebab {
    position: absolute; top: 6px; right: 6px;
    width: 28px; height: 28px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    color: #fff; font-size: 18px; font-weight: 700; line-height: 1;
    cursor: pointer; z-index: 6;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
  }
  .pwa-ic-card-kebab:active,
  .pwa-ic-card-kebab[aria-expanded="true"] {
    background: rgba(61,220,151,0.85); color: #1a1d20;
  }

  /* H1: menu is 90% transparent (alpha 0.10) with stronger blur to keep it
     readable; smaller font + padding so all 6 items fit inside tile bounds. */
  .pwa-ic-card-menu {
    /* H2: position:fixed so menu escapes parent overflow + z-index contexts.
       top + right are set inline by JS from kebab.getBoundingClientRect. */
    position: fixed;
    min-width: 150px; max-width: min(200px, calc(100vw - 24px));
    background: rgba(20,22,26,0.10);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 7; overflow: hidden; padding: 2px 0;
  }
  .pwa-ic-card-menu[hidden] { display: none; }

  /* H1: smaller text + 50% neon glow (brand green) for readability on
     mostly-transparent background. */
  .pwa-ic-card-menu button {
    display: block; width: 100%;
    padding: 5px 10px;
    border: none; background: transparent;
    color: #fff; text-align: right;
    font-family: inherit;
    font-size: clamp(9px, 2.5vw, 11px);
    line-height: 1.25; cursor: pointer;
    text-shadow:
      0 0 4px rgba(61,220,151,0.5),
      0 0 8px rgba(61,220,151,0.5);
  }
  .pwa-ic-card-menu button:active,
  .pwa-ic-card-menu button:hover {
    background: rgba(61,220,151,0.12);
  }
  .pwa-ic-card-menu button + button {
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .pwa-ic-card-menu .pwa-ic-card-menu-del {
    color: #fca5a5;
    text-shadow:
      0 0 4px rgba(239,68,68,0.5),
      0 0 8px rgba(239,68,68,0.5);
  }
  .pwa-ic-card-menu .pwa-ic-card-menu-del:active,
  .pwa-ic-card-menu .pwa-ic-card-menu-del:hover {
    background: rgba(239,68,68,0.14);
  }
}
/* ============= END RFC-019 PHASE-1 + HOTFIX-1 ============= */
