/* Audious Mono Yellow — rebuilt on the new frontend base. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700;800&display=swap');

:root{
  --audious-css-build:"20260831-new-front-mono-yellow-v1";
  --bg:#0a0a0a;
  --surface:#181818;
  --surface-2:#151515;
  --line:#303030;
  --line-strong:#4a4a4a;
  --text:#f5f5f5;
  --soft:#d6d6d6;
  --muted:#969696;
  --muted-2:#626262;
  --accent:#ffd84d;
  --accent-strong:#e4b91f;
  --accent-soft:rgba(255,216,77,.12);
  --accent-soft-2:rgba(255,216,77,.20);
  --radius:9px;
  --radius-sm:6px;
  --shadow:0 16px 42px rgba(0,0,0,.42);
  --sidebar:236px;
  --queue:292px;
  --player-h:92px;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Monaco,monospace;
  --sans:'Raleway',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html,body{max-width:100%;overflow-x:hidden}body{overflow-x:hidden}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--sans)}body{padding-bottom:calc(var(--player-h) + 22px)}button,input{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
.shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--queue)}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:20px 14px 130px;border-right:1px solid var(--line);background:rgba(10,10,10,.985);display:flex;flex-direction:column;gap:20px;z-index:30}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 10px}
.brand strong{font-size:16px;letter-spacing:.11em}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.nav-group{display:flex;flex-direction:column;gap:4px}.nav-label{padding:0 9px 7px;color:var(--muted-2);font-size:8px;text-transform:uppercase;letter-spacing:.12em}.nav a{min-height:42px;padding:0 11px;border-radius:10px;display:flex;align-items:center;gap:11px;color:var(--soft);border:1px solid transparent;font-size:14px}.nav a:hover{background:var(--surface);color:var(--text)}.nav a.active{background:var(--surface-2);border-color:var(--line);color:var(--text)}.nav .ico{width:19px;text-align:center;color:var(--muted);font-size:13px}.nav a.active .ico{color:var(--accent)}.sidebar-bottom{margin-top:auto}.userbox{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#424242,#777777);flex:0 0 auto}.userbox b{display:block;font-size:12px}.userbox span{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.main{grid-column:2;min-width:0;padding:20px 26px 160px}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:center;padding:0 0 18px;background:linear-gradient(var(--bg) 72%,rgba(10,10,10,0))}.search-group{width:min(720px,100%);display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:0;align-items:stretch}.search{height:46px;max-width:none;border:1px solid var(--line);border-right:0;border-radius:13px 0 0 13px;background:var(--surface);display:flex;align-items:center;gap:10px;padding:0 14px}.search span{color:var(--muted)}.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text)}.search input::placeholder{color:#777777}.search-submit{height:46px;border:1px solid var(--line);border-radius:0 13px 13px 0;background:var(--surface-2);color:var(--soft);font-size:18px}.search-submit:hover{background:#242424;color:var(--text)}.iconbtn{height:42px;min-width:42px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--soft)}.iconbtn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.page-head{display:flex;align-items:flex-end;justify-content:flex-start;gap:20px;margin:8px 0 18px}.page-head h1{margin:0;font-size:22px;letter-spacing:-.45px}.page-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.chips{display:flex;gap:8px;overflow:auto;padding-bottom:4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{white-space:nowrap;min-height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--soft);font-size:11px}.chip:hover,.chip.active{background:var(--surface-2);border-color:var(--line-strong);color:var(--text)}
.section{margin-top:26px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}.section-head h2{margin:0;font-size:14px;letter-spacing:-.2px}.section-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.textbtn{border:0;background:transparent;color:var(--muted);font-size:11px}.textbtn:hover{color:var(--text)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.feature-card{min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:14px;overflow:hidden;transition:.16s ease}.feature-card:hover{background:var(--surface-2);transform:translateY(-1px)}.cover{aspect-ratio:1.4/1;position:relative;background:linear-gradient(140deg,var(--c1,#3b3b3b),var(--c2,#161616))}.cover:before{content:"";position:absolute;inset:18%;border:1px solid rgba(255,255,255,.09);border-radius:50%}.play-fab{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(244,246,248,.92);color:#11151a}.feature-meta{padding:11px}.feature-meta b,.feature-meta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-meta b{font-size:12px}.feature-meta span{margin-top:4px;color:var(--muted);font-size:10px}
.recent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.recent-card{min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px;display:grid;grid-template-columns:48px minmax(0,1fr) 26px;gap:9px;align-items:center}.recent-card:hover{background:var(--surface-2)}.thumb{width:48px;height:48px;border-radius:9px;background:linear-gradient(145deg,var(--c1,#484848),var(--c2,#1b1b1b))}.recent-meta{min-width:0}.recent-meta b,.recent-meta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-meta b{font-size:11px}.recent-meta span{font-size:9.5px;color:var(--muted);margin-top:4px}.kebab{border:0;background:transparent;color:var(--muted);font-size:16px}
.track-list{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}.track-row{display:grid;grid-template-columns:28px 42px minmax(0,1.4fr) minmax(110px,.8fr) 56px 28px;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--line)}.track-row:first-child{border-top:0}.track-row:hover{background:var(--surface-2)}.rank{color:var(--muted);font-size:10px;text-align:center}.row-thumb{width:42px;height:42px;border-radius:8px;background:linear-gradient(145deg,#464646,#1d1d1d)}.songtitle b,.songtitle span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.songtitle b{font-size:11px}.songtitle span,.album,.duration{color:var(--muted);font-size:9.5px}.duration{text-align:right}
.queue{grid-column:3;position:fixed;right:0;top:0;bottom:0;width:var(--queue);padding:20px 18px 126px;border-left:1px solid var(--line);background:#111111;overflow:auto}.queue-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.queue-head strong{font-size:13px}
.queue-head-actions{display:flex;align-items:center;gap:8px}
.queue-head button{border:0;background:transparent;color:var(--muted);font-size:10px}
.queue-head button:hover{color:var(--text)}
.queue-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.queue-tabs button{height:36px;border:0;background:transparent;color:var(--muted);font-size:10px}.queue-tabs button.active{color:var(--text);border-bottom:1px solid var(--soft)}.queue-item{display:grid;grid-template-columns:18px 38px minmax(0,1fr) 24px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.queue-item .qthumb{width:38px;height:38px;border-radius:7px;background:linear-gradient(145deg,#464646,#1d1d1d)}.queue-item b,.queue-item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-item b{font-size:10px}.queue-item span{font-size:8.5px;color:var(--muted);margin-top:3px}.queue-item .num{font-size:9px;color:var(--muted)}
.player{position:fixed;z-index:80;left:calc(50% + (var(--sidebar) - var(--queue))/2);right:auto;transform:translateX(-50%);width:min(980px,calc(100vw - var(--sidebar) - var(--queue) - 36px));bottom:12px;min-height:var(--player-h);padding:10px 14px;display:grid;grid-template-columns:minmax(150px,.88fr) minmax(300px,1.35fr) auto;align-items:center;gap:16px;background:rgba(24,24,24,.97);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(14px);overflow:hidden}.now{display:flex;align-items:center;gap:11px;min-width:0}.now-cover{width:58px;height:58px;border-radius:10px;background:linear-gradient(145deg,#505050,#202020);flex:0 0 auto}.now-meta{min-width:0}.now-meta b,.now-meta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-meta b{font-size:12px}.now-meta span{font-size:9.5px;color:var(--muted);margin-top:4px}.like{margin-left:auto;border:0;background:transparent;color:var(--soft)}.controls{display:grid;gap:8px;min-width:0;justify-self:center;width:100%;max-width:460px}.control-buttons{display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:nowrap}.control-buttons button{border:0;background:transparent;color:var(--soft);flex:0 0 auto}.control-buttons .mainplay{width:42px;height:42px;border-radius:50%;background:var(--text);color:#101217}.progress-wrap{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:8px;color:var(--muted);font-size:8.5px;min-width:0}.progress{height:3px;background:#3b3b3b;border-radius:99px;overflow:hidden;min-width:0}.progress i{display:block;width:36%;height:100%;background:var(--accent)}.player-right{display:flex;justify-content:flex-end;align-items:center;gap:7px;color:var(--muted);min-width:0;white-space:nowrap}.volume{width:72px;flex:0 0 72px;height:3px;background:#3b3b3b;border-radius:99px;overflow:hidden}.volume i{display:block;width:58%;height:100%;background:#d0d0d0}.player-right button{border:0;background:transparent;color:var(--soft);flex:0 0 auto}.volume-toggle{width:25px;height:25px;display:grid;place-items:center;padding:0;border-radius:7px}.volume-toggle:hover{background:var(--surface-2);color:var(--text)}.volume-toggle svg{width:15px;height:15px;display:block}.mobile-nav{display:none}.mobile-header{display:none}.mobile-header .brand{padding:0;gap:10px}.mobile-header .brand strong{font-size:15px;letter-spacing:.10em}.like{width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:9px;font-size:20px;line-height:1}.control-buttons button{width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:9px;font-size:17px;line-height:1}.control-buttons .mainplay{width:46px;height:46px;font-size:18px}.player-right button{width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:9px;font-size:16px;line-height:1}.volume-toggle{width:30px;height:30px}.volume-toggle svg{width:17px;height:17px;display:block}.like:hover,.control-buttons button:hover,.player-right button:hover{background:var(--surface-2);color:var(--text)}
@media(max-width:1360px){.player{grid-template-columns:minmax(145px,.86fr) minmax(260px,1.25fr) auto;gap:14px;padding:10px 12px}.like{display:none}.control-buttons{gap:11px}.volume{width:58px;flex-basis:58px}}@media(max-width:1220px){.player{grid-template-columns:minmax(138px,.82fr) minmax(220px,1.18fr) auto;gap:12px}.player-right button:last-child,.player-right button:nth-last-child(2){display:none}.volume{width:52px;flex-basis:52px}.control-buttons{gap:10px}}@media(max-width:1120px){.player{grid-template-columns:minmax(0,1fr) minmax(170px,1fr)}.player-right{display:none}.control-buttons button:first-child,.control-buttons button:last-child{display:none}}
@media(max-width:1280px){:root{--queue:260px;--sidebar:208px}.feature-grid,.recent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){:root{--sidebar:78px;--queue:0px}.brand-copy,.nav .label,.userbox .copy,.nav-label{display:none}.brand{justify-content:center;padding:4px 0 10px}.nav a{justify-content:center;padding:0}.sidebar{padding-left:10px;padding-right:10px}.userbox{justify-content:center}.queue{display:none}.shell{grid-template-columns:var(--sidebar) 1fr}.main{grid-column:2}.player{left:calc(50% + var(--sidebar)/2);right:auto;width:min(980px,calc(100vw - var(--sidebar) - 36px));transform:translateX(-50%)}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.recent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mobile-more-backdrop,
.mobile-more-sheet{display:none}

@media(max-width:760px){
  .mobile-more-backdrop{
    position:fixed;
    z-index:94;
    inset:0;
    display:block;
    background:rgba(0,0,0,.46);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }

  .mobile-more-sheet{
    position:fixed;
    z-index:95;
    left:10px;
    right:10px;
    bottom:68px;
    display:block;
    padding:10px;
    border:1px solid var(--line-strong);
    border-radius:16px;
    background:rgba(10,10,10,.985);
    box-shadow:0 18px 46px rgba(0,0,0,.42);
    backdrop-filter:blur(16px);
    transform:translateY(16px);
    opacity:0;
    pointer-events:none;
    transition:transform .18s ease,opacity .18s ease;
  }

  .mobile-more-sheet.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .mobile-more-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-more-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:3px 4px 9px;
    border-bottom:1px solid var(--line);
  }

  .mobile-more-head strong{
    font-size:12px;
  }

  .mobile-more-close{
    width:32px;
    height:32px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
  }

  .mobile-more-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    padding-top:9px;
  }

  .mobile-more-grid a{
    min-height:44px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:11px;
    background:transparent;
    color:var(--soft);
    font-size:11px;
  }

  .mobile-more-grid a:hover{
    background:var(--surface);
    color:var(--text);
  }

  .mobile-more-grid .more-ico{
    width:18px;
    text-align:center;
    color:var(--muted);
  }

  .mobile-nav .mobile-more-toggle.active{
    color:var(--text);
  }
}

@media(max-width:760px){
  :root{--player-h:68px}
  body{padding-bottom:132px;overflow-x:hidden}
  .shell{display:block;max-width:100%}
  .sidebar{display:none}
  .main{
    padding:10px 10px 146px;
    max-width:100%;
    overflow-x:hidden;
  }

  .mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:32px;
    margin:2px 0 10px;
  }
  .mobile-header .brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .mobile-header .brand-copy{
    display:block;
  }
  .mobile-header .brand-logo{
    width:30px;
    height:30px;
    flex:0 0 30px;
  }
  .mobile-header .brand strong{
    display:block;
    font-size:14px;
    letter-spacing:.10em;
  }
  
  

  .topbar{
    display:block;
    padding-bottom:10px;
    max-width:100%;
  }
  .topbar > *{min-width:0}
  .search-group{
    width:100%;
    display:block;
    max-width:100%;
  }
  .search{
    height:40px;
    min-width:0;
    width:100%;
    max-width:100%;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
  }
  .search-submit{
    display:none;
  }
  .search span{
    font-size:14px;
  }
  .search input{
    min-width:0;
    width:100%;
    font-size:14px;
  }
  

  .page-head{
    display:block;
    margin:6px 0 14px;
  }
  .page-head h1{
    font-size:18px;
    letter-spacing:-.35px;
  }
  .page-head p{font-size:11px}

  .chips{
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    gap:7px;
    padding-bottom:3px;
  }
  .chip{
    min-height:32px;
    padding:0 11px;
    font-size:10px;
    border-radius:9px;
  }

  .section{margin-top:20px}
  .section-head{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:6px;
    margin-bottom:10px;
  }
  .section-head h2{font-size:13px}
  .section-head p{font-size:10px}
  .section-head .textbtn{
    margin-left:auto;
    flex:0 0 auto;
    font-size:10px;
  }

  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    max-width:100%;
  }
  .feature-card{
    min-width:0;
    border-radius:12px;
  }
  .cover{aspect-ratio:1/1.06}
  .play-fab{
    width:32px;
    height:32px;
    right:8px;
    bottom:8px;
  }
  .feature-meta{padding:9px}
  .feature-meta b{font-size:11px}
  .feature-meta span{font-size:9px}

  .recent-grid{
    grid-template-columns:1fr;
    gap:8px;
    max-width:100%;
  }
  .recent-card{
    min-width:0;
    padding:7px;
    grid-template-columns:42px minmax(0,1fr) 24px;
    gap:8px;
    border-radius:11px;
  }
  .thumb{
    width:42px;
    height:42px;
  }
  .recent-meta b{font-size:10.5px}
  .recent-meta span{font-size:9px}

  .track-list{
    max-width:100%;
    overflow:hidden;
    border-radius:12px;
  }
  .track-row{
    grid-template-columns:20px 38px minmax(0,1fr) 24px;
    gap:8px;
    padding:7px 8px;
  }
  .track-row .album,
  .track-row .duration{display:none}
  .row-thumb{
    width:38px;
    height:38px;
  }
  .songtitle b{font-size:10.5px}
  .songtitle span{font-size:9px}

  .player{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    bottom:62px;
    min-height:68px;
    padding:7px 9px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    border-radius:15px;
  }
  .now{
    min-width:0;
    overflow:hidden;
    gap:9px;
  }
  .now-cover{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:9px;
  }
  .now-meta b{font-size:10.5px}
  .now-meta span{font-size:9px}
  .like{display:none}
  .controls{
    display:block;
    min-width:auto;
  }
  .control-buttons{
    gap:9px;
  }
  .control-buttons button:not(.mainplay){display:none}
  .control-buttons .mainplay{
    width:38px;
    height:38px;
  }
  .progress-wrap,
  .player-right{display:none}

  .mobile-nav{
    position:fixed;
    z-index:90;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-width:100%;
    height:54px;
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    background:#111111;
    border-top:1px solid var(--line);
  }
  .mobile-nav button{
    min-width:0;
    border:0;
    background:transparent;
    color:var(--text);
    font-size:8.5px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    overflow:hidden;
    opacity:.88;
  }
  .mobile-nav button.active{color:var(--text);opacity:1}
  .mobile-nav .m-ico{font-size:13px;color:inherit}
}

/* --- Mockup views ----------------------------------------------------- */
.view{display:none}
.view.active{display:block}

