/* NAMIFILM v44 — unified account layout */
html.account-html, body.account-body { overflow-x: clip !important; }
body:has(.account-layout) { overflow-x: clip !important; }

.account-layout {
  display:grid !important;
  grid-template-columns: 240px minmax(0,1fr) !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:clip !important;
  align-items:stretch !important;
}
.account-sidebar {
  grid-column:1 !important;
  grid-row:1 !important;
  position:sticky !important;
  top:70px !important;
  left:auto !important;
  width:240px !important;
  min-width:0 !important;
  max-width:240px !important;
  height:calc(100vh - 70px) !important;
  max-height:calc(100vh - 70px) !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.account-main,
.account-main.account-inner-page {
  grid-column:2 !important;
  grid-row:1 !important;
  position:relative !important;
  margin:0 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:0 clamp(14px,2.2vw,34px) 48px !important;
  overflow:hidden !important;
}
.account-main > *, .account-main section, .account-main article { min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; }
.account-page-head,.profile-banner,.subscription-hero,.account-kpis,.account-lower-grid,.account-settings-grid,.settings-form-grid,.playlist-page-grid,.account-content-grid,.compact-grid,.notifications-list,.history-list,.library-section,.plans-grid,.subscription-checkout { width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
.account-page-head h1,.account-page-head p,.profile-name-row h1,.profile-email,.profile-date { max-width:100% !important; overflow:hidden !important; }
.account-content-grid,.compact-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.account-kpis { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
.playlist-page-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.settings-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.account-lower-grid { grid-template-columns:minmax(0,1fr) minmax(260px,340px) !important; }
.playlist-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.continue-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.profile-banner { overflow:hidden !important; }
.profile-user,.profile-user-info,.profile-sub-card,.profile-quote,.playlist-card,.library-card,.big-playlist,.settings-card,.notification-card,.history-row,.music-library-row { min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; }
.profile-user-info,.playlist-info,.library-info,.history-main,.favorite-list,.favorite-row > div { overflow:hidden !important; }
.profile-user-info h1,.playlist-info b,.library-info h3,.favorite-row b,.notification-card b { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.account-layout + footer { margin-left:0 !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; }

/* Header must never create a horizontal page wider than the viewport. */
.target-nav { width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; overflow:hidden !important; }
.target-nav .logo,.target-nav .main-nav,.target-nav .nav-right { min-width:0 !important; }
.target-nav .main-nav { flex:1 1 auto !important; }
.target-nav .nav-right { flex:0 1 auto !important; }
.target-nav .nav-search { width:min(230px,22vw) !important; min-width:100px !important; max-width:230px !important; }

@media (max-width:1250px){
  .account-layout { grid-template-columns:200px minmax(0,1fr) !important; }
  .account-sidebar { width:200px !important; max-width:200px !important; }
  .account-kpis { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .account-content-grid,.compact-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .playlist-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .account-lower-grid { grid-template-columns:1fr !important; }
  .favorites-panel { margin-top:18px !important; }
  .profile-quote { display:none !important; }
  .target-nav .main-nav { gap:12px !important; }
  .target-nav .nav-search { width:170px !important; }
}
@media (max-width:1000px){
  .account-layout { grid-template-columns:76px minmax(0,1fr) !important; }
  .account-sidebar { width:76px !important; max-width:76px !important; }
  .account-side-nav a { justify-content:center !important; padding-left:4px !important; padding-right:4px !important; }
  .account-side-nav a span:last-child { display:none !important; }
  .account-logout { justify-content:center !important; font-size:0 !important; }
  .account-logout span { font-size:22px !important; }
  .account-main,.account-main.account-inner-page { padding-left:16px !important; padding-right:16px !important; }
  .account-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .account-content-grid,.compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .playlist-grid,.continue-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .settings-form-grid,.playlist-page-grid { grid-template-columns:1fr 1fr !important; }
  .target-nav .main-nav { display:none !important; }
  .target-nav { grid-template-columns:1fr auto !important; }
  .target-nav .mobile-menu-toggle { display:grid !important; }
}
@media (max-width:700px){
  .account-layout { display:block !important; width:100% !important; }
  .account-sidebar { position:relative !important; top:auto !important; width:100% !important; max-width:none !important; height:auto !important; max-height:none !important; padding:8px !important; }
  .account-side-nav { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; }
  .account-side-nav a { min-width:0 !important; }
  .account-side-nav a span:last-child { display:block !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  .account-main,.account-main.account-inner-page { width:100% !important; max-width:100% !important; padding:0 12px 28px !important; overflow:visible !important; }
  .account-kpis,.account-content-grid,.compact-grid,.playlist-grid,.continue-grid,.settings-form-grid,.playlist-page-grid { grid-template-columns:1fr !important; }
  .account-page-head { display:block !important; padding:20px !important; }
  .account-page-head h1 { font-size:clamp(30px,8vw,42px) !important; }
  .profile-banner { display:block !important; padding:18px !important; }
  .profile-user { display:flex !important; }
  .profile-sub-card { width:100% !important; margin-top:14px !important; }
  .subscription-hero { display:block !important; }
  .premium-big { margin-top:18px !important; }
  .music-library-row { grid-template-columns:56px minmax(0,1fr) !important; }
  .music-row-actions { grid-column:1/-1 !important; }
  .music-row-actions audio { width:100% !important; }
  .history-row { grid-template-columns:1fr !important; }
  .history-thumb { height:180px !important; }
  .plans-grid { grid-template-columns:1fr !important; }
  .target-nav .nav-search { width:100% !important; max-width:none !important; }
}
@media (max-width:430px){
  .account-main,.account-main.account-inner-page { padding-left:8px !important; padding-right:8px !important; }
  .account-side-nav { grid-template-columns:1fr 1fr !important; }
  .account-kpis { grid-template-columns:1fr !important; }
  .profile-user { gap:10px !important; }
  .profile-avatar { width:76px !important; height:76px !important; }
}

/* v44 final: reset legacy account geometry from earlier releases */
body:has(.account-layout) .account-layout,
body:has(.account-layout) .account-main,
body:has(.account-layout) .account-sidebar { float:none !important; }
body:has(.account-layout) .account-layout { margin-inline:0 !important; }
body:has(.account-layout) .account-main { position:relative !important; left:auto !important; right:auto !important; }
body:has(.account-layout) .account-sidebar { left:auto !important; right:auto !important; }