/* Mobile-only app presentation. Desktop keeps the original theme unchanged. */
@media (max-width: 860px) {
  :root {
    --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --app-top: calc(64px + env(safe-area-inset-top, 0px));
    --app-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    --app-tint: #edcf79;
    color-scheme: dark;
    scroll-padding-top: calc(var(--app-top) + 16px);
  }
  html body {
    padding-top: var(--app-top) !important;
    padding-bottom: calc(var(--app-bottom) + 16px) !important;
    font-family: var(--app-font);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-x: none;
  }
  html header { display: none !important; }
  html .container {
    width: auto;
    max-width: 100%;
    margin-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px));
  }
  html .pwa-topbar {
    display: flex !important;
    inset: 0 0 auto !important;
    box-sizing: border-box;
    height: var(--app-top) !important;
    padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)) !important;
    gap: 8px !important;
    border: 0 !important;
    border-bottom: .5px solid rgba(255,255,255,.13) !important;
    border-radius: 0 !important;
    background: rgba(17,17,19,.84) !important;
    -webkit-backdrop-filter: saturate(170%) blur(28px);
    backdrop-filter: saturate(170%) blur(28px);
    box-shadow: none !important;
    z-index: 12000;
  }
  html .pwa-brand { gap: 9px !important; flex: 1 1 auto; }
  html .pwa-brand img[src*="logo.png"] {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; max-width: 36px !important;
    min-height: 36px !important; max-height: 36px !important;
    flex: 0 0 36px !important;
    padding: 1px !important;
  }
  html .pwa-brand strong { font: 700 14px/1.2 var(--app-font) !important; letter-spacing: 0 !important; text-transform: none; }
  html .pwa-brand span { font: 500 10px/1.3 var(--app-font) !important; letter-spacing: 0 !important; color: #b4b4b9 !important; text-transform: none; margin-top: 2px; }
  html .pwa-top-actions { gap: 2px !important; flex-shrink: 0; }
  html .pwa-top-actions .whats,
  html .pwa-top-actions .pwa-menu-btn,
  html .pwa-lang,
  html .pwa-lang .ff-lang-current {
    width: 42px !important; height: 44px !important;
    min-width: 42px !important; min-height: 44px !important;
    border: 0 !important; border-radius: 12px !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--app-tint) !important;
    font-size: 21px !important;
  }
  html .pwa-top-actions .whats { color: #63da88 !important; }
  html .pwa-lang .ff-lang-current img { width: 26px !important; height: 26px !important; border-radius: 50%; }
  html .pwa-lang .ff-lang-current > i { display: none !important; }
  html .pwa-lang .ff-lang-current::after { display: none !important; }
  html .ff-lang-options {
    top: calc(100% + 8px) !important; right: 0 !important;
    width: 190px !important; padding: 6px !important;
    background: rgba(34,34,37,.97) !important;
    border: .5px solid rgba(255,255,255,.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.45) !important;
  }
  html .ff-lang-options button { min-height: 46px !important; height: 46px !important; border-radius: 9px !important; }
  html .ff-lang-options button span { font: 500 16px/1.2 var(--app-font) !important; }
  html .ff-lang-options button span::after { content: none !important; }
  html .ff-lang-options button[aria-selected="true"] { background: rgba(255,255,255,.08) !important; }
  html .pwa-bottom-nav {
    position: fixed !important; inset: auto 0 0 !important;
    display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    box-sizing: border-box; width: 100% !important;
    height: var(--app-bottom) !important;
    padding: 5px max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px)) !important;
    gap: 0 !important; border-radius: 0 !important;
    border: 0 !important; border-top: .5px solid rgba(255,255,255,.16) !important;
    background: rgba(23,23,25,.88) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    box-shadow: 0 -4px 24px rgba(0,0,0,.08) !important;
    z-index: 12000;
  }
  html .pwa-bottom-nav a {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    min-width: 0; min-height: 56px; gap: 5px !important;
    margin: 0 !important; padding: 3px 0 !important;
    border: 0 !important; background: transparent !important;
    color: #9b9ba2 !important; text-shadow: none !important;
    text-transform: none !important; transform: none !important;
  }
  html .pwa-bottom-nav a[data-nav-key] i { color: inherit !important; font-size: 21px !important; }
  html .pwa-bottom-nav a span { font: 500 11px/1 var(--app-font) !important; letter-spacing: 0 !important; }
  html .pwa-bottom-nav a[aria-current="page"] { color: var(--app-tint) !important; }
  html .pwa-bottom-nav a:active { opacity: .65; }
  html .pwa-bottom-nav .pwa-play-trigger { transform: none !important; }
  html .pwa-bottom-nav .pwa-play-trigger .play-circle {
    width: 44px !important; height: 44px !important;
    background: var(--app-tint) !important; border: 0;
    box-shadow: none !important;
  }
  html .pwa-bottom-nav .pwa-play-trigger i { color: #15120a !important; font-size: 17px !important; }
  html .pwa-bottom-nav .pwa-play-trigger span { display: none !important; }
  html .hero, html .artist-page-hero, html .portfolio-page-hero { padding: 26px 0 30px !important; min-height: 0 !important; }
  html body main h1[class], html body main .hero h1, html main h1 { font: 750 32px/1.1 var(--app-font) !important; letter-spacing: 0 !important; text-shadow: none !important; overflow-wrap: anywhere; }
  html main .section-title:not(h1) { font: 700 27px/1.14 var(--app-font) !important; letter-spacing: 0 !important; }
  html main .drip-title::before, html main .drip-title::after { display: none !important; }
  html main .section-text { font: 400 16px/1.55 var(--app-font) !important; color: #c2c2c7; }
  html .artist-page-gallery { padding-top: 8px !important; }
  html .ff-filterbar {
    display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr));
    position: sticky; top: calc(var(--app-top) + 10px) !important;
    gap: 3px !important; padding: 4px !important; margin-bottom: 18px !important;
    border: .5px solid rgba(255,255,255,.12) !important; border-radius: 12px !important;
    background: rgba(38,38,41,.94) !important; z-index: 40;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
  html .ff-filterbar button {
    min-width: 0; min-height: 40px !important; padding: 8px 3px !important;
    border: 0 !important; border-radius: 8px !important;
    background: transparent !important; color: #c8c8ce !important;
    font: 600 14px/1 var(--app-font) !important; transform: none !important;
  }
  html .ff-filterbar button.active { background: #626267 !important; color: #fff !important; box-shadow: 0 1px 5px rgba(0,0,0,.2); }
  html .ff-gallery-grid { columns: 2 !important; column-gap: 10px !important; }
  html .ff-gallery-item { border-radius: 14px !important; margin-bottom: 10px !important; border-color: rgba(255,255,255,.1) !important; box-shadow: none !important; }
  html .ff-gallery-caption {
    display: block !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    padding: 22px 10px 10px !important; border: 0 !important; border-radius: 0 !important;
    background: linear-gradient(transparent,rgba(0,0,0,.86)) !important;
    backdrop-filter: none !important; text-transform: none !important;
    font: 600 12px/1.22 var(--app-font) !important;
  }
  html .ff-gallery-caption span { display: block; overflow-wrap: anywhere; }
  html .ff-gallery-caption small { display: block; margin-top: 4px; font: 500 11px/1.2 var(--app-font) !important; color: #edcf79; }
  html .ff-player {
    inset: auto 0 0 !important; width: auto !important; max-width: 100% !important;
    padding: 34px 22px calc(24px + env(safe-area-inset-bottom,0px)) !important;
    gap: 24px !important; border-radius: 28px 28px 0 0 !important;
    border: .5px solid rgba(255,255,255,.16) !important; border-bottom: 0 !important;
    background: rgba(30,30,33,.97) !important;
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    z-index: 13020 !important;
    transform: translateY(0); transition: transform .3s ease,opacity .3s ease,visibility .3s;
  }
  html .ff-player::before, html .pwa-mobile-menu::before { content: ""; position: absolute; top: 10px; left: calc(50% - 18px); width: 36px; height: 5px; border-radius: 3px; background: #656568; }
  html .ff-player[aria-hidden="true"] { visibility: hidden; opacity: 0; transform: translateY(100%) !important; pointer-events: none; }
  html .ff-player-backdrop { z-index: 13010; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  html .ff-cover { width: 58px; height: 58px; border-radius: 13px; background: var(--app-tint); }
  html .ff-meta { min-width: 0; }
  html .ff-meta small { font: 500 10px/1.3 var(--app-font); letter-spacing: 0; color: #b3b3ba; }
  html .ff-title { font: 650 17px/1.3 var(--app-font); white-space: normal; overflow-wrap: anywhere; }
  html .ff-subtitle { font: 400 13px/1.3 var(--app-font); }
  html .ff-hide { min-width: 44px; min-height: 44px; padding: 8px; flex-shrink: 0; color: var(--app-tint); background: transparent; border: 0; font: 500 14px/1 var(--app-font); }
  html .ff-controls { gap: 30px; }
  html .ff-controls button { width: 52px; height: 52px; border: 0; background: transparent; font-size: 23px; }
  html .ff-controls .ff-play { width: 64px; height: 64px; background: #f0f0f3; color: #171719; }
  html .ff-progress input, html .ff-volume input { min-height: 28px; accent-color: #e1e1e7; }
  html .pwa-mobile-menu {
    position: fixed !important; inset: auto 10px calc(var(--app-bottom) + 10px) !important;
    z-index: 12500 !important; grid-template-columns: 1fr !important;
    gap: 0 !important; padding: 24px 14px 10px !important;
    border: .5px solid rgba(255,255,255,.17) !important; border-radius: 22px !important;
    background: rgba(32,32,35,.98) !important;
    max-height: calc(100dvh - var(--app-top) - var(--app-bottom) - 30px); overflow-y: auto;
    box-shadow: 0 0 0 200vmax rgba(0,0,0,.45),0 16px 50px rgba(0,0,0,.45) !important;
  }
  html .pwa-mobile-menu a {
    min-height: 47px !important; padding: 10px 8px !important; gap: 14px !important;
    background: transparent !important; box-shadow: none !important;
    border: 0 !important; border-bottom: .5px solid rgba(255,255,255,.1) !important; border-radius: 0 !important;
    font: 500 16px/1.2 var(--app-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: none !important;
  }
  html .pwa-mobile-menu a:last-child { border-bottom: 0 !important; }
  html .pwa-mobile-menu a i { width: 24px !important; height: 24px !important; flex: 0 0 24px; background: transparent !important; box-shadow: none !important; color: var(--app-tint) !important; font-size: 19px !important; }
  html .pwa-mobile-menu a::after { content: "\203a"; margin-left: auto; color: #82828b; font: 400 25px/1 var(--app-font); }
  html.ff-mobile-menu-open body { overflow: hidden !important; }
  html .ff-lightbox { padding: max(16px,env(safe-area-inset-top,0px)) 8px max(20px,env(safe-area-inset-bottom,0px)); background: rgba(0,0,0,.97); }
  html .ff-lightbox-close { top: max(16px,env(safe-area-inset-top,0px)); }
  html .ff-lightbox-meta { bottom: max(20px,env(safe-area-inset-bottom,0px)); border: 0; border-radius: 0; background: transparent; font: 600 14px/1.4 var(--app-font); }
  html main input:not([type="range"]), html main select, html main textarea { font-family: var(--app-font) !important; font-size: 16px !important; min-height: 44px; }
  html main button, html main .btn { touch-action: manipulation; }
  html a:focus-visible, html button:focus-visible { outline: 2px solid var(--app-tint); outline-offset: 3px; }
  html .ff-footer-music { display: none; }
  @media (prefers-reduced-motion: reduce) {
    html .ff-player, html .ff-gallery-item, html .pwa-mobile-menu { transition: none !important; animation: none !important; }
  }
}