.view-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:8px 0 18px;
}
.view-head h1{
  margin:0;
  font-size:22px;
  letter-spacing:-.45px;
}
.view-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
}
.view-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.view-btn{
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--soft);
  font-size:10px;
}
.view-btn:hover{
  background:var(--surface-2);
  color:var(--text);
}
.view-btn.primary{
  background:var(--text);
  color:#101217;
  border-color:var(--text);
}

.content-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.media-card{
  min-width:0;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:14px;
  overflow:hidden;
}
.media-card:hover{background:var(--surface-2)}
.media-cover{
  aspect-ratio:1/1;
  position:relative;
  background:linear-gradient(145deg,var(--c1,#474747),var(--c2,#181818));
}
.media-cover.round{
  width:72%;
  aspect-ratio:1/1;
  margin:15% auto 0;
  border-radius:50%;
}
.media-body{padding:11px}
.media-body b,
.media-body span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.media-body b{font-size:11px}
.media-body span{
  margin-top:4px;
  color:var(--muted);
  font-size:9.5px;
}
.media-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  color:var(--muted);
  font-size:8.5px;
}

.list-panel{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--surface);
}
.list-head,
.simple-row{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(100px,.8fr) 74px 30px;
  gap:12px;
  align-items:center;
}
.list-head{
  padding:8px 12px;
  color:var(--muted-2);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.1em;
  border-bottom:1px solid var(--line);
}
.simple-row{
  min-height:58px;
  padding:8px 12px;
  border-top:1px solid var(--line);
}
.simple-row:first-of-type{border-top:0}
.simple-row:hover{background:var(--surface-2)}
.simple-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.simple-thumb{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:8px;
  background:linear-gradient(145deg,var(--c1,#474747),var(--c2,#181818));
}
.simple-copy{min-width:0}
.simple-copy b,
.simple-copy span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.simple-copy b{font-size:10.5px}
.simple-copy span{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.simple-col{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:9px;
}

.date-group{margin-top:22px}
.date-label{
  margin:0 0 9px;
  color:var(--soft);
  font-size:11px;
}

.stat-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.stat-card{
  border:1px solid var(--line);
  border-radius:13px;
  padding:12px;
  background:var(--surface);
}
.stat-card span{
  display:block;
  color:var(--muted);
  font-size:9px;
}
.stat-card strong{
  display:block;
  margin-top:4px;
  font-size:18px;
}

.user-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.user-card{
  min-width:0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:13px;
  padding:10px;
  background:var(--surface);
}
.user-card:hover{background:var(--surface-2)}
.user-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--c1,#4b4b4b),var(--c2,#1b1b1b));
}
.user-copy{
  min-width:0;
}
.user-copy b,
.user-copy span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-copy b{font-size:10.5px}
.user-copy span{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.follow-btn{
  min-height:30px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--soft);
  font-size:9px;
}

.create-card{
  min-height:210px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:1px dashed var(--line-strong);
  border-radius:14px;
  background:rgba(255,255,255,.015);
  color:var(--muted);
}
.create-card .plus{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--text);
  font-size:20px;
}
.create-card span{font-size:10px}

@media(max-width:1280px){
  .content-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .user-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .view-head{
    display:block;
    margin:6px 0 14px;
  }
  .view-head h1{font-size:18px}
  .view-head p{font-size:11px}
  .view-actions{
    margin-top:10px;
  }
  .content-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .media-card{border-radius:12px}
  .media-body{padding:9px}
  .stat-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .stat-card{
    padding:9px 8px;
  }
  .stat-card strong{font-size:15px}
  .list-head{display:none}
  .simple-row{
    grid-template-columns:minmax(0,1fr) 28px;
    gap:8px;
    min-height:54px;
    padding:7px 8px;
  }
  .simple-row > .simple-col{display:none}
  .user-list{
    grid-template-columns:1fr;
  }
  .create-card{min-height:160px}
}


.userbox-btn{
  width:100%;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.userbox-btn:hover{
  background:var(--surface-2);
  border-color:var(--line-strong);
}

.upload-panel{
  display:block;
  max-width:760px;
}
.upload-drop{
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  border:1px dashed var(--line-strong);
  border-radius:15px;
  background:rgba(255,255,255,.012);
  text-align:center;
  padding:24px;
}
.upload-drop .upload-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--accent);
  font-size:22px;
}
.upload-drop strong{font-size:13px}
.upload-drop span{
  max-width:420px;
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}
.upload-drop .view-btn{margin-top:4px}


