/* ===========================================================================
   app.mobile.css — Phase 1 of mobile redesign
   ---------------------------------------------------------------------------
   Owns the iOS-style bottom tab bar + mobile home screen. Loads after
   app.css; namespaced under .mob-* and #mobileShell so nothing collides
   with desktop rules.

   Active only on viewport <= 720px. The matchMedia listener in
   app.mobile.js mounts/destroys the shell at this exact breakpoint, so
   the desktop layout stays untouched on tablets and up.
   =========================================================================== */

/* ---------- Palette (mirrors design tokens from mobile.jsx) ---------- */
:root {
  --mob-paper:  #FAF7F2;
  --mob-paper2: #F3EEE5;
  --mob-paper3: #EBE4D7;
  --mob-line:      #E3DBCB;
  --mob-line-soft: #EEE8DC;
  --mob-ink:  #1A1814;
  --mob-ink2: #3A362E;
  --mob-ink3: #6B6557;
  --mob-ink4: #9A9282;
  --mob-mint:      oklch(0.62 0.08 170);
  --mob-mint-soft: oklch(0.94 0.03 170);
  --mob-mint-ink:  oklch(0.32 0.06 170);
}

/* ---------- Shell container ---------- */
/* Mounted by JS as the last child of #appView, so it sits above the
   normal <main> content and fills the viewport. Hidden until the JS
   shell is initialized to avoid FOUC. */
#mobileShell {
  display: none;
}

/* ===========================================================================
   Activate ONLY on phones (<= 720px). Tablets+ keep the desktop layout.
   =========================================================================== */
