:root {
  --bg: #0b0d14; --panel: #131724; --panel2: #1b2033; --line: #2a3150; --text: #eef1fa; --muted: #a3adc8;
  --accent: #3ddcc4; --accent2: #ffb454; --danger: #ff6b6b; --bar-h: 78px; --side-w: 220px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.has-bar #content { padding-bottom: calc(var(--bar-h) + 24px); }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #000; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
h1 { font-size: 1.7rem; margin: .2rem 0 1rem; } h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.sub { color: var(--muted); margin: -.6rem 0 1rem; } .note { background: var(--panel); border: 1px solid var(--line); padding: .7rem 1rem; border-radius: 10px; color: var(--muted); }
.err { color: var(--danger); }

#app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
#side { position: sticky; top: 0; height: 100vh; padding: 1rem .8rem; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; }
#side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; flex: 1; align-content: start; }
#side li a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--text); text-decoration: none; }
#side li a:hover { background: var(--panel2); } #side li a.active { background: var(--panel2); color: var(--accent); font-weight: 600; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--text); text-decoration: none; letter-spacing: .02em; } .brand span { color: var(--accent); }
.search input, .inline-search input, .inline-form input, .stack input, .stack select, .auth-box input { width: 100%; padding: .55rem .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.who { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .9rem; }
.who button { background: none; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
#content { padding: 1.4rem 1.8rem 2rem; min-width: 0; outline: none; }

.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; }
.btn:hover { border-color: var(--accent); } .btn.primary { background: var(--accent); color: #04110e; border-color: var(--accent); font-weight: 700; }
.btn.danger { color: var(--danger); } .row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sec-head h2, .sec-head h1 { margin-bottom: .4rem; }
.messages { list-style: none; padding: 0; margin: 0 0 1rem; } .messages li { padding: .6rem 1rem; border-radius: 8px; background: #123a35; border: 1px solid var(--accent); margin-bottom: .4rem; } .messages .error { background: #3a1616; border-color: var(--danger); }
.inline-form { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } .inline-form input { width: 16rem; }
.inline-search { margin-bottom: 1rem; max-width: 24rem; } form.inline { display: inline; }

.tracklist { list-style: none; margin: 0; padding: 0; }
.track { display: grid; grid-template-columns: 2.4rem 44px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr) auto auto auto; align-items: center; gap: .7rem; padding: .35rem .5rem; border-radius: 10px; }
.track:hover, .track.now { background: var(--panel); } .track.now .t-title { color: var(--accent); }
.track img, .noart { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--panel2); display: grid; place-items: center; color: var(--muted); }
.track button { background: none; border: 1px solid transparent; border-radius: 50%; width: 2.2rem; height: 2.2rem; cursor: pointer; } .track button:hover { background: var(--panel2); border-color: var(--line); }
.t-main { display: flex; flex-direction: column; min-width: 0; } .t-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-artist, .t-album a { color: var(--muted); font-size: .9rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-artist:hover, .t-album a:hover { text-decoration: underline; }
.t-album, .t-genre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .9rem; } .t-dur { color: var(--muted); font-variant-numeric: tabular-nums; }
.why { color: var(--accent2); font-size: .82rem; } .chip { font-size: .75rem; border: 1px solid var(--accent2); color: var(--accent2); padding: 0 .5rem; border-radius: 999px; text-decoration: none; }
.empty { color: var(--muted); padding: 1rem .5rem; list-style: none; }
.pager { display: flex; gap: 1rem; justify-content: center; margin: 1.2rem 0; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .cards.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: .15rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .7rem; text-decoration: none; color: var(--text); height: 100%; }
.card:hover { border-color: var(--accent); } .card img, .card-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--panel2); display: grid; place-items: center; font-size: 2rem; color: var(--muted); margin-bottom: .4rem; }
.wide .card img, .wide .card-art { aspect-ratio: 16/9; } .card small { color: var(--muted); }
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .7rem 1rem; flex-wrap: wrap; } .rows small { color: var(--muted); word-break: break-all; }
.stack { display: grid; gap: .5rem; max-width: 36rem; } fieldset.browser { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; }
.dirs { list-style: none; padding: 0; margin: .5rem 0; max-height: 14rem; overflow: auto; display: grid; gap: 2px; } .dirs button { width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .35rem .6rem; cursor: pointer; } .crumbs { color: var(--muted); font-size: .9rem; }
#page-video { width: 100%; max-height: 70vh; background: #000; border-radius: 12px; }

