/**
 * MOBILE APP SHELL — shared design system for every purpose-built
 * mobile screen (dashboard home, browse, QR, and beyond). Deliberately
 * its own dark palette (premium near-black + brand yellow) rather than
 * the site's light --color-* tokens — the "native app" register,
 * distinct from the cinematic desktop site. Only active below 768px;
 * each page hides its own desktop content at this width instead.
 *
 * Page-specific pieces (browse's search bar and listing cards, the
 * dashboard's quick-action grid, etc.) stay in each page's own
 * <style> block — this file is only the shell pieces genuinely shared
 * across all of them.
 */
:root {
    --msh-bg: #FFF9E8;
    --msh-card: #FFFFFF;
    --msh-card-2: #FFF3D6;
    --msh-border: rgba(13,13,13,0.85);
    --msh-yellow: #FFD400;
    --msh-text: #0D0D0D;
    --msh-muted: rgba(13,13,13,0.58);
    --msh-hairline: rgba(13,13,13,0.12);
    --msh-card-shadow: 3px 3px 0 rgba(13,13,13,0.1);
    --msh-card-shadow-hover: 4px 4px 0 rgba(13,13,13,0.14);
    --msh-tone-red: #C0293A;
    --msh-tone-purple: #7C3AED;
    --msh-tone-green: #15803D;
    --msh-tone-gold: #B8860B;
    --msh-radius: 20px;
    --msh-radius-sm: 14px;
}
/* The mobile home screen previously defaulted to a permanently-dark
   look regardless of the site's light/dark toggle - the desktop
   dashboard would follow the toggle while mobile stayed stuck dark,
   which is exactly the inconsistency this section fixes. Dark mode
   here now restores the original values as an explicit override -
   its own softer, shadow-free look is intentional (a bold sticker
   shadow reads as "marketing page," not "premium dark app"), so only
   light mode gets the more tactile, branded shadow treatment below. */
[data-theme="dark"] {
    --msh-bg: #0A0A0C;
    --msh-card: #17171C;
    --msh-card-2: #1E1E24;
    --msh-border: rgba(255,255,255,0.08);
    --msh-text: #FFFFFF;
    --msh-muted: #8B8B93;
    --msh-hairline: rgba(255,255,255,0.08);
    --msh-card-shadow: none;
    --msh-card-shadow-hover: none;
    --msh-tone-red: #FF6B7A;
    --msh-tone-purple: #C084FC;
    --msh-tone-green: #4ADE80;
    --msh-tone-gold: #FFD400;
}
.mshell { display: none; }

