:root {
  --a-dark: #1ed6a0; --a-light: #087453;
  --bg: #0e0e12; --panel: #17171d; --panel2: #1f1f27; --text: #f2f2f5; --muted: #9a9aa8; --line: #2a2a34;
  --sidebar: #0a0a0d; --player-bg: #0a0a0d; --mini-bg: #14141a; --danger: #ff7a7a;
  --ly-rgb: 255, 255, 255; --ly-from: #1c3b36; --on-accent: #000;
  --accent: var(--a-dark); --accent-d: color-mix(in srgb, var(--accent) 72%, #000);
  color-scheme: dark;
  --player-h: 92px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.hidden { display: none !important; }

.app { display: grid; grid-template-columns: 240px 1fr; height: calc(100% - var(--player-h)); }
.sidebar { background: var(--sidebar); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); overflow: auto; }
.brand { font-size: 20px; font-weight: 800; letter-spacing: .5px; padding: 0 8px; }
.logo { color: var(--accent); }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav button { text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; }
#nav button:hover { color: var(--text); background: var(--panel); }
#nav button.active { color: var(--text); background: var(--panel2); }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
select, input[type=search], input[type=password] { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 9px 10px; font: inherit; }
.ghost { border: 1px solid var(--line); border-radius: 8px; padding: 8px; color: var(--muted); }
.ghost:hover { color: var(--text); border-color: var(--muted); }
#status { color: var(--muted); }

main { overflow: auto; padding: 0 24px 30px; }
.topbar { position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--bg) 80%, transparent); padding: 18px 0 14px; display: flex; flex-direction: column; gap: 14px; }
.topbar input { max-width: 420px; }
h2 { margin: 0; font-size: 26px; }

