:root {
    --bg: #0d0f13;
    --surface: #171a20;
    --surface-2: #20242c;
    --text: #f4f5f7;
    --muted: #9ca4b1;
    --border: #303642;
    --accent: #78a7ff;
    --accent-strong: #a9c6ff;
    --danger: #ff8686;
    --success: #81d8a6;
    --radius: 14px;
    --space: 1rem;
    --sidebar: 220px;
    --player-height: 96px;
    --app-viewport-height: 100dvh;
    --app-viewport-width: 100vw;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; min-height:100vh; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
button,input,select { font:inherit; }
button { cursor:pointer; border:0; border-radius:9px; padding:.75rem 1rem; background:var(--accent); color:#07111f; font-weight:700; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
code { background:#0c0e12; padding:.15rem .35rem; border-radius:5px; }
.muted { color:var(--muted); }
.eyebrow { display:block; color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.notice { margin:1rem 0; padding:.85rem 1rem; border-radius:9px; border:1px solid var(--border); background:var(--surface); }
.notice-error { border-color:var(--danger); color:var(--danger); }
.notice-success { border-color:var(--success); color:var(--success); }
.loading,.empty-state { padding:2rem; border:1px dashed var(--border); border-radius:var(--radius); color:var(--muted); text-align:center; }

/* Login/setup */
.auth-page { display:grid; place-items:center; padding:1rem; }
.auth-card { width:min(100%,28rem); padding:2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.auth-card h1 { margin-top:0; }
.auth-card form { display:grid; gap:.75rem; }
.auth-card input { width:100%; padding:.8rem; border:1px solid var(--border); border-radius:8px; background:#0f1116; color:var(--text); }
.settings-form { display:grid; gap:.75rem; width:min(100%,720px); }
.settings-form label { display:grid; gap:.35rem; color:var(--muted); font-weight:700; }
.settings-form input,.settings-form select { width:100%; padding:.75rem .8rem; border:1px solid var(--border); border-radius:8px; background:#0f1116; color:var(--text); }
.settings-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-form-grid > div { grid-column:1 / -1; }
.button-danger { background:transparent; border:1px solid var(--danger); color:var(--danger); }
.compact-actions { flex-wrap:nowrap; }
.auth-card small { color:var(--muted); margin-top:-.35rem; }
.button-secondary { background:transparent; color:var(--text); border:1px solid var(--border); }

/* Admin */
.admin-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:10; }
.brand { font-weight:900; letter-spacing:.02em; }
.admin-nav { display:flex; gap:.85rem; flex-wrap:wrap; }
.admin-nav a { color:var(--muted); }
.admin-nav a:hover { color:var(--text); }
.admin-main { width:min(1200px,100%); margin:auto; padding:2rem 1.5rem 4rem; }
.admin-title h1 { margin-top:0; }
.stat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.stat-card,.admin-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.stat-card { display:grid; gap:.4rem; }
.stat-card span { color:var(--muted); font-size:.85rem; }
.stat-card strong { font-size:1.55rem; }
.admin-panel { margin-top:1rem; }
.admin-panel h2 { margin-top:0; }
.compact-dl { display:grid; gap:.4rem; margin:1.2rem 0 0; }
.compact-dl div { display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:1rem; padding:.55rem 0; border-top:1px solid var(--border); }
.compact-dl dt { color:var(--muted); }
.compact-dl dd { margin:0; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:.7rem; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-size:.82rem; }

/* App */
.app-page { overflow:hidden; min-height:var(--app-viewport-height,100dvh); }
.app-shell { display:grid; grid-template-columns:var(--sidebar) 1fr; grid-template-rows:minmax(0,1fr) var(--player-height); min-height:var(--app-viewport-height,100svh); height:var(--app-viewport-height,100dvh); overflow:hidden; }
.sidebar { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:1.5rem; padding:1.35rem 1rem; background:#11141a; border-right:1px solid var(--border); min-height:0; }
.sidebar .brand { padding:.45rem .6rem; font-size:1.45rem; line-height:1; letter-spacing:.045em; }
.main-nav { display:grid; gap:.25rem; }
.main-nav a,.admin-link { padding:.7rem .75rem; border-radius:8px; color:var(--muted); font-weight:700; }
.main-nav a:hover,.main-nav a.active,.admin-link:hover { color:var(--text); background:var(--surface-2); }
.admin-link { margin-top:auto; font-size:.88rem; }
.sidebar-logout { margin-top:auto; }
.sidebar-logout .logout-link { width:100%; text-align:left; background:transparent; color:var(--muted); padding:.7rem .75rem; }
.sidebar-logout .logout-link:hover { color:var(--text); background:var(--surface-2); }
.content { grid-column:2; grid-row:1; min-width:0; overflow:auto; padding:2rem clamp(1rem,3vw,3rem) 4rem; }
.content-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1.5rem; }
.content-header h1 { margin:.2rem 0 0; font-size:clamp(2rem,5vw,3.6rem); line-height:1; }
.catalog-summary { color:var(--muted); font-size:.9rem; text-align:right; }
.library-section { margin:2rem 0; }
.library-section h2 { margin:0 0 1rem; }
.album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:1rem; }
.artist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.artist-card { text-align:center; color:var(--text); background:var(--surface); padding:.8rem; border:1px solid transparent; min-width:0; }
.artist-card:hover { border-color:var(--border); transform:translateY(-1px); }
.artist-card strong,.artist-card > span:last-child { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artist-card > span:last-child { color:var(--muted); font-size:.82rem; margin-top:.2rem; }
.artist-cover { display:block; aspect-ratio:1; margin-bottom:.75rem; border-radius:50%; overflow:hidden; background:var(--surface-2); }
.artist-cover img { width:100%; height:100%; object-fit:cover; }
.artist-placeholder { border-radius:50%; }
.album-card { text-align:left; color:var(--text); background:var(--surface); padding:.8rem; border:1px solid transparent; min-width:0; }
.album-card:hover { border-color:var(--border); transform:translateY(-1px); }
.album-card strong,.album-card span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-card > span:last-child { color:var(--muted); font-size:.85rem; margin-top:.2rem; }
.album-cover { aspect-ratio:1; margin-bottom:.75rem; border-radius:10px; overflow:hidden; background:var(--surface-2); }
.album-cover img { width:100%; height:100%; object-fit:cover; }
.cover-placeholder { display:grid!important; place-items:center; width:100%; height:100%; color:var(--muted); font-size:2rem; background:linear-gradient(135deg,#222732,#14171d); }
.cover-placeholder.large { min-height:260px; }
.pill-list { display:flex; gap:.6rem; flex-wrap:wrap; }
.pill-list button { background:var(--surface); color:var(--text); border:1px solid var(--border); padding:.55rem .75rem; }
.text-list { display:grid; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.text-list button { display:flex; justify-content:space-between; gap:1rem; text-align:left; background:var(--surface); color:var(--text); border-radius:0; border-bottom:1px solid var(--border); }
.text-list button:last-child { border-bottom:0; }
.text-list button:hover { background:var(--surface-2); }
.text-list button span { color:var(--muted); font-weight:500; }
.year-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.75rem; }
.year-grid button { background:var(--surface); color:var(--text); border:1px solid var(--border); display:grid; gap:.25rem; }
.year-grid strong { font-size:1.35rem; }
.year-grid span { color:var(--muted); font-weight:500; font-size:.85rem; }
.album-hero { display:grid; grid-template-columns:minmax(180px,300px) 1fr; align-items:end; gap:2rem; margin-bottom:2rem; }
.artist-hero { display:grid; grid-template-columns:minmax(150px,240px) 1fr; align-items:center; gap:2rem; margin-bottom:2.5rem; }
.artist-hero-cover { aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--surface); }
.artist-hero-cover img { width:100%; height:100%; object-fit:cover; }
.artist-hero h1 { font-size:clamp(2.2rem,6vw,4.5rem); line-height:1; margin:.35rem 0 .55rem; }
.album-hero-cover { aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.album-hero-cover img { width:100%; height:100%; object-fit:cover; }
.album-hero h1 { font-size:clamp(2rem,5vw,4rem); line-height:1; margin:.35rem 0 .55rem; }
.link-button { padding:0; background:transparent; color:var(--text); }
.link-button:hover { text-decoration:underline; }
.primary-action { margin-top:1rem; border-radius:999px; }
.album-meta { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin-top:.65rem; }
.album-meta > span + span::before { content:"·"; margin-right:.45rem; }
.inline-meta-link,.section-link { padding:0; background:transparent; color:inherit; border-radius:0; }
.inline-meta-link:hover,.section-link:hover { text-decoration:underline; color:var(--accent-strong); }
.genre-year-filter { display:flex; gap:.5rem; overflow:auto; padding-bottom:.35rem; margin:-.25rem 0 1.5rem; scrollbar-width:thin; }
.genre-year-filter button { flex:0 0 auto; background:var(--surface); color:var(--muted); border:1px solid var(--border); padding:.5rem .7rem; }
.genre-year-filter button.active { color:var(--text); border-color:var(--accent); background:var(--surface-2); }
.track-list { display:grid; }
.track-row { display:grid; grid-template-columns:3rem minmax(0,1fr) auto 2.5rem; gap:.75rem; align-items:center; color:var(--text); text-align:left; background:transparent; border-radius:8px; padding:.65rem .5rem; }
.track-row:hover { background:var(--surface); }
.track-row.is-current { background:var(--surface); box-shadow:inset 3px 0 0 var(--accent); }
.track-row.is-current .track-main strong,.track-row.is-current .track-num { color:var(--accent-strong); }
.track-row.is-playing .track-play { opacity:1; color:var(--accent-strong); }
.track-num,.track-row>span:nth-child(3) { color:var(--muted); font-weight:500; }
.track-main { display:grid; min-width:0; }
.track-main strong,.track-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-main span { color:var(--muted); font-size:.82rem; font-weight:500; }
.track-play { opacity:0; }
.track-row:hover .track-play { opacity:1; }
.search-box { margin-bottom:1rem; }
.search-box input { width:min(100%,680px); padding:1rem 1.1rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:1.05rem; }

/* Player */
.player { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:minmax(200px,1fr) minmax(360px,2fr) minmax(160px,1fr); gap:1rem; align-items:center; padding:.75rem 1rem; border-top:1px solid var(--border); background:#11141a; z-index:20; }
.now-playing { display:flex; align-items:center; gap:.75rem; min-width:0; }
.player-cover-link { display:block; flex:0 0 auto; border-radius:7px; }
.player-cover-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.player-cover-wrap { display:block; width:58px; height:58px; flex:0 0 58px; border-radius:7px; overflow:hidden; background:var(--surface-2); }
.player-cover { width:100%; height:100%; object-fit:cover; }
.player-meta { display:grid; min-width:0; }
.player-meta strong,.player-meta span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-meta span { color:var(--muted); font-size:.8rem; }
.player-subtitle a { color:var(--muted); }
.player-subtitle a:hover { color:var(--text); text-decoration:underline; }
.player-center { display:grid; gap:.4rem; }
.player-controls { display:flex; align-items:center; justify-content:center; gap:.5rem; }
.icon-button,.play-button { display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%; background:transparent; color:var(--text); }
.icon-button:hover,.icon-button.active { background:var(--surface-2); color:var(--accent-strong); }
.play-button { background:var(--text); color:var(--bg); }
.timeline { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:.6rem; color:var(--muted); font-size:.75rem; }
input[type=range] { accent-color:var(--accent); }
.timeline input,.volume-control input { width:100%; }
.volume-control { display:flex; justify-content:flex-end; align-items:center; gap:.45rem; }
.volume-control input { max-width:130px; }

@media (max-width: 900px) {
    :root { --sidebar: 170px; }
    .stat-grid { grid-template-columns:repeat(3,1fr); }
    .player { grid-template-columns:minmax(160px,1fr) minmax(300px,2fr); }
    .volume-control { display:none; }
}
@media (max-width: 680px) {
    :root { --player-height: auto; }
    .app-shell { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto auto; min-height:var(--app-viewport-height,100svh); height:var(--app-viewport-height,100dvh); }
    .sidebar { grid-column:1; grid-row:2; flex-direction:row; align-items:center; padding:.35rem .45rem; border-right:0; border-top:1px solid var(--border); overflow:auto; }
    .sidebar .brand,.sidebar > .admin-link { display:none; }
    .sidebar-logout { display:none; }
    .main-nav { display:flex; width:100%; justify-content:space-between; gap:.15rem; }
    .main-nav a { font-size:.78rem; padding:.55rem .45rem; white-space:nowrap; }
    .content { grid-column:1; grid-row:1; padding:1.2rem 1rem 2rem; }
    .player { grid-column:1; grid-row:3; grid-template-columns:minmax(0,1fr) auto; padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); min-height:72px; }
    .player-center { display:block; }
    .timeline,.player-center .icon-button { display:none; }
    .player-controls { justify-content:flex-end; }
    .player-center .play-button { display:grid; width:42px; height:42px; }
    .player-cover-wrap { width:48px; height:48px; flex-basis:48px; }
    .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .artist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .album-hero { grid-template-columns:110px 1fr; gap:1rem; align-items:center; }
    .artist-hero { grid-template-columns:90px 1fr; gap:1rem; }
    .artist-hero h1 { font-size:1.9rem; }
    .album-hero h1 { font-size:1.65rem; }
    .cover-placeholder.large { min-height:110px; }
    .track-row { grid-template-columns:2rem minmax(0,1fr) auto; }
    .track-play { display:none; }
    .admin-header { align-items:flex-start; flex-wrap:wrap; }
    .admin-nav { order:3; width:100%; overflow:auto; flex-wrap:nowrap; }
    .stat-grid { grid-template-columns:repeat(2,1fr); }
    .compact-dl div { grid-template-columns:1fr; gap:.2rem; }
    .settings-form-grid { grid-template-columns:1fr; }
    .settings-form-grid > div { grid-column:auto; }
}
.button-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.button-row form { margin:0; }

/* Metadata admin */
.button-link { display:inline-flex; align-items:center; justify-content:center; padding:.68rem .9rem; border-radius:9px; background:var(--accent); color:#07111f; font-weight:700; }
.button-link.button-secondary { background:transparent; color:var(--text); border:1px solid var(--border); }
.text-link { color:var(--accent-strong); text-decoration:underline; }
.admin-panel-heading,.metadata-album-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.admin-panel-heading h2,.metadata-album-heading h2 { margin:0; }
.metadata-stat-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.metadata-source-note { max-width:380px; color:var(--muted); font-size:.85rem; text-align:right; }
.metadata-album-form { margin-top:1rem; }
.settings-form small,.metadata-track-form small { color:var(--muted); font-weight:500; }
.checkbox-label { display:flex!important; grid-column:1 / -1; grid-template-columns:auto 1fr!important; align-items:flex-start; gap:.6rem!important; }
.checkbox-label input { width:auto!important; margin-top:.25rem; }
.metadata-clear-form { margin-top:1rem; }
.inline-form { display:inline-flex; margin:0; }
.remote-results { display:grid; gap:.6rem; margin-top:1rem; }
.remote-result { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem; border:1px solid var(--border); border-radius:10px; background:#12151b; }
.remote-result > div { display:grid; gap:.2rem; min-width:0; }
.remote-result span { color:var(--muted); font-size:.85rem; }
.remote-result form { flex:0 0 auto; }
.metadata-track-list { display:grid; gap:1rem; }
.metadata-track-card { border:1px solid var(--border); border-radius:12px; padding:1rem; background:#12151b; }
.metadata-track-card.has-override { box-shadow:inset 3px 0 0 var(--accent); }
.metadata-track-card > header { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.metadata-track-card > header span { color:var(--muted); font-size:.8rem; }
.metadata-track-form { display:grid; grid-template-columns:2fr 1.25fr .7fr .6fr .6fr 1.7fr; gap:.7rem; align-items:end; }
.metadata-track-form label { display:grid; gap:.3rem; color:var(--muted); font-size:.82rem; font-weight:700; min-width:0; }
.metadata-track-form input { min-width:0; width:100%; padding:.65rem .7rem; border:1px solid var(--border); border-radius:8px; background:#0f1116; color:var(--text); }
.metadata-track-actions { align-self:end; }
.metadata-track-secondary-actions { margin-top:.65rem; }
.track-remote-results { padding-top:.8rem; border-top:1px solid var(--border); }

@media (max-width: 900px) {
    .metadata-stat-grid { grid-template-columns:repeat(3,1fr); }
    .metadata-track-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .admin-panel-heading,.metadata-album-heading { display:grid; }
    .metadata-source-note { text-align:left; }
    .metadata-stat-grid { grid-template-columns:repeat(2,1fr); }
    .metadata-track-form { grid-template-columns:1fr 1fr; }
    .metadata-track-form label:first-of-type,.metadata-track-form label:nth-of-type(2),.metadata-track-form label:last-of-type { grid-column:1 / -1; }
    .remote-result { align-items:flex-start; }
}
.cover-download-box { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:.85rem; border:1px dashed var(--border); border-radius:10px; }
.cover-download-box > div { display:grid; gap:.2rem; }
.cover-download-box span { color:var(--muted); font-size:.85rem; }
@media (max-width:680px) { .cover-download-box { align-items:flex-start; display:grid; } }

/* 0.5 - preferiti, raccolte e ordinamenti */
.album-card-wrap { position:relative; min-width:0; }
.album-card-wrap .album-card { width:100%; height:100%; }
.card-favorite-button,.track-favorite-button,.favorite-action { background:transparent; color:var(--muted); border:1px solid var(--border); }
.card-favorite-button.active,.track-favorite-button.active,.favorite-action.active { color:var(--accent-strong); border-color:var(--accent); }
.card-favorite-button { position:absolute; top:1rem; right:1rem; z-index:2; width:34px; height:34px; padding:0; border-radius:50%; background:rgba(13,15,19,.82); backdrop-filter:blur(5px); }
.favorite-action { margin-top:1rem; border-radius:999px; padding:.7rem 1rem; }
.album-actions { display:flex; gap:.65rem; flex-wrap:wrap; align-items:center; }
.archive-sort { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.85rem; }
.archive-sort select { padding:.55rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); }

/* Tracklist con azioni separate */
.track-row { display:grid; grid-template-columns:minmax(0,1fr) 2.5rem; gap:.25rem; align-items:stretch; padding:0; }
.track-play-area { display:grid; grid-template-columns:3rem minmax(0,1fr) auto 2.5rem; gap:.75rem; align-items:center; width:100%; color:var(--text); text-align:left; background:transparent; border-radius:8px; padding:.65rem .5rem; }
.track-row:hover,.track-row.is-current { background:var(--surface); }
.track-row .track-favorite-button { align-self:center; width:34px; height:34px; padding:0; border-radius:50%; border-color:transparent; }
.track-row .track-favorite-button:hover { background:var(--surface-2); border-color:var(--border); }
.track-duration,.track-num { color:var(--muted); font-weight:500; }
.track-row.is-current .track-main strong,.track-row.is-current .track-num { color:var(--accent-strong); }

.compact-track-list { display:grid; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.compact-track-row { display:grid; grid-template-columns:minmax(0,1fr) 2.7rem; align-items:center; background:var(--surface); border-bottom:1px solid var(--border); }
.compact-track-row:last-child { border-bottom:0; }
.compact-track-row:hover,.compact-track-row.is-current { background:var(--surface-2); }
.compact-track-play { display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto auto; align-items:center; gap:.75rem; min-width:0; text-align:left; color:var(--text); background:transparent; padding:.72rem .8rem; border-radius:0; }
.compact-track-main { display:grid; min-width:0; }
.compact-track-main strong,.compact-track-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-track-main span,.compact-track-duration,.play-count { color:var(--muted); font-size:.8rem; font-weight:500; }
.compact-track-icon { color:var(--muted); text-align:center; }
.compact-track-row.is-current .compact-track-icon,.compact-track-row.is-current .compact-track-main strong { color:var(--accent-strong); }
.compact-track-row .track-favorite-button { width:34px; height:34px; padding:0; border-radius:50%; border-color:transparent; }

/* Coda */
.player { position:relative; }
.queue-panel[hidden] { display:none!important; }
.queue-panel { position:fixed; right:1rem; bottom:calc(var(--player-height) + 1rem); z-index:60; width:min(420px,calc(100vw - 2rem)); max-height:min(66vh,620px); display:grid; grid-template-rows:auto minmax(0,1fr); background:#11141a; border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.45); overflow:hidden; }
.queue-panel > header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid var(--border); }
.queue-panel > header > div { display:grid; }
.queue-list { overflow:auto; padding:.35rem; }
.queue-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.4rem; border-radius:9px; }
.queue-row:hover,.queue-row.is-current { background:var(--surface-2); }
.queue-row.is-current { box-shadow:inset 3px 0 0 var(--accent); }
.queue-track-button { display:grid; min-width:0; gap:.12rem; text-align:left; color:var(--text); background:transparent; padding:.65rem .75rem; border-radius:8px; }
.queue-track-button strong,.queue-track-button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-track-button span { color:var(--muted); font-size:.78rem; font-weight:500; }
.queue-row-actions { display:flex; gap:.15rem; padding-right:.35rem; }
.queue-action-button { width:30px; height:30px; padding:0; border-radius:50%; background:transparent; color:var(--muted); }
.queue-action-button:hover:not(:disabled) { background:var(--surface); color:var(--text); }
.queue-action-button:disabled { opacity:.25; cursor:default; }
.queue-empty { padding:1rem; margin:0; text-align:center; }
.player-expand-button,.player-collapse-button { display:none; }

@media (max-width:680px) {
    .content-header { align-items:flex-start; }
    .archive-sort { align-items:flex-start; flex-direction:column; }
    .track-play-area { grid-template-columns:2rem minmax(0,1fr) auto; gap:.55rem; }
    .track-play-area .track-play { display:none; }
    .compact-track-play { grid-template-columns:1.8rem minmax(0,1fr) auto; gap:.55rem; }
    .compact-track-duration { display:none; }
    .play-count { grid-column:2; }
    .player-expand-button { display:grid; place-items:center; position:absolute; right:4.2rem; top:.55rem; z-index:3; width:30px; height:30px; padding:0; border-radius:50%; background:var(--surface-2); color:var(--text); }
    .player-collapse-button { display:none; }
    body.player-expanded-open { overflow:hidden; }
    .player.is-expanded { position:fixed; inset:0; z-index:100; grid-column:auto; grid-row:auto; display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:1.25rem; min-height:100dvh; padding:max(1rem,env(safe-area-inset-top)) 1.25rem max(1rem,env(safe-area-inset-bottom)); background:var(--bg); }
    .player.is-expanded .now-playing { align-self:center; flex-direction:column; justify-content:center; gap:1rem; width:100%; text-align:center; }
    .player.is-expanded .player-cover-link { width:min(78vw,360px); }
    .player.is-expanded .player-cover-wrap { width:100%; height:auto; aspect-ratio:1; border-radius:18px; }
    .player.is-expanded .player-meta { width:100%; gap:.3rem; }
    .player.is-expanded .player-meta strong { font-size:1.35rem; }
    .player.is-expanded .player-subtitle { display:block; white-space:normal; }
    .player.is-expanded .player-center { display:grid; width:100%; gap:1rem; }
    .player.is-expanded .player-controls { justify-content:center; gap:.8rem; }
    .player.is-expanded .player-center .icon-button { display:grid; width:42px; height:42px; }
    .player.is-expanded .player-center .play-button { width:54px; height:54px; }
    .player.is-expanded .timeline { display:grid; grid-template-columns:40px 1fr 40px; }
    .player.is-expanded .player-expand-button { display:none; }
    .player.is-expanded .player-collapse-button { display:grid; place-items:center; position:absolute; top:max(.75rem,env(safe-area-inset-top)); right:1rem; z-index:3; width:38px; height:38px; padding:0; border-radius:50%; background:var(--surface-2); color:var(--text); }
    .player.is-expanded .volume-control { display:none; }
    .player.is-expanded .queue-panel { position:fixed; inset:auto 0 0; z-index:120; width:100%; max-height:62dvh; border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom); }
}

/* 0.6 - navigazione, PWA e utility mobile */
.mobile-admin-link { display:none; }
.pwa-install-button { display:flex; align-items:center; gap:.45rem; align-self:flex-start; padding:.6rem .75rem; background:transparent; color:var(--muted); border:1px solid var(--border); }
.pwa-install-button:hover { color:var(--text); background:var(--surface-2); }
.pwa-install-button[hidden] { display:none!important; }
.not-found-home { margin-top:1rem; }
.diagnostics-actions { margin-top:1rem; }
@media (max-width:680px) {
    .sidebar { gap:.2rem; }
    .main-nav { width:auto; flex:1 0 auto; justify-content:flex-start; }
    .mobile-admin-link { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; margin-left:.15rem; border-radius:50%; color:var(--muted); background:transparent; border:1px solid transparent; font-size:1rem; }
    .mobile-admin-link:hover,.mobile-admin-link:focus-visible { color:var(--text); background:var(--surface-2); border-color:var(--border); }
    .pwa-install-button { flex:0 0 34px; width:34px; height:34px; justify-content:center; padding:0; border-radius:50%; margin-left:.15rem; }
    .pwa-install-label { display:none; }
}


/* 0.7 - UX, cronologia e player mobile */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.genre-label,#player-genre { text-transform:capitalize; }

/* Focus coerente per navigazione da tastiera senza alterare il mouse/touch. */
:where(a,button,input,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.library-history { display:grid; gap:.75rem; margin:3rem 0 1rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.library-accordion { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.library-accordion summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:52px; padding:.85rem 1rem; cursor:pointer; font-weight:800; list-style:none; user-select:none; }
.library-accordion summary::-webkit-details-marker { display:none; }
.library-accordion summary::after { content:'+'; display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--surface-2); color:var(--muted); font-size:1.15rem; line-height:1; }
.library-accordion[open] summary::after { content:'−'; color:var(--text); }
.library-accordion summary:hover { background:var(--surface-2); }
.library-accordion .accordion-count { margin-left:auto; color:var(--muted); font-size:.78rem; font-weight:600; }
.library-accordion-content { padding:0 .75rem .75rem; }
.library-accordion .compact-track-list { border-radius:10px; }

@media (max-width:680px) {
    .main-nav a { min-height:42px; display:flex; align-items:center; }
    .mobile-admin-link,.pwa-install-button { min-width:38px; min-height:38px; }
    .library-section { margin:1.5rem 0; }
    .library-history { margin-top:2.25rem; }

    /* Il player espanso usa la visual viewport reale e centra ogni blocco sul viewport,
       indipendentemente dalla griglia della shell sottostante. */
    .player.is-expanded {
        position:fixed;
        top:0;
        right:0;
        bottom:auto;
        left:0;
        width:auto;
        max-width:none;
        height:var(--app-viewport-height,100dvh);
        min-height:0;
        margin:0;
        padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:minmax(0,1fr) auto;
        justify-items:center;
        align-items:center;
        overflow-x:hidden;
        overflow-y:auto;
        box-sizing:border-box;
    }
    .player.is-expanded .now-playing,
    .player.is-expanded .player-center {
        justify-self:center;
        width:min(100%,420px);
        max-width:100%;
        min-width:0;
        margin-inline:auto;
        box-sizing:border-box;
    }
    .player.is-expanded .now-playing { align-items:center; }
    .player.is-expanded .player-cover-link {
        width:min(78vw,320px);
        max-width:100%;
        margin-inline:auto;
    }
    .player.is-expanded .player-meta { max-width:100%; margin-inline:auto; }
    .player.is-expanded .player-controls { width:100%; max-width:360px; margin-inline:auto; justify-content:space-between; }
    .player.is-expanded .timeline {
        width:100%;
        min-width:0;
        grid-template-columns:minmax(2.7rem,auto) minmax(0,1fr) minmax(2.7rem,auto);
        gap:.5rem;
    }
    .player.is-expanded .timeline span { min-width:0; white-space:nowrap; text-align:center; font-variant-numeric:tabular-nums; }
    .player.is-expanded .timeline input { display:block; width:100%; min-width:0; margin:0; }
    .player.is-expanded .player-collapse-button {
        top:max(.75rem,env(safe-area-inset-top));
        right:max(.75rem,env(safe-area-inset-right));
    }
}

/* 0.8 - stato utente sincronizzato e queue actions */
.track-row { grid-template-columns:minmax(0,1fr) auto; }
.compact-track-row { grid-template-columns:minmax(0,1fr) auto; }
.track-secondary-actions { display:flex; align-items:center; justify-content:flex-end; gap:.1rem; padding-right:.25rem; }
.queue-track-action,.track-secondary-actions .track-favorite-button { width:34px; height:34px; padding:0; display:grid; place-items:center; border-radius:50%; background:transparent; color:var(--muted); border:1px solid transparent; }
.queue-track-action:hover,.queue-track-action:focus-visible,.track-secondary-actions .track-favorite-button:hover { background:var(--surface-2); border-color:var(--border); color:var(--text); }
.queue-header-actions { display:flex!important; grid-auto-flow:column; align-items:center; gap:.35rem; }
.queue-clear-button { padding:.45rem .65rem; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--muted); font-size:.75rem; }
.queue-clear-button:hover:not(:disabled),.queue-clear-button:focus-visible { color:var(--text); border-color:var(--muted); }
.queue-clear-button:disabled { opacity:.35; cursor:default; }

@media (max-width:680px) {
    .track-secondary-actions { gap:0; padding-right:.1rem; }
    .queue-track-action,.track-secondary-actions .track-favorite-button { width:32px; height:32px; }
    .queue-clear-button { font-size:.7rem; padding:.4rem .55rem; }
}

/* 0.9 - PWA update, accessibilita e feedback UX */
.skip-link {
    position:fixed;
    top:.5rem;
    left:.5rem;
    z-index:300;
    transform:translateY(-160%);
    padding:.65rem .85rem;
    border-radius:10px;
    background:var(--text);
    color:var(--bg);
    font-weight:800;
    transition:transform .16s ease;
}
.skip-link:focus { transform:translateY(0); }

.app-status-region {
    position:fixed;
    left:50%;
    bottom:calc(var(--player-height) + 1rem + env(safe-area-inset-bottom));
    z-index:220;
    max-width:min(92vw,520px);
    padding:.65rem .9rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(23,26,32,.96);
    color:var(--text);
    box-shadow:0 12px 32px rgba(0,0,0,.3);
    opacity:0;
    transform:translate(-50%,.75rem);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
    font-size:.86rem;
    text-align:center;
}
.app-status-region.is-visible { opacity:1; transform:translate(-50%,0); }

.app-update-banner {
    position:fixed;
    top:1rem;
    right:1rem;
    z-index:240;
    width:min(420px,calc(100vw - 2rem));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.85rem 1rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.app-update-banner[hidden] { display:none!important; }
.app-update-banner > div:first-child { display:grid; gap:.18rem; min-width:0; }
.app-update-banner span { color:var(--muted); font-size:.8rem; }
.app-update-actions { display:flex; gap:.4rem; flex:0 0 auto; }
.app-update-actions button { padding:.5rem .65rem; font-size:.78rem; }

body.is-offline::before {
    content:'Offline';
    position:fixed;
    top:.55rem;
    left:50%;
    z-index:210;
    transform:translateX(-50%);
    padding:.25rem .55rem;
    border-radius:999px;
    background:var(--surface-2);
    color:var(--muted);
    border:1px solid var(--border);
    font-size:.7rem;
    font-weight:700;
}

@media (max-width:680px) {
    .app-status-region { bottom:calc(var(--player-height) + 4rem + env(safe-area-inset-bottom)); }
    body.player-expanded-open .app-status-region { bottom:max(1rem,env(safe-area-inset-bottom)); }
    .app-update-banner {
        top:max(.75rem,env(safe-area-inset-top));
        right:.75rem;
        left:.75rem;
        width:auto;
        align-items:flex-start;
        flex-direction:column;
    }
    .app-update-actions { width:100%; }
    .app-update-actions button { flex:1; }
}

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


/* 1.0 RC1 - polish UI, loading states e accessibilita queue/player */
.loading-skeleton { display:grid; gap:1.75rem; }
.skeleton-header { display:grid; gap:.65rem; width:min(520px,80%); }
.skeleton-line,.skeleton-card-cover,.skeleton-card-line {
    position:relative;
    overflow:hidden;
    background:var(--surface);
    border-radius:9px;
}
.skeleton-line::after,.skeleton-card-cover::after,.skeleton-card-line::after {
    content:'';
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
    animation:audio-skeleton 1.15s ease-in-out infinite;
}
.skeleton-line { height:18px; width:48%; }
.skeleton-line.large { height:48px; width:68%; border-radius:12px; }
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:1rem; }
.skeleton-card { display:grid; gap:.7rem; padding:.8rem; border-radius:var(--radius); background:var(--surface); }
.skeleton-card-cover { aspect-ratio:1; border-radius:10px; background:var(--surface-2); }
.skeleton-card-line { height:15px; width:86%; background:var(--surface-2); }
.skeleton-card-line.short { width:58%; opacity:.75; }
@keyframes audio-skeleton { to { transform:translateX(100%); } }

.error-state { display:grid; justify-items:start; gap:.8rem; }
.error-state .notice { margin:0; width:min(100%,680px); }
.error-retry-button { background:transparent; color:var(--text); border:1px solid var(--border); }
.error-retry-button:hover { background:var(--surface-2); }

.queue-panel:focus { outline:none; }
.queue-panel:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:680px) {
    .skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .skeleton-line.large { width:86%; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line::after,.skeleton-card-cover::after,.skeleton-card-line::after { animation:none; display:none; }
}


/* 1.0 - player mobile ultra-stretto (320px+) */
@media (max-width:680px) {
    .player.is-expanded {
        right:auto;
        width:var(--app-viewport-width,100vw);
        max-width:100vw;
        padding-inline:max(.75rem,env(safe-area-inset-left)) max(.75rem,env(safe-area-inset-right));
    }
    .player.is-expanded .now-playing,
    .player.is-expanded .player-center {
        min-width:0;
        max-width:min(100%,420px);
        overflow:visible;
    }
    .player.is-expanded .player-meta,
    .player.is-expanded .player-title,
    .player.is-expanded .player-subtitle {
        min-width:0;
        max-width:100%;
    }
    .player.is-expanded .player-meta strong,
    .player.is-expanded .player-subtitle {
        overflow-wrap:anywhere;
    }
    .player.is-expanded .player-controls {
        display:grid;
        grid-template-columns:minmax(36px,1fr) minmax(36px,1fr) 54px minmax(36px,1fr) minmax(36px,1fr) minmax(36px,1fr);
        align-items:center;
        justify-items:center;
        gap:clamp(.12rem,1vw,.3rem);
        width:100%;
        max-width:360px;
        margin-inline:auto;
    }
    .player.is-expanded .player-center .icon-button { width:42px; max-width:100%; height:42px; }
    .player.is-expanded .player-center .play-button { width:54px; height:54px; }
}

@media (max-width:360px) {
    .content { padding-inline:.75rem; }
    .player.is-expanded {
        padding-top:max(.75rem,env(safe-area-inset-top));
        padding-bottom:max(.75rem,env(safe-area-inset-bottom));
        padding-inline:max(.65rem,env(safe-area-inset-left)) max(.65rem,env(safe-area-inset-right));
        gap:.8rem;
    }
    .player.is-expanded .now-playing { gap:.7rem; }
    .player.is-expanded .player-cover-link {
        width:min(72vw,42dvh,250px);
        max-width:calc(var(--app-viewport-width,100vw) - 2.5rem);
    }
    .player.is-expanded .player-cover-wrap { border-radius:14px; }
    .player.is-expanded .player-meta strong { font-size:1.18rem; line-height:1.15; }
    .player.is-expanded .player-subtitle { font-size:.76rem; line-height:1.35; }
    .player.is-expanded .player-center { gap:.7rem; }
    .player.is-expanded .player-controls {
        grid-template-columns:minmax(32px,1fr) minmax(32px,1fr) 50px minmax(32px,1fr) minmax(32px,1fr) minmax(32px,1fr);
        gap:.15rem;
        max-width:100%;
    }
    .player.is-expanded .player-center .icon-button { width:38px; height:38px; font-size:.92rem; }
    .player.is-expanded .player-center .play-button { width:50px; height:50px; font-size:1rem; }
    .player.is-expanded .timeline {
        grid-template-columns:2.35rem minmax(0,1fr) 2.35rem;
        gap:.35rem;
        font-size:.7rem;
    }
    .player.is-expanded .player-collapse-button {
        top:max(.55rem,env(safe-area-inset-top));
        right:max(.55rem,env(safe-area-inset-right));
        width:36px;
        height:36px;
    }
    .app-update-banner { left:.5rem; right:.5rem; padding:.75rem; }
}

@media (max-width:340px) and (max-height:620px) {
    .player.is-expanded .player-cover-link { width:min(64vw,34dvh,205px); }
    .player.is-expanded .now-playing { gap:.5rem; }
    .player.is-expanded .player-meta strong { font-size:1.08rem; }
    .player.is-expanded .player-center { gap:.5rem; }
}


/* 1.0.1 - resilienza rete, login persistente e feedback player */
.remember-device { display:flex!important; grid-template-columns:auto 1fr; align-items:center; gap:.6rem!important; color:var(--text)!important; font-weight:650!important; cursor:pointer; }
.remember-device input { width:1.1rem!important; height:1.1rem; margin:0; accent-color:var(--accent); }

.track-row.is-loading .track-main strong,
.compact-track-row.is-loading .compact-track-main strong { animation:audio-track-loading 1s ease-in-out infinite alternate; }
.track-row.is-loading .track-play,
.compact-track-row.is-loading .compact-track-icon { color:var(--accent); animation:audio-loading-dot .75s ease-in-out infinite alternate; }
@keyframes audio-track-loading { from { color:var(--text); } to { color:var(--accent); } }
@keyframes audio-loading-dot { from { opacity:.35; transform:scale(.85); } to { opacity:1; transform:scale(1.2); } }

.player-expand-button span { display:block; font-size:1rem; line-height:1; transform:translateY(-1px); }
@media (max-width:820px) {
    .player-expand-button { border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border)); box-shadow:0 3px 12px rgba(0,0,0,.28); }
}

.launch-page { min-height:100dvh; display:grid; place-items:center; padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom)); background:var(--bg); }
.launch-card { width:min(100%,360px); text-align:center; display:grid; justify-items:center; gap:1rem; padding:2rem 1.25rem; }
.launch-brand { font-size:2rem; letter-spacing:.06em; font-weight:950; }
.launch-spinner { width:34px; height:34px; border:3px solid var(--surface-2); border-top-color:var(--accent); border-radius:50%; animation:audio-launch-spin .8s linear infinite; }
.launch-error .launch-spinner { animation:none; border-color:var(--danger); border-top-color:var(--danger); }
.launch-card p { margin:0; color:var(--muted); }
.launch-actions { display:flex; gap:.75rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.launch-link { display:inline-flex; align-items:center; justify-content:center; padding:.72rem 1rem; border-radius:9px; }
@keyframes audio-launch-spin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .track-row.is-loading .track-main strong,
    .compact-track-row.is-loading .compact-track-main strong,
    .track-row.is-loading .track-play,
    .compact-track-row.is-loading .compact-track-icon,
    .launch-spinner { animation:none!important; }
}

/* 1.1 - equalizzatore Web Audio */
.equalizer-button,
.equalizer-button-tablet {
    display:grid;
    place-items:center;
    flex:0 0 36px;
    width:36px;
    height:36px;
    padding:0;
    border-radius:50%;
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
}
.equalizer-button:hover,
.equalizer-button:focus-visible,
.equalizer-button.active,
.equalizer-button-tablet:hover,
.equalizer-button-tablet:focus-visible,
.equalizer-button-tablet.active {
    color:var(--accent-strong);
    background:var(--surface-2);
    border-color:var(--border);
}
.equalizer-button:disabled,
.equalizer-button-tablet:disabled { opacity:.35; cursor:not-allowed; }
.equalizer-button-tablet { display:none; }
.eq-icon { display:flex; align-items:center; justify-content:center; gap:3px; width:18px; height:18px; }
.eq-icon i { position:relative; display:block; width:2px; height:15px; border-radius:2px; background:currentColor; }
.eq-icon i::after { content:''; position:absolute; left:50%; width:6px; height:6px; border-radius:50%; background:currentColor; transform:translate(-50%,-50%); }
.eq-icon i:nth-child(1)::after { top:35%; }
.eq-icon i:nth-child(2)::after { top:68%; }
.eq-icon i:nth-child(3)::after { top:48%; }

.equalizer-panel[hidden] { display:none!important; }
.equalizer-panel {
    position:fixed;
    right:1rem;
    bottom:calc(var(--player-height) + 1rem);
    z-index:70;
    width:min(500px,calc(100vw - 2rem));
    max-height:min(72vh,680px);
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    background:#11141a;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 20px 60px rgba(0,0,0,.48);
    overflow:hidden;
}
.equalizer-panel > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.85rem 1rem;
    border-bottom:1px solid var(--border);
}
.equalizer-panel > header > div { display:grid; gap:.1rem; }
.equalizer-body { overflow:auto; padding:1rem; display:grid; gap:1rem; }
.equalizer-toolbar {
    display:grid;
    grid-template-columns:auto minmax(150px,1fr) auto;
    align-items:end;
    gap:.8rem;
}
.equalizer-switch { display:flex; align-items:center; gap:.5rem; min-height:40px; font-weight:750; }
.equalizer-switch input { width:1.1rem; height:1.1rem; accent-color:var(--accent); }
.equalizer-preset-label { display:grid; gap:.3rem; color:var(--muted); font-size:.75rem; font-weight:700; }
.equalizer-preset-label select {
    width:100%;
    min-height:40px;
    padding:.55rem .7rem;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-2);
    color:var(--text);
}
.equalizer-preamp { display:grid; justify-items:end; gap:.2rem; color:var(--muted); font-size:.72rem; white-space:nowrap; }
.equalizer-preamp strong { color:var(--text); font-size:.86rem; }
.equalizer-bands { display:grid; gap:.45rem; }
.equalizer-bands label {
    display:grid;
    grid-template-columns:minmax(105px,1fr) minmax(120px,2fr) 54px;
    align-items:center;
    gap:.75rem;
    padding:.55rem .65rem;
    border-radius:10px;
    background:var(--surface);
}
.equalizer-bands label > span { display:grid; min-width:0; }
.equalizer-bands label strong { font-size:.82rem; }
.equalizer-bands label small { color:var(--muted); font-size:.68rem; }
.equalizer-bands input { width:100%; min-width:0; }
.equalizer-bands output { color:var(--muted); text-align:right; font-size:.75rem; font-variant-numeric:tabular-nums; }
.equalizer-support { margin:0; color:var(--muted); font-size:.74rem; line-height:1.45; }

@media (min-width:681px) and (max-width:900px) {
    .equalizer-button-tablet { display:grid; }
}

@media (max-width:680px) {
    .player.is-expanded .volume-control {
        display:block;
        position:absolute;
        top:max(.65rem,env(safe-area-inset-top));
        left:max(.65rem,env(safe-area-inset-left));
        z-index:4;
        width:auto;
    }
    .player.is-expanded .volume-control .volume-icon,
    .player.is-expanded .volume-control #volume { display:none; }
    .player.is-expanded .equalizer-button {
        width:38px;
        height:38px;
        border-color:var(--border);
        background:var(--surface-2);
        color:var(--text);
    }
    .player.is-expanded .equalizer-button.active { color:var(--accent-strong); }
    .equalizer-button-tablet { display:none!important; }
    .equalizer-panel {
        inset:auto 0 0;
        z-index:130;
        width:100%;
        max-height:min(78dvh,680px);
        border-radius:18px 18px 0 0;
        border-left:0;
        border-right:0;
        border-bottom:0;
        padding-bottom:env(safe-area-inset-bottom);
    }
    .equalizer-toolbar { grid-template-columns:1fr 1.4fr; align-items:end; }
    .equalizer-preamp { grid-column:1 / -1; grid-template-columns:1fr auto; justify-items:stretch; align-items:center; }
    .equalizer-preamp strong { justify-self:end; }
    .equalizer-bands label { grid-template-columns:82px minmax(0,1fr) 48px; gap:.5rem; padding:.5rem; }
    .equalizer-bands label small { display:none; }
}

@media (max-width:340px) {
    .equalizer-body { padding:.8rem; }
    .equalizer-toolbar { grid-template-columns:1fr; }
    .equalizer-preamp { grid-column:auto; }
    .equalizer-bands label { grid-template-columns:64px minmax(0,1fr) 45px; gap:.4rem; }
    .equalizer-bands output { font-size:.68rem; }
}

/* 1.2 - analizzatore di spettro Web Audio */
.spectrum-mini,
.spectrum-main {
    overflow:hidden;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(120,167,255,.035),rgba(17,20,26,.98));
}
.spectrum-mini canvas,
.spectrum-main canvas {
    display:block;
    width:100%;
    height:100%;
}
.spectrum-mini { display:none; }
.spectrum-main { display:none; }

@media (max-width:680px) {
    :root {
        --mobile-spectrum-height:36px;
        --mobile-player-height:72px;
        --mobile-nav-height:50px;
    }

    /* In modalità mobile compatta: contenuto -> spettro -> mini-player -> menu. */
    .app-shell {
        grid-template-rows:minmax(0,1fr) 0 auto auto;
    }
    body.has-audio-track .app-shell {
        grid-template-rows:minmax(0,1fr) var(--mobile-spectrum-height) auto auto;
    }
    .spectrum-mini {
        display:block;
        grid-column:1;
        grid-row:2;
        height:0;
        min-height:0;
        border-top:1px solid transparent;
        border-bottom:1px solid transparent;
        background:#101319;
    }
    body.has-audio-track .spectrum-mini {
        height:var(--mobile-spectrum-height);
        border-top-color:var(--border);
        border-bottom-color:var(--border);
    }
    .player {
        grid-row:3;
        min-height:var(--mobile-player-height);
        padding:.55rem .75rem;
        border-top:0;
    }
    .sidebar {
        grid-row:4;
        min-height:var(--mobile-nav-height);
        padding-bottom:calc(.35rem + env(safe-area-inset-bottom));
    }
    .app-status-region {
        bottom:calc(var(--mobile-player-height) + var(--mobile-nav-height) + var(--mobile-spectrum-height) + .75rem + env(safe-area-inset-bottom));
    }

    /* Nel fullscreen lo stesso analizzatore diventa una fascia più ampia. */
    .player.is-expanded .spectrum-main {
        display:block;
        width:100%;
        height:clamp(40px,7dvh,64px);
        min-height:40px;
        border:1px solid var(--border);
        border-radius:12px;
        background:linear-gradient(180deg,rgba(120,167,255,.06),rgba(17,20,26,.3));
    }
    body.player-expanded-open .spectrum-mini { visibility:hidden; }
}

@media (max-width:340px), (max-height:620px) {
    .player.is-expanded .spectrum-main {
        height:38px;
        min-height:38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spectrum-mini,
    .spectrum-main { opacity:.65; }
}

/* Desktop/tablet: spettro discreto sullo sfondo del blocco centrale, senza aumentare il player. */
@media (min-width:681px) {
    .player-center { position:relative; isolation:isolate; }
    .player-center > .player-controls,
    .player-center > .timeline { position:relative; z-index:1; }
    .spectrum-main {
        display:block;
        position:absolute;
        inset:.05rem 0;
        z-index:0;
        opacity:.20;
        background:transparent;
        mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
        -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    }
}

@media (max-width:680px) {
    .player.is-expanded .spectrum-main {
        position:static;
        inset:auto;
        opacity:1;
        mask-image:none;
        -webkit-mask-image:none;
    }
}