@media (max-width: 767px) {
    body { background: var(--msh-bg); }
    .sh-header { display: none !important; }
    .mshell { display: block; background: var(--msh-bg); min-height: 100vh; padding: 0 0 96px; }

    .mshell-header {
        position: sticky; top: 0; z-index: 40; background: var(--msh-bg);
        display: flex; justify-content: space-between; align-items: flex-start;
        padding: 18px 20px 14px; border-bottom: 1px solid var(--msh-hairline);
    }
    .mshell-header.mshell-header-simple { align-items: center; }
    .mshell-back-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--msh-card); border: 1px solid var(--msh-hairline); display: flex; align-items: center; justify-content: center; }
    .mshell-back-btn svg { width: 18px; height: 18px; color: var(--msh-text); }
    .mshell-header-title { font-size: 1.05rem; font-weight: 800; color: var(--msh-text); }

    .mshell-greeting { font-size: 1.3rem; font-weight: 800; color: var(--msh-text); display: flex; align-items: center; gap: 6px; }
    .mshell-subgreeting { font-size: 0.82rem; color: var(--msh-muted); margin-top: 2px; }
    .mshell-bell { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--msh-card); border: 1px solid var(--msh-hairline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--msh-card-shadow); }
    .mshell-bell svg { width: 19px; height: 19px; color: var(--msh-text); }
    .mshell-bell .mshell-bell-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--msh-yellow); border: 1.5px solid var(--msh-bg); }
    .mshell-icon-sun, .mshell-icon-moon { width: 19px; height: 19px; color: var(--msh-text); }
    .mshell-icon-moon { display: none; }
    [data-theme="dark"] .mshell-icon-sun { display: none; }
    [data-theme="dark"] .mshell-icon-moon { display: block; }

    .mshell-section { padding: 20px 20px 4px; }
    .mshell-section-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--msh-muted); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
    .mshell-section-title .mshell-count { background: var(--msh-yellow); color: #0A0A0C; font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }

    .mshell-attn-list { display: flex; flex-direction: column; gap: 12px; }
    .mshell-attn-card {
        display: flex; align-items: center; gap: 12px; background: var(--msh-card);
        border: 1px solid var(--msh-hairline); border-radius: var(--msh-radius-sm);
        padding: 14px; cursor: pointer; text-decoration: none;
        box-shadow: var(--msh-card-shadow); transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    .mshell-attn-card:active { background: var(--msh-card-2); transform: translate(1px, 1px); box-shadow: none; }
    .mshell-attn-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mshell-attn-icon svg { width: 20px; height: 20px; }
    .mshell-attn-icon.tone-red { background: rgba(225,29,46,0.14); color: var(--msh-tone-red); }
    .mshell-attn-icon.tone-purple { background: rgba(168,85,247,0.14); color: var(--msh-tone-purple); }
    .mshell-attn-icon.tone-green { background: rgba(22,163,74,0.14); color: var(--msh-tone-green); }
    .mshell-attn-icon.tone-gold { background: rgba(255,212,0,0.16); color: var(--msh-tone-gold); }
    .mshell-attn-body { flex: 1; min-width: 0; }
    .mshell-attn-title { font-size: 0.86rem; font-weight: 700; color: var(--msh-text); line-height: 1.3; }
    .mshell-attn-time { font-size: 0.72rem; color: var(--msh-muted); margin-top: 3px; }
    .mshell-attn-empty { text-align: center; padding: 36px 20px; color: var(--msh-muted); font-size: 0.86rem; }
    .mshell-attn-empty .emoji { font-size: 1.8rem; display: block; margin-bottom: 8px; }

    .mshell-stats-row { display: flex; background: var(--msh-card); border: 1px solid var(--msh-hairline); border-radius: var(--msh-radius-sm); overflow: hidden; box-shadow: var(--msh-card-shadow); }
    .mshell-stat { flex: 1; text-align: center; padding: 16px 8px; border-right: 1px solid var(--msh-hairline); }
    .mshell-stat:last-child { border-right: none; }
    .mshell-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--msh-text); }
    .mshell-stat-label { font-size: 0.68rem; color: var(--msh-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; }

    .mshell-bottomnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--msh-card); border-top: 1px solid var(--msh-hairline);
        display: flex; align-items: center; justify-content: space-around;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .mshell-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--msh-muted); text-decoration: none; font-size: 0.62rem; font-weight: 700; flex: 1; padding: 4px 0; background: none; border: none; }
    .mshell-nav-badge {
        position: absolute; top: -4px; right: -8px; min-width: 15px; height: 15px; border-radius: 999px;
        background: var(--color-danger, #E11D2E); color: #fff; font-size: 0.6rem; font-weight: 800;
        display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1;
    }
    .mshell-nav-item svg { width: 21px; height: 21px; }
    .mshell-nav-item.active { color: var(--msh-yellow); }

    /* Replaces the bottom nav for guests — same position/footprint,
       but a conversion prompt instead of app tabs that assume an
       account (Sell/Messages/Account all require one). */
    .mshell-guest-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--msh-card); border-top: 1px solid var(--msh-hairline);
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .mshell-guest-bar-text { color: var(--msh-text); font-size: 0.8rem; font-weight: 600; }
    .mshell-nav-fab {
        width: 46px; height: 46px; border-radius: 50%; background: var(--msh-yellow); color: #0A0A0C;
        display: flex; align-items: center; justify-content: center; margin-top: -26px;
        border: 4px solid var(--msh-bg); box-shadow: 0 4px 14px rgba(255,212,0,0.35);
    }
    .mshell-nav-fab svg { width: 22px; height: 22px; }

    .mshell-skel { background: linear-gradient(90deg, var(--msh-card) 0%, var(--msh-card-2) 50%, var(--msh-card) 100%); background-size: 200% 100%; animation: mshell-shimmer 1.4s ease-in-out infinite; border-radius: var(--msh-radius-sm); }
    @keyframes mshell-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    .mshell-btn-primary {
        display: block; width: 100%; text-align: center; background: var(--msh-yellow); color: #0A0A0C;
        font-weight: 800; font-size: 0.92rem; padding: 15px; border-radius: 999px; border: none;
        text-decoration: none; box-shadow: 0 3px 0 rgba(13,13,13,0.18); transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    .mshell-btn-primary:active { transform: translateY(3px); box-shadow: none; }
    .mshell-btn-outline {
        display: block; width: 100%; text-align: center; background: transparent; color: var(--msh-text);
        font-weight: 700; font-size: 0.9rem; padding: 14px; border-radius: 999px; border: 1.5px solid var(--msh-hairline);
        text-decoration: none;
    }

    /* Listing card grid — shared by browse, saved listings, and any
       future screen that shows a grid of listings, so this doesn't
       get redefined slightly differently each time. */
    .mshell-listings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px; }
    .mshell-listing-card { background: var(--msh-card); border: 1px solid var(--msh-hairline); border-radius: var(--msh-radius-sm); overflow: hidden; text-decoration: none; display: block; position: relative; box-shadow: var(--msh-card-shadow); transition: transform 0.12s ease; }
    .mshell-listing-card:active { background: var(--msh-card-2); transform: translate(1px, 1px); }
    .mshell-listing-img-wrap { position: relative; aspect-ratio: 4/3; background: var(--msh-card-2); }
    .mshell-listing-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mshell-listing-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--msh-muted); }
    .mshell-listing-placeholder svg { width: 30%; height: 30%; }
    .mshell-listing-live-badge { position: absolute; top: 8px; left: 8px; background: rgba(22,163,74,0.9); color: #fff; font-size: 0.62rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
    .mshell-listing-save { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(10,10,12,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border: none; }
    .mshell-listing-save svg { width: 14px; height: 14px; color: #fff; transition: transform 0.15s ease; }
    .mshell-listing-save.saved svg { color: var(--msh-yellow); }
    .mshell-listing-save.just-saved svg { animation: save-pop 0.4s cubic-bezier(.17,.89,.32,1.49); }
    .mshell-listing-body { padding: 10px 12px 12px; }
    .mshell-listing-price { font-size: 0.98rem; font-weight: 800; color: var(--msh-text); }
    .mshell-listing-title { font-size: 0.76rem; color: var(--msh-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mshell-listing-loc { font-size: 0.7rem; color: var(--msh-muted); margin-top: 4px; display: flex; align-items: center; gap: 3px; }
    .mshell-listing-loc svg { width: 11px; height: 11px; flex-shrink: 0; }

    /* Small unread indicator dot, shared by Messages and Notifications */
    .msg-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--msh-yellow); flex-shrink: 0; }
    .mshell-attn-card.unread { border-color: rgba(255,212,0,0.3); }
}