:root{
  --apps-bg:#0E0E0F;
  --apps-card:#141418;
  --apps-input:#1a1a20;
  --apps-hover:#18181f;
  --apps-border:#24242e;
  --apps-border-hard:#2e2e3a;
  --apps-text:#f1f1f5;
  --apps-muted:#9e9ea8;
  --apps-faded:#6c6c78;
  
  
--apps-accent:#3b82f6;
--apps-accent-hover:#2563eb;
  
  
  --apps-success:#22c55e;
  --apps-danger:#ef4444;
  --apps-radius:16px;
}
.apps-page{max-width:1120px;margin:0 auto;padding:28px 16px 60px;color:var(--apps-text)}
.apps-hero{text-align:center;margin:8px auto 22px;max-width:760px}
.apps-hero h1{font-family:Poppins,sans-serif;font-size:2rem;line-height:1.2;margin:0 0 8px;font-weight:800}
.apps-hero p{color:var(--apps-muted);margin:0;line-height:1.6}
.apps-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 24px}
.apps-nav a{padding:8px 13px;border:1px solid var(--apps-border);border-radius:999px;background:var(--apps-input);color:var(--apps-muted);text-decoration:none;font-size:.82rem;font-weight:600}
.apps-nav a:hover,.apps-nav a.active{background:var(--apps-accent);border-color:var(--apps-accent);color:#fff}
.apps-toolbar{display:flex;gap:10px;align-items:center;margin:0 auto 18px}
.apps-search{flex:1;min-width:0;background:var(--apps-input);border:1px solid var(--apps-border);border-radius:12px;color:var(--apps-text);padding:12px 14px;outline:none}
.apps-search:focus{border-color:var(--apps-accent)}
.apps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bm-app-card{background:var(--apps-card);border:1px solid var(--apps-border);border-radius:var(--apps-radius);padding:14px;min-width:0;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:.15s ease}
.bm-app-card:hover{background:var(--apps-hover);border-color:var(--apps-border-hard);transform:translateY(-1px)}
.bm-app-card-top{display:flex;justify-content:space-between;gap:10px}
.bm-app-name{font-family:Poppins,sans-serif;font-size:1.02rem;line-height:1.25;margin:0 0 6px}
.bm-app-category{display:inline-flex;padding:3px 8px;border-radius:999px;background:var(--apps-input);border:1px solid var(--apps-border);font-size:.68rem;color:var(--apps-muted)}
.bm-app-description{font-size:.82rem;color:var(--apps-muted);line-height:1.45;min-height:48px;margin:10px 0}
.bm-app-stats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;color:var(--apps-muted);font-size:.7rem}
.bm-app-stats span{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid var(--apps-border);background:var(--apps-input);border-radius:999px}
.material-symbols-rounded{font-size:15px}
.bm-app-visit{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;background:var(--apps-accent);color:#fff;border-radius:12px;min-height:40px;font-size:.84rem;font-weight:700}
.bm-app-visit:hover{background:var(--apps-accent-hover)}
.bm-app-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:8px}
.bm-react-btn{border:1px solid var(--apps-border);background:transparent;color:var(--apps-muted);border-radius:10px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none;font-size:.72rem;font-weight:600;cursor:pointer}
.bm-react-btn:hover,.bm-react-btn.active{background:var(--apps-input);color:var(--apps-text);border-color:var(--apps-border-hard)}
.bm-react-btn.active:first-child{color:#facc15}
.bm-react-btn.active:nth-child(2){color:#f97316}
.apps-empty{background:var(--apps-card);border:1px solid var(--apps-border);border-radius:var(--apps-radius);padding:38px 20px;text-align:center;color:var(--apps-muted)}
.apps-form-card{max-width:620px;margin:0 auto;background:var(--apps-card);border:1px solid var(--apps-border);border-radius:var(--apps-radius);padding:24px}
.apps-field{display:grid;gap:6px;margin-bottom:15px}
.apps-field label{font-size:.78rem;font-weight:700;color:#d7d7df;text-transform:uppercase;letter-spacing:.04em}
.apps-field input,.apps-field textarea,.apps-field select{width:100%;border:1px solid var(--apps-border);background:var(--apps-input);color:var(--apps-text);border-radius:10px;padding:11px 12px;font:inherit;outline:none}
.apps-field input:focus,.apps-field textarea:focus,.apps-field select:focus{border-color:var(--apps-accent)}
.apps-field textarea{resize:vertical;min-height:110px}
.apps-submit{width:100%;border:0;border-radius:12px;min-height:42px;background:var(--apps-accent);color:#fff;font-weight:700;cursor:pointer}
.apps-submit:hover{background:var(--apps-accent-hover)}
.apps-note{font-size:.78rem;color:var(--apps-muted);line-height:1.5;margin-top:12px}
.apps-alert{padding:10px 12px;border-radius:10px;margin-bottom:14px;font-size:.82rem}
.apps-alert.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac}
.apps-alert.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.apps-platform{display:grid;gap:10px}
.apps-platform-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;background:var(--apps-input);border:1px solid var(--apps-border);border-radius:12px}
.apps-platform-card h3{margin:0 0 4px;font-size:.95rem}
.apps-platform-card p{margin:0;color:var(--apps-muted);font-size:.78rem;line-height:1.4}
.apps-platform-card a{border:1px solid var(--apps-border-hard);color:var(--apps-text);padding:8px 12px;border-radius:9px;text-decoration:none;font-size:.75rem;font-weight:700;white-space:nowrap}
.apps-platform-card a:hover{background:var(--apps-accent);border-color:var(--apps-accent)}
.apps-pagination{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.apps-pagination a,.apps-pagination span{padding:8px 12px;border:1px solid var(--apps-border);border-radius:9px;background:var(--apps-card);color:var(--apps-muted);text-decoration:none;font-size:.78rem}
.apps-pagination .current{background:var(--apps-accent);border-color:var(--apps-accent);color:#fff}
.apps-discover{max-width:470px;margin:0 auto}
.apps-discover .bm-app-card{padding:24px}
.apps-discover .bm-app-name{font-size:1.45rem}
.apps-discover .bm-app-description{min-height:90px;font-size:.9rem}
.discover-next{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.discover-next a{min-height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--apps-border);border-radius:11px;color:var(--apps-text);background:var(--apps-card);text-decoration:none;font-weight:700;font-size:.82rem}
.discover-next a.primary{background:var(--apps-accent);border-color:var(--apps-accent)}
.apps-login-box{max-width:560px;margin:30px auto;text-align:center;background:var(--apps-card);border:1px solid var(--apps-border);border-radius:var(--apps-radius);padding:30px}
.apps-login-box a{display:inline-flex;margin-top:12px;padding:10px 16px;border-radius:10px;background:var(--apps-accent);color:#fff;text-decoration:none;font-weight:700}
.apps-share-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--apps-card);border:1px solid var(--apps-border);padding:10px 14px;border-radius:10px;color:var(--apps-text);opacity:0;pointer-events:none;transition:.18s;z-index:9999}
.apps-share-toast.show{opacity:1}
@media(max-width:850px){.apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .apps-page{padding:18px 12px 40px}
  .apps-hero h1{font-size:1.55rem}
  .apps-grid{grid-template-columns:1fr}
  .apps-toolbar{display:block}
  .apps-search{width:100%;margin-bottom:8px}
  .apps-form-card{padding:16px}
  .apps-platform-card{align-items:flex-start;flex-direction:column}
  .apps-platform-card a{width:100%;text-align:center}
  .apps-discover .bm-app-card{padding:16px}
}



/* =====================================================
   MOBILE FULL-WIDTH LAYOUT
   Matches the Profile Page mobile layout
===================================================== */
@media screen and (max-width: 768px) {

  /* Remove the global site container side spacing
     when the Apps page is present */
  main.container:has(.apps-page),
  main[role="main"]:has(.apps-page),
  .container:has(> .apps-page),
  main:has(> .apps-page) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Let Apps page use the full available phone width */
  .apps-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px 10px 24px;
    box-sizing: border-box;
  }

  /* Keep the hero centered */
  .apps-hero {
    width: 100%;
    max-width: 760px;
    margin: 8px auto 22px;
  }

  /* Apps navigation uses the available width */
  .apps-nav {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* App cards use the full available width */
  .apps-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }

  /* Discover card should also use the wider layout */
  .apps-discover {
    width: 100%;
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
  }

  .apps-discover .bm-app-card {
    width: 100%;
  }
}