:root {
  color-scheme: dark;
  --bg: #050505;
  --bg-soft: #0b0b0c;
  --surface: rgba(17,17,18,.9);
  --surface-solid: #111112;
  --surface-2: #181819;
  --surface-3: #222224;
  --text: #fffafa;
  --text-soft: #d7cdcf;
  --muted: #91878a;
  --line: rgba(209,35,55,.26);
  --line-strong: rgba(237,55,73,.5);
  --accent: #e22d42;
  --accent-2: #8f101f;
  --accent-soft: rgba(226,45,66,.15);
  --success: #4ddd8b;
  --warning: #ffc14d;
  --danger: #ff5b5b;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --sidebar: 248px;
  --player: 92px;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f7fbff;
  --surface: rgba(255,255,255,.94);
  --surface-solid: #ffffff;
  --surface-2: #f5f9fd;
  --surface-3: #eaf3fb;
  --text: #10233b;
  --text-soft: #405b76;
  --muted: #6b8298;
  --line: rgba(30,105,170,.22);
  --line-strong: rgba(26,111,185,.42);
  --accent: #176cae;
  --accent-2: #f29b5b;
  --accent-soft: rgba(23,108,174,.11);
  --gold: #e58a4a;
  --shadow: 0 20px 58px rgba(40,91,130,.13);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow:hidden; }