.profile-grid{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.profile-card{
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  padding:16px;
  text-align:center;
}
.profile-avatar{
  width:88px;
  height:88px;
  margin:0 auto 12px;
  border-radius:50%;
  background:linear-gradient(145deg,#5b5b5b,#1b1b1b);
}
.profile-card h2{
  margin:0;
  font-size:16px;
}
.profile-card .handle{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}
.profile-card .bio{
  margin:12px 0 0;
  color:var(--soft);
  font-size:10px;
  line-height:1.55;
}
.profile-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:14px;
}
.profile-stat{
  padding:8px 4px;
  border:1px solid var(--line);
  border-radius:10px;
}
.profile-stat strong{
  display:block;
  font-size:13px;
}
.profile-stat span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.profile-content{
  min-width:0;
}
.profile-tabs{
  display:flex;
  gap:7px;
  margin-bottom:14px;
  overflow:auto;
}
.profile-tabs button{
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:9.5px;
  white-space:nowrap;
}
.profile-tabs button.active{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--line-strong);
}

@media(max-width:760px){
  .profile-grid{
    grid-template-columns:1fr;
  }
  .upload-drop{
    min-height:210px;
  }
  .profile-card{
    text-align:left;
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:12px;
    align-items:center;
  }
  .profile-avatar{
    width:64px;
    height:64px;
    margin:0;
    grid-row:1 / span 2;
  }
  .profile-card .bio,
  .profile-stats{
    grid-column:1 / -1;
  }
}


