:root {
  --bg: #090a09;
  --surface: #111310;
  --surface-2: #171a16;
  --surface-3: #20231e;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f4ee;
  --muted: #999f94;
  --muted-2: #6e746a;
  --accent: #c6f36a;
  --accent-dark: #7ea632;
  --coral: #ff826f;
  --blue: #7ba9ff;
  --violet: #b695f8;
  --amber: #facc15;
  --player-h: 92px;
  --sidebar-w: 232px;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
[data-theme="lime"] { --accent: #c6f36a; --accent-dark: #7ea632; --accent-rgb: 198,243,106; }
[data-theme="coral"] { --accent: #ff826f; --accent-dark: #cc5a4a; --accent-rgb: 255,130,111; }
[data-theme="blue"] { --accent: #7ba9ff; --accent-dark: #4a7ad9; --accent-rgb: 123,169,255; }
[data-theme="violet"] { --accent: #b695f8; --accent-dark: #8a67d6; --accent-rgb: 182,149,248; }
[data-theme="amber"] { --accent: #facc15; --accent-dark: #c9a410; --accent-rgb: 250,204,21; }
[data-theme="emerald"] { --accent: #6ee7b7; --accent-dark: #3b9e7a; --accent-rgb: 110,231,183; }
[data-theme="rose"] { --accent: #f472b6; --accent-dark: #c24d8a; --accent-rgb: 244,114,182; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 76% -10%, rgba(152, 190, 74, .08), transparent 28%),
    radial-gradient(circle at 38% 105%, rgba(123, 169, 255, .05), transparent 32%),
    var(--bg);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #111; }

.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 470, "GRAD" 0, "opsz" 24;
  font-size: 22px;
  line-height: 1;
}
.material-symbols-rounded.filled,
.filled > .material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

.ambient { position: fixed; pointer-events: none; filter: blur(90px); opacity: .16; z-index: -1; }
.ambient-one { width: 360px; height: 360px; background: #88aa36; right: -170px; top: 12%; }
.ambient-two { width: 260px; height: 260px; background: #39499e; left: 32%; bottom: -150px; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: calc(100vh - var(--player-h)); }
.sidebar {
  padding: 24px 17px 19px;
  border-right: 1px solid var(--line);
  background: rgba(10, 11, 9, .76);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-mark {
  width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px;
  background: var(--accent); color: #0c0e0a; transform: rotate(-4deg);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb),.16);
}
.brand-mark .material-symbols-rounded { font-size: 23px; font-variation-settings: "FILL" 1, "wght" 650; }
.brand-word { font: 800 19px/1 "Manrope", sans-serif; letter-spacing: -1.05px; }
.brand-word span { color: var(--accent); }
.sidebar > .brand { margin: 0 10px 34px; }

.nav-list { display: grid; gap: 5px; }
.nav-item {
  width: 100%; min-height: 43px; border: 0; border-radius: 11px; padding: 0 12px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  color: var(--muted); background: transparent; font-size: 14px; font-weight: 600; text-align: left;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.045); }
.nav-item.active { color: var(--text); background: var(--surface-3); }
.nav-item.active .material-symbols-rounded { color: var(--accent); font-variation-settings: "FILL" 1, "wght" 500; }
.nav-item:active { transform: scale(.98); }
.sidebar-section { border-top: 1px solid var(--line); margin-top: 23px; padding-top: 22px; }
.sidebar-label { color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; padding: 0 12px 9px; text-transform: uppercase; }
.nav-item.subtle { min-height: 39px; font-size: 13px; }
.nav-item.subtle .material-symbols-rounded { font-size: 20px; }
.nav-item.subtle .filled { color: var(--coral); }
.sidebar-foot { margin-top: auto; padding: 15px 12px 0; color: var(--muted-2); font-size: 11px; }
.sidebar-playlists { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.sidebar-foot small { display: block; margin-top: 5px; }
.live-dot { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.live-dot span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.workspace { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: 75px; flex: 0 0 75px; padding: 15px clamp(20px, 3vw, 42px);
  display: grid; grid-template-columns: minmax(280px, 600px) auto; justify-content: space-between; align-items: center; gap: 20px;
  background: linear-gradient(to bottom, rgba(9,10,9,.92), rgba(9,10,9,.45)); backdrop-filter: blur(18px); z-index: 8;
}
.mobile-brand { display: none; }
.search-form {
  position: relative; height: 44px; display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.045);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.search-form:focus-within { border-color: rgba(var(--accent-rgb),.5); background: var(--surface-2); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.06); }
.search-icon { position: absolute; left: 14px; color: var(--muted); font-size: 21px; }
.search-form input {
  width: 100%; height: 100%; padding: 0 85px 0 44px; border: 0; outline: 0;
  color: var(--text); background: transparent; font-size: 14px;
}
.search-form input::placeholder { color: #797f75; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-shortcut { position: absolute; right: 12px; min-width: 22px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted-2); background: var(--surface); font: 11px "DM Sans"; text-align: center; }
.search-clear { display: none; position: absolute; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; place-items: center; }
.search-clear .material-symbols-rounded { font-size: 18px; }
.search-form.has-value .search-clear { display: grid; }
.search-form.has-value .search-shortcut { display: none; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.icon-button {
  width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer;
  transition: color .17s, background .17s, transform .17s;
}
.icon-button:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,.07); }
.icon-button:active:not(:disabled) { transform: scale(.9); }
.icon-button:disabled { opacity: .36; cursor: default; }
.profile-button {
  width: 36px; height: 36px; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 50%;
  color: #18210e; background: var(--accent); cursor: pointer; font-size: 11px; font-weight: 800;
}

.main-content { flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3b4038 transparent; }
.main-content::-webkit-scrollbar, .side-sheet::-webkit-scrollbar { width: 7px; }
.main-content::-webkit-scrollbar-thumb, .side-sheet::-webkit-scrollbar-thumb { background: #353a32; border-radius: 10px; }
.view { display: none; min-height: 100%; padding: 8px clamp(20px, 3vw, 42px) 64px; }
.view.active { display: block; animation: view-in .3s ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }

.hero {
  position: relative; min-height: 344px; overflow: hidden; border: 1px solid var(--line); border-radius: 26px;
  display: grid; grid-template-columns: 1.02fr .98fr; margin: 5px 0 38px; padding: clamp(30px, 4vw, 54px);
  background:
    linear-gradient(105deg, rgba(12,14,11,.97) 0%, rgba(18,23,15,.91) 44%, rgba(32,43,20,.55) 100%),
    radial-gradient(circle at 83% 20%, rgba(var(--accent-rgb),.2), transparent 35%), #12150f;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-copy { position: relative; align-self: center; z-index: 2; }
.eyebrow, .section-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.7px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.eyebrow span { width: 22px; height: 1px; background: var(--accent); }
.hero h1 { margin: 0; font: 800 clamp(41px, 5.3vw, 69px)/.95 "Manrope", sans-serif; letter-spacing: -4px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { max-width: 455px; margin: 19px 0 25px; color: #a5ab9e; font-size: 14px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 10px; }
.primary-button, .soft-button, .text-button {
  border: 0; cursor: pointer; font-weight: 700; transition: transform .17s, background .17s, color .17s, opacity .17s;
}
.primary-button {
  min-height: 43px; padding: 0 19px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: #10140b; background: var(--accent); box-shadow: 0 9px 30px rgba(var(--accent-rgb),.13);
}
.primary-button:hover { background: #d5ff80; transform: translateY(-1px); }
.primary-button:active, .soft-button:active { transform: scale(.97); }
.primary-button .material-symbols-rounded { font-size: 22px; }
.primary-button.small { min-height: 38px; padding: 0 15px; font-size: 13px; }
.soft-button { min-height: 43px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: rgba(255,255,255,.045); }
.soft-button:hover { background: rgba(255,255,255,.09); }
.soft-button.small { min-height: 32px; padding: 0 12px; font-size: 12px; }
.soft-button.active { background: rgba(var(--accent-rgb),.12); border-color: rgba(var(--accent-rgb),.3); color: var(--accent); }
.text-button { display: inline-flex; align-items: center; gap: 4px; padding: 7px; color: var(--muted); background: transparent; font-size: 12px; }
.text-button:hover { color: var(--text); }
.text-button .material-symbols-rounded { font-size: 16px; }
.text-button.danger:hover { color: var(--coral); }

.hero-visual { position: absolute; inset: 0 0 0 48%; overflow: hidden; }
.hero-disc { position: absolute; width: 260px; height: 260px; right: 8%; top: 49%; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 3px, #23251f 4px 6px); box-shadow: 0 22px 70px #000; }
.hero-disc::before { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 14px #9abf4a; }
.hero-disc span { position: absolute; inset: 48%; border-radius: 50%; background: #0b0b0a; z-index: 1; }
.hero-art { position: absolute; width: 190px; aspect-ratio: 1; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.hero-art-main { right: 21%; top: 17%; transform: rotate(3deg); z-index: 2; }
.hero-art-back { right: 2%; top: 5%; transform: rotate(12deg); opacity: .47; filter: saturate(.75); }
.skeleton-art { background: linear-gradient(110deg, #22261f 30%, #31362d 45%, #22261f 60%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
.skeleton-row { min-height: 56px; border-radius: 10px; background: linear-gradient(110deg, #1a1e17 30%, #252b21 45%, #1a1e17 60%); background-size: 200% 100%; animation: shimmer 1.3s infinite; margin-bottom: 6px; }
.skeleton-text { height: 12px; border-radius: 6px; background: linear-gradient(110deg, #21251d 30%, #2c3128 45%, #21251d 60%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.hero-sticker { position: absolute; right: 6%; bottom: 8%; width: 63px; height: 63px; z-index: 3; display: grid; place-content: center; border-radius: 50%; transform: rotate(10deg); color: #111; background: var(--coral); font: 800 10px/1.03 "Manrope"; text-align: center; box-shadow: 0 9px 25px rgba(0,0,0,.3); }
.wave-lines { position: absolute; left: 13%; bottom: 7%; height: 45px; display: flex; align-items: center; gap: 5px; z-index: 3; }
.wave-lines i { display: block; width: 3px; border-radius: 3px; background: var(--accent); animation: wave 1s ease-in-out infinite alternate; }
.wave-lines i:nth-child(1), .wave-lines i:nth-child(7) { height: 10px; animation-delay: -.6s; }
.wave-lines i:nth-child(2), .wave-lines i:nth-child(6) { height: 22px; animation-delay: -.2s; }
.wave-lines i:nth-child(3), .wave-lines i:nth-child(5) { height: 38px; animation-delay: -.8s; }
.wave-lines i:nth-child(4) { height: 29px; animation-delay: -.4s; }
@keyframes wave { to { height: 7px; } }
@keyframes shimmer { to { background-position: -200% 0; } }

.content-section { margin: 0 0 39px; }
.content-section.no-pad { margin-top: 30px; }
.section-head { min-height: 47px; margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-head h2 { margin: 3px 0 0; font: 750 clamp(20px, 2vw, 24px)/1.2 "Manrope"; letter-spacing: -1px; }
.track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.track-row {
  position: relative; min-width: 0; min-height: 67px; margin: 0 -7px; padding: 7px;
  display: grid; grid-template-columns: 53px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  border: 0; border-radius: 12px; color: var(--text); background: transparent; text-align: left; cursor: pointer;
  transition: background .17s ease;
  animation: track-in .25s ease both;
}
.track-grid.stagger > .track-row { animation: track-in .3s ease both; }
.track-grid.stagger > .track-row:nth-child(1) { animation-delay: 0s; }
.track-grid.stagger > .track-row:nth-child(2) { animation-delay: .02s; }
.track-grid.stagger > .track-row:nth-child(3) { animation-delay: .04s; }
.track-grid.stagger > .track-row:nth-child(4) { animation-delay: .06s; }
.track-grid.stagger > .track-row:nth-child(5) { animation-delay: .08s; }
.track-grid.stagger > .track-row:nth-child(6) { animation-delay: .1s; }
.track-grid.stagger > .track-row:nth-child(7) { animation-delay: .12s; }
.track-grid.stagger > .track-row:nth-child(8) { animation-delay: .14s; }
.track-grid.stagger > .track-row:nth-child(9) { animation-delay: .16s; }
.track-grid.stagger > .track-row:nth-child(10) { animation-delay: .18s; }
.track-grid.stagger > .track-row:nth-child(11) { animation-delay: .2s; }
.track-grid.stagger > .track-row:nth-child(12) { animation-delay: .22s; }
.tr-swipe-actions { display: none; }
.pull-indicator { display: none; }
.import-dialog .import-url-row { display:flex;align-items:center;gap:10px;background:var(--bg-body);border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:16px;transition:border-color .15s; }
.import-dialog .import-url-row:focus-within { border-color:var(--accent); }
.import-dialog .import-url-row .material-symbols-rounded { color:var(--muted);font-size:20px; }
.import-dialog .import-url-row input { flex:1;border:0;background:transparent;color:var(--text);padding:13px 0;outline:0;font-size:14px; }
.import-dialog .import-progress { display:flex;align-items:center;gap:10px;padding:10px 0 16px;color:var(--muted);font-size:13px; }
.import-dialog .import-progress .material-symbols-rounded { font-size:18px;color:var(--accent); }
@keyframes track-in { from { opacity: 0; transform: translateY(4px); } }
.track-row:hover, .track-row.active { background: rgba(255,255,255,.055); }
.track-row.active { box-shadow: inset 2px 0 var(--accent); background: rgba(var(--accent-rgb),.045) !important; }
.track-row.just-activated { animation: track-glow .5s ease; }
@keyframes track-glow { 0% { background: rgba(var(--accent-rgb),.13); } 100% { background: rgba(var(--accent-rgb),.045); } }
.track-thumb { position: relative; width: 53px; height: 53px; overflow: hidden; border-radius: 9px; background: var(--surface-3); }
.track-thumb img { width: 100%; height: 100%; object-fit: cover; }
.track-play-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: white; background: rgba(0,0,0,.44); opacity: 0; transition: opacity .17s; }
.track-row:hover .track-play-overlay, .track-row.active .track-play-overlay { opacity: 1; }
.track-play-overlay .material-symbols-rounded { font-size: 24px; font-variation-settings: "FILL" 1; }
.track-copy { min-width: 0; }
.track-copy strong, .track-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-copy strong { font-size: 13px; font-weight: 650; }
.track-row.active .track-copy strong { color: var(--accent); }
.track-copy span { margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.track-actions { display: flex; align-items: center; gap: 2px; opacity: .4; }
.track-row:hover .track-actions { opacity: 1; }
.mini-action { width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.mini-action:hover { color: var(--text); background: var(--surface-3); }
.mini-action .material-symbols-rounded { font-size: 19px; }
.track-duration { min-width: 32px; color: var(--muted-2); font-size: 11px; text-align: right; }

.mood-row { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); gap: 12px; }
.mood-card { min-height: 145px; border: 0; border-radius: 17px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: #151713; text-align: left; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.mood-card:hover { transform: translateY(-3px) rotate(-.4deg); filter: brightness(1.04); }
.mood-card .material-symbols-rounded { margin-bottom: auto; font-size: 29px; font-variation-settings: "FILL" 1, "wght" 500; }
.mood-card b { font: 750 15px "Manrope"; }
.mood-card small { margin-top: 3px; color: rgba(15,17,13,.62); font-size: 11px; }
.mood-lime { background: var(--accent); }
.mood-coral { background: var(--coral); }
.mood-blue { background: var(--blue); }
.mood-violet { background: var(--violet); }

.media-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(145px, 1fr); grid-template-rows: 1fr; gap: 16px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.media-shelf::-webkit-scrollbar { display: none; }
.media-card { min-width: 0; max-width: 210px; border: 0; padding: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; animation: media-in .35s ease both; }
.media-shelf > .media-card:nth-child(1) { animation-delay: 0s; }
.media-shelf > .media-card:nth-child(2) { animation-delay: .04s; }
.media-shelf > .media-card:nth-child(3) { animation-delay: .08s; }
.media-shelf > .media-card:nth-child(4) { animation-delay: .12s; }
.media-shelf > .media-card:nth-child(5) { animation-delay: .16s; }
.media-shelf > .media-card:nth-child(6) { animation-delay: .2s; }
.media-shelf > .media-card:nth-child(7) { animation-delay: .24s; }
.media-shelf > .media-card:nth-child(8) { animation-delay: .28s; }
@keyframes media-in { from { opacity: 0; transform: translateY(6px); } }
.media-art { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.media-card.round .media-art { border-radius: 50%; }
.media-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.media-card:hover .media-art img { transform: scale(1.035); filter: brightness(.8); }
.card-play { position: absolute; right: 9px; bottom: 9px; width: 39px; height: 39px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #111; background: var(--accent); box-shadow: 0 8px 22px rgba(0,0,0,.45); opacity: 0; transform: translateY(6px); transition: .2s ease; }
.media-card:hover .card-play { opacity: 1; transform: none; }
.card-play .material-symbols-rounded { font-variation-settings: "FILL" 1; }
.media-card strong, .media-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card strong { margin: 10px 2px 0; font-size: 13px; }
.media-card span { margin: 4px 2px 0; color: var(--muted); font-size: 11px; }
.media-type-badge { position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 999px; color: #eee; background: rgba(10,10,10,.7); backdrop-filter: blur(8px); font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.media-art.placeholder-art { display: grid; place-items: center; background: linear-gradient(145deg, #262d20, #10130f); }
.media-art.placeholder-art .material-symbols-rounded { color: var(--accent); font-size: 48px; }

.view-heading { padding: 24px 0 20px; }
.view-heading h1 { margin: 5px 0 0; font: 800 clamp(31px, 4vw, 48px)/1.05 "Manrope"; letter-spacing: -2.7px; }
.view-heading p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.library-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.filter-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 25px; padding-bottom: 2px; scrollbar-width: none; }
.filter-tabs button, .lyrics-toggle button, .sheet-tabs button {
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; font-size: 12px; font-weight: 650;
}
.filter-tabs button { min-height: 35px; padding: 0 15px; white-space: nowrap; }
.filter-tabs button:hover, .filter-tabs button.active { border-color: var(--line-strong); color: var(--text); background: var(--surface-3); }
.filter-tabs button.active { border-color: rgba(var(--accent-rgb),.35); color: var(--accent); }
.search-section { margin-bottom: 35px; animation: view-in .25s ease both; }
.search-section:nth-child(2) { animation-delay: .05s; }
.search-section:nth-child(3) { animation-delay: .1s; }
.search-section:nth-child(4) { animation-delay: .15s; }
.search-section .section-head { margin-bottom: 9px; }
.result-count { color: var(--muted-2); font-size: 11px; }
.search-results .track-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.search-results .media-shelf { grid-auto-columns: minmax(145px, 190px); }

.empty-state { min-height: 330px; border: 1px dashed var(--line-strong); border-radius: 20px; display: grid; place-items: center; align-content: center; padding: 35px; text-align: center; }
.empty-state.compact { margin-top: 10px; }
.empty-state > .material-symbols-rounded { color: var(--accent); font-size: 42px; }
.empty-state h3 { margin: 13px 0 4px; font: 750 20px "Manrope"; }
.empty-state p { max-width: 440px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.search-history { margin-top: 16px; }
.search-history .section-kicker { display: block; margin-bottom: 6px; font-size: 9px; }
.suggestion-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 20px; }
.suggestion-row button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-2); cursor: pointer; font-size: 11px; }
.suggestion-row button:hover { color: var(--text); border-color: var(--line-strong); }
.error-state .material-symbols-rounded { color: var(--coral); }

.loading-block { display: grid; gap: 10px; }


.library-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.stat-card b { display: block; font: 750 23px "Manrope"; }
.stat-card span { color: var(--muted); font-size: 11px; }
.playlist-library-section { padding-bottom: 40px; }
.library-list { border-top: 1px solid var(--line); }
.library-list .track-row { width: calc(100% + 14px); grid-template-columns: 48px minmax(0, 1fr) minmax(90px, .5fr) auto; }
.library-list .track-thumb { width: 48px; height: 48px; }
.library-album { overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }

.side-sheet {
  position: fixed; z-index: 80; top: 0; right: 0; bottom: var(--player-h); width: min(390px, 94vw); overflow-y: auto;
  border-left: 1px solid var(--line); background: rgba(15,17,14,.96); backdrop-filter: blur(28px); box-shadow: var(--shadow);
  transform: translateX(102%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility .28s;
}
.side-sheet.open { transform: translateX(0); visibility: visible; }
.sheet-scrim { position: fixed; z-index: 70; inset: 0 0 var(--player-h); visibility: hidden; opacity: 0; background: rgba(0,0,0,.32); backdrop-filter: blur(2px); transition: .25s; }
.sheet-scrim.show { visibility: visible; opacity: 1; }
.sheet-top { position: sticky; top: 0; z-index: 3; height: 67px; padding: 13px 14px 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: rgba(15,17,14,.86); backdrop-filter: blur(16px); }
.sheet-tabs { display: flex; gap: 6px; }
.sheet-tabs button { min-height: 33px; padding: 0 13px; border-color: transparent; }
.sheet-tabs button.active { color: #14160f; background: var(--accent); }
.sheet-tabs span { margin-left: 3px; opacity: .7; }
.sheet-panel { display: none; padding: 24px 20px; }
.sheet-panel.active { display: block; animation: view-in .2s ease; }
.queue-tools, .lyrics-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 17px; }
.queue-tools h2, .lyrics-head h2 { margin: 3px 0 0; font: 750 23px "Manrope"; letter-spacing: -1px; }
.queue-list { display: grid; gap: 3px; }
.queue-item { position: relative; min-width: 0; padding: 7px; margin: 0 -7px; border-radius: 11px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; cursor: pointer; }
.queue-item:hover { background: rgba(255,255,255,.045); }
.queue-item.current { background: rgba(var(--accent-rgb),.07); box-shadow: inset 2px 0 var(--accent); }
.queue-item.dragging { opacity: .4; }
.queue-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; background: var(--surface-3); }
.queue-item-copy { min-width: 0; }
.queue-item-copy strong, .queue-item-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.queue-item-copy strong { font-size: 12px; }
.queue-item-copy span { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.queue-item.current strong { color: var(--accent); }
.queue-eq { display: flex; align-items: flex-end; gap: 2px; width: 17px; height: 16px; }
.queue-eq i { width: 3px; height: 50%; border-radius: 2px; background: var(--accent); animation: eq .7s ease-in-out infinite alternate; }
.queue-eq i:nth-child(2) { height: 100%; animation-delay: -.4s; }
.queue-eq i:nth-child(3) { height: 70%; animation-delay: -.2s; }
@keyframes eq { to { height: 18%; } }
.queue-autoplay { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.025); }
.queue-autoplay b, .queue-autoplay small { display: block; }
.queue-autoplay b { font-size: 12px; }
.queue-autoplay small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: relative; width: 37px; height: 21px; display: block; border-radius: 999px; background: var(--surface-3); cursor: pointer; transition: .2s; }
.switch span::after { content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; border-radius: 50%; background: var(--muted); transition: .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { left: 19px; background: #14170f; }

.lyrics-toggle { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--surface); }
.lyrics-toggle button { min-height: 28px; padding: 0 10px; border: 0; font-size: 10px; }
.lyrics-toggle button.active { color: var(--text); background: var(--surface-3); }
.lyrics-toggle-wrap { display: flex; align-items: center; gap: 6px; }
#changeLyricsBtn { width: 30px; height: 30px; }
#changeLyricsBtn .material-symbols-rounded { font-size: 18px; }
.lyrics-meta { min-height: 20px; margin-bottom: 13px; color: var(--muted); font-size: 11px; }
.lyrics-content { min-height: calc(100vh - 220px); padding: 4px 1px 50px; scroll-behavior: smooth; }
.lyrics-line { display: block; width: 100%; border: 0; padding: 7px 0; color: #7c8278; background: transparent; text-align: left; font: 700 21px/1.35 "Manrope"; letter-spacing: -.5px; cursor: pointer; transition: color .35s, transform .35s, opacity .35s; scroll-margin: 140px; }
.lyrics-line:hover { color: #b9bfb3; }
.lyrics-line.active { color: var(--text); transform: translateX(5px); }
.lyrics-line.active::before { content: ""; display: inline-block; width: 12px; height: 3px; margin: 0 8px 5px 0; border-radius: 4px; background: var(--accent); }
.plain-lyrics { white-space: pre-wrap; color: #d4d7d0; font: 600 18px/1.65 "Manrope"; }
.lyrics-placeholder { min-height: 300px; display: grid; place-items: center; align-content: center; color: var(--muted-2); text-align: center; }
.lyrics-placeholder .material-symbols-rounded { color: var(--accent); font-size: 42px; }
.lyrics-placeholder p { max-width: 250px; margin: 12px auto 0; font-size: 12px; line-height: 1.45; }

.player {
  position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; height: var(--player-h); padding: 11px 19px;
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(390px, 1.35fr) minmax(220px, 1fr); align-items: center; gap: 18px;
  border-top: 1px solid var(--line); background: rgba(13,15,12,.96); backdrop-filter: blur(30px); box-shadow: 0 -15px 45px rgba(0,0,0,.18);
}
.player::before { content: ""; position: absolute; left: 0; top: -1px; width: var(--progress, 0%); height: 1px; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb),.55); pointer-events: none; transition: width .25s linear; }
.player.is-playing::before { box-shadow: 0 0 14px rgba(var(--accent-rgb),.7), 0 0 40px rgba(var(--accent-rgb),.15); }
.player-track { min-width: 0; display: flex; align-items: center; gap: 11px; }
.player-art { position: relative; width: 58px; height: 58px; flex: 0 0 auto; overflow: hidden; border: 0; border-radius: 9px; padding: 0; display: grid; place-items: center; color: var(--muted); background: var(--surface-3); cursor: pointer; transition: transform .17s, box-shadow .17s; }
.player-art:hover { transform: scale(1.04); }
.player-art:active { transform: scale(.96); }
.player-art img { display: none; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.player-art.has-image img { display: block; animation: art-fade .35s ease; }
.player-art.has-image .art-placeholder { display: none; }
@keyframes art-fade { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.player.is-playing .player-art.has-image { box-shadow: 0 0 0 1.5px var(--accent), 0 0 20px rgba(var(--accent-rgb),.18); border-radius: 9px; animation: art-pulse 3s ease-in-out infinite; }
@keyframes art-pulse { 0%, 100% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 16px rgba(var(--accent-rgb),.15); } 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 28px rgba(var(--accent-rgb),.25); } }
.player-eq-bars { display: none; position: absolute; right: -5px; bottom: -3px; gap: 2px; align-items: flex-end; height: 16px; }
.player.is-playing .player-eq-bars { display: flex; }
.player-eq-bars i { width: 3px; border-radius: 2px; background: var(--accent); animation: eq .7s ease-in-out infinite alternate; }
.player-eq-bars i:nth-child(1) { height: 45%; animation-delay: -.5s; }
.player-eq-bars i:nth-child(2) { height: 90%; animation-delay: -.2s; }
.player-eq-bars i:nth-child(3) { height: 60%; animation-delay: -.7s; }
.player-titles { min-width: 0; flex: 1; }
.player-titles { position: relative; overflow: hidden; }
.player-titles strong, .player-titles span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .25s ease, transform .25s ease; }
.player-titles strong { font-size: 13px; }
.player-titles.track-changed strong, .player-titles.track-changed span { animation: title-slide .3s ease; }
@keyframes title-slide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.player-titles span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.like-button.active { color: var(--coral); }
.like-button.active .material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 500; }
.like-button:active .material-symbols-rounded { animation: like-pop .3s ease; }
.pl-add-wrap { position: relative; }
.pl-add-dropdown { position: absolute; bottom: 100%; right: 0; z-index: 120; min-width: 200px; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); display: none; scrollbar-width: thin; scrollbar-color: #3b4038 transparent; }
.pl-add-dropdown.open { display: block; animation: view-in .15s ease; }
.pl-add-dropdown::-webkit-scrollbar { width: 5px; }
.pl-add-dropdown::-webkit-scrollbar-thumb { background: #353a32; border-radius: 10px; }
.pl-add-opt { width: 100%; border: 0; padding: 8px 10px; border-radius: 9px; display: flex; align-items: center; gap: 9px; color: var(--text); background: transparent; cursor: pointer; text-align: left; font-size: 12px; }
.pl-add-opt:hover { background: rgba(255,255,255,.06); }
.pl-add-opt .material-symbols-rounded { font-size: 17px; color: var(--muted-2); }
.pl-add-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-add-new { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; color: var(--accent); }
@keyframes like-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.player-center { min-width: 0; align-self: center; }
.transport { height: 40px; display: flex; align-items: center; justify-content: center; gap: 17px; }
.transport-small { width: 29px; height: 29px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }
.transport-small:hover { color: var(--text); }
.transport-small.active { color: var(--accent); }
.transport-small .material-symbols-rounded { font-size: 20px; }
.play-button { width: 39px; height: 39px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #111; background: var(--text); cursor: pointer; box-shadow: 0 7px 20px rgba(0,0,0,.25); transition: transform .17s, background .17s; }
.play-button:hover:not(:disabled) { transform: scale(1.06); background: var(--accent); }
.play-button:disabled { opacity: .35; cursor: default; }
.play-button .material-symbols-rounded { font-size: 25px; }
.timeline { display: grid; grid-template-columns: 35px 1fr 35px; align-items: center; gap: 8px; color: var(--muted-2); font-size: 9px; user-select: none; }
.timeline span:last-child { text-align: right; }
.timeline .range { cursor: pointer; }
.timeline .range::-webkit-slider-runnable-track { height: 3px; }
.timeline .range::-moz-range-track { height: 3px; }
.range { --range-value: 0%; width: 100%; height: 13px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 3px; border-radius: 5px; background: linear-gradient(to right, var(--text) var(--range-value), #3a3e37 var(--range-value)); }
.range::-moz-range-track { height: 3px; border-radius: 5px; background: #3a3e37; }
.range::-moz-range-progress { height: 3px; border-radius: 5px; background: var(--text); }
.range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; border: 0; border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--text); opacity: .75; transition: opacity .15s, transform .15s, box-shadow .15s; box-shadow: 0 0 6px rgba(0,0,0,.5); }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--text); opacity: .75; box-shadow: 0 0 6px rgba(0,0,0,.5); }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb, .range:focus-visible::-webkit-slider-thumb { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(242,244,238,.15); }
.range:hover::-moz-range-thumb, .range:active::-moz-range-thumb { opacity: 1; transform: scale(1.15); }
.range:disabled { cursor: default; opacity: .45; }
.player-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1px; }
.player-actions .icon-button { width: 34px; height: 34px; }
.player-actions .icon-button.active { color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.volume-slider { width: 75px; }

.youtube-engine { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.detail-dialog, .mini-dialog { color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.detail-dialog::backdrop, .mini-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(8px); }
.detail-dialog { width: min(860px, calc(100vw - 30px)); max-height: 90vh; padding: 0; border-radius: 23px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3b4038 transparent; }
.detail-dialog::-webkit-scrollbar { width: 6px; }
.detail-dialog::-webkit-scrollbar-thumb { background: #353a32; border-radius: 10px; }
.detail-dialog[open] { animation: dialog-in .22s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dialog-close { position: sticky; float: right; top: 14px; right: 14px; z-index: 4; color: var(--text); background: rgba(10,10,10,.55); backdrop-filter: blur(8px); }
.detail-hero { min-height: 220px; padding: 42px 42px 32px; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 30px; align-items: end; background: linear-gradient(160deg, #2b3423, #121510); }
.detail-art { width: 190px; aspect-ratio: 1; object-fit: cover; border-radius: 15px; background: var(--surface-3); box-shadow: 0 20px 50px rgba(0,0,0,.38); }
.detail-art.artist { border-radius: 50%; }
.detail-art.placeholder-art { display: grid; place-items: center; background: linear-gradient(145deg, #262d20, #10130f); }
.detail-art.placeholder-art .material-symbols-rounded { color: var(--accent); font-size: 56px; }
.detail-copy { min-width: 0; }
.detail-copy .section-kicker { margin-bottom: 7px; }
.detail-copy h2 { margin: 0; font: 800 clamp(26px, 4.5vw, 46px)/1 "Manrope"; letter-spacing: -2.5px; }
.detail-copy p { margin: 10px 0 0; color: #bdc2b8; font-size: 13px; }
.detail-copy .primary-button { margin-top: 20px; }
.detail-body { padding: 22px 34px 36px; }
.detail-description { margin: 0 0 22px; padding: 14px 18px; border-left: 2px solid var(--accent-dark); color: var(--muted); font-size: 13px; line-height: 1.6; background: rgba(255,255,255,.02); border-radius: 0 10px 10px 0; }
.detail-loading { min-height: 400px; display: grid; place-items: center; color: var(--muted); }
.detail-tracks { display: grid; gap: 1px; }
.detail-tracks .track-row:nth-child(1) { animation-delay: .02s; }
.detail-tracks .track-row:nth-child(2) { animation-delay: .04s; }
.detail-tracks .track-row:nth-child(3) { animation-delay: .06s; }
.detail-tracks .track-row:nth-child(4) { animation-delay: .08s; }
.detail-tracks .track-row:nth-child(5) { animation-delay: .1s; }
.detail-tracks .track-row:nth-child(6) { animation-delay: .12s; }
.detail-tracks .track-row:nth-child(7) { animation-delay: .14s; }
.detail-tracks .track-row:nth-child(8) { animation-delay: .16s; }
.detail-tracks .track-row:nth-child(9) { animation-delay: .18s; }
.detail-tracks .track-row:nth-child(10) { animation-delay: .2s; }
.detail-tracks .track-row:nth-child(n+11) { animation-delay: .22s; }
.detail-tracks .track-row { min-height: 58px; padding: 5px 8px; margin: 0 -8px; grid-template-columns: 44px minmax(0, 1fr) auto; border-radius: 10px; }
.detail-tracks .track-thumb { width: 44px; height: 44px; border-radius: 7px; }
.detail-tracks .track-row .track-actions { opacity: 0; }
.detail-tracks .track-row:hover .track-actions, .detail-tracks .track-row:focus-within .track-actions { opacity: 1; }
.detail-tracks .track-copy strong { font-size: 12.5px; }
.detail-tracks .track-copy span { font-size: 11px; }
.spinner { width: 23px; height: 23px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mini-dialog { width: min(400px, calc(100vw - 30px)); padding: 28px; border-radius: 20px; }
.mini-dialog form { margin: 0; }
.dialog-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #111; background: var(--accent); }
.mini-dialog h2 { margin: 17px 0 5px; font: 750 23px "Manrope"; letter-spacing: -1px; }
.mini-dialog p { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mini-dialog label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.mini-dialog input { width: 100%; height: 44px; border: 1px solid var(--line-strong); border-radius: 11px; outline: 0; padding: 0 12px; color: var(--text); background: #0c0e0b; }
.mini-dialog input:focus { border-color: var(--accent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog-actions .primary-button, .dialog-actions .soft-button { min-height: 39px; }
.playlist-dialog { width: min(420px, calc(100vw - 30px)); }
.playlist-picker { display: grid; gap: 4px; max-height: 200px; overflow-y: auto; margin: 0 0 10px; scrollbar-width: thin; scrollbar-color: #3b4038 transparent; }
.playlist-picker::-webkit-scrollbar { width: 5px; }
.playlist-picker::-webkit-scrollbar-thumb { background: #353a32; border-radius: 10px; }
.playlist-option { width: 100%; border: 0; padding: 10px 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; color: var(--text); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: background .15s; }
.playlist-option:hover { background: rgba(255,255,255,.07); }
.playlist-option .pl-opt-thumb { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; background: var(--surface-3); flex: 0 0 auto; }
.playlist-option .pl-opt-icon { width: 36px; height: 36px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); flex: 0 0 auto; }
.playlist-option .pl-opt-icon .material-symbols-rounded { font-size: 18px; }
.playlist-option .pl-opt-copy { min-width: 0; flex: 1; }
.playlist-option .pl-opt-copy strong { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-option .pl-opt-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.playlist-option .pl-opt-check { color: var(--accent); opacity: 0; transition: opacity .15s; }
.playlist-option .pl-opt-check.show { opacity: 1; }
.playlist-name-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.playlist-name-row .material-symbols-rounded { color: var(--muted-2); font-size: 20px; flex: 0 0 auto; }
.playlist-name-row input { flex: 1; border: 0; outline: 0; padding: 0; color: var(--text); background: transparent; font-size: 13px; min-width: 0; }
.playlist-name-row input::placeholder { color: var(--muted-2); }
.playlist-name-row:focus-within { border-color: var(--accent-dark); }
#playlistTrackListDialog { width: min(480px, calc(100vw - 30px)); padding: 18px 20px 14px; border-radius: 18px; }
#playlistTrackListDialog[open] { animation: dialog-in .22s ease; }
#playlistTrackListDialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(8px); }

.toast-region { position: fixed; z-index: 500; right: 20px; bottom: calc(var(--player-h) + 18px); display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 220px; max-width: 340px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 12px; display: flex; align-items: center; gap: 9px; color: var(--text); background: rgba(27,30,25,.95); backdrop-filter: blur(15px); box-shadow: 0 15px 40px rgba(0,0,0,.3); font-size: 12px; animation: toast-in .3s ease both; white-space: nowrap; }
.toast.out { animation: toast-out .25s ease both; }
.toast .material-symbols-rounded { color: var(--accent); font-size: 19px; }
.toast.error .material-symbols-rounded { color: var(--coral); }
.toast.success .material-symbols-rounded { color: var(--emerald, #6ee7b7); }
.toast.warning .material-symbols-rounded { color: #fbbf24; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.connection-banner { position: fixed; z-index: 210; top: 12px; left: 50%; transform: translate(-50%, -150%); padding: 9px 14px; border: 1px solid #79504a; border-radius: 999px; display: flex; align-items: center; gap: 7px; color: #ffd4cc; background: #2b1916; box-shadow: var(--shadow); font-size: 11px; transition: transform .25s; }
.connection-banner.show { transform: translate(-50%, 0); }
.connection-banner .material-symbols-rounded { font-size: 17px; }
.mobile-nav { display: none; }
.mobile-only { display: none; }
@media (max-width: 760px) {
  .mobile-only { display: inline-flex; }
}

@media (max-width: 1040px) {
  :root { --sidebar-w: 76px; }
  .sidebar { padding-left: 11px; padding-right: 11px; align-items: center; }
  .sidebar > .brand { margin-left: 0; margin-right: 0; }
  .sidebar .brand-word, .nav-item span:not(.material-symbols-rounded), .sidebar-label, .sidebar-foot { display: none; }
  .nav-list, .sidebar-section { width: 100%; }
  .nav-item { justify-content: center; padding: 0; }
  .sidebar-section { margin-top: 18px; padding-top: 18px; }
  .hero { grid-template-columns: 1.2fr .8fr; }
  .hero-visual { left: 54%; }
  .hero-art-main { right: 12%; }
  .hero-art-back, .hero-sticker { display: none; }
  .mood-row { grid-template-columns: repeat(2, 1fr); }
  .mood-card { min-height: 125px; }
  .player { grid-template-columns: minmax(190px, .9fr) minmax(330px, 1.25fr) minmax(160px, .7fr); gap: 8px; }
  .desktop-only { display: none; }
}

@media (max-width: 760px) {
  :root { --player-h: 72px; --nav-h: 61px; }
  body { overflow: hidden; }
  .app-shell { display: block; height: calc(100vh - var(--player-h) - 12px); }
  .sidebar { display: none; }
  .workspace { height: 100%; }
  .topbar { height: auto; min-height: 70px; flex-basis: auto; padding: 11px 15px; grid-template-columns: auto 1fr; gap: 12px; }
  .mobile-brand { display: inline-flex; }
  .mobile-brand .brand-word { display: none; }
  .mobile-brand .brand-mark { width: 37px; height: 37px; }
  .top-actions { display: none; }
  .search-form { height: 42px; min-width: 0; }
  .search-form input { padding-right: 39px; font-size: 13px; }
  .search-shortcut { display: none; }
  .view { padding: 4px 15px 135px; }
  .hero { min-height: 390px; padding: 31px 25px; margin-top: 3px; grid-template-columns: 1fr; align-items: end; }
  .hero-copy { align-self: end; }
  .hero h1 { font-size: clamp(42px, 13vw, 57px); letter-spacing: -3.5px; }
  .hero p { max-width: 310px; margin: 15px 0 20px; }
  .hero-visual { inset: 0; opacity: .58; }
  .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #11150d 3%, transparent 70%); z-index: 3; }
  .hero-disc { width: 220px; height: 220px; right: -44px; top: 33%; }
  .hero-art-main { width: 150px; right: 11%; top: 8%; }
  .hero .wave-lines { display: none; }
  .hero-actions { position: relative; z-index: 5; }
  .track-grid, .search-results .track-grid { grid-template-columns: 1fr; }
  .track-row { min-height: 64px; position: relative; overflow: hidden; }
  .track-grid .track-row:nth-child(n+7) { display: none; }
  .mood-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(155px, 61vw); grid-template-columns: unset; overflow-x: auto; scrollbar-width: none; margin-right: -15px; padding-right: 15px; }
  .mood-row::-webkit-scrollbar { display: none; }
  .mood-card { min-height: 134px; }
  .media-shelf { grid-auto-columns: 42vw; margin-right: -15px; padding-right: 15px; }
  .section-head h2 { font-size: 21px; }
  .view-heading { padding-top: 17px; }
  .view-heading h1 { font-size: 34px; }
  .library-heading { align-items: flex-start; gap: 14px; }
  .library-heading .primary-button { padding: 0 12px; }
  .library-stats { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .stat-card { padding: 12px 10px; }
  .stat-card b { font-size: 19px; }
  .library-list .track-row { grid-template-columns: 45px minmax(0,1fr) auto; }
  .library-album { display: none; }
  .mobile-nav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 61px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: rgba(13,15,12,.95); backdrop-filter: blur(22px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mobile-nav button { position: relative; border: 0; display: grid; place-content: center; gap: 2px; color: var(--muted-2); background: transparent; transition: color .2s; }
  .mobile-nav button.active { color: var(--accent); }
  .mobile-nav button.active::after { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; border-radius: 2px; background: var(--accent); animation: nav-indicator .2s ease; }
  .mobile-nav .material-symbols-rounded { margin: auto; font-size: 21px; transition: transform .2s; }
  .mobile-nav button.active .material-symbols-rounded { font-variation-settings: "FILL" 1; transform: scale(1.1); }
  .mobile-nav small { font-size: 9px; }
  @keyframes nav-indicator { from { width: 0; opacity: 0; } to { width: 20px; opacity: 1; } }
  .player {
    position: fixed; left: 8px; right: 8px; width: auto;
    bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.5); z-index: 55;
    height: var(--player-h); padding: 8px 11px;
    grid-template-columns: minmax(0,1fr) auto; gap: 7px;
  }
  .player-track { gap: 9px; }
  .player-art { width: 49px; height: 49px; }
  .player-titles strong { font-size: 12px; }
  .like-button { width: 34px; height: 34px; }
  .player-center { display: contents; }
  .transport { height: auto; gap: 2px; }
  .transport-small { display: none; }
  .play-button { width: 39px; height: 39px; }
  .player-actions { display: none; }
  .player-actions .icon-button.vol-mobile { display: inline-flex; }
  .player .timeline { display: none; }
  .player .player-center { transition: opacity .2s ease, max-height .3s ease; opacity: 0; max-height: 0; overflow: hidden; }
  .player.expanded .timeline { display: grid; }
  .player.expanded .transport-small { display: grid; }
  .player.expanded { height: auto; padding-bottom: 13px; gap: 4px; grid-template-columns: 1fr; max-height: 50vh; overflow-y: auto; }
  .player.expanded .player-track { grid-column: 1; }
  .player.expanded .player-center { display: block; opacity: 1; max-height: 100px; }
  .player.expanded .transport { margin-top: 6px; }
  .player.expanded .player::before { bottom: 0; top: auto; }
  .player::before { height: 2px; }
  .player-track { -webkit-tap-highlight-color: transparent; }
  .player-art { touch-action: pan-x; }
  .pull-indicator {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%);
    z-index: 10; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line-strong);
    opacity: 0; transition: opacity .2s, transform .3s ease;
    box-shadow: var(--shadow);
  }
  .pull-indicator.show { opacity: 1; transform: translateX(-50%) translateY(8px); }
  .pull-indicator .material-symbols-rounded { font-size: 18px; color: var(--muted); }
  .pull-indicator.refreshing .material-symbols-rounded { animation: spin .7s linear infinite; }
  .side-sheet { bottom: 0; width: 100%; border-left: 0; border-radius: 20px 20px 0 0; top: auto; max-height: 90vh; transform: translateY(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .side-sheet.open { transform: translateY(0); }
  .side-sheet.snap-40 { transform: translateY(0); max-height: 40vh; }
  .side-sheet.snap-90 { transform: translateY(0); max-height: 90vh; }
  .sheet-scrim { bottom: 0; }
  .sheet-top::before { content: ""; position: absolute; width: 37px; height: 4px; top: 7px; left: 50%; transform: translateX(-50%); border-radius: 4px; background: #444a40; transition: background .2s; }
  .side-sheet.open .sheet-top::before { background: #5d6557; }
  .sheet-top { height: 69px; padding-top: 18px; }
  .lyrics-content { min-height: calc(40vh - 205px); min-height: calc(40dvh - 205px); }
  .toast-region { right: 11px; left: 11px; bottom: calc(var(--nav-h) + 12px + var(--player-h) + 18px); }
  .toast { width: 100%; max-width: none; }
  .detail-dialog { width: 100%; max-width: none; max-height: 100vh; border-radius: 20px 20px 0 0; }
  .detail-hero { min-height: auto; padding: 30px 20px 22px; grid-template-columns: 110px minmax(0,1fr); gap: 16px; }
  .detail-art { width: 110px; }
  .detail-copy h2 { font-size: 26px; letter-spacing: -1.8px; }
  .detail-body { padding: 16px 18px 28px; }
  .detail-tracks .track-row { min-height: 54px; padding: 4px 8px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .detail-tracks .track-thumb { width: 40px; height: 40px; }
  #playlistTrackListDialog { width: 100%; max-width: none; max-height: 100vh; border-radius: 20px 20px 0 0; }
  #playlistTrackListDialog > div { max-height: 88vh; }
  /* Swipe actions on track rows */
  .tr-swipe-actions {
    position: absolute; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; gap: 8px; padding: 0 14px 0 28px;
    transform: translateX(100%); transition: transform .2s ease; z-index: 2;
    background: linear-gradient(to left, var(--bg-body) 50%, transparent);
    pointer-events: none;
  }
  .track-row.swiping .tr-swipe-actions {
    transform: translateX(0); pointer-events: auto;
  }
  .track-row.swiping > :not(.tr-swipe-actions) {
    transform: translateX(-80px); transition: transform .2s ease;
  }
  .tr-swipe-actions button {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--surface); color: var(--muted);
    transition: color .15s, transform .15s, background .15s;
    font-size: 18px; -webkit-tap-highlight-color: transparent;
  }
  .tr-swipe-actions button:active { transform: scale(.88); }
  .tr-swipe-actions .swipe-like.active { color: var(--coral); background: rgba(239,83,80,.08); }
  /* Bigger touch targets */
  .track-row { min-height: 66px; }
  .track-thumb { width: 48px; height: 48px; }
  .track-actions .mini-action { width: 38px; height: 38px; }
  .track-download-btn { width: 38px; height: 38px; }
  /* Safe-area for mobile */
  .view { padding-bottom: calc(135px + env(safe-area-inset-bottom, 0px)); }
  .main-content { position: relative; }
  .kbd-hint { bottom: calc(var(--nav-h) + var(--player-h) + 30px); }
}

@media (max-width: 430px) {
  .hero { min-height: 365px; padding: 25px 21px; }
  .hero h1 { font-size: 44px; }
  .hero p { font-size: 12px; }
  .hero-actions .soft-button { display: none; }
  .hero-art-main { right: 7%; }
  .track-actions .mini-action:first-child { display: none; }
  .detail-hero { grid-template-columns: 1fr; align-items: end; padding: 22px 16px 18px; }
  .detail-art { width: 100px; }
  .detail-art.placeholder-art .material-symbols-rounded { font-size: 40px; }
  .detail-tracks .track-row { min-height: 50px; }
  .detail-tracks .track-actions .mini-action:first-child { display: none; }
  .track-row.swiping > :not(.tr-swipe-actions) { transform: translateX(-70px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============== NOW PLAYING DIALOG ============== */
.nowplaying-dialog {
  position: fixed; inset: 0; z-index: 300; width: 100%; max-width: none; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; overflow: hidden;
  animation: np-in .4s cubic-bezier(.16,1,.3,1) both;
}
.nowplaying-dialog::backdrop { background: rgba(0,0,0,0); }
.nowplaying-dialog[open] { display: flex; }
@keyframes np-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-out { to { opacity: 0; } }
.nowplaying-dialog.closing { animation: np-out .25s ease both; }
.np-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #0e120c 0%, #070807 50%, #0a0d09 100%);
}
.np-content {
  position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  animation: np-slide .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes np-slide { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.np-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; min-height: 52px;
}
.np-top .icon-button { color: var(--muted); transition: color .2s, transform .2s; }
.np-top .icon-button:hover { color: var(--text); transform: scale(1.1); }
.np-top-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--muted-2); text-transform: uppercase; }
.np-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; overflow-y: auto; gap: 10px; }
.np-visual { position: relative; width: min(72vw, 340px); aspect-ratio: 1; margin-bottom: 8px; display: grid; place-items: center; }
.np-art-disc {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-3); display: grid; place-items: center;
  box-shadow: 0 10px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  transition: box-shadow .4s ease;
}
.np-art-disc.playing { animation: np-spin 12s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }
.np-art-inner {
  width: 83%; height: 83%; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.np-art-inner img { width: 100%; height: 100%; object-fit: cover; display: none; }
.np-art-inner.has-image img { display: block; animation: art-fade .4s ease; }
.np-art-inner.has-image .np-placeholder { display: none; }
.np-placeholder { font-size: 56px; color: var(--muted-2); }
.np-visualizer { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); pointer-events: none; z-index: 0; }
.np-info { text-align: center; margin-bottom: 2px; }
.np-info strong { display: block; font: 700 24px/1.2 "Manrope"; letter-spacing: -.8px; }
.np-info span { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; }
.np-timeline { width: 100%; max-width: 420px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 10px; font-size: 10px; color: var(--muted-2); margin: 6px 0 2px; }
.np-timeline span:last-child { text-align: right; }
.np-range { --range-value: 0%; width: 100%; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.np-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--text) var(--range-value), #3a3e37 var(--range-value)); transition: height .15s; }
.np-range::-moz-range-track { height: 4px; border-radius: 4px; background: #3a3e37; }
.np-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--text); }
.np-range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--text); opacity: 0; transition: opacity .15s, transform .15s; box-shadow: 0 0 10px rgba(0,0,0,.5); }
.np-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--text); opacity: 0; box-shadow: 0 0 10px rgba(0,0,0,.5); }
.np-range:hover::-webkit-slider-thumb, .np-range:active::-webkit-slider-thumb { opacity: 1; transform: scale(1.1); }
.np-range:hover::-moz-range-thumb, .np-range:active::-moz-range-thumb { opacity: 1; transform: scale(1.1); }
.np-transport { display: flex; align-items: center; gap: 22px; margin: 2px 0; }
.np-transport .icon-button { color: var(--muted); transition: color .2s, transform .17s; }
.np-transport .icon-button:hover { color: var(--text); transform: scale(1.12); }
.np-transport .icon-button .material-symbols-rounded { font-size: 24px; }
#npSeekBackBtn .material-symbols-rounded, #npSeekFwdBtn .material-symbols-rounded { font-size: 20px; }
.np-play { width: 56px; height: 56px; color: #111; background: var(--text); box-shadow: 0 8px 30px rgba(0,0,0,.3); transition: transform .17s, background .17s; }
.np-play .material-symbols-rounded { font-size: 32px; }
.np-play:hover { transform: scale(1.06); background: var(--accent); }
.np-actions { display: flex; align-items: center; gap: 14px; margin: 4px 0; }
.np-actions .icon-button { color: var(--muted); transition: color .2s, transform .17s; }
.np-actions .icon-button:hover { color: var(--text); transform: scale(1.12); }
.np-actions .like-button.active { color: var(--coral); }
#npSpeedBtn { color: var(--muted); transition: color .2s, transform .17s; font-size: 11px; font-weight: 700; min-width: 38px; letter-spacing: -.3px; }
#npSpeedBtn:hover { color: var(--text); transform: scale(1.12); }
#npSpeedBtn.active { color: var(--accent); }
.np-sleep-timer {
  width: 100%; max-width: 360px; margin-top: 4px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  animation: view-in .2s ease;
  background: rgba(255,255,255,.025);
}
.np-sleep-timer .material-symbols-rounded { color: var(--accent); font-size: 20px; }
.np-sleep-timer span { font-size: 12px; color: var(--muted); }
.np-sleep-options { margin-left: auto; display: flex; gap: 5px; }
.np-sleep-options .soft-button { font-size: 11px; padding: 5px 10px; min-height: 28px; }
.np-sleep-options .soft-button.danger { color: var(--coral); }

/* ============== MINI VISUALIZER ============== */
.mini-visualizer { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 9px; z-index: 2; opacity: .45; }
.player.is-playing .mini-visualizer { display: block; }

/* ============== SHARE BUTTON ============== */
#shareBtn { color: var(--muted); transition: color .2s, transform .17s; }
#shareBtn:hover { color: var(--accent); transform: scale(1.12); }

/* ============== SLEEP TIMER BUTTON ============== */
#sleepTimerBtn { color: var(--muted); transition: color .2s; }
#sleepTimerBtn:hover { color: var(--accent); }
#sleepTimerBtn.active { color: var(--accent); animation: sleep-pulse 2s ease-in-out infinite; }
@keyframes sleep-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ============== CROSSFADE TOGGLE ============== */
.crossfade-toggle { display: inline-flex; align-items: center; cursor: pointer; color: var(--muted-2); transition: color .2s; }
.crossfade-toggle:hover { color: var(--text); }
.crossfade-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.crossfade-toggle .material-symbols-rounded { font-size: 21px; transition: color .2s, transform .2s; }
.crossfade-toggle input:checked + .material-symbols-rounded { color: var(--accent); }

/* ============== LIBRARY SEARCH ============== */
.library-search-row {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 14px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.025); transition: border-color .2s;
}
.library-search-row:focus-within { border-color: rgba(var(--accent-rgb),.4); }
.library-search-row .material-symbols-rounded { font-size: 20px; color: var(--muted-2); }
.library-search-row input { flex: 1; border: 0; padding: 0; background: transparent; color: var(--text); font-size: 13px; outline: none; }
.library-search-row input::placeholder { color: var(--muted-2); }

/* ============== QUEUE DRAG HANDLE ============== */
.queue-drag-handle { cursor: grab; color: var(--muted-2); font-size: 16px; transition: color .15s; flex: 0 0 auto; touch-action: none; }
.queue-drag-handle:hover { color: var(--muted); }
.queue-drag-handle:active { cursor: grabbing; }
[data-queue-index].dragging { opacity: .35; border: 1px dashed var(--muted-2); background: transparent !important; }

/* ============== KEYBOARD HINT ============== */
.kbd-hint {
  position: fixed; z-index: 250; bottom: calc(var(--player-h) + 14px); left: 50%; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; display: flex; align-items: center; gap: 8px;
  color: var(--text); background: rgba(20,23,18,.92); backdrop-filter: blur(12px);
  box-shadow: 0 10px 35px rgba(0,0,0,.4); font-size: 12px;
  animation: toast-in .25s ease;
  border: 1px solid var(--line-strong);
}
.kbd-hint .material-symbols-rounded { font-size: 16px; color: var(--accent); }

/* ============== HISTORY VIEW ============== */
.history-empty { min-height: 200px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted-2); text-align: center; }
.history-empty .material-symbols-rounded { font-size: 42px; color: var(--muted); }
.history-empty p { max-width: 260px; font-size: 12px; }

/* ============== SLEEP TIMER OVERLAY ============== */
.sleep-active-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(var(--accent-rgb),.1); color: var(--accent); font-size: 10px; font-weight: 600; }

/* ============== RESPONSIVE NP ============== */
@media (max-width: 760px) {
  .nowplaying-dialog { border-radius: 0; touch-action: pan-y; }
  .np-content { touch-action: pan-y; }
  .np-body { padding: 0 20px; gap: 10px; justify-content: center; padding-top: 10px; }
  .np-visual { width: min(72vw, 300px); margin-bottom: 2px; }
  .np-art-disc { box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); }
  .np-info strong { font-size: 22px; }
  .np-info span { font-size: 14px; }
  .np-timeline { max-width: 100%; margin: 8px 0 4px; font-size: 11px; }
  .np-timeline .np-range { height: 24px; }
  .np-timeline .np-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; opacity: 1; }
  .np-timeline .np-range::-moz-range-thumb { width: 20px; height: 20px; opacity: 1; }
  .np-transport { gap: 24px; }
  .np-play { width: 56px; height: 56px; }
  .np-play .material-symbols-rounded { font-size: 32px; }
  .np-transport .icon-button .material-symbols-rounded { font-size: 26px; }
  .np-actions { gap: 18px; }
  .np-actions .icon-button .material-symbols-rounded { font-size: 24px; }
  .np-top { padding: 6px 12px; min-height: 44px; }
  .np-sleep-timer { margin-top: 2px; }
}
@media (max-width: 430px) {
  .np-body { padding: 0 14px; gap: 6px; }
  .np-visual { width: min(68vw, 240px); }
  .np-info strong { font-size: 19px; }
  .np-transport { gap: 18px; }
  .np-play { width: 48px; height: 48px; }
  .np-play .material-symbols-rounded { font-size: 28px; }
}

/* ============== MOBILE VOLUME OVERLAY ============== */
@media (max-width: 760px) {
  .mobile-vol-overlay {
    position: fixed; z-index: 110; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--player-h) + 12px); padding: 10px 16px 14px;
    background: linear-gradient(to top, rgba(13,15,12,.98) 60%, transparent);
    animation: view-in .2s ease;
  }
  .mobile-vol-overlay.closing { animation: toast-out .15s ease forwards; }
  .mobile-vol-inner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); }
  .mobile-vol-inner .material-symbols-rounded { font-size: 20px; color: var(--muted); flex: 0 0 auto; }
  .mobile-vol-inner .range { flex: 1; }
  .mobile-vol-inner #mobileVolPct { font-size: 11px; color: var(--muted-2); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
}

/* ============== THEME PICKER ============== */
.theme-picker { position: relative; margin-top: 8px; }
.theme-picker > .material-symbols-rounded { font-size: 16px; color: var(--muted-2); cursor: pointer; transition: color .2s; }
.theme-picker > .material-symbols-rounded:hover { color: var(--text); }
.theme-options { display: none; position: absolute; bottom: 100%; left: 0; gap: 4px; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); z-index: 50; }
.theme-options.open { display: flex; flex-wrap: wrap; width: 170px; animation: view-in .12s ease; }
.theme-swatch { width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; transition: transform .15s, box-shadow .15s; outline: 2px solid transparent; }
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { outline-color: var(--text); box-shadow: 0 0 0 3px var(--bg); }

/* ============== EQUALIZER ============== */
.eq-dialog { max-width: 400px; }
.eq-bands { display: flex; flex-direction: column; gap: 6px; }
.eq-band { display: flex; align-items: center; gap: 8px; }
.eq-band span:first-child { min-width: 30px; font-size: 10px; color: var(--muted-2); font-weight: 600; text-align: right; }
.eq-band .eq-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 3px; border-radius: 3px; background: var(--surface-3); cursor: pointer; outline: none; }
.eq-band .eq-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.eq-band .eq-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 0; cursor: pointer; }
.eq-band .eq-slider::-webkit-slider-runnable-track { height: 3px; }
.eq-band .eq-slider::-moz-range-track { height: 3px; }
.eq-band .eq-slider::-moz-range-progress { height: 3px; background: var(--accent); }
.eq-val { min-width: 22px; font-size: 10px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.eq-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.eq-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; color: var(--muted); }
.eq-toggle input { accent-color: var(--accent); }

/* ============== KARAOKE MODE ============== */
.karaoke-line { display: block; width: 100%; border: 0; padding: 5px 0; color: #7c8278; background: transparent; text-align: left; font: 700 28px/1.4 "Manrope"; letter-spacing: -.5px; cursor: pointer; transition: color .15s; }
.karaoke-line.active { color: var(--text); }
.karaoke-word { display: inline-block; transition: color .08s linear; }
.karaoke-word.lit { color: var(--accent); }
.karaoke-word.dim { color: var(--muted-2); }

/* ============== AMBIENT MODE ============== */
#ambientBtn.active { color: var(--accent); }
.ambient-active .np-backdrop { background: transparent !important; transition: background 1s ease; }
.ambient-active .np-art-disc { box-shadow: 0 10px 80px rgba(var(--accent-rgb), .25), 0 0 0 1px rgba(255,255,255,.04); }
.ambient-active .player::before { box-shadow: 0 0 14px var(--accent), 0 0 40px rgba(var(--accent-rgb),.08); }

/* ============== EQ BUTTON ACTIVE STATE ============== */
#eqQuickBtn.active, #npEqBtn.active { color: var(--accent); }
#npSleepBtn.active { color: var(--accent); animation: sleep-pulse 2s ease-in-out infinite; }

/* ============== VOLUME BOOST ============== */
#muteBtn.boost { color: var(--accent); }
#muteBtn.boost .material-symbols-rounded { animation: sleep-pulse 2s ease-in-out infinite; }
.range.volume-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent) calc(min(var(--range-value, '0%'), 100%)), var(--coral) calc(min(var(--range-value, '0%'), 100%)), #3a3e37 var(--range-value)); }

/* ============== STATION / RADIO BUTTON ============== */
#npRadioBtn { transition: color .2s, transform .17s; }
#npRadioBtn:hover { color: var(--accent); transform: scale(1.12); }
#npRadioBtn.active { color: var(--accent); animation: sleep-pulse 2s ease-in-out infinite; }

/* ============== DOWNLOAD BUTTON ============== */
.track-download-btn { width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; font-size: 16px; transition: color .15s, transform .15s; }
.track-download-btn:hover { color: var(--accent); transform: scale(1.12); }
.track-download-btn.downloaded { color: var(--accent); }
.track-download-btn.downloading { color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============== IMPORT BUTTON ============== */
#importPlaylistBtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; min-height: 36px; }
#importPlaylistBtn:hover { color: var(--text); border-color: var(--line-strong); }
#importPlaylistBtn .material-symbols-rounded { font-size: 17px; }

/* ============== PLAYLIST TRACK DRAG REORDER ============== */
.detail-tracks .track-row.dragging { opacity: .3; border: 1px dashed var(--muted-2); }
.detail-tracks .track-row.drag-over { border-top: 2px solid var(--accent); }

/* ============== CONTEXT MENU ============== */
.context-menu {
  position: fixed; z-index: 600; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 12px; min-width: 180px;
  background: rgba(22,25,20,.97); backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  animation: view-in .1s ease;
}
.context-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px; color: var(--text); background: transparent;
  cursor: pointer; font-size: 12px; text-align: left; transition: background .1s;
}
.context-menu button:hover { background: rgba(255,255,255,.07); }
.context-menu button .material-symbols-rounded { font-size: 18px; color: var(--muted); }

/* ============== CROSSFADE SETTINGS IN QUEUE ============== */
.queue-crossfade { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); margin-top: 6px; }
.queue-crossfade span { font-size: 12px; }
.queue-crossfade span small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }

/* ============== STATS GRID ============== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 4px; }
.stat-cell { padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.stat-cell b { display: block; font: 700 24px/1.2 "Manrope"; letter-spacing: -.5px; color: var(--accent); }
.stat-cell small { display: block; font-size: 10px; color: var(--muted-2); margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; }
.stat-bar { height: 4px; border-radius: 4px; background: var(--surface-3); margin-top: 8px; overflow: hidden; display: flex; }
.stat-bar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.stat-bar-fill.i { background: var(--accent); }
.stat-bar-fill.v { background: #7ba9ff; }
.stat-bar-fill.s { background: #f472b6; }
.stat-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 10px; flex-wrap: wrap; }
.stat-legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.stat-legend b { font-size: 11px; color: var(--text); }
.stat-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.stat-dot.i { background: var(--accent); }
.stat-dot.v { background: #7ba9ff; }
.stat-dot.s { background: #f472b6; }

/* ============== SETTINGS ============== */
.settings-body { max-width: 500px; padding-bottom: 32px; }
.setting-group { margin-bottom: 20px; }
.setting-group > b { display: block; font: 600 12px/1 "Manrope"; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); margin-bottom: 6px; transition: border-color .2s; }
.setting-row:focus-within { border-color: rgba(var(--accent-rgb),.3); }
.setting-row-info { display: flex; flex-direction: column; gap: 1px; }
.setting-row-info strong { font-size: 13px; }
.setting-row-info small { font-size: 10px; color: var(--muted); line-height: 1.4; }
.setting-row .material-symbols-rounded { font-size: 20px; color: var(--muted-2); flex: 0 0 auto; }
.setting-row .setting-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; margin-right: 10px; border-radius: 10px; background: rgba(var(--accent-rgb),.08); }
.setting-row .setting-icon .material-symbols-rounded { color: var(--accent); font-size: 18px; }
.setting-themes { display: flex; gap: 6px; flex-wrap: wrap; }
.setting-swatch { width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; transition: transform .15s, box-shadow .15s; outline: 2px solid transparent; outline-offset: 2px; }
.setting-swatch:hover { transform: scale(1.12); }
.setting-swatch.active { outline-color: var(--text); }
.setting-row .danger-text { color: var(--coral); cursor: pointer; font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 0; background: rgba(239,83,80,.08); transition: background .15s; }
.setting-row .danger-text:hover { background: rgba(239,83,80,.15); }
.setting-about { font-size: 11px; color: var(--muted-2); line-height: 1.7; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.015); border: 1px solid var(--line); }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-cell { padding: 12px; }
  .stat-cell b { font-size: 20px; }
  .setting-row { padding: 10px 12px; }
}