@media (max-width: 720px) {

  /* When the mobile shell is active, hide the existing desktop chrome
     inside #appView so the home screen owns the visible area. The
     home screen has its own brand row + bell, so the legacy appbar
     (brand+email duo) and the iOS install banner just clutter the
     viewport on mobile. The burger menu still reachable via the
     "Paskyra" tab — its click handler fires programmatically. */
  body.mob-shell-active #appView > .main { display: none !important; }
  body.mob-shell-active #appView > aside,
  body.mob-shell-active #appView > .ed-sidebar { display: none !important; }
  body.mob-shell-active #appView > .appbar { display: none !important; }
  body.mob-shell-active #appLaunchBanner { display: none !important; }
  /* Desktop site footer (logo + copyright + links + App Store badge)
     has a light blue-grey background that clashes with the cream
     paper of the mobile shell. Hide it - the mobile UI carries no
     persistent footer of its own. */
  body.mob-shell-active footer.site-footer { display: none !important; }
  body.mob-shell-active #mobileShell { display: block; }

  /* When in "list" mode (a saved search has been opened), unhide
     the desktop main so the existing listings UI shows through.
     The home screen + tab bar stay overlaid above. */
  body.mob-shell-active.mob-screen-list #appView > .main { display: block !important; }
  body.mob-shell-active.mob-screen-list #mobileHomeScreen { display: none !important; }

  /* Reserve space at the bottom of the page so listings, footer, and
     any other content don't get hidden behind the flush tab bar.
     ~58px = bar's icon-row content (50) + 8px top padding. The bar's
     own padding-bottom honors the env() inset, so we add it here too
     to match the bar's bottom edge. Net: ~18px content-space won
     back versus the prior floating-island layout. */
  body.mob-shell-active {
    /* Mirrors the bar's actual height: 8px top padding + ~50px tab
       content + bar's bottom padding (max(8px, env() - 14px)). */
    padding-bottom: calc(58px + max(8px, calc(env(safe-area-inset-bottom, 0px) - 14px))) !important;
  }

  /* ---------- Home screen ---------- */
  /* Lives inside #mobileShell. Vertical-scroll-friendly column with
     paper background. Bottom padding leaves room for the flush tab
     bar plus a little breathing room for the upgrade card / list end. */
  #mobileHomeScreen {
    background: var(--mob-paper);
    min-height: 100vh;
    /* Match the bar's new (smaller) bottom padding so the home content
       isn't reserving more space than the bar actually consumes. */
    padding-bottom: calc(72px + max(8px, calc(env(safe-area-inset-bottom, 0px) - 14px)));
    color: var(--mob-ink);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
  }

  /* Top row: brand badge + plan eyebrow on the left, bell on the right.
     Top padding leaves room for the iOS status bar / notch. We use
     env(safe-area-inset-top) where supported and fall back to 14px.
     Sticky so the header stays pinned to the top regardless of scroll
     position — iOS WKWebView can restore a non-zero scrollTop on cold
     start which previously left the header above the viewport until
     the user scrolled all the way up. Opaque background hides
     scrolled content sliding underneath. */
  .mob-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top, 14px)) 20px 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mob-paper);
  }
  .mob-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* Brand badge holds the existing NTAlert app icon (PNG). The icon
     is already the recognizable mark across the desktop appbar, the
     PWA install prompt, and the iOS app — reuse it for consistency
     instead of inventing a serif "NT" monogram for one screen. */
  .mob-brand-badge {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--mob-paper2);
    display: grid; place-items: center;
    overflow: hidden;
    position: relative;
  }
  .mob-brand-badge img {
    width: 28px; height: 28px;
    object-fit: contain;
    display: block;
  }
  .mob-brand-name {
    font-family: "Fraunces", Georgia, serif;
    font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--mob-ink); line-height: 1.1;
  }
  .mob-brand-plan {
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mob-ink3); font-weight: 600; margin-top: 2px;
  }
  .mob-bell-btn {
    width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid var(--mob-line); background: var(--mob-paper);
    color: var(--mob-ink2);
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Absolute-center the SVG so the count chip + dot (also positioned)
     can never push it off-axis. Whitespace text nodes between children
     in the template literal otherwise act as anonymous grid items and
     shift the icon a few px to the right. */
  .mob-bell-btn svg {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
  }

  /* Mint dot when there are no unread items — quiet "all caught up"
     indicator, hidden when the count chip is shown. */
  .mob-bell-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mob-mint, #4ecba0);
    border: 1.5px solid var(--mob-paper, #faf9f7);
    pointer-events: none;
  }

  /* Count chip — mirrors desktop .ed-topbar-bell-count: amber pill,
     ink text, 18px tall, centered text via line-height + text-align,
     2px paper-colored ring so it cleanly cuts out from the bell. */
  .mob-bell-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f5b942; /* amber */
    color: #1a1916;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--mob-paper, #faf9f7);
    pointer-events: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* Greeting + headline. The number block at end of the H1 reads as
     hero typography ("3 nauji skelbimai…"). */
  .mob-greeting {
    padding: 10px 20px 22px;
  }
  .mob-greeting-eyebrow {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mob-ink4); font-weight: 600;
  }
  .mob-greeting h1 {
    font-family: "Fraunces", Georgia, serif;
    font-size: 28px; font-weight: 500; letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 4px 0 0;
    color: var(--mob-ink);
  }

  /* Stats strip: 2 tiles (Phase 1 — "Kainų pokyčių" tile is hidden
     because no client-side source exists yet). */
  .mob-stats {
    margin: 0 20px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mob-stat {
    padding: 12px 10px;
    background: var(--mob-paper);
    border: 1px solid var(--mob-line-soft);
    border-radius: 12px;
  }
  .mob-stat-label {
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mob-ink4); font-weight: 600;
  }
  .mob-stat-value {
    font-family: "Fraunces", Georgia, serif;
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
    margin-top: 2px;
    color: var(--mob-ink);
  }
  .mob-stat-sub {
    font-size: 10px; color: var(--mob-ink3);
    font-family: "JetBrains Mono", monospace;
  }

  /* Saved-searches section. The header has the section eyebrow and a
     "+ Nauja" button on the right. */
  .mob-section-head {
    padding: 0 20px 8px;
    display: flex; align-items: center; gap: 12px;
  }
  .mob-section-head-label {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mob-ink4); font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }
  .mob-section-head-action {
    font-size: 12px; font-weight: 600; color: var(--mob-ink);
    display: inline-flex; align-items: center; gap: 3px;
    background: none; border: 0; padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
    flex-shrink: 0;
    flex-grow: 0;
    /* Override the legacy global `button { width: 100% }` from app.css —
       without this the +Nauja button stretches across the row and
       collapses the section label to 0px. */
    width: auto;
    white-space: nowrap;
  }
  .mob-section-head-action svg { width: 13px; height: 13px; }

  /* Saved-search row cards. "+N" badge for unread, ChevronRight when
     the search has nothing new. */
  .mob-search-list {
    padding: 0 20px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .mob-search-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: var(--mob-paper);
    border: 1px solid var(--mob-line);
    border-radius: 14px;
    text-align: left; width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s;
  }
  .mob-search-row:active {
    background: var(--mob-paper2);
  }
  /* Swipe-to-delete wrapper. The .mob-search-row sits on top, the
     red action panel underneath; swiping left translates the row to
     reveal the panel. iOS Mail / Notes pattern. */
  .mob-search-row-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
  }
  .mob-search-row-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 88px;
    border: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;  /* below the row by default */
  }
  .mob-search-row-action--edit {
    right: 88px;
    background: #2c7a7b;  /* deep teal — sits adjacent to the red delete */
  }
  .mob-search-row-action--delete {
    right: 0;
    background: #c0392b;
  }
  .mob-search-row-action svg {
    width: 18px; height: 18px; stroke-width: 1.8;
  }
  /* Row layered on top of the action panel; transitions when not
     actively dragged. The wrap toggles .is-swiping during touchmove
     so the inline transform doesn't fight the transition. */
  .mob-search-row-wrap .mob-search-row {
    position: relative;
    z-index: 2;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(.2, .8, .2, 1);
  }
  .mob-search-row-wrap.is-swiping .mob-search-row {
    transition: none;
  }
  .mob-search-row-wrap.is-revealed .mob-search-row {
    transform: translateX(-176px);
  }

  .mob-search-row.is-locked {
    opacity: 0.7;
    background: var(--mob-paper2);
  }
  .mob-search-row.is-locked .mob-search-title {
    color: var(--mob-ink3);
  }
  .mob-search-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--mob-paper2);
    display: grid; place-items: center;
    color: var(--mob-ink2);
    flex-shrink: 0;
  }
  .mob-search-icon svg { width: 18px; height: 18px; }
  /* Padlock variant: emoji is sized via font, not SVG. */
  .mob-search-icon.is-locked {
    font-size: 18px;
    line-height: 1;
  }
  .mob-search-text {
    flex: 1; min-width: 0;
  }
  .mob-search-title {
    font-size: 14px; font-weight: 500; color: var(--mob-ink);
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mob-search-sub {
    font-size: 11px; color: var(--mob-ink3); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mob-search-badge {
    background: var(--mob-ink); color: var(--mob-paper);
    font-size: 11px; font-weight: 600; font-family: "JetBrains Mono", monospace;
    padding: 3px 8px; border-radius: 999px;
    flex-shrink: 0;
  }
  .mob-search-chev {
    width: 14px; height: 14px; color: var(--mob-ink4);
    flex-shrink: 0;
  }
  .mob-search-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--mob-ink3);
    font-size: 13px;
  }

  /* Upgrade card (3 visual states by data-tier attr).
     - free  → big dark card with mint accent + "Pamatyti planus" CTA
     - paid  → smaller "atnaujinkite į Maksimalų" card (only for ADVANCED)
     - hide  → display:none (UNLIMITED, ADMIN) */
  .mob-upgrade {
    margin: 22px 20px 0;
    padding: 16px;
    background: var(--mob-ink); color: var(--mob-paper);
    border-radius: 16px;
    display: flex; align-items: flex-start; gap: 12px;
  }
  .mob-upgrade[data-tier="hide"] { display: none; }
  .mob-upgrade-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,0.10);
    display: grid; place-items: center;
    color: var(--mob-mint);
    flex-shrink: 0;
  }
  .mob-upgrade-icon svg { width: 16px; height: 16px; }
  .mob-upgrade-body { flex: 1; }
  .mob-upgrade-title {
    font-family: "Fraunces", Georgia, serif;
    font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
  }
  .mob-upgrade-desc {
    font-size: 12px; opacity: 0.7; margin-top: 4px; line-height: 1.4;
  }
  .mob-upgrade-cta {
    margin-top: 12px;
    padding: 9px 14px;
    background: var(--mob-mint); color: var(--mob-ink);
    border-radius: 10px;
    font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-upgrade-cta svg { width: 12px; height: 12px; }
  /* Smaller variant for ADVANCED users hinting at MAX. */
  .mob-upgrade[data-tier="paid"] {
    background: var(--mob-paper);
    color: var(--mob-ink);
    border: 1px solid var(--mob-line);
  }
  .mob-upgrade[data-tier="paid"] .mob-upgrade-icon {
    background: var(--mob-mint-soft);
    color: var(--mob-mint-ink);
  }
  .mob-upgrade[data-tier="paid"] .mob-upgrade-desc {
    color: var(--mob-ink3); opacity: 1;
  }

  /* ---------- Bottom tab bar ---------- */
  /* Edge-to-edge editorial bar. Sits flush against the bottom of the
     viewport with a hairline top rule — no floating-island shadow, no
     rounded corners, no margin from edges. The bar's own padding-
     bottom honors the home-indicator safe-area, so the previous 18px
     of dead space below the bar is recovered as content-space above. */
  #mobileTabBar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    background: rgba(250, 247, 242, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid rgba(56, 50, 40, 0.10);
    display: flex; align-items: center; justify-content: space-around;
    /* Bottom padding: just enough to clear the home-indicator gesture
       zone (~20px on notched iPhones) without the full ~34px Apple
       HIG inset, which read as dead space below the tab labels. We
       subtract 14px from the env() inset so notched devices end up
       with ~20px clearance instead of 34px; non-notched devices fall
       back to a flat 8px. The home indicator overlays the bar's
       bottom passively — no interactive elements live there. */
    padding: 8px 4px max(8px, calc(env(safe-area-inset-bottom, 0px) - 14px));
    z-index: 200;  /* above .appbar (z-index:100) */
    font-family: "Inter", system-ui, sans-serif;
  }
  #mobileTabBar.is-hidden { display: none; }

  .mob-tab {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 10px;
    background: none; border: 0;
    color: var(--mob-ink4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
  }
  .mob-tab svg { width: 18px; height: 18px; stroke-width: 1.6; }
  .mob-tab-label {
    font-size: 9px; font-weight: 600; letter-spacing: 0.02em;
  }
  .mob-tab.is-active {
    color: var(--mob-ink);
  }
  .mob-tab.is-active svg { stroke-width: 2; }

  /* Icon wrapper for tabs that may show a count bubble (Pranešimai).
     Position: relative anchor for the absolutely positioned badge. */
  .mob-tab-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  /* Count badge on the bottom Pranešimai tab. Same amber-on-ink style
     and centering rules as the home top-right .mob-bell-count, but
     scaled smaller (16px) since the tab icon is only 18px. The
     ring uses the live frosted bar background color so the badge
     reads cleanly even when the bar is glassy. */
  .mob-tab-badge {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f5b942;
    color: #1a1916;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--mob-paper, #faf7f2);
    pointer-events: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* Primary "+" tile — the only chrome moment in the bar. Lifts 6px
     above the bar's hairline plane so it reads as the focal action,
     with its own elevation shadow. The hairline runs continuously
     underneath; the lifted tile cleanly cuts through it. Editorial
     restraint everywhere else, weight here. */
  .mob-tab-primary {
    width: 48px; height: 48px; border-radius: 16px;
    background: var(--mob-ink); color: var(--mob-paper);
    display: grid; place-items: center;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(-6px);
    box-shadow: 0 6px 14px -4px rgba(26, 24, 20, 0.35);
    transition: transform 0.18s cubic-bezier(.2,.8,.2,1),
                box-shadow 0.18s cubic-bezier(.2,.8,.2,1);
  }
  .mob-tab-primary:active {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px -2px rgba(26, 24, 20, 0.35);
  }
  .mob-tab-primary svg { width: 20px; height: 20px; stroke-width: 2; }

  /* ============== Phase 2: listings screen ============== */

  /* Listings screen header: back arrow, eyebrow + serif title in the
     middle, edit pencil on the right. Padding-top uses the safe-area
     inset for parity with the home screen's mob-top row. Sticky for
     the same reason as .mob-top — iOS scroll restoration could push
     it above the viewport on cold start. */
  .mob-list-header {
    display: flex; align-items: center; gap: 10px;
    padding: max(14px, env(safe-area-inset-top, 14px)) 16px 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mob-paper);
  }
  .mob-list-title-block { flex: 1; min-width: 0; }
  .mob-list-eyebrow {
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mob-ink4); font-weight: 600;
  }
  .mob-list-title {
    font-family: "Fraunces", Georgia, serif;
    font-size: 17px; letter-spacing: -0.02em; font-weight: 500;
    color: var(--mob-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mob-icon-btn {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--mob-line);
    background: var(--mob-paper);
    color: var(--mob-ink2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    position: relative;
  }
  /* Absolute-center the SVG so whitespace text nodes inside template
     literals (which would otherwise act as anonymous grid items and
     shift the icon) cannot affect placement. Same fix the home bell
     uses for the same reason. */
  .mob-icon-btn svg {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
  }

  /* Filter chips row — horizontal scroll on overflow. */
  .mob-list-chips {
    display: flex; gap: 6px;
    padding: 0 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mob-list-chips::-webkit-scrollbar { display: none; }
  .mob-list-chip {
    flex-shrink: 0;
    padding: 6px 10px;
    background: var(--mob-paper2);
    border: 1px solid var(--mob-line-soft);
    border-radius: 999px;
    font-size: 11px; color: var(--mob-ink2); font-weight: 500;
    white-space: nowrap;
  }

  /* Sub-tab strip (Nauji / Kainos / Įsiminti). Mirrors the desktop
     .ads-tab-modern style: slate gray inactive, teal #0f766e active
     with a 3px teal underline that overlaps the 2px container border. */
  .mob-list-tabs {
    display: flex; gap: 0;
    padding: 0 16px;
    border-bottom: 2px solid #e8eef5;
  }
  .mob-list-tab {
    padding: 12px 18px;
    margin-bottom: -2px;
    font-size: 14px; font-weight: 600;
    color: #6B7A90;
    background: none; border: 0;
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-list-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    transition: background 0.2s ease;
  }
  .mob-list-tab:hover { color: #0f766e; }
  .mob-list-tab.is-active {
    color: #0f766e;
    font-weight: 700;
  }
  .mob-list-tab.is-active::after { background: #0f766e; }
  .mob-list-tab-count {
    background: #CBD5E1;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .mob-list-tab.is-active .mob-list-tab-count {
    background: #0f766e;
    color: #fff;
  }

  /* Card list container. */
  .mob-card-list {
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
  }

  /* The listing card. Border + soft radius; image is 16:11; body has
     price row + title + meta; footer has timestamp + "Kainos istorija ›". */
  .mob-card {
    background: var(--mob-paper);
    border: 1px solid var(--mob-line);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, box-shadow .12s;
  }
  .mob-card:active {
    transform: scale(0.995);
    box-shadow: 0 6px 14px -8px rgba(0,0,0,0.15);
  }
  /* "Naujas" amber border per the design's deeplink-open state. */
  .mob-card.is-new {
    border-color: var(--mob-amber, oklch(0.72 0.13 55));
  }

  .mob-card-img {
    aspect-ratio: 16 / 11;
    background: var(--mob-paper3);
    position: relative;
    overflow: hidden;
  }
  .mob-card-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  /* SVG fallback under the <img>; img above hides itself on error so
     the fallback shows through. .is-empty keeps the fallback after a
     load failure. */
  .mob-card-img-fallback {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--mob-ink4);
    pointer-events: none;
    z-index: 0;
  }
  .mob-card-img-fallback svg { width: 32px; height: 32px; opacity: 0.6; }
  .mob-card-img img { position: relative; z-index: 1; }
  .mob-card-img.is-empty img { display: none; }

  .mob-card-star {
    position: absolute; top: 10px; left: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(250, 247, 242, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 0;
    /* Override the global `button { padding: 12px 14px }` from app.css —
       it pushes the SVG off-center inside the 32x32 button. */
    padding: 0;
    box-sizing: border-box;
    display: grid; place-items: center;
    color: var(--mob-ink2);
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-card-star svg { width: 15px; height: 15px; }
  .mob-card-star.is-starred,
  .mob-card-star.starred {
    color: var(--mob-amber, oklch(0.72 0.13 55));
  }
  .mob-card-star.is-starred svg path,
  .mob-card-star.starred svg path {
    fill: currentColor;
  }

  /* NAUJAS pill — amber-on-ink, matches the desktop .results-item.is-new
     ::after pill exactly (var(--ed-amber) = oklch(0.72 0.13 55), same
     as our --mob-amber fallback). System monospace stack so the digits
     and letters render with the same characterful condensed feel as
     desktop without forcing a webfont download. */
  .mob-card-new {
    position: absolute; top: 10px; right: 10px;
    background: var(--mob-amber, oklch(0.72 0.13 55));
    color: var(--mob-ink);
    font-size: 10px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    letter-spacing: 0.06em; text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
    z-index: 2;
  }

  .mob-card-source {
    position: absolute; bottom: 10px; left: 10px;
    font-size: 10px; color: var(--mob-ink2);
    background: rgba(250, 247, 242, 0.94);
    padding: 3px 8px; border-radius: 999px;
    font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2;
  }

  .mob-card-body { padding: 14px 14px 12px; }
  .mob-card-price-row {
    display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
  }
  .mob-card-price {
    font-family: "Fraunces", Georgia, serif;
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--mob-ink);
  }
  .mob-card-m2 { font-size: 11px; color: var(--mob-ink3); }
  .mob-card-ppm {
    font-size: 11px; color: var(--mob-ink3);
    font-variant-numeric: tabular-nums;
  }

  /* Action button group below the meta row — desktop's
     .results-button-group equivalent. Holds the price-change pill, the
     map pin, and the AI-prediction button on a single horizontal line.
     Hidden when the card has no actions to show (handled in markup). */
  .mob-card-actions {
    margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
  }
  .mob-card-btn {
    /* width:auto + flex:0 0 auto override the legacy global
       `button { width:100% }` rule from app.css that otherwise stretches
       each action button across the whole card. */
    width: auto;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--mob-line);
    background: var(--mob-paper2);
    color: var(--mob-ink2);
    font-family: inherit;
    font-size: 12px; font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none; appearance: none;
    transition: background .15s, border-color .15s, transform .1s;
  }
  .mob-card-btn:active { transform: scale(0.97); }
  .mob-card-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Price-change pill — colored variants. Mint for ▼, rose for ▲, neutral
     for the locked padlock free-tier state. Inherits .mob-card-btn shape. */
  .mob-pc-chip { padding: 0 10px; }
  .mob-pc-chip svg { width: 12px; height: 12px; }
  .mob-pc-down {
    background: var(--mob-mint-soft);
    color: var(--mob-mint-ink);
    border-color: transparent;
  }
  .mob-pc-up {
    background: oklch(0.94 0.04 25);
    color: oklch(0.55 0.14 25);
    border-color: transparent;
  }
  .mob-pc-locked {
    background: var(--mob-paper2);
    color: var(--mob-ink3);
  }
  .mob-pc-locked svg { width: 13px; height: 13px; }

  /* Map button — single icon, neutral pill that becomes ink-on-paper on
     press. Visual parity with .btn-map on desktop. */
  .mob-card-btn-map {
    width: 32px; padding: 0;
    color: var(--mob-mint-ink);
  }
  .mob-card-btn-map svg { width: 14px; height: 14px; }

  /* AI prediction button — icon + numeric badge. Badge is hydrated
     post-render with remaining/limit. States mirror desktop:
       ok       — green
       low      — amber (pulses)
       zero     — red
       unlimited— violet "∞"
     Default ("·") is the dim placeholder shown before /remaining returns. */
  .mob-card-btn-predict {
    color: var(--mob-ink2);
    padding: 0 6px 0 8px;
  }
  .mob-card-btn-predict svg { width: 14px; height: 14px; }
  .mob-predict-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 16px;
    padding: 0 4px;
    margin-left: 2px;
    font-size: 10px; font-weight: 700;
    border-radius: 8px;
    background: var(--mob-paper3, #efe7d8);
    color: var(--mob-ink3);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .mob-predict-badge.badge-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
  }
  .mob-predict-badge.badge-low {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
    animation: mobPredictPulse 2s ease-in-out infinite;
  }
  .mob-predict-badge.badge-zero {
    background: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
  }
  .mob-predict-badge.badge-unlimited {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
    font-size: 12px;
  }
  @keyframes mobPredictPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
  }

  .mob-card-addr {
    font-family: "Fraunces", Georgia, serif;
    font-size: 15px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--mob-ink);
    margin: 8px 0 8px; line-height: 1.3;
  }

  /* Specs grid — primary structured details with icons. Mirrors desktop
     .specs-grid: a single horizontal row separated by 1px dividers, no
     pill background. Wraps onto a second line if the four items don't
     fit. The bottom border ties the row to the feature-tags below. */
  .mob-card-specs {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 0;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mob-line-soft);
  }
  .mob-spec {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 10px;
    border-right: 1px solid var(--mob-line-soft);
    color: var(--mob-ink3);
    font-size: 12px; font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .mob-spec:first-child { padding-left: 0; }
  .mob-spec:last-child  { border-right: 0; padding-right: 0; }
  .mob-spec svg.spec-icon {
    width: 13px; height: 13px; flex-shrink: 0;
    color: var(--mob-ink4);
  }

  /* Feature tags — secondary attributes (building type, equipment,
     heating, parking, balcony, energy rating, water distance). Same
     compact rectangle as desktop .feature-tag, soft border, .mob-tag-hi
     for highlighted attributes (parking / balcony / near-water). */
  .mob-card-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 8px;
  }
  .mob-tag {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--mob-line);
    background: var(--mob-paper2);
    color: var(--mob-ink3);
    font-size: 11px; font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }
  .mob-tag-hi {
    background: var(--mob-mint-soft);
    border-color: transparent;
    color: var(--mob-mint-ink);
    font-weight: 600;
  }

  /* Free-tier stripped-card CTA. Mirrors desktop .detail-cta-wrap so
     both views look the same: a blurred ghost of fake specs+tags with
     an upgrade button overlaid. Click → showAdListingLimitModal. */
  .mob-card-detail-cta-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .mob-card-detail-cta-fake {
    filter: blur(3px);
    user-select: none;
    pointer-events: none;
    padding: 4px 0 0;
  }
  .mob-card-detail-cta-fake .mob-card-specs,
  .mob-card-detail-cta-fake .mob-card-tags {
    margin-bottom: 6px;
  }
  .mob-card-detail-cta-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    border-radius: 10px;
    color: var(--mob-ink2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    padding: 0 12px;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-card-detail-cta-btn:active {
    background: rgba(243, 238, 229, 0.65);
  }
  .mob-card-detail-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--mob-paper2);
    color: var(--mob-ink3);
    flex-shrink: 0;
  }
  .mob-card-detail-cta-icon svg { width: 12px; height: 12px; }
  .mob-card-detail-cta-arrow {
    color: var(--mob-ink4);
    font-size: 14px;
  }

  .mob-card-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--mob-line-soft);
    background: var(--mob-paper2);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; color: var(--mob-ink3);
  }
  .mob-card-history {
    /* width:auto + flex:0 0 auto override the legacy global
       `button { width:100% }` from app.css that was stretching the
       Kainos istorija link to the full footer width. With width:auto
       the button shrinks to its label and lands flush right via the
       footer's justify-content: space-between. */
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--mob-mint-ink);
    font-weight: 600;
    background: none; border: 0;
    padding: 0;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-card-history svg { width: 12px; height: 12px; }
  .mob-card-history-locked {
    color: var(--mob-ink3);
  }
  .mob-card-history-locked::before {
    content: "🔒 ";
    font-size: 10px;
    margin-right: 2px;
    opacity: 0.7;
  }

  /* Load-more button at the bottom of the latest tab. */
  .mob-load-more {
    margin: 4px 16px 0;
    padding: 12px;
    background: var(--mob-paper2);
    border: 1px solid var(--mob-line);
    border-radius: 12px;
    font-size: 13px; font-weight: 500; color: var(--mob-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
  }
  .mob-load-more:active { background: var(--mob-paper3); }
  .mob-load-more[disabled] {
    opacity: 0.6; cursor: default;
  }

  /* Empty-state block (used by both the no-search-selected stub and
     the "no items in this tab" tail). */
  .mob-list-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--mob-ink3);
    font-size: 13px;
  }
  .mob-empty-cta {
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--mob-ink); color: var(--mob-paper);
    border: 0; border-radius: 10px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* ============== Phase 3: new-search wizard ============== */
  /*
     The desktop form `#cardCreate` already has 4 sections marked
     `[data-section="1..4"]` matching the wizard's 4 steps. Rather than
     rebuild every input on mobile, we wrap the existing form in fixed
     wizard chrome (header + footer) and use body classes to show only
     one section at a time. Every input reuses its desktop ID, so the
     existing save handler (#btnCreateSearch click), validation, and
     plan-gating all just work.
  */

  /* Hide the bottom tab bar during the wizard so the sticky footer's
     "Sukurti paiešką" button is the unambiguous primary action. */
  body.mob-wizard-active #mobileTabBar { display: none !important; }
  body.mob-wizard-active { padding-bottom: 0 !important; }

  /* On the wizard screen, unhide <main> so #cardCreate paints, and
     hide every other section inside it. Phase 1's CSS hides .main on
     mob-shell-active; we override here for mob-screen-new. */
  body.mob-shell-active.mob-screen-new #appView > .main { display: block !important; }
  body.mob-shell-active.mob-screen-new #appView > .main > section:not(#cardCreate) {
    display: none !important;
  }
  body.mob-shell-active.mob-screen-new #mobileHomeScreen { display: none !important; }

  /* Position #cardCreate as a full-screen column. The wizard chrome
     (#mobileWizardChrome) sits as fixed overlays above. Reserve space
     at top for the wizard header (~80px) and bottom for the wizard
     footer (~88px including safe-area). */
  body.mob-shell-active.mob-screen-new #cardCreate {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 84px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--mob-paper) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100vh !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hide the desktop-only chrome inside #cardCreate when the wizard
     is active: built-in stepper, section numbers + summaries, and the
     existing footer with #btnCreateSearch (we trigger that button
     programmatically from the wizard footer instead). */
  body.mob-wizard-active #cardCreate .sc-stepper,
  body.mob-wizard-active #cardCreate .sc-foot,
  body.mob-wizard-active #cardCreate .sec-num,
  body.mob-wizard-active #cardCreate .sec-summary,
  body.mob-wizard-active #cardCreate .sc-actions { display: none !important; }

  /* Show only the active section per body.mob-wiz-step-N. */
  body.mob-wizard-active #cardCreate .sc-section { display: none !important; }
  body.mob-wizard-active.mob-wiz-step-1 #cardCreate .sc-section[data-section="1"],
  body.mob-wizard-active.mob-wiz-step-2 #cardCreate .sc-section[data-section="2"],
  body.mob-wizard-active.mob-wiz-step-3 #cardCreate .sc-section[data-section="3"],
  body.mob-wizard-active.mob-wiz-step-4 #cardCreate .sc-section[data-section="4"] {
    display: block !important;
  }

  /* Section headings get a serif treatment that matches the design's
     hero typography. */
  body.mob-wizard-active #cardCreate .sec-head {
    margin-bottom: 4px;
    border: 0 !important;
    padding: 0 !important;
  }
  body.mob-wizard-active #cardCreate .sec-title {
    font-family: "Fraunces", Georgia, serif !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
    color: var(--mob-ink) !important;
    line-height: 1.15;
  }
  body.mob-wizard-active #cardCreate .sec-hint {
    font-size: 13px;
    color: var(--mob-ink3);
    line-height: 1.5;
    margin: 0 0 22px;
  }

  /* The wizard chrome — fixed header at top, fixed footer at bottom.
     Mounted by JS into #mobileShell on wizard open, removed on close. */
  #mobileWizardChrome {
    display: none;
    font-family: "Inter", system-ui, sans-serif;
  }
  body.mob-wizard-active #mobileWizardChrome { display: block; }

  .mob-wiz-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 210;  /* above tab bar */
    padding: max(12px, env(safe-area-inset-top, 12px)) 16px 12px;
    background: rgba(250, 247, 242, 0.94);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--mob-line-soft);
    display: flex; align-items: center; gap: 10px;
  }
  .mob-wiz-header .mob-icon-btn { flex-shrink: 0; }
  .mob-wiz-step-label {
    flex: 1; min-width: 0;
  }
  .mob-wiz-step-eyebrow {
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mob-ink4); font-weight: 600;
  }
  .mob-wiz-progress {
    height: 3px; border-radius: 999px;
    background: var(--mob-paper3);
    margin-top: 4px;
    overflow: hidden;
  }
  .mob-wiz-progress-bar {
    height: 100%;
    background: var(--mob-ink);
    transition: width 0.3s cubic-bezier(.2,.8,.2,1);
  }

  /* Stack container that pins both the optional delete row and the
     footer button row to the viewport bottom. The footer itself loses
     its position:fixed since it now flows inside the stack. */
  .mob-wiz-footer-stack {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 210;
    background: rgba(250, 247, 242, 0.94);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--mob-line-soft);
  }
  .mob-wiz-footer {
    padding: 14px 16px max(20px, env(safe-area-inset-bottom, 20px));
    display: flex; gap: 8px;
  }
  .mob-wiz-btn-back {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--mob-line);
    background: var(--mob-paper);
    color: var(--mob-ink2);
    font-weight: 500; font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-wiz-btn-next {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--mob-ink); color: var(--mob-paper);
    font-weight: 500; font-size: 14px;
    border: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-wiz-btn-next:disabled {
    opacity: 0.5; cursor: default;
  }
  .mob-wiz-btn-next svg { width: 14px; height: 14px; }

  /* Tertiary destructive action — soft-red text link stacked above
     the footer button row when editing at step 4. Mirrors the desktop
     btnDeleteSearch (bottom of form footer) without the filled-button
     noise; editorial aesthetic uses red as accent. */
  .mob-wiz-delete-row {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mob-line-soft);
    display: flex;
    justify-content: center;
  }
  .mob-wiz-delete {
    background: none;
    border: 0;
    padding: 6px 12px;
    color: #c0392b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
  }
  .mob-wiz-delete:active { opacity: 0.6; }
  .mob-wiz-delete:disabled { opacity: 0.4; cursor: default; }
  .mob-wiz-delete svg { width: 14px; height: 14px; }

  /* Style the existing .catgrid, .freq pills, .noti cards more
     phone-friendly when inside the wizard. The desktop styles work
     fine but the spacing is tight on a 390px viewport. */
  body.mob-wizard-active #cardCreate .catgrid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body.mob-wizard-active #cardCreate .cat {
    padding: 18px 14px;
    min-height: 110px;
  }
  body.mob-wizard-active #cardCreate .freq-row {
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.mob-wizard-active #cardCreate .freq-row::-webkit-scrollbar { display: none; }
  body.mob-wizard-active #cardCreate .freq {
    flex-shrink: 0;
    min-width: 80px;
  }
  body.mob-wizard-active #cardCreate .range-row {
    grid-template-columns: 1fr auto 1fr;
  }
  body.mob-wizard-active #cardCreate .input,
  body.mob-wizard-active #cardCreate .input-lg {
    font-size: 16px;  /* prevents iOS zoom on focus */
  }
}