.queue-tab-panel{display:none}
.queue-tab-panel.active{display:block}
.queue-empty{
  display:none;
  padding:18px 8px;
  color:var(--muted);
  font-size:10px;
  text-align:center;
}
.queue-empty.active{display:block}
.queue-head-title{display:flex;align-items:center;gap:8px}
.queue-head-title small{
  color:var(--muted);
  font-size:9px;
  font-weight:400;
}
.queue-head-action-clear[hidden]{display:none!important}

/* ================================================================
   PHP shell / theming integration
   ================================================================ */

.brand-logo{
  width:32px;
  height:32px;
  display:block;
  object-fit:contain;
  flex:0 0 32px;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.30));
}

.lang-switcher{
  display:flex;
  align-items:center;
  gap:4px;
  margin:8px 8px 0;
}
.lang-btn{
  min-width:30px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
  font-size:9px;
  text-decoration:none;
}
.lang-btn:hover,
.lang-btn.active{
  color:var(--text);
  background:var(--surface-2);
  border-color:var(--line-strong);
}

.sidebar-account{
  position:relative;
}
.account-dropdown{
  position:absolute;
  left:8px;
  right:8px;
  bottom:66px;
  z-index:120;
  padding:7px;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:#111111;
  box-shadow:var(--shadow);
}
.account-dropdown[hidden]{display:none}
.account-dropdown a,
.account-dropdown button{
  width:100%;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 9px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--soft);
  font-size:9.5px;
  text-align:left;
  text-decoration:none;
}
.account-dropdown a:hover,
.account-dropdown button:hover{
  background:var(--surface-2);
  color:var(--text);
}
.account-summary{
  padding:8px 9px 9px;
  border-bottom:1px solid var(--line);
  margin-bottom:5px;
}
.account-summary strong,
.account-summary span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-summary strong{font-size:10.5px}
.account-summary span{margin-top:3px;color:var(--muted);font-size:9px}
.account-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.account-avatar-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}