/* player bar */
#bar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h); z-index: 40; background: rgba(19, 23, 36, .97); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 2fr) 120px; gap: 1rem; align-items: center; padding: 0 1rem; }
#bar[hidden], #np[hidden] { display: none; }
.bar-info { display: flex; align-items: center; gap: .7rem; background: none; border: 0; text-align: left; cursor: pointer; min-width: 0; } .bar-info img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--panel2); } .bar-info span { display: flex; flex-direction: column; min-width: 0; } .bar-info strong, .bar-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-info small { color: var(--muted); }
.ctrl { display: flex; gap: .3rem; align-items: center; } .ctrl button { background: none; border: 0; font-size: 1.25rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer; } .ctrl button:hover { background: var(--panel2); } .ctrl button[aria-pressed=true] { color: var(--accent); } .ctrl .big { background: var(--accent); color: #04110e; font-size: 1.3rem; } .ctrl .big:hover { background: var(--accent); filter: brightness(1.1); }
.seek { display: flex; gap: .6rem; align-items: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; } .seek input { flex: 1; } input[type=range] { accent-color: var(--accent); width: 100%; }

/* now playing drawer */
#np { position: fixed; top: 0; left: var(--side-w); right: 0; bottom: var(--bar-h); z-index: 30; background: linear-gradient(180deg, #10142a, #090b12); display: flex; flex-direction: column; }
#np header { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.np-info { display: flex; gap: .8rem; align-items: center; flex: 1; min-width: 12rem; } .np-info img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; } .np-info div { display: flex; flex-direction: column; } .np-info span { color: var(--muted); font-size: .9rem; }
.np-tabs { display: flex; gap: .3rem; } .np-tabs button, #np-close, #effect-pick { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1rem; cursor: pointer; } .np-tabs button[aria-selected=true] { background: var(--accent); color: #04110e; border-color: var(--accent); font-weight: 700; } #effect-pick { padding: .4rem .6rem; }
#np-body { flex: 1; position: relative; min-height: 0; }
#lyrics { height: 100%; overflow-y: auto; padding: 2rem 1.5rem 40vh; text-align: center; font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.5; outline: none; }
#lyrics p { margin: .5em auto; max-width: 30ch; color: #7e89aa; cursor: pointer; transition: color .25s, transform .25s; } #lyrics p.cur { color: var(--text); font-weight: 700; transform: scale(1.04); }
#lyrics p.plain { white-space: pre-wrap; color: var(--text); cursor: auto; max-width: 40ch; font-size: .8em; } #lyrics p.none { cursor: auto; color: var(--muted); }
#fx { width: 100%; height: 100%; display: block; background: #04060c; } #fx[hidden], #vidwrap[hidden], #lyrics[hidden] { display: none; }
#vidwrap { height: 100%; display: grid; place-items: center; background: #000; } #mv { max-width: 100%; max-height: 100%; } #mv[hidden], #no-video[hidden] { display: none; } #no-video { color: var(--muted); }

#pl-menu { position: fixed; z-index: 60; width: 230px; max-height: 260px; overflow: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: .4rem; display: grid; gap: 2px; box-shadow: 0 10px 30px #000a; } #pl-menu[hidden] { display: none; } #pl-menu p { margin: .2rem .5rem; color: var(--muted); font-size: .85rem; } #pl-menu button, #pl-menu a { background: none; border: 0; text-align: left; padding: .45rem .6rem; border-radius: 6px; cursor: pointer; color: var(--text); text-decoration: none; } #pl-menu button:hover, #pl-menu a:hover { background: var(--panel); }

/* login */
body.auth { display: grid; place-items: center; min-height: 100vh; padding: 1rem; } .auth-box { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; } .auth-box .brand { display: block; font-size: 1.7rem; margin-bottom: 1rem; } .auth-box label { display: block; margin: .8rem 0 .25rem; color: var(--muted); } .auth-box .btn { margin-top: 1.2rem; width: 100%; background: var(--accent); color: #04110e; font-weight: 700; } .auth-box .helptext, .auth-box ul { color: var(--muted); font-size: .8rem; }

@media (max-width: 860px) {
  :root { --side-w: 0px; --bar-h: 120px; }
  #app { grid-template-columns: 1fr; }
  #side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  #side ul { flex-direction: row; display: flex; flex-wrap: wrap; flex-basis: 100%; order: 3; } .search { order: 2; flex: 1; }
  #content { padding: 1rem; }
  .track { grid-template-columns: 2.2rem 40px minmax(0, 1fr) auto auto; } .t-album, .t-genre, .t-dur { display: none; }
  #bar { grid-template-columns: 1fr auto; height: var(--bar-h); padding: .4rem .8rem; row-gap: 0; } .seek { grid-column: 1 / -1; order: 3; } .vol { display: none; }
  #np { left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.chip-shared { color: var(--accent); border-color: var(--accent); } .rows .chip { margin-left: .4rem; white-space: nowrap; }
fieldset.vis { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; display: grid; gap: .3rem; } fieldset.vis label { display: flex; gap: .5rem; align-items: center; margin: 0; } fieldset.vis input { width: auto; }

.brand { display: flex; align-items: center; gap: .6rem; } .brand-mark { border-radius: 8px; flex: none; }
.auth-box .brand { display: block; margin: 0 0 1rem; } .auth-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 1.4rem; }

.file-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .file-in:focus-visible + label, .pickers .btn:focus-within { outline: 3px solid var(--accent2); outline-offset: 2px; }
.pickers { display: flex; gap: .6rem; flex-wrap: wrap; } .pickers .btn { display: inline-block; }
#up-progress { width: 100%; height: 14px; accent-color: var(--accent); }
.up-log { list-style: none; padding: 0; margin: 0; max-height: 12rem; overflow: auto; font-size: .85rem; color: var(--muted); } .up-log .bad { color: var(--accent2); } .up-log .ok { color: var(--accent); }
.dirs button[disabled] { opacity: .55; cursor: not-allowed; }