button, input, select, textarea { font:inherit; }
button { color:inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hidden { display:none !important; }
.desktop-only { display:flex; }
.mobile-only { display:none !important; }
.skip-link { position:fixed; top:-50px; left:16px; z-index:9999; background:var(--accent); color:white; padding:10px 14px; border-radius:10px; text-decoration:none; }
.skip-link:focus { top:16px; }

.ambient-layer { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.ambient-layer span { position:absolute; width:42vw; aspect-ratio:1; border-radius:50%; filter:blur(120px); opacity:.10; animation:ambient 16s ease-in-out infinite alternate; }
.ambient-layer span:nth-child(1){ background:#d61730; left:-16vw; top:-14vw; }
.ambient-layer span:nth-child(2){ background:#6d0f1c; right:-18vw; top:10vh; animation-delay:-5s; }
.ambient-layer span:nth-child(3){ background:#b91124; left:30vw; bottom:-30vw; animation-delay:-9s; }
@keyframes ambient { to { transform:translate3d(6vw,4vh,0) scale(1.15); opacity:.16; } }

.app-shell { position:relative; z-index:1; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); height:calc(100vh - var(--player)); }
.sidebar { display:flex; flex-direction:column; gap:10px; padding:18px 14px 16px; border-right:1px solid var(--line); background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(22px); overflow:auto; }
.sidebar-brand { display:flex; align-items:center; gap:10px; min-height:62px; padding:4px 6px 14px; }
.brand-logo-mark { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(255,30,86,.28)); }
.brand-copy { display:flex; flex-direction:column; min-width:0; }
.brand-copy strong { font-family:Georgia,"Times New Roman",serif; font-size:23px; letter-spacing:-1px; line-height:1; white-space:nowrap; }
.brand-copy strong b { color:var(--accent); font-weight:500; }
.brand-copy span { margin-top:5px; color:var(--text-soft); font-size:10px; letter-spacing:1.4px; }
.nav-list { display:flex; flex-direction:column; gap:4px; }
.nav-heading { margin:12px 10px 4px; color:var(--muted); font-size:11px; letter-spacing:.12em; }
.nav-item, .account-button { width:100%; display:flex; align-items:center; gap:11px; min-height:42px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--text-soft); cursor:pointer; text-align:left; transition:.2s ease; }
.nav-item:hover, .account-button:hover { background:var(--surface-2); color:var(--text); transform:translateX(2px); }
.nav-item.active { color:white; background:linear-gradient(90deg,rgba(255,35,86,.95),rgba(255,35,86,.16)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="light"] .nav-item.active { color:#fff; }
.nav-item.soft { min-height:38px; }
.nav-icon { width:22px; text-align:center; font-size:19px; line-height:1; }
.nav-icon.heart { color:var(--accent); }
.nav-count { margin-left:auto; min-width:22px; padding:2px 7px; border-radius:999px; background:var(--surface-3); color:var(--text); font-size:11px; text-align:center; }
.sidebar-divider { height:1px; background:var(--line); margin:8px 6px; }
.sidebar-spacer { flex:1; }
.connection-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.connection-card div { display:flex; flex-direction:column; min-width:0; }
.connection-card strong { font-size:13px; }
.connection-card small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 18%,transparent); }
.status-dot.online { background:var(--success); box-shadow:0 0 0 4px rgba(77,221,139,.14),0 0 16px rgba(77,221,139,.45); }
.account-button { justify-content:center; min-height:38px; border:1px solid var(--line); font-size:13px; }
.sidebar-backdrop { display:none; }

.workspace { min-width:0; overflow:hidden; }
.topbar { height:76px; display:flex; align-items:center; gap:14px; padding:12px 22px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(20px); }
.history-actions { gap:6px; }
.icon-button { display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border:0; border-radius:12px; background:var(--surface-2); color:var(--text); cursor:pointer; transition:.18s ease; }
.icon-button:hover { transform:translateY(-1px); background:var(--surface-3); }
.icon-button.subtle { background:transparent; color:var(--text-soft); }
.icon-button.glass { border:1px solid var(--line); background:var(--surface); }
.icon-button.active { color:var(--accent); background:var(--accent-soft); }
.global-search { position:relative; flex:1; max-width:760px; margin:0 auto; }
.search-wrap > svg { position:absolute; z-index:2; left:16px; top:50%; width:19px; height:19px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:2; }
.search-wrap input { width:100%; height:48px; padding:0 56px 0 47px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.search-wrap input::placeholder { color:var(--muted); }
.search-wrap kbd { position:absolute; right:14px; top:50%; transform:translateY(-50%); border:1px solid var(--line); border-radius:7px; padding:3px 7px; color:var(--muted); background:var(--surface-2); font-size:11px; }
.search-suggestions { position:absolute; left:0; right:0; top:56px; z-index:80; max-height:460px; overflow:auto; border:1px solid var(--line); border-radius:18px; padding:10px; background:var(--surface-solid); box-shadow:var(--shadow); }
.suggestion-group h4 { margin:8px 9px; color:var(--muted); font-size:11px; letter-spacing:.1em; }
.suggestion-item { width:100%; display:flex; align-items:center; gap:10px; padding:8px; border:0; border-radius:12px; background:transparent; text-align:left; cursor:pointer; }
.suggestion-item:hover { background:var(--surface-2); }
.suggestion-item img,.suggestion-thumb { width:42px; height:42px; border-radius:9px; object-fit:cover; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.suggestion-item div { min-width:0; }
.suggestion-item strong,.suggestion-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-item span { color:var(--muted); font-size:12px; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.topbar-title { display:flex; flex-direction:column; min-width:110px; }
.topbar-title span { font-weight:700; }
.topbar-title small { color:var(--muted); }
.theme-sun,.theme-moon { font-size:18px; }
html[data-theme="dark"] .theme-sun { display:none; }
html[data-theme="light"] .theme-moon { display:none; }

.main-content { height:calc(100vh - var(--player) - 76px); overflow:auto; padding:18px 22px 34px; scroll-behavior:smooth; }
.hero { position:relative; min-height:280px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); padding:36px 42px; background:radial-gradient(circle at 75% 42%,rgba(255,66,112,.44),transparent 32%),linear-gradient(120deg,#22101d 0%,#4c0f2d 52%,#a20e3b 100%); box-shadow:var(--shadow); isolation:isolate; }
html[data-theme="light"] .hero { background:radial-gradient(circle at 75% 42%,rgba(255,255,255,.62),transparent 28%),linear-gradient(120deg,#fff4f7 0%,#ffdce6 47%,#ff8cab 100%); border-color:rgba(104,20,51,.1); }
.hero-noise { position:absolute; inset:0; opacity:.12; background-image:radial-gradient(rgba(255,255,255,.6) .7px,transparent .7px); background-size:8px 8px; mask-image:linear-gradient(90deg,#000,transparent 80%); }
.hero-content { position:relative; z-index:2; max-width:590px; }
.eyebrow { margin:0 0 11px; color:#ff839f; font-size:12px; font-weight:800; letter-spacing:.13em; }
html[data-theme="light"] .eyebrow { color:#a4083c; }
.hero h1 { margin:0; max-width:650px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(42px,5vw,72px); line-height:.96; letter-spacing:-3px; color:#fff; text-shadow:0 12px 32px rgba(0,0,0,.25); }
html[data-theme="light"] .hero h1 { color:#431429; text-shadow:none; }
.hero p:not(.eyebrow) { max-width:560px; margin:18px 0 24px; color:rgba(255,255,255,.74); font-size:16px; line-height:1.55; }
html[data-theme="light"] .hero p:not(.eyebrow) { color:#684154; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.primary-button,.secondary-button { min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; border-radius:13px; cursor:pointer; transition:.18s ease; }
.primary-button { border:0; color:white; background:linear-gradient(135deg,#ff3d65,#e91650); box-shadow:0 12px 28px rgba(255,32,86,.28); }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(255,32,86,.38); }
.secondary-button { border:1px solid var(--line-strong); background:var(--surface); color:var(--text); backdrop-filter:blur(12px); }
.secondary-button:hover { background:var(--surface-2); transform:translateY(-1px); }
.secondary-button.compact { min-height:34px; padding:0 12px; border-radius:10px; font-size:12px; }
.full { width:100%; }
.hero-visual { position:relative; width:min(390px,38vw); aspect-ratio:1.24; margin-right:1vw; }
.hero-disc { position:absolute; width:245px; height:245px; right:0; top:18px; border-radius:50%; background:repeating-radial-gradient(circle,#19131b 0 2px,#0b090d 3px 9px); box-shadow:0 24px 46px rgba(0,0,0,.45); animation:spin 13s linear infinite; }
.hero-disc::after { content:""; position:absolute; inset:39%; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 10px rgba(255,255,255,.06); }
.hero-cover { position:absolute; left:14px; top:20px; width:218px; aspect-ratio:1; display:grid; place-items:center; border-radius:28px; background:linear-gradient(145deg,#170a13,#4d0e2d 56%,#cf174d); box-shadow:0 28px 48px rgba(0,0,0,.38); transform:rotate(-4deg); animation:coverFloat 5s ease-in-out infinite; }
.hero-cover img { width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 12px 26px rgba(255,25,90,.3)); }
.hero-wave { position:absolute; left:115px; right:-8px; bottom:4px; height:70px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 18px; border-radius:18px; background:rgba(6,4,8,.52); backdrop-filter:blur(15px); }
.hero-wave i { width:5px; height:20%; border-radius:99px; background:linear-gradient(to top,var(--accent),#a747ff); animation:bars 1.1s ease-in-out infinite alternate; }
.hero-wave i:nth-child(2n){ animation-delay:-.5s;height:48%;}.hero-wave i:nth-child(3n){animation-delay:-.8s;height:82%;}.hero-wave i:nth-child(4n){animation-delay:-.25s;height:62%;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes coverFloat{50%{transform:translateY(-8px) rotate(-2deg)}}
@keyframes bars{to{height:92%;filter:brightness(1.4)}}

.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; margin-top:18px; align-items:start; }
.content-section,.now-panel { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 16px 50px rgba(0,0,0,.08); backdrop-filter:blur(18px); }
.content-section { min-width:0; padding:20px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.section-heading h2 { margin:0 0 5px; font-size:24px; }
.section-heading p { margin:0; color:var(--muted); font-size:13px; }
.section-controls { display:flex; align-items:center; gap:10px; }
.sort-control { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.sort-control select { height:36px; padding:0 32px 0 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); }
.home-rail { margin-bottom:20px; }
.rail-heading { display:flex; justify-content:space-between; align-items:center; }
.rail-heading h3 { margin:0 0 12px; }
.rail-heading button { border:0; background:none; color:var(--accent); cursor:pointer; }
.featured-cards { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:12px; }
.feature-card { position:relative; min-width:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface-2); cursor:pointer; transition:.2s ease; }
.feature-card:hover { transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.18); }
.feature-card-art { aspect-ratio:1; background:linear-gradient(135deg,var(--accent-soft),rgba(164,48,255,.28)); overflow:hidden; }
.feature-card-art img { width:100%; height:100%; object-fit:cover; }
.feature-card-copy { padding:10px; }
.feature-card-copy strong,.feature-card-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feature-card-copy span { color:var(--muted); font-size:12px; margin-top:4px; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:15px; }
.song-table { width:100%; border-collapse:collapse; min-width:760px; }
.song-table th { position:sticky; top:0; z-index:2; padding:11px 12px; background:var(--surface-solid); color:var(--muted); font-size:11px; font-weight:600; text-align:left; letter-spacing:.06em; text-transform:uppercase; }
.song-table td { padding:9px 12px; border-top:1px solid var(--line); vertical-align:middle; }
.song-row { transition:.15s ease; cursor:default; }
.song-row:hover { background:var(--surface-2); }
.song-row.active { background:linear-gradient(90deg,var(--accent-soft),transparent); }
.index-column { width:42px; text-align:center !important; }
.duration-column { width:82px; text-align:right !important; }
.rating-column { width:150px; }
.actions-column { width:160px; }
.song-title-cell { display:flex; align-items:center; gap:11px; min-width:240px; }
.song-cover { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#4c1730,#902046); color:white; }
.song-cover img { width:100%; height:100%; object-fit:cover; }
.song-cover svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.song-copy { min-width:0; }
.song-copy strong,.song-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.song-copy strong { font-size:14px; }
.song-copy span { margin-top:3px; color:var(--muted); font-size:12px; }
.row-actions { display:flex; justify-content:flex-end; gap:4px; }
.row-actions button { min-width:31px; height:31px; border:0; border-radius:9px; background:transparent; color:var(--text-soft); cursor:pointer; }
.row-actions button:hover { color:var(--accent); background:var(--accent-soft); }
.mini-rating { display:flex; gap:1px; }
.mini-rating button { border:0; background:none; color:var(--muted); padding:1px; cursor:pointer; font-size:16px; }
.mini-rating button.on { color:var(--warning); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:14px; }
.media-card { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--surface-2); cursor:pointer; transition:.2s ease; }
.media-card:hover { transform:translateY(-4px); box-shadow:0 18px 34px rgba(0,0,0,.18); }
.media-card-art { position:relative; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#2a182b,#a61e52); }
.media-card-art img { width:100%; height:100%; object-fit:cover; }
.media-card-art svg { width:36%; fill:none; stroke:#fff; stroke-width:1.3; }
.media-card-copy { padding:12px; }
.media-card-copy strong,.media-card-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-card-copy span { color:var(--muted); font-size:12px; margin-top:4px; }
.album-rating { margin-top:8px; color:var(--warning); font-size:13px; }
.album-rating button { border:0; background:transparent; color:var(--muted); padding:0 1px; cursor:pointer; font-size:15px; }
.album-rating button.on { color:var(--warning); }
.message-box { margin-bottom:12px; border:1px solid rgba(255,91,91,.25); border-radius:12px; padding:11px 13px; background:rgba(255,91,91,.08); color:var(--danger); }
.empty-state { display:grid; place-items:center; min-height:270px; text-align:center; color:var(--muted); }
.empty-state h3 { color:var(--text); margin:8px 0; }
.empty-icon { display:grid; place-items:center; width:70px; height:70px; border-radius:22px; background:var(--accent-soft); color:var(--accent); font-size:32px; }
.skeleton-list div { height:62px; margin:7px 0; border-radius:13px; background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer{to{background-position:-200% 0}}

.now-panel { position:sticky; top:0; padding:15px; }
.panel-kicker,.eq-heading { display:flex; align-items:center; justify-content:space-between; }
.panel-kicker span { color:var(--muted); font-size:10px; letter-spacing:.13em; }
.now-cover-large { width:100%; aspect-ratio:1; margin-top:10px; border-radius:19px; overflow:hidden; background:linear-gradient(135deg,#160b13,#8e1945); box-shadow:0 18px 36px rgba(0,0,0,.25); }
.now-cover-large.playing { animation:coverPulse 3.6s ease-in-out infinite; }
.now-cover-large img { width:100%; height:100%; object-fit:cover; }
@keyframes coverPulse{50%{transform:scale(.985);box-shadow:0 22px 54px rgba(255,35,87,.2)}}
.now-panel-copy { display:flex; flex-direction:column; margin-top:13px; }
.now-panel-copy strong { font-size:18px; }
.now-panel-copy span { color:var(--muted); font-size:13px; margin-top:4px; }
.star-rating { display:flex; gap:2px; margin:10px 0 4px; }
.star-rating button { border:0; background:transparent; color:var(--muted); padding:0; font-size:23px; cursor:pointer; }
.star-rating button.on { color:var(--warning); text-shadow:0 0 13px rgba(255,193,77,.35); }
.visualizer { display:block; width:100%; height:82px; margin:8px 0; border-radius:14px; background:linear-gradient(180deg,transparent,var(--accent-soft)); }
.quick-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.quick-tabs button,.eq-presets button { min-height:35px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text-soft); cursor:pointer; }
.quick-tabs button:hover,.eq-presets button:hover,.eq-presets button.active { color:white; border-color:transparent; background:linear-gradient(135deg,var(--accent),#d71b68); }
.eq-panel { margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.eq-heading button { border:0; background:none; color:var(--accent); font-size:11px; cursor:pointer; }
.eq-presets { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:10px; }
.eq-presets button { font-size:11px; }

.player-bar { position:fixed; z-index:100; left:0; right:0; bottom:0; height:var(--player); display:grid; grid-template-columns:minmax(230px,1fr) minmax(360px,1.45fr) minmax(220px,1fr); align-items:center; gap:20px; padding:10px 18px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(26px); box-shadow:0 -18px 50px rgba(0,0,0,.12); }
.now-playing { min-width:0; display:flex; align-items:center; gap:11px; }
.player-cover { flex:0 0 58px; width:58px; height:58px; border-radius:11px; overflow:hidden; background:linear-gradient(135deg,#371323,#b8154c); }
.player-cover img { width:100%; height:100%; object-fit:cover; }
.track-copy { min-width:0; display:flex; flex-direction:column; }
.track-copy strong,.track-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-copy span { margin-top:4px; color:var(--muted); font-size:12px; }
.favorite-button { color:var(--accent); background:transparent; font-size:23px; }
.transport { min-width:0; }
.transport-buttons { display:flex; justify-content:center; align-items:center; gap:8px; }
.play-button { width:46px; height:46px; border:0; border-radius:50%; background:linear-gradient(135deg,#ff456b,#df134b); color:white; cursor:pointer; box-shadow:0 0 0 6px rgba(255,48,94,.09),0 9px 20px rgba(255,48,94,.24); }
.timeline { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; gap:9px; margin-top:7px; color:var(--muted); font-size:11px; }
input[type="range"] { --range-progress:0%; appearance:none; width:100%; height:4px; border-radius:99px; background:linear-gradient(90deg,var(--accent) var(--range-progress),var(--surface-3) var(--range-progress)); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border-radius:50%; background:var(--text); box-shadow:0 1px 6px rgba(0,0,0,.25); }
.player-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.player-actions input { max-width:120px; }
.volume-icon { color:var(--muted); }

.queue-panel { position:fixed; z-index:120; right:-390px; top:0; bottom:var(--player); width:min(380px,92vw); padding:18px; border-left:1px solid var(--line); background:var(--surface-solid); box-shadow:-30px 0 70px rgba(0,0,0,.28); transition:right .28s ease; overflow:auto; }
.queue-panel.open { right:0; }
.queue-header { display:flex; justify-content:space-between; align-items:center; }
.queue-header span { color:var(--muted); font-size:10px; letter-spacing:.14em; }
.queue-header h2 { margin:4px 0 0; }
.queue-list { display:flex; flex-direction:column; gap:7px; margin-top:16px; }
.queue-item { display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; cursor:pointer; }
.queue-item:hover,.queue-item.active { background:var(--accent-soft); }
.queue-item .song-cover { width:42px; height:42px; flex-basis:42px; }

.immersive-panel { position:fixed; z-index:160; inset:0 0 var(--player); display:grid; grid-template-columns:minmax(0,1.6fr) minmax(340px,.72fr); gap:18px; padding:24px; background:rgba(7,6,10,.94); color:#fff; backdrop-filter:blur(30px); overflow:auto; }
.immersive-close { position:fixed; z-index:4; top:18px; right:20px; width:42px; height:42px; border:1px solid rgba(255,255,255,.12); border-radius:50%; color:white; background:rgba(0,0,0,.35); font-size:24px; cursor:pointer; }
.immersive-media { position:relative; min-height:560px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:28px; background:#100b12; }
.immersive-backdrop { position:absolute; inset:-30px; background-position:center; background-size:cover; filter:blur(38px) brightness(.42) saturate(1.4); transform:scale(1.1); }
.immersive-cover { position:relative; z-index:2; width:min(430px,60%); aspect-ratio:1; border-radius:28px; overflow:hidden; box-shadow:0 36px 80px rgba(0,0,0,.52); animation:coverFloat 5s ease-in-out infinite; }
.immersive-cover img { width:100%; height:100%; object-fit:cover; }
#immersiveVisualizer { position:absolute; z-index:3; left:5%; right:5%; bottom:4%; width:90%; height:25%; opacity:.85; }
.video-stage { position:absolute; z-index:4; inset:0; display:grid; place-items:center; background:#050507; }
.video-stage video { width:100%; height:100%; object-fit:contain; }
.video-stage .secondary-button { position:absolute; bottom:18px; right:18px; }
.immersive-side { min-height:560px; border:1px solid rgba(255,255,255,.08); border-radius:28px; background:rgba(20,17,23,.78); overflow:hidden; }
.immersive-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(255,255,255,.08); }
.immersive-tabs button { height:56px; border:0; background:transparent; color:#8e8793; cursor:pointer; }
.immersive-tabs button.active { color:#fff; box-shadow:inset 0 -2px var(--accent); }
.lyrics-pane { height:calc(100% - 210px); min-height:360px; display:flex; flex-direction:column; }
.lyrics-lines { flex:1; overflow:auto; padding:34px 30px; scroll-behavior:smooth; }
.lyrics-lines p { margin:0 0 22px; color:#716a75; font-size:clamp(20px,2.2vw,34px); font-weight:700; line-height:1.25; transition:.2s ease; }
.lyrics-lines p.active { color:#fff; transform:translateX(8px); text-shadow:0 0 22px rgba(255,51,99,.65); }
.lyrics-lines p.past { color:#a39ca7; }
.lyrics-actions { display:flex; gap:8px; padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); }
.immersive-eq { padding:15px 20px 20px; border-top:1px solid rgba(255,255,255,.08); }
.immersive-eq h3 { margin:0; }
.mirror-presets { grid-template-columns:repeat(3,1fr); }

.modal-dialog { width:min(540px,calc(100vw - 28px)); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:24px; padding:0; background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow); }
.modal-dialog::backdrop { background:rgba(4,3,6,.65); backdrop-filter:blur(7px); }
.modal-dialog > form,.modal-dialog > div { position:relative; display:flex; flex-direction:column; gap:14px; padding:25px; }
.dialog-close { position:absolute; right:14px; top:12px; width:36px; height:36px; border:0; border-radius:50%; background:var(--surface-2); color:var(--text); font-size:22px; cursor:pointer; }
.dialog-brand { display:flex; align-items:center; gap:10px; padding-right:40px; }
.dialog-brand img { width:48px; height:48px; object-fit:contain; }
.dialog-brand div { display:flex; flex-direction:column; }
.dialog-brand span { color:var(--muted); font-size:12px; }
.modal-dialog h2 { margin:5px 0 0; }
.modal-dialog p { margin:0; color:var(--text-soft); line-height:1.5; }
.modal-dialog label { display:flex; flex-direction:column; gap:7px; color:var(--text-soft); font-size:13px; }
.modal-dialog input,.modal-dialog select,.modal-dialog textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:var(--surface-2); color:var(--text); resize:vertical; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkbox-row { flex-direction:row !important; align-items:center; }
.checkbox-row input { width:auto; }
.form-error { border:1px solid rgba(255,91,91,.25); border-radius:12px; padding:10px 12px; background:rgba(255,91,91,.08); color:var(--danger); }
.selection-summary,.install-message { padding:10px 12px; border-radius:12px; background:var(--surface-2); }
.toast-region { position:fixed; z-index:999; right:18px; bottom:calc(var(--player) + 18px); display:flex; flex-direction:column; gap:8px; }
.toast { max-width:360px; padding:12px 15px; border:1px solid var(--line); border-radius:13px; background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow); animation:toastIn .22s ease; }
.toast.success { border-color:rgba(77,221,139,.32); }
.toast.error { border-color:rgba(255,91,91,.35); }
@keyframes toastIn{from{transform:translateY(10px);opacity:0}}

@media (max-width:1180px) {
  :root { --sidebar:220px; }
  .dashboard-grid { grid-template-columns:minmax(0,1fr) 285px; }
  .hero { padding:30px; }
  .hero-visual { width:330px; }
  .featured-cards { grid-template-columns:repeat(3,1fr); }
  .featured-cards .feature-card:nth-child(4) { display:none; }
}
@media (max-width:940px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:150; left:-270px; top:0; bottom:var(--player); width:260px; transition:left .25s ease; box-shadow:30px 0 60px rgba(0,0,0,.3); }
  .sidebar.open { left:0; }
  .sidebar.open + .sidebar-backdrop { display:block; position:fixed; z-index:140; inset:0 0 var(--player); border:0; background:rgba(0,0,0,.45); }
  .mobile-only { display:grid !important; }
  .desktop-only { display:none !important; }
  .dashboard-grid { grid-template-columns:1fr; }
  .now-panel { position:relative; display:grid; grid-template-columns:180px 1fr; gap:13px; }
  .panel-kicker,.now-cover-large { grid-column:1; }
  .now-panel-copy,.star-rating,.visualizer,.quick-tabs,.eq-panel { grid-column:2; }
  .now-cover-large { grid-row:2 / span 5; }
  .visualizer { height:64px; }
  .immersive-panel { grid-template-columns:1fr; }
  .player-bar { grid-template-columns:minmax(180px,1fr) minmax(340px,1.5fr); }
  .player-actions { display:none; }
}
@media (max-width:720px) {
  :root { --player:78px; }
  body { overflow:hidden; }
  .topbar { height:66px; padding:9px 12px; gap:8px; }
  .topbar-title,.history-actions,.search-wrap kbd { display:none; }
  .main-content { height:calc(100vh - var(--player) - 66px); padding:12px 12px 26px; }
  .hero { min-height:230px; padding:24px; }
  .hero h1 { font-size:42px; letter-spacing:-2px; }
  .hero-visual { position:absolute; right:-100px; opacity:.55; width:320px; }
  .hero-content { z-index:3; max-width:76%; }
  .dashboard-grid { margin-top:12px; }
  .content-section { padding:14px; }
  .section-heading { align-items:flex-start; }
  .section-controls { flex-direction:column; align-items:flex-end; }
  .featured-cards { grid-template-columns:repeat(2,1fr); }
  .featured-cards .feature-card:nth-child(n+3) { display:none; }
  .now-panel { grid-template-columns:110px 1fr; padding:12px; }
  .quick-tabs,.eq-panel { grid-column:1 / -1; }
  .visualizer { display:none; }
  .player-bar { grid-template-columns:minmax(0,1fr) 170px; gap:8px; padding:8px 10px; }
  .player-cover { width:50px; height:50px; flex-basis:50px; }
  .favorite-button { display:none; }
  .transport .timeline { display:none; }
  .transport-buttons { justify-content:flex-end; gap:2px; }
  .transport-buttons #shuffleControl,.transport-buttons #repeatButton { display:none; }
  .play-button { width:42px; height:42px; }
  .immersive-panel { inset:0; padding:10px; grid-template-columns:1fr; gap:10px; }
  .immersive-media { min-height:42vh; }
  .immersive-side { min-height:50vh; }
  .immersive-cover { width:58%; }
  .lyrics-lines { padding:25px 18px; }
  .lyrics-lines p { font-size:23px; }
  .two-columns { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* JC Music v1.1.1 — identidad azul, vino y oro */
:root {
  --bg: #061328;
  --bg-soft: #091b35;
  --surface: rgba(13, 32, 61, .88);
  --surface-solid: #0d203d;
  --surface-2: #132b4d;
  --surface-3: #1c385e;
  --text: #f8f5ee;
  --text-soft: #c8d2e2;
  --muted: #8ea0b9;
  --line: rgba(218, 185, 112, .12);
  --line-strong: rgba(218, 185, 112, .24);
  --accent: #8c173b;
  --accent-2: #174f94;
  --accent-soft: rgba(140, 23, 59, .20);
  --gold: #d8ad61;
  --success: #42c997;
  --warning: #e3b85e;
}
html[data-theme="light"] {
  --bg: #f7f4ed;
  --bg-soft: #ede8dc;
  --surface: rgba(255, 253, 247, .90);
  --surface-solid: #fffdf8;
  --surface-2: #f2ede2;
  --surface-3: #e5dccb;
  --text: #102b52;
  --text-soft: #465b78;
  --muted: #78869a;
  --line: rgba(21, 61, 120, .11);
  --line-strong: rgba(140, 23, 59, .20);
  --accent-soft: rgba(140, 23, 59, .10);
  --shadow: 0 24px 70px rgba(24, 49, 82, .14);
}
.ambient-layer span:nth-child(1){background:#79142f}.ambient-layer span:nth-child(2){background:#154987}.ambient-layer span:nth-child(3){background:#d7ac5b}
.brand-logo-mark{filter:drop-shadow(0 8px 18px rgba(216,173,97,.24))}
.nav-item.active{background:linear-gradient(90deg,rgba(140,23,59,.96),rgba(21,61,120,.22));}
.hero{background:radial-gradient(circle at 75% 42%,rgba(216,173,97,.24),transparent 33%),linear-gradient(120deg,#071a34 0%,#142f58 46%,#781632 100%)}
html[data-theme="light"] .hero{background:radial-gradient(circle at 75% 42%,rgba(255,255,255,.72),transparent 28%),linear-gradient(120deg,#fffdf7 0%,#e8eef7 47%,#dfc2c8 100%)}
.eyebrow{color:#e2bc75}.primary-button,.play-button{background:linear-gradient(135deg,#153f78,#8b1739);box-shadow:0 12px 28px rgba(17,58,112,.28)}
.primary-button:hover{box-shadow:0 16px 32px rgba(140,23,59,.34)}
.hero-cover{background:linear-gradient(145deg,#07162b,#163c72 54%,#7f1938)}
.hero-disc::after{background:linear-gradient(135deg,#d8ad61,#8c173b)}
.hero-wave i{background:linear-gradient(to top,#d7aa58,#2384bd)}
.feature-card-art,.player-cover,.now-cover-large{background:linear-gradient(135deg,#102d57,#7e1735)}
.quick-tabs button:hover,.eq-presets button:hover,.eq-presets button.active{background:linear-gradient(135deg,#153f78,#8b1739)}
.visualizer{background:linear-gradient(180deg,rgba(17,65,121,.08),rgba(216,173,97,.14));box-shadow:inset 0 0 0 1px rgba(216,173,97,.08)}
.lyrics-lines p.active{text-shadow:0 0 22px rgba(39,135,195,.58),0 0 36px rgba(216,173,97,.24)}
input[type="range"]{background:linear-gradient(90deg,var(--gold) var(--range-progress),var(--surface-3) var(--range-progress))}
button,#audio{touch-action:manipulation}

@media (max-width:720px){
  .now-panel .visualizer{display:block;grid-column:1/-1;height:70px;margin-top:4px}
  #immersiveVisualizer{display:block;height:30%;opacity:.92}
  .player-bar{padding-bottom:calc(8px + env(safe-area-inset-bottom));height:calc(var(--player) + env(safe-area-inset-bottom))}
  .play-button{min-width:44px;min-height:44px}
}

/* v1.3.0 · playlists locales y cola virtualizada */
.secondary-button.danger { border-color: color-mix(in srgb, #b51f45 55%, transparent); color: #d95a78; }
.secondary-button.danger:hover { background: color-mix(in srgb, #b51f45 16%, transparent); }
.queue-summary { margin: 0 0 .75rem; padding: .5rem .75rem; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
  .section-controls { gap: .4rem; flex-wrap: wrap; }
  .section-controls .secondary-button.compact { min-height: 38px; }
}

/* v1.3.0 · metadatos, álbumes, inicio automático y mezclas privadas */
.card-actions {
  position:absolute; inset:auto 10px 10px 10px; z-index:3;
  display:flex; justify-content:flex-end; gap:7px;
  opacity:0; transform:translateY(8px); transition:.2s ease;
}
.media-card:hover .card-actions,.media-card:focus-within .card-actions { opacity:1; transform:none; }
.card-actions button {
  width:38px; height:38px; border:1px solid rgba(255,255,255,.26); border-radius:50%;
  background:color-mix(in srgb,var(--bg) 72%,transparent); color:#fff; cursor:pointer;
  backdrop-filter:blur(14px); box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.card-actions button:hover { background:linear-gradient(135deg,var(--blue),var(--wine)); border-color:transparent; transform:scale(1.06); }
.track-quality,.track-credits { display:block; margin-top:6px; color:var(--muted); line-height:1.35; }
.track-quality { color:color-mix(in srgb,var(--gold) 82%,var(--text)); font-weight:700; letter-spacing:.025em; }
.track-credits { font-size:11px; }
.sound-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.sound-options label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.sound-options select { width:100%; min-height:35px; border:1px solid var(--line); border-radius:10px; padding:0 9px; background:var(--surface-2); color:var(--text); }
.security-note { display:block; border:1px solid color-mix(in srgb,var(--blue) 32%,var(--line)); border-radius:12px; padding:10px 12px; background:color-mix(in srgb,var(--blue) 8%,transparent); color:var(--text-soft); line-height:1.45; }
.media-card-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(4,10,22,.58),transparent 46%); opacity:.68; }
.media-card-art > img,.media-card-art > svg { position:relative; z-index:1; }
.card-actions { z-index:4; }
html[data-theme="light"] .card-actions button { background:rgba(17,42,78,.82); }

@media (max-width:720px) {
  .card-actions { opacity:1; transform:none; }
  .card-actions button { width:36px; height:36px; }
  .sound-options { grid-template-columns:1fr 1fr; }
  .track-credits { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

/* JC Music v1.4.0 · navegación fija, PWA persistente y móvil estable */
:root {
  --topbar: 126px;
  --app-height: 100dvh;
}
html, body { width:100%; height:100%; min-height:100%; }
body { overscroll-behavior:none; }
.app-shell { height:calc(var(--app-height, 100dvh) - var(--player)); min-height:0; }
.workspace { display:flex; flex-direction:column; min-height:0; }
.topbar {
  flex:0 0 var(--topbar);
  height:var(--topbar);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  padding:9px 18px 8px;
  position:relative;
  z-index:90;
}
.topbar-main { display:flex; align-items:center; gap:12px; min-height:50px; }
.quick-nav {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:0 1px 2px;
  scroll-snap-type:x proximity;
}
.quick-nav::-webkit-scrollbar { display:none; }
.quick-nav-button {
  flex:0 0 auto;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-soft);
  cursor:pointer;
  scroll-snap-align:start;
  white-space:nowrap;
  transition:.18s ease;
}
.quick-nav-button:hover { color:var(--text); border-color:var(--line-strong); transform:translateY(-1px); }
.quick-nav-button.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,#153f78,#8b1739); box-shadow:0 8px 20px rgba(17,58,112,.2); }
.main-content {
  flex:1 1 auto;
  height:auto;
  min-height:0;
  padding-bottom:40px;
}
.player-actions { min-width:0; }
.next-track-preview {
  min-width:0;
  max-width:245px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.next-track-preview > img { width:38px; height:38px; border-radius:8px; object-fit:cover; background:var(--surface-2); }
.next-track-preview > span { min-width:0; display:flex; flex-direction:column; }
.next-track-preview small { color:var(--gold); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.next-track-preview strong,.next-track-preview em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.next-track-preview strong { font-size:12px; }
.next-track-preview em { color:var(--muted); font-size:10px; font-style:normal; }
.next-track-preview.empty { grid-template-columns:1fr; }
.next-track-preview.empty > span { color:var(--muted); font-size:10px; }
.next-track-preview.empty > strong { color:var(--text-soft); font-size:12px; }
.player-actions { gap:8px; }

/* Imágenes reales en todas las vistas */
.song-cover img,.media-card-art img,.feature-card-art img,.player-cover img,.now-cover-large img,.immersive-cover img,.next-track-preview img {
  width:100%; height:100%; display:block; object-fit:cover;
}
.song-cover,.player-cover,.now-cover-large,.media-card-art,.feature-card-art { isolation:isolate; }

@media (max-width:1180px) {
  .next-track-preview { max-width:190px; }
}

@media (max-width:940px) {
  :root { --topbar:122px; }
  .topbar { padding-inline:12px; }
  .topbar-main { gap:8px; }
  .global-search { max-width:none; }
  .sidebar { bottom:calc(var(--player) + env(safe-area-inset-bottom)); }
  .sidebar.open + .sidebar-backdrop { inset:0 0 calc(var(--player) + env(safe-area-inset-bottom)); }
}

@media (max-width:720px) {
  :root { --player:86px; --topbar:112px; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { width:100vw; max-width:100vw; min-width:0; overflow:hidden; }
  button,input,select,textarea { font-size:16px; }
  .app-shell { width:100vw; max-width:100vw; height:calc(var(--app-height, 100dvh) - var(--player) - env(safe-area-inset-bottom)); }
  .topbar {
    height:var(--topbar);
    flex-basis:var(--topbar);
    padding:calc(7px + env(safe-area-inset-top)) 8px 6px;
    gap:5px;
  }
  .topbar-main { min-height:46px; }
  .topbar .icon-button { min-width:40px; height:40px; }
  .global-search { min-width:0; }
  .search-wrap input { height:42px; padding-left:42px; padding-right:10px; border-radius:13px; font-size:16px; }
  .search-wrap > svg { left:13px; }
  .topbar-actions { gap:4px; }
  .topbar-actions #refreshButton { display:none; }
  .quick-nav { gap:6px; padding-bottom:1px; }
  .quick-nav-button { min-height:33px; padding:0 11px; font-size:12px; }
  .main-content {
    height:auto;
    min-height:0;
    padding:10px 9px calc(28px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scroll-padding-top:8px;
  }
  .hero { min-height:190px; padding:21px 18px; border-radius:20px; }
  .hero h1 { font-size:36px; line-height:1; }
  .hero p:not(.eyebrow) { margin:12px 0 17px; font-size:14px; }
  .hero-visual { display:none; }
  .hero-content { max-width:100%; }
  .hero-actions { flex-wrap:nowrap; }
  .hero-actions .primary-button,.hero-actions .secondary-button { flex:1; padding-inline:10px; font-size:13px; white-space:nowrap; }
  .content-section { padding:12px; border-radius:18px; }
  .section-heading { flex-direction:column; gap:10px; }
  .section-controls { width:100%; flex-direction:row; align-items:center; justify-content:space-between; overflow-x:auto; padding-bottom:3px; }
  .section-controls .secondary-button.compact,.sort-control { flex:0 0 auto; }
  .sort-control span { display:none; }
  .sort-control select { min-height:38px; }
  .dashboard-grid { display:block; }
  .now-panel { margin-top:12px; grid-template-columns:92px minmax(0,1fr); border-radius:18px; }
  .now-cover-large { width:92px; height:92px; aspect-ratio:1; grid-row:auto; }
  .now-panel-copy { min-width:0; }
  .now-panel-copy strong,.now-panel-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .quick-tabs,.eq-panel,.now-panel .visualizer,.star-rating { grid-column:1 / -1; }
  .eq-panel { overflow:hidden; }
  .eq-presets { display:flex; overflow-x:auto; padding-bottom:4px; }
  .eq-presets button { flex:0 0 auto; }
  .sound-options { grid-template-columns:1fr 1fr; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .media-card { min-width:0; }
  .media-card-copy { padding:9px; }
  .featured-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }

  /* Las filas pasan a tarjetas para que ninguna acción quede fuera de pantalla. */
  .table-wrap { overflow:visible; border:0; background:transparent; }
  .song-table,.song-table tbody { display:block; width:100%; }
  .song-table thead { display:none; }
  .song-row {
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title duration" "album album" "actions actions";
    align-items:center;
    gap:5px 8px;
    margin-bottom:8px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface-2);
  }
  .song-row td { display:block; width:auto; padding:0; border:0; }
  .song-row .index-column,.song-row .rating-column { display:none; }
  .song-row td:nth-child(2) { grid-area:title; min-width:0; }
  .song-row td:nth-child(3) { grid-area:album; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .song-row td:nth-child(4) { display:none; }
  .song-row td:nth-child(5) { grid-area:duration; color:var(--muted); font-size:12px; }
  .song-row td:nth-child(6) { grid-area:actions; min-width:0; }
  .song-title-cell { min-width:0; }
  .song-cover { width:50px; height:50px; flex-basis:50px; }
  .row-actions { width:100%; display:flex; justify-content:flex-start; gap:7px; overflow-x:auto; scrollbar-width:none; padding-top:5px; }
  .row-actions::-webkit-scrollbar { display:none; }
  .row-actions button { flex:0 0 38px; width:38px; height:38px; }

  .player-bar {
    width:100vw;
    max-width:100vw;
    height:calc(var(--player) + env(safe-area-inset-bottom));
    grid-template-columns:minmax(0,1fr) auto;
    gap:5px;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  }
  .now-playing { min-width:0; gap:8px; }
  .player-cover { width:50px; height:50px; flex-basis:50px; }
  .track-copy { min-width:0; }
  .track-copy strong { font-size:13px; }
  .track-copy span { font-size:11px; }
  .transport { min-width:154px; }
  .transport-buttons { gap:0; justify-content:flex-end; }
  .transport-buttons .icon-button { min-width:38px; width:38px; height:38px; padding:0; }
  .play-button { width:44px; height:44px; }
  .player-actions,.next-track-preview { display:none; }
  .toast-region { left:10px; right:10px; bottom:calc(var(--player) + env(safe-area-inset-bottom) + 10px); }
  .toast { max-width:none; }
  .queue-panel { bottom:calc(var(--player) + env(safe-area-inset-bottom)); width:100vw; right:-100vw; }
  .queue-panel.open { right:0; }
  .modal-dialog { width:calc(100vw - 18px); max-width:none; max-height:calc(var(--app-height,100dvh) - 18px); }
  .immersive-panel { width:100vw; max-width:100vw; height:var(--app-height,100dvh); padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); overflow:auto; }
  .immersive-media { min-height:38vh; }
  .immersive-side { min-height:46vh; }
}

@media (max-width:720px) and (orientation:landscape) {
  :root { --player:72px; --topbar:100px; }
  .topbar { padding-top:5px; }
  .quick-nav-button { min-height:30px; }
  .main-content { padding-top:7px; }
  .hero { display:none; }
  .dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(240px,.7fr); gap:10px; margin-top:0; }
  .now-panel { margin-top:0; position:relative; display:block; max-height:calc(var(--app-height,100dvh) - var(--topbar) - var(--player) - 24px); overflow:auto; }
  .now-cover-large { width:min(150px,40vh); height:min(150px,40vh); margin:8px auto; }
  .now-panel .visualizer { height:50px; }
  .eq-panel,.quick-tabs { margin-top:8px; }
  .player-bar { height:calc(var(--player) + env(safe-area-inset-bottom)); }
  .player-cover { width:44px; height:44px; flex-basis:44px; }
  .content-section { min-height:0; }
  .immersive-panel { grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); overflow:hidden; }
  .immersive-media,.immersive-side { min-height:0; height:calc(var(--app-height,100dvh) - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .immersive-side { overflow:auto; }
}


/* Próxima pista y controles accesibles también en móvil */
@media (max-width:720px) {
  .transport-buttons #shuffleControl { display:none; }
  .transport { min-width:158px; }
  .transport-buttons { justify-content:flex-end; }
  .player-actions {
    display:block;
    position:absolute;
    left:66px;
    right:164px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    min-width:0;
    pointer-events:none;
  }
  .player-actions > :not(.next-track-preview) { display:none !important; }
  .next-track-preview {
    display:block;
    max-width:none;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .next-track-preview img,.next-track-preview small,.next-track-preview em { display:none; }
  .next-track-preview > span { display:block; min-width:0; }
  .next-track-preview strong {
    display:block;
    color:var(--muted);
    font-size:9px;
    font-weight:600;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .next-track-preview strong::before { content:"Siguiente: "; color:var(--gold); }
  .next-track-preview.empty > strong::before { content:""; }
}

/* JC Music 1.4.1: ajustes centralizados y navegación móvil estable */
.settings-panel { width:100%; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.settings-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); box-shadow:var(--shadow-soft); }
.settings-card-wide { grid-column:1 / -1; }
.settings-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.settings-card-heading span { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.14em; }
.settings-card-heading h3 { margin:4px 0 0; font-size:19px; }
.settings-actions { display:flex; flex-wrap:wrap; gap:9px; }
.settings-note { color:var(--muted); line-height:1.55; font-size:13px; }
.settings-kv { display:grid; grid-template-columns:minmax(120px,.45fr) minmax(0,1fr); gap:9px 14px; }
.settings-kv span { color:var(--muted); }
.settings-kv strong { min-width:0; overflow-wrap:anywhere; }
.external-search-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.external-search-bar input,.authorized-import input { width:100%; min-height:44px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); }
.authorized-import { display:grid; grid-template-columns:auto auto minmax(220px,1fr); align-items:end; gap:10px; margin-top:14px; }
.authorized-import > label:last-child { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.mobile-dock { display:none; }

@media (max-width:900px) {
  .settings-grid { grid-template-columns:1fr; }
  .settings-card-wide { grid-column:auto; }
  .authorized-import { grid-template-columns:1fr; align-items:stretch; }
}

@media (max-width:720px) {
  :root { --player:76px; --topbar:62px; --mobile-dock:56px; }
  .quick-nav { display:none; }
  .topbar { height:var(--topbar); flex-basis:var(--topbar); padding:calc(6px + env(safe-area-inset-top)) 8px 6px; }
  .topbar-title { display:none; }
  .app-shell { height:calc(var(--app-height,100dvh) - var(--player) - var(--mobile-dock) - env(safe-area-inset-bottom)); }
  .main-content { padding-bottom:18px; }
  .mobile-dock {
    position:fixed;
    z-index:80;
    left:0; right:0;
    bottom:calc(var(--player) + env(safe-area-inset-bottom));
    height:var(--mobile-dock);
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--background) 94%,transparent);
    backdrop-filter:blur(22px) saturate(1.25);
    box-shadow:0 -10px 30px rgba(0,0,0,.18);
  }
  .mobile-dock button { min-width:0; border:0; background:transparent; color:var(--muted); display:grid; place-content:center; gap:2px; padding:4px 1px; }
  .mobile-dock button span { font-size:18px; line-height:1; }
  .mobile-dock button small { max-width:100%; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-dock button.active { color:var(--gold); background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 12%,transparent)); }
  .player-bar { bottom:0; height:calc(var(--player) + env(safe-area-inset-bottom)); }
  .sidebar { bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom)); }
  .sidebar.open + .sidebar-backdrop { inset:0 0 calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom)); }
  .queue-panel { bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom)); }
  .toast-region { bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom) + 10px); }
  .now-panel { grid-template-columns:76px minmax(0,1fr); padding:12px; }
  .now-cover-large { width:76px; height:76px; }
  .now-panel .visualizer { grid-column:1 / -1; height:64px; }
  .quick-tabs,.star-rating { grid-column:1 / -1; }
  .settings-card { padding:14px; border-radius:16px; }
  .settings-kv { grid-template-columns:1fr; gap:4px; }
  .settings-kv strong { margin-bottom:8px; }
  .external-search-bar { grid-template-columns:1fr; }
  .hero { display:none; }
  .content-section { margin-top:0; }
  .dashboard-grid { margin-top:0; }
}

@media (max-width:720px) and (orientation:landscape) {
  :root { --player:66px; --topbar:58px; --mobile-dock:48px; }
  .mobile-dock button { grid-auto-flow:column; gap:4px; }
  .mobile-dock button span { font-size:15px; }
  .mobile-dock button small { font-size:8px; }
  .app-shell { height:calc(var(--app-height,100dvh) - var(--player) - var(--mobile-dock) - env(safe-area-inset-bottom)); }
  .dashboard-grid { grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); }
  .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-card-wide { grid-column:1 / -1; }
}


/* JC Music 1.4.1: temas limpios, hoja inmersiva y gestos */
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 8%, rgba(190,20,39,.13), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(112,7,19,.10), transparent 38%),
    linear-gradient(145deg,#030303,#090909 58%,#050505);
}
html[data-theme="light"] body {
  background:
    linear-gradient(90deg,transparent 0 96%,rgba(23,108,174,.035) 96%),
    linear-gradient(#fff,#f9fcff);
}
html[data-theme="light"] .ambient-layer span:nth-child(1){background:#4a9ed7;opacity:.065}
html[data-theme="light"] .ambient-layer span:nth-child(2){background:#f1a06d;opacity:.07}
html[data-theme="light"] .ambient-layer span:nth-child(3){background:#78b8e7;opacity:.055}
html[data-theme="light"] .primary-button,
html[data-theme="light"] .play-button { background:linear-gradient(135deg,#176cae,#2f89c8); color:#fff; }
html[data-theme="light"] .nav-item.active { background:linear-gradient(90deg,#176cae,#5ca6d8); color:#fff; }
html[data-theme="light"] .quick-nav-button.active,
html[data-theme="light"] .mobile-dock button.active { color:#176cae; }
html[data-theme="light"] .settings-card,
html[data-theme="light"] .card,
html[data-theme="light"] .song-row { box-shadow:0 8px 28px rgba(33,104,155,.08); }

.immersive-drag-handle { display:none; }
@media (max-width:820px) {
  .immersive-panel {
    transform:translate3d(0,var(--sheet-y,0),0);
    opacity:var(--sheet-opacity,1);
    transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
    will-change:transform,opacity;
  }
  .immersive-panel.dragging { transition:none; }
  .immersive-drag-handle {
    position:fixed; z-index:15; top:calc(5px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:3px; width:190px; padding:5px 12px 7px;
    border:1px solid var(--line); border-radius:0 0 14px 14px;
    background:color-mix(in srgb,var(--surface-solid) 92%,transparent); color:var(--muted); backdrop-filter:blur(18px);
    pointer-events:none;
  }
  .immersive-drag-handle span { width:54px; height:5px; border-radius:99px; background:var(--line-strong); }
  .immersive-drag-handle small { font-size:9px; letter-spacing:.03em; }
  .immersive-close { position:fixed; top:calc(12px + env(safe-area-inset-top)); right:12px; z-index:20; }
  .immersive-panel { padding-top:calc(48px + env(safe-area-inset-top)); }
  .main-content { touch-action:pan-y; }
}

/* Paleta final v1.4.1: prevalece sobre estilos históricos del proyecto. */
:root {
  --bg:#050505;
  --bg-soft:#0b0b0c;
  --surface:rgba(17,17,18,.92);
  --surface-solid:#111112;
  --surface-2:#181819;
  --surface-3:#242426;
  --text:#fffafa;
  --text-soft:#d7cdcf;
  --muted:#91878a;
  --line:rgba(217,35,54,.27);
  --line-strong:rgba(239,55,73,.52);
  --accent:#e12d41;
  --accent-2:#8e101f;
  --accent-soft:rgba(225,45,65,.16);
  --gold:#ef725d;
  --shadow:0 24px 72px rgba(0,0,0,.46);
}
html[data-theme="light"] {
  --bg:#ffffff;
  --bg-soft:#f8fbfe;
  --surface:rgba(255,255,255,.95);
  --surface-solid:#ffffff;
  --surface-2:#f4f9fd;
  --surface-3:#eaf3fa;
  --text:#10243c;
  --text-soft:#405d79;
  --muted:#6b8298;
  --line:rgba(29,109,175,.24);
  --line-strong:rgba(29,109,175,.48);
  --accent:#176eaf;
  --accent-2:#f29a5a;
  --accent-soft:rgba(23,110,175,.12);
  --gold:#e78949;
  --shadow:0 20px 58px rgba(39,93,134,.14);
}
@media (max-width:720px) {
  .mobile-dock { background:color-mix(in srgb,var(--bg) 94%,transparent); }
  .settings-shortcut { display:none !important; }
}

/* JC Music v1.6.0 · inicio editorial, reproductor móvil y optimización */
.hero {
  min-height:220px;
  padding:28px 34px;
}
.hero h1 { font-size:clamp(36px,5vw,62px); }
.home-dashboard { display:grid; gap:18px; margin-bottom:22px; }
.home-shelf { min-width:0; padding:16px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface) 88%,transparent); box-shadow:0 12px 34px rgba(0,0,0,.08); content-visibility:auto; contain-intrinsic-size:250px; }
.rail-heading { gap:12px; margin-bottom:12px; }
.rail-heading > div { min-width:0; }
.rail-heading span { display:block; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.14em; }
.rail-heading h3 { margin:3px 0 0; font-size:20px; }
.rail-heading button { flex:0 0 auto; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text-soft); }
.home-card-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(168px,210px); gap:11px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:thin; padding:1px 1px 7px; }
.home-media-card { min-width:0; display:grid; grid-template-rows:144px auto; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--surface-2); color:var(--text); text-align:left; cursor:pointer; scroll-snap-align:start; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; contain:layout paint style; }
.home-media-card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 13px 28px rgba(0,0,0,.16); }
.home-media-card > img { width:100%; height:144px; object-fit:cover; background:var(--surface-3); }
.home-media-card > span:last-child { min-width:0; display:block; padding:10px; }
.home-media-card small,.home-media-card strong,.home-media-card em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-media-card small { margin-bottom:4px; color:var(--accent); font-size:9px; font-style:normal; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.home-media-card strong { font-size:13px; }
.home-media-card em { margin-top:3px; color:var(--muted); font-size:11px; font-style:normal; }
.playlist-home-card { grid-template-rows:144px auto; }
.home-playlist-icon { display:grid !important; place-items:center; width:100%; height:144px; padding:0 !important; background:linear-gradient(145deg,var(--surface-3),var(--accent-soft)); color:var(--accent); font-size:58px; }
.home-empty { grid-column:1/-1; margin:0; padding:18px; border:1px dashed var(--line); border-radius:13px; color:var(--muted); }
.mobile-next-track { display:none; }
.media-card,.song-row { contain:layout paint style; }

/* El checkbox no hereda el tamaño de los campos de texto. */
.authorized-import input:not([type="checkbox"]) { width:100%; min-height:44px; padding:0 13px; }
.authorized-import .checkbox-row { display:flex; align-items:center; align-self:center; gap:8px; min-height:44px; padding:0 8px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.authorized-import .checkbox-row input[type="checkbox"] { flex:0 0 18px; width:18px; height:18px; min-height:0; margin:0; padding:0; accent-color:var(--accent); }
.authorized-import .checkbox-row span { color:var(--text-soft); font-size:13px; white-space:nowrap; }

@media (max-width:720px) {
  :root { --player:98px; --topbar:58px; --mobile-dock:54px; }
  .topbar { height:var(--topbar); flex-basis:var(--topbar); display:block; padding:calc(7px + env(safe-area-inset-top)) 8px 5px; overflow:visible; }
  .topbar-main { min-height:42px; display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; gap:7px; }
  .topbar-main > .mobile-only { grid-column:1; }
  .global-search { grid-column:2; width:100%; max-width:none; margin:0; min-width:0; }
  .search-wrap input { width:100%; height:40px; padding:0 11px 0 39px; border-radius:12px; }
  .search-wrap > svg { left:12px; width:17px; height:17px; }
  .search-suggestions { position:fixed; z-index:160; left:8px; right:8px; top:calc(var(--topbar) + env(safe-area-inset-top) + 2px); max-height:min(58vh,430px); }
  .topbar-actions { grid-column:3; width:40px; display:block; }
  .topbar-actions #themeButton { width:40px; min-width:40px; height:40px; }
  .topbar-actions #refreshButton,.topbar-title { display:none !important; }
  .quick-nav { display:none !important; }
  .app-shell { height:calc(var(--app-height,100dvh) - var(--player) - var(--mobile-dock) - env(safe-area-inset-bottom)); }
  .main-content { padding:8px 8px 18px; scroll-padding-top:0; }
  .hero { display:flex; min-height:132px; padding:17px 16px; border-radius:17px; }
  .hero .eyebrow { font-size:8px; }
  .hero h1 { margin:5px 0 0; font-size:28px; letter-spacing:-1px; }
  .hero p:not(.eyebrow) { max-width:94%; margin:7px 0 11px; font-size:11px; line-height:1.35; }
  .hero-actions { gap:7px; }
  .hero-actions .primary-button,.hero-actions .secondary-button { min-height:36px; padding:0 9px; font-size:11px; }
  .home-dashboard { gap:12px; margin-bottom:14px; }
  .home-shelf { padding:11px; border-radius:15px; }
  .rail-heading { margin-bottom:9px; }
  .rail-heading h3 { font-size:17px; }
  .rail-heading button { padding:6px 8px; font-size:11px; }
  .home-card-row { grid-auto-columns:138px; gap:8px; }
  .home-media-card { grid-template-rows:112px auto; border-radius:13px; }
  .home-media-card > img,.home-playlist-icon { height:112px; }
  .home-media-card > span:last-child { padding:8px; }
  .home-media-card strong { font-size:12px; }
  .home-media-card em { font-size:10px; }
  .content-section { padding:10px; }

  /* Reproductor móvil en dos filas: información/controles y progreso completo. */
  .player-bar {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:58px 24px;
    align-items:center;
    gap:2px 7px;
    width:100vw;
    max-width:100vw;
    height:calc(var(--player) + env(safe-area-inset-bottom));
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .now-playing { grid-column:1; grid-row:1; min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:8px; }
  .player-cover { width:46px; height:46px; flex-basis:46px; grid-row:1; }
  .track-copy { min-width:0; display:block; }
  .track-copy strong,.track-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .track-copy strong { font-size:12px; line-height:1.2; }
  .track-copy > span:not(.mobile-next-track) { margin-top:2px; font-size:10px; }
  .mobile-next-track { display:block !important; margin-top:3px; color:var(--muted); font-size:9px !important; line-height:1.1; }
  .favorite-button { display:none; }
  .transport { display:contents; }
  .transport-buttons { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:0; }
  .transport-buttons .icon-button { min-width:34px; width:34px; height:34px; padding:0; }
  .transport-buttons #shuffleControl,.transport-buttons #repeatButton { display:none; }
  .play-button { width:42px; height:42px; min-width:42px; min-height:42px; }
  .timeline { grid-column:1 / -1; grid-row:2; display:grid !important; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; gap:6px; min-width:0; }
  .timeline span { color:var(--muted); font-size:9px; text-align:center; }
  .timeline input[type="range"] { width:100%; min-width:0; height:18px; }
  .player-actions { display:none !important; position:static !important; }
  .mobile-dock { bottom:calc(var(--player) + env(safe-area-inset-bottom)); height:var(--mobile-dock); }
  .sidebar { bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom)); }
  .queue-panel { bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom)); }
  .toast-region { bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom) + 8px); }
  .authorized-import .checkbox-row { justify-content:flex-start; width:max-content; max-width:100%; }
}

@media (max-width:720px) and (orientation:landscape) {
  :root { --player:80px; --topbar:52px; --mobile-dock:44px; }
  .topbar { padding-top:calc(4px + env(safe-area-inset-top)); }
  .topbar-main,.search-wrap input { min-height:36px; height:36px; }
  .topbar-actions #themeButton,.topbar .icon-button { width:36px; min-width:36px; height:36px; }
  .hero { min-height:105px; padding:12px 15px; }
  .hero p:not(.eyebrow) { display:none; }
  .hero h1 { font-size:24px; }
  .hero-actions { margin-top:8px; }
  .player-bar { grid-template-rows:46px 20px; padding-top:4px; padding-bottom:calc(4px + env(safe-area-inset-bottom)); }
  .player-cover { width:40px; height:40px; flex-basis:40px; }
  .play-button { width:38px; height:38px; min-width:38px; min-height:38px; }
  .transport-buttons .icon-button { width:31px; min-width:31px; height:31px; }
}


/* JC Music v1.6.0 · minirreproductor estable, iPhone sin espacios dobles e importación por carpetas */
.import-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
}
.import-buttons .secondary-button { flex:1 1 220px; }
body.has-current-track .player-bar {
  opacity:1;
  visibility:visible;
}
.player-bar {
  transition:opacity .18s ease, transform .18s ease;
}
.player-cover img { display:block; }

@media (max-width:820px) {
  :root {
    --topbar:58px;
    --player:86px;
    --mobile-dock:52px;
  }
  html, body {
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
  }
  body {
    padding:0;
  }
  .app-shell {
    display:block;
    width:100%;
    height:var(--app-height,100dvh) !important;
    padding:0;
  }
  .workspace {
    width:100%;
    height:100%;
    padding-top:calc(var(--topbar) + env(safe-area-inset-top));
    padding-bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .topbar {
    position:fixed;
    z-index:120;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:calc(var(--topbar) + env(safe-area-inset-top)) !important;
    padding:calc(7px + env(safe-area-inset-top)) 8px 7px !important;
    margin:0;
  }
  .topbar-main {
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
    width:100%;
    height:100%;
  }
  .global-search {
    grid-column:2;
    min-width:0;
    width:100%;
    max-width:none;
    margin:0;
  }
  .search-wrap input {
    width:100%;
    height:40px;
    min-height:40px;
    padding:0 11px 0 39px;
  }
  .search-suggestions {
    top:calc(var(--topbar) + env(safe-area-inset-top) + 2px) !important;
  }
  .main-content {
    width:100%;
    height:100% !important;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    padding:10px 10px 18px;
    scroll-padding-top:10px;
  }
  .mobile-dock {
    position:fixed;
    z-index:110;
    left:0;
    right:0;
    bottom:calc(var(--player) + env(safe-area-inset-bottom)) !important;
    width:100%;
    height:var(--mobile-dock) !important;
    padding:0 4px;
  }
  .player-bar {
    position:fixed;
    z-index:115;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(var(--player) + env(safe-area-inset-bottom)) !important;
    min-height:0;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:54px 22px;
    align-items:center;
    gap:2px 7px;
    padding:5px 8px calc(5px + env(safe-area-inset-bottom)) !important;
    margin:0;
  }
  .now-playing {
    grid-column:1;
    grid-row:1;
    min-width:0;
    gap:8px;
  }
  .player-cover {
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }
  .track-copy {
    min-width:0;
    width:100%;
  }
  .track-copy strong {
    font-size:12px;
    line-height:1.15;
  }
  .track-copy > span {
    margin-top:2px;
    font-size:10px;
    line-height:1.1;
  }
  .mobile-next-track {
    display:block !important;
    margin-top:2px !important;
    font-size:9px !important;
    line-height:1.05 !important;
  }
  .transport {
    display:contents;
  }
  .transport-buttons {
    grid-column:2;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:1px;
  }
  .transport-buttons #shuffleControl,
  .transport-buttons #repeatButton {
    display:none;
  }
  .transport-buttons .icon-button {
    min-width:34px;
    width:34px;
    height:34px;
    padding:0;
  }
  .play-button {
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
  }
  .timeline {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:31px minmax(0,1fr) 31px !important;
    align-items:center;
    gap:6px;
    width:100%;
    min-width:0;
  }
  .timeline span {
    font-size:9px;
    color:var(--muted);
  }
  .timeline input {
    width:100%;
    min-width:0;
  }
  .player-actions {
    display:none !important;
  }
  .sidebar {
    bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom)) !important;
  }
  .queue-panel {
    bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom)) !important;
  }
  .toast-region {
    bottom:calc(var(--player) + var(--mobile-dock) + env(safe-area-inset-bottom) + 8px) !important;
  }
  .authorized-import {
    grid-template-columns:1fr !important;
    align-items:stretch;
  }
  .import-buttons {
    display:grid;
    grid-template-columns:1fr;
  }
  .authorized-import .checkbox-row {
    width:auto !important;
    max-width:100%;
  }
}

@media (max-width:820px) and (orientation:landscape) {
  :root {
    --topbar:50px;
    --player:72px;
    --mobile-dock:44px;
  }
  .topbar {
    padding:calc(4px + env(safe-area-inset-top)) 8px 4px !important;
  }
  .search-wrap input {
    height:36px;
    min-height:36px;
  }
  .player-bar {
    grid-template-rows:44px 18px;
    padding-top:3px !important;
    padding-bottom:calc(3px + env(safe-area-inset-bottom)) !important;
  }
  .player-cover {
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }
  .play-button {
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
  }
}

/* JC Music v1.6.0 · DJ Studio */
.dj-panel{width:100%;display:grid;gap:18px}.dj-panel.hidden{display:none}.dj-hero,.stems-heading,.studio-stems-header{display:flex;align-items:center;justify-content:space-between;gap:18px}.dj-hero{padding:22px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:24px;background:linear-gradient(125deg,color-mix(in srgb,#071a35 92%,transparent),color-mix(in srgb,#72172e 48%,var(--surface)));overflow:hidden;position:relative}.dj-hero:after{content:"";position:absolute;inset:auto -8% -90% 40%;height:220px;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 28%,transparent),transparent 67%);pointer-events:none}.dj-hero span,.stems-heading span,.dj-card-title span{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--gold)}.dj-hero h2,.stems-heading h3{margin:4px 0;font-size:clamp(26px,4vw,44px)}.dj-hero p,.stems-heading p{margin:0;color:var(--muted)}.dj-engine-actions{display:flex;gap:9px;flex-wrap:wrap;z-index:1}.dj-notice,.dj-warning{padding:12px 14px;border:1px solid var(--line);border-radius:14px;color:var(--muted);background:color-mix(in srgb,var(--surface-2) 80%,transparent)}.dj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dj-card{min-width:0;padding:17px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 94%,transparent),color-mix(in srgb,var(--bg) 60%,transparent));box-shadow:0 15px 35px rgba(0,0,0,.12)}.dj-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:15px}.dj-card-title h3{margin:2px 0 0;font-size:20px}.dj-card-title>strong{font-size:11px;color:var(--muted)}.dj-card>label{display:grid;grid-template-columns:1fr auto;gap:6px;margin:12px 0;color:var(--muted);font-size:12px}.dj-card>label input{grid-column:1/-1;width:100%}.dj-card output{color:var(--text);font-variant-numeric:tabular-nums}.dj-master-card canvas{width:100%;height:88px;border-radius:12px;background:rgba(0,0,0,.22)}.switch{position:relative;width:42px;height:24px;display:inline-block!important;margin:0!important}.switch input{position:absolute;opacity:0}.switch span{position:absolute;inset:0;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);transition:.2s}.switch span:after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+span{background:linear-gradient(135deg,#0e5ca8,#a61d3b)}.switch input:checked+span:after{transform:translateX(18px)}.stems-section{padding:20px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}.stems-mode-tabs{display:flex;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.stems-mode-tabs button{border:0;border-radius:10px;background:transparent;color:var(--muted);padding:9px 15px}.stems-mode-tabs button.active{background:linear-gradient(135deg,#153f78,#8b1739);color:white}.stems-pane{margin-top:18px}.stems-toolbar{display:flex;align-items:center;gap:13px;margin-bottom:14px}.stems-toolbar span{color:var(--muted);font-size:12px}.stem-mixer{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.stem-mixer article{display:grid;justify-items:center;gap:8px;padding:14px 8px;border:1px solid var(--line);border-radius:17px;background:var(--surface-2)}.stem-mixer article>span{font-size:11px;color:var(--muted)}.stem-mixer input[type=range]{width:100%;accent-color:var(--gold)}.stem-mixer article>div{display:flex;gap:6px}.stem-mixer button,.stem-mixer a{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text);text-decoration:none;cursor:pointer}.stem-mixer button.active{background:#a61d3b;color:white;border-color:transparent}.studio-stems-header>div:last-child{display:flex;gap:8px}.studio-stems-header strong{display:block;font-size:17px}.studio-stems-header span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.stem-progress{height:7px;margin:14px 0;border-radius:999px;background:var(--surface-3);overflow:hidden}.stem-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0d6db8,#b21f3d,#d9ad56);transition:width .35s}.studio-transport{display:grid;grid-template-columns:auto auto auto minmax(120px,1fr);align-items:center;gap:9px;margin-bottom:14px}.studio-transport>span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}.studio-transport input{width:100%}.dj-panel .hidden{display:none!important}html[data-theme="light"] .dj-hero{background:linear-gradient(125deg,#eef7ff,#fff4e9);color:#0d365e}html[data-theme="light"] .dj-master-card canvas{background:#e9f2fa}

@media(max-width:1180px){.dj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stem-mixer{grid-template-columns:repeat(5,minmax(105px,1fr));overflow-x:auto;padding-bottom:5px}}
@media(max-width:820px){.mobile-dock{grid-template-columns:repeat(6,minmax(0,1fr))!important}.dj-panel{gap:12px}.dj-hero,.stems-heading,.studio-stems-header{align-items:stretch;flex-direction:column}.dj-hero{padding:16px;border-radius:18px}.dj-engine-actions,.studio-stems-header>div:last-child{display:grid;grid-template-columns:1fr 1fr}.dj-grid{grid-template-columns:1fr}.dj-card{padding:14px}.stems-section{padding:13px;border-radius:18px}.stems-mode-tabs{width:100%}.stems-mode-tabs button{flex:1}.stems-toolbar{align-items:stretch;flex-direction:column}.stem-mixer{grid-template-columns:repeat(5,118px);overflow-x:auto;scroll-snap-type:x proximity}.stem-mixer article{scroll-snap-align:start}.studio-transport{grid-template-columns:auto auto 1fr}.studio-transport input{grid-column:1/-1}.dj-warning{font-size:11px}.mobile-dock button small{font-size:8px!important}.mobile-dock button span{font-size:16px!important}}

/* JC Music v1.6.0 · Sala Familiar y Performance Lab */
:root{--live-accent:#b11d3d;--live-accent-2:#153f78}
.performance-lab,.party-panel{width:100%;display:grid;gap:16px}.performance-lab{padding:20px;border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line));border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface-2) 88%,transparent))}.performance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.performance-card{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}.performance-card h4{margin:0 0 12px;font-size:17px}.performance-card p{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.45}.performance-actions,.cue-grid,.loop-grid{display:flex;flex-wrap:wrap;gap:7px}.cue-grid button,.loop-grid button{min-width:48px;min-height:39px;border:1px solid var(--line);border-radius:11px;background:var(--surface-3);color:var(--text);font-weight:800;cursor:pointer}.cue-grid button.active,.loop-grid button.active{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--live-accent-2),var(--live-accent));box-shadow:0 8px 22px color-mix(in srgb,var(--live-accent) 24%,transparent)}.tempo-readout{min-width:170px;padding:12px 15px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);text-align:right}.tempo-readout strong{display:block;font-size:24px}.tempo-readout small{display:block;margin-top:4px;color:var(--muted)}
.party-panel.hidden{display:none}.party-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:20px;padding:24px;border:1px solid color-mix(in srgb,var(--live-accent-2) 45%,var(--line));border-radius:26px;background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--live-accent) 24%,transparent),transparent 35%),linear-gradient(135deg,color-mix(in srgb,#07182f 92%,transparent),color-mix(in srgb,#5b1029 55%,var(--surface)));color:#fff;overflow:hidden}.party-hero>div:first-child span,.party-room-header>div>span{font-size:10px;font-weight:900;letter-spacing:.15em;color:#e3bd73}.party-hero h2{margin:5px 0;font-size:clamp(30px,4vw,52px)}.party-hero p{margin:0;max-width:660px;color:#d6dce6;line-height:1.55}.party-create-grid{display:grid;grid-template-columns:1fr auto;gap:9px;align-content:center}.party-create-grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#d6dce6}.party-create-grid input{min-width:0;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:0 12px;background:rgba(0,0,0,.25);color:#fff;text-transform:none}.party-create-grid #partyJoinCode{text-transform:uppercase;letter-spacing:.18em;font-weight:900}.party-lobby{display:grid;gap:13px}.party-room-header,.party-now,.party-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.party-room-header{padding:17px 19px;border:1px solid var(--line);border-radius:19px;background:var(--surface)}.party-room-header h3{margin:4px 0;font-size:24px}.party-room-header p{margin:0;color:var(--muted)}.party-room-header>div:last-child,.party-actions{display:flex;flex-wrap:wrap;gap:8px}.party-now{padding:14px 17px;border:1px solid color-mix(in srgb,var(--live-accent) 32%,var(--line));border-radius:17px;background:linear-gradient(90deg,color-mix(in srgb,var(--live-accent-2) 14%,var(--surface-2)),color-mix(in srgb,var(--live-accent) 12%,var(--surface-2)))}.party-now>div{display:flex;flex-direction:column;gap:4px}.party-now span{font-size:9px;letter-spacing:.14em;color:var(--muted)}.switch-label{display:flex;align-items:center;gap:8px;color:var(--text-soft);font-size:12px}.party-queue{display:grid;gap:8px}.party-queue-empty,.party-empty-note{padding:18px;border:1px dashed var(--line);border-radius:17px;color:var(--muted);background:var(--surface-2)}.party-empty-note strong{color:var(--text)}.party-empty-note p{margin:5px 0 0;line-height:1.5}.party-queue-item{display:grid;grid-template-columns:34px 50px minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:15px;background:var(--surface);transition:.18s ease}.party-queue-item:hover{transform:translateY(-1px);border-color:var(--line-strong);box-shadow:0 12px 28px rgba(0,0,0,.1)}.party-queue-item>img{width:50px;height:50px;border-radius:10px;object-fit:cover;background:var(--surface-3)}.party-queue-item>div:nth-of-type(1){display:flex;min-width:0;flex-direction:column}.party-queue-item strong,.party-queue-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.party-queue-item span{margin-top:3px;color:var(--muted);font-size:11px}.party-rank{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}.party-votes{display:grid;grid-template-columns:30px 28px 30px;align-items:center;text-align:center}.party-votes button,.party-play,.party-remove{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text);cursor:pointer}.party-votes button.active{background:var(--live-accent-2);color:#fff;border-color:transparent}.party-remove{color:var(--danger)}
.player-bar{border-top-color:color-mix(in srgb,var(--live-accent) 25%,var(--line))}.play-button{background:linear-gradient(135deg,var(--live-accent-2),var(--live-accent))}.ambient-layer span:first-child{background:color-mix(in srgb,var(--live-accent-2) 20%,transparent)}.ambient-layer span:nth-child(2){background:color-mix(in srgb,var(--live-accent) 18%,transparent)}
@media(max-width:980px){.performance-grid{grid-template-columns:1fr 1fr}.party-hero{grid-template-columns:1fr}.party-create-grid{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:820px){.mobile-dock{grid-template-columns:repeat(7,minmax(58px,1fr))!important;overflow-x:auto;scrollbar-width:none;justify-content:start}.mobile-dock::-webkit-scrollbar{display:none}.performance-lab{padding:13px;border-radius:18px}.performance-grid{grid-template-columns:1fr}.tempo-readout{width:100%;text-align:left}.party-hero{padding:17px;border-radius:19px}.party-create-grid{grid-template-columns:1fr}.party-create-grid button{width:100%}.party-room-header,.party-now{align-items:stretch;flex-direction:column}.party-room-header>div:last-child{display:grid;grid-template-columns:1fr 1fr}.party-queue-item{grid-template-columns:28px 46px minmax(0,1fr) auto;gap:8px}.party-queue-item>img{width:46px;height:46px}.party-votes{grid-column:3;justify-content:start}.party-play,.party-remove{grid-row:1;align-self:center}.party-play{grid-column:4}.party-remove{grid-column:4;grid-row:2}.party-actions{display:grid;grid-template-columns:1fr 1fr}.party-actions button{width:100%}}


/* JC Music v1.6.1 · adaptación móvil consistente, navegación de detalle y selector iOS */
.mobile-back-button { display:none; }
@media (max-width:820px) {
  :root {
    --mobile-player-h:88px;
    --mobile-dock-h:56px;
    --mobile-topbar-h:58px;
  }
  html,body {
    width:100%;
    height:var(--app-height,100dvh) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  body { position:fixed; inset:0; }
  .app-shell {
    width:100%;
    height:calc(var(--app-height,100dvh) - var(--mobile-player-h) - var(--mobile-dock-h) - env(safe-area-inset-bottom)) !important;
    min-height:0;
    display:block;
  }
  .workspace {
    width:100%;
    height:100% !important;
    min-height:0;
    padding:0 !important;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }
  .topbar {
    position:relative !important;
    inset:auto !important;
    width:100%;
    height:calc(var(--mobile-topbar-h) + env(safe-area-inset-top)) !important;
    min-height:calc(var(--mobile-topbar-h) + env(safe-area-inset-top));
    padding:calc(7px + env(safe-area-inset-top)) 8px 7px !important;
    flex:0 0 auto !important;
  }
  .topbar-main {
    display:grid !important;
    grid-template-columns:40px 40px minmax(0,1fr) auto !important;
    align-items:center;
    gap:6px;
    min-width:0;
  }
  .mobile-back-button { display:none !important; }
  body.detail-view-active .mobile-back-button { display:grid !important; }
  body:not(.detail-view-active) .global-search { grid-column:2 / 4; }
  body.detail-view-active .global-search { grid-column:3; }
  .global-search { min-width:0; width:100%; max-width:none; margin:0; }
  .topbar-actions { grid-column:4; min-width:0; }
  .topbar-actions #refreshButton { display:none; }
  .search-wrap input {
    width:100%;
    min-width:0;
    height:40px;
    min-height:40px;
    padding:0 10px 0 39px;
    font-size:16px;
    border-radius:13px;
  }
  .search-suggestions {
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    top:calc(var(--mobile-topbar-h) + env(safe-area-inset-top) + 4px) !important;
    max-height:calc(var(--app-height,100dvh) - var(--mobile-topbar-h) - var(--mobile-player-h) - var(--mobile-dock-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
  }
  .main-content {
    width:100%;
    height:auto !important;
    min-height:0;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding:10px 10px 20px !important;
    scroll-padding-top:10px;
    scroll-padding-bottom:20px;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-dock {
    position:fixed;
    z-index:110;
    left:0;right:0;
    bottom:calc(var(--mobile-player-h) + env(safe-area-inset-bottom)) !important;
    width:100%;
    height:var(--mobile-dock-h) !important;
    padding:0 max(3px,env(safe-area-inset-left)) 0 max(3px,env(safe-area-inset-right));
  }
  .player-bar {
    position:fixed;
    z-index:115;
    left:0;right:0;bottom:0;
    width:100%;
    height:calc(var(--mobile-player-h) + env(safe-area-inset-bottom)) !important;
    min-height:0 !important;
    padding:5px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:56px 22px !important;
    gap:1px 6px !important;
    box-sizing:border-box;
  }
  .now-playing { grid-column:1;grid-row:1;min-width:0;overflow:hidden; }
  .player-cover { width:46px !important;height:46px !important;flex:0 0 46px !important; }
  .track-copy { min-width:0; overflow:hidden; }
  .track-copy strong,.track-copy span { max-width:100%; }
  .transport { display:contents !important; }
  .transport-buttons { grid-column:2;grid-row:1;gap:0 !important; }
  .transport-buttons .icon-button { width:34px !important;min-width:34px !important;height:34px !important;padding:0 !important; }
  .play-button { width:42px !important;min-width:42px !important;height:42px !important;min-height:42px !important; }
  .timeline {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:30px minmax(0,1fr) 30px !important;
    gap:5px !important;
    width:100% !important;
    margin:0 !important;
  }
  .timeline input { min-width:0;width:100%; }
  .sidebar,.queue-panel { bottom:calc(var(--mobile-player-h) + var(--mobile-dock-h) + env(safe-area-inset-bottom)) !important; }
  .sidebar.open + .sidebar-backdrop { inset:0 0 calc(var(--mobile-player-h) + var(--mobile-dock-h) + env(safe-area-inset-bottom)) !important; }
  .toast-region { bottom:calc(var(--mobile-player-h) + var(--mobile-dock-h) + env(safe-area-inset-bottom) + 8px) !important; }
  .media-card,.song-row,.content-section,.settings-card,.party-hero,.dj-hero { max-width:100%; }
  .card-grid,.home-card-row,.featured-cards { min-width:0; }
}
@media (max-width:390px) {
  :root { --mobile-player-h:84px; --mobile-dock-h:52px; --mobile-topbar-h:54px; }
  .topbar-main { grid-template-columns:36px 36px minmax(0,1fr) 36px !important; gap:4px; }
  .topbar .icon-button { width:36px !important;min-width:36px !important;height:36px !important; }
  .search-wrap input { height:38px;min-height:38px;padding-left:36px; }
  .mobile-dock button small { font-size:8px !important; }
  .player-cover { width:42px !important;height:42px !important;flex-basis:42px !important; }
  .transport-buttons .icon-button { width:31px !important;min-width:31px !important;height:31px !important; }
  .play-button { width:39px !important;min-width:39px !important;height:39px !important;min-height:39px !important; }
}
@media (max-width:820px) and (orientation:landscape) {
  :root { --mobile-player-h:70px; --mobile-dock-h:44px; --mobile-topbar-h:48px; }
  .topbar { padding:calc(4px + env(safe-area-inset-top)) 8px 4px !important; }
  .search-wrap input { height:36px;min-height:36px; }
  .player-bar { grid-template-rows:44px 18px !important;padding-top:3px !important;padding-bottom:calc(3px + env(safe-area-inset-bottom)) !important; }
  .player-cover { width:38px !important;height:38px !important;flex-basis:38px !important; }
  .mobile-next-track { display:none !important; }
}