.skip-link{
  position:fixed;
  left:12px;
  top:12px;
  z-index:999;
  transform:translateY(-150%);
  padding:8px 11px;
  border-radius:9px;
  background:var(--text);
  color:var(--bg);
  text-decoration:none;
  font-size:10px;
}
.skip-link:focus{transform:none}

/* Real PHP view host. Existing/current API renderer can target this later. */
#resultsList{
  min-width:0;
}
#resultsMeta,
#tagsMeta,
#active-tags{
  display:none;
}

/* Hidden compatibility/runtime elements */
.runtime-hidden{
  display:none !important;
}

/* Basic loader */
.loader{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted);
  font-size:9px;
}
.loader[hidden]{display:none}
.loader .dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  animation:loaderPulse 1.2s infinite ease-in-out;
}
.loader .dot:nth-child(2){animation-delay:.15s}
.loader .dot:nth-child(3){animation-delay:.3s}
@keyframes loaderPulse{
  0%,80%,100%{opacity:.25;transform:scale(.8)}
  40%{opacity:1;transform:scale(1)}
}

/* New-theme compatibility with cards generated by the current frontend JS.
   These selectors let us migrate the shell first without forcing every API
   renderer to be rewritten in the same commit. */
.list{
  display:grid;
  gap:8px;
}
.song{
  min-width:0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:64px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.song:hover{background:var(--surface-2)}
.song .art{
  width:48px;
  height:48px;
  border-radius:8px;
  overflow:hidden;
  background:var(--surface-2);
}
.song .art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.song .meta{min-width:0}
.song .title{
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:10.5px;
  font-weight:700;
}
.song .line{
  display:flex;
  gap:5px;
  min-width:0;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
}
.song .line > *{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.song .actions{
  display:flex;
  align-items:center;
  gap:4px;
}
.song .btn,
.playlist-actions-btn{
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--soft);
}
.song .btn.primary{
  width:38px;
  min-width:38px;
  height:38px;
  border-radius:50%;
  background:var(--text);
  color:#101217;
  border-color:var(--text);
}
.song-action-icon{
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  line-height:0;
}
.song-action-icon--play{width:18px;height:18px}
.song-action-icon--heart,
.song-action-icon--more{width:16px;height:16px}
.song-action-icon .song-icon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.song-action-icon--play .song-icon-pause,
.song-like .song-icon-heart-fill{
  opacity:0;
}
.song-play.is-on .song-icon-play,
.song-like.is-on .song-icon-heart-outline{
  opacity:0;
}
.song-play.is-on .song-icon-pause,
.song-like.is-on .song-icon-heart-fill{
  opacity:1;
}
.song-likes-count{
  margin-left:6px;
  font-size:10px;
  line-height:1;
  font-weight:600;
}
.song-tags{
  display:flex;
  gap:4px;
  margin-top:5px;
  overflow:hidden;
}
.song-tag{
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:7.5px;
  white-space:nowrap;
}

.panel{
  min-width:0;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
.albums-grid,
.playlists-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.album-card,
.playlist-card,
.artist-card{
  min-width:0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  cursor:pointer;
}
.album-card:hover,
.playlist-card:hover,
.artist-card:hover{background:var(--surface-2)}
.album-cover,
.playlist-cover,
.artist-cover{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--surface-2);
}
.album-cover img,
.playlist-cover img,
.artist-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.artist-cover{
  width:72%;
  margin:14% auto 0;
  border-radius:50%;
}
.album-cover-overlay,
.playlist-cover-overlay,
.artist-cover-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.14);
  opacity:0;
  transition:opacity .15s ease;
}
.album-card:hover .album-cover-overlay,
.playlist-card:hover .playlist-cover-overlay,
.artist-card:hover .artist-cover-overlay{opacity:1}
.album-cover-overlay-icon,
.playlist-cover-overlay-icon,
.artist-cover-overlay-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--text);
  color:#101217;
}
.album-info,
.playlist-info,
.artist-info{
  padding:10px;
}
.album-info span,
.playlist-info span,
.artist-info span,
.playlist-owner{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.album-name,
.playlist-name,
.artist-name{
  color:var(--text);
  font-size:10.5px;
  font-weight:700;
}
.album-artist,
.album-track-count,
.playlist-track-count,
.playlist-owner,
.artist-track-count,
.playlist-badge{
  margin-top:4px;
  color:var(--muted);
  font-size:8.5px;
  text-decoration:none;
}
.playlist-actions-btn{
  position:absolute;
  right:7px;
  top:7px;
  background:rgba(16,16,16,.92);
}

.user-card{
  min-width:0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
}
.user-avatar{
  width:48px;
  height:48px;
  overflow:hidden;
  border-radius:50%;
  background:var(--surface-2);
}
.user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.user-name{margin:0;font-size:10.5px}
.user-handle,
.user-context,
.user-bio{
  margin:3px 0 0;
  color:var(--muted);
  font-size:9px;
}
.user-view{
  min-height:30px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--soft);
}