.tracks { width: 100%; border-collapse: collapse; }
.tracks th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.tracks td { padding: 8px 10px; border-radius: 0; }
.tracks tr.row { cursor: pointer; }
.tracks tr.row:hover td { background: var(--panel); }
.tracks tr.playing td { color: var(--accent); }
.tracks td.n { width: 36px; color: var(--muted); text-align: right; }
.tracks td.d { width: 64px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.tracks .t { display: flex; align-items: center; gap: 10px; }
.tracks img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: var(--panel2); }
.tracks .sub { color: var(--muted); font-size: 12px; }
.pill { font-size: 10px; border: 1px solid var(--accent-d); color: var(--accent); border-radius: 4px; padding: 0 5px; margin-left: 6px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.card { background: var(--panel); border-radius: 10px; padding: 12px; cursor: pointer; transition: background .15s; }
.card:hover { background: var(--panel2); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--panel2); }
.card .t { margin-top: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { margin-bottom: 12px; color: var(--muted); }
.back:hover { color: var(--text); }
.empty { color: var(--muted); padding: 40px 0; }

.player { position: fixed; left: 0; right: 0; bottom: 0; height: var(--player-h); background: var(--player-bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 16px; padding: 0 18px; padding-bottom: env(safe-area-inset-bottom); }
.now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.now img { width: 58px; height: 58px; border-radius: 6px; object-fit: cover; background: var(--panel2); }
.meta { min-width: 0; }
.title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { font-size: 10px; color: var(--accent); margin-top: 2px; }
.center { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.controls { display: flex; align-items: center; gap: 14px; }
.controls button { font-size: 18px; color: var(--muted); padding: 4px 8px; }
.controls button:hover, .controls button.on { color: var(--text); }
.controls button.on { color: var(--accent); }
.controls .play { width: 40px; height: 40px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 16px; padding: 0; }
.seek { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.seek input { flex: 1; }
input[type=range] { accent-color: var(--accent); }
.right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.right button { color: var(--muted); padding: 6px 10px; border-radius: 16px; border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.right button:hover, .right button.on { color: var(--text); border-color: var(--accent); }
.right input { width: 90px; }

.lyrics { position: fixed; inset: 0 0 var(--player-h) 0; z-index: 20; background: radial-gradient(circle at 30% 20%, var(--ly-from), var(--bg) 70%); display: flex; flex-direction: column; padding: 24px 6vw; }
.lyrics-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.lyrics-head .title { font-size: 22px; }
.lyrics-head button { font-size: 20px; color: var(--muted); }
.lyrics-body { flex: 1; overflow-y: auto; padding: 30vh 0; text-align: left; scroll-behavior: smooth; mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.ly-line { font-size: clamp(22px, 3.4vw, 38px); font-weight: 800; color: rgba(var(--ly-rgb), .38); padding: 8px 0; cursor: pointer; transition: color .25s, transform .25s; transform-origin: left center; }
.ly-line:hover { color: rgba(var(--ly-rgb), .7); }
.ly-line.active { color: var(--text); transform: scale(1.03); }
.ly-line.past { color: rgba(var(--ly-rgb), .5); }
.ly-plain { font-size: 20px; line-height: 1.7; white-space: pre-wrap; color: var(--text); }
.lyrics-src { color: var(--muted); font-size: 11px; padding-top: 8px; }

.err { color: var(--danger); min-height: 18px; margin: 0; }

@media (max-width: 760px) {
  :root { --player-h: 150px; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { flex-direction: row; padding: 8px; gap: 8px; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand, .side-bottom label, #status { display: none; }
  #nav { flex-direction: row; overflow-x: auto; }
  .side-bottom { margin: 0 0 0 auto; flex-direction: row; }
  .side-bottom .field { display: block; }
  .player { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 8px 12px; gap: 4px; }
  .right { justify-content: space-between; }
  .right input { display: none; }
  main { padding: 0 12px 20px; }
  .tracks .col-album { display: none; }
}

/* ===== v2: playlists, configurações, menus ===== */
.hint { color: var(--muted); font-size: 12px; margin: 4px 0; }
.muted { color: var(--muted); padding: 0 12px; }
.pl-head { display: flex; justify-content: space-between; align-items: center; padding: 0 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.pl-head button, .icon-btn { color: var(--muted); font-size: 16px; padding: 2px 6px; border-radius: 6px; }
.pl-head button:hover, .icon-btn:hover { color: var(--text); background: var(--panel2); }
.icon-btn.on { color: var(--accent); }
.pl-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; max-height: 28vh; }
.pl-list button { text-align: left; padding: 7px 12px; border-radius: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-list button:hover { color: var(--text); background: var(--panel); }
.pl-list button.active { color: var(--text); background: var(--panel2); }
.now .icon-btn { font-size: 20px; margin-left: 4px; }
.tracks td.acts { white-space: nowrap; width: 90px; text-align: right; }
.tracks td.acts .icon-btn { opacity: 0; }
.tracks tr.row:hover td.acts .icon-btn, .tracks td.acts .icon-btn.on { opacity: 1; }
@media (hover: none) { .tracks td.acts .icon-btn { opacity: 1; } }
.list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.lh-title { font-size: 22px; font-weight: 800; }
.lh-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-btn { border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; color: var(--text); font-size: 13px; background: var(--panel); }
.pill-btn:hover { border-color: var(--muted); }
.pill-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.more { margin: 14px auto; display: block; }
.menu { position: fixed; z-index: 60; min-width: 190px; max-height: 50vh; overflow-y: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: 0 10px 30px #000a; }
.menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 6px; }
.menu button:hover { background: var(--panel); }
.toast { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(var(--player-h) + 14px); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 20px; font-weight: 600; max-width: 90vw; box-shadow: 0 6px 20px #0008; }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(560px, 94vw); max-height: 88vh; }
dialog::backdrop { background: #000a; }
.set { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.set-head { display: flex; justify-content: space-between; align-items: center; }
.set h3 { margin: 0; font-size: 20px; }
.set h4 { margin: 14px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.set label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.set label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.set .row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.set .row2 input { flex: 1; min-width: 120px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; }
.users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.users li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
@media (max-width: 760px) { .pl-head, .pl-list, .side-bottom small { display: none; } .tracks td.acts { width: 70px; } }

/* ===== importação do YouTube ===== */
.imp-list { list-style: none; margin: 6px 0; padding: 0; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.imp-list li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; background: var(--panel2); }
.imp-list li[data-k] { cursor: pointer; } .imp-list li[data-k]:hover { background: var(--line); }
.imp-list .grow { flex: 1; min-width: 0; } .imp-list .grow > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-list .st { font-weight: 800; width: 16px; text-align: center; } .imp-list .ok .st { color: var(--accent); } .imp-list .miss .st { color: var(--danger); }
#importDlg textarea, #importDlg input[type=file], #pickDlg input, #importDlg .set > label input { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%; }
.pending { margin-top: 28px; }

/* popover do toast (fica acima de diálogos modais) */
.toast[popover] { margin: 0; border: 0; inset: auto auto calc(var(--player-h) + 14px) 50%; transform: translateX(-50%); position: fixed; overflow: visible; }
.enrich-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px; border-radius: 8px; background: var(--panel2); align-items: center; }
.enrich-row input[type=text] { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 8px; font: inherit; min-width: 0; }
.enrich-row .f { display: flex; gap: 6px; } .enrich-row .f input { flex: 1; }

/* fila */
.queue { position: fixed; right: 0; top: 0; bottom: var(--player-h); width: min(380px, 100vw); background: var(--panel); border-left: 1px solid var(--line); z-index: 40; display: flex; flex-direction: column; padding: 14px; gap: 10px; overflow: hidden; }
.queue.hidden { display: none; }
.qlist { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.qlist li { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.qlist li:hover { background: var(--panel2); }
.qlist .grow { min-width: 0; flex: 1; } .qlist .qt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grip { color: var(--muted, #888); cursor: grab; }
.brand .logo { width: 26px; height: 26px; border-radius: 7px; vertical-align: middle; margin-right: 6px; }
a.pill-btn, label.pill-btn { display: inline-block; text-decoration: none; cursor: pointer; }

/* ===== celular: abas inferiores, mini-player e tela cheia ===== */
.mob-only { display: none; } #nav button i { display: none; font-style: normal; }
.pl-cards { display: flex; flex-direction: column; gap: 8px; } .pl-cards button { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--panel); border-radius: 12px; text-align: left; } .pl-cards i { font-style: normal; font-size: 20px; width: 40px; height: 40px; border-radius: 10px; background: var(--panel2); display: grid; place-items: center; color: var(--accent); }
.np-full { display: none; }
@media (max-width: 760px) {
  :root { --tab-h: calc(58px + env(safe-area-inset-bottom, 0px)); --mini-h: 64px; --player-h: calc(var(--tab-h) + var(--mini-h)); }
  .mob-only { display: inline-flex; } .desk-only { display: none !important; }
  .app { display: block; height: calc(100% - var(--player-h)); overflow: auto; }
  main { padding: 0 14px 24px; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tab-h); z-index: 31; background: var(--sidebar); border-top: 1px solid var(--line); border-bottom: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); gap: 0; flex-direction: row; overflow: visible; }
  .sidebar .brand, .pl-head, .pl-list, .side-bottom { display: none; }
  #nav { flex: 1; flex-direction: row; overflow: visible; gap: 0; }
  #nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0; border-radius: 0; font-size: 11px; background: none !important; text-align: center; }
  #nav button i { display: block; font-size: 20px; line-height: 1; } #nav button.active { color: var(--accent); }
  .topbar { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 0 10px; gap: 10px; } .topbar input { flex: 1; max-width: none; } .topbar h2 { order: 3; width: 100%; margin: 0; font-size: 26px; } #settingsTop { order: 2; font-size: 22px; }
  /* mini-player */
  .player { bottom: var(--tab-h); height: var(--mini-h); display: flex; align-items: center; padding: 0 12px; gap: 10px; background: var(--mini-bg); border-top: 0; border-radius: 14px 14px 0 0; }
  .player .now { flex: 1; min-width: 0; } .player .now img { width: 46px; height: 46px; border-radius: 6px; } .now .badge, .player .right, .center .seek, .center .controls button:not(#play) { display: none; }
  .now .title, .now .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center { flex: none; } .center .controls { display: flex; } #play { width: 46px; height: 46px; font-size: 22px; }
  .mini-prog { position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: rgba(var(--ly-rgb), .2); display: block; } .mini-prog i { display: block; height: 100%; width: 0; background: var(--accent); }
  .queue { bottom: 0; width: 100vw; z-index: 60; } .lyrics { inset: 0 0 0 0; z-index: 55; } .toast { bottom: calc(var(--player-h) + 10px); }
  body.np-open .player, body.np-open .sidebar { visibility: hidden; }
  /* tela cheia */
  .np-full { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 14px; padding: calc(12px + env(safe-area-inset-top, 0px)) 22px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(var(--tint, #2a2a34), #0e0e12 85%); overflow: hidden; }
  .np-full.hidden { display: none; }
  .npf-top { display: flex; justify-content: space-between; align-items: center; } .npf-from { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #ffffffb0; }
  .npf-round { width: 44px; height: 44px; border-radius: 50%; background: #ffffff22; color: #fff; font-size: 20px; display: grid; place-items: center; }
  .npf-art { flex: 1; min-height: 0; display: grid; place-items: center; } .npf-art img { width: min(100%, 52vh); aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 50px #0009; border: 6px solid color-mix(in srgb, var(--tint, #888) 70%, #fff); background: var(--panel2); }
  .npf-chips { display: flex; gap: 10px; align-items: center; } .npf-chip { padding: 9px 22px; border-radius: 22px; background: #ffffff26; color: #fff; font-weight: 700; } .npf-badge { margin-left: auto; font-size: 11px; color: #ffffffa0; text-align: right; }
  .npf-info { display: flex; align-items: center; gap: 12px; } .npf-text { flex: 1; min-width: 0; } .npf-title { font-size: 26px; font-weight: 800; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .npf-artist { font-size: 18px; color: #ffffffc8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .npf-like { font-size: 30px; color: #fff; } .npf-like.on { color: var(--accent); }
  .npf-seek input { width: 100%; } .npf-times { display: flex; justify-content: space-between; color: #ffffffb0; font-size: 13px; margin-top: 2px; }
  .npf-ctl { display: flex; justify-content: space-between; align-items: center; } .npf-ctl button { font-size: 26px; color: #fff; width: 52px; height: 52px; } .npf-ctl button.on { color: var(--accent); }
  .npf-ctl .npf-play { width: 76px; height: 76px; border-radius: 50%; background: #ffffff30; font-size: 34px; }
  .npf-bot { display: flex; justify-content: center; gap: 22px; } .npf-bot .npf-round.on { color: var(--accent); }
}

/* ferramentas */
.pl-head span { display: inline-flex; gap: 2px; }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.cv-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 6px; border-radius: 10px; background: var(--panel2); font-size: 11px; color: var(--muted); } .cv-opt:hover { outline: 2px solid var(--accent); }
.cv-opt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; } .cv-opt span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stat { width: 100%; border-collapse: collapse; } .stat td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; } .stat td:first-child { width: 38%; }
.logs { background: var(--panel2); border-radius: 8px; padding: 10px; font-size: 11px; max-height: 24vh; overflow: auto; white-space: pre-wrap; margin: 0; }
.sm-rule { align-items: center; } .sm-rule select, .sm-rule input, .set select, .set > label input { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font: inherit; min-width: 0; } .sm-rule input { flex: 1; }

/* ===== temas e cor de destaque (data-theme / data-accent no <html>) ===== */
:root[data-theme=light] {
  --bg: #f6f6fa; --panel: #ffffff; --panel2: #ececf3; --text: #17171d; --muted: #565666; --line: #d5d5e0;
  --sidebar: #ececf3; --player-bg: #ffffff; --mini-bg: #ffffff; --danger: #c62828;
  --ly-rgb: 23, 23, 29; --ly-from: #cfeee5; --on-accent: #fff;
  --accent: var(--a-light); --accent-d: color-mix(in srgb, var(--accent) 72%, #000); color-scheme: light;
}
@media (prefers-color-scheme: light) { :root[data-theme=auto] {
  --bg: #f6f6fa; --panel: #ffffff; --panel2: #ececf3; --text: #17171d; --muted: #565666; --line: #d5d5e0;
  --sidebar: #ececf3; --player-bg: #ffffff; --mini-bg: #ffffff; --danger: #c62828;
  --ly-rgb: 23, 23, 29; --ly-from: #cfeee5; --on-accent: #fff;
  --accent: var(--a-light); --accent-d: color-mix(in srgb, var(--accent) 72%, #000); color-scheme: light;
} }
:root[data-accent=blue] { --a-dark: #4aa8ff; --a-light: #1560c0; }
:root[data-accent=pink] { --a-dark: #ff6fae; --a-light: #b3134f; }
:root[data-accent=orange] { --a-dark: #ffa23a; --a-light: #a24f00; }
:root[data-accent=purple] { --a-dark: #a98bff; --a-light: #6035c8; }
:root[data-accent=red] { --a-dark: #ff6b6b; --a-light: #b92323; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; background: var(--sw); } .swatch.on { border-color: var(--text); }

/* páginas de artista/álbum, seleção, retomar */
.lnk { color: inherit; cursor: pointer; } .lnk:hover { text-decoration: underline; color: var(--accent); }
.hero { display: flex; gap: 22px; align-items: flex-end; margin: 4px 0 18px; }
.hero-cover { width: 190px; height: 190px; border-radius: 10px; object-fit: cover; background: var(--panel2); box-shadow: 0 10px 30px #0006; flex: none; } .hero-cover.round { border-radius: 50%; }
.hero-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .hero h1 { margin: 2px 0 6px; font-size: clamp(26px, 5vw, 46px); line-height: 1.05; } .hero-sub { color: var(--muted); margin-bottom: 12px; }
.sec { margin: 22px 0 8px; font-size: 16px; }
.pop { list-style: none; margin: 0; padding: 0; } .pop li { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 8px; cursor: pointer; } .pop li:hover { background: var(--panel2); } .pop img { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; } .pop .grow { flex: 1; min-width: 0; }
td.sel, th.sel { width: 34px; } td.sel input { width: 18px; height: 18px; accent-color: var(--accent); }
#selBtn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.selbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--player-h) + 12px); z-index: 45; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; box-shadow: 0 8px 30px #0006; max-width: 96vw; } .selbar.hidden { display: none; }
.resume { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--player-h) + 12px); z-index: 44; display: flex; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid var(--accent); border-radius: 16px; padding: 10px 14px; width: min(560px, 94vw); box-shadow: 0 8px 30px #0006; } .resume.hidden { display: none; } .resume .grow { min-width: 0; } .resume .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .hero { flex-direction: column; align-items: flex-start; } .hero-cover { width: 62vw; max-width: 240px; height: auto; aspect-ratio: 1; } .topbar #selBtn { order: 4; } body.np-open .resume, body.np-open .selbar { display: none; } }
#selBtn { align-self: flex-start; }
@media (min-width: 761px) { .topbar { display: grid; grid-template-columns: minmax(0, 420px) auto; align-items: center; gap: 12px 14px; justify-content: start; } .topbar h2 { grid-column: 1 / -1; margin: 0; } .topbar #selBtn { align-self: center; } }
.ly-links { display: block; margin-top: 4px; } .ly-links a { color: var(--accent); }

/* seletor "Salvar em" */
.sheet { width: min(480px, 94vw); } .pk { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pk-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .pk-link { color: var(--text); font-weight: 600; justify-self: start; padding: 6px 0; } .pk-link.strong { justify-self: end; color: var(--accent); font-weight: 800; }
.pk-new { align-self: flex-start; color: var(--accent); font-weight: 700; padding: 4px 0; }
.pk #pkQ, .pk #pkName { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; width: 100%; min-width: 0; }
.pk-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 56vh; display: flex; flex-direction: column; gap: 2px; }
.pk-list li[data-k] { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; cursor: pointer; } .pk-list li[data-k]:hover, .pk-list li[data-k]:focus-visible { background: var(--panel2); outline: none; }
.pk-list .grow { flex: 1; min-width: 0; } .pk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pk-sec { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 6px 2px; }
.pk-cover { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--panel2); flex: none; display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.pk-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; } .pk-grid.one { grid-template: 1fr / 1fr; } .pk-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-like { background: linear-gradient(135deg, #5b3bf0, #9be8c8); color: #fff; }
.pk-mark { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font-weight: 800; color: var(--muted); flex: none; }
.pk-mark.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pk-mark.part { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) { dialog.sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; } .pk-list { max-height: 62vh; } }
html, body { overscroll-behavior-y: contain; }
#npSave { font-size: 20px; } .npf-info #npfSave { font-size: 26px; }

/* ===== v1.8: login, lista de playlists, tela cheia do celular ===== */
.login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: radial-gradient(900px 520px at 15% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), radial-gradient(700px 480px at 100% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--bg); }
.login form { display: flex; flex-direction: column; gap: 14px; width: min(380px, 100%); padding: 30px 26px 24px; border-radius: 20px; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); box-shadow: 0 24px 60px #0006; text-align: center; }
.login-logo { width: 72px; height: 72px; border-radius: 18px; align-self: center; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent); }
.login h1 { margin: 6px 0 0; font-size: 30px; letter-spacing: .3px; }
.login-tag { margin: -8px 0 4px; color: var(--muted); font-size: 14px; }
.login .hint { text-align: left; background: var(--panel2); border-radius: 10px; padding: 8px 10px; }
.login .hint:empty { display: none; }
.lf { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); }
.login input { width: 100%; box-sizing: border-box; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 16px; font-weight: 400; outline: none; }
.login input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.login input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 40px var(--panel2) inset; caret-color: var(--text); }
.pw { position: relative; display: block; } .pw input { padding-right: 84px; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--muted); padding: 7px 10px; border-radius: 8px; } .eye:hover { color: var(--text); background: var(--panel); }
.login #loginBtn { background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 16px; padding: 13px; border-radius: 26px; margin-top: 4px; }
.login #loginBtn:hover { filter: brightness(1.08); } .login #loginBtn:active { transform: scale(.98); }
.login .err { margin: 0; min-height: 1.2em; font-size: 13px; }

/* barra lateral: lista de playlists rola em vez de se sobrepor */
.sidebar > * { flex: none; }
.sidebar > .pl-list { flex: 1 1 0; min-height: 130px; max-height: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pl-list button { flex: none; min-height: 34px; }
.pl-filter { box-sizing: border-box; width: 100%; font-size: 13px !important; padding: 7px 10px !important; } .pl-filter.hidden { display: none; }
.side-bottom { margin-top: 0; }
.sidebar > .side-bottom { margin-top: auto; }

@media (max-width: 760px) {
  /* tela cheia: a capa cabe no espaço disponível e nunca invade os botões */
  .npf-art { container-type: size; overflow: visible; }
  .npf-art img { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); max-width: none; aspect-ratio: auto; border-width: 4px; box-sizing: border-box; }
  .npf-chips { flex: none; flex-wrap: wrap; row-gap: 6px; } .npf-badge { max-width: 100%; }
  .npf-chip { background: #ffffff2e; backdrop-filter: none; }
  .npf-ctl .npf-play { display: grid; place-items: center; font-size: 34px; color: #fff; }
  #play svg, .npf-play svg { display: block; }
}

/* v1.9 */
.plv-filter { box-sizing: border-box; width: 100%; margin: 0 0 12px; } .pl-cards button[hidden] { display: none; }
body.no-offline [data-view=downloads], body.no-offline #dlBtn, body.no-offline #npfDl, body.no-offline [data-h=dl], body.no-offline [data-go=downloads] { display: none !important; }
@media (max-width: 760px) {
  .pl-filter { display: none !important; }
  .sidebar > #nav { flex: 1 1 auto; width: 100%; }
}

.ly-diag { display: block; margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: left; }

#sortSel { align-self: flex-start; padding: 8px 12px; } #sortSel[hidden] { display: none; }

/* v2.1: equalizador, mix, letras */
#mixBtn.on { color: var(--accent); border-color: var(--accent); }
.eq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0 4px; }
.eq-b { display: flex; flex-direction: column; align-items: center; gap: 6px; } .eq-b input[type=range] { width: 100%; min-width: 0; } .eq-v { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .eq-n { font-size: 11px; color: var(--muted); }
.inst { padding-left: 18px; } .inst li { margin: 4px 0; }
.ly-tools { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lyrics-head .ly-tools button { font-size: 13px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); } .lyrics-head .ly-tools button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ly-search { margin: 8px 0; } .ly-search input { flex: 1; min-width: 0; } .ly-res { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 32vh; overflow-y: auto; }
.ly-res button { text-align: left; padding: 8px 10px; border-radius: 8px; background: var(--panel); color: var(--text); } .ly-res button:hover { background: var(--panel2); } .ly-res .sub { display: block; font-size: 12px; color: var(--muted); }
.lyrics { --ly-scale: 1; } .ly-line { font-size: calc(clamp(22px, 3.4vw, 38px) * var(--ly-scale)); } .ly-plain { font-size: calc(20px * var(--ly-scale)); }
.kara .ly-line { filter: blur(1.2px); opacity: .55; transition: filter .3s, opacity .3s, transform .25s; } .kara .ly-line.active { filter: none; opacity: 1; transform: scale(1.06);
  background: linear-gradient(90deg, var(--accent) var(--p, 0%), rgba(var(--ly-rgb), .6) var(--p, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kara .ly-line.past { opacity: .4; } .kara .ly-line { width: fit-content; max-width: 100%; }

.qlist .grip { touch-action: none; cursor: grab; padding: 8px 6px; color: var(--muted); user-select: none; } .qlist li.dragging { opacity: .5; } .qlist li.over { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.queue .row2 { padding: 8px 12px; flex-wrap: wrap; }

.urow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .urow .grow { flex: 1; min-width: 140px; } .pill-btn.sm { padding: 4px 10px; font-size: 12px; }
.devs .dev { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .usess { margin-left: 8px; }
.users li { flex-wrap: wrap; } .urow, .usess { width: 100%; }

.ly-edit textarea { width: 100%; box-sizing: border-box; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px; font: inherit; resize: vertical; }
.le-ctl { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.le-lines { list-style: none; margin: 0 0 10px; padding: 0; max-height: 42vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.le-lines li { display: flex; gap: 10px; padding: 7px 10px; cursor: pointer; } .le-lines li:hover { background: var(--panel2); } .le-lines li.cur { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: 2px solid var(--accent); outline-offset: -2px; }
.le-lines .tm { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 72px; }

/* v2.2: Início */
.home { display: flex; flex-direction: column; gap: 22px; padding-bottom: 20px; } .hello { margin: 0; font-size: 28px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.qtile { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 8px; overflow: hidden; text-align: left; padding: 0 12px 0 0; min-height: 56px; } .qtile:hover { background: var(--panel2); }
.qtile img, .qtile .qi { width: 56px; height: 56px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--panel2); font-size: 22px; color: var(--accent); } .qtile b { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hsec { display: flex; flex-direction: column; gap: 10px; } .hhead { display: flex; align-items: baseline; gap: 10px; } .hhead h3 { margin: 0; font-size: 20px; } .hhead .lnk { margin-left: auto; font-size: 13px; cursor: pointer; }
.hscroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.hcard { flex: none; width: 150px; text-align: left; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; } .hcard img { width: 150px; height: 150px; object-fit: cover; border-radius: 8px; background: var(--panel2); } .hcard:hover img { filter: brightness(1.1); }
.hcard .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hcard .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .hello { font-size: 24px; } .qgrid { grid-template-columns: 1fr 1fr; } .hcard, .hcard img { width: 130px; } .hcard img { height: 130px; } #nav button { font-size: 10.5px; } }

/* v2.3: envio de músicas e arrastar-e-soltar */
.upbox { position: fixed; right: 16px; bottom: 96px; z-index: 60; width: min(320px, calc(100vw - 32px)); background: var(--panel2); border: 1px solid var(--line, #333); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 30px #0007; }
.upbox .bar { height: 5px; border-radius: 3px; background: #ffffff22; margin-top: 8px; overflow: hidden; } .upbox .bar i { display: block; height: 100%; background: var(--accent); }
body.dropping::after { content: 'Solte para enviar à biblioteca'; position: fixed; inset: 12px; z-index: 90; display: grid; place-items: center; font-size: 22px; font-weight: 700; border: 3px dashed var(--accent); border-radius: 16px; background: #000a; color: #fff; pointer-events: none; }
@media (max-width: 760px) { .upbox { bottom: 130px; } }

.rm-dev { background: var(--panel); border-radius: 10px; padding: 10px 12px; margin: 8px 0; } .rm-top { display: flex; gap: 10px; align-items: center; } .rm-top img, .rm-ph { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--panel2); display: grid; place-items: center; flex: none; }
.rm-ctl { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .rm-ctl button { font-size: 18px; padding: 6px 10px; border-radius: 8px; background: var(--panel2); } .rm-ctl input { flex: 1; }

/* v2.3: "Tocando agora" no computador */
.npf-side { display: none; } .desk-only { display: inline-block; } @media (max-width: 760px) { .desk-only { display: none; } }
@media (min-width: 761px) {
  .np-full { position: fixed; inset: 0 0 var(--player-h) 0; z-index: 15; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 420px); grid-template-rows: auto 1fr auto auto; column-gap: 48px; padding: 18px 5vw; background: linear-gradient(var(--tint, #2a2a34), #0e0e12 85%); overflow: hidden; }
  .np-full.hidden { display: none; }
  .npf-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; } .npf-from { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #ffffffb0; }
  .npf-round { width: 40px; height: 40px; border-radius: 50%; background: #ffffff22; color: #fff; font-size: 18px; }
  .npf-art { grid-column: 1; grid-row: 2; min-height: 0; display: grid; place-items: center; } .npf-art img { height: min(100%, 56vh); max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 50px #0009; background: var(--panel2); }
  .npf-info { grid-column: 1; grid-row: 3; display: flex; align-items: center; gap: 12px; margin-top: 18px; } .npf-text { flex: 1; min-width: 0; } .npf-title { font-size: 32px; font-weight: 800; line-height: 1.1; } .npf-artist { font-size: 18px; color: #ffffffc8; } .npf-like { font-size: 28px; color: #fff; } .npf-like.on { color: var(--accent); }
  .npf-chips { grid-column: 1; grid-row: 4; display: flex; gap: 10px; align-items: center; margin-top: 12px; } .npf-chip { padding: 8px 20px; border-radius: 20px; background: #ffffff26; color: #fff; font-weight: 700; } .npf-badge { margin-left: auto; font-size: 11px; color: #ffffffa0; }
  .npf-seek, .npf-ctl, .npf-bot { display: none; }
  .npf-side { display: block; grid-column: 2; grid-row: 2 / 5; min-height: 0; overflow: auto; padding-top: 8px; } .npf-side h4 { margin: 0 0 10px; font-size: 15px; color: #ffffffc0; }
  .npf-side ol { list-style: none; margin: 0; padding: 0; } .npf-side li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; } .npf-side li:hover { background: #ffffff18; }
  .npf-side img { width: 44px; height: 44px; border-radius: 5px; object-fit: cover; flex: none; } .npf-side .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .npf-side .grow { min-width: 0; }
  body.np-open .sidebar { visibility: visible; }
}