/* ===========================================================================
   On viewport > 720 the desktop layout takes over. Hide the mobile shell
   entirely so it can never paint (the JS destroy() also strips the
   body class, but a CSS guard catches edge cases like SSR / late init).
   =========================================================================== */
@media (min-width: 721px) {
  body.mob-shell-active { padding-bottom: 0 !important; }
  #mobileShell, #mobileTabBar { display: none !important; }
}

/* ===========================================================================
   When the mobile shell shows the listings screen, we need the existing
   <main> hidden — the home/list screen is owning the viewport. The CSS in
   the @media block above only un-hides <main> for mob-screen-list (which
   was the Phase 1 stub strategy). Phase 2 paints listings into
   #mobileHomeScreen instead, so revert that exception.
   =========================================================================== */
@media (max-width: 720px) {
  body.mob-shell-active.mob-screen-list #appView > .main { display: none !important; }
  body.mob-shell-active.mob-screen-list #mobileHomeScreen { display: block !important; }
}

/* ===========================================================================
   Phase 4 — Notifications inbox (mob-screen-alerts)
   =========================================================================== */
@media (max-width: 720px) {
  /* ---- Screen layout ---- */
  .mob-alerts-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    background: var(--c-paper, #faf9f7);
  }

  /* ---- Header ---- */
  .mob-alerts-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Honor the iOS notch / status-bar inset so the back arrow and
       "Žymėti skaitytus" buttons aren't trapped under the OS chrome
       in the Capacitor WebView (Chrome mobile-view doesn't simulate
       env(safe-area-inset-top), so this bug only manifested on real
       device / simulator). Same pattern as the home / listings /
       wizard headers. */
    padding: max(14px, env(safe-area-inset-top, 14px)) 16px 12px;
    border-bottom: 1px solid var(--c-line-soft, #e8e4de);
    position: sticky;
    top: 0;
    background: var(--c-paper, #faf9f7);
    z-index: 10;
  }
  .mob-alerts-hd-text { flex: 1; min-width: 0; }
  .mob-alerts-eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink4, #aaa);
    font-weight: 600;
  }
  .mob-alerts-title {
    font-family: Fraunces, serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--c-ink, #1a1916);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-alerts-mark-read {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--c-mint-ink, #1a6b5a);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0 4px 8px;
    font-weight: 500;
  }

  /* ---- Row list ---- */
  .mob-alerts-list { flex: 1; }

  .mob-alert-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-line-soft, #e8e4de);
    background: var(--c-paper, #faf9f7);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
  }
  .mob-alert-row:active { background: var(--c-paper3, #f0ede8); }
  .mob-alert-row.is-locked { opacity: 0.65; }
  .mob-alert-row.is-locked .mob-alert-name { color: var(--c-ink3, #888); }
  .mob-alert-icon-slot.is-locked {
    font-size: 18px;
    line-height: 1;
  }

  /* ---- Icon area: 44x44 with rounded corners + badge overlay ---- */
  .mob-alert-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--c-paper3, #f0ede8);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    position: relative;
    color: var(--c-ink2, #555);
    overflow: visible;
  }
  .mob-alert-icon-wrap svg { width: 20px; height: 20px; }

  .mob-alert-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--c-paper, #faf9f7);
    display: grid;
    place-items: center;
    color: #fff;
  }
  .mob-alert-badge svg { width: 9px; height: 9px; stroke-width: 2.5; }
  .mob-alert-badge-new   { background: var(--c-ink, #1a1916); }
  .mob-alert-badge-price { background: var(--c-mint-ink, #1a6b5a); }

  /* ---- Text body ---- */
  .mob-alert-body {
    flex: 1;
    min-width: 0;
  }
  .mob-alert-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink, #1a1916);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-alert-meta {
    font-size: 12px;
    color: var(--c-ink3, #888);
    margin-top: 2px;
  }
  .mob-alert-meta.has-unread { color: var(--c-mint-ink, #1a6b5a); font-weight: 500; }

  /* ---- Unread dot (right side) ---- */
  .mob-alert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-mint, #4ecba0);
    flex-shrink: 0;
  }

  /* ---- Empty state ---- */
  .mob-alerts-empty {
    padding: 48px 24px;
    text-align: center;
    font-size: 14px;
    color: var(--c-ink3, #888);
  }
}

/* ===========================================================================
   Phase 5 — Account + plan selection screen (mob-screen-account)
   =========================================================================== */
@media (max-width: 720px) {
  .mob-acct-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    background: var(--c-paper, #faf9f7);
  }

  /* ---- Header ---- */
  .mob-acct-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Same notch-inset fix as .mob-alerts-hd — without this the back
       arrow on the account screen is unreachable on a real iPhone
       with the status bar overlaying the WebView's top edge. */
    padding: max(14px, env(safe-area-inset-top, 14px)) 16px 12px;
    border-bottom: 1px solid var(--c-line-soft, #e8e4de);
    position: sticky;
    top: 0;
    background: var(--c-paper, #faf9f7);
    z-index: 10;
  }
  .mob-acct-hd-text { flex: 1; min-width: 0; }
  .mob-acct-eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink4, #aaa);
    font-weight: 600;
  }
  .mob-acct-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink, #1a1916);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-acct-plan-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--c-ink, #1a1916);
    color: var(--c-paper, #faf9f7);
    border-radius: 999px;
  }

  /* ---- Plan tab strip ---- */
  /* Tabs match the desktop "ads-tab-modern" style: slate gray inactive,
     teal active with a 3px teal underline. */
  .mob-acct-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 2px solid #e8eef5;
    background: var(--c-paper, #faf9f7);
    position: sticky;
    /* Tabs stick directly below the header. The header itself now
       includes env(safe-area-inset-top) so on notched iPhones the
       tabs need to slide down by the same amount; otherwise they
       overlap the header bottom. 41px = the header's content+bottom
       portion (14 top + ~28 content - 14 absorbed by max() + 12
       bottom + 1 border ≈ 41). */
    top: calc(max(14px, env(safe-area-inset-top, 14px)) + 41px);
    z-index: 9;
  }
  .mob-acct-tab {
    padding: 12px 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }
  .mob-acct-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    transition: background 0.2s ease;
  }
  .mob-acct-tab.active::after { background: #0f766e; }
  .mob-acct-tab-name {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #6B7A90;
    transition: color 0.2s ease;
  }
  .mob-acct-tab.active .mob-acct-tab-name {
    color: #0f766e;
    font-weight: 700;
  }
  .mob-acct-tab-price {
    font-size: 10.5px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
  }
  .mob-acct-tab.active .mob-acct-tab-price { color: #0f766e; }

  /* ---- Plan card ---- */
  .mob-acct-plan-panel { padding: 20px 16px 0; }
  .mob-plan-card {
    position: relative;
    border: 2px solid var(--c-line, #e0d8cc);
    border-radius: 18px;
    overflow: visible;
    animation: mobPlanIn .2s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes mobPlanIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .mob-plan-card.is-current { border-color: var(--c-ink, #1a1916); }
  .mob-plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-mint, #4ecba0);
    color: var(--c-ink, #1a1916);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 10px -3px rgba(26,24,20,0.2);
  }
  .mob-plan-card-inner { padding: 20px 18px 18px; }
  .mob-plan-current-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-paper, #faf9f7);
    background: var(--c-ink, #1a1916);
    padding: 3px 8px;
    border-radius: 999px;
    margin-bottom: 10px;
  }
  .mob-plan-current-tag svg { width: 9px; height: 9px; }
  .mob-plan-name {
    font-family: Fraunces, serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line-soft, #e8e4de);
    color: var(--c-ink, #1a1916);
  }
  .mob-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
  }
  .mob-plan-price-amt {
    font-family: Fraunces, serif;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--c-ink, #1a1916);
  }
  .mob-plan-price-unit { font-size: 12px; color: var(--c-ink3, #888); }
  .mob-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mob-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-ink2, #444);
  }
  .mob-plan-feature.off { color: var(--c-ink4, #aaa); opacity: 0.65; }
  .mob-plan-feature-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--c-paper3, #ece6da);
    color: var(--c-ink4, #aaa);
    display: grid;
    place-items: center;
    margin-top: 1px;
  }
  .mob-plan-feature-icon.on {
    background: var(--c-mint-soft, #d6f5ec);
    color: var(--c-mint-ink, #1a6b5a);
  }
  .mob-plan-feature-icon svg { width: 11px; height: 11px; }
  .mob-plan-cta {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-plan-cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .mob-plan-cta.current {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: #fff;
    cursor: default;
    box-shadow: 0 2px 8px -2px rgba(15, 118, 110, 0.4);
  }
  .mob-plan-cta.current svg { stroke-width: 3; }
  .mob-plan-cta.upgrade {
    background: var(--c-ink, #1a1916);
    color: var(--c-paper, #faf9f7);
  }
  .mob-plan-cta.upgrade:active { opacity: 0.85; }

  /* ---- Trust strip ---- */
  .mob-acct-trust {
    margin: 16px 16px 0;
    padding: 14px 16px;
    background: var(--c-paper3, #ece6da);
    border-radius: 14px;
    border: 1px solid var(--c-line-soft, #e8e4de);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mob-acct-trust-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .mob-acct-trust-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--c-paper, #faf9f7);
    border: 1px solid var(--c-line, #e0d8cc);
    display: grid;
    place-items: center;
    color: var(--c-ink2, #444);
    flex-shrink: 0;
  }
  .mob-acct-trust-icon svg { width: 12px; height: 12px; }
  .mob-acct-trust-t { font-size: 11.5px; font-weight: 600; color: var(--c-ink, #1a1916); }
  .mob-acct-trust-s { font-size: 10.5px; color: var(--c-ink3, #888); }

  /* ---- Account actions ---- */
  .mob-acct-actions {
    margin: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mob-acct-action-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    background: var(--c-paper3, #ece6da);
    color: var(--c-ink, #1a1916);
    border: none;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-acct-action-btn.signout,
  .mob-acct-action-btn.danger { color: var(--c-error, #c0392b); }
  .mob-acct-action-btn:active { opacity: 0.75; }

  /* ---- Subscription management block on Paskyra ---- */
  .mob-acct-manage {
    margin: 18px 16px 0;
  }
  .mob-acct-manage-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
  }
  .mob-acct-payments {
    margin-top: 18px;
  }
  .mob-acct-payments-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mob-ink4, #9A9282);
    margin-bottom: 8px;
  }
  .mob-acct-payments-table {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
    border: 1px solid var(--mob-line, #E3DBCB);
    background: var(--mob-paper, #FAF7F2);
  }
  .mob-acct-payments-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: transparent !important;
  }
  .mob-acct-payments-table thead tr {
    border-bottom: 1px solid var(--mob-line, #E3DBCB) !important;
    background: var(--mob-paper2, #F3EEE5) !important;
  }
  .mob-acct-payments-table thead th {
    color: var(--mob-ink3, #6B6557);
    font-weight: 600;
    padding: 7px 6px !important;
    text-align: left;
  }
  .mob-acct-payments-table tbody tr {
    border-bottom: 1px solid var(--mob-line-soft, #EEE8DC) !important;
    background: transparent !important;
  }
  .mob-acct-payments-table tbody tr:last-child { border-bottom: 0 !important; }
  .mob-acct-payments-table tbody td {
    padding: 7px 6px !important;
    color: var(--mob-ink2, #3A362E);
  }
  /* Drop the Laikotarpis (period) column on the narrow Paskyra view. */
  .mob-acct-payments-table th:nth-child(3),
  .mob-acct-payments-table td:nth-child(3) { display: none !important; }
}