/* Keep legacy drawers/modals out of the shell until their new visual pass. */
.notif-backdrop,
.notif-drawer,
.reco-drawer,
.reco-drawer-backdrop,
.fullscreen-overlay,
.cp-modal,
.atp-modal,
.up-modal,
.ep-modal{
  display:none;
}

@media(max-width:1280px){
  .albums-grid,
  .playlists-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .lang-switcher{
    margin:0;
  }
  .sidebar .lang-switcher{display:none}
  .albums-grid,
  .playlists-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .song{
    grid-template-columns:44px minmax(0,1fr) auto;
    padding:7px 8px;
  }
  .song .art{width:44px;height:44px}
  .song .song-like{display:none}
}



.now-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.now-cover img[hidden]{
  display:none !important;
}
.progress-range{
  width:100%;
  min-width:0;
  height:3px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:99px;
  background:linear-gradient(
    to right,
    var(--accent) 0 var(--p,0%),
    #3b3b3b var(--p,0%) 100%
  );
  cursor:pointer;
}
.progress-range::-webkit-slider-thumb{
  width:10px;
  height:10px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:50%;
  background:var(--text);
  opacity:0;
  transition:opacity .15s ease;
}
.progress-range:hover::-webkit-slider-thumb{opacity:1}
.progress-range::-moz-range-thumb{
  width:10px;
  height:10px;
  border:0;
  border-radius:50%;
  background:var(--text);
  opacity:0;
}
.progress-range:hover::-moz-range-thumb{opacity:1}
.mobile-more-language{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 0 12px;
}
.mobile-more-language > span{
  color:var(--soft);
  font-size:10px;
}


