/* === FINAL MOBILE VIEW FIX === */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.app,.topbar,.hero,.home-layout,.side-panel,.category-grid,.series-grid,.episode-list,.search-panel,.playlist-panel,.player-shell,.mini-player,.full-player{min-width:0}
img,svg,video,audio{max-width:100%}
@media(max-width:768px){
  body{padding-bottom:calc(156px + env(safe-area-inset-bottom));background:radial-gradient(circle at 18% 0%,rgba(216,184,109,.13),transparent 26%),linear-gradient(180deg,#050806,#071008 62%,#030403)}
  .app{width:100%;max-width:100%;padding:12px 12px 0}
  .topbar{position:sticky;top:0;z-index:90;width:100%;padding:10px 0 12px;gap:8px}
  .brand{flex:1;min-width:0}.brand>div:last-child{min-width:0}
  .brand strong,.brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-actions{flex:0 0 auto}.nav-actions .btn:not(.gold){display:none}.nav-actions .btn.gold{min-width:74px;padding:10px 12px;font-size:12px}
  .hero{width:100%;min-height:auto;padding:22px 18px;border-radius:28px;margin:4px 0 22px}
  .hero h1{max-width:100%;font-size:clamp(32px,10.5vw,46px);line-height:.98;letter-spacing:-1.9px}
  .hero p{max-width:100%;font-size:14px;line-height:1.55}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px}.hero-actions .btn{width:100%;min-height:44px}
  .section-head{display:block}.section-head h2{font-size:21px}.section-head p{margin-top:4px;line-height:1.4}
  .home-layout,.category-grid,.series-grid{display:grid;grid-template-columns:1fr!important;gap:12px;width:100%}
  .rail{grid-auto-columns:minmax(172px,82vw);gap:12px;width:calc(100vw - 24px);max-width:100%;overflow-x:auto}
  .category-card{width:100%;min-height:132px}.category-card h3{max-width:82%;line-height:1.08}.card{width:100%}.art{height:118px}
  .page-title h1{font-size:30px;line-height:1.04;letter-spacing:-1.2px;overflow-wrap:anywhere}.page-title p{line-height:1.5}
  .episode{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px;min-height:76px;position:relative}
  .ep-title,.ep-sub{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}
  .ep-title{-webkit-line-clamp:2;padding-right:92px}.ep-sub{-webkit-line-clamp:2;padding-right:92px}
  .ep-actions{position:absolute;right:10px;top:50%;transform:translateY(-50%);gap:5px}.icon-btn{width:32px;height:32px}
  .bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;z-index:120}
  .player-shell{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;z-index:150}
  .mini-player{grid-template-columns:44px minmax(0,1fr) auto;gap:9px;padding:8px;border-radius:22px}
  .mini-info strong,.mini-info span{max-width:100%}.mini-actions{gap:6px}.mini-actions button{width:38px;height:38px}
  .player-shell.expanded{left:0;right:0;bottom:0;width:100%}
  .full-player{border-radius:28px 28px 0 0;max-height:calc(100dvh - env(safe-area-inset-top));padding:14px 14px calc(18px + env(safe-area-inset-bottom))}
  .big-art{height:190px}.player-top h2{font-size:21px;line-height:1.15}.player-quick-actions{grid-template-columns:1fr}
  .controls{gap:7px}.controls button{width:40px;height:40px}.controls .main-play{width:58px;height:58px}
  .queue-item{grid-template-columns:40px minmax(0,1fr) auto}.queue-title,.queue-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .search-modal,.playlist-modal{padding:10px}.search-panel,.playlist-panel{width:100%;max-width:100%;margin:0 auto;border-radius:24px;max-height:calc(100dvh - 20px);overflow:auto}
  .search-top{display:grid;grid-template-columns:minmax(0,1fr) auto;position:sticky;top:0;z-index:5;background:#0d110e;padding-bottom:10px}
  .search-results{max-height:none;overflow:visible}.playlist-create{grid-template-columns:1fr}.playlist-choice{grid-template-columns:minmax(0,1fr) auto}
  .library-tabs{display:grid;grid-template-columns:1fr 1fr}.library-tabs button{width:100%}
}
@media(max-width:380px){
  .app{padding-left:10px;padding-right:10px}.hero{padding:20px 16px;border-radius:24px}.hero h1{font-size:30px}
  .ep-title{padding-right:78px;font-size:12.5px}.ep-sub{padding-right:78px;font-size:10.5px}.icon-btn{width:29px;height:29px}
  .mini-actions button{width:34px;height:34px}.bottom-nav{left:8px;right:8px}.player-shell{left:8px;right:8px}
}