/* Standalone Mobile Feed presentation layer. It intentionally does not reuse
   generic dashboard cards, so desktop and the other screens keep their UI. */
@media (max-width:780px){
  body:has(.mf-page){background:#0b0b0b;color:#e0e0e0}
  body:has(.mf-page):before{display:none}
  .layout:has(.mf-page){display:block;width:100%;margin:0;padding:0 0 calc(60px + env(safe-area-inset-bottom));overflow-x:hidden}
  .layout:has(.mf-page) main{width:100%}
  .mf-page{min-height:calc(100vh - 60px - env(safe-area-inset-bottom));background:#0b0b0b}

  .mf-header{position:relative;display:flex;align-items:center;justify-content:flex-end;height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;border-bottom:1px solid rgba(255,255,255,.09)}
  .mf-wordmark{position:absolute;top:calc(env(safe-area-inset-top) + 5px);left:50%;display:block;width:92px;height:44px;transform:translateX(-50%);object-fit:contain}
  .mf-balance{display:flex;align-items:center;gap:2px;color:#e0e0e0;font-size:12px;font-weight:700;line-height:16px}.mf-balance b{color:#e10600;font-size:15px}

  .mf-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:44px;padding:3px 12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mf-tabs button{position:relative;height:40px;padding:0;background:transparent;color:#777;font-size:12px;font-weight:650;line-height:16px}.mf-tabs button.active{color:#e0e0e0}.mf-tabs button.active:after{content:"";position:absolute;bottom:0;left:50%;width:32px;height:2px;transform:translateX(-50%);border-radius:2px;background:#e10600}

  .mf-feed{display:grid;gap:8px;padding:10px 12px 16px}
  .mf-card{width:100%;margin:0;background:#151515;border:1px solid rgba(255,255,255,.10);border-radius:8px;color:#e0e0e0}
  .mf-release-card{padding:10px}.mf-release-author{display:flex;align-items:flex-start;justify-content:space-between;min-height:34px;gap:8px}.mf-post-author{display:flex;min-width:0;align-items:center;gap:8px}.mf-avatar{width:32px;height:32px;flex:none;border-radius:50%;background:#282828 center/cover no-repeat;display:grid;place-items:center;color:#e0e0e0;font-size:12px;font-weight:800;overflow:hidden}.mf-post-author>div{min-width:0}.mf-post-author b,.mf-post-author span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-post-author b{color:#e0e0e0;font-size:14px;font-weight:700;line-height:16px}.mf-post-author span,.mf-service{color:#777;font-size:11px;line-height:14px}.mf-service{flex:none;padding-top:2px;white-space:nowrap}
  .mf-release-body{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;margin-top:8px}.mf-cover{display:block;width:78px;height:78px;border:0;border-radius:4px;background:#101010;object-fit:cover}.mf-release-copy{display:flex;min-width:0;min-height:78px;flex-direction:column;align-items:flex-start}.mf-release-title{display:-webkit-box;overflow:hidden;color:#e0e0e0;font-size:15px;font-weight:800;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mf-release-meta,.mf-release-artist{display:block;overflow:hidden;margin-top:4px;color:#777;font-size:11px;line-height:14px;text-overflow:ellipsis;white-space:nowrap}.mf-presave,.mf-listen{display:inline-flex;align-self:flex-end;align-items:center;justify-content:center;min-height:32px;margin-top:auto;padding:0 8px;border-radius:5px;background:#e10600;color:#fff;font-size:10px;font-weight:800;letter-spacing:.1px;line-height:12px;text-decoration:none;white-space:nowrap}.mf-presave:hover,.mf-listen:hover{background:#e10600}

  .mf-text-post{padding:10px}.mf-text-post p{margin:8px 0 0;color:#e0e0e0;font-size:13px;line-height:18px}.mf-empty{padding:18px 0;color:#777;font-size:13px}

  .mf-bottom-nav{position:fixed;z-index:20;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);height:calc(60px + env(safe-area-inset-bottom));padding:5px env(safe-area-inset-right) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left);border-top:1px solid rgba(255,255,255,.12);background:#101010}
  .mf-bottom-nav button{display:flex;min-height:48px;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0;background:transparent;color:#777;font-size:10px;font-weight:650;line-height:12px}.mf-bottom-nav button.active{color:#e10600}.mf-bottom-nav button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.mf-bottom-nav button img{width:16px;height:16px;object-fit:contain;filter:grayscale(1) brightness(1.8);opacity:.72}.mf-bottom-nav button.active img{filter:none;opacity:1}.mf-bottom-nav .mf-add{align-self:start;justify-self:center;width:42px;height:42px;min-height:42px;margin-top:-6px;border:1px solid #e10600;border-radius:50%;color:#e0e0e0;font-size:22px;font-weight:500;line-height:42px}.mf-bottom-nav .mf-add:hover{background:transparent}
}

@media (max-width:360px){
  .mf-wordmark{width:84px}.mf-release-body{grid-template-columns:72px minmax(0,1fr)}.mf-cover{width:72px;height:72px}.mf-release-copy{min-height:72px}.mf-presave,.mf-listen{font-size:9px;padding:0 7px}
}