/* ============================================================
   Mono Yellow identity — NEW frontend DOM only
   ============================================================ */

html,body{background:var(--bg)}

.sidebar{
  background:rgba(10,10,10,.985);
}

.brand strong{
  font-family:var(--mono);
  font-weight:700;
}

.nav a,
.userbox,
.search,
.search-submit,
.iconbtn,
.chip,
.feature-card,
.recent-card,
.track-list,
.list-panel,
.media-card,
.stat-card,
.user-card,
.profile-card{
  border-radius:var(--radius);
}

.nav a.active{
  color:#111;
  background:var(--accent);
  border-color:var(--accent);
  font-weight:700;
}

.nav a.active .ico{color:#111}

.search:focus-within{
  border-color:rgba(255,216,77,.58);
  box-shadow:0 0 0 1px rgba(255,216,77,.10);
}

.search-submit:hover{
  color:#111;
  background:var(--accent);
  border-color:var(--accent);
}

.chip.active{
  color:#111;
  background:var(--accent);
  border-color:var(--accent);
  font-weight:700;
}

.chip:hover:not(.active){
  border-color:#555;
  background:#202020;
}

.textbtn:hover{color:var(--accent)}

.feature-card,
.recent-card,
.track-list,
.list-panel,
.media-card,
.stat-card,
.user-card,
.profile-card{
  background:#181818;
  border-color:#292929;
}

.feature-card:hover,
.recent-card:hover,
.track-row:hover,
.simple-row:hover,
.media-card:hover,
.user-card:hover{
  background:#202020;
}

.play-fab{
  color:#111;
  background:var(--accent);
}

.queue{
  background:#111;
  border-left-color:#303030;
}

.queue-tabs button.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.queue-item.is-current,
.queue-item-live.is-current{
  color:var(--text);
}

.player{
  background:rgba(24,24,24,.97);
  border-color:#414141;
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.50);
}

.control-buttons .mainplay{
  color:#111;
  background:var(--accent);
}

.progress i,
.progress-range{
  background-color:var(--accent);
}

.progress-range{
  background:linear-gradient(
    to right,
    var(--accent) 0 var(--p,0%),
    #3b3b3b var(--p,0%) 100%
  );
}

.progress-range::-webkit-slider-thumb,
.progress-range::-moz-range-thumb{
  background:var(--accent);
}

.mobile-nav{
  background:#111;
  border-top-color:#303030;
}

.mobile-nav button.active{color:var(--accent)}

.mobile-more-sheet{
  background:rgba(15,15,15,.985);
  border-color:#3a3a3a;
}

@media(max-width:760px){
  .mobile-player-controls .mobile-mainplay{
    color:#111;
    background:var(--accent);
  }
}