/* LOV-ING — Desktop / PC presentation layer
   Mobile styles remain untouched. Everything here activates only from 901px. */
@media (min-width:901px){
  :root{--pc-max:1480px;--pc-side:230px;--pc-gap:24px}
  html,body{width:100%;min-height:100%;height:auto;overflow:auto}
  body{background:#080811}

  /* Mobile phone shells become true desktop canvases */
  #app{width:100%!important;max-width:none!important;min-height:100vh;height:auto!important;margin:0!important;border-radius:0!important}

  /* Common centered desktop content */
  .page,.content,.main,.main-content,.container,.wrap,.shell,.dashboard-content,.content-wrap,.page-content{
    width:min(calc(100% - 48px),var(--pc-max));
    max-width:var(--pc-max);
    margin-left:auto;margin-right:auto;
  }

  /* Headers */
  .tb,.topbar,.header,.site-header,.navbar{
    width:100%!important;
  }

  /* The existing mobile bottom navigation becomes a proper desktop rail */
  #bnav{
    position:fixed!important;left:0!important;right:auto!important;top:76px!important;bottom:0!important;
    width:var(--pc-side)!important;max-width:none!important;height:calc(100vh - 76px)!important;
    margin:0!important;padding:24px 14px!important;border-top:0!important;border-right:1px solid rgba(255,255,255,.08);
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:8px;background:rgba(13,13,27,.98)!important;backdrop-filter:blur(18px);z-index:1000;
  }
  #bnav .nb{flex:none!important;width:100%!important;min-height:50px!important;flex-direction:row!important;justify-content:flex-start!important;gap:13px!important;padding:10px 14px!important;border-radius:13px!important;text-align:left!important}
  #bnav .nb:hover{background:rgba(255,255,255,.06)}
  #bnav .nb-i{font-size:20px!important;width:28px;text-align:center}
  #bnav .nb-l{font-size:14px!important;color:rgba(255,255,255,.78)!important}
  #bnav .nb.on,.nb.on{background:rgba(255,46,99,.10)}
  #bnav .nb.on .nb-l{color:#ff2e63!important}
  #bnav .nb-plus{margin:8px 0!important;justify-content:flex-start!important}
  #bnav .nb-plus-circle{width:34px!important;height:34px!important;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ff2e63;color:#fff;font-size:24px}

  /* Desktop content leaves room for the navigation rail */
  body:has(#bnav) .page,
  body:has(#bnav) .content,
  body:has(#bnav) .main,
  body:has(#bnav) .main-content,
  body:has(#bnav) .dashboard-content,
  body:has(#bnav) .content-wrap{
    width:calc(100% - var(--pc-side) - 48px)!important;
    max-width:var(--pc-max)!important;
    margin-left:calc(var(--pc-side) + 24px)!important;
    margin-right:24px!important;
  }

  /* Grids: turn phone cards into spacious desktop cards */
  .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:18px!important;padding:20px!important}
  .profiles-grid,.profile-grid,.cards,.card-grid,.products-grid,.shop-grid,.games-grid,.events-grid{
    display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px
  }
  .member{min-width:0}

  /* Filters / toolbars */
  .filters,.toolbar,.filter-bar,.actions-bar{padding:16px 20px!important;gap:12px!important;flex-wrap:wrap!important}
  .filters select,.toolbar select,.filter-bar select{min-height:42px}

  /* Desktop profile modal */
  #pmOv{align-items:center!important;justify-content:center!important;padding:30px!important}
  .pm-box{width:min(1100px,94vw)!important;max-width:1100px!important;max-height:90vh!important;border-radius:22px!important;display:grid;grid-template-columns:minmax(420px,1fr) minmax(360px,.8fr);overflow:hidden}
  .pm-ph{height:100%!important;min-height:620px}
  .pm-body{overflow-y:auto;padding:28px!important}
  .pm-name{font-size:32px!important}

  /* Wide cards used by messaging / social pages */
  .chat-layout,.messages-layout,.conversation-layout{max-width:var(--pc-max)!important;margin:0 auto!important}

  /* Desktop presentation treatment for landing/login/register pages */
  .hero,.hero-section,.landing,.landing-page,.presentation{max-width:var(--pc-max);margin:0 auto;padding-left:40px;padding-right:40px}
  .hero h1,.hero-section h1{font-size:clamp(42px,5vw,72px);line-height:1.02}

  /* Avoid stretched full-width media */
  img,video{max